/* ==========================================================================
   admin-console.css — Ishar "Admin Console" design language
   --------------------------------------------------------------------------
   A reusable token + component layer for first-class staff/admin tooling
   (deploy console first; feedback triage & future admin surfaces next).

   Built ON TOP of the site brand: the single amber accent (--ishar-color: #fa7)
   and body text (#d6d6d7) carry over, but surfaces use the richer layered-grey
   system pioneered by the connect HUD (hud.css) instead of flat black+amber.

   Conventions (adopt these anywhere admin tooling is built):
     - Surfaces step up in lightness: --ac-bg < --ac-panel < --ac-elev.
     - Accent (amber) is used sparingly: headers, focus, primary/live state.
     - Semantic colors are fixed: ok=green, info=blue, warn=orange, danger=red.
     - Section headers are UPPERCASE, letter-spaced, dim (.ac-panel__h).
     - Status is a .ac-pill; a live pill gets a pulsing dot.
     - Selectable options are .btn-check inputs styled via sibling labels
       (.ac-seg__item / .ac-toggle) so they stay accessible + keyboard-friendly.
     - Motion is subtle and ALWAYS disabled under prefers-reduced-motion.
   Load per-page via {% block includes %}, not globally.

   TOKENS LIVE IN style.css (enabler E1): the --ac-* custom properties are
   defined once in the global stylesheet's :root, so this file is purely the
   component layer and may be loaded on any page without redefining them.
   ========================================================================== */

/* Outer container so the console reads as one cohesive surface. */
.ac {
    color: var(--ac-text);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 60rem;
}
/* Wider variant for list/table-heavy consoles (triage dashboards). */
.ac--wide { max-width: 72rem; }

/* ------------------------------------------------------------------ hero -- */
.ac-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--ac-border);
    border-left: 3px solid var(--ac-accent);
    border-radius: var(--ac-radius);
    background:
        radial-gradient(120% 140% at 0% 0%, var(--ac-wash) 0%, transparent 55%),
        linear-gradient(100deg, #1a1509 0%, var(--ac-panel) 42%, var(--ac-bg) 100%);
    overflow: hidden;
}
.ac-hero__badge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    color: var(--ac-accent);
    background: var(--ac-wash);
    box-shadow: inset 0 0 0 1px rgba(255, 170, 119, .25);
}
.ac-hero__badge .bi { width: 1.6rem; height: 1.6rem; }
.ac-hero__text { min-width: 0; flex: 1 1 auto; }
.ac-hero__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ac-accent);
    line-height: 1.1;
}
.ac-hero__sub {
    margin: .2rem 0 0;
    color: var(--ac-dim);
    font-size: .9rem;
}
.ac-hero__sub code {
    color: var(--ac-accent-2);
    background: rgba(255, 170, 119, .1);
    padding: .05rem .3rem;
    border-radius: .25rem;
}
.ac-hero__status { flex: 0 0 auto; align-self: flex-start; }

/* --------------------------------------------------------------- pills --- */
.ac-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ac-dim);
    background: var(--ac-elev);
    border: 1px solid var(--ac-border);
    transition: background .15s, border-color .15s, color .15s;
}
.ac-pill__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.ac-pill--muted   { color: var(--ac-dim);    border-color: var(--ac-border); }
.ac-pill--ok      { color: var(--ac-ok);     border-color: rgba(76,187,23,.4);  background: var(--ac-ok-wash); }
.ac-pill--info    { color: var(--ac-info);   border-color: rgba(74,134,207,.4); background: var(--ac-info-wash); }
.ac-pill--warn    { color: var(--ac-warn);   border-color: rgba(255,136,0,.4);  background: rgba(255,136,0,.12); }
.ac-pill--danger  { color: var(--ac-danger); border-color: rgba(214,75,75,.45); background: var(--ac-danger-wash); }
.ac-pill--accent  { color: var(--ac-accent); border-color: rgba(255,170,119,.45); background: var(--ac-wash); }
.ac-pill--immortal { color: var(--ac-immortal); border-color: rgba(0,183,235,.4); background: rgba(0,183,235,.1); }
/* Status pills carry a leading dot as a pseudo-element so JS may replace the
   label via textContent (no innerHTML) without wiping the dot. */
