/* ============================================================================
   chrome.css — the shared page shell (PF/HDR/FTR, WF-01/WF-04), consolidated
   per F-R26. ONE frame definition for every public page (PF-R01): centered
   max-width with nonzero gutters at every width.
   ========================================================================== */

.frame {
    max-width: calc(1200px + 2 * var(--container-pad));
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Full-bleed section band: spans the viewport, inner content on-frame (PF-R02). */
.band {
    padding-block: var(--section-y);
}

.pf__main {
    min-height: 60vh;
}

/* --- Header (static, never sticky — HDR-R05) --- */
.hdr {
    position: relative; /* the positioning context the mobile drawer overlays from */
    background-color: var(--surface-header);
    border-bottom: 1px solid var(--border-hairline);
}

.hdr__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    min-height: 60px;
    padding-block: var(--space-sm);
}

.hdr__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--text-primary);
    font-weight: var(--font-weight-heading);
    font-family: var(--font-display);
}

/* Text monogram echoing the product mark: gold L, violet S (theme-invariant). */
.hdr__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-control);
    background-color: var(--surface-deep);
    border: 1px solid var(--border-hairline);
    font-size: var(--font-size--1);
    letter-spacing: 0.02em;
}

.hdr__mark-l { color: var(--accent-secondary); }
.hdr__mark-s { color: var(--accent); }

.hdr__nav {
    gap: var(--space-lg);
}

.hdr__utility {
    display: inline-flex;
    gap: var(--space-xs);
    margin-left: auto;
}

/* HDR-R07: every utility slot reserves its width from day one — zero layout
   shift when Search/Account/Cart activate. */
.hdr__slot {
    display: inline-block;
    width: 36px;
    min-height: 36px;
}

/* --- Products menu (HDR-R04, State B). A disclosure, never a mega-menu: names
       route and pages sell, so the panel carries one line per destination. --- */
.pmenu {
    position: relative;
}

.pmenu__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 36px;
    padding: var(--space-xs) 0;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
}

.pmenu__btn::-webkit-details-marker {
    display: none;
}

.pmenu__btn::after {
    content: "";
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.pmenu[open] .pmenu__btn::after {
    border-top: none;
    border-bottom: 5px solid currentColor;
}

.pmenu__btn:hover {
    color: var(--text-primary);
}

.pmenu__panel {
    position: absolute;
    left: 0;
    top: calc(100% + var(--space-xs));
    z-index: var(--z-overlay);
    min-width: 280px;
    padding: var(--space-sm);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-overlay);
}

.pmenu__group {
    padding: var(--space-xs) var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    letter-spacing: 0.08em;
    text-transform: uppercase; /* the eyebrow treatment, SC-R11's one sanctioned caps use */
}

.pmenu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pmenu__item {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-control);
    color: var(--text-primary-on-raised);
    text-decoration: none;
}

.pmenu__item:hover {
    background-color: var(--surface-hover);
}

.pmenu__name {
    font-weight: 500;
}

.pmenu__desc {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.pmenu__all {
    display: block;
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-xs);
    border-top: 1px solid var(--divider);
    color: var(--accent);
    text-decoration: none;
}

/* --- Mobile nav (HDR-R10). Both controls ship hidden and site.js reveals them, so
       with no script the inline nav simply stays and wraps — every destination is
       reachable either way (P2F-R01). --- */
.hdr__toggle {
    display: none;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--divider);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}

@media (max-width: 767px) {
    .hdr__toggle:not([hidden]) {
        display: inline-flex;
    }

    /* Only once the drawer is live does the inline nav step aside — the class is
       added by site.js, so a scriptless render keeps the nav on screen. */
    .hdr--js .hdr__nav {
        display: none;
    }
}

/* A panel, not a modal takeover: it overlays the content at the drawer level of the
   z-scale (SC §2.3) with no scrim and no focus trap — the search overlay is the
   modal surface, and this one closes on Esc or on activating any item (HDR-R10).
   F-R18: viewport-pinned chrome clears the device's own bottom inset. */
