/* /specification and /glossary: compact document grid and compact term list. Cards use the shared .tile class (lit-border hover comes from system.css). */

/* ---------- shared tools bar (search + chips) ---------- */
.spec-tools, .gl-bar { position: sticky; top: calc(var(--header-h) + .5rem); z-index: 20; display: grid; gap: .75rem; margin: 0; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--r-panel); background: rgba(10, 11, 16, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

.spec-tools .meta, .gl-bar .meta { margin: 0; }
.stack-lg:has(> .spec-tools), .stack-lg:has(> .gl-bar) { gap: 1.5rem; }

/* ---------- /specification ---------- */
.sgroups { display: grid; gap: 1.75rem; }
.sgrp[hidden], .sdoc[hidden], .gl-item[hidden], .sgroups[hidden] { display: none; }
.sgrp__h { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.sgrp__n { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-inline: .35rem; border: 1px solid var(--border); border-radius: 999px; font: 500 var(--text-small-size)/1 var(--mono, ui-monospace, monospace); color: var(--text-faint); }
.sgrp__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.sdoc.tile { padding: .9rem 1rem; gap: .35rem; align-items: stretch; min-width: 0; }
.sdoc__id { font: var(--text-code); color: var(--text-faint); overflow-wrap: anywhere; }
.sdoc__t { margin: 0; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: 3.5rem; }
.sdoc__foot { margin-top: auto; padding-top: .25rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sdoc__min { font-size: var(--text-small-size); color: var(--text-faint); }
.sdoc__act { display: inline-flex; gap: .25rem; }
.sdoc__btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: var(--r-control, 8px); color: var(--text-dim); background: transparent; text-decoration: none; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.sdoc__btn svg { width: 1.05rem; height: 1.05rem; }
.sdoc__btn:hover, .sdoc__btn:focus-visible { color: var(--text); border-color: var(--border-hover); background: var(--surface-2); }
@media (max-width: 75rem) { .sgrp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 56rem) { .sgrp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .sgrp__grid { grid-template-columns: minmax(0, 1fr); } .sdoc__t { min-height: 0; -webkit-line-clamp: 4; line-clamp: 4; } }
/* no lonely last card: five documents sit 3+2, four sit 2+2 below the four-column width, five stack below the two-column width */
.sgrp__grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 34.01rem) and (max-width: 75rem) { .sgrp__grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 56rem) { .sgrp__grid:has(> :nth-child(5):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* ---------- /glossary ---------- */
.gl-az { display: flex; flex-wrap: wrap; gap: var(--btn-row); }
.gl-az a { font: var(--text-code); }
.gl-az span { display: none; }
.gl-list { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 2.5rem; }
.gl-item { break-inside: avoid; display: grid; gap: .3rem; padding: .85rem 0; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 9rem); }
.gl-item:target { background: rgba(252, 106, 2, .08); box-shadow: -.75rem 0 0 rgba(252, 106, 2, .08), .75rem 0 0 rgba(252, 106, 2, .08); }
.gl-item p { margin: 0; }
.gl-term { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-weight: 600; color: var(--text); }
.gl-term em { font-style: normal; font-weight: 400; font-size: var(--text-small-size); color: var(--text-faint); white-space: nowrap; }
.gl-def { color: var(--text-dim); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.gl-more summary { cursor: pointer; width: fit-content; font-size: var(--text-body-size); color: var(--text-dim); min-height: 1.5rem; }
.gl-more summary:hover { color: var(--text); }
.gl-more p { margin-top: .35rem; color: var(--text-dim); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.gl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-size: var(--text-body-size); }
.gl-see { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--btn-row); }
.gl-lbl { color: var(--text-faint); margin-right: .1rem; }
.gl-go { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--border-hover); }
.gl-go:hover { color: var(--text); }
@media (max-width: 52rem) { .gl-list { column-count: 1; } .gl-item { scroll-margin-top: calc(var(--header-h) + 12rem); } }
@media (max-width: 40rem) { .spec-tools, .gl-bar { position: static; } }

/* ---------- /specification: hero facts + glass filter card ---------- */
.spec-note { display: inline-flex; align-items: center; gap: .45rem; }
.spec-note svg { width: 14px; height: 14px; flex: none; }
.spec-note { max-width: 100%; align-items: flex-start; margin: 0; padding: .55rem .85rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, .03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .8125rem; line-height: 1.45; color: var(--text-dim); }
.spec-note svg { margin-top: 2px; color: var(--focus); }
.spec-tools { --cd1: #FBBA02; --cd2: #FC6A02; --cd3: #F81530; --cd4: #C02E62; --cd5: #9094F5; --cd6: #5A5DCB; --cd7: #0189FD; --cd8: #8ab4ff;
  position: static; gap: .9rem; padding: 1.1rem; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06); }
.spec-tools .search { position: relative; display: block; width: 100%; }
.spec-tools .search::before, .spec-tools .search::after { content: none; }
.spec-tools .search .input { width: 100%; max-width: none; height: 44px; min-height: 44px; padding: 0 3rem 0 2.75rem; border-radius: 12px; font: 400 .9375rem/1 var(--font); }
.spec-tools .search__ico { position: absolute; left: .95rem; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--text-faint); pointer-events: none; }
.spec-tools .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; }
.spec-tools .search:focus-within .search__kbd, .spec-tools .search.has-text .search__kbd { display: none; }
.spec-tools .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; }
.spec-tools .search__x:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.spec-tools .search__x[hidden] { display: none; }
.spec-tools .search__x svg { width: 14px; height: 14px; }
.spec-tools .search input[type="search"]::-webkit-search-cancel-button { display: none; }
.spec-tools .chips { gap: .5rem; }
.spec-tools .chip-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; height: 36px; padding: 0 .8rem; 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; }
.spec-tools .chip-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .07); border-color: var(--border-hover); }
.spec-tools .chip-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dot, var(--text-dim)); box-shadow: 0 0 8px color-mix(in srgb, var(--dot, #fff) 55%, transparent); }
.spec-tools .chip-btn[data-cat="all"] .chip-dot { background: var(--spectrum); }
.spec-tools .chip-n { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 500 .75rem/1 var(--mono); color: var(--text-faint); text-align: center; }
.spec-tools .chip-btn[aria-pressed="true"] { color: var(--text); border-color: var(--dot, var(--focus)); background: color-mix(in srgb, var(--dot, #8ab4ff) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dot, #8ab4ff) 45%, transparent), 0 0 18px color-mix(in srgb, var(--dot, #8ab4ff) 30%, transparent); }
.spec-tools .chip-btn[aria-pressed="true"] .chip-n { color: var(--text); background: rgba(255, 255, 255, .16); }
.spec-status { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; min-height: 1.5rem; }
.spec-status .meta { font-size: .8125rem; color: var(--text-faint); text-align: right; }
.spec-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; }
.spec-clear:hover { color: var(--text); }
.spec-clear[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .spec-tools .chip-btn { transition: none; } .spec-tools .chip-btn:hover { transform: none; } }
.spec-tools .chip-btn[data-cat="found"] { --dot: var(--cd1); } .spec-tools .chip-btn[data-cat="arch"] { --dot: var(--cd2); } .spec-tools .chip-btn[data-cat="impl"] { --dot: var(--cd3); } .spec-tools .chip-btn[data-cat="conf"] { --dot: var(--cd4); }
.spec-tools .chip-btn[data-cat="audit"] { --dot: var(--cd5); } .spec-tools .chip-btn[data-cat="sec"] { --dot: var(--cd6); } .spec-tools .chip-btn[data-cat="reg"] { --dot: var(--cd7); } .spec-tools .chip-btn[data-cat="gov"] { --dot: var(--cd8); }
@media (max-width: 40rem) { .spec-tools { padding: .75rem; } .spec-tools .chips { gap: 8px 6px; } .spec-tools .chip-btn { padding: 0 .5rem; gap: .3rem; font-size: .8125rem; letter-spacing: -.01em; } .spec-tools .chip-btn:not([aria-pressed="true"]) .chip-n { background: none; padding: 0; } .spec-tools .chip-dot { display: none; } .spec-tools .chip-btn[aria-pressed="true"] .chip-dot { display: block; } .spec-tools .chip-n { min-width: 0; padding: 2px 5px; } .spec-status { justify-content: space-between; } }