/* /capabilities/catalogue/ and /capabilities/reference/: group pages with expandable record rows, the mini diagram strip, global search, reference tables.
   Shared parts only: .page-hero, .sec-head, .tile, .btn, .chip-btn, .badge tokens from system.css. Text sizes follow the site scale (14 px body, 12 px small, 11.5 px code); strip text is 12 px or more.
   Without JavaScript every detail block is visible (the `js` class is set in the page head); nothing moves on its own. */

.cat-hero { z-index: 5; }
.cat-hero .eyebrow a { color: inherit; text-decoration: none; }
.cat-hero .eyebrow a:hover { color: var(--text); }
.cat-sec { padding-top: clamp(1rem, 2vw, 2rem); }
.cat-sec section[id], .rec { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ---- cards (index) ---- */
.cat-gcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.cat-gcs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat-gcs { grid-auto-rows: 1fr; }
.cat-gcs > li { display: flex; min-width: 0; }
.cat-gc { flex: 1; align-items: stretch; gap: .5rem; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cat-gc:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); }
.cat-gc .link-arrow { margin-top: auto; }
.cat-gc h3 { font: var(--text-card-title); letter-spacing: normal; text-wrap: balance; }
.cat-gc p { font-size: var(--text-body-size); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cat-gc__k { display: flex; align-items: center; gap: .75rem; }
.cat-gc__k b:not(.cat-tile) { font: 600 1.5rem/1 var(--mono); background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cat-gc__k span { font: var(--text-small); color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase; }

/* ---- search ---- */
.cs-search { position: relative; width: 100%; display: grid; gap: .5rem; }
.cs-search__l { font: var(--text-small); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cs-search__f { position: relative; }
.cs-search__ico { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; background: var(--text-faint); -webkit-mask: var(--ico-search) center / contain no-repeat; mask: var(--ico-search) center / contain no-repeat; }
.cs-search__i, .cat-filter, .rt-sel input, .rt-sel select { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--border-hover); border-radius: var(--r-control); background: var(--surface-1); color: var(--text); font: var(--text-body); }
.cs-search__i, .cat-filter { height: 46px; padding: 0 3rem 0 2.75rem; border-radius: 12px; font: 400 .9375rem/1 var(--font); }
.cat-filter::-webkit-search-cancel-button { display: none; }
.cs-search__i::placeholder, .cat-filter::placeholder, .rt-sel input::placeholder { color: var(--text-faint); }
.cs-search__i:focus-visible, .cat-filter:focus-visible, .rt-sel input:focus-visible, .rt-sel select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-control); }
.cs-res { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); padding: 6px; border: 1px solid var(--border-hover); border-radius: var(--r-panel); background-color: var(--bg); background-image: linear-gradient(var(--surface-2), var(--surface-2)); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); }
.cs-search .cs-res { top: calc(100% - .4rem + 6px); }
.cs-res__g { padding: 8px 10px 4px; font: var(--text-small); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.cs-res__o { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 .75rem; padding: 7px 10px; border-radius: var(--r-control); color: var(--text); text-decoration: none; align-items: baseline; }
.cs-res__o i { font: var(--text-code); font-style: normal; color: var(--text-dim); }
.cs-res__o span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-res__o small { grid-column: 2; font-size: var(--text-small-size); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-res__o:hover, .cs-res__o[aria-selected="true"] { background: rgba(255, 255, 255, .07); }
:root[data-theme="light"] .cs-res__o:hover, :root[data-theme="light"] .cs-res__o[aria-selected="true"] { background: rgba(0, 0, 0, .06); }
.cs-res__o[aria-selected="true"] { outline: 2px solid var(--focus); outline-offset: -2px; }
.cs-res__none { padding: 10px; color: var(--text-dim); }
:root { --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.500 7-10V6z'/%3E%3C/svg%3E");
  --ico-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.700 0l3-3a4 4 0 0 0-5.700-5.700l-1 1M14 10a4 4 0 0 0-5.700 0l-3 3a4 4 0 0 0 5.700 5.700l1-1'/%3E%3C/svg%3E"); }
html:not(.js) .cs-search, html:not(.js) .cat-tools, html:not(.js) .rt-tools { display: none; }

/* ---- group page: tools, jump list ---- */
.cat-chips { display: flex; flex-wrap: wrap; }
.cat-count { justify-self: end; color: var(--text-faint); font: var(--text-small); letter-spacing: .04em; }
.cat-count b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-jump ul, .cat-jumpd ul { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; margin: 0; padding: 0; }
.cat-jump a { display: inline-flex; gap: .45rem; align-items: baseline; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); text-decoration: none; font-size: var(--text-small-size); line-height: 1.5; }
.cat-jump a:hover { color: var(--text); border-color: var(--border-hover); }
.cat-jump a span { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cat-jumpd summary { cursor: pointer; width: fit-content; padding: 3px 4px; color: var(--text-dim); font-size: var(--text-body-size); }
.cat-jumpd summary:hover { color: var(--text); }
.cat-jumpd[open] summary { margin-bottom: 10px; }
.cat-sgs { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.cat-sg__h { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 8px; font: var(--text-card-title); letter-spacing: normal; max-width: none; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.cat-sg__n { font: var(--text-small); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cat-sg__n b { font-weight: 600; color: var(--text-dim); }
.cat-list { display: grid; list-style: none; margin: 0; padding: 0; }
.cat-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(2rem, 4vw, 3rem); }
.cat-pn a { display: grid; gap: .25rem; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); text-decoration: none; color: var(--text); }
.cat-pn a:hover { border-color: var(--border-hover); }
.cat-pn a span { font: var(--text-small); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cat-pn a[rel="next"] { text-align: right; }

/* ---- record row ---- */
.rec { border-bottom: 1px solid var(--border); container-type: inline-size; }
.rec__h { margin: 0; font: inherit; letter-spacing: normal; max-width: none; text-wrap: auto; }
.rec__b { position: relative; display: grid; grid-template-columns: 5.75rem minmax(0, 1fr) auto; grid-template-areas: "id nm bd" ". nt nt"; gap: 2px 12px; align-items: baseline; width: 100%; padding: 12px 34px 12px 4px; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; border-radius: 6px; }
.rec__b:hover { background: rgba(255, 255, 255, .03); }
:root[data-theme="light"] .rec__b:hover { background: rgba(0, 0, 0, .03); }
.rec__b:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rec__b::after { content: ''; position: absolute; right: 12px; top: 18px; width: 7px; height: 7px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.rec__b[aria-expanded="true"]::after { transform: rotate(-135deg); top: 21px; }
.rec__id { grid-area: id; font: var(--text-code); letter-spacing: .02em; color: var(--text-faint); white-space: nowrap; }
.rec__name { grid-area: nm; font: var(--text-card-title); color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.rec__badges { grid-area: bd; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rec__note { grid-area: nt; color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rec__b[aria-expanded="true"] .rec__note { display: none; }
.cb { display: inline-block; padding: 1px 8px; border: 1px solid var(--border-hover); border-radius: 999px; font: var(--text-small); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; line-height: 1.6; }
.cb--dep { color: var(--notice); border-color: color-mix(in srgb, var(--notice) 45%, transparent); }
.cb--dev { border-style: dashed; }
.rec--dep .rec__id, .rec--dep .rec__name, .rec--dep .rec__note { opacity: .62; }
.rec--dep .rec__b[aria-expanded="true"] .rec__name { opacity: .8; }

/* detail: visible without JavaScript, hidden once the script has initialised */
.rec__d { padding: 4px 4px 18px 6.5rem; display: grid; gap: 14px; justify-items: start; }
.js .rec__d { display: none; }
.js .rec.is-open .rec__d { display: grid; }
html:not(.js) .rec__note { display: none; }
html:not(.js) .rec__b { cursor: default; }
html:not(.js) .rec__b::after { display: none; }
.rec__full { color: var(--text); max-width: 74ch; line-height: 1.55; }
.rec__ref { display: grid; gap: 8px; margin: 0; max-width: 78ch; width: 100%; }
.rec__ref > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.rec__ref dt { font: var(--text-small); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding-top: 2px; }
.rec__ref dd { margin: 0; color: var(--text-dim); overflow-wrap: anywhere; line-height: 1.5; }
.rec__cav { max-width: 78ch; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--notice) 40%, transparent); border-left-width: 3px; border-radius: var(--r-control); background: color-mix(in srgb, var(--notice) 8%, transparent); color: var(--text-dim); line-height: 1.5; }
.rec__cav b { color: var(--text); margin-right: .5rem; font: var(--text-small); letter-spacing: .08em; text-transform: uppercase; }
.rec__copy { display: inline-flex; align-items: center; gap: 6px; color: var(--text-faint); text-decoration: none; font-size: var(--text-small-size); padding: 2px 4px; border-radius: 6px; }
.rec__copy span { width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ico-link) center / contain no-repeat; mask: var(--ico-link) center / contain no-repeat; }
.rec__copy i { font-style: normal; }
.rec__copy:hover { color: var(--text); }

/* ---- the mini diagram strip ---- */
.cs { container-type: inline-size; display: grid; gap: 10px; justify-items: center; width: 100%; max-width: 62rem; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface-1) 70%, transparent); }
.cs--dev { border-style: dashed; border-color: var(--border-hover); }
.cs__row { display: grid; grid-template-columns: fit-content(13.75rem) 40px fit-content(22.5rem) 40px fit-content(13.75rem); justify-content: center; align-items: center; width: 100%; max-width: 100%; padding: 0 8px; box-sizing: border-box; }
.cs__row--i { grid-template-columns: fit-content(13.75rem) 40px fit-content(22.5rem); }
.cs__row--o { grid-template-columns: fit-content(22.5rem) 40px fit-content(13.75rem); }
.cs__row--n { grid-template-columns: fit-content(22.5rem); }
.cs__side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs__in { align-items: flex-end; }
.cs__out { align-items: flex-start; }
.cs__c, .cs__fn, .cs__g, .cs__dn { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 11px; border: 1px solid var(--border-hover); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: .75rem; line-height: 1.3; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; word-break: normal; text-align: left; }
.cs__c { max-width: 13.75rem; }
.cs__fn { min-height: 40px; max-width: 22.5rem; justify-content: center; text-align: center; padding: 8px 12px; font-size: .8125rem; font-weight: 500; border-color: var(--brand-magenta); background: color-mix(in srgb, var(--brand-magenta) 14%, var(--surface-1)); }
.cs__fn--long .cs__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.cs--dev .cs__fn { border-style: dashed; }
.cs__cn { display: flex; align-items: center; justify-content: center; width: 40px; color: var(--text-faint); }
.cs__ah, .cs__av { display: block; flex: none; }
.cs__av { display: none; }
.cs__guard { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 34rem; }
.cs__g { min-height: 30px; padding-left: 8px; gap: 6px; border-color: color-mix(in srgb, var(--brand-blue) 55%, var(--border-hover)); }
.cs__g::before { content: ''; flex: none; width: 13px; height: 13px; background: var(--brand-blue); -webkit-mask: var(--ico-shield) center / contain no-repeat; mask: var(--ico-shield) center / contain no-repeat; }
.cs__dep { display: grid; justify-items: center; }
.cs__dl { width: 0; height: 14px; border-left: 2px dashed var(--text-faint); }
.cs__dn { min-height: 30px; border-style: dashed; color: var(--text-dim); }
.cs__dn i { font-style: normal; color: var(--text-faint); margin-right: .45rem; }
@container (max-width: 46rem) {
  .cs__row, .cs__row--i, .cs__row--o, .cs__row--n { grid-template-columns: minmax(0, 22.5rem); justify-items: center; }
  .cs__side { width: 100%; align-items: center; }
  .cs__in, .cs__out { align-items: center; }
  .cs__cn { width: 100%; height: 28px; }
  .cs__ah { display: none; } .cs__av { display: block; }
  .cs__fn { max-width: 100%; }
}

@container (max-width: 34rem) {
  .rec__ref > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@container (max-width: 40rem) {
  .rec__b { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id bd" "nm nm" "nt nt"; }
  .rec__d { padding-left: 4px; }
}

/* ---- reference tables ---- */
.rt-tools { display: grid; grid-template-columns: minmax(0, 20rem) repeat(2, minmax(0, 14rem)) 1fr; gap: 12px 16px; align-items: end; margin-bottom: 18px; }
.rt-tools .cat-count { align-self: center; }
.rt-sel { display: grid; gap: .3rem; }
.rt-sel label { font: var(--text-small); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.rt-sel select { padding-right: 8px; }
.rt { width: 100%; border-collapse: collapse; table-layout: auto; }
.rt th { text-align: left; font: var(--text-small); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 8px 12px 8px 4px; border-bottom: 1px solid var(--border-hover); }
.rt td { vertical-align: top; padding: 10px 12px 10px 4px; border-bottom: 1px solid var(--border); color: var(--text-dim); overflow-wrap: anywhere; line-height: 1.5; }
.rt td code { background: none; border: 0; padding: 0; color: var(--text); font: var(--text-code); overflow-wrap: anywhere; }
.rt small { display: block; margin-top: 2px; color: var(--text-faint); font-size: var(--text-small-size); }
.rt-meth { display: inline-block; padding: 1px 8px; border: 1px solid var(--border-hover); border-radius: 6px; font: var(--text-code); color: var(--text); }
.rt-m { width: 5.5rem; } .rt-n { width: 3.5rem; } .rt-s { width: 9rem; }
.rt-t { width: 16rem; color: var(--text); }

@media (max-width: 62rem) {
  .cat-gcs, .cat-gcs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-count { justify-self: start; }
  .rt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-sel--q { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  .rt, .rt tbody, .rt tr, .rt td { display: block; width: 100%; }
  .rt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rt tr { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); }
  .rt td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; padding: 4px 0; border: 0; }
  .rt td::before { content: attr(data-label); font: var(--text-small); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding-top: 2px; }
  .rt td.rt-m, .rt td.rt-n, .rt td.rt-s, .rt td.rt-t { width: 100%; }
}
@media (max-width: 40rem) {
  .cat-gcs, .cat-gcs--4 { grid-template-columns: minmax(0, 1fr); }
  .cat-pn { grid-template-columns: minmax(0, 1fr); }
  .cat-pn a[rel="next"] { text-align: left; }
  .rt-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .rec__b::after { transition: none; } }
/* the group lists and reference tables are one very tall block: the scroll-reveal (threshold 4% of the element) would keep them invisible on load, so they are always shown */
.cat-sgs.rv, .rt.rv, .fx .cat-sgs.rv, .fx .rt.rv, html.js.fx .cat-sgs.rv, html.js.fx .rt.rv { opacity: 1; transform: none; transition: none; }

/* ================= redesigned top section (index + group pages) ================= */
/* group hues, fixed order A..J (orange to blue); the same on the index card tile and the group badge */
.cat-h-a { --h1: #FBBA02; --h2: #FC6A02; --hx: #0a0b10; } .cat-h-b { --h1: #FC6A02; --h2: #F8421C; --hx: #0a0b10; } .cat-h-c { --h1: #F8421C; --h2: #F81530; --hx: #fff; }
.cat-h-d { --h1: #F81530; --h2: #D8244E; --hx: #fff; } .cat-h-e { --h1: #D8244E; --h2: #C02E62; --hx: #fff; } .cat-h-f { --h1: #C02E62; --h2: #8A6FE8; --hx: #fff; }
.cat-h-g { --h1: #8A6FE8; --h2: #6A6EDC; --hx: #fff; } .cat-h-h { --h1: #6A6EDC; --h2: #5A5DCB; --hx: #fff; } .cat-h-i { --h1: #5A5DCB; --h2: #2F7FE8; --hx: #fff; } .cat-h-j { --h1: #2F7FE8; --h2: #0189FD; --hx: #fff; }
.cat-tile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--h1), var(--h2)); color: var(--hx); font: 700 1.25rem/1 var(--mono); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 8px 20px -10px var(--h2); }
.cat-tile--lg { margin-top: .15rem; }

.cat-hero > .wrap { gap: 1.5rem; }
.cat-hero { padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.cat-head { display: grid; gap: .6rem; min-width: 0; }
.cat-head .lede { font-size: 1rem; line-height: 1.55; max-width: 62ch; }
.cat-key { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* breadcrumb */
.cat-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; list-style: none; margin: 0; padding: 0; font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cat-crumb li + li::before { content: '\203A'; margin-right: .5rem; color: var(--text-faint); }
.cat-crumb a { color: var(--text-dim); text-decoration: none; }
.cat-crumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cat-crumb [aria-current] { color: var(--text); }

/* facts row: the same glass chips as /specification */
.cat-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-facts li { display: inline-flex; align-items: center; gap: .45rem; min-height: 28px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 .75rem/1 var(--mono); letter-spacing: .02em; color: var(--text-dim); }
.cat-facts svg { width: 14px; height: 14px; flex: none; }
.cat-facts a { color: inherit; text-decoration: none; }
.cat-facts li:has(a) { transition: border-color .15s ease, color .15s ease; }
.cat-facts li:has(a):hover, .cat-facts li:has(a:focus-visible) { color: var(--text); border-color: var(--border-hover); }
.cat-facts a:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: 999px; }

/* group title row */
.cat-hero--grp { padding-bottom: .5rem; }
.cat-hero--grp > .wrap { grid-template-columns: minmax(0, 1fr) 27rem; grid-template-areas: "crumb crumb" "ttl ttl" "facts srch"; align-items: center; column-gap: 1.5rem; }
.cat-hero--grp .cat-crumb { grid-area: crumb; } .cat-hero--grp .cat-ttl { grid-area: ttl; } .cat-hero--grp .cat-facts { grid-area: facts; } .cat-hero--grp .cat-gs { grid-area: srch; } .cat-hero--grp .cat-gpn { grid-row: 2; grid-column: 2; }
.cat-hero--grp .cat-ttl { padding-right: 9rem; }
.cat-ttl { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.cat-gpn { display: flex; gap: .5rem; align-self: start; justify-self: end; }
.cat-gl { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); text-decoration: none; font: 500 .8125rem/1 var(--mono); transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.cat-gl svg { width: 14px; height: 14px; }
.cat-gl:hover { color: var(--text); border-color: var(--border-hover); background: rgba(255, 255, 255, .05); }
.cat-gl:focus-visible, .cat-ex:focus-visible, .cat-clear:focus-visible, .cs-search__x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cat-gs { width: 100%; }
.cat-gs .cs-search__i { height: 40px; font-size: .875rem; }
.cat-gs .cs-res { left: auto; right: 0; width: min(36rem, calc(100vw - 2.5rem)); }

/* glass card: search + filters */
.cat-card { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-theme="light"] .cat-card, :root[data-theme="light"] .cat-facts li, :root[data-theme="light"] .cat-gc { background: rgba(0, 0, 0, .03); }
.cat-card--search { width: 100%; display: grid; gap: .85rem; }
.cs-search__l { font: 500 .75rem/1.4 var(--mono); }
.cs-search__kbd { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); min-width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border-hover); border-radius: 6px; font: 500 .75rem/1 var(--mono); color: var(--text-faint); pointer-events: none; }
.cs-search__f:focus-within .cs-search__kbd, .cs-search__f.has-text .cs-search__kbd { display: none; }
.cs-search__x { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; }
.cs-search__x:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.cs-search__x[hidden] { display: none; }
.cs-search__x svg { width: 14px; height: 14px; }
.cat-hint { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: .8125rem; color: var(--text-faint); }
.cat-ex { min-height: 28px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--text-dim); font: 500 .75rem/1 var(--mono); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.cat-ex:hover { color: var(--text); border-color: var(--border-hover); }

/* group filter card */
.cat-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; margin-bottom: 18px; }
.cat-tools__f { position: relative; }
.cat-tools__r { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.cat-chips { gap: .5rem; }
.cat-chip { --dot: var(--text-dim); display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; height: 36px; padding: 0 .85rem; border-radius: 999px; font: 500 .875rem/1 var(--font); transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.cat-chip[data-flag="opt"] { --dot: #9094F5; } .cat-chip[data-flag="dep"] { --dot: #FC6A02; } .cat-chip[data-flag="sta"] { --dot: #0189FD; } .cat-chip[data-flag="dev"] { --dot: #C02E62; }
.cat-chip:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .07); border-color: var(--border-hover); }
.cat-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dot); box-shadow: 0 0 8px color-mix(in srgb, var(--dot) 55%, transparent); }
.cat-chip[aria-pressed="true"] { color: var(--text); border-color: var(--dot); background: color-mix(in srgb, var(--dot) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dot) 45%, transparent), 0 0 18px color-mix(in srgb, var(--dot) 30%, transparent); }
.cat-status { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; margin-left: auto; }
.cat-status .cat-count { font-size: .8125rem; letter-spacing: normal; }
.cat-clear { padding: 0; border: 0; background: none; font: 500 .8125rem/1.4 var(--font); color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cat-clear:hover { color: var(--text); }
.cat-clear[hidden] { display: none; }
.cat-tools .cat-count { justify-self: auto; }

@media (max-width: 64rem) { .cat-gcs, .cat-gcs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 59.99rem) {
  .cat-hero--grp > .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumb" "ttl" "facts" "gpn" "srch"; }
  .cat-gpn { justify-self: start; }
  .cat-hero--grp .cat-gpn { grid-area: gpn; }
  .cat-hero--grp .cat-ttl { padding-right: 0; }
  .cat-gs .cs-res { left: 0; width: auto; }
}
@media (max-width: 40rem) {
  .cat-gcs, .cat-gcs--4 { grid-template-columns: minmax(0, 1fr); }
  .cat-card { padding: 14px; }
  .cat-chips { gap: 8px 6px; }
  .cat-chip { padding: 0 .65rem; font-size: .8125rem; }
  .cat-tile--lg { width: 40px; height: 40px; }
  .cs-search__kbd { display: none; }
  .cs-search__i, .cat-filter { font-size: .875rem; padding-left: 2.6rem; padding-right: 2.4rem; }
  .cat-gc p { -webkit-line-clamp: 3; }
  .cat-status { width: 100%; justify-content: space-between; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cat-chip, .cat-gc, .cat-gl, .cat-ex, .cat-facts li { transition: none; } .cat-chip:hover, .cat-gc:hover { transform: none; } }