.ac-pill--status::before {
    content: "";
    width: .5rem; height: .5rem; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
/* A live pill's dot breathes. */
.ac-pill--live .ac-pill__dot,
.ac-pill--status.ac-pill--live::before { animation: ac-pulse 1.4s ease-in-out infinite; }

/* -------------------------------------------------------------- panels --- */
.ac-panel {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    background: var(--ac-panel);
    padding: 1.1rem 1.25rem;
}
.ac-panel__h {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ac-dim);
}
.ac-panel__h .bi { width: .95rem; height: .95rem; color: var(--ac-accent); }
.ac-panel__hint {
    margin: 0 0 .85rem;
    color: var(--ac-dim);
    font-size: .85rem;
}
.ac-panel__hint code {
    color: var(--ac-accent-2);
    background: rgba(255,170,119,.1);
    padding: .03rem .28rem;
    border-radius: .25rem;
}

/* --------------------------------------------------- segmented control --- */
.ac-seg {
    display: inline-flex;
    padding: .28rem;
    gap: .28rem;
    border-radius: 999px;
    background: var(--ac-bg);
    border: 1px solid var(--ac-border);
}
.ac-seg__item {
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--ac-dim);
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    user-select: none;
}
.ac-seg__item .bi { width: 1rem; height: 1rem; }
.ac-seg__item:hover { color: var(--ac-text); background: var(--ac-elev); }
.btn-check:checked + .ac-seg__item {
    color: var(--ac-text);
    background: var(--ac-elev);
    border-color: var(--ac-border-2);
}
/* Environment intent tints when selected. */
.btn-check:checked + .ac-seg__item--prod {
    color: #ffb3b3;
    background: var(--ac-danger-wash);
    border-color: rgba(214,75,75,.5);
}
.btn-check:checked + .ac-seg__item--test {
    color: #bcd8ff;
    background: var(--ac-info-wash);
    border-color: rgba(74,134,207,.5);
}
.btn-check:focus-visible + .ac-seg__item {
    outline: 2px solid var(--ac-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------- toggle cards --- */
.ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .6rem;
}
.ac-toggle {
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem .9rem;
    border-radius: var(--ac-radius-sm);
    background: var(--ac-bg);
    border: 1px solid var(--ac-border);
    transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.ac-toggle:hover { border-color: var(--ac-border-2); background: var(--ac-elev); }
.ac-toggle:active { transform: translateY(1px); }
.ac-toggle__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--ac-radius-sm);
    color: var(--ac-dim);
    background: var(--ac-elev);
    border: 1px solid var(--ac-border);
    transition: color .15s, background .15s, border-color .15s;
}
.ac-toggle__icon .bi { width: 1.15rem; height: 1.15rem; }
.ac-toggle__body { min-width: 0; }
.ac-toggle__name {
    font-weight: 600;
    color: var(--ac-text);
    font-family: var(--bs-font-monospace, monospace);
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.ac-toggle__note { color: var(--ac-dim); font-size: .78rem; margin-top: .1rem; }
.ac-toggle__check {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
    color: var(--ac-border-2);
    transition: color .15s, transform .15s;
}
.ac-toggle__check .bi { width: 1.25rem; height: 1.25rem; }
/* Selected state. */
.btn-check:checked + .ac-toggle {
    border-color: rgba(255,170,119,.55);
    background: var(--ac-wash);
    box-shadow: inset 0 0 0 1px rgba(255,170,119,.25);
}
.btn-check:checked + .ac-toggle .ac-toggle__icon {
    color: var(--ac-accent);
    background: rgba(255,170,119,.14);
    border-color: rgba(255,170,119,.4);
}
.btn-check:checked + .ac-toggle .ac-toggle__check { color: var(--ac-accent-2); transform: scale(1.05); }
.btn-check:focus-visible + .ac-toggle { outline: 2px solid var(--ac-accent); outline-offset: 2px; }

/* -------------------------------------------------------- callouts --- */
.ac-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .9rem;
    border-radius: var(--ac-radius-sm);
    border: 1px solid var(--ac-border);
    background: var(--ac-elev);
    color: var(--ac-text);
    font-size: .88rem;
    line-height: 1.5;
}
.ac-note .bi { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: .12rem; }
.ac-note code {
    color: var(--ac-accent-2);
    background: rgba(255,170,119,.1);
    padding: .03rem .28rem; border-radius: .25rem;
}
.ac-note--ok     { border-color: rgba(76,187,23,.4);  background: var(--ac-ok-wash); }
.ac-note--ok     .bi { color: var(--ac-ok); }
.ac-note--warn   { border-color: rgba(255,136,0,.4);  background: rgba(255,136,0,.09); }
.ac-note--warn   .bi { color: var(--ac-warn); }
.ac-note--danger { border-color: rgba(214,75,75,.4);  background: var(--ac-danger-wash); }
.ac-note--danger .bi { color: var(--ac-danger); }