.hdr__drawer {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--z-drawer);
    padding: var(--space-md) var(--container-pad) calc(var(--space-xl) + env(safe-area-inset-bottom));
    background-color: var(--surface-header);
    border-bottom: 1px solid var(--border-hairline);
}

.hdr__drawer[hidden] {
    display: none;
}

/* The drawer is the sub-768 form of the nav; above the step it never opens. */
@media (min-width: 768px) {
    .hdr__drawer {
        display: none;
    }
}

.hdr__drawer-group {
    padding: var(--space-sm) 0 var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    letter-spacing: 0.08em;
    text-transform: uppercase; /* the eyebrow treatment (SC-R11) */
}

.hdr__drawer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hdr__drawer-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-sm) 0;
    color: var(--text-primary);
    text-decoration: none;
}

.hdr__drawer-item:hover {
    color: var(--accent);
}

/* Account and cart rows: height reserved now so activating either later adds
   content and never layout (HDR-R07's rule, applied to the drawer). */
.hdr__drawer-reserved {
    min-height: 44px;
}

/* --- Footer (recedes, never competes — FTR-R03) --- */
.ftr {
    border-top: 1px solid var(--border-hairline);
    padding-block: var(--space-2xl);
    margin-top: var(--section-y);
}

.ftr__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.ftr__legal {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

@media (max-width: 767px) {
    .ftr__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Design sample pages (D-Q5 / D-Q10 pick surfaces; removed after the picks) --- */
.design-specimen {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-raised);
    padding: var(--space-xl);
}

.design-specimen h2 {
    margin-bottom: var(--space-md);
}

.icon-grid {
    display: grid;
    grid-template-columns: minmax(120px, auto) repeat(3, 1fr);
    gap: var(--space-sm) var(--space-xl);
    align-items: center;
}

.icon-grid__head {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.icon-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-lg);
    color: var(--icon);
}

.icon-cell svg {
    width: 24px;
    height: 24px;
}

.icon-cell .icon-sm svg {
    width: 20px;
    height: 20px;
}

.icon-sm {
    display: inline-flex;
}

/* --- Auth surfaces (AuthCard region — P2 §3, WF-19) --- */
.auth-region .frame {
    display: flex;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.auth-card h1 {
    font-size: var(--font-size-2);
    margin: 0;
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap);
}

.auth-card__alt {
    color: var(--text-secondary);
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin: 0;
}

/* Registration in beta mode (REG-R02 rev 2026-09-17): one line of context under the
   heading, and the two choices stacked at full width — same size, side by side in
   weight, so neither is the easy one to miss (X-R15). */
.auth-card__lede {
    color: var(--text-secondary);
    margin: 0;
}

.auth-card .action-row--stack {
    flex-direction: column;
    align-items: stretch;
}

.auth-card .action-row--stack .btn {
    justify-content: center;
    text-align: center;
}

/* --- Header account slot (WF-20). The slot reserves width via hdr__slot;
       both states render inside it with no layout shift (HDR-R07). --- */
.acct {
    position: relative;
}

.acct__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 24px;
    min-height: 24px;
    padding: var(--space-xs);
    border-radius: var(--radius-control);
    color: var(--icon);
    cursor: pointer;
    list-style: none;
}

.acct__btn::-webkit-details-marker {
    display: none;
}

.acct__btn:hover {
    background-color: var(--surface-hover);
    color: var(--icon-active);
}

.acct__glyph {
    width: 20px;
    height: 20px;
}

.acct__caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.acct[open] .acct__caret {
    border-top: none;
    border-bottom: 5px solid currentColor;
}

.acct__menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-xs));
    z-index: var(--z-overlay);
    min-width: 220px;
    margin: 0;
    padding: var(--space-xs);
    list-style: none;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    box-shadow: var(--glow);
}

