.categories-page { --category-accent-bg: color-mix(in srgb, var(--focus) 9%, var(--surface)); }
.categories-page .category-secondary { color: var(--ink-soft); }
.categories-page select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: .45rem .6rem; max-width: 100%; min-width: 0; }
.category-topbar { height: auto; min-height: 3.25rem; flex-wrap: wrap; padding: .65rem 1.25rem; gap: .75rem 1rem; }
.category-level { flex: 0 1 21rem; min-width: 0; }
.category-level select { width: 100%; font-size: .85rem; }
.category-nav { margin-left: auto; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.category-main { display: block; height: auto; max-width: 1540px; margin: 0 auto; padding: 1.7rem 1.5rem; }
.category-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.35rem; }
.category-heading h1 { font-size: 1.65rem; margin: .3rem 0; }
.category-heading .category-secondary { font-size: .85rem; }
.category-eyebrow { color: var(--ink-soft); font-size: .72rem; letter-spacing: .09em; }
.category-dataset { display: flex; flex-direction: column; gap: .35rem; color: var(--ink-soft); font-size: .8rem; max-width: 100%; }
.category-dataset select { width: 20rem; font-size: .8rem; }
.category-notice { padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid var(--rule); border-left: 3px solid var(--danger); border-radius: 6px; background: var(--surface); display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
.category-loading, .category-empty { padding: 3rem 1.5rem; text-align: center; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--rule-soft); border-radius: 10px; }
.category-empty h2 { color: var(--ink); margin-bottom: .5rem; }
.category-empty a { display: inline-block; margin-top: 1rem; }
.category-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.25rem; align-items: start; }
.category-comparison { min-width: 0; }
.category-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.category-pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.category-pills button { padding: .45rem .7rem; font-size: .8rem; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--rule); font-weight: 550; overflow-wrap: anywhere; }
.category-pills button[aria-pressed="true"] { background: var(--category-accent-bg); color: var(--focus); border-color: var(--focus); }
.category-pills .category-pill-count { margin-left: .5rem; font-size: .75rem; opacity: .85; }
.category-view { display: flex; gap: .2rem; padding: .25rem; border: 1px solid var(--rule); border-radius: 7px; background: var(--surface); }
.category-view button { background: transparent; color: var(--ink-soft); font-size: .8rem; padding: .4rem .65rem; font-weight: 550; }
.category-view button[aria-pressed="true"] { background: var(--category-accent-bg); color: var(--focus); }
.category-list-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; color: var(--ink-soft); font-size: .8rem; margin-bottom: .75rem; }
.category-list-head label { display: flex; align-items: center; gap: .5rem; }
.category-list-head select { padding: .3rem .45rem; font-size: .8rem; }
.category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.category-object { display: flex; flex-direction: column; min-width: 0; padding: 0; text-align: left; border: 1px solid var(--rule); border-radius: 9px; overflow: hidden; background: var(--surface); color: var(--ink); font-weight: 500; }
.category-object:hover:not(:disabled) { filter: none; border-color: var(--focus); }
.category-object[aria-pressed="true"] { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.category-object[aria-pressed="true"] .category-object-id { color: var(--focus); }
.category-object canvas { display: block; width: 100%; aspect-ratio: 1.18; background: var(--surface-2); }
.category-object-id { display: block; padding: .65rem .65rem 0; font-size: .8rem; overflow-wrap: anywhere; }
.category-object-time { display: block; padding: .15rem .65rem .65rem; font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.category-benchmark { display: flex; gap: .75rem; justify-content: space-between; flex-wrap: wrap; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: .78rem; }
.category-benchmark #reference { font-variant-numeric: tabular-nums; }
.category-measurement-note { margin-top: .45rem; color: var(--ink-soft); font-size: .76rem; }
.category-inspector { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; position: sticky; top: 5rem; }
.category-inspector-head { padding: .9rem 1rem; color: var(--ink-soft); font-size: .68rem; letter-spacing: .04em; border-bottom: 1px solid var(--rule-soft); }
.category-inspector canvas { display: block; width: 100%; aspect-ratio: 1.18; background: var(--surface-2); }
.category-detail { padding: 1rem; }
.category-detail h2 { font-family: var(--mono); font-size: .9rem; margin-bottom: .2rem; overflow-wrap: anywhere; }
.category-detail .category-detail-category { color: var(--ink-soft); font-size: .78rem; margin-bottom: 1rem; }
.category-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem .5rem; margin: 0; font-size: .8rem; }
.category-facts dt { color: var(--ink-soft); }
.category-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.category-ratio { border-top: 1px solid var(--rule-soft); padding-top: .8rem; margin-top: .9rem; font-size: .8rem; color: var(--ink-soft); }
.category-open { display: flex; justify-content: space-between; gap: .5rem; padding: .9rem 1rem; border-top: 1px solid var(--rule-soft); text-decoration: none; color: var(--focus); font-size: .85rem; }
.category-open:hover { background: var(--category-accent-bg); }
.category-source { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.5rem; color: var(--ink-soft); font-size: .76rem; overflow-wrap: anywhere; }
@media (max-width: 1200px) { .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .category-workspace { grid-template-columns: minmax(0, 1fr) 240px; } .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .category-main { padding: 1.25rem; } .category-nav { margin-left: 0; } }
@media (max-width: 720px) { .category-workspace { grid-template-columns: minmax(0, 1fr); } .category-inspector { position: static; display: grid; grid-template-columns: 40% minmax(0, 1fr); } .category-inspector-head { grid-column: 1 / -1; } .category-open { grid-column: 1 / -1; } .category-inspector canvas { align-self: center; } .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 450px) { .category-main { padding: 1rem .75rem; } .category-topbar { padding: .7rem .75rem; } .category-level { flex-basis: 100%; } .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-inspector { display: block; } .category-dataset, .category-dataset select { width: 100%; } .category-heading h1 { font-size: 1.4rem; } .category-notice { flex-wrap: wrap; } }
@media (pointer: coarse) { .category-view button, .category-pills button, .categories-page select, .category-nav a, .category-nav button { min-height: 44px; } .categories-page select { font-size: 16px; } }