/* --------------------------------------------------------- form bits --- */
/* Uses Bootstrap's native .form-switch shape; we only recolor + resize it. */
.ac-switch .form-check-input {
    width: 2.6em;
    height: 1.3em;
    margin-top: .1em;
    background-color: var(--ac-bg);
    border-color: var(--ac-border-2);
    cursor: pointer;
}
.ac-switch .form-check-input:checked {
    background-color: var(--ac-accent);
    border-color: var(--ac-accent);
}
.ac-switch .form-check-input:focus {
    border-color: var(--ac-accent);
    box-shadow: 0 0 0 .2rem var(--ac-wash);
}
.ac-switch .form-check-label { color: var(--ac-text); cursor: pointer; }
.ac-switch__text code {
    color: var(--ac-accent-2);
    background: rgba(255,170,119,.1);
    padding: .03rem .28rem; border-radius: .25rem;
}
.ac-switch__note { color: var(--ac-dim); font-size: .8rem; }

.ac-inputgroup {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-bg);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.ac-inputgroup:focus-within {
    border-color: var(--ac-accent);
    box-shadow: 0 0 0 .2rem var(--ac-wash);
}
.ac-inputgroup__icon {
    display: grid; place-items: center;
    padding: 0 .8rem;
    color: var(--ac-dim);
    background: var(--ac-elev);
    border-right: 1px solid var(--ac-border);
}
.ac-inputgroup__icon .bi { width: 1.05rem; height: 1.05rem; }
.ac-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--ac-text);
    padding: .6rem .8rem;
    font-size: 1rem;
}
.ac-input:focus { outline: none; }
.ac-input::placeholder { color: #5b5b63; }

/* ------------------------------------------------------------- CTA --- */
.ac-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .85rem 1rem;
    border-radius: var(--ac-radius-sm);
    border: 1px solid rgba(214,75,75,.6);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(180deg, #b23b3b 0%, #8f2b2b 100%);
    cursor: pointer;
    transition: filter .15s, box-shadow .15s, transform .1s, opacity .15s;
}
.ac-cta .bi { width: 1.2rem; height: 1.2rem; }
/* Pin anchor CTAs against the global a:link rule. */
a.ac-cta:link, a.ac-cta:visited { color: #fff; text-decoration: none; }
a.ac-cta--accent:link, a.ac-cta--accent:visited { color: #231005; }
.ac-cta:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 0 .2rem var(--ac-danger-wash); }
.ac-cta:active:not(:disabled) { transform: translateY(1px); }
.ac-cta:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
/* Gentle "armed" glow when ready to fire. */
.ac-cta--ready:not(:disabled) { animation: ac-glow 2.4s ease-in-out infinite; }

/* -------------------------------------------------------- console --- */
.ac-console {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    background: var(--ac-bg);
    overflow: hidden;
}
.ac-console__bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .85rem;
    background: var(--ac-panel);
    border-bottom: 1px solid var(--ac-border);
}
.ac-console__dots { display: inline-flex; gap: .4rem; flex: 0 0 auto; }
.ac-console__dots i {
    width: .7rem; height: .7rem; border-radius: 50%;
    background: #3a3a44; display: inline-block;
}
.ac-console__dots i:nth-child(1) { background: #e05c5c; }
.ac-console__dots i:nth-child(2) { background: #e0b23c; }
.ac-console__dots i:nth-child(3) { background: #4cbb17; }
.ac-console__title {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .8rem;
    color: var(--ac-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-console__spacer { flex: 1 1 auto; }
.ac-console__timer {
    font-family: var(--bs-font-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    color: var(--ac-dim);
}
.ac-copy {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .5rem;
    border-radius: .3rem;
    font-size: .72rem;
    color: var(--ac-dim);
    background: var(--ac-elev);
    border: 1px solid var(--ac-border);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.ac-copy .bi { width: .85rem; height: .85rem; }
.ac-copy:hover { color: var(--ac-accent); border-color: rgba(255,170,119,.4); }
.ac-console__step {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .85rem;
    background: var(--ac-panel);
    border-bottom: 1px solid var(--ac-border);
    color: var(--ac-text);
    font-size: .9rem;
    min-height: 2.4rem;
}
.ac-console__step .ac-spin { flex: 0 0 auto; color: var(--ac-accent); }
.ac-console__step-text {
    font-family: var(--bs-font-monospace, monospace);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-console__body {
    margin: 0;
    padding: .85rem 1rem;
    max-height: 26rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--bs-font-monospace, monospace);
    font-size: .82rem;
    line-height: 1.5;
    color: #c7c7c9;
    background: var(--ac-bg);
}
.ac-console__body::-webkit-scrollbar { width: .6rem; }
.ac-console__body::-webkit-scrollbar-thumb { background: var(--ac-border-2); border-radius: 999px; }

/* Spinner used in the step readout. */
.ac-spin {
    display: inline-block;
    width: 1rem; height: 1rem;
    border: 2px solid var(--ac-border-2);
    border-top-color: var(--ac-accent);
    border-radius: 50%;
    animation: ac-rotate .7s linear infinite;
}

/* ------------------------------------------------------ stat tiles --- */
/* Clickable KPI tiles (counts that filter a list). Semantic number color
   comes from a modifier; pass --muted when the count is zero so only live
   numbers draw the eye. --active marks the currently-applied filter. */
.ac-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .6rem;
}
.ac-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .9rem .6rem;
    border-radius: var(--ac-radius);
    background: var(--ac-panel);
    border: 1px solid var(--ac-border);
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .1s;
}
a.ac-tile:hover { background: var(--ac-elev); border-color: var(--ac-border-2); transform: translateY(-1px); }
.ac-tile__n {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--ac-text);
    font-variant-numeric: tabular-nums;
}
.ac-tile__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ac-dim);
    text-align: center;
}
.ac-tile--ok     .ac-tile__n { color: var(--ac-ok); }
.ac-tile--info   .ac-tile__n { color: var(--ac-info); }
.ac-tile--warn   .ac-tile__n { color: var(--ac-warn); }
.ac-tile--danger .ac-tile__n { color: var(--ac-danger); }
.ac-tile--accent .ac-tile__n { color: var(--ac-accent); }
.ac-tile--muted  .ac-tile__n { color: var(--ac-dim); }
.ac-tile--active {
    border-color: rgba(255, 170, 119, .55);
    background: var(--ac-wash);
    box-shadow: inset 0 0 0 1px rgba(255, 170, 119, .25);
}

/* ------------------------------------------------------ filter bar --- */
/* Rows of mutually exclusive chip links (active = amber wash), grouped per
   dimension; compose with an inline role=search form for text/sort. */
.ac-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}
.ac-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--ac-bg);
    border: 1px solid var(--ac-border);
    transition: background .15s, border-color .15s, color .15s;
}
/* a.-qualified color rules: the global `a:link` rule outspecifies a bare
   class, so chips/tiles/rows must pin their own link colors. */
