--fill-*/--text-* tokens (Phase-14): zero hardcoded structural hex. The four status-chip colors are NOT here — they live in the stride-ui.js STATUS_COLORS JS hex-mirror,set inline per row and proven >= 4.5:1 by tests/token-contrast.spec.js. */ .stride-layout{display:grid;grid-template-columns:minmax(16rem,26rem) 1fr;gap:1.25rem;align-items:start}@media(max-width:720px){.stride-layout{grid-template-columns:1fr}}[id=add-element-form]{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;margin-bottom:1rem}[id=add-element-form] label{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem;font-weight:600}.toolbar{margin-bottom:.75rem}.toolbar input[type=search]{width:100%;max-width:24rem;box-sizing:border-box}#stride-element-table{width:100%;border-collapse:collapse}#stride-element-table th,#stride-element-table td{border:1px solid var(--gray-5);padding:.4rem .55rem;text-align:left;vertical-align:middle;font-size:.9rem}#stride-element-table thead th{background:var(--fill-surface);font-weight:700;white-space:nowrap;position:sticky;top:0;z-index:1}#stride-element-table tbody tr:nth-child(2n){background:#00000009}#stride-element-table tbody tr:hover{background:#00000012}#stride-element-table tbody tr[aria-current=true]{outline:2px solid var(--gray-9);outline-offset:-2px;font-weight:600}#stride-element-table td:last-child{white-space:nowrap}#stride-element-table .sort-btn{display:inline-flex;align-items:center;gap:.3rem;min-height:1.6rem;padding:.2rem .3rem;border:none;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;text-align:left}#stride-element-table th[aria-sort=ascending] .sort-btn:after{content:" ▲";font-size:.7em}#stride-element-table th[aria-sort=descending] .sort-btn:after{content:" ▼";font-size:.7em}#stride-element-table .sort-btn:focus-visible{outline:2px solid var(--gray-9);outline-offset:1px}.element-name-btn{min-height:1.6rem;padding:.15rem .25rem;border:none;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;text-align:left}.element-name-btn:hover{text-decoration:underline}.element-name-btn:focus-visible{outline:2px solid var(--gray-9);outline-offset:1px}.kind-badge{display:inline-block;padding:.05rem .45rem;border:1px solid var(--gray-7);background:var(--fill-control);color:var(--text-body);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.status-chip{display:inline-block;padding:.1rem .5rem;border:1px solid var(--gray-9);font-weight:700;font-size:.8rem}#stride-element-table td .btn{min-height:1.6rem;min-width:1.6rem;padding:.2rem .5rem;font-size:.85rem;font-weight:700}#stride-list-empty{margin-top:.75rem}#stride-list-empty .empty-msg{color:var(--gray-7);font-style:italic;margin:0 0 .5rem}.stride-row{margin-bottom:1rem}.stride-row h3{margin:0 0 .5rem}.status-wrap{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap}.stride-row label{display:block;font-weight:600;margin-bottom:.25rem}.stride-row textarea{width:100%;box-sizing:border-box;min-height:3.5rem;resize:vertical}.stride-row select{min-height:1.6rem}.status-badge{border:1px solid var(--gray-9)}#stride-detail-empty{color:var(--gray-7);font-style:italic}@media(prefers-reduced-motion:reduce){#stride-element-table .sort-btn,.element-name-btn{transition:none}}