.acct__identity {
    padding: var(--space-sm) var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    border-bottom: 1px solid var(--divider);
    margin-bottom: var(--space-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct__item {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-primary-on-raised);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.acct__item:hover {
    background-color: var(--surface-hover);
}

/* --- 2FA setup (WF-27): QR always scannable — fixed white, off-theme --- */
.qr-box {
    width: 200px;
    padding: var(--space-sm);
    background: #FFFFFF;
    border-radius: var(--radius-container);
}

.qr-box svg {
    display: block;
    width: 100%;
    height: auto;
}

.tfs-key {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin: 0;
}

.tfs-key__value {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.rc-list {
    columns: 2;
    margin: 0;
    padding: var(--space-md) var(--space-lg);
    list-style: none;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.rc-list li {
    padding: var(--space-xs) 0;
}

/* --- Account page (ACC, WF-19 ⑤): a single column of blocks --- */
.account-page {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.acc-block {
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--divider);
}

.acc-block:target {
    animation: acc-arrive var(--motion-highlight, 1200ms) var(--motion-ease);
}

@keyframes acc-arrive {
    from { background-color: var(--accent-surface); }
    to { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .acc-block:target { animation: none; }
}

.acc-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* The person's own strings — an address, a machine's name — wrap rather than
   widen the page (F-R15). A long address used to push a phone sideways. */
.account-page bdi {
    min-width: 0;
    overflow-wrap: anywhere;
}

.acc-pending,
.acc-confirm {
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.acc-deletion {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* --- The account area's menu (2026-10-11: one page per section) --- */
.acc-shell {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
}

.acc-shell .account-page {
    margin: 0;
    min-width: 0;
}

/* One section per page: no rule under the last block. */
.acc-main .acc-block:last-of-type {
    border-bottom: 0;
}

.acc-nav {
    min-width: 0;
}

/* Below 768 the picker names the page showing; opening it shows the groups under it. The
   list is the picker's next sibling, so the rail above 768 is the same markup. */
.acc-nav__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-raised);
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
}

.acc-nav__summary::-webkit-details-marker {
    display: none;
}

.acc-nav__summary:hover {
    background-color: var(--surface-hover);
}

.acc-nav__summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.acc-nav__where {
    color: var(--text-secondary);
}

.acc-nav__caret {
    flex: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
}

.acc-nav__picker[open] .acc-nav__caret {
    border-top: none;
    border-bottom: 6px solid currentColor;
}

.acc-nav__groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-xs);
    padding: var(--space-sm);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-raised);
}

.acc-nav__picker:not([open]) + .acc-nav__groups {
    display: none;
}

.acc-nav__group-label {
    margin: 0;
    padding: 0 var(--space-sm) var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    letter-spacing: 0.08em;
    text-transform: uppercase; /* the eyebrow treatment (SC-R11), as the header menu's groups */
}

.acc-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-nav__item {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    text-decoration: none;
}

.acc-nav__item:hover {
    color: var(--text-primary);
    background-color: var(--surface-hover);
}

.acc-nav__item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.acc-nav__item--current {
    color: var(--text-primary);
    background-color: var(--surface-hover);
    font-weight: 500;
}

@media (min-width: 768px) {
    .acc-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }

    .acc-nav__picker {
        display: none;
    }

    .acc-nav__picker:not([open]) + .acc-nav__groups,
    .acc-nav__groups {
        display: flex;
        gap: var(--space-lg);
        margin-top: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    .acc-nav__item--current {
        background-color: var(--surface-raised);
    }
}

/* ============================================================================
   Admin shell (ADN-R01..R12, WF-47/48). Every color, radius and gap is a token
   role (SC-R01). The bare pixel values are the ONLY ones in this file: admin
   surfaces do not participate in theme density — they bind the fixed,
   theme-invariant metrics of Style-Conventions §2.6, so those numbers are the
   contract itself rather than stray literals.
   Desktop posture (F-R12): admin targets >=768px; below that the table scrolls
   in its own container and the rail stays on-screen as the collapsed icon strip.
   ========================================================================== */

.adm {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

/* --- Nav rail: 232px expanded / 48px collapsed (SC §2.6, user-toggled) --- */
.adm-rail {
    flex: 0 0 232px;
    width: 232px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--container-pad-dense);
    background-color: var(--surface-raised);
    border-right: 1px solid var(--border-hairline);
}

.adm-rail--collapsed {
    flex-basis: 48px;
    width: 48px;
    padding-inline: var(--space-xs);
}

.adm-rail__list {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adm-rail__home,
.adm-rail__item,
.adm-rail__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: 36px;
    padding: var(--space-xs) var(--space-sm);
    border: none;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.adm-rail__home:hover,
.adm-rail__item:hover,
.adm-rail__toggle:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary-on-raised);
}

/* The site's logo, linking home: the header's brand at its own size. The inline padding
   centers its 32px tile on the 24px section tiles below; collapsed, it fits the strip. */
.adm-rail__site {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 40px;
    padding: var(--space-xs);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-hairline);
    color: var(--text-primary-on-raised);
    font-family: var(--font-display);
    font-weight: var(--font-weight-heading);
    text-decoration: none;
}