.ac-chip, a.ac-chip:link, a.ac-chip:visited { color: var(--ac-dim); }
.ac-chip:hover, a.ac-chip:hover { color: var(--ac-text); background: var(--ac-elev); }
.ac-chip--active,
a.ac-chip--active:link, a.ac-chip--active:visited {
    color: var(--ac-accent);
    border-color: rgba(255, 170, 119, .45);
    background: var(--ac-wash);
}
a.ac-chip--active:hover { color: var(--ac-accent-2); background: var(--ac-wash); }
.ac-filter__sep {
    width: 1px;
    align-self: stretch;
    background: var(--ac-border);
    margin: .15rem .3rem;
}

/* --------------------------------------------------------- buttons --- */
/* Small secondary action buttons (the .ac-cta stays the page's one primary).
   Semantic variants color text/border; hover fills the matching wash. */
.ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .38rem .75rem;
    border-radius: var(--ac-radius-sm);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ac-text);
    background: var(--ac-elev);
    border: 1px solid var(--ac-border-2);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.ac-btn .bi { width: .95rem; height: .95rem; }
a.ac-btn:link, a.ac-btn:visited { color: var(--ac-text); }
.ac-btn:hover:not(:disabled), a.ac-btn:hover { color: var(--ac-accent); border-color: rgba(255, 170, 119, .45); }
.ac-btn:active:not(:disabled) { transform: translateY(1px); }
.ac-btn:disabled { opacity: .5; cursor: not-allowed; }
.ac-btn:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-btn--ok     { color: var(--ac-ok);     border-color: rgba(76, 187, 23, .45); }
.ac-btn--ok:hover:not(:disabled)     { color: var(--ac-ok);     border-color: var(--ac-ok);     background: var(--ac-ok-wash); }
.ac-btn--info   { color: var(--ac-info);   border-color: rgba(74, 134, 207, .45); }
.ac-btn--info:hover:not(:disabled)   { color: var(--ac-info);   border-color: var(--ac-info);   background: var(--ac-info-wash); }
.ac-btn--warn   { color: var(--ac-warn);   border-color: rgba(255, 136, 0, .45); }
.ac-btn--warn:hover:not(:disabled)   { color: var(--ac-warn);   border-color: var(--ac-warn);   background: var(--ac-warn-wash); }
.ac-btn--danger { color: var(--ac-danger); border-color: rgba(214, 75, 75, .5); }
.ac-btn--danger:hover:not(:disabled) { color: var(--ac-danger); border-color: var(--ac-danger); background: var(--ac-danger-wash); }
.ac-btn--accent { color: var(--ac-accent); border-color: rgba(255, 170, 119, .45); }
.ac-btn--accent:hover:not(:disabled) { color: var(--ac-accent); background: var(--ac-wash); }
/* Variant anchors: pin against both a:link and the a.ac-btn base pin. */
a.ac-btn--ok:link,     a.ac-btn--ok:visited     { color: var(--ac-ok); }
a.ac-btn--info:link,   a.ac-btn--info:visited   { color: var(--ac-info); }
a.ac-btn--warn:link,   a.ac-btn--warn:visited   { color: var(--ac-warn); }
a.ac-btn--danger:link, a.ac-btn--danger:visited { color: var(--ac-danger); }
a.ac-btn--accent:link, a.ac-btn--accent:visited { color: var(--ac-accent); }

/* ---------------------------------------------------------- fields --- */
/* Bare input/textarea/select on console surfaces (the icon-cell variant is
   .ac-inputgroup). Class rules out-rank the classic element styles. */
.ac-field {
    display: block;
    width: 100%;
    padding: .5rem .7rem;
    font-size: 1rem; /* never below 16px: sub-16px inputs make iOS zoom-jump on focus */
    color: var(--ac-text);
    background: var(--ac-bg);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.ac-field:focus {
    outline: none;
    border-color: var(--ac-accent);
    box-shadow: 0 0 0 .2rem var(--ac-wash);
}
.ac-field::placeholder { color: #5b5b63; }
.ac-field--inline { display: inline-block; width: auto; }
select.ac-field { cursor: pointer; }
.ac-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ac-dim);
}

/* ---------------------------------------------------------- row list --- */
/* The console's list-of-records surface (mobile-first replacement for the
   data table): one bordered stack, each record a wrapping flex row. */
.ac-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    background: var(--ac-panel);
    overflow: hidden;
}
.ac-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--ac-border);
    transition: background .15s;
}
.ac-row:last-child { border-bottom: 0; }
.ac-row:hover { background: var(--ac-elev); }
.ac-row__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ac-radius-sm);
    color: var(--ac-dim);
    background: var(--ac-bg);
    border: 1px solid var(--ac-border);
}
.ac-row__icon .bi { width: 1rem; height: 1rem; }
.ac-row__main { flex: 1 1 14rem; min-width: 0; }
.ac-row__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    font-size: .95rem;
}
a.ac-row__link:link, a.ac-row__link:visited { color: var(--ac-text); text-decoration: none; }
a.ac-row__link:hover { color: var(--ac-accent); }
.ac-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .8rem;
    margin-top: .1rem;
    font-size: .78rem;
    color: var(--ac-dim);
}
.ac-row__meta .mono { font-family: var(--bs-font-monospace, monospace); }
.ac-row__side {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem .5rem;
}
/* Rows addressed by URL fragment (deep links) light up when targeted. */
.ac-row { scroll-margin-top: .75rem; }
.ac-row:target {
    background: var(--ac-wash);
    box-shadow: inset 0 0 0 1px rgba(255, 170, 119, .35);
}
/* A completed/checked-off record: the title is struck through in ok-green
   (done, not dead) and recedes; the icon tile turns ok. */