.adm-rail__site:hover .adm-rail__label {
    text-decoration: underline;
}

.adm-rail__site:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.adm-rail__home {
    margin-bottom: var(--space-sm);
    color: var(--text-primary-on-raised);
    font-weight: var(--font-weight-heading);
    font-family: var(--font-display);
}

/* Current item carries a marker beyond color (LNK-R01) — it survives collapse. */
.adm-rail__home[aria-current],
.adm-rail__item--current {
    background-color: var(--accent-surface);
    color: var(--accent);
    box-shadow: inset 2px 0 0 0 var(--accent);
}

/* AI Note: the two-letter tile is the in-house stand-in for the section glyph
   until the D-Q5 icon set is picked — swap the tile for the set's glyph then,
   nothing else about the rail changes. */
.adm-rail__mono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-deep);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    line-height: 1;
}

.adm-rail__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Collapsed: icons only. The accessible name lives on the anchor's aria-label,
   so hiding the text costs nothing to a screen reader (BTN-R03's exception). */
.adm-rail--collapsed .adm-rail__label {
    display: none;
}

.adm-rail__toggle {
    justify-content: flex-start;
    color: var(--text-secondary);
}

.adm-rail__chevron {
    flex: 0 0 auto;
    width: 24px;
    text-align: center;
}

/* --- Main column: slim top bar + content pane --- */
.adm__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.adm__topbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 48px;
    padding: var(--space-sm) var(--container-pad-dense);
    background-color: var(--surface-header);
    border-bottom: 1px solid var(--border-hairline);
}

.adm__title {
    font-size: var(--font-size-1);
    margin: 0;
}