.ac-row--done .ac-row__title,
.ac-row--done .ac-row__title a.ac-row__link:link,
.ac-row--done .ac-row__title a.ac-row__link:visited {
    color: var(--ac-dim);
    text-decoration: line-through;
    text-decoration-color: rgba(76, 187, 23, .7);
    text-decoration-thickness: .12rem;
}
.ac-row--done .ac-row__icon {
    color: var(--ac-ok);
    background: var(--ac-ok-wash);
    border-color: rgba(76, 187, 23, .35);
}

/* ------------------------------------------------------- data table --- */
/* Token-aligned table for genuinely column-comparable data (leaderboards);
   list-of-records surfaces use .ac-rows instead (see decisions.md). Always
   wrap in .ac-tablewrap: a wide table scrolls inside its own container, the
   page itself never overflows horizontally (mobile checklist #1). */
.ac-tablewrap {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    background: var(--ac-panel);
    overflow-x: auto;
}
.ac-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: .9rem;
    color: var(--ac-text);
}
.ac-table thead th {
    padding: .55rem .75rem;
    background: var(--ac-bg);
    border-bottom: 1px solid var(--ac-border-2);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ac-dim);
    text-align: left;
    white-space: nowrap;
}
.ac-table tbody td,
.ac-table tbody th {
    padding: .55rem .75rem;
    border-top: 1px solid var(--ac-border);
    font-weight: 400;
    color: var(--ac-text);
    vertical-align: middle;
}
.ac-table tbody tr:first-child td,
.ac-table tbody tr:first-child th { border-top: 0; }
.ac-table tbody tr { transition: background .15s; }
.ac-table tbody tr:hover { background: var(--ac-elev); }
/* Numeric columns: right-aligned, non-jittering digits. */
.ac-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Rank column: narrow, dim; the podium (top three) reads amber. */
.ac-table__rank {
    width: 1%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ac-dim);
}
.ac-table__rank--top { color: var(--ac-accent); font-weight: 700; }
/* Secondary line under a cell's main value (e.g. class under player name). */
.ac-table__sub {
    display: block;
    font-size: .75rem;
    color: var(--ac-dim);
}
/* Sortable header: a real button (keyboard-reachable), reset against the
   classic global button styling; the sort state lives on th[aria-sort]. */
.ac-table__sort {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: color .15s;
}
.ac-table__sort:hover { color: var(--ac-text); }
.ac-table__sort:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-table__sort::after { content: "↕"; opacity: .4; }
.ac-table th[aria-sort] .ac-table__sort { color: var(--ac-accent); }
.ac-table th[aria-sort="ascending"] .ac-table__sort::after { content: "↑"; opacity: 1; }
.ac-table th[aria-sort="descending"] .ac-table__sort::after { content: "↓"; opacity: 1; }