.adm__acct {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.adm__pane {
    width: 100%;
    max-width: 1280px;
    padding: var(--container-pad-dense);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* --- Landing index (ADN-R04): the registry as rows, no dashboard widgets --- */
.adm-index {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.adm-index__row {
    padding: var(--container-pad-dense);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.adm-index__link {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}

.adm-index__link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.adm-index__desc {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    margin-top: var(--space-xs);
}

/* --- Filter row (the FilterRow anatomy, ADN-R10: state rides the URL) --- */
.adm-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
}

.adm-filters__field {
    display: flex;
    flex-direction: column;
    gap: var(--label-gap);
}

.adm-filters__field label {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.adm-filters__clear {
    align-self: center;
}

/* --- Record table (SC §2.6 metrics; ADN-R09 sorting) --- */
.adm-tablewrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

/* Columns size to what they hold (2026-10-11). The tables used to be table-layout:
   fixed with hand-set pixel widths per column: every column without a width took an
   equal share of what was left, the widths slid onto the wrong columns whenever a
   column was added (the Users table had seven widths for ten columns), and
   overflow-wrap:anywhere patches then broke emails and labels mid-word to fit. Now
   the browser sizes each column to its content; a short value (a date, a chip, a
   button) never wraps, long text wraps at word boundaries, and when the content is
   wider than the screen the table scrolls inside .adm-tablewrap. */
.adm-table {
    width: 100%;
    min-width: 720px;
    table-layout: auto;
    border-collapse: collapse;
}

.adm-table td {
    overflow-wrap: break-word;
}

/* A short value never wraps: a date at its hyphens ("2026-" over "10-12"), a size
   ("2" over "KB"), a version, a chip ("Personal" over "token"). */
.adm-table time,
.adm-table .adm-table__num,
.adm-table .chp {
    white-space: nowrap;
}


.adm-table th,
.adm-table td {
    height: 36px;
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-hairline);
}

.adm-table th {
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--surface-raised);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.adm-table tbody tr:hover {
    background-color: var(--surface-hover);
}

.adm-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: inherit;
    text-decoration: none;
}

.adm-table__sort:hover {
    color: var(--text-primary);
}

/* Sort direction reads as shape, not color alone (F-R05's principle). */
.adm-table__caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.adm-table__caret--up {
    border-top: none;
    border-bottom: 5px solid currentColor;
}

/* F-R08/F-R16: the number-dense column takes the numeric face and tabular figures. */
.adm-table__when {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--1);
    white-space: nowrap;
}

.adm-table__detail {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* F-R21 empty state: inside the table's own content area, so the header and the
   column widths stay put. */
.adm-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--text-secondary);
    text-align: center;
}

/* --- Pager (FRM-R10) --- */
.adm-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.adm-pager__group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

/* The middot separator is decoration, so it is drawn rather than written. */
.adm-pager__group > * + *::before {
    content: "\00B7";
    margin-right: var(--space-sm);
    color: var(--divider);
}

.adm-pager__btn {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-control);
    color: var(--accent);
    text-decoration: none;
}

.adm-pager__btn:hover {
    background-color: var(--surface-hover);
}

/* Inert ends stay in the bar at full size — removing them would shift it. */
.adm-pager__btn--off {
    color: var(--disabled-text);
    cursor: not-allowed;
}

.adm-pager__btn--off:hover {
    background: transparent;
}

.adm-pager__count {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* --- Reconnect overlay (ADN-R07): the framework owns the state classes on
       #components-reconnect-modal; this owns how they look. --- */
.adm-reconnect {
    max-width: 22rem;
    margin: auto;
    padding: var(--space-xl);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-overlay);
    background-color: var(--surface-raised);
    color: var(--text-primary-on-raised);
    text-align: center;
}

.adm-reconnect::backdrop {
    background-color: var(--scrim);
}

.adm-reconnect__line,
.adm-reconnect__reload {
    display: none;
}

.adm-reconnect__reload {
    margin: var(--space-lg) auto 0;
}

#components-reconnect-modal.components-reconnect-show .adm-reconnect__line--busy,
#components-reconnect-modal.components-reconnect-retrying .adm-reconnect__line--busy {
    display: block;
}

/* Paused and resume-failed land on the same remedy: a reload gets a fresh circuit,
   so the dialog is never blank whichever way the connection ended. */
#components-reconnect-modal.components-reconnect-failed .adm-reconnect__line--lost,
#components-reconnect-modal.components-reconnect-rejected .adm-reconnect__line--lost,
#components-reconnect-modal.components-reconnect-paused .adm-reconnect__line--lost,
#components-reconnect-modal.components-reconnect-resume-failed .adm-reconnect__line--lost {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .adm-reconnect__reload,
#components-reconnect-modal.components-reconnect-rejected .adm-reconnect__reload,
#components-reconnect-modal.components-reconnect-paused .adm-reconnect__reload,
#components-reconnect-modal.components-reconnect-resume-failed .adm-reconnect__reload {
    display: inline-flex;
}