/* ------------------------------------------------------- link cards --- */
/* Navigation card (anchor sibling of .ac-toggle): icon tile + name + note,
   optional trailing element (badge/pill). Lay out in .ac-grid. */
.ac-link {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem .9rem;
    border-radius: var(--ac-radius-sm);
    background: var(--ac-bg);
    border: 1px solid var(--ac-border);
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .1s;
}
a.ac-link:link, a.ac-link:visited { color: var(--ac-text); }
.ac-link:hover {
    background: var(--ac-elev);
    border-color: rgba(255, 170, 119, .45);
    color: var(--ac-text);
    transform: translateY(-1px);
}
.ac-link:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-link__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--ac-radius-sm);
    color: var(--ac-accent);
    background: var(--ac-wash);
    border: 1px solid rgba(255, 170, 119, .25);
}
.ac-link__icon .bi { width: 1.1rem; height: 1.1rem; }
.ac-link__body { min-width: 0; flex: 1 1 auto; }
.ac-link__name { font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ac-link__note { color: var(--ac-dim); font-size: .78rem; margin-top: .1rem; }
.ac-link__side { margin-left: auto; flex: 0 0 auto; align-self: center; }
/* Featured variant: a first-class / officially-supported destination.
   Amber-washed like a selected .ac-toggle, with an amber name. */
.ac-link--featured {
    border-color: rgba(255, 170, 119, .45);
    background: var(--ac-wash);
    box-shadow: inset 0 0 0 1px rgba(255, 170, 119, .18);
}
.ac-link--featured .ac-link__name,
a.ac-link--featured:link .ac-link__name,
a.ac-link--featured:visited .ac-link__name { color: var(--ac-accent); }
.ac-link--featured:hover {
    background: var(--ac-wash);
    border-color: var(--ac-accent);
}

/* ------------------------------------------------------ empty state --- */
.ac-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2.2rem 1rem;
    border: 1px dashed var(--ac-border-2);
    border-radius: var(--ac-radius);
    background: var(--ac-bg);
    color: var(--ac-dim);
    text-align: center;
    font-size: .9rem;
}
.ac-empty .bi { width: 1.6rem; height: 1.6rem; opacity: .7; }

/* ----------------------------------------------------------- pager --- */
.ac-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}
.ac-pager__info {
    color: var(--ac-dim);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- timeline --- */
/* Comment/audit trail. System entries recede (dashed, dim, italic) so human
   conversation stays foreground. */
.ac-timeline { display: flex; flex-direction: column; gap: .55rem; }
.ac-tl {
    display: flex;
    gap: .7rem;
    padding: .7rem .85rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-panel);
}
.ac-tl__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    color: var(--ac-dim);
    background: var(--ac-elev);
    border: 1px solid var(--ac-border);
}
.ac-tl__icon .bi { width: .95rem; height: .95rem; }
.ac-tl__body { flex: 1 1 auto; min-width: 0; }
.ac-tl__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem .6rem;
    font-size: .78rem;
    color: var(--ac-dim);
}
.ac-tl__author { font-weight: 600; color: var(--ac-text); }
.ac-tl__author--staff { color: var(--ac-info); }
.ac-tl__time { margin-left: auto; white-space: nowrap; }
.ac-tl__text {
    margin-top: .25rem;
    font-size: .9rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.ac-tl--system { background: var(--ac-bg); border-style: dashed; }
.ac-tl--system .ac-tl__text { color: var(--ac-dim); font-style: italic; font-size: .82rem; }

/* ------------------------------------------------------- quote body --- */
/* Verbatim player/machine text (report bodies, pasted output): monospace on
   the deepest surface, like a captured terminal excerpt. */
.ac-quote {
    margin: 0;
    padding: .85rem 1rem;
    border: 1px solid var(--ac-border);
    border-left: 3px solid var(--ac-border-2);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-bg);
    color: var(--ac-text);
    font-family: var(--bs-font-monospace, monospace);
    font-size: .88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --------------------------------------------- key/value definition --- */
.ac-kv {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1rem;
    font-size: .88rem;
}
.ac-kv dt { color: var(--ac-dim); font-weight: 500; }
.ac-kv dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* -------------------------------------------------------- data bars --- */
/* Single-series magnitude bars: one row per category — label, track+fill,
   value. One hue only (info); identity lives in the row label and the value
   in a text token at the tip, so the fill is the only colored ink. Rounded
   data-end, square baseline; the track is recessive off-surface. */
.ac-bars {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.ac-bar {
    display: grid;
    grid-template-columns: minmax(5.5rem, 10rem) 1fr auto;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
}
.ac-bar__label {
    color: var(--ac-dim);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-bar__track {
    display: block;
    height: 10px;
    border-radius: 0 4px 4px 0;
    background: var(--ac-elev);
}
.ac-bar__fill {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background: var(--ac-info);
}
.ac-bar--accent .ac-bar__fill { background: var(--ac-accent); }
.ac-bar__n {
    color: var(--ac-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.ac-bar__n small { color: var(--ac-dim); }

/* ----------------------------------------------------- CTA variants --- */
/* Amber "go" primary for non-destructive consoles (the red default stays
   for destructive actions like deploys). */
.ac-cta--accent {
    border-color: rgba(255, 170, 119, .6);
    background: linear-gradient(180deg, #ffb385 0%, #dd8a52 100%);
    color: #231005;
}
.ac-cta--accent:hover:not(:disabled) { box-shadow: 0 0 0 .2rem var(--ac-wash); }

/* ---------------------------------------------------------- motion --- */
@keyframes ac-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}
@keyframes ac-rotate { to { transform: rotate(360deg); } }
@keyframes ac-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(214,75,75,0); }
    50%      { box-shadow: 0 0 0 .25rem var(--ac-danger-wash); }
}

@media (prefers-reduced-motion: reduce) {
    .ac-pill--live .ac-pill__dot,
    .ac-pill--status.ac-pill--live::before,
    .ac-cta--ready:not(:disabled),
    .ac-spin { animation: none !important; }
    .ac-spin { border-top-color: var(--ac-accent); }
    * { transition: none !important; }
}

/* ----------------------------------------------------- responsive --- */
@media (max-width: 575.98px) {
    .ac-hero { flex-wrap: wrap; padding: .9rem 1rem; }
    .ac-hero__status { align-self: stretch; min-width: 0; }
    /* Never clip a hero pill on a phone — let its text wrap instead. */
    .ac-hero__status .ac-pill { white-space: normal; }
    .ac-hero__badge { width: 2.6rem; height: 2.6rem; }
    .ac-hero__badge .bi { width: 1.25rem; height: 1.25rem; }
    /* Same rule for row pills: wrap, never clip, on a phone. */
    .ac-row__side .ac-pill { white-space: normal; }
    .ac-hero__title { font-size: 1.3rem; }
    .ac-seg { width: 100%; }
    .ac-seg__item { flex: 1 1 0; justify-content: center; padding: .5rem .5rem; }
    .ac-panel { padding: .9rem .9rem; }
}

/* ------------------------------------------------- touch ergonomics --- */
/* Mobile friendliness is a gating requirement (docs/design/decisions.md).
   On coarse pointers: comfortable tap targets; and hover transforms are
   suppressed everywhere hover isn't real, so taps don't leave components
   stuck mid-"lift" (sticky :hover). */
@media (pointer: coarse) {
    .ac-btn { padding: .55rem .9rem; }
    .ac-chip { padding: .45rem .85rem; }
    .ac-copy { padding: .35rem .6rem; }
    .ac-pager .ac-btn { min-width: 5.5rem; }
    .ac-table__sort { padding: .4rem .3rem; margin: -.4rem -.3rem; }
}
@media (hover: none) {
    a.ac-tile:hover,
    .ac-link:hover,
    .ac-toggle:hover { transform: none; }
    .ac-row:hover { background: transparent; }
    .ac-table tbody tr:hover { background: transparent; }
}