/* _content/Athena.Server/Components/License/LicenseBanner.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   LicenseBanner — the persistent expiry notice above the page body.

   Scoped to this component. It borrows the tactical-ops tokens rather than any
   literal colour, so a palette change carries here for free; the four rungs
   differ only in which token they pull.

   It is NOT position:fixed. The toasts own the pinned corner (and a fixed
   element here would overlay whatever the operator scrolled to, on every page,
   for a fortnight). This sits in flow at the top of the content column and
   pushes the page down — which is the point: it should be slightly in the way.
--------------------------------------------------------------------------- */

.license-banner[b-3ru3r667xn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--tac-line);
    border-left-width: 3px;
    border-radius: 4px;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-body);
    line-height: 1.4;
}

.license-banner-mark[b-3ru3r667xn] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.license-banner-text[b-3ru3r667xn] {
    flex: 1 1 auto;
    min-width: 0;
}

.license-banner-link[b-3ru3r667xn] {
    flex: 0 0 auto;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    white-space: nowrap;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The dismiss control is the shared ActionButton now, and its button is rendered
   by ANOTHER component — so it never carries this sheet's scope attribute and a
   plain `.license-banner .btn` would not match it. ::deep is the only selector
   that reaches it, and it still stays inside this component. Layout only: the
   button's own colours are the app's, deliberately. */
.license-banner[b-3ru3r667xn]  .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ rungs */

.license-banner-info[b-3ru3r667xn] {
    border-color: var(--tac-acc-line);
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-tint);
    color: var(--tac-acc-deep);
}

.license-banner-warning[b-3ru3r667xn],
.license-banner-urgent[b-3ru3r667xn] {
    border-color: var(--tac-line2);
    border-left-color: var(--tac-warn);
    color: var(--tac-warn);
}

/* Urgent is the same colour as warning with more weight behind it — a fifth
   hue would be a new signal to learn, three days out, for no extra meaning. */
.license-banner-urgent[b-3ru3r667xn] {
    border-left-width: 5px;
    font-weight: 600;
}

/* Grace and lapsed are the same red: in both, the license has expired. What
   differs is that grace still has a countdown and an exit, which the WORDS say
   far better than a shade would. */
.license-banner-grace[b-3ru3r667xn],
.license-banner-lapsed[b-3ru3r667xn] {
    border-color: var(--tac-line2);
    border-left-color: var(--tac-crit);
    border-left-width: 5px;
    color: var(--tac-crit);
    font-weight: 600;
}

@media (max-width: 640px) {
    .license-banner[b-3ru3r667xn] {
        flex-wrap: wrap;
    }

    .license-banner-text[b-3ru3r667xn] {
        flex: 1 1 100%;
        order: 3;
    }
}
/* _content/Athena.Server/Components/Reports/ReportResultView.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops report result grid — Components/Reports/ReportResultView.razor.

   This component has exactly ONE call site in the solution (Pages/ReportViewer
   .razor), so it is that page's private child and was converted with it. It
   keeps its own sheet because Blazor scoped CSS does not cross component
   boundaries — the page's ReportViewer.razor.css cannot reach this markup.

   The look is taken from the report-builder artboard's "03 PREVIEW" panel in
   Mock/tactical-ops/report-builder.html (mono uppercase thead, sharp-cornered
   severity pills, hairline row rules, an accent hover wash) and from the shipped
   Agents.razor.css table, so the read-only viewer and the builder preview read
   as one family.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css.

   RULES: no bare shared selector is restyled here. .btn / .btn-secondary /
   .btn-sm still ride on the markup for the E2E hooks and site.css, but every
   rule below hangs off a NEW .tac-* name that the markup carries alongside.
   The grid keeps its own overflow-x container so a wide report never makes the
   document scroll sideways.
   ============================================================================ */

.tac-rv[b-o1mjue4p9d] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-num[b-o1mjue4p9d] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-lbl[b-o1mjue4p9d] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* ------------------------------------------------------------ instrument bar */

.tac-rv-head[b-o1mjue4p9d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    min-width: 0;
    padding: 11px 18px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-rv-rows[b-o1mjue4p9d] {
    min-width: 0;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------- button */

.tac-rv .tac-btn[b-o1mjue4p9d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-rv .tac-btn:hover:not(:disabled)[b-o1mjue4p9d] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-rv .tac-btn:focus-visible[b-o1mjue4p9d] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-rv .tac-btn:disabled[b-o1mjue4p9d] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-btn-icon[b-o1mjue4p9d],
.tac-btn-caret[b-o1mjue4p9d] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-btn-caret[b-o1mjue4p9d] {
    width: 11px;
    height: 11px;
    stroke-width: 2.2;
}

/* ------------------------------------------------------------ export dropdown */

.tac-dropdown[b-o1mjue4p9d] {
    position: relative;
    min-width: 0;
}

.tac-menu[b-o1mjue4p9d] {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 5px);
    z-index: 20;
    display: none;
    min-width: 210px;
    padding: 4px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
}

.tac-dropdown.open .tac-menu[b-o1mjue4p9d] {
    display: block;
}

.tac-menu-item[b-o1mjue4p9d] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: start;
    cursor: pointer;
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
}

.tac-menu-item:hover:not(:disabled)[b-o1mjue4p9d] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

.tac-menu-item:focus-visible[b-o1mjue4p9d] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-fmt-icon[b-o1mjue4p9d] {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-menu-item:hover .tac-fmt-icon[b-o1mjue4p9d] {
    stroke: var(--tac-acc);
}

.tac-fmt-name[b-o1mjue4p9d] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--tac-ink0);
}

.tac-fmt-sub[b-o1mjue4p9d] {
    margin-inline-start: auto;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* -------------------------------------------------------- drag-to-group rail */

.tac-groupbar[b-o1mjue4p9d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 18px;
    background: var(--tac-s2);
    border-bottom: 1px solid var(--tac-line);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.tac-groupbar.drag-target[b-o1mjue4p9d] {
    background: var(--tac-acc-dim);
    box-shadow: inset 0 0 0 1px var(--tac-acc);
}

.tac-hint[b-o1mjue4p9d] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-style: normal;
    letter-spacing: 0.06em;
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
}

.tac-gchip[b-o1mjue4p9d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 4px 0 10px;
    border: 1px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-gx[b-o1mjue4p9d] {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    cursor: pointer;
}

.tac-gx svg[b-o1mjue4p9d] {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.tac-gx:hover[b-o1mjue4p9d] {
    background: rgba(220, 38, 38, 0.09);
    color: var(--tac-crit);
}

/* ---------------------------------------------------------------------- grid */

/* overflow-x at EVERY width — a report can project any number of columns, and
   the document itself must never be the thing that scrolls sideways. */
.tac-tablewrap[b-o1mjue4p9d] {
    overflow-x: auto;
    overflow-y: visible;
    min-width: 0;
    max-width: 100%;
}

.tac-table[b-o1mjue4p9d] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-table .tac-th[b-o1mjue4p9d] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.tac-table .tac-th:hover[b-o1mjue4p9d] {
    color: var(--tac-ink);
}

.tac-th-inner[b-o1mjue4p9d] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tac-grip[b-o1mjue4p9d] {
    width: 11px;
    height: 11px;
    flex: none;
    fill: var(--tac-line2);
    cursor: grab;
}

.tac-table .tac-th:hover .tac-grip[b-o1mjue4p9d] {
    fill: var(--tac-ink3);
}

.tac-caret[b-o1mjue4p9d] {
    width: 11px;
    height: 11px;
    flex: none;
    stroke: var(--tac-line2);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-caret.active[b-o1mjue4p9d] {
    stroke: var(--tac-acc);
}

.tac-table tbody td[b-o1mjue4p9d] {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-table .tac-th:first-child[b-o1mjue4p9d],
.tac-table tbody td:first-child[b-o1mjue4p9d] {
    padding-inline-start: 18px;
}

.tac-table .tac-th:last-child[b-o1mjue4p9d],
.tac-table tbody td:last-child[b-o1mjue4p9d] {
    padding-inline-end: 18px;
}

.tac-table tbody tr:last-child td[b-o1mjue4p9d] {
    border-bottom: 0;
}

.tac-row[b-o1mjue4p9d] {
    transition: background 0.12s ease;
}

.tac-row:hover > td[b-o1mjue4p9d] {
    background: rgba(3, 105, 161, 0.05);
}

/* The leading cell is the row's identity — the artboard weights it. */
.tac-table tbody td.tac-cell-lead[b-o1mjue4p9d] {
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-table tbody td.tac-indent[b-o1mjue4p9d] {
    padding-inline-start: 36px;
}

.tac-empty[b-o1mjue4p9d] {
    padding: 22px 18px;
    text-align: center;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-style: normal;
    letter-spacing: 0.06em;
    color: var(--tac-ink3);
}

/* ------------------------------------------------------------ severity pills */

.tac-sev[b-o1mjue4p9d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 21px;
    padding: 0 8px;
    border: 1px solid;
    border-radius: 0;
    background: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tac-sev.ok[b-o1mjue4p9d] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-sev.crit[b-o1mjue4p9d] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

/* -------------------------------------------------------------- grouped rows */

.tac-group-row > td[b-o1mjue4p9d] {
    padding: 8px 18px;
    background: var(--tac-s2);
    border-top: 1px solid var(--tac-line);
    border-bottom: 1px solid var(--tac-line);
    cursor: pointer;
}

.tac-group-row:hover > td[b-o1mjue4p9d] {
    background: var(--tac-acc-dim);
}

.tac-group-label[b-o1mjue4p9d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.tac-group-caret[b-o1mjue4p9d] {
    width: 12px;
    height: 12px;
    flex: none;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.12s ease;
}

.tac-group-label.collapsed .tac-group-caret[b-o1mjue4p9d] {
    transform: rotate(-90deg);
}

.tac-gname[b-o1mjue4p9d] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    letter-spacing: 0.03em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-gcount[b-o1mjue4p9d] {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 640px) {
    .tac-rv-head[b-o1mjue4p9d],
    .tac-groupbar[b-o1mjue4p9d] {
        padding-inline: 14px;
    }

    .tac-table .tac-th:first-child[b-o1mjue4p9d],
    .tac-table tbody td:first-child[b-o1mjue4p9d] {
        padding-inline-start: 14px;
    }

    .tac-table .tac-th:last-child[b-o1mjue4p9d],
    .tac-table tbody td:last-child[b-o1mjue4p9d] {
        padding-inline-end: 14px;
    }

    .tac-menu[b-o1mjue4p9d] {
        min-width: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tac-rv *[b-o1mjue4p9d] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Components/Reports/SwitchRow.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops toggle row — Components/Reports/SwitchRow.razor.

   These MUST live with the component: Blazor scoped CSS does not cross component
   boundaries, so when these rules lived in the parent page's .razor.css they
   never matched this component's elements and every row collapsed to a stacked
   block layout instead of the label-left / toggle-right flex row.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, linked first in _Host, so every tactical-ops
   surface shares one source of truth.

   SwitchRow is used ONLY by Pages/ReportSettings.razor, so converting it does
   not touch any other screen.
   ============================================================================ */

.tac-switch-row[b-6sreenhjn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-switch-row:last-child[b-6sreenhjn7] {
    border-bottom: none;
}

.tac-switch-text[b-6sreenhjn7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-switch-label[b-6sreenhjn7] {
    display: block;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    color: var(--tac-ink);
}

.tac-switch-desc[b-6sreenhjn7] {
    display: block;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* --------------------------------------------------------------- the control */

/* A sharp-cornered track, not a rounded pill: the whole language is square. */
.tac-switch[b-6sreenhjn7] {
    position: relative;
    width: 40px;
    height: 20px;
    flex: 0 0 40px;
    cursor: pointer;
}

.tac-switch input[b-6sreenhjn7] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
}

.tac-slider[b-6sreenhjn7] {
    position: absolute;
    inset: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tac-slider[b-6sreenhjn7]::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    background: var(--tac-ink3);
    box-shadow: none;
    transition: transform 0.15s ease, background 0.15s ease;
}

.tac-switch:hover .tac-slider[b-6sreenhjn7] {
    border-color: var(--tac-acc);
}

.tac-switch input:checked + .tac-slider[b-6sreenhjn7] {
    background: var(--tac-acc-dim);
    border-color: var(--tac-acc);
}

.tac-switch input:checked + .tac-slider[b-6sreenhjn7]::before {
    background: var(--tac-acc);
    transform: translateX(20px);
}

.tac-switch input:focus-visible + .tac-slider[b-6sreenhjn7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* Honour reduced-motion — the knob slide is the only animation here. */
@media (prefers-reduced-motion: reduce) {
    .tac-slider[b-6sreenhjn7],
    .tac-slider[b-6sreenhjn7]::before {
        transition: none !important;
    }
}
/* _content/Athena.Server/Components/Search/SearchBar.razor.rz.scp.css */
/* ============================================================================
   SearchBar — tactical-ops treatment, and a fix for the icon overlapping the text.

   THE BUG. site.css carries TWO competing definitions of these classes:

     line ~504   .search-bar  { position: relative }
                 .search-icon { position: absolute; left: 28px }
                 .search-input{ padding: 8px 40px }      <- reserved room for the icon

     line ~10034 .search-bar  { display: flex; align-items: center; padding: 8px 12px }
                 .search-icon { color: #64748b }          <- does NOT re-declare position
                 .search-input{ border: none; margin-left: 8px; flex: 1 }

   The later block turned the bar into a flex row but left the icon absolutely
   positioned, and the input lost the 40px left padding that used to make room for
   it. Measured on the running app: icon at x=780 (w=16), input starting at x=772 —
   the icon's right edge sat 24px INSIDE the input's text area, so the magnifier was
   drawn on top of what you typed.

   THE FIX. The bar is a flex row, so the icon should be a flex CHILD, not an overlay.
   `position: static` puts it back in flow, it takes its own 16px, and the input
   simply follows. No magic padding to keep in sync with the icon's width or the
   bar's padding — which is what rotted the first time.

   Scoped to this component, so it beats both site.css blocks on specificity without
   editing the monolith, and it fixes every page that renders a SearchBar at once.
   ============================================================================ */

.search-bar[b-iqj6qtpyua] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2, #b6c3d4);
    background: var(--tac-s2, #f3f6fa);
    border-radius: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.search-bar:focus-within[b-iqj6qtpyua] {
    border-color: var(--tac-acc, #0369a1);
    background: var(--tac-s1, #ffffff);
}

/* The whole point: back in flow. Never re-introduce position:absolute here. */
.search-icon[b-iqj6qtpyua] {
    position: static;
    flex: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: var(--tac-fs-body);
    color: var(--tac-ink3, #6b7c92);
}

.search-bar:focus-within .search-icon[b-iqj6qtpyua] {
    color: var(--tac-acc, #0369a1);
}

.search-input[b-iqj6qtpyua] {
    flex: 1;
    /* min-width:0 lets the input shrink inside the flex row instead of forcing the
       bar wider than its container and clipping. */
    min-width: 0;
    /* Explicitly zero, so neither site.css block's 40px overlay padding can come
       back and leave a dead gap now that the icon occupies real space. */
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    outline: none;
    font-family: var(--tac-body, 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif);
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0, #0b1220);
}

.search-input[b-iqj6qtpyua]::placeholder {
    color: var(--tac-ink3, #6b7c92);
    opacity: 0.8;
}

.search-buttons[b-iqj6qtpyua] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

.clear-search[b-iqj6qtpyua],
.search-help-btn[b-iqj6qtpyua] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--tac-mono, 'JetBrains Mono', Consolas, monospace);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3, #6b7c92);
}

.clear-search:hover[b-iqj6qtpyua],
.search-help-btn:hover[b-iqj6qtpyua] {
    color: var(--tac-acc, #0369a1);
}
/* _content/Athena.Server/Components/Settings/Tabs/LicenseTab.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   Settings > License.

   Scoped to this component, and it names no bare shared selector — the Settings
   page's legacy class names (.settings-tabs, .tab-btn, .settings-alert) are
   load-bearing for responsive.css and the Playwright suites, so nothing here
   reaches outside .license-tab.
--------------------------------------------------------------------------- */

.license-tab[b-xpddr8cz2m] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-body);
    color: var(--tac-ink);
}

/* ------------------------------------------------------------------- state */

.license-state[b-xpddr8cz2m] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    padding: 12px 16px;
    border: 1px solid var(--tac-line);
    border-left-width: 3px;
    border-radius: 4px;
    background: var(--tac-s2);
}

.license-state-label[b-xpddr8cz2m] {
    font-family: var(--tac-display);
    font-size: var(--tac-fs-label);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.license-state-detail[b-xpddr8cz2m] {
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.license-state-licensed[b-xpddr8cz2m] {
    border-left-color: var(--tac-ok);
    background: var(--tac-ok-tint);
    color: var(--tac-ok);
}

.license-state-grace[b-xpddr8cz2m],
.license-state-expired[b-xpddr8cz2m],
.license-state-unlicensed[b-xpddr8cz2m] {
    border-left-color: var(--tac-crit);
    color: var(--tac-crit);
}

/* ------------------------------------------------------------------- facts */

.license-facts[b-xpddr8cz2m] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 24px;
    margin: 0;
}

.license-facts dt[b-xpddr8cz2m] {
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.license-facts dd[b-xpddr8cz2m] {
    margin: 0;
}

.license-facts code[b-xpddr8cz2m] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
}

.license-grace[b-xpddr8cz2m] {
    color: var(--tac-crit);
    font-weight: 600;
}

/* --------------------------------------------------- limits and features */

.license-subhead[b-xpddr8cz2m] {
    margin: 0 0 8px;
    font-family: var(--tac-display);
    font-size: var(--tac-fs-label);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.license-limits[b-xpddr8cz2m],
.license-features[b-xpddr8cz2m] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tac-line);
    border-radius: 4px;
    background: var(--tac-line-soft);
    list-style: none;
    overflow: hidden;
}

.license-limits li[b-xpddr8cz2m],
.license-features li[b-xpddr8cz2m] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 8px 14px;
    background: var(--tac-s1);
}

.license-limit-value[b-xpddr8cz2m] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
}

/* A BREACHED limit is the one row that must not look like the others: "5 / 3" is
   the number actively refusing new accounts. Same --tac-crit the unlicensed state
   and the grace line already use — the breach and the block it causes read as one
   signal — and the same 3px left rule, drawn as an inset shadow so the row does
   not shift 3px out of line with its healthy neighbour. No tinted background: the
   set names no --tac-crit-tint, and a literal hex here is exactly what the token
   sweep removed. The WORDS carry the state anyway (.license-limit-breach); the
   colour is the second channel, never the only one. */
.license-limits li.breached[b-xpddr8cz2m] {
    box-shadow: inset 3px 0 0 var(--tac-crit);
}

.license-limits li.breached .license-limit-name[b-xpddr8cz2m],
.license-limits li.breached .license-limit-value[b-xpddr8cz2m] {
    color: var(--tac-crit);
    font-weight: 600;
}

.license-limit-breach[b-xpddr8cz2m] {
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-family: var(--tac-display);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.license-feature-state[b-xpddr8cz2m] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.license-feature.on .license-feature-state[b-xpddr8cz2m] {
    color: var(--tac-ok);
}

/* A feature you did not buy is not an error — it is dimmed, not red. Red here
   would read as a fault on a perfectly correct license. */
.license-feature.off .license-feature-name[b-xpddr8cz2m],
.license-feature.off .license-feature-state[b-xpddr8cz2m] {
    color: var(--tac-ink3);
}

/* ------------------------------------------------------------------ upload */

.license-upload[b-xpddr8cz2m] {
    padding-top: 16px;
    border-top: 1px solid var(--tac-line);
}

.license-upload-hint[b-xpddr8cz2m] {
    margin: 0 0 12px;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* Clipped rather than display:none, the same call ReportSettings' logo input
   makes: display:none makes a file input un-clickable from script in some
   engines, and a scripted .click() on it IS the picker now. It is out of the tab
   order (tabindex="-1") because the ActionButton beside it is the real control. */
.license-file-input[b-xpddr8cz2m] {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.license-upload-status[b-xpddr8cz2m] {
    margin: 12px 0 0;
    font-size: var(--tac-fs-meta);
}

.license-upload-status.ok[b-xpddr8cz2m] {
    color: var(--tac-ok);
}

.license-upload-status.error[b-xpddr8cz2m] {
    color: var(--tac-crit);
}
/* _content/Athena.Server/Layouts/LoginLayout.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops ground for the sign-in screen.

   site.css still defines .empty-layout (the old purple PCB gradient). These
   scoped rules compile to .empty-layout[b-xxxxx], so they win on specificity
   without touching the global sheet — the legacy block is dead weight and is
   flagged for removal in a follow-up.
   ============================================================================ */

.empty-layout[b-vbalv0lkkq] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    /* Cool-grey ground + blueprint grid. */
    background-color: #eef2f7;
    background-image:
        radial-gradient(ellipse 55% 45% at 30% 20%, rgba(3, 105, 161, 0.10), transparent 65%),
        radial-gradient(ellipse 40% 40% at 85% 85%, rgba(79, 70, 229, 0.06), transparent 60%),
        linear-gradient(rgba(3, 105, 161, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 105, 161, 0.07) 1px, transparent 1px);
    background-size: auto, auto, 32px 32px, 32px 32px;
    background-position: 0 0, 0 0, -1px -1px, -1px -1px;

    /* NOT overflow:hidden (which the legacy rule used) — that would trap the
       page when the card is taller than the viewport. */
    overflow-x: hidden;
}

/* Flex centring clips the TOP of an over-tall child. Once the screen is short
   or narrow enough for that to happen, anchor to the top and let it scroll. */
@media (max-width: 960px), (max-height: 820px) {
    .empty-layout[b-vbalv0lkkq] {
        align-items: flex-start;
    }
}
/* _content/Athena.Server/Pages/About.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops "system identity" screen — the scoped sheet for Pages/About.razor.

   There is no artboard for this page in Mock/tactical-ops/, so the look is
   DERIVED from the shipped references (Login.razor.css, Dashboard.razor.css,
   Profile.razor.css): bracket-ticked panels, a scan rule, JetBrains Mono on
   every number / port / version / timestamp and every uppercase label, Chakra
   Petch on headings, IBM Plex Sans for body copy, the #0369a1 accent, sharp
   corners.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, linked first in _Host, so every tactical-ops
   page shares one source of truth. This sheet only consumes them.

   ── TWO RULES THIS SHEET MUST NOT BREAK ──────────────────────────────────────

   1. NOTHING here may name a selector shared with other pages — .content-card,
      .card-title, .card-header, .status, .table, .data-table, .progress-bar,
      .btn / .btn-primary, .form-control, .form-group, .modal, and (the ones this
      page actually carries) .info-item / .info-label / .info-value, which 15+
      other components render. Every legacy class stays on the markup so
      Athena.E2ETests/AboutPageTests and the responsive.css phone rules keep
      working; every RULE below hangs off a .tac-* twin. site.css keeps its own
      .about-* rules as dead weight for the final sweep.
      AboutTacticalOpsLayoutTests regression-locks that.

   2. About.razor renders no child components at all (no EditForm, no
      ActionButton, nothing under Components/), so every element here carries this
      component's scope attribute and no ::deep is needed anywhere.
   ============================================================================ */

.tac-about[b-2zugnpxun0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 1100px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-lbl[b-2zugnpxun0] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-eyebrow[b-2zugnpxun0] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-dot[b-2zugnpxun0] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

.tac-dot.ok[b-2zugnpxun0] { background: var(--tac-ok); }
.tac-dot.warn[b-2zugnpxun0] { background: var(--tac-warn); }

.tac-chip[b-2zugnpxun0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tac-chip.ok[b-2zugnpxun0] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-chip.warn[b-2zugnpxun0] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

/* The bracket ticks + scan rule are the signature of every tactical-ops surface. */
.tac-hero[b-2zugnpxun0],
.tac-panel[b-2zugnpxun0] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-hero[b-2zugnpxun0]::before,
.tac-hero[b-2zugnpxun0]::after,
.tac-panel[b-2zugnpxun0]::before,
.tac-panel[b-2zugnpxun0]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-hero[b-2zugnpxun0]::before,
.tac-panel[b-2zugnpxun0]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-hero[b-2zugnpxun0]::after,
.tac-panel[b-2zugnpxun0]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-2zugnpxun0] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
}

/* ----------------------------------------------------------- identity banner */

/* Replaces the rounded navy gradient card: flat, square, and hairline-framed like
   every other tactical-ops surface. */
.tac-hero[b-2zugnpxun0] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 22px 24px;
    text-align: left;
}

.tac-hero-id[b-2zugnpxun0] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    flex: 1 1 320px;
}

.tac-brandmark[b-2zugnpxun0] {
    width: 46px;
    height: 46px;
    flex: none;
}

.tac-brandmark-hex[b-2zugnpxun0] {
    stroke: var(--tac-acc);
    stroke-width: 1.2;
}

.tac-brandmark-glyph[b-2zugnpxun0] {
    stroke: var(--tac-ink0);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-hero-text[b-2zugnpxun0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> for /about from GetPageTitle(). */
.tac-hero-name[b-2zugnpxun0] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 700;
    font-size: var(--tac-fs-display);
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-hero-sub[b-2zugnpxun0] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-body);
    line-height: 1.55;
}

.tac-hero-meta[b-2zugnpxun0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* The pill badge becomes a squared read-out: label in mono caps, build version in
   tabular mono. Its text still contains the Version label, which the Playwright
   AboutPage_DisplaysVersion assertion reads. */
.tac-versionbadge[b-2zugnpxun0] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 11px;
    border: 1px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-acc-dim);
    min-width: 0;
}

.tac-versionbadge-lbl[b-2zugnpxun0] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-versionbadge-num[b-2zugnpxun0] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- grid */

.tac-grid[b-2zugnpxun0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    min-width: 0;
}

/* -------------------------------------------------------------------- panels */

.tac-panel[b-2zugnpxun0] {
    display: flex;
    flex-direction: column;
}

.tac-panel-head[b-2zugnpxun0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 11px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

/* The mono 01..04 index replaces the emoji card glyph. */
.tac-panel-index[b-2zugnpxun0] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    color: var(--tac-acc);
    padding: 1px 5px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    flex: none;
}

.tac-panel-title[b-2zugnpxun0] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tac-panel-body[b-2zugnpxun0] {
    padding: 4px 18px 16px;
    min-width: 0;
}

/* ----------------------------------------------------------------- read-outs */

/* <dl>, so reset the UA margins the browser puts on dl/dd. */
.tac-facts[b-2zugnpxun0] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

/* flex-direction is spelled out on purpose: site.css still carries a bare
   `.info-item { flex-direction: column }` (dead weight until the final sweep) and
   this row keeps that class for the E2E hooks. */
.tac-fact[b-2zugnpxun0] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--tac-line);
    min-width: 0;
}

.tac-fact:last-child[b-2zugnpxun0] {
    border-bottom: 0;
    padding-bottom: 0;
}

.tac-fact .tac-lbl[b-2zugnpxun0] {
    flex: none;
    max-width: 45%;
}

/* Every value on this page is an id, a number, a port, a version or a timestamp —
   all of them mono, right-aligned, and allowed to wrap rather than push the page
   sideways (AssertNoPageOverflow runs at phone/tablet/desktop/1920). */
.tac-fact-value[b-2zugnpxun0] {
    margin: 0;
    min-width: 0;
    text-align: right;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- credits */

.tac-credits[b-2zugnpxun0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
}

.tac-credits-text[b-2zugnpxun0] {
    margin: 0;
    color: var(--tac-ink2);
    line-height: 1.6;
}

.tac-copyright[b-2zugnpxun0] {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* --------------------------------------------------------------- responsive */

/* One column below the tablet breakpoint — the grid must never force the shell to
   scroll sideways. */
@media (max-width: 1023px) {
    .tac-grid[b-2zugnpxun0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .tac-hero[b-2zugnpxun0] {
        padding: 18px 16px;
        gap: 14px;
    }

    .tac-hero-id[b-2zugnpxun0] {
        flex: 1 1 100%;
        gap: 12px;
    }

    .tac-brandmark[b-2zugnpxun0] {
        width: 38px;
        height: 38px;
    }

    .tac-hero-name[b-2zugnpxun0] {
        font-size: 22px;
    }

    .tac-panel-head[b-2zugnpxun0] {
        padding: 12px 14px 10px;
    }

    .tac-panel-body[b-2zugnpxun0] {
        padding: 4px 14px 14px;
    }

    /* Stack label over value: side-by-side rows squeeze a long OS string into a
       two-character column at phone width. */
    .tac-fact[b-2zugnpxun0] {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .tac-fact .tac-lbl[b-2zugnpxun0] {
        max-width: 100%;
    }

    .tac-fact-value[b-2zugnpxun0] {
        text-align: left;
    }
}

/* Nothing on this page animates, but honour the preference explicitly so a later
   addition cannot sneak one in. */
@media (prefers-reduced-motion: reduce) {
    .tac-about *[b-2zugnpxun0] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/ActiveDeployments.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops live-operations board — /deployments/active.

   Mock/tactical-ops/ has NO artboard for this page, so every value here is taken
   from the three shipped references (Pages/Login.razor.css,
   Pages/Dashboard.razor.css, Pages/Agents.razor.css) rather than invented:
   bracket-ticked panels, a scan line, mono uppercase labels, dot+label statuses,
   sharp corners, and the deep-blue accent.

   Scoped to ActiveDeployments.razor. The design tokens (--tac-*) are NOT declared
   here — they live on the document root in wwwroot/css/tactical-tokens.css, which is
   linked first in _Host, so every tactical page shares one source of truth.

   TWO RULES THIS SHEET MUST NOT BREAK
   -----------------------------------
   1. NOTHING here may name a bare selector shared with other pages — the card,
      badge, table, meter, button and modal class names site.css shares with up to
      41 other screens. The markup deliberately KEEPS them so the Playwright
      deployment suites and responsive.css's phone rules still work.
      Every rule below therefore hangs off a NEW .tac-* name.
      ActiveDeploymentsTacticalOpsLayoutTests regression-locks that.

   2. ActionButton is a child component: the button element it renders never
      carries this component's scope attribute, so it is reached only through
      ::deep from a .tac-* ancestor — exactly as Login.razor.css does for its
      own text inputs.

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, and
   carry a [b-xxxxx] attribute, so these rules out-specify the shared chrome on
   this page without touching any other.
   ============================================================================ */

.tac-active[b-nn9ltki5po] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-active .tac-panel[b-nn9ltki5po] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: 0;
    min-width: 0;
}

.tac-active .tac-panel[b-nn9ltki5po]::before,
.tac-active .tac-panel[b-nn9ltki5po]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-active .tac-panel[b-nn9ltki5po]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-active .tac-panel[b-nn9ltki5po]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-active .tac-scan[b-nn9ltki5po] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-active .tac-eyebrow[b-nn9ltki5po] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every number, id, timestamp and operator name is mono and tabular so columns of
   digits line up vertically. */
.tac-active .tac-num[b-nn9ltki5po] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-active .tac-dot[b-nn9ltki5po] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

/* --------------------------------------------------------------- page header */

.tac-active .tac-pagehead[b-nn9ltki5po] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-active .tac-pagehead-id[b-nn9ltki5po] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.tac-active .tac-pagehead-text[b-nn9ltki5po] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the route's only <h1> from GetPageTitle(). */
.tac-active .tac-pagetitle[b-nn9ltki5po] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-active .tac-pagemeta[b-nn9ltki5po] {
    margin: 0;
    max-width: 60ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-active .tac-pagehead-actions[b-nn9ltki5po] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
}

.tac-active .tac-back[b-nn9ltki5po] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin-top: 2px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    flex: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-active .tac-back:hover[b-nn9ltki5po] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-active .tac-back:focus-visible[b-nn9ltki5po] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-active .tac-back-arrow[b-nn9ltki5po] {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -------------------------------------------------------------- status legend */

.tac-active .tac-legendbar[b-nn9ltki5po] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0;
    padding: 9px 14px;
    background: var(--tac-s2);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
}

.tac-active .tac-legend-item[b-nn9ltki5po] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-active .tac-dot-running[b-nn9ltki5po] { background: var(--tac-acc); }
.tac-active .tac-dot-pending[b-nn9ltki5po] { background: var(--tac-warn); }
.tac-active .tac-dot-scheduled[b-nn9ltki5po] { background: var(--tac-ink3); }

/* --------------------------------------------------------- loading / empty state */

.tac-active .tac-state[b-nn9ltki5po] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
}

.tac-active .tac-state h3[b-nn9ltki5po] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-active .tac-state p[b-nn9ltki5po] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-active .tac-state-eyebrow[b-nn9ltki5po] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-active .tac-state-mark[b-nn9ltki5po] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

/* The empty-matrix state sits INSIDE a panel, so it must not draw a second frame. */
.tac-active .tac-matrix-panel .tac-state[b-nn9ltki5po] {
    border: 0;
    background: none;
    padding: 40px 18px;
}

.tac-active .tac-spinner[b-nn9ltki5po] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-nn9ltki5po 0.9s linear infinite;
}

.tac-active .tac-spinner-sm[b-nn9ltki5po] {
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: tac-spin-b-nn9ltki5po 0.9s linear infinite;
}

@keyframes tac-spin-b-nn9ltki5po {
    to { transform: rotate(360deg); }
}

.tac-active .tac-cta[b-nn9ltki5po] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-acc);
    color: #ffffff;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tac-active .tac-cta:hover[b-nn9ltki5po] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
}

.tac-active .tac-cta:focus-visible[b-nn9ltki5po] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-active .tac-cta-arrow[b-nn9ltki5po] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------- execution list */

.tac-active .tac-execlist[b-nn9ltki5po] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.tac-active .tac-exec[b-nn9ltki5po] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tac-active .tac-exec:hover[b-nn9ltki5po] {
    border-color: var(--tac-line2);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* A left status rail instead of the old 4px rounded border-left. */
.tac-active .tac-exec-running[b-nn9ltki5po] { box-shadow: inset 3px 0 0 var(--tac-acc), 0 1px 2px rgba(15, 23, 42, 0.06); }
.tac-active .tac-exec-pending[b-nn9ltki5po] { box-shadow: inset 3px 0 0 var(--tac-warn), 0 1px 2px rgba(15, 23, 42, 0.06); }
.tac-active .tac-exec-scheduled[b-nn9ltki5po] { box-shadow: inset 3px 0 0 var(--tac-ink3), 0 1px 2px rgba(15, 23, 42, 0.06); }
.tac-active .tac-exec-failed[b-nn9ltki5po] { box-shadow: inset 3px 0 0 var(--tac-crit), 0 1px 2px rgba(15, 23, 42, 0.06); }
.tac-active .tac-exec-completed[b-nn9ltki5po] { box-shadow: inset 3px 0 0 var(--tac-ok), 0 1px 2px rgba(15, 23, 42, 0.06); }

.tac-active .tac-exec-head[b-nn9ltki5po] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    min-width: 0;
}

.tac-active .tac-exec-mark[b-nn9ltki5po] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    font-size: inherit;
}

.tac-active .tac-mark[b-nn9ltki5po] {
    width: 18px;
    height: 18px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The running spinner has to fit the 34px mark box. */
.tac-active .tac-exec-mark .tac-spinner[b-nn9ltki5po] {
    width: 18px;
    height: 18px;
}

.tac-active .tac-exec-id[b-nn9ltki5po] {
    flex: 1;
    min-width: 0;
}

.tac-active .tac-exec-name[b-nn9ltki5po] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-label);
    letter-spacing: 0.02em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-active .tac-exec-meta[b-nn9ltki5po] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 5px;
    min-width: 0;
    font-size: var(--tac-fs-micro);
}

.tac-active .tac-meta[b-nn9ltki5po] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.tac-active .tac-meta-label[b-nn9ltki5po] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-active .tac-meta-value[b-nn9ltki5po] {
    color: var(--tac-ink);
    font-size: var(--tac-fs-micro);
    overflow-wrap: anywhere;
}

.tac-active .tac-exec-status[b-nn9ltki5po] {
    flex: none;
    text-align: end;
}

/* ------------------------------------------------------------ status dot+label */

/* site.css draws the shared badge as a rounded pill; the pill is unwound here into
   the dot + uppercase mono label the shipped pages use. */
.tac-active .tac-status[b-nn9ltki5po] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-active .tac-status-running[b-nn9ltki5po] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: rgba(3, 105, 161, 0.07);
}

.tac-active .tac-status-running .tac-dot[b-nn9ltki5po] { background: var(--tac-acc); }

.tac-active .tac-status-completed[b-nn9ltki5po] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-active .tac-status-completed .tac-dot[b-nn9ltki5po] { background: var(--tac-ok); }

.tac-active .tac-status-pending[b-nn9ltki5po],
.tac-active .tac-status-partial[b-nn9ltki5po] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-active .tac-status-pending .tac-dot[b-nn9ltki5po],
.tac-active .tac-status-partial .tac-dot[b-nn9ltki5po] { background: var(--tac-warn); }

.tac-active .tac-status-failed[b-nn9ltki5po] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-active .tac-status-failed .tac-dot[b-nn9ltki5po] { background: var(--tac-crit); }

.tac-active .tac-status-scheduled .tac-dot[b-nn9ltki5po],
.tac-active .tac-status-cancelled .tac-dot[b-nn9ltki5po] { background: var(--tac-ink3); }

/* ------------------------------------------------------------------ step rail */

.tac-active .tac-steprail[b-nn9ltki5po] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 10px 12px;
    background: var(--tac-s2);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    min-width: 0;
}

.tac-active .tac-step[b-nn9ltki5po] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    color: var(--tac-ink3);
}

.tac-active .tac-step-completed[b-nn9ltki5po] {
    border-color: var(--tac-ok);
    background: var(--tac-ok);
    color: #ffffff;
}

.tac-active .tac-step-running[b-nn9ltki5po] {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-active .tac-step-failed[b-nn9ltki5po] {
    border-color: var(--tac-crit);
    background: var(--tac-crit);
    color: #ffffff;
}

.tac-active .tac-connector[b-nn9ltki5po] {
    width: 18px;
    height: 1px;
    flex: none;
    background: var(--tac-line2);
}

.tac-active .tac-connector.completed[b-nn9ltki5po] {
    background: var(--tac-ok);
}

/* ------------------------------------------------------------- progress meter */

.tac-active .tac-progress[b-nn9ltki5po] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tac-active .tac-meter[b-nn9ltki5po] {
    flex: 1;
    height: 6px;
    min-width: 0;
    background: var(--tac-s2);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    overflow: hidden;
}

.tac-active .tac-meter-lg[b-nn9ltki5po] {
    height: 10px;
}

.tac-active .tac-meter-fill[b-nn9ltki5po] {
    height: 100%;
    border-radius: 0;
    background: var(--tac-ink3);
    transition: width 0.3s ease;
}

.tac-active .tac-meter-running[b-nn9ltki5po] { background: var(--tac-acc); }
.tac-active .tac-meter-completed[b-nn9ltki5po] { background: var(--tac-ok); }
.tac-active .tac-meter-failed[b-nn9ltki5po] { background: var(--tac-crit); }
.tac-active .tac-meter-partial[b-nn9ltki5po] { background: var(--tac-warn); }

.tac-active .tac-progress-text[b-nn9ltki5po] {
    flex: none;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    text-align: end;
}

/* --------------------------------------------------------------- action rows */

.tac-active .tac-actions[b-nn9ltki5po] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--tac-line);
}

/* ============================================================ detail view */

.tac-active .tac-detail-body[b-nn9ltki5po] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.tac-active .tac-panel-head[b-nn9ltki5po] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 18px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-active .tac-panel-mark[b-nn9ltki5po] {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-active .tac-panel-title[b-nn9ltki5po] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
    min-width: 0;
}

.tac-active .tac-panel-sub[b-nn9ltki5po] {
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
    min-width: 0;
}

.tac-active .tac-close[b-nn9ltki5po] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-active .tac-close:hover[b-nn9ltki5po] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-active .tac-close:focus-visible[b-nn9ltki5po] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-active .tac-close svg[b-nn9ltki5po] {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* --------------------------------------------------------------- info grid */

.tac-active .tac-infogrid[b-nn9ltki5po] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 18px;
    margin: 0;
    padding: 16px 18px;
    min-width: 0;
}

.tac-active .tac-info-item[b-nn9ltki5po] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tac-active .tac-info-label[b-nn9ltki5po] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-active .tac-info-value[b-nn9ltki5po] {
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-active .tac-overall[b-nn9ltki5po] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0 18px 16px;
    min-width: 0;
}

.tac-active .tac-metrics[b-nn9ltki5po] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
}

.tac-active .tac-metric[b-nn9ltki5po] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-active .tac-metric-ok[b-nn9ltki5po] { color: var(--tac-ok); }
.tac-active .tac-metric-ok .tac-dot[b-nn9ltki5po] { background: var(--tac-ok); }
.tac-active .tac-metric-run[b-nn9ltki5po] { color: var(--tac-acc); }
.tac-active .tac-metric-run .tac-dot[b-nn9ltki5po] { background: var(--tac-acc); }
.tac-active .tac-metric-crit[b-nn9ltki5po] { color: var(--tac-crit); }
.tac-active .tac-metric-crit .tac-dot[b-nn9ltki5po] { background: var(--tac-crit); }

.tac-active .tac-execinfo .tac-actions[b-nn9ltki5po] {
    padding: 12px 18px;
    border-top: 1px solid var(--tac-line);
}

/* ------------------------------------------------------------------- matrix */

/* One column per package step, so this is the one thing on the page that can get
   wider than a phone. It scrolls INSIDE the panel at EVERY width — the document
   itself must never scroll sideways (AssertNoPageOverflow at 375/768/1280/1920). */
.tac-active .tac-tablewrap[b-nn9ltki5po] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-active .tac-matrix[b-nn9ltki5po] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-active .tac-matrix .tac-th[b-nn9ltki5po] {
    padding: 9px 10px;
    text-align: center;
    background: var(--tac-s2);
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-active .tac-matrix .tac-th-agent[b-nn9ltki5po] {
    text-align: start;
    min-width: 160px;
    position: sticky;
    left: 0;
    z-index: 1;
}

.tac-active .tac-matrix .tac-th-step[b-nn9ltki5po] {
    min-width: 44px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tac-active .tac-matrix .tac-th-state[b-nn9ltki5po] {
    min-width: 110px;
    text-align: end;
}

.tac-active .tac-matrix .tac-row > td[b-nn9ltki5po] {
    padding: 8px 10px;
    text-align: center;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-active .tac-matrix .tac-row:last-child > td[b-nn9ltki5po] {
    border-bottom: 0;
}

.tac-active .tac-matrix .tac-cell-agent[b-nn9ltki5po] {
    text-align: start;
    position: sticky;
    left: 0;
    background: var(--tac-s1);
    z-index: 1;
}

.tac-active .tac-matrix .tac-cell-state[b-nn9ltki5po] {
    text-align: end;
    white-space: nowrap;
}

.tac-active .tac-hostname[b-nn9ltki5po] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* Step cells: flat squares, semantic wash, mono glyph. */
.tac-active .tac-matrix .tac-step-cell[b-nn9ltki5po] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    line-height: 1;
    cursor: pointer;
    border-inline-start: 1px solid var(--tac-line);
    transition: background 0.12s ease;
}

.tac-active .tac-matrix .tac-step-cell.tac-step-completed[b-nn9ltki5po] {
    background: rgba(21, 128, 61, 0.1);
    color: var(--tac-ok);
}

.tac-active .tac-matrix .tac-step-cell.tac-step-running[b-nn9ltki5po] {
    background: rgba(3, 105, 161, 0.1);
    color: var(--tac-acc);
}

.tac-active .tac-matrix .tac-step-cell.tac-step-failed[b-nn9ltki5po] {
    background: rgba(220, 38, 38, 0.1);
    color: var(--tac-crit);
}

.tac-active .tac-matrix .tac-step-cell.tac-step-skipped[b-nn9ltki5po] {
    background: var(--tac-s2);
    color: var(--tac-ink3);
}

.tac-active .tac-matrix .tac-step-cell.tac-step-pending[b-nn9ltki5po] {
    background: none;
    color: var(--tac-line2);
}

.tac-active .tac-matrix .tac-step-cell:hover[b-nn9ltki5po] {
    outline: 1px solid var(--tac-acc);
    outline-offset: -1px;
}

.tac-active .tac-matrix .tac-step-cell.selected[b-nn9ltki5po] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* -------------------------------------------------------------- step output */

.tac-active .tac-output-bar[b-nn9ltki5po] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0;
    padding: 12px 18px;
    background: var(--tac-s2);
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-active .tac-output-label[b-nn9ltki5po] {
    margin: 0;
    padding: 12px 18px 6px;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-active .tac-output-label-crit[b-nn9ltki5po] {
    color: var(--tac-crit);
}

.tac-active .tac-pre[b-nn9ltki5po] {
    margin: 0 18px 16px;
    padding: 12px 14px;
    max-height: 340px;
    overflow: auto;
    background: var(--tac-ink0);
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    color: #dbe6f2;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tac-active .tac-pre-crit[b-nn9ltki5po] {
    color: #fecaca;
    border-color: rgba(220, 38, 38, 0.5);
}

.tac-active .tac-nooutput[b-nn9ltki5po] {
    margin: 0;
    padding: 20px 18px 24px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* --------------------------------------------------- child components (::deep) */

/* ActionButton renders its own <button class="btn ...">, a shared selector this
   sheet must not restyle globally, so it is reached only through ::deep. */
.tac-active .tac-pagehead-actions[b-nn9ltki5po]  .btn,
.tac-active .tac-actions[b-nn9ltki5po]  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    min-width: 30px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-active .tac-pagehead-actions[b-nn9ltki5po]  .btn.btn-icon,
.tac-active .tac-actions[b-nn9ltki5po]  .btn.btn-icon {
    width: 30px;
    padding: 0;
}

.tac-active .tac-pagehead-actions[b-nn9ltki5po]  .btn:hover:not(:disabled),
.tac-active .tac-actions[b-nn9ltki5po]  .btn:hover:not(:disabled) {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
}

.tac-active .tac-actions[b-nn9ltki5po]  .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-active .tac-actions[b-nn9ltki5po]  .btn.btn-warning:hover:not(:disabled) {
    border-color: var(--tac-warn);
    color: var(--tac-warn);
}

.tac-active .tac-pagehead-actions[b-nn9ltki5po]  .btn:focus-visible,
.tac-active .tac-actions[b-nn9ltki5po]  .btn:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-active .tac-actions[b-nn9ltki5po]  .action-btn-icon {
    font-size: var(--tac-fs-meta);
    line-height: 1;
    filter: grayscale(1);
    opacity: 0.85;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
    .tac-active .tac-pagetitle[b-nn9ltki5po] {
        font-size: 20px;
    }

    .tac-active .tac-infogrid[b-nn9ltki5po] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .tac-active[b-nn9ltki5po] {
        gap: 12px;
    }

    .tac-active .tac-pagehead-id[b-nn9ltki5po] {
        flex-direction: column;
        gap: 8px;
    }

    .tac-active .tac-pagehead-actions[b-nn9ltki5po] {
        margin-left: 0;
        width: 100%;
    }

    /* One column below the tablet breakpoint — a two-up info grid at phone width
       is what pushes this page sideways. */
    .tac-active .tac-infogrid[b-nn9ltki5po] {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }

    .tac-active .tac-panel-head[b-nn9ltki5po],
    .tac-active .tac-output-bar[b-nn9ltki5po] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-active .tac-overall[b-nn9ltki5po] {
        padding: 0 14px 14px;
    }

    .tac-active .tac-execinfo .tac-actions[b-nn9ltki5po] {
        padding: 12px 14px;
    }

    .tac-active .tac-pre[b-nn9ltki5po] {
        margin: 0 14px 14px;
    }

    .tac-active .tac-exec[b-nn9ltki5po] {
        padding: 14px;
    }

    .tac-active .tac-exec-head[b-nn9ltki5po] {
        flex-wrap: wrap;
    }

    .tac-active .tac-exec-status[b-nn9ltki5po] {
        width: 100%;
        text-align: start;
    }

    .tac-active .tac-progress[b-nn9ltki5po] {
        flex-wrap: wrap;
    }

    .tac-active .tac-progress-text[b-nn9ltki5po] {
        width: 100%;
        text-align: start;
    }
}

/* Honour reduced-motion: the spinners are the only real animation here, but kill
   every transition too so nothing moves for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-active *[b-nn9ltki5po],
    .tac-active .tac-actions[b-nn9ltki5po]  * {
        transition: none !important;
        animation: none !important;
    }
}

/* .tac-active .tac-status is worn by TWO different things on this page: the hero badge
   in the summary header, where the 16px label step is right, and a badge inside a
   table data cell, where the surrounding text is 12-13px and 16px towers over the
   row. Scoping to `td` retunes only the in-row instance and leaves the hero alone -
   which is why this is an override rather than an edit to the rule above. */
.tac-active td .tac-status[b-nn9ltki5po] {
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
}
/* _content/Athena.Server/Pages/AgentDetails.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops agent record — Pages/AgentDetails.razor.

   There is no artboard for this screen in Mock/tactical-ops/, so the language is
   DERIVED from the shipped references: the bracket-ticked .tac-panel + .tac-scan
   hairline from Login.razor, the dot+label status convention / mono table / flat
   action cluster from Agents.razor, and the breadcrumb + detail-head shapes from
   CollectionDetails.razor. Consistency with those beats novelty.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, linked first in _Host, so every tactical-ops
   page shares one source of truth.

   WHY ALMOST EVERY RULE GOES THROUGH ::deep
   -----------------------------------------
   This page is a thin shell around child components: AgentDetailHeader,
   AgentDetailSideNav, thirty Components/AgentDetails/Sections/* and two
   Components/AgentDetails/Modals/*. All of them are EXCLUSIVE to this page
   (verified by grep), so they carry .tac-* twin classes — but their DOM never
   receives this component's scope attribute. `.tac-agentdetail ::deep X` compiles
   to `.tac-agentdetail[b-xxx] X`, which reaches them and, being anchored on the
   page root, cannot leak to any other screen.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   site.css shares .content-card, .card-title, .card-header, .status*, .data-table,
   .btn*, .modal*, .form-*, .info-* and .stat-* with up to 41 other pages. The
   markup keeps every one of those names (E2E selectors, bUnit selectors and
   responsive.css's phone rules all key on them) and carries a NEW .tac-* class
   beside it; every selector below hangs off the .tac-* name. Scoped stylesheets
   load from Athena.Server.styles.css, i.e. AFTER site.css, so an equal-specificity
   rule wins on source order; where site.css is more specific the rule below is
   written long enough to outrank it.
   ============================================================================ */

.tac-agentdetail[b-m2bqwjh0y4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    /* The record must never be the reason the document scrolls sideways —
       AssertNoPageOverflow runs at 375 / 768 / 1280 / 1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------- shared atoms */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-eyebrow {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-lbl {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* Every number, id, address, path, version and timestamp on this page is mono and
   tabular so columns of digits line up vertically. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-num {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-path {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-sep {
    color: var(--tac-ink3);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-muted,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-hint {
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-hint {
    margin: 0;
    padding: 36px 16px;
    text-align: center;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-hint-denied {
    color: var(--tac-crit);
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-panel {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-panel::before,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-panel::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-panel::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-panel::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ---------------------------------------------------------------- breadcrumb */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-crumb {
    color: var(--tac-acc);
    text-decoration: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-crumb:hover {
    color: var(--tac-acc-deep);
    text-decoration: underline;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-crumb-sep {
    color: var(--tac-ink3);
    opacity: 0.7;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-crumb-current {
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- record head */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-detailhead {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 22px;
    margin: 0;
    border-radius: 0;
}

/* align-items:center, not flex-start: the identity block (eyebrow + hostname +
   subline) is ~67px tall while the status chip and the action rail are ~30px, so
   flex-start pinned the status icon to the TOP of the head instead of leaving it
   on the hostname's centre line. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-detailhead-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* One fixed frame for whichever OS mark renders (Windows tiles / macOS disc /
   Linux svg / emoji fallback), so the title never shifts between platforms. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-os-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-identity-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-hostname {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.03em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-subline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

/* ------------------------------------------------------- status (dot + label) */

/* site.css draws .status-icon as a 36px coloured circle; the tactical convention
   is a semantic dot next to an uppercase mono label, so the circle is unwound. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-status-online {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-status-online .tac-dot { background: var(--tac-ok); }

.tac-agentdetail[b-m2bqwjh0y4]  .tac-status-offline {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-status-offline .tac-dot { background: var(--tac-ink3); }

.tac-agentdetail[b-m2bqwjh0y4]  .tac-status-failed {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-status-failed .tac-dot { background: var(--tac-crit); }

.tac-agentdetail[b-m2bqwjh0y4]  .tac-status-pending {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-status-pending .tac-dot { background: var(--tac-warn); }

/* --------------------------------------------------------------- action rail */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of six actions reads as one instrument cluster rather
   than six competing pills. Hover restores the semantic colour. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-actions .btn.btn-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-actions .btn.btn-success:hover:not(:disabled) {
    border-color: var(--tac-ok);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* Text buttons: flat, uppercase, square. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    white-space: nowrap;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-btn:hover:not(:disabled) {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-btn:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-btn.tac-btn-primary {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-btn.tac-btn-primary:hover:not(:disabled) {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-btn.tac-btn-warn {
    background: var(--tac-warn);
    border-color: var(--tac-warn);
    color: #ffffff;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ------------------------------------------------------------ summary cards */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-statgrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--tac-line);
    border: 1px solid var(--tac-line);
    min-width: 0;
}

/* Hairline dividers instead of five floating rounded tiles: the grid gap IS the
   rule, so the five facts read as one instrument panel. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    background: var(--tac-s1);
    border-radius: 0;
    text-align: start;
    min-width: 0;
}

/* 12px, not 10px: UPTIME / AGENT VERSION / LAST HEARTBEAT / REGISTERED / ALERTS
   name the five facts the head exists to state, and at 10px mono with 0.16em
   tracking they read as legal small print. The tracking is eased back a touch so
   the wider glyphs still fit a fifth of the grid. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-stat-label {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-stat-value {
    margin: 0;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-lg);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-stat-value-sm {
    font-size: var(--tac-fs-meta);
}

/* The sub-line stays the quietest thing in the card, but moves up with the label
   so the three lines keep their 12 / 18 / 11 hierarchy. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-stat-sub {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    color: var(--tac-ink3);
}

/* The alerts card's severity badge — squared off to match the chip vocabulary. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-stat-value .severity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 0;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    text-decoration: none;
}

/* --------------------------------------------------------- update-progress banner */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 0;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    box-shadow: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner-banner-info {
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner-banner-success {
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner-banner-error {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner-mark {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner-title {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-phase {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-phase-completed {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-phase-failed {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-barwrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-bar {
    flex: 1;
    height: 4px;
    border-radius: 0;
    background: var(--tac-line);
    overflow: hidden;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-bar-fill {
    height: 100%;
    border-radius: 0;
    background: var(--tac-acc);
    transition: width 0.25s ease;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-bar-fill.completed { background: var(--tac-ok); }
.tac-agentdetail[b-m2bqwjh0y4]  .tac-bar-fill.failed { background: var(--tac-crit); }

.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner-msg,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner-err {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-updatebanner-err {
    color: var(--tac-crit);
}

/* ------------------------------------------------------------- the workspace */

/* .agent-content-area keeps its name — responsive.css stacks it below 992px. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-workspace {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 0;
    overflow: visible;
    min-height: 520px;
    min-width: 0;
}

/* ------------------------------------------------------------- section rail */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav {
    width: 232px;
    flex: none;
    height: auto;
    align-self: stretch;
    max-height: 760px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--tac-s2);
    border-right: 1px solid var(--tac-line);
    scrollbar-width: thin;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-group {
    border-bottom: 1px solid var(--tac-line);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-group:last-child {
    border-bottom: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-header {
    padding: 9px 14px;
    background: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-left: 2px solid transparent;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-item:hover {
    background: rgba(3, 105, 161, 0.06);
    color: var(--tac-ink0);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-item.active {
    background: var(--tac-s1);
    border-left-color: var(--tac-acc);
    color: var(--tac-acc-deep);
    font-weight: 600;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    font-size: 0;
}

/* Line-art glyphs replace the emoji the rail used to carry — an emoji renders in
   whatever face the OS ships and cannot be made to sit in this palette. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-glyph {
    width: 16px;
    height: 16px;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-item:hover .tac-nav-glyph,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-item.active .tac-nav-glyph {
    stroke: var(--tac-acc);
}

/* ------------------------------------------------------------ content panel */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-content {
    flex: 1;
    min-width: 0;
    padding: 18px;
    background: var(--tac-s1);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ------------------------------------------------------------ section cards */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-card {
    position: relative;
    padding: 16px 18px;
    margin: 0 0 14px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: none;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-card:last-child {
    margin-bottom: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-card-title {
    margin: 0 0 14px;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tac-line);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
}

/* Inside a card-head the title already sits on the head's own rule. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-card-head .tac-card-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* ----------------------------------------------------------------- info grid */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-infogrid {
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--tac-line);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-info-label {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-info-value {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-info-item-wide {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------- tables */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tablewrap,
.tac-agentdetail[b-m2bqwjh0y4]  .features-table-container,
.tac-agentdetail[b-m2bqwjh0y4]  .services-table-container,
.tac-agentdetail[b-m2bqwjh0y4]  .software-table-container {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    border-radius: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-table {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-table th {
    text-align: start;
    padding: 8px 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-table .tac-th-actions {
    text-align: end;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-table td {
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-table tbody tr:last-child > td {
    border-bottom: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-table tbody tr:hover > td {
    background: rgba(3, 105, 161, 0.05);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-table .tac-cell-actions {
    text-align: end;
    white-space: nowrap;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-table .tac-cell-actions .tac-actions {
    justify-content: flex-end;
}

/* ------------------------------------------------------------ recent activity */

/* Activity is a table like every other record list here. The leading mark carries
   the activity KIND as a colour (the same .activity-accent-* class the old cards
   used), which is all the per-kind emoji was ever conveying. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-table .tac-th-when {
    width: 1%;
    white-space: nowrap;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-row-toggle {
    cursor: pointer;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-row-toggle:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-event {
    white-space: nowrap;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-mark {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 9px;
    border-radius: 50%;
    background: var(--tac-ink3);
    vertical-align: middle;
}

.tac-agentdetail[b-m2bqwjh0y4]  .activity-accent-deployment .tac-activity-mark,
.tac-agentdetail[b-m2bqwjh0y4]  .activity-accent-scan .tac-activity-mark,
.tac-agentdetail[b-m2bqwjh0y4]  .activity-accent-command .tac-activity-mark {
    background: var(--tac-acc);
}

.tac-agentdetail[b-m2bqwjh0y4]  .activity-accent-cert-renew .tac-activity-mark,
.tac-agentdetail[b-m2bqwjh0y4]  .activity-accent-heartbeat .tac-activity-mark {
    background: var(--tac-ok);
}

.tac-agentdetail[b-m2bqwjh0y4]  .activity-accent-cert-expiring .tac-activity-mark {
    background: var(--tac-warn);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-title {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    vertical-align: middle;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-desc {
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-when {
    white-space: nowrap;
    text-align: end;
    color: var(--tac-ink3);
    font-size: var(--tac-fs-micro);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-caret {
    width: 12px;
    height: 12px;
    margin-inline-start: 8px;
    vertical-align: middle;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-row.expanded .tac-activity-caret {
    transform: rotate(90deg);
}

/* The disclosure row: a full-width drawer under the row it belongs to, tinted so
   it reads as part of that row rather than as the next record. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-table tbody tr.tac-activity-detailrow > td {
    padding: 0 10px 12px;
    background: var(--tac-s2);
}

/* The drawer is part of the row above it, so the generic row-hover tint must not
   repaint it as a record of its own. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-table tbody tr.tac-activity-detailrow:hover > td {
    background: var(--tac-s2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4px 18px;
    margin: 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--tac-line);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-detail {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-detail dt {
    flex: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    line-height: 1.7;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-activity-detail dd {
    margin: 0;
    min-width: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------- live agent logs */

/* The log card's right-hand control cluster. site.css styles `.form-group label`
   as display:block, which stacked "Log Level" ABOVE its <select> and left that
   member 62px tall beside a 17px streaming indicator — the row simply did not
   line up. Every member is now a row item on one centre line. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-logcontrols {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-logstream {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-logstream-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--tac-ink3);
    box-shadow: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-logstream-dot.active {
    background: var(--tac-ok);
    box-shadow: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-logstream-dot.inactive {
    background: var(--tac-ink3);
    box-shadow: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-logfield {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-logfield .tac-logfield-label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

/* site.css sizes .log-level-select at 140px/13px; the tactical control height and
   mono face come from .tac-select, this just keeps the two from disagreeing. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-logfield .log-level-select {
    width: 150px;
    flex: none;
}

/* ActionButton renders .btn.btn-sm at 28px; matching the 32px controls keeps the
   whole cluster on one rule. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-logcontrols .btn {
    height: 32px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-emptycell {
    padding: 32px 12px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-filename {
    overflow-wrap: anywhere;
}

/* The file-type dingbat is the ONLY glyph the file list has to tell a folder from
   a file; desaturate it so it sits with the palette instead of shouting. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-fileglyph {
    margin-inline-end: 8px;
    filter: grayscale(0.6);
    font-size: var(--tac-fs-micro);
}

/* --------------------------------------------------------- loading / empty */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-state h3 {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-label);
    letter-spacing: 0.05em;
    color: var(--tac-ink0);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-state p,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-state-text {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

/* The empty-state dingbats stay (E2E asserts .empty-icon is visible) but are
   desaturated and shrunk so they read as a mark rather than a picture. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-state-icon {
    font-size: var(--tac-fs-display);
    line-height: 1;
    filter: grayscale(0.7);
    opacity: 0.8;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-m2bqwjh0y4 0.9s linear infinite;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-spinner-sm {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: tac-spin-b-m2bqwjh0y4 0.9s linear infinite;
}

@keyframes tac-spin-b-m2bqwjh0y4 {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ banners */

/* One flat banner vocabulary replaces the hand-rolled inline pastel boxes that
   were scattered through the registry and file-browser markup. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 9px 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-warn {
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-warn .tac-dot { background: var(--tac-warn); }

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-crit {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-crit .tac-dot { background: var(--tac-crit); }

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-info {
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-info .tac-dot { background: var(--tac-acc); }

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-stack {
    display: block;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-count strong {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-dismiss {
    margin-inline-start: auto;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-banner-results {
    margin-top: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-result {
    padding: 3px 6px;
    cursor: pointer;
    border-radius: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-result:hover {
    background: rgba(3, 105, 161, 0.08);
}

/* ------------------------------------------------------------------ toolbars */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-toolbar-inset {
    padding: 10px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    border-radius: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-toolbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-field-hive { flex: 0 1 280px; }
.tac-agentdetail[b-m2bqwjh0y4]  .tac-field-drive { flex: 0 1 200px; }

.tac-agentdetail[b-m2bqwjh0y4]  .tac-field label {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* PADDING IS LOAD-BEARING HERE. site.css gives every .form-control
   `padding: 10px 12px` with `box-sizing: border-box`; squeezing that into the
   tactical 32px control height left 32 - 20 - 2 = 10px of content box for a 12px
   glyph, so the drive <select> and the registry hive <select> CLIPPED their own
   text top and bottom. The height is the design; the inherited 10px padding is
   the bug, so it is restated rather than the height being grown. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-select,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-field .form-control {
    height: 32px;
    padding: 0 10px;
    line-height: normal;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    min-width: 0;
    max-width: 100%;
}

/* A <select> reserves room for its own disclosure arrow; without it the widest
   option can sit under the arrow on some engines. */
.tac-agentdetail[b-m2bqwjh0y4]  select.tac-select {
    padding-right: 26px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-field textarea.form-control,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-code {
    height: auto;
    padding: 8px 10px;
    line-height: 1.5;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-select:focus,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-field .form-control:focus {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    outline: none;
}

/* SearchBar is a child component. */
.tac-agentdetail[b-m2bqwjh0y4]  .search-bar {
    height: 32px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-agentdetail[b-m2bqwjh0y4]  .search-bar .search-input {
    background: transparent;
    border: 0;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

/* ------------------------------------------------- registry / file-browser split */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-split {
    display: flex;
    gap: 0;
    min-width: 0;
    min-height: 420px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    border-radius: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-split-tree {
    flex: 0 0 272px;
    min-width: 0;
    max-height: 560px;
    overflow: auto;
    padding: 8px;
    border-right: 1px solid var(--tac-line);
    background: var(--tac-s2);
    border-radius: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-split-body {
    flex: 1;
    min-width: 0;
    max-height: 560px;
    overflow: auto;
    padding: 0;
    background: var(--tac-s1);
    border-radius: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-split-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-pathline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-pathbar {
    flex: 1 1 240px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    overflow-x: auto;
    white-space: nowrap;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tree {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-treenode {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 0;
    cursor: pointer;
    color: var(--tac-ink2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-treenode:hover {
    background: rgba(3, 105, 161, 0.08);
    color: var(--tac-ink0);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-treenode-caret,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-treenode-mark {
    width: 12px;
    height: 12px;
    flex: none;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-treenode.expanded .tac-treenode-caret {
    transform: rotate(90deg);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-treenode-name {
    overflow-wrap: anywhere;
}

/* The REGISTRY tree is built by a RenderTreeBuilder and keeps site.css's
   .tree-node-header / .tree-icon skeleton; this collapses the icon span around
   the .tac-treenode-mark svg that replaced its 📁 dingbat, so the mark sits on
   the label's centre line exactly as it does in the file-browser tree. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-treeicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
    flex: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-typebadge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    color: var(--tac-ink2);
    white-space: nowrap;
}

/* ------------------------------------------------------------- file editor */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-editor {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-editor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--tac-line);
    border-bottom: 0;
    background: var(--tac-s2);
    border-radius: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-code {
    width: 100%;
    min-height: 380px;
    resize: vertical;
    padding: 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.6;
    color: var(--tac-ink0);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-code:focus {
    border-color: var(--tac-acc);
    outline: none;
    box-shadow: none;
}

/* ------------------------------------------------------- screen-share stage */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-stage {
    position: relative;
    width: 100%;
    height: 80vh;
    margin: 0;
    background: #05080d;
    border: 1px solid var(--tac-line2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-stage-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #05080d;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modebadge {
    z-index: 2;
}

/* In-session tool flyout for the RustDesk stage.
   A bar across the BOTTOM sat exactly on the remote machine's taskbar — the one strip an
   operator needs to see and click — so this hangs off the LEFT edge instead: a 28px handle
   when closed, sliding open over wallpaper rather than over the Start button. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    align-items: stretch;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-handle {
    width: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    background: rgba(5, 8, 13, 0.85);
    border: 1px solid var(--tac-line2);
    border-left: none;
    border-radius: 0 4px 4px 0;
    color: #cfe3ff;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-handle:hover {
    background: rgba(5, 8, 13, 0.95);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-handle svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
}

/* Closed: the panel is laid out but clipped to nothing, so opening is a transition rather than
   a reflow and the handle never jumps. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-panel {
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: width 0.16s ease, opacity 0.16s ease;
    background: rgba(5, 8, 13, 0.92);
    border: 1px solid var(--tac-line2);
    border-left: none;
    order: 1;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools.is-open .tac-tools-panel {
    width: 210px;
    opacity: 1;
    padding: 10px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools.is-open .tac-tools-handle {
    border-radius: 0;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-title {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa6c4;
    margin-bottom: 8px;
    white-space: nowrap;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-item {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
    padding: 6px 8px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    color: #e6eef9;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--tac-line2);
    border-radius: 3px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-item:disabled {
    opacity: 0.45;
    cursor: default;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-type {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tac-line2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-tools-type .tac-input {
    width: 100%;
    margin-bottom: 6px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-overlay-monitor {
    position: absolute;
    top: 8px;
    right: 118px;
    z-index: 2;
    width: auto;
    max-width: 240px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-overlay-quality {
    position: absolute;
    top: 8px;
    right: 62px;
    z-index: 2;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-btn-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

/* ------------------------------------------------------------------ alerts */

.tac-agentdetail[b-m2bqwjh0y4]  .tac-alert {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-alert strong {
    display: block;
    margin-bottom: 3px;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-alert-body {
    margin: 4px 0 8px;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-alert-warn {
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-alert-crit {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-alert-floating {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    max-width: 520px;
    background: var(--tac-s1);
    box-shadow: 0 6px 22px rgba(5, 8, 13, 0.45);
}

/* ------------------------------------------------------------------ modals */

/* Every modal keeps .modal-overlay > .modal and the header/body/footer chain —
   AgentDetailsPageTests drives the revoke and remove dialogs through exactly
   those selectors. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-overlay {
    backdrop-filter: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal::before,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-head {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-head h2,
.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-head h3 {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-warnbox {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-warnbox strong {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Read-only "what am I about to act on" block. */
.tac-agentdetail[b-m2bqwjh0y4]  .tac-subject {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-subject p {
    display: flex;
    gap: 10px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-subject p strong {
    flex: none;
    min-width: 11ch;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-error {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 0;
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-foot .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-foot .btn:hover:not(:disabled) {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-foot .btn.btn-primary {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-foot .btn.btn-primary:hover:not(:disabled) {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-foot .btn.btn-danger {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-foot .btn.btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-agentdetail[b-m2bqwjh0y4]  .tac-modal-foot .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --------------------------------------------------------------- responsive */

/* Below 1280 the five summary cards stop fitting side by side. */
@media (max-width: 1279px) {
    .tac-agentdetail[b-m2bqwjh0y4]  .tac-statgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-nav {
        width: 200px;
    }
}

/* responsive.css turns the bare .agent-side-nav into a horizontal scrollable
   strip below 1023px. These scoped rules carry a higher specificity than its
   bare selectors, so the strip is re-stated here rather than fought. */
@media (max-width: 1023px) {
    .tac-agentdetail[b-m2bqwjh0y4]  .tac-workspace {
        flex-direction: column;
        min-height: 0;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-nav {
        width: 100%;
        max-height: none;
        height: auto;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--tac-line);
        scrollbar-width: none;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-nav::-webkit-scrollbar {
        display: none;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-group {
        display: flex;
        flex-shrink: 0;
        border-bottom: 0;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-header {
        display: none;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-item {
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 44px;
        border-left: 0;
        border-bottom: 2px solid transparent;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--tac-acc);
        background: transparent;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-split {
        flex-direction: column;
        min-height: 0;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-split-tree {
        flex: none;
        width: 100%;
        max-height: 220px;
        border-right: 0;
        border-bottom: 1px solid var(--tac-line);
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-split-body {
        max-height: none;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-stage {
        height: 56vh;
    }
}

@media (max-width: 767px) {
    .tac-agentdetail[b-m2bqwjh0y4]  .tac-statgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-detailhead {
        padding: 16px 14px;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-hostname {
        font-size: 20px;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-content {
        padding: 12px;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-card {
        padding: 14px 12px;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-detailhead-top {
        flex-direction: column;
        align-items: stretch;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-actions {
        justify-content: flex-start;
    }

    .tac-agentdetail[b-m2bqwjh0y4]  .tac-overlay-monitor,
    .tac-agentdetail[b-m2bqwjh0y4]  .tac-overlay-quality {
        display: none;
    }
}

@media (max-width: 479px) {
    .tac-agentdetail[b-m2bqwjh0y4]  .tac-statgrid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Honour reduced-motion: nothing here is decorative animation except the
   spinners and the progress fill, but kill the transitions too. */
@media (prefers-reduced-motion: reduce) {
    .tac-agentdetail[b-m2bqwjh0y4]  * {
        transition: none !important;
        animation-duration: 1.6s !important;
    }
}
/* _content/Athena.Server/Pages/Agents.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Agents roster — Mock/tactical-ops/agents.html translated onto the
   real page.

   Scoped to Agents.razor. The design tokens (--tac-*) are NOT declared here —
   they live on :root in wwwroot/css/tactical-tokens.css, linked first in _Host,
   so every tactical-ops page shares one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   The Agents page is built almost entirely out of class names site.css shares
   with 4-41 other screens (.stats-bar, .stat-item, .status, .btn, .modal-*,
   .pagination, .search-bar ...). Blazor scoping alone would keep a bare
   `.status { }` rule from leaking, but it would still fight site.css on THIS
   page in ways that are invisible from the other 40. So the markup carries a
   NEW .tac-* class next to every legacy one, and every selector below hangs off
   a .tac-* name. The legacy classes stay on the elements untouched because the
   Playwright suite, responsive.css's phone card layout, and the bUnit tests all
   select on them (see the comment block at the top of Agents.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css,
   so an equal-specificity .tac-* rule wins on source order. Where site.css is
   more specific (e.g. `.stat-item.stat-item-maintenance .stat-icon`) the rule
   below is deliberately written long enough to outrank it.

   SearchBar / Pagination / ActionButton are child components: their DOM never
   carries this component's scope attribute, so those rules go through ::deep
   from a .tac-* ancestor that does.
   ============================================================================ */

.tac-agents[b-s8gzmjfyhc] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The roster must never be the reason the document scrolls sideways —
       Responsive/*BreakpointTests assert zero page overflow at 375/768/1280. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-panel[b-s8gzmjfyhc] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-panel[b-s8gzmjfyhc]::before,
.tac-panel[b-s8gzmjfyhc]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-panel[b-s8gzmjfyhc]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-s8gzmjfyhc]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-s8gzmjfyhc] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-eyebrow[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* Every number, id, address, version and timestamp on this page is mono and
   tabular so columns of digits line up vertically. */
.tac-num[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-dot[b-s8gzmjfyhc] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    /* Never let a parent's align-items:stretch or a stray align-self pull the dot
       off the row's centre line - this is what made it read as "stuck on top". */
    align-self: center;
    background: var(--tac-ink3);
}

/* ---------------------------------------------------------- KPI card stat bar */

/* ONE card treatment for the whole app.

   This is the Dashboard's KPI tile (Pages/Dashboard.razor.css - the reference, and
   NOT edited by this change) lifted across: the same 1px hairline on --tac-s1, the
   same 9px bracket ticks, the same head / figure / foot rhythm, and the same
   ok | warn | crit | info | off dot vocabulary. The compact chip bar that used to
   live here is gone; the app no longer has two card treatments.

   What the Dashboard rail does NOT have - because its tiles are passive read-outs -
   is a pressed state. These cards ARE the page's filter, so the affordance is
   carried over from the chip bar they replace: a left accent border plus an inset
   ring on .selected, an accent hairline and surface wash on hover, and
   role="button" + tabindex="0" in the markup so a card is reachable and operable
   from the keyboard. A card that looks passive but filters on click would be worse
   than the chip it replaced.

   EVERY font-size below comes from a token in wwwroot/css/tactical-tokens.css
   (--tac-label-size / --tac-label-size-sm / --tac-stat-value-size). Nine pages each
   deciding for themselves what a stat count is worth - 18px on /credentials, 14px on
   /agents - is exactly what this block exists to end.

   Nothing here restyles a bare shared selector: the stat-item / stat-icon /
   stat-content / stat-label / stats-bar names stay on the markup as the Playwright and
   bUnit hooks they are, and are only ever reached THROUGH a .tac-* class.

   The .tac-chip* names stay on the markup too, and nothing styles them any more: nine
   bUnit suites select .tac-chipbar / .tac-chip / .tac-chip-count / .tac-chip-label /
   .tac-chip-readout, so after the conversion they are selector hooks exactly like the
   site.css names beside them. */

.tac-agents .tac-kpibar[b-s8gzmjfyhc] {
    display: grid;
    /* min() so a track can never be wider than the bar itself. A bare 190px minimum
       pushes the DOCUMENT sideways at 375px, and AssertNoPageOverflow runs there. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-agents .tac-kpi[b-s8gzmjfyhc] {
    position: relative;
    /* LOAD-BEARING. shell.css:489 declares a bare stat-content as flex-direction:column,
       and site.css:368 makes a bare stat-item a centred flex ROW. A container that
       sets display:flex without saying which way it runs inherits whichever of those
       reaches it and stacks - or in-lines - its children by accident; that is the bug
       that put the dot on top of the Agents chip. Every flex container in this block
       states its direction explicitly. */
    /* TWO LINES, number on the right:
           row 1  label + dot ............ figure
           row 2  caption (spans both columns)
       A grid rather than the old three stacked rows, so the figure can sit beside
       the label instead of under it and the card loses a line without losing data. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head figure"
        "foot foot";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Bracket ticks - the signature of the tactical-ops panel, the same 9px corner pair
   the Dashboard tile draws. */
.tac-agents .tac-kpi[b-s8gzmjfyhc]::before,
.tac-agents .tac-kpi[b-s8gzmjfyhc]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-agents .tac-kpi[b-s8gzmjfyhc]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-agents .tac-kpi[b-s8gzmjfyhc]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

/* The filter states the Dashboard tile has no need for. */

.tac-agents .tac-kpi-filter[b-s8gzmjfyhc] {
    cursor: pointer;
}

.tac-agents .tac-kpi-filter:hover[b-s8gzmjfyhc] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    /* site.css:382 lifts a bare stat-item 2px on hover. A card bouncing under the
       pointer is noise, so the surface wash IS the hover. */
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-agents .tac-kpi-filter:focus-visible[b-s8gzmjfyhc] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The pressed state. Declared AFTER :hover on purpose - same specificity, so the
   later rule wins and a selected card keeps reading as selected under the pointer.
   padding-left gives back the 2px the border takes, so the label does not shift when
   a card is picked. */
.tac-agents .tac-kpi.selected[b-s8gzmjfyhc] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    border-left: 3px solid var(--tac-acc);
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

/* A read-out is not a filter and must not look like one. */
.tac-agents .tac-kpi-readout[b-s8gzmjfyhc] {
    cursor: default;
}

/* Head / figure / foot. */

.tac-agents .tac-kpi .tac-kpi-head[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    /* site.css:444 gives a bare stat-content flex:1; inside a column card that would
       make the head eat the space the figure and foot need. */
    flex: none;
}

.tac-agents .tac-kpi .tac-lbl[b-s8gzmjfyhc] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    /* 0.14em is the mock's tracking; at 16px it widens a label like
       "MAINTENANCE MODE" far enough to force a second grid row on a laptop. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-agents .tac-kpi.selected .tac-lbl[b-s8gzmjfyhc] {
    color: var(--tac-ink);
}

.tac-agents .tac-kpi .tac-kpi-head .tac-dot[b-s8gzmjfyhc] {
    margin-left: auto;
    /* Never let a stray align-items:stretch pull the dot off the head's centre
       line - that is what read as "the dot is stuck on the top of the card". */
    align-self: center;
}

.tac-agents .tac-kpi .tac-kpi-figure[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The count. site.css:392 paints a bare stat-icon as a 48-60px gradient circle; here
   it is a number, so the whole badge treatment is unwound. Four classes deep so it
   outranks the two-class site.css:6289 rule that paints the maintenance counter. */
.tac-agents .tac-kpibar .tac-kpi .tac-kpi-value[b-s8gzmjfyhc] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-stat-value-size);
    font-weight: 600;
    line-height: 1;
}

.tac-agents .tac-kpi .tac-kpi-foot[b-s8gzmjfyhc] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The dot vocabulary, verbatim from the Dashboard rail. */
.tac-agents .tac-kpi .tac-dot.ok[b-s8gzmjfyhc] { background: var(--tac-ok); }
.tac-agents .tac-kpi .tac-dot.warn[b-s8gzmjfyhc] { background: var(--tac-warn); }
.tac-agents .tac-kpi .tac-dot.crit[b-s8gzmjfyhc] { background: var(--tac-crit); }
.tac-agents .tac-kpi .tac-dot.info[b-s8gzmjfyhc] { background: var(--tac-acc); }
.tac-agents .tac-kpi .tac-dot.off[b-s8gzmjfyhc] { background: var(--tac-ink3); }

/* ------------------------------------------------------------------- container */

.tac-agents .tac-roster[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* -------------------------------------------------------------------- toolbar */

.tac-agents .tac-toolbar[b-s8gzmjfyhc] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-agents .tac-toolbar-title[b-s8gzmjfyhc] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-agents .tac-toolbar-count[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-agents .tac-toolbar-controls[b-s8gzmjfyhc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-agents[b-s8gzmjfyhc]  .search-bar {
    height: 34px;
    width: 300px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-agents[b-s8gzmjfyhc]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-agents[b-s8gzmjfyhc]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-agents[b-s8gzmjfyhc]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-agents[b-s8gzmjfyhc]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-agents[b-s8gzmjfyhc]  .search-bar .clear-search,
.tac-agents[b-s8gzmjfyhc]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* OS filter — the one dropdown from the mock's filter row with a real backing
   query (IAgentService.GetAllAsync's osFilter). Native <select> so it keeps the
   platform's keyboard handling and mobile picker; only the frame is restyled. */
.tac-agents .tac-filter-os[b-s8gzmjfyhc] {
    height: 34px;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-agents .tac-filter-os:hover[b-s8gzmjfyhc] {
    border-color: var(--tac-acc);
}

.tac-agents .tac-filter-os:focus-visible[b-s8gzmjfyhc] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* Segmented List/Grid switch. */
.tac-agents .tac-segment[b-s8gzmjfyhc] {
    display: flex;
    gap: 0;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    overflow: hidden;
}

.tac-agents .tac-segment .tac-segment-btn[b-s8gzmjfyhc] {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tac-agents .tac-segment .tac-segment-btn + .tac-segment-btn[b-s8gzmjfyhc] {
    border-inline-start: 1px solid var(--tac-line2);
}

.tac-agents .tac-segment .tac-segment-btn:hover[b-s8gzmjfyhc] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

.tac-agents .tac-segment .tac-segment-btn.active[b-s8gzmjfyhc] {
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-agents .tac-segment .tac-segment-btn:focus-visible[b-s8gzmjfyhc] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* ------------------------------------------------------------ loading / empty */

.tac-agents .tac-state[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-agents .tac-state h3[b-s8gzmjfyhc] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-agents .tac-state p[b-s8gzmjfyhc] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-agents .tac-state .tac-state-eyebrow[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* A bracket-ticked square instead of the emoji glyph. */
.tac-agents .tac-state-mark[b-s8gzmjfyhc] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-agents .tac-spinner[b-s8gzmjfyhc] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-s8gzmjfyhc 0.9s linear infinite;
}

@keyframes tac-spin-b-s8gzmjfyhc {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* .agents-list keeps its name — responsive.css's phone card layout and
   Agents_Tablet_Layout both key on it. overflow-x here at EVERY width (not just
   the <=1023px responsive.css rule) is the belt-and-braces that keeps a wide
   roster from pushing the document sideways. */
.tac-agents .tac-tablewrap[b-s8gzmjfyhc] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    /* site.css gives .agents-list a 20px top margin, which would open a gap between the
       toolbar's bottom rule and the first header row. The panel is flush by design. */
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-agents .tac-table[b-s8gzmjfyhc] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-agents .tac-table .tac-th[b-s8gzmjfyhc] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-agents .tac-table .tac-th-actions[b-s8gzmjfyhc] {
    text-align: end;
}

.tac-agents .tac-table .tac-row > td[b-s8gzmjfyhc] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-agents .tac-table .tac-row:last-child > td[b-s8gzmjfyhc] {
    border-bottom: 0;
}

.tac-agents .tac-table .tac-row[b-s8gzmjfyhc] {
    cursor: pointer;
    background: none;
    transition: background 0.12s ease;
}

.tac-agents .tac-table .tac-row:hover > td[b-s8gzmjfyhc] {
    background: rgba(3, 105, 161, 0.05);
}

/* An offline device is dimmed, not painted red — the crit colour is reserved
   for the status dot and the alert badge so those stay the only things that
   pull the eye. */
.tac-agents .tac-table .tac-row.offline > td[b-s8gzmjfyhc] {
    color: var(--tac-ink2);
    background: none;
}

.tac-agents .tac-table .tac-row.offline:hover > td[b-s8gzmjfyhc] {
    background: rgba(3, 105, 161, 0.04);
}

.tac-agents .tac-table .tac-row.warning > td[b-s8gzmjfyhc] {
    background: rgba(180, 83, 9, 0.05);
}

.tac-agents .tac-table .tac-cell-actions[b-s8gzmjfyhc] {
    text-align: end;
    white-space: nowrap;
}

/* -------------------------------------------------------- identity cell (name) */

.tac-agents .tac-identity[b-s8gzmjfyhc] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tac-agents .tac-identity-text[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-agents .tac-hostname[b-s8gzmjfyhc] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-agents .tac-row.offline .tac-hostname[b-s8gzmjfyhc] {
    color: var(--tac-ink2);
}

/* The mock puts a truncated agent GUID under the hostname. This slot carries
   the page's existing, more useful certificate-expiry line instead. */
.tac-agents .tac-certline[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
}

.tac-agents .tac-certline.expiring-soon[b-s8gzmjfyhc] {
    color: var(--tac-warn);
}

.tac-agents .tac-certline.expired[b-s8gzmjfyhc] {
    color: var(--tac-crit);
}

/* OS glyphs: the existing brand marks, given one consistent 18px box so the
   hostnames line up whatever OS the row is. The marks themselves are shared with
   CollectionDetails / AgentDetailHeader / AgentSelector and are left alone. */
.tac-agents .tac-os-mark[b-s8gzmjfyhc] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    /* The identity cell is three lines tall (hostname / certificate line / tag
       chips), so a top-pinned mark reads as misaligned against the block it
       labels - measured live at 21px above the text's centre line (mark centre
       y=256, text centre y=277). The row already sets align-items:center;
       align-self:flex-start was overriding it. */
    align-self: center;
}

.tac-agents .tac-os-mark .linux-icon[b-s8gzmjfyhc] {
    width: 16px;
    height: 16px;
    opacity: 0.85;
}

.tac-agents .tac-os-mark .os-icon[b-s8gzmjfyhc] {
    font-size: var(--tac-fs-body);
    line-height: 1;
    filter: grayscale(0.35);
}

/* --------------------------------------------------------------- tag chips */

/* Effective tags (manual + rule-assigned) are hydrated on the list read, so
   these are real. They ride under the hostname instead of taking a ninth
   column — a ninth column pushes the roster into a horizontal scroll on a
   laptop, and a tag is context for the device rather than a sort key. */
.tac-agents .tac-tags[b-s8gzmjfyhc] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
    min-width: 0;
}

.tac-agents .tac-tag[b-s8gzmjfyhc] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink2);
    white-space: nowrap;
}

/* ------------------------------------------------------------ version cell */

.tac-agents .tac-version[b-s8gzmjfyhc] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
}

/* --------------------------------------------------- two-line heartbeat cell */

.tac-agents .tac-stack[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The mock's "12s ago". The absolute stamp stays on the line above it because
   yyyy/MM/dd HH:mm:ss is the house format and relative time alone loses the
   date entirely once a device has been down for a day. */
.tac-agents .tac-relative[b-s8gzmjfyhc] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* ------------------------------------------------------------ status dot+label */

/* The mock's status convention: a semantic dot next to an uppercase mono label.
   site.css draws .status as a rounded pill, so the pill is unwound here. */
.tac-agents .tac-status[b-s8gzmjfyhc] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge renders inside a table data cell, where the
       surrounding text is 12-13px. --tac-label-size is the 16px CARD-LABEL role;
       wearing it here made the badge tower over the row it belongs to. Same defect
       fixed on AuditLog - the redesign cloned one badge block onto every page and
       the wrong token came with it. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-agents .tac-status-online[b-s8gzmjfyhc] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-agents .tac-status-online .tac-dot[b-s8gzmjfyhc] { background: var(--tac-ok); }

.tac-agents .tac-status-offline[b-s8gzmjfyhc] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-agents .tac-status-offline .tac-dot[b-s8gzmjfyhc] { background: var(--tac-ink3); }

.tac-agents .tac-status-failed[b-s8gzmjfyhc] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-agents .tac-status-failed .tac-dot[b-s8gzmjfyhc] { background: var(--tac-crit); }

.tac-agents .tac-status-pending[b-s8gzmjfyhc] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-agents .tac-status-pending .tac-dot[b-s8gzmjfyhc] { background: var(--tac-warn); }

/* Maintenance rides in the same badge stack, in the accent colour. */
.tac-agents .tac-status-maintenance[b-s8gzmjfyhc] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-agents .tac-status-maintenance .tac-dot[b-s8gzmjfyhc] { background: var(--tac-acc); }

.tac-agents .tac-badges[b-s8gzmjfyhc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

/* Transient self-update badge — same flat chip vocabulary. */
.tac-agents .tac-update[b-s8gzmjfyhc] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-agents .tac-update.downloading[b-s8gzmjfyhc],
.tac-agents .tac-update.installing[b-s8gzmjfyhc] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-agents .tac-update.completed[b-s8gzmjfyhc] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-agents .tac-update.failed[b-s8gzmjfyhc] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

/* ------------------------------------------------------------- alert count cell */

/* The severity-badge modifiers stay (AgentsPageAlertsColumnTests asserts them,
   and the Alerts page shares the vocabulary); only the shape changes. */
.tac-agents .tac-alertbadge[b-s8gzmjfyhc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tac-ink2);
}

.tac-agents .tac-alertbadge.critical[b-s8gzmjfyhc] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-agents .tac-alertbadge.warning[b-s8gzmjfyhc] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-agents .tac-alertbadge.info[b-s8gzmjfyhc] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-agents .tac-alertbadge.acknowledged[b-s8gzmjfyhc] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

/* The quiet zero: stated, not shouted. No border — it must not read as a badge. */
.tac-agents .tac-alertzero[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- row action btns */

.tac-agents .tac-actions[b-s8gzmjfyhc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to
   a hairline frame, so a row of five actions reads as one instrument cluster
   rather than five competing pills. Hover restores the semantic colour. */
.tac-agents[b-s8gzmjfyhc]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-agents[b-s8gzmjfyhc]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-agents[b-s8gzmjfyhc]  .tac-actions .btn.btn-warning:hover:not(:disabled) {
    border-color: var(--tac-warn);
}

.tac-agents[b-s8gzmjfyhc]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-agents[b-s8gzmjfyhc]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-agents[b-s8gzmjfyhc]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------------ grid view */

.tac-agents .tac-cardgrid[b-s8gzmjfyhc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding: 16px;
    margin: 0;
    min-width: 0;
}

.tac-agents .tac-card[b-s8gzmjfyhc] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    margin: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tac-agents .tac-card[b-s8gzmjfyhc]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
    opacity: 0.7;
    pointer-events: none;
}

.tac-agents .tac-card:hover[b-s8gzmjfyhc] {
    border-color: var(--tac-acc);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transform: none;
}

.tac-agents .tac-card.offline[b-s8gzmjfyhc] {
    background: var(--tac-s2);
}

.tac-agents .tac-card.warning[b-s8gzmjfyhc] {
    border-color: rgba(180, 83, 9, 0.45);
}

.tac-agents .tac-card-head[b-s8gzmjfyhc] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.tac-agents .tac-card-head .tac-badges[b-s8gzmjfyhc] {
    margin-inline-start: auto;
    justify-content: flex-end;
}

/* Card body: label/value pairs, mono values. */
.tac-agents .tac-card-info[b-s8gzmjfyhc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding-top: 12px;
    border-top: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-agents .tac-info-item[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-agents .tac-info-label[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-agents .tac-info-value[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-agents .tac-card-actions[b-s8gzmjfyhc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--tac-line);
}

/* --------------------------------------------------------------- pagination */

.tac-agents[b-s8gzmjfyhc]  .pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-agents[b-s8gzmjfyhc]  .pagination .pagination-info {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-agents[b-s8gzmjfyhc]  .pagination .pagination-controls {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-agents[b-s8gzmjfyhc]  .pagination .page-btn {
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    box-shadow: none;
}

.tac-agents[b-s8gzmjfyhc]  .pagination .page-btn:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-agents[b-s8gzmjfyhc]  .pagination .page-btn.active {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-agents[b-s8gzmjfyhc]  .pagination .page-btn:disabled {
    opacity: 0.45;
}

/* ------------------------------------------------------------------- modals */

/* Every modal keeps .modal-overlay > .modal and the header/body/footer chain —
   AgentsPageTests drives all four dialogs through exactly those selectors. */
.tac-modal-overlay[b-s8gzmjfyhc] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-s8gzmjfyhc] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal[b-s8gzmjfyhc]::before,
.tac-modal-overlay .tac-modal[b-s8gzmjfyhc]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-s8gzmjfyhc]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-s8gzmjfyhc]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-s8gzmjfyhc] {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h3[b-s8gzmjfyhc] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-body[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: none;
}

.tac-modal-overlay .tac-modal-foot[b-s8gzmjfyhc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-warnbox[b-s8gzmjfyhc] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
}

.tac-modal-overlay .tac-warnbox strong[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-modal-overlay .tac-warnbox.warning-box-info[b-s8gzmjfyhc] {
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

/* Read-only "what am I about to act on" block. */
.tac-modal-overlay .tac-subject[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-modal-overlay .tac-subject p[b-s8gzmjfyhc] {
    display: flex;
    gap: 10px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-modal-overlay .tac-subject p strong[b-s8gzmjfyhc] {
    flex: none;
    min-width: 11ch;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-field[b-s8gzmjfyhc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.tac-modal-overlay .tac-field label[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-field .form-control[b-s8gzmjfyhc] {
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-field .form-control:focus[b-s8gzmjfyhc] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    outline: none;
}

.tac-modal-overlay .tac-field .form-text[b-s8gzmjfyhc] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-error[b-s8gzmjfyhc] {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 0;
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

/* Modal buttons: flat, uppercase, square. */
.tac-modal-overlay .tac-modal-foot .btn[b-s8gzmjfyhc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-s8gzmjfyhc] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary[b-s8gzmjfyhc] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-s8gzmjfyhc] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-s8gzmjfyhc] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-s8gzmjfyhc] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-warning[b-s8gzmjfyhc] {
    background: var(--tac-warn);
    border-color: var(--tac-warn);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-warning:hover:not(:disabled)[b-s8gzmjfyhc] {
    background: #92400e;
    border-color: #92400e;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-s8gzmjfyhc] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-s8gzmjfyhc] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the toolbar stops trying to fit on one line. */
@media (max-width: 1023px) {
    .tac-agents .tac-toolbar-controls[b-s8gzmjfyhc] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-agents[b-s8gzmjfyhc]  .search-bar {
        flex: 1 1 220px;
        width: auto;
    }
}

/* Phone: responsive.css turns the table into stacked cards (thead offscreen,
   every td a flex row labelled from data-label). These rules dress THAT layout —
   they must not fight it, so nothing here touches display/position on the table. */
@media (max-width: 767px) {
    .tac-agents[b-s8gzmjfyhc] {
        gap: 12px;
    }

    .tac-agents .tac-kpibar[b-s8gzmjfyhc] {
        /* Two cards per row at phone. minmax(0, 1fr) cannot overflow, so a long
           label ellipsises inside its own card instead of widening the document -
           AssertNoPageOverflow runs at 375px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tac-agents .tac-kpi[b-s8gzmjfyhc] {
        padding: 12px 14px;
    }

    .tac-agents .tac-kpi.selected[b-s8gzmjfyhc] {
        padding-left: 12px;
    }

    .tac-agents .tac-toolbar[b-s8gzmjfyhc] {
        padding: 12px;
        gap: 10px;
    }

    /* The card rows come from responsive.css; square them off to match. */
    .tac-agents .tac-table .tac-row[b-s8gzmjfyhc] {
        border-radius: 0;
        border-color: var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-agents .tac-table .tac-row.offline[b-s8gzmjfyhc] {
        border-color: var(--tac-line2);
        background: var(--tac-s2);
    }

    .tac-agents .tac-table .tac-row > td[b-s8gzmjfyhc] {
        border-bottom-color: var(--tac-line);
    }

    /* The data-label pseudo-element is the field name in card mode — make it
       read like every other label on the page. */
    .tac-agents .tac-table .tac-row > td[b-s8gzmjfyhc]::before {
        font-family: var(--tac-mono);
        font-size: var(--tac-label-size-sm);
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-agents .tac-cardgrid[b-s8gzmjfyhc] {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }

    .tac-agents .tac-card-info[b-s8gzmjfyhc] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-agents[b-s8gzmjfyhc]  .pagination {
        padding: 10px 12px;
    }

    .tac-agents[b-s8gzmjfyhc]  .pagination .pagination-controls {
        margin-inline-start: 0;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-agents *[b-s8gzmjfyhc],
    .tac-agents[b-s8gzmjfyhc]  * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- two-line card: label+figure on one row, caption beneath ---------------- */
.tac-agents .tac-kpi .tac-kpi-head[b-s8gzmjfyhc] {
    grid-area: head;
}

.tac-agents .tac-kpi .tac-kpi-figure[b-s8gzmjfyhc] {
    grid-area: figure;
    justify-content: flex-end;
    justify-self: end;
    align-items: baseline;
}

.tac-agents .tac-kpi .tac-kpi-foot[b-s8gzmjfyhc] {
    grid-area: foot;
}

.tac-agents .tac-kpi .tac-kpi-value[b-s8gzmjfyhc] {
    /* The figure is the point of the card, so it leads. It was reading SMALLER than
       its own 16px label, which inverted the hierarchy. */
    font-size: var(--tac-stat-value-size);
    line-height: 1;
}
/* _content/Athena.Server/Pages/Alerts.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops incident board — the /alerts page in the light "command console"
   language shipped on Login.razor, Dashboard.razor and Agents.razor.

   There is NO Mock/tactical-ops artboard for this page, so every value here is
   taken from those three rather than invented: the bracket-ticked panel, the
   scan line, the mono toolbar, the dot+label status convention, the flat
   uppercase buttons, the squared modals.

   Scoped to Alerts.razor. The design tokens (--tac-*) are NOT declared here —
   they live on :root in wwwroot/css/tactical-tokens.css, linked first in _Host,
   so every tactical-ops page shares one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with
   the AuditLog page and up to 41 other screens (.audit-container, .audit-table,
   .filter-select, .severity-badge, .timestamp, .btn, .modal-*, .pagination ...).
   Blazor scoping alone would keep a bare `.audit-table { }` rule from leaking,
   but it would still fight site.css on THIS page in ways that are invisible from
   the other 40. So the markup carries a NEW .tac-* class next to every legacy
   one, and every selector below hangs off a .tac-* name. The legacy classes stay
   on the elements untouched because responsive.css's phone card layout and nine
   bUnit suites select on them (see the comment block at the top of Alerts.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so
   an equal-specificity .tac-* rule wins on source order. Where site.css is more
   specific the rule below is written long enough to outrank it.

   ActionButton is a child component: its DOM never carries this component's
   scope attribute, so those rules go through ::deep from a .tac-* ancestor that
   does — exactly as Login.razor.css reaches `input.form-control`.
   ============================================================================ */

/* ------------------------------------------------------------------ the board */

/* The root is BOTH the page container and the bracket-ticked panel: this page is
   one board, not a stack of them, so a second wrapper would only add a box. */
.tac-alerts[b-q3tjd46mz3] {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    /* site.css puts overflow:hidden on .audit-container, which would clip the
       bracket ticks that sit on the border itself. */
    overflow: visible;
    /* The board must never be the reason the document scrolls sideways —
       AssertNoPageOverflow runs at 375 / 768 / 1280 / 1920. */
    min-width: 0;
    max-width: 100%;
}

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-alerts.tac-panel[b-q3tjd46mz3]::before,
.tac-alerts.tac-panel[b-q3tjd46mz3]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-alerts.tac-panel[b-q3tjd46mz3]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-alerts.tac-panel[b-q3tjd46mz3]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-alerts .tac-scan[b-q3tjd46mz3] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

/* Every number, id, value and timestamp on this page is mono and tabular so
   columns of digits line up vertically. */
.tac-alerts .tac-num[b-q3tjd46mz3] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-alerts .tac-dot[b-q3tjd46mz3] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-alerts .tac-link[b-q3tjd46mz3] {
    color: var(--tac-acc);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.tac-alerts .tac-link:hover[b-q3tjd46mz3] {
    color: var(--tac-acc-deep);
    border-bottom-color: currentColor;
}

.tac-alerts .tac-link:focus-visible[b-q3tjd46mz3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------- toolbar */

.tac-alerts .tac-toolbar[b-q3tjd46mz3] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-alerts .tac-toolbar-title[b-q3tjd46mz3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    /* site.css sets .audit-title to 18px/600 in a navy that is not in this palette. */
    font-size: var(--tac-fs-body);
    font-weight: 400;
    color: var(--tac-ink);
}

.tac-alerts .tac-toolbar-head[b-q3tjd46mz3] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-alerts .tac-toolbar-name[b-q3tjd46mz3] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-alerts .tac-toolbar-count[b-q3tjd46mz3] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tac-acc);
}

.tac-alerts .tac-toolbar-suffix[b-q3tjd46mz3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-alerts .tac-toolbar-sub[b-q3tjd46mz3] {
    max-width: 62ch;
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    color: var(--tac-ink2);
}

.tac-alerts .tac-toolbar-controls[b-q3tjd46mz3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* ------------------------------------------------------------------- filters */

/* Native <select> / <input type=search> so the platform keeps its keyboard
   handling and its mobile picker; only the frame is restyled. */
.tac-alerts .tac-filter[b-q3tjd46mz3] {
    height: 32px;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-alerts .tac-filter:hover:not(:disabled)[b-q3tjd46mz3] {
    border-color: var(--tac-acc);
}

.tac-alerts .tac-filter:focus[b-q3tjd46mz3],
.tac-alerts .tac-filter:focus-visible[b-q3tjd46mz3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-alerts .tac-filter:disabled[b-q3tjd46mz3] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The tag box takes typed text, so it is left-aligned lowercase rather than the
   uppercase letterspacing the dropdowns wear. */
.tac-alerts .tac-filter-tag[b-q3tjd46mz3] {
    width: 200px;
    text-transform: none;
    letter-spacing: 0.02em;
    cursor: text;
}

.tac-alerts .tac-filter-tag[b-q3tjd46mz3]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.85;
    text-transform: none;
}

/* -------------------------------------------------------------------- buttons */

/* Flat, square, uppercase — the Login panel's button vocabulary. */
.tac-alerts .tac-btn[b-q3tjd46mz3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tac-alerts .tac-btn:hover:not(:disabled)[b-q3tjd46mz3] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-alerts .tac-btn:focus-visible[b-q3tjd46mz3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-alerts .tac-btn:disabled[b-q3tjd46mz3] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ActionButton is a child component — the toolbar refresh and every row icon are
   wrapped in a .tac-actions so ONE ::deep rule dresses them all. Hairline frame,
   square, calm: a row of three actions must read as one instrument cluster
   rather than three competing pills. */
.tac-alerts .tac-actions[b-q3tjd46mz3] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-alerts[b-q3tjd46mz3]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-alerts[b-q3tjd46mz3]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-alerts[b-q3tjd46mz3]  .tac-actions .btn.btn-success:hover:not(:disabled) {
    border-color: var(--tac-ok);
}

.tac-alerts[b-q3tjd46mz3]  .tac-actions .btn.btn-warning:hover:not(:disabled) {
    border-color: var(--tac-warn);
}

.tac-alerts[b-q3tjd46mz3]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-alerts[b-q3tjd46mz3]  .tac-actions .btn.btn-icon:disabled {
    opacity: 0.45;
}

.tac-alerts[b-q3tjd46mz3]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-alerts[b-q3tjd46mz3]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------ loading / empty */

.tac-alerts .tac-state[b-q3tjd46mz3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-alerts .tac-state h3[b-q3tjd46mz3] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-alerts .tac-state p[b-q3tjd46mz3] {
    margin: 0;
    max-width: 52ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-alerts .tac-state p strong[b-q3tjd46mz3] {
    font-family: var(--tac-mono);
    font-weight: 500;
    color: var(--tac-ink0);
}

.tac-alerts .tac-state-eyebrow[b-q3tjd46mz3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* A stroked mark instead of the bell / warning emoji. */
.tac-alerts .tac-state-mark[b-q3tjd46mz3] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

/* The error state is the one place the mark is not the accent colour: a failed
   read is not an ordinary empty list. */
.tac-alerts [data-testid="alerts-error"] .tac-state-mark[b-q3tjd46mz3] {
    stroke: var(--tac-crit);
    opacity: 0.8;
}

.tac-alerts .tac-spinner[b-q3tjd46mz3] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-alerts-spin-b-q3tjd46mz3 0.9s linear infinite;
}

@keyframes tac-alerts-spin-b-q3tjd46mz3 {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* .audit-list keeps its name — responsive.css's phone card layout keys on the
   exact `.audit-list .audit-table` nesting. overflow-x here at EVERY width (not
   just inside a media query) is the belt-and-braces that keeps an eight-column
   incident board from pushing the DOCUMENT sideways. */
.tac-alerts .tac-tablewrap[b-q3tjd46mz3] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-alerts .tac-table[b-q3tjd46mz3] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-alerts .tac-table .tac-th[b-q3tjd46mz3] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-alerts .tac-table .tac-th-num[b-q3tjd46mz3] {
    text-align: end;
}

.tac-alerts .tac-table .tac-th-actions[b-q3tjd46mz3] {
    text-align: end;
}

.tac-alerts .tac-table .tac-row > td[b-q3tjd46mz3] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
    background: none;
}

.tac-alerts .tac-table .tac-row:last-child > td[b-q3tjd46mz3] {
    border-bottom: 0;
}

/* The rows are NOT clickable on this page — site.css puts cursor:pointer on
   every .audit-table row, which promises a drill-through that does not exist
   here. The two links inside the row are the affordances. */
.tac-alerts .tac-table .tac-row[b-q3tjd46mz3] {
    cursor: default;
    background: none;
    transition: background 0.12s ease;
}

.tac-alerts .tac-table .tac-row:hover > td[b-q3tjd46mz3] {
    background: rgba(3, 105, 161, 0.05);
}

/* Severity emphasis is a LEFT RULE plus the faintest wash, not a full red row.
   A page that is mostly critical alerts must not be a page that is mostly red —
   the severity badge and the dot stay the only things that pull the eye. */
.tac-alerts .tac-table .tac-row.tac-row-critical > td:first-child[b-q3tjd46mz3] {
    box-shadow: inset 2px 0 0 var(--tac-crit);
}

.tac-alerts .tac-table .tac-row.tac-row-critical > td[b-q3tjd46mz3] {
    background: rgba(220, 38, 38, 0.04);
}

.tac-alerts .tac-table .tac-row.tac-row-critical:hover > td[b-q3tjd46mz3] {
    background: rgba(220, 38, 38, 0.07);
}

.tac-alerts .tac-table .tac-row.tac-row-warning > td:first-child[b-q3tjd46mz3] {
    box-shadow: inset 2px 0 0 var(--tac-warn);
}

.tac-alerts .tac-table .tac-row.tac-row-warning > td[b-q3tjd46mz3] {
    background: rgba(180, 83, 9, 0.04);
}

.tac-alerts .tac-table .tac-row.tac-row-warning:hover > td[b-q3tjd46mz3] {
    background: rgba(180, 83, 9, 0.07);
}

.tac-alerts .tac-table .tac-row.tac-row-info > td:first-child[b-q3tjd46mz3] {
    box-shadow: inset 2px 0 0 var(--tac-line2);
}

/* A closed incident is dimmed. It is only on screen because the operator widened
   the state filter, and it must never compete with the open ones above it. */
.tac-alerts .tac-table .tac-row.tac-row-resolved > td[b-q3tjd46mz3] {
    color: var(--tac-ink3);
    background: none;
}

.tac-alerts .tac-table .tac-row.tac-row-resolved > td:first-child[b-q3tjd46mz3] {
    box-shadow: inset 2px 0 0 var(--tac-line);
}

.tac-alerts .tac-table .tac-row.tac-row-resolved:hover > td[b-q3tjd46mz3] {
    background: rgba(3, 105, 161, 0.04);
}

.tac-alerts .tac-table td.col-actions[b-q3tjd46mz3] {
    text-align: end;
    white-space: nowrap;
}

.tac-alerts .tac-table td.col-failures[b-q3tjd46mz3] {
    text-align: end;
}

/* --------------------------------------------------------------- severity cell */

/* The dot+label convention. site.css draws .severity-badge as a rounded pill;
   the pill is unwound here and the colour moves onto the dot and the ink. */
.tac-alerts .tac-sev[b-q3tjd46mz3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge renders inside a table data cell, where the
       surrounding text is 12-13px. --tac-label-size is the 16px CARD-LABEL role;
       wearing it here made the badge tower over the row it belongs to. Same defect
       fixed on AuditLog - the redesign cloned one badge block onto every page and
       the wrong token came with it. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-alerts .tac-sev-critical[b-q3tjd46mz3] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-alerts .tac-sev-critical .tac-dot[b-q3tjd46mz3] { background: var(--tac-crit); }

.tac-alerts .tac-sev-warning[b-q3tjd46mz3] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-alerts .tac-sev-warning .tac-dot[b-q3tjd46mz3] { background: var(--tac-warn); }

.tac-alerts .tac-sev-info[b-q3tjd46mz3] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-alerts .tac-sev-info .tac-dot[b-q3tjd46mz3] { background: var(--tac-acc); }

/* A resolved row's severity is history: keep it readable, stop it shouting. */
.tac-alerts .tac-row-resolved .tac-sev[b-q3tjd46mz3] {
    color: var(--tac-ink3);
    border-color: var(--tac-line);
    background: var(--tac-s2);
}

.tac-alerts .tac-row-resolved .tac-sev .tac-dot[b-q3tjd46mz3] {
    background: var(--tac-ink3);
}

/* ---------------------------------------------------------------- monitor cell */

.tac-alerts .tac-monitor[b-q3tjd46mz3] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    overflow-wrap: anywhere;
}

.tac-alerts span.tac-monitor[b-q3tjd46mz3] {
    color: var(--tac-ink0);
}

/* The non-firing chip: the whole of the removed STATE / ACKNOWLEDGED BY /
   RESOLVED BY columns, on the rows where it says something. Muted by design —
   marking the exception, never the norm. */
.tac-alerts .tac-statechip[b-q3tjd46mz3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    height: 19px;
    padding: 0 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    color: var(--tac-ink2);
    white-space: nowrap;
    cursor: help;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tac-alerts .tac-statechip-ack[b-q3tjd46mz3] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-alerts .tac-statechip-resolved[b-q3tjd46mz3] {
    color: var(--tac-ink3);
    border-color: var(--tac-line);
    background: var(--tac-s2);
}

.tac-alerts .tac-chip-mark[b-q3tjd46mz3] {
    width: 10px;
    height: 10px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ----------------------------------------------------------------- device cell */

.tac-alerts a.tac-hostname[b-q3tjd46mz3] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------- observed / threshold cell */

.tac-alerts .tac-observed[b-q3tjd46mz3] {
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-alerts .tac-threshold[b-q3tjd46mz3] {
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
}

.tac-alerts .tac-sep[b-q3tjd46mz3] {
    margin: 0 2px;
    color: var(--tac-ink3);
}

.tac-alerts .tac-row-resolved .tac-observed[b-q3tjd46mz3] {
    color: var(--tac-ink3);
}

/* ------------------------------------------------------------- timestamp cells */

/* site.css sets .timestamp in Fira Code; the house mono is JetBrains Mono. */
.tac-alerts .tac-ts[b-q3tjd46mz3] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    white-space: nowrap;
}

.tac-alerts .tac-row-resolved .tac-ts[b-q3tjd46mz3] {
    color: var(--tac-ink3);
}

/* The clock-skew sub-line: a standing warning about the DEVICE's clock, so it
   keeps the warn colour and wraps rather than being clipped. */
.tac-alerts .tac-skew[b-q3tjd46mz3] {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 3px;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--tac-warn);
    cursor: help;
}

.tac-alerts .tac-skew-mark[b-q3tjd46mz3] {
    width: 11px;
    height: 11px;
    flex: none;
    margin-top: 1px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The offline marker REPLACES the timestamp, so it has to read as a state and
   not as a missing value — dot + uppercase mono, the same vocabulary the Agents
   roster uses for an unreachable device. */
.tac-alerts .tac-offline[b-q3tjd46mz3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
    cursor: help;
}

.tac-alerts .tac-offline .tac-dot[b-q3tjd46mz3] {
    background: var(--tac-ink3);
}

/* ------------------------------------------------------------------ failures */

.tac-alerts .tac-failures[b-q3tjd46mz3] {
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-alerts .tac-row-resolved .tac-failures[b-q3tjd46mz3] {
    font-weight: 500;
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------------- pager */

.tac-alerts .tac-pager[b-q3tjd46mz3] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-alerts .tac-pager-info[b-q3tjd46mz3] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-alerts .tac-pager-controls[b-q3tjd46mz3] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-alerts .tac-pagebtn[b-q3tjd46mz3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    box-shadow: none;
    cursor: pointer;
}

.tac-alerts .tac-pagebtn-num[b-q3tjd46mz3] {
    justify-content: center;
}

.tac-alerts .tac-pagebtn:hover:not(:disabled)[b-q3tjd46mz3] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-alerts .tac-pagebtn.active[b-q3tjd46mz3] {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-alerts .tac-pagebtn:disabled[b-q3tjd46mz3] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-alerts .tac-pagebtn:focus-visible[b-q3tjd46mz3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-alerts .tac-pager-glyph[b-q3tjd46mz3] {
    opacity: 0.7;
}

/* ------------------------------------------------------------------- modals */

/* Both dialogs keep .modal-overlay > .modal and the header/body/footer chain —
   AlertsPageLifecycleTests and AlertsPageDeleteTests drive them through exactly
   those selectors. They live OUTSIDE .tac-alerts in the markup, so these rules
   hang off .tac-modal-overlay instead. */
.tac-modal-overlay[b-q3tjd46mz3] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-q3tjd46mz3] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal[b-q3tjd46mz3]::before,
.tac-modal-overlay .tac-modal[b-q3tjd46mz3]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-q3tjd46mz3]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-q3tjd46mz3]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-q3tjd46mz3] {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h3[b-q3tjd46mz3] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-body[b-q3tjd46mz3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: none;
}

.tac-modal-overlay .tac-modal-note[b-q3tjd46mz3] {
    margin: 0;
    font-size: var(--tac-fs-micro);
    line-height: 1.55;
    color: var(--tac-ink2);
}

.tac-modal-overlay .tac-modal-foot[b-q3tjd46mz3] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* Resolve warns that the incident is CLOSED — amber. */
.tac-modal-overlay .tac-warnbox[b-q3tjd46mz3] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-size: var(--tac-fs-micro);
    line-height: 1.55;
}

/* Delete warns that the row is ERASED — the two buttons sit next to each other,
   so the two dialogs must not look the same. */
.tac-modal-overlay .tac-warnbox-crit[b-q3tjd46mz3] {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
}

/* Read-only "what am I about to act on" block. */
.tac-modal-overlay .tac-subject[b-q3tjd46mz3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-modal-overlay .tac-subject p[b-q3tjd46mz3] {
    display: flex;
    gap: 10px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-modal-overlay .tac-subject p strong[b-q3tjd46mz3] {
    flex: none;
    min-width: 10ch;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* Modal buttons: flat, uppercase, square. */
.tac-modal-overlay .tac-modal-foot .btn[b-q3tjd46mz3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-q3tjd46mz3] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary[b-q3tjd46mz3] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-q3tjd46mz3] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-q3tjd46mz3] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-q3tjd46mz3] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-q3tjd46mz3] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-q3tjd46mz3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the filter cluster stops trying to share a line with the title. */
@media (max-width: 1023px) {
    .tac-alerts .tac-toolbar-controls[b-q3tjd46mz3] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-alerts .tac-filter[b-q3tjd46mz3],
    .tac-alerts .tac-btn[b-q3tjd46mz3] {
        flex: 1 1 140px;
    }

    .tac-alerts .tac-filter-tag[b-q3tjd46mz3] {
        width: auto;
    }

    .tac-alerts .tac-actions[b-q3tjd46mz3] {
        flex: 0 0 auto;
    }
}

/* Phone: responsive.css turns the table into stacked cards (thead offscreen,
   every td a flex row labelled from data-label). These rules DRESS that layout —
   they must not fight it, so nothing here touches display/position on the table. */
@media (max-width: 767px) {
    .tac-alerts .tac-toolbar[b-q3tjd46mz3] {
        padding: 12px;
        gap: 10px;
    }

    /* The card rows come from responsive.css; square them off to match. */
    .tac-alerts .tac-table .tac-row[b-q3tjd46mz3] {
        border-radius: 0;
        border-color: var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-alerts .tac-table .tac-row.tac-row-critical[b-q3tjd46mz3] {
        border-color: rgba(220, 38, 38, 0.4);
    }

    .tac-alerts .tac-table .tac-row.tac-row-warning[b-q3tjd46mz3] {
        border-color: rgba(180, 83, 9, 0.4);
    }

    .tac-alerts .tac-table .tac-row.tac-row-resolved[b-q3tjd46mz3] {
        border-color: var(--tac-line);
        background: var(--tac-s2);
    }

    /* The inset left rule is a COLUMN device; in card mode the first cell is a
       row, so it would draw a stray tick in the middle of the card. */
    .tac-alerts .tac-table .tac-row > td:first-child[b-q3tjd46mz3] {
        box-shadow: none;
    }

    .tac-alerts .tac-table .tac-row > td[b-q3tjd46mz3] {
        border-bottom-color: var(--tac-line);
    }

    /* The data-label pseudo-element is the field name in card mode — make it read
       like every other label on the page. */
    .tac-alerts .tac-table .tac-row > td[b-q3tjd46mz3]::before {
        font-family: var(--tac-mono);
        font-size: var(--tac-label-size-sm);
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    /* Actions and the numeric column stop being end-aligned once the cell is a
       label/value pair. */
    .tac-alerts .tac-table td.col-actions[b-q3tjd46mz3],
    .tac-alerts .tac-table td.col-failures[b-q3tjd46mz3] {
        text-align: start;
    }

    .tac-alerts .tac-pager[b-q3tjd46mz3] {
        padding: 10px 12px;
    }

    .tac-alerts .tac-pager-controls[b-q3tjd46mz3] {
        margin-inline-start: 0;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-alerts *[b-q3tjd46mz3],
    .tac-alerts[b-q3tjd46mz3]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/AuditLog.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops audit trail — /audit-log in the light "command console" language.

   Mock/tactical-ops/ has NO artboard for this page, so the look is DERIVED from
   the shipped references (Login / Dashboard / Agents). Where a decision could go
   either way, it goes the way the Agents roster already went: same chip bar,
   same bracket-ticked panel, same toolbar, same table rhythm, same pager.

   Scoped to AuditLog.razor. The design tokens (--tac-*) are NOT declared here —
   they live on the document root in wwwroot/css/tactical-tokens.css, linked first in _Host,
   so every tactical-ops page shares one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with
   4-41 other screens (.stats-bar, .stat-item, .audit-*, .severity-badge,
   .pagination ...). Blazor scoping alone would keep a bare rule from leaking,
   but it would still fight site.css on THIS page in ways invisible from the
   other 40. So the markup carries a NEW .tac-* class next to every legacy one,
   and every selector below hangs off a .tac-* name. The legacy classes stay on
   the elements untouched, because responsive.css's phone card layout and the
   Playwright suite select on them (see the comment block in AuditLog.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css,
   so an equal-specificity .tac-* rule wins on source order. Where site.css is
   more specific the rule below is written long enough to outrank it.

   SearchBar and ActionButton are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does.
   ============================================================================ */

.tac-audit[b-w5rko0ysrk] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The log must never be the reason the document scrolls sideways —
       AssertNoPageOverflow runs at phone/tablet/desktop/1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-audit .tac-panel[b-w5rko0ysrk] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-audit .tac-panel[b-w5rko0ysrk]::before,
.tac-audit .tac-panel[b-w5rko0ysrk]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-audit .tac-panel[b-w5rko0ysrk]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-audit .tac-panel[b-w5rko0ysrk]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-audit .tac-scan[b-w5rko0ysrk] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-audit .tac-eyebrow[b-w5rko0ysrk] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every number, id, address and timestamp on this page is mono and tabular so
   columns of digits line up vertically. */
.tac-audit .tac-num[b-w5rko0ysrk] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
}

.tac-audit .tac-dot[b-w5rko0ysrk] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

/* ---------------------------------------------------------- KPI card stat bar */

/* ONE card treatment for the whole app.

   This is the Dashboard's KPI tile (Pages/Dashboard.razor.css - the reference, and
   NOT edited by this change) lifted across: the same 1px hairline on --tac-s1, the
   same 9px bracket ticks, the same head / figure / foot rhythm, and the same
   ok | warn | crit | info | off dot vocabulary. The compact chip bar that used to
   live here is gone; the app no longer has two card treatments.

   What the Dashboard rail does NOT have - because its tiles are passive read-outs -
   is a pressed state. These cards ARE the page's filter, so the affordance is
   carried over from the chip bar they replace: a left accent border plus an inset
   ring on .selected, an accent hairline and surface wash on hover, and
   role="button" + tabindex="0" in the markup so a card is reachable and operable
   from the keyboard. A card that looks passive but filters on click would be worse
   than the chip it replaced.

   EVERY font-size below comes from a token in wwwroot/css/tactical-tokens.css
   (--tac-label-size / --tac-label-size-sm / --tac-stat-value-size). Nine pages each
   deciding for themselves what a stat count is worth - 18px on /credentials, 14px on
   /agents - is exactly what this block exists to end.

   Nothing here restyles a bare shared selector: the stat-item / stat-icon /
   stat-content / stat-label / stats-bar names stay on the markup as the Playwright and
   bUnit hooks they are, and are only ever reached THROUGH a .tac-* class.

   The .tac-chip* names stay on the markup too, and nothing styles them any more: nine
   bUnit suites select .tac-chipbar / .tac-chip / .tac-chip-count / .tac-chip-label /
   .tac-chip-readout, so after the conversion they are selector hooks exactly like the
   site.css names beside them. */

.tac-audit .tac-kpibar[b-w5rko0ysrk] {
    display: grid;
    /* min() so a track can never be wider than the bar itself. A bare 190px minimum
       pushes the DOCUMENT sideways at 375px, and AssertNoPageOverflow runs there. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-audit .tac-kpi[b-w5rko0ysrk] {
    position: relative;
    /* LOAD-BEARING. shell.css:489 declares a bare stat-content as flex-direction:column,
       and site.css:368 makes a bare stat-item a centred flex ROW. A container that
       sets display:flex without saying which way it runs inherits whichever of those
       reaches it and stacks - or in-lines - its children by accident; that is the bug
       that put the dot on top of the Agents chip. Every flex container in this block
       states its direction explicitly. */
    /* TWO LINES, number on the right:
           row 1  label + dot ............ figure
           row 2  caption (spans both columns)
       A grid rather than the old three stacked rows, so the figure can sit beside
       the label instead of under it and the card loses a line without losing data. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head figure"
        "foot foot";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Bracket ticks - the signature of the tactical-ops panel, the same 9px corner pair
   the Dashboard tile draws. */
.tac-audit .tac-kpi[b-w5rko0ysrk]::before,
.tac-audit .tac-kpi[b-w5rko0ysrk]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-audit .tac-kpi[b-w5rko0ysrk]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-audit .tac-kpi[b-w5rko0ysrk]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

/* The filter states the Dashboard tile has no need for. */

.tac-audit .tac-kpi-filter[b-w5rko0ysrk] {
    cursor: pointer;
}

.tac-audit .tac-kpi-filter:hover[b-w5rko0ysrk] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    /* site.css:382 lifts a bare stat-item 2px on hover. A card bouncing under the
       pointer is noise, so the surface wash IS the hover. */
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-audit .tac-kpi-filter:focus-visible[b-w5rko0ysrk] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The pressed state. Declared AFTER :hover on purpose - same specificity, so the
   later rule wins and a selected card keeps reading as selected under the pointer.
   padding-left gives back the 2px the border takes, so the label does not shift when
   a card is picked. */
.tac-audit .tac-kpi.selected[b-w5rko0ysrk] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    border-left: 3px solid var(--tac-acc);
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

/* A read-out is not a filter and must not look like one. */
.tac-audit .tac-kpi-readout[b-w5rko0ysrk] {
    cursor: default;
}

/* Head / figure / foot. */

.tac-audit .tac-kpi .tac-kpi-head[b-w5rko0ysrk] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    /* site.css:444 gives a bare stat-content flex:1; inside a column card that would
       make the head eat the space the figure and foot need. */
    flex: none;
}

.tac-audit .tac-kpi .tac-lbl[b-w5rko0ysrk] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    /* 0.14em is the mock's tracking; at 16px it widens a label like
       "MAINTENANCE MODE" far enough to force a second grid row on a laptop. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-audit .tac-kpi.selected .tac-lbl[b-w5rko0ysrk] {
    color: var(--tac-ink);
}

.tac-audit .tac-kpi .tac-kpi-head .tac-dot[b-w5rko0ysrk] {
    margin-left: auto;
    /* Never let a stray align-items:stretch pull the dot off the head's centre
       line - that is what read as "the dot is stuck on the top of the card". */
    align-self: center;
}

.tac-audit .tac-kpi .tac-kpi-figure[b-w5rko0ysrk] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The count. site.css:392 paints a bare stat-icon as a 48-60px gradient circle; here
   it is a number, so the whole badge treatment is unwound. Four classes deep so it
   outranks the two-class site.css:6289 rule that paints the maintenance counter. */
.tac-audit .tac-kpibar .tac-kpi .tac-kpi-value[b-w5rko0ysrk] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-stat-value-size);
    font-weight: 600;
    line-height: 1;
}

.tac-audit .tac-kpi .tac-kpi-foot[b-w5rko0ysrk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The dot vocabulary, verbatim from the Dashboard rail. */
.tac-audit .tac-kpi .tac-dot.ok[b-w5rko0ysrk] { background: var(--tac-ok); }
.tac-audit .tac-kpi .tac-dot.warn[b-w5rko0ysrk] { background: var(--tac-warn); }
.tac-audit .tac-kpi .tac-dot.crit[b-w5rko0ysrk] { background: var(--tac-crit); }
.tac-audit .tac-kpi .tac-dot.info[b-w5rko0ysrk] { background: var(--tac-acc); }
.tac-audit .tac-kpi .tac-dot.off[b-w5rko0ysrk] { background: var(--tac-ink3); }

/* ------------------------------------------------------------------- container */

.tac-audit .tac-log[b-w5rko0ysrk] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* -------------------------------------------------------------------- toolbar */

.tac-audit .tac-toolbar[b-w5rko0ysrk] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-audit .tac-toolbar-title[b-w5rko0ysrk] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-audit .tac-toolbar-name[b-w5rko0ysrk] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-audit .tac-toolbar-count[b-w5rko0ysrk] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-audit .tac-toolbar-unit[b-w5rko0ysrk] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The eyebrow sits ABOVE the name, so the title block is two lines on its own
   while the controls stay on the toolbar's baseline. */
.tac-audit .tac-toolbar-title .tac-eyebrow[b-w5rko0ysrk] {
    flex: 1 0 100%;
    line-height: 1.2;
}

.tac-audit .tac-toolbar-controls[b-w5rko0ysrk] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-audit .tac-searchwrap[b-w5rko0ysrk] {
    position: relative;
    min-width: 0;
}

.tac-audit[b-w5rko0ysrk]  .search-bar {
    height: 34px;
    width: 260px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-audit[b-w5rko0ysrk]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-audit[b-w5rko0ysrk]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-audit[b-w5rko0ysrk]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-audit[b-w5rko0ysrk]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-audit[b-w5rko0ysrk]  .search-bar .clear-search,
.tac-audit[b-w5rko0ysrk]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* ------------------------------------------------------------ search-syntax help */

/* A bracket-ticked mini panel hanging off the search box. */
.tac-audit .tac-help[b-w5rko0ysrk] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    width: 340px;
    max-width: calc(100vw - 48px);
    padding: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16);
}

.tac-audit .tac-help[b-w5rko0ysrk]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
    opacity: 0.7;
    pointer-events: none;
}

.tac-audit .tac-help-head[b-w5rko0ysrk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-audit .tac-help-close[b-w5rko0ysrk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-audit .tac-help-close:hover[b-w5rko0ysrk] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-audit .tac-help-close:focus-visible[b-w5rko0ysrk] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-audit .tac-help-close svg[b-w5rko0ysrk] {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.tac-audit .tac-help-body[b-w5rko0ysrk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    line-height: 1.8;
}

.tac-audit .tac-help-title[b-w5rko0ysrk] {
    margin-bottom: 4px;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-audit .tac-help-section code[b-w5rko0ysrk] {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-acc-deep);
}

.tac-audit .tac-help-note[b-w5rko0ysrk] {
    padding-top: 10px;
    border-top: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.6;
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- filter controls */

/* Native <select> and <input type=date> so the platform keyboard handling and the
   mobile pickers survive; only the frame is restyled. */
.tac-audit .tac-filter[b-w5rko0ysrk],
.tac-audit .tac-date[b-w5rko0ysrk] {
    height: 34px;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    box-shadow: none;
    cursor: pointer;
}

.tac-audit .tac-filter[b-w5rko0ysrk] {
    text-transform: uppercase;
    max-width: 200px;
}

.tac-audit .tac-filter:hover[b-w5rko0ysrk],
.tac-audit .tac-date:hover[b-w5rko0ysrk] {
    border-color: var(--tac-acc);
}

.tac-audit .tac-filter:focus-visible[b-w5rko0ysrk],
.tac-audit .tac-date:focus-visible[b-w5rko0ysrk] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-audit .tac-daterange[b-w5rko0ysrk] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.tac-audit .tac-datelabel[b-w5rko0ysrk] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-audit .tac-date[b-w5rko0ysrk] {
    font-variant-numeric: tabular-nums;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, matching the roster's action cluster. */
.tac-audit[b-w5rko0ysrk]  .tac-toolbar-controls .btn.btn-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-audit[b-w5rko0ysrk]  .tac-toolbar-controls .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-audit[b-w5rko0ysrk]  .tac-toolbar-controls .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-audit[b-w5rko0ysrk]  .tac-toolbar-controls .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------ loading / empty */

.tac-audit .tac-state[b-w5rko0ysrk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-audit .tac-state h3[b-w5rko0ysrk] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-audit .tac-state p[b-w5rko0ysrk] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-audit .tac-state-eyebrow[b-w5rko0ysrk] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* A line-art mark instead of the clipboard emoji. */
.tac-audit .tac-state-mark[b-w5rko0ysrk] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-audit .tac-spinner[b-w5rko0ysrk] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-audit-spin-b-w5rko0ysrk 0.9s linear infinite;
}

@keyframes tac-audit-spin-b-w5rko0ysrk {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* .audit-list keeps its name — responsive.css's phone card layout keys on the
   literal `.audit-list .audit-table` nesting. overflow-x here at EVERY width (not
   only inside the <=1023px responsive rule) is the belt-and-braces that keeps a
   seven-column log from pushing the document sideways. */
.tac-audit .tac-tablewrap[b-w5rko0ysrk] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-audit .tac-table[b-w5rko0ysrk] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-audit .tac-table .tac-th[b-w5rko0ysrk] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-audit .tac-table .tac-row > td[b-w5rko0ysrk] {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-audit .tac-table .tac-row[b-w5rko0ysrk] {
    cursor: pointer;
    background: none;
    transition: background 0.12s ease;
}

.tac-audit .tac-table .tac-row:hover > td[b-w5rko0ysrk] {
    background: rgba(3, 105, 161, 0.05);
}

/* A failed or errored row is tinted, never painted: the crit colour stays reserved
   for the severity dot and the outcome label so those remain the only things that
   pull the eye down a long log. */
.tac-audit .tac-table .tac-row.row-failed > td[b-w5rko0ysrk],
.tac-audit .tac-table .tac-row.row-error > td[b-w5rko0ysrk] {
    background: rgba(220, 38, 38, 0.05);
}

.tac-audit .tac-table .tac-row.row-warning > td[b-w5rko0ysrk] {
    background: rgba(180, 83, 9, 0.05);
}

.tac-audit .tac-table .tac-timestamp[b-w5rko0ysrk] {
    white-space: nowrap;
    color: var(--tac-ink2);
}

.tac-audit .tac-desc[b-w5rko0ysrk] {
    display: block;
    min-width: 0;
    max-width: 62ch;
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-audit .tac-na[b-w5rko0ysrk] {
    color: var(--tac-ink3);
}

/* -------------------------------------------------- severity + outcome badges */

/* The shipped dot+label convention: a semantic dot next to an uppercase mono
   label. site.css draws these as rounded pills, so the pill is unwound here. */
.tac-audit .tac-status[b-w5rko0ysrk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* LOAD-BEARING. site.css:.status-icon is a legacy 36x36 round icon BADGE - it was
       built to hold a single glyph. The Status cell puts the word "Succeeded" in it,
       so the pill treatment below unwinds the radius but the 36px width survived and
       clipped the word to "SUCCEEDEI". width/min-width are stated explicitly so the
       badge is sized by its text, never by the icon geometry it inherited. */
    width: auto;
    min-width: 0;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge shares a table row with .tac-evt (micro/0.04em),
       the timestamp (12px) and the column head (12px). --tac-label-size is the
       card-label role at 16px; wearing it here made Severity tower over the time
       beside it and pushed Status out of the table's width. Keep these two badges
       on the same step - they are read as a pair, one row apart. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-audit .tac-sev-debug[b-w5rko0ysrk] {
    color: var(--tac-ink3);
}

.tac-audit .tac-sev-debug .tac-dot[b-w5rko0ysrk] { background: var(--tac-ink3); }

.tac-audit .tac-sev-info[b-w5rko0ysrk] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-audit .tac-sev-info .tac-dot[b-w5rko0ysrk] { background: var(--tac-acc); }

.tac-audit .tac-sev-warning[b-w5rko0ysrk] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-audit .tac-sev-warning .tac-dot[b-w5rko0ysrk] { background: var(--tac-warn); }

.tac-audit .tac-sev-error[b-w5rko0ysrk],
.tac-audit .tac-sev-critical[b-w5rko0ysrk] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-audit .tac-sev-error .tac-dot[b-w5rko0ysrk],
.tac-audit .tac-sev-critical .tac-dot[b-w5rko0ysrk] { background: var(--tac-crit); }

/* Critical is the one tier that earns a solid fill — it is the only severity that
   should be readable from across the room. */
.tac-audit .tac-sev-critical[b-w5rko0ysrk] {
    border-color: var(--tac-crit);
    background: var(--tac-crit);
    color: #ffffff;
}

.tac-audit .tac-sev-critical .tac-dot[b-w5rko0ysrk] { background: #ffffff; }

.tac-audit .tac-outcome-ok[b-w5rko0ysrk] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-audit .tac-outcome-ok .tac-dot[b-w5rko0ysrk] { background: var(--tac-ok); }

.tac-audit .tac-outcome-failed[b-w5rko0ysrk] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-audit .tac-outcome-failed .tac-dot[b-w5rko0ysrk] { background: var(--tac-crit); }

/* ------------------------------------------------------------- event-type chip */

/* The event type is a machine identifier, so it reads as a flat mono tag rather
   than a coloured pill. Only the domain accent on the left edge distinguishes the
   families (auth / agent / deployment / ...), which keeps a long log calm. */
.tac-audit .tac-evt[b-w5rko0ysrk] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-audit .tac-evt-auth[b-w5rko0ysrk],
.tac-audit .tac-evt-security[b-w5rko0ysrk] { border-left-color: var(--tac-crit); }
.tac-audit .tac-evt-user[b-w5rko0ysrk] { border-left-color: var(--tac-acc); }
.tac-audit .tac-evt-agent[b-w5rko0ysrk] { border-left-color: var(--tac-ok); }
.tac-audit .tac-evt-deployment[b-w5rko0ysrk],
.tac-audit .tac-evt-command[b-w5rko0ysrk] { border-left-color: var(--tac-acc-deep); }
.tac-audit .tac-evt-scheduler[b-w5rko0ysrk] { border-left-color: var(--tac-warn); }
.tac-audit .tac-evt-settings[b-w5rko0ysrk],
.tac-audit .tac-evt-system[b-w5rko0ysrk] { border-left-color: var(--tac-ink3); }

/* --------------------------------------------------------------- actor cell */

.tac-audit .tac-actor[b-w5rko0ysrk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
}

.tac-audit .tac-actor-mark[b-w5rko0ysrk] {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-audit .tac-actor-agent .tac-actor-mark[b-w5rko0ysrk] { stroke: var(--tac-ok); }
.tac-audit .tac-actor-system .tac-actor-mark[b-w5rko0ysrk] { stroke: var(--tac-acc); }

.tac-audit .tac-actor-name[b-w5rko0ysrk] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tac-audit .tac-actor-system .tac-actor-name[b-w5rko0ysrk] {
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- expanded row */

.tac-audit .tac-detailsrow > td[b-w5rko0ysrk] {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-audit .tac-details[b-w5rko0ysrk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
    border-inline-start: 2px solid var(--tac-acc);
}

.tac-audit .tac-detailgrid[b-w5rko0ysrk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 18px;
    min-width: 0;
}

.tac-audit .tac-detail[b-w5rko0ysrk] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-audit .tac-detail-wide[b-w5rko0ysrk] {
    grid-column: 1 / -1;
}

.tac-audit .tac-detail-label[b-w5rko0ysrk] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-audit .tac-detail-value[b-w5rko0ysrk] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-audit .tac-detail-error[b-w5rko0ysrk] {
    color: var(--tac-crit);
}

.tac-audit .tac-detaildesc[b-w5rko0ysrk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-audit .tac-detaildesc p[b-w5rko0ysrk] {
    margin: 0;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    line-height: 1.6;
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- pagination */

.tac-audit .tac-pagination[b-w5rko0ysrk] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-audit .tac-paginfo[b-w5rko0ysrk] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-audit .tac-pagectl[b-w5rko0ysrk] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-audit .tac-pagebtn[b-w5rko0ysrk] {
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tac-audit .tac-pagebtn:hover:not(:disabled)[b-w5rko0ysrk] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-audit .tac-pagebtn.active[b-w5rko0ysrk] {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-audit .tac-pagebtn:disabled[b-w5rko0ysrk] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-audit .tac-pagebtn:focus-visible[b-w5rko0ysrk] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the toolbar stops trying to fit on one line. */
@media (max-width: 1023px) {
    .tac-audit .tac-toolbar-controls[b-w5rko0ysrk] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-audit[b-w5rko0ysrk]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-audit .tac-filter[b-w5rko0ysrk] {
        flex: 1 1 160px;
        max-width: none;
    }
}

/* Phone: responsive.css turns the table into stacked cards (thead offscreen, every
   td a flex row labelled from data-label, .event-details-row exempted). These rules
   DRESS that layout — they must not fight it, so nothing here touches display or
   position on the table. */
@media (max-width: 767px) {
    .tac-audit[b-w5rko0ysrk] {
        gap: 12px;
    }

    .tac-audit .tac-kpibar[b-w5rko0ysrk] {
        /* Two cards per row at phone. minmax(0, 1fr) cannot overflow, so a long
           label ellipsises inside its own card instead of widening the document -
           AssertNoPageOverflow runs at 375px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tac-audit .tac-kpi[b-w5rko0ysrk] {
        padding: 12px 14px;
    }

    .tac-audit .tac-kpi.selected[b-w5rko0ysrk] {
        padding-left: 12px;
    }

    .tac-audit .tac-toolbar[b-w5rko0ysrk] {
        padding: 12px;
        gap: 10px;
    }

    .tac-audit .tac-help[b-w5rko0ysrk] {
        width: 100%;
    }

    .tac-audit .tac-table .tac-row[b-w5rko0ysrk] {
        border-radius: 0;
        border-color: var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-audit .tac-table .tac-row.row-failed[b-w5rko0ysrk],
    .tac-audit .tac-table .tac-row.row-error[b-w5rko0ysrk] {
        border-color: rgba(220, 38, 38, 0.4);
    }

    .tac-audit .tac-table .tac-row.row-warning[b-w5rko0ysrk] {
        border-color: rgba(180, 83, 9, 0.4);
    }

    .tac-audit .tac-table .tac-row > td[b-w5rko0ysrk] {
        border-bottom-color: var(--tac-line);
    }

    /* The data-label pseudo-element is the field name in card mode — make it read
       like every other label on the page. */
    .tac-audit .tac-table .tac-row > td[b-w5rko0ysrk]::before {
        font-family: var(--tac-mono);
        font-size: var(--tac-label-size-sm);
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-audit .tac-desc[b-w5rko0ysrk] {
        max-width: none;
        text-align: end;
    }

    .tac-audit .tac-details[b-w5rko0ysrk] {
        padding: 12px;
    }

    .tac-audit .tac-detailgrid[b-w5rko0ysrk] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-audit .tac-pagination[b-w5rko0ysrk] {
        padding: 10px 12px;
    }

    .tac-audit .tac-pagectl[b-w5rko0ysrk] {
        margin-inline-start: 0;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including the
   loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-audit *[b-w5rko0ysrk],
    .tac-audit[b-w5rko0ysrk]  * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- two-line card: label+figure on one row, caption beneath ---------------- */
.tac-audit .tac-kpi .tac-kpi-head[b-w5rko0ysrk] {
    grid-area: head;
}

.tac-audit .tac-kpi .tac-kpi-figure[b-w5rko0ysrk] {
    grid-area: figure;
    justify-content: flex-end;
    justify-self: end;
    align-items: baseline;
}

.tac-audit .tac-kpi .tac-kpi-foot[b-w5rko0ysrk] {
    grid-area: foot;
}

.tac-audit .tac-kpi .tac-kpi-value[b-w5rko0ysrk] {
    /* The figure is the point of the card, so it leads. It was reading SMALLER than
       its own 16px label, which inverted the hierarchy. */
    font-size: var(--tac-stat-value-size);
    line-height: 1;
}
/* _content/Athena.Server/Pages/CollectionCreate.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops collection authoring — Pages/CollectionCreate.razor.

   No artboard exists for this screen in Mock/tactical-ops/ (the folder holds
   login, dashboard, agents and report-builder only), so every value below is
   taken from the shipped reference implementations (Login.razor.css,
   Dashboard.razor.css, Agents.razor.css, DeployPackage.razor.css) rather than
   invented. Consistency with what already ships beats novelty here.

   Scoped to CollectionCreate.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   ── TWO RULES THIS SHEET MUST NOT BREAK ───────────────────────────────────────

   1. NOTHING here may name a bare shared selector. .content-card, .card-title,
      .form-group, .form-control, .form-input, .btn / .btn-primary /
      .btn-secondary, .modal / .modal-overlay, .status and friends are shared
      with dozens of other pages and their rules stay in site.css as dead weight
      for the final sweep. Every element therefore carries a NEW .tac-* twin and
      every selector below hangs off one. The legacy classes stay on the markup
      because Athena.E2ETests/CollectionsPageTests selects on them (see the
      comment block at the top of the .razor).

   2. The field-browser modal renders OUTSIDE .tac-newcol in the DOM (it is a
      sibling of the page root, so the site-wide overlay positioning still
      applies). Its rules therefore hang off .tac-modal-overlay, not off the page
      root — exactly as PackageTemplates.razor.css does for its delete modal.

   Everything on this page is a plain HTML element, so there is no ::deep here:
   no child component renders inside the page's own scope.
   ============================================================================ */

.tac-newcol[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The console must never be the reason the document scrolls sideways. */
    min-width: 0;
    max-width: 1100px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-newcol .tac-num[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-newcol .tac-lbl[b-ro9hh3ns17],
.tac-newcol .tac-eyebrow[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-newcol .tac-eyebrow[b-ro9hh3ns17] {
    color: var(--tac-acc);
}

.tac-newcol .tac-dot[b-ro9hh3ns17] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

.tac-newcol .tac-dot.ok[b-ro9hh3ns17] { background: var(--tac-ok); }
.tac-newcol .tac-dot.off[b-ro9hh3ns17] { background: var(--tac-ink3); }

/* --------------------------------------------------------------- breadcrumb */

/* site.css draws the trail with a rounded pill and a chevron entity; here it is
   a flat mono path, the way a console prints a location. */
.tac-newcol .tac-crumbs[b-ro9hh3ns17] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-width: 0;
}

.tac-newcol .tac-crumb[b-ro9hh3ns17] {
    color: var(--tac-ink3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.tac-newcol a.tac-crumb:hover[b-ro9hh3ns17] {
    color: var(--tac-acc);
    border-bottom-color: var(--tac-acc);
}

.tac-newcol a.tac-crumb:focus-visible[b-ro9hh3ns17] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-newcol .tac-crumb-current[b-ro9hh3ns17] {
    color: var(--tac-ink0);
}

.tac-newcol .tac-crumb-sep[b-ro9hh3ns17] {
    color: var(--tac-line2);
}

/* --------------------------------------------------------------- page header */

.tac-newcol .tac-pagehead[b-ro9hh3ns17] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-newcol .tac-pagehead-text[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Collections") from
   GetPageTitle(). */
.tac-newcol .tac-pagetitle[b-ro9hh3ns17] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-newcol .tac-pagesub[b-ro9hh3ns17] {
    margin: 0;
    max-width: 62ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* The readiness read-out mirrors IsReady — the same predicate ValidateForm
   applies, so the light can never disagree with the form. */
.tac-newcol .tac-readiness[b-ro9hh3ns17] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-line2);
    background: var(--tac-s2);
    white-space: nowrap;
}

.tac-newcol .tac-readiness-value[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ---------------------------------------------------------------------- body */

.tac-newcol .tac-body[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* -------------------------------------------------------------------- panels */

.tac-newcol .tac-panel[b-ro9hh3ns17] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-newcol .tac-panel[b-ro9hh3ns17]::before,
.tac-newcol .tac-panel[b-ro9hh3ns17]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-newcol .tac-panel[b-ro9hh3ns17]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-newcol .tac-panel[b-ro9hh3ns17]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-newcol .tac-scan[b-ro9hh3ns17] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-newcol .tac-panel-head[b-ro9hh3ns17] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 14px 18px 12px;
    min-width: 0;
}

.tac-newcol .tac-panel-head-ruled[b-ro9hh3ns17] {
    border-bottom: 1px solid var(--tac-line);
}

/* The 01..03 authoring order gives the stacked sections a readable sequence. */
.tac-newcol .tac-panel-index[b-ro9hh3ns17] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-newcol .tac-panel-title[b-ro9hh3ns17] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* A live count of what the third panel currently holds — filters, or ticked
   agents. Both are read straight off the page's own state. */
.tac-newcol .tac-panel-count[b-ro9hh3ns17] {
    margin-left: auto;
    font-size: var(--tac-fs-label);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-newcol .tac-panel-body[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 18px;
    min-width: 0;
}

/* -------------------------------------------------------------------- fields */

.tac-newcol .tac-field[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-newcol .tac-label[b-ro9hh3ns17] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* site.css marks a required label with a red asterisk via ::after; the tactical
   marker is the accent tick instead. */
.tac-newcol .tac-label-req[b-ro9hh3ns17]::after {
    content: "*";
    margin-inline-start: 4px;
    color: var(--tac-acc);
}

.tac-newcol .tac-input[b-ro9hh3ns17],
.tac-newcol .tac-select[b-ro9hh3ns17],
.tac-newcol .tac-textarea[b-ro9hh3ns17] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-newcol .tac-input[b-ro9hh3ns17],
.tac-newcol .tac-select[b-ro9hh3ns17] {
    height: 38px;
}

.tac-newcol .tac-textarea[b-ro9hh3ns17] {
    padding: 10px 12px;
    min-height: 76px;
    line-height: 1.5;
    resize: vertical;
}

.tac-newcol .tac-input:hover[b-ro9hh3ns17],
.tac-newcol .tac-select:hover[b-ro9hh3ns17],
.tac-newcol .tac-textarea:hover[b-ro9hh3ns17] {
    background: var(--tac-s1);
}

.tac-newcol .tac-input:focus[b-ro9hh3ns17],
.tac-newcol .tac-select:focus[b-ro9hh3ns17],
.tac-newcol .tac-textarea:focus[b-ro9hh3ns17] {
    outline: none;
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    /* site.css puts a 3px blue glow on any focused control; here it reads as a
       second border inside the field frame. The frame itself is the affordance. */
    box-shadow: none;
}

.tac-newcol .tac-input:focus-visible[b-ro9hh3ns17],
.tac-newcol .tac-select:focus-visible[b-ro9hh3ns17],
.tac-newcol .tac-textarea:focus-visible[b-ro9hh3ns17] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-newcol .tac-input[b-ro9hh3ns17]::placeholder,
.tac-newcol .tac-textarea[b-ro9hh3ns17]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

.tac-newcol .tac-input-error[b-ro9hh3ns17] {
    border-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.05);
}

.tac-newcol .tac-hint[b-ro9hh3ns17] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-newcol .tac-counter[b-ro9hh3ns17] {
    margin-inline-start: auto;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-newcol .tac-example[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-acc);
}

.tac-newcol .tac-error[b-ro9hh3ns17] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-crit);
}

/* --------------------------------------------------------------- type picker */

/* A native radio group: each option is a <label> wrapping its radio, so keyboard
   and screen-reader behaviour come for free. */
.tac-newcol .tac-typeset[b-ro9hh3ns17] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
}

.tac-newcol .tac-type[b-ro9hh3ns17] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.tac-newcol .tac-type:hover[b-ro9hh3ns17] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
}

.tac-newcol .tac-type.selected[b-ro9hh3ns17] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

.tac-newcol .tac-type:focus-within[b-ro9hh3ns17] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-newcol .tac-type input[type="radio"][b-ro9hh3ns17],
.tac-newcol .tac-logic input[type="radio"][b-ro9hh3ns17],
.tac-newcol .tac-agentrow input[type="checkbox"][b-ro9hh3ns17] {
    width: 14px;
    height: 14px;
    flex: none;
    margin: 2px 0 0;
    accent-color: var(--tac-acc);
}

/* The D / S sigil: a flat mono square, not the rounded gradient chip. */
.tac-newcol .tac-typemark[b-ro9hh3ns17] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

.tac-newcol .tac-type.selected .tac-typemark[b-ro9hh3ns17] {
    border-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc);
}

.tac-newcol .tac-type-text[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-newcol .tac-type-title[b-ro9hh3ns17] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-newcol .tac-type-desc[b-ro9hh3ns17] {
    font-size: var(--tac-fs-micro);
    line-height: 1.45;
    color: var(--tac-ink2);
}

/* -------------------------------------------------------------- filter logic */

.tac-newcol .tac-logicset[b-ro9hh3ns17] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}

.tac-newcol .tac-logic[b-ro9hh3ns17] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-newcol .tac-logic:hover[b-ro9hh3ns17] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-newcol .tac-logic.selected[b-ro9hh3ns17] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

.tac-newcol .tac-logic:focus-within[b-ro9hh3ns17] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-newcol .tac-logic-text[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-newcol .tac-logic-label[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-newcol .tac-logic-hint[b-ro9hh3ns17] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

/* ----------------------------------------------------------- section subhead */

.tac-newcol .tac-subhead[b-ro9hh3ns17] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.tac-newcol .tac-subhead-ruled[b-ro9hh3ns17] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-newcol .tac-subhead-actions[b-ro9hh3ns17] {
    margin-inline-start: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* selected / available — both scoped to the list actually on screen. */
.tac-newcol .tac-tally[b-ro9hh3ns17] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.tac-newcol .tac-tally-value[b-ro9hh3ns17] {
    font-size: var(--tac-fs-label);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-newcol .tac-tally-sep[b-ro9hh3ns17],
.tac-newcol .tac-tally-total[b-ro9hh3ns17] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- filter cards */

.tac-newcol .tac-filters[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.tac-newcol .tac-filter[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--tac-line);
    border-left: 2px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
}

.tac-newcol .tac-filter-head[b-ro9hh3ns17] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-newcol .tac-filter-no[b-ro9hh3ns17] {
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    color: var(--tac-acc);
}

/* The AND/OR joiner, restated on every row after the first so the group logic is
   readable without scrolling back to the radio pair. */
.tac-newcol .tac-filter-join[b-ro9hh3ns17] {
    padding: 1px 7px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-newcol .tac-filter-head .tac-btn[b-ro9hh3ns17] {
    margin-inline-start: auto;
}

.tac-newcol .tac-filter-body[b-ro9hh3ns17] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 12px;
    padding: 12px;
    background: var(--tac-s1);
    min-width: 0;
}

/* -------------------------------------------------------------- agent picker */

.tac-newcol .tac-agentpick[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Its own scroll container so a 1000-row fleet never widens the document. */
.tac-newcol .tac-agentlist[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    background: var(--tac-line);
    min-width: 0;
}

.tac-newcol .tac-agentrow[b-ro9hh3ns17] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 9px 18px;
    border: 0;
    border-radius: 0;
    background: var(--tac-s1);
    cursor: pointer;
    min-width: 0;
    transition: background 0.15s ease;
}

.tac-newcol .tac-agentrow:hover[b-ro9hh3ns17] {
    background: var(--tac-s2);
}

.tac-newcol .tac-agentrow.selected[b-ro9hh3ns17] {
    background: var(--tac-acc-dim);
}

.tac-newcol .tac-agentrow:focus-within[b-ro9hh3ns17] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-newcol .tac-agentrow input[type="checkbox"][b-ro9hh3ns17] {
    margin: 0;
}

.tac-newcol .tac-agentrow-info[b-ro9hh3ns17] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px;
    min-width: 0;
}

.tac-newcol .tac-agentrow-name[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    letter-spacing: 0.02em;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tac-newcol .tac-agentrow-meta[b-ro9hh3ns17] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* The mock's status convention: a semantic dot next to an uppercase mono label.
   site.css draws .status as a rounded pill, so nothing here reuses that name. */
.tac-newcol .tac-status[b-ro9hh3ns17] {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-newcol .tac-status-online[b-ro9hh3ns17] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-newcol .tac-status-online .tac-dot[b-ro9hh3ns17] { background: var(--tac-ok); }

.tac-newcol .tac-status-offline .tac-dot[b-ro9hh3ns17] { background: var(--tac-ink3); }

.tac-newcol .tac-status-pending[b-ro9hh3ns17] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-newcol .tac-status-pending .tac-dot[b-ro9hh3ns17] { background: var(--tac-warn); }

.tac-newcol .tac-status-maintenance[b-ro9hh3ns17] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-newcol .tac-status-maintenance .tac-dot[b-ro9hh3ns17] { background: var(--tac-acc); }

/* --------------------------------------------------------------- empty state */

.tac-newcol .tac-empty[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 34px 18px;
    border: 1px dashed var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    text-align: center;
    min-width: 0;
}

/* The emoji glyphs the page used to draw (magnifier / laptop) render in whatever
   face the OS ships; these line icons sit in the palette instead. */
.tac-newcol .tac-empty-icon[b-ro9hh3ns17] {
    width: 26px;
    height: 26px;
    stroke: var(--tac-line2);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-newcol .tac-empty-title[b-ro9hh3ns17] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-newcol .tac-empty-hint[b-ro9hh3ns17] {
    margin: 0;
    max-width: 46ch;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* ------------------------------------------------------------ loading state */

.tac-newcol .tac-state[b-ro9hh3ns17] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    min-width: 0;
}

.tac-newcol .tac-spinner[b-ro9hh3ns17] {
    width: 18px;
    height: 18px;
    flex: none;
    margin: 0;
    border: 2px solid var(--tac-line);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-ro9hh3ns17 0.9s linear infinite;
}

.tac-newcol .tac-state-text[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

@keyframes tac-spin-b-ro9hh3ns17 {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ banners */

.tac-newcol .tac-banner[b-ro9hh3ns17] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 0;
    font-size: var(--tac-fs-meta);
    min-width: 0;
}

.tac-newcol .tac-banner-tag[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-newcol .tac-banner-text[b-ro9hh3ns17] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tac-newcol .tac-banner-crit[b-ro9hh3ns17] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-newcol .tac-banner-ok[b-ro9hh3ns17] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

/* ------------------------------------------------------------------ buttons */

.tac-newcol .tac-actions[b-ro9hh3ns17] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.tac-newcol .tac-btn[b-ro9hh3ns17] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-newcol .tac-btn:hover:not(:disabled)[b-ro9hh3ns17] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-newcol .tac-btn:focus-visible[b-ro9hh3ns17] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-newcol .tac-btn:disabled[b-ro9hh3ns17] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-newcol .tac-btn-sm[b-ro9hh3ns17] {
    height: 28px;
    padding: 0 10px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
}

.tac-newcol .tac-btn-primary[b-ro9hh3ns17] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-newcol .tac-btn-primary:hover:not(:disabled)[b-ro9hh3ns17] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

/* "Add filter" is the constructive action in the panel; site.css paints .btn-success
   green, which is a status colour here — the accent outline says "primary in this
   panel" without borrowing a semantic tone. */
.tac-newcol .tac-btn-accent[b-ro9hh3ns17] {
    border-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc);
}

.tac-newcol .tac-btn-accent:hover:not(:disabled)[b-ro9hh3ns17] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-newcol .tac-btn-danger[b-ro9hh3ns17] {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-newcol .tac-btn-danger:hover:not(:disabled)[b-ro9hh3ns17] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-newcol .tac-btn-icon[b-ro9hh3ns17] {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-newcol .tac-btn-spinner[b-ro9hh3ns17] {
    width: 13px;
    height: 13px;
    flex: none;
    margin: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: tac-spin-b-ro9hh3ns17 0.9s linear infinite;
}

/* ================================================================== the modal */
/* The field browser renders OUTSIDE .tac-newcol (a sibling of the page root), so
   every rule below hangs off .tac-modal-overlay instead of the page root — the
   same shape PackageTemplates.razor.css uses for its delete modal. */

/* site.css centres the overlay but gives it no gutter, so at phone width the
   dialog would butt against both edges. */
.tac-modal-overlay[b-ro9hh3ns17] {
    backdrop-filter: none;
    box-sizing: border-box;
    padding: 16px;
}

.tac-modal-overlay .tac-modal[b-ro9hh3ns17] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    max-height: min(80vh, 720px);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
    min-width: 0;
}

.tac-modal-overlay .tac-modal[b-ro9hh3ns17]::before,
.tac-modal-overlay .tac-modal[b-ro9hh3ns17]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-ro9hh3ns17]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-ro9hh3ns17]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-ro9hh3ns17] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-title[b-ro9hh3ns17] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* Real, in-memory counts of what LoadFieldsAsync returned — never a guess. */
.tac-modal-overlay .tac-modal-count[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-modal-close[b-ro9hh3ns17] {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    line-height: 1;
    cursor: pointer;
}

.tac-modal-overlay .tac-modal-close:hover[b-ro9hh3ns17] {
    border-color: var(--tac-line2);
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-close:focus-visible[b-ro9hh3ns17] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-modal-overlay .tac-modal-body[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    min-height: 0;
    background: none;
}

.tac-modal-overlay .tac-modal-search[b-ro9hh3ns17] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    flex: none;
    min-width: 0;
}

.tac-modal-overlay .tac-modal-search:focus-within[b-ro9hh3ns17] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-modal-overlay .tac-search-icon[b-ro9hh3ns17] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-modal-overlay .tac-modal-search .tac-input[b-ro9hh3ns17] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-search .tac-input[b-ro9hh3ns17]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

/* Own scroll container — the modal body must never widen the page. */
.tac-modal-overlay .tac-fieldlist[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
    min-width: 0;
    padding-inline-end: 2px;
}

.tac-modal-overlay .tac-fieldcat[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tac-modal-overlay .tac-fieldcat-title[b-ro9hh3ns17] {
    margin: 0 0 6px;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-modal-overlay .tac-fielditem[b-ro9hh3ns17] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: start;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-modal-overlay .tac-fielditem + .tac-fielditem[b-ro9hh3ns17] {
    border-top: 0;
}

.tac-modal-overlay .tac-fielditem:hover[b-ro9hh3ns17] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-modal-overlay .tac-fielditem:focus-visible[b-ro9hh3ns17] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-modal-overlay .tac-fielditem-info[b-ro9hh3ns17] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-modal-overlay .tac-fielditem-name[b-ro9hh3ns17] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    letter-spacing: 0.03em;
    color: var(--tac-ink0);
}

/* The field path is a machine token — mono, always. */
.tac-modal-overlay .tac-fielditem-path[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
}

.tac-modal-overlay .tac-fielditem-desc[b-ro9hh3ns17] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

.tac-modal-overlay .tac-example[b-ro9hh3ns17] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-acc);
    overflow-wrap: anywhere;
}

/* FilterFieldType is a wire enum, so it reads as a machine token. */
.tac-modal-overlay .tac-fieldtype[b-ro9hh3ns17] {
    margin-inline-start: auto;
    flex: none;
    padding: 1px 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-modal-foot[b-ro9hh3ns17] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* The modal is outside .tac-newcol, so the button vocabulary is restated here
   rather than inherited. */
.tac-modal-overlay .tac-modal-foot .tac-btn[b-ro9hh3ns17] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-modal-overlay .tac-modal-foot .tac-btn:hover:not(:disabled)[b-ro9hh3ns17] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .tac-btn:focus-visible[b-ro9hh3ns17] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the side-by-side pickers and the 3-up filter row stop competing for
   width well before the shell's own breakpoint, so nothing overflows at 1023px. */
@media (max-width: 1023px) {
    .tac-newcol .tac-pagetitle[b-ro9hh3ns17] {
        font-size: 20px;
    }

    .tac-newcol .tac-readiness[b-ro9hh3ns17] {
        margin-left: 0;
    }

    .tac-newcol .tac-filter-body[b-ro9hh3ns17] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .tac-newcol[b-ro9hh3ns17] {
        gap: 12px;
    }

    .tac-newcol .tac-panel-head[b-ro9hh3ns17],
    .tac-newcol .tac-panel-body[b-ro9hh3ns17],
    .tac-newcol .tac-subhead-ruled[b-ro9hh3ns17],
    .tac-newcol .tac-agentrow[b-ro9hh3ns17] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-newcol .tac-typeset[b-ro9hh3ns17],
    .tac-newcol .tac-logicset[b-ro9hh3ns17],
    .tac-newcol .tac-filter-body[b-ro9hh3ns17] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-newcol .tac-subhead-actions[b-ro9hh3ns17] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-newcol .tac-subhead-actions .tac-btn[b-ro9hh3ns17] {
        flex: 1 1 auto;
    }

    .tac-newcol .tac-actions .tac-btn[b-ro9hh3ns17] {
        flex: 1 1 auto;
    }

    .tac-newcol .tac-status[b-ro9hh3ns17] {
        margin-inline-start: 0;
    }

    .tac-newcol .tac-agentrow[b-ro9hh3ns17] {
        flex-wrap: wrap;
    }

    .tac-modal-overlay .tac-modal-head[b-ro9hh3ns17],
    .tac-modal-overlay .tac-modal-body[b-ro9hh3ns17],
    .tac-modal-overlay .tac-modal-foot[b-ro9hh3ns17] {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Honour reduced-motion: kill the hover washes and stop the spinners from
   animating for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-newcol *[b-ro9hh3ns17],
    .tac-modal-overlay *[b-ro9hh3ns17] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/CollectionDetails.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Collection record — the /collections/{id} detail screen.

   Scoped to CollectionDetails.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   There is no artboard for this screen in Mock/tactical-ops/. Every shape below is
   borrowed from a SHIPPED reference so the app reads as one system:
     * bracket-ticked panel + scan hairline .............. Login.razor.css
     * dot+label status, mono table, empty state ......... Agents.razor.css
     * detail head, info grid, section title, back chip .. DeploymentHistory.razor.css

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with up to
   41 other screens (.content-card, .card-title, .card-header, .status, .data-table,
   .table-container, .info-grid, .btn*, .modal*, .empty-state, .loading-state,
   .breadcrumb). Blazor scoping alone would stop a bare `.status { }` rule leaking to
   other pages, but it would still fight site.css on THIS page in ways invisible from
   the other forty. So the markup carries a NEW .tac-* class next to every legacy one,
   and every selector below hangs off a .tac-* name. The legacy classes stay on the
   elements untouched: Athena.E2ETests/CollectionsPageTests selects `h2`,
   `.btn-danger`, `.modal`, `.modal .btn-secondary`, and responsive.css's
   `.info-grid` collapse is inherited for free only while that class survives.

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so an
   equal-specificity .tac-* rule wins on source order. Where site.css is more specific
   the rule below is deliberately written long enough to outrank it.

   This page has no child components, so nothing here needs ::deep.
   ============================================================================ */

.tac-collection[b-ckw5rajrvy] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The record must never be the reason the document scrolls sideways —
       Responsive/*BreakpointTests assert zero page overflow at 375/768/1280. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-collection .tac-panel[b-ckw5rajrvy] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    margin: 0;
    padding: 18px 20px 20px;
    min-width: 0;
}

.tac-collection .tac-panel[b-ckw5rajrvy]::before,
.tac-collection .tac-panel[b-ckw5rajrvy]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-collection .tac-panel[b-ckw5rajrvy]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-collection .tac-panel[b-ckw5rajrvy]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-collection .tac-scan[b-ckw5rajrvy] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-collection .tac-eyebrow[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every number, address and timestamp on this page is mono and tabular so
   columns of digits line up vertically. */
.tac-collection .tac-num[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
}

.tac-collection .tac-dot[b-ckw5rajrvy] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Collections") from
   GetPageTitle(). Same call DeploymentHistory.razor.css documents. */
.tac-collection .tac-pagetitle[b-ckw5rajrvy] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- breadcrumb */

.tac-collection .tac-breadcrumb[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-width: 0;
}

.tac-collection .tac-breadcrumb .tac-crumb[b-ckw5rajrvy] {
    color: var(--tac-ink3);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tac-collection .tac-breadcrumb a.tac-crumb:hover[b-ckw5rajrvy] {
    color: var(--tac-acc);
    text-decoration: none;
}

.tac-collection .tac-breadcrumb a.tac-crumb:focus-visible[b-ckw5rajrvy] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-collection .tac-breadcrumb .tac-crumb-current[b-ckw5rajrvy] {
    color: var(--tac-ink0);
}

.tac-collection .tac-breadcrumb .tac-crumb-sep[b-ckw5rajrvy] {
    color: var(--tac-line2);
}

/* ------------------------------------------------------------------ record head */

.tac-collection .tac-detailhead[b-ckw5rajrvy] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    min-width: 0;
}

.tac-collection .tac-detailhead-id[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 260px;
}

.tac-collection .tac-detailhead-text[b-ckw5rajrvy] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-collection .tac-pagesub[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The D / S / C type mark: a square bracketed glyph, not a coloured circle. */
.tac-collection .tac-typemark[b-ckw5rajrvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-display);
    font-weight: 700;
    font-size: var(--tac-fs-xl);
    letter-spacing: 0.06em;
    color: var(--tac-ink2);
}

.tac-collection .tac-typemark-dynamic[b-ckw5rajrvy] {
    border-color: rgba(3, 105, 161, 0.45);
    background: var(--tac-acc-dim);
    color: var(--tac-acc);
}

.tac-collection .tac-typemark-static[b-ckw5rajrvy] {
    border-color: var(--tac-line2);
    background: var(--tac-s2);
    color: var(--tac-ink2);
}

.tac-collection .tac-typemark-compliance[b-ckw5rajrvy] {
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
    color: var(--tac-ok);
}

.tac-collection .tac-detailhead-actions[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* ---------------------------------------------------------------------- buttons */

/* Flat, uppercase, square — the Login/Agents button vocabulary. */
.tac-collection .tac-btn[b-ckw5rajrvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-collection .tac-btn:hover:not(:disabled)[b-ckw5rajrvy] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-collection .tac-btn:focus-visible[b-ckw5rajrvy] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-collection .tac-btn:disabled[b-ckw5rajrvy] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-collection .tac-btn.tac-btn-primary[b-ckw5rajrvy] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-collection .tac-btn.tac-btn-primary:hover:not(:disabled)[b-ckw5rajrvy] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

/* Refresh is the page's "act on the machine" control. It reads as accent-outlined
   rather than solid so the solid fill stays reserved for Edit (primary) and the
   destructive Delete. */
.tac-collection .tac-btn.tac-btn-accent[b-ckw5rajrvy] {
    background: var(--tac-acc-dim);
    border-color: rgba(3, 105, 161, 0.45);
    color: var(--tac-acc-deep);
}

.tac-collection .tac-btn.tac-btn-accent:hover:not(:disabled)[b-ckw5rajrvy] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-collection .tac-btn.tac-btn-danger[b-ckw5rajrvy] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-collection .tac-btn.tac-btn-danger:hover:not(:disabled)[b-ckw5rajrvy] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-collection .tac-btn.tac-btn-ghost[b-ckw5rajrvy] {
    height: 28px;
    padding: 0 12px;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    background: var(--tac-s2);
    border-color: var(--tac-line2);
    color: var(--tac-ink2);
}

.tac-collection .tac-btn.tac-btn-ghost:hover:not(:disabled)[b-ckw5rajrvy] {
    border-color: var(--tac-acc);
    color: var(--tac-acc-deep);
}

/* The in-button busy ring, matching the page spinner. */
.tac-collection .tac-btn-spinner[b-ckw5rajrvy] {
    width: 12px;
    height: 12px;
    flex: none;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    background: none;
    animation: tac-spin-b-ckw5rajrvy 0.9s linear infinite;
}

/* ------------------------------------------------------------- read-only notice */

.tac-collection .tac-notice[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(3, 105, 161, 0.4);
    border-radius: 0;
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    min-width: 0;
}

.tac-collection .tac-notice-mark[b-ckw5rajrvy] {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -------------------------------------------------------------------- panel head */

.tac-collection .tac-panel-head[b-ckw5rajrvy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
}

.tac-collection .tac-panel-head-split[b-ckw5rajrvy] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.tac-collection .tac-panel-title[b-ckw5rajrvy] {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ---------------------------------------------------------------- information */

/* responsive.css collapses the bare .info-grid to 2 columns at 1023px and 1 at
   767px; the rules below only restyle the cells and the gap, never the track
   count, so that behaviour is inherited rather than fought. */
.tac-collection .tac-infogrid[b-ckw5rajrvy] {
    gap: 14px 20px;
    min-width: 0;
}

.tac-collection .tac-infoitem[b-ckw5rajrvy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tac-collection .tac-infolabel[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-collection .tac-infovalue[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-collection .tac-infovalue.tac-infovalue-accent[b-ckw5rajrvy] {
    color: var(--tac-acc);
}

/* Collection type as a dot+label chip — the same convention the member rows use
   for agent status, so the page has ONE badge language. */
.tac-collection .tac-typechip[b-ckw5rajrvy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-collection .tac-typechip-dynamic[b-ckw5rajrvy] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-collection .tac-typechip-dynamic .tac-dot[b-ckw5rajrvy] { background: var(--tac-acc); }

.tac-collection .tac-typechip-compliance[b-ckw5rajrvy] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-collection .tac-typechip-compliance .tac-dot[b-ckw5rajrvy] { background: var(--tac-ok); }

.tac-collection .tac-descblock[b-ckw5rajrvy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 18px 0 0;
    padding: 12px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    min-width: 0;
}

.tac-collection .tac-desctext[b-ckw5rajrvy] {
    margin: 0;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- filters */

.tac-collection .tac-filtersummary[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    min-width: 0;
}

.tac-collection .tac-logicbadge[b-ckw5rajrvy] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border: 1px solid rgba(3, 105, 161, 0.4);
    border-radius: 0;
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tac-collection .tac-filtercount[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-collection .tac-filterlist[b-ckw5rajrvy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Each filter is one bracketed expression row: index, type, then the predicate. */
.tac-collection .tac-filtercard[b-ckw5rajrvy] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--tac-line);
    border-inline-start: 2px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    min-width: 0;
    flex-wrap: wrap;
}

.tac-collection .tac-filtercard-head[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.tac-collection .tac-filternum[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--tac-acc);
}

.tac-collection .tac-typebadge[b-ckw5rajrvy] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tac-collection .tac-badge-number[b-ckw5rajrvy],
.tac-collection .tac-badge-datetime[b-ckw5rajrvy] {
    border-color: rgba(3, 105, 161, 0.35);
    color: var(--tac-acc);
}

.tac-collection .tac-badge-boolean[b-ckw5rajrvy] {
    border-color: rgba(21, 128, 61, 0.35);
    color: var(--tac-ok);
}

.tac-collection .tac-filtercard-body[b-ckw5rajrvy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 240px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.tac-collection .tac-expr[b-ckw5rajrvy] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.tac-collection .tac-expr-field[b-ckw5rajrvy] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* The operator is the mono hinge of the expression — it is the only part that is
   a symbol rather than prose, so it gets the terminal treatment. */
.tac-collection .tac-expr-op[b-ckw5rajrvy] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-collection .tac-expr-val[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-acc-deep);
    overflow-wrap: anywhere;
}

.tac-collection .tac-filterdesc[b-ckw5rajrvy] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- members toolbar */

.tac-collection .tac-toolbar[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: -18px -20px 0;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
    min-width: 0;
}

.tac-collection .tac-toolbar-title[b-ckw5rajrvy] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.tac-collection .tac-toolbar-count[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-collection .tac-autobadge[b-ckw5rajrvy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid rgba(3, 105, 161, 0.4);
    border-radius: 0;
    background: var(--tac-acc-dim);
    color: var(--tac-acc);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tac-collection .tac-autobadge .tac-dot[b-ckw5rajrvy] { background: var(--tac-acc); }

/* ------------------------------------------------------------- loading / empty */

.tac-collection .tac-state[b-ckw5rajrvy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-collection .tac-state h3[b-ckw5rajrvy] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-collection .tac-state p[b-ckw5rajrvy] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-collection .tac-state .tac-state-hint[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

.tac-collection .tac-state .tac-state-eyebrow[b-ckw5rajrvy] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* A line-art mark instead of an emoji glyph. */
.tac-collection .tac-state-mark[b-ckw5rajrvy] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-collection .tac-errorpanel .tac-state-mark[b-ckw5rajrvy] {
    stroke: var(--tac-crit);
    opacity: 0.8;
}

.tac-collection .tac-errorpanel .tac-state-eyebrow[b-ckw5rajrvy] {
    color: var(--tac-crit);
}

.tac-collection .tac-spinner[b-ckw5rajrvy] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-ckw5rajrvy 0.9s linear infinite;
}

.tac-collection .tac-spinner-sm[b-ckw5rajrvy] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.tac-collection .tac-inlinestate[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 4px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

@keyframes tac-spin-b-ckw5rajrvy {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------- member table */

/* responsive.css has no rule for .table-container, so overflow-x lives here at
   EVERY width — that is what keeps six columns from pushing the document sideways
   on a 375px phone. */
.tac-collection .tac-tablewrap[b-ckw5rajrvy] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0 -20px -20px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-collection .tac-table[b-ckw5rajrvy] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-collection .tac-table .tac-th[b-ckw5rajrvy] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-collection .tac-table .tac-th-actions[b-ckw5rajrvy] {
    text-align: end;
}

.tac-collection .tac-table .tac-row > td[b-ckw5rajrvy] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-collection .tac-table .tac-row:last-child > td[b-ckw5rajrvy] {
    border-bottom: 0;
}

.tac-collection .tac-table .tac-row[b-ckw5rajrvy] {
    background: none;
    transition: background 0.12s ease;
}

.tac-collection .tac-table .tac-row:hover > td[b-ckw5rajrvy] {
    background: rgba(3, 105, 161, 0.05);
}

/* An offline device is dimmed, not painted red — the crit colour is reserved for
   the status dot so that stays the only thing that pulls the eye. */
.tac-collection .tac-table .tac-row-offline > td[b-ckw5rajrvy] {
    color: var(--tac-ink2);
}

.tac-collection .tac-table .tac-cell-actions[b-ckw5rajrvy] {
    text-align: end;
    white-space: nowrap;
}

.tac-collection .tac-identity[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tac-collection .tac-os-mark[b-ckw5rajrvy] {
    flex: none;
    display: flex;
    align-items: center;
}

.tac-collection .tac-hostname[b-ckw5rajrvy] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-collection .tac-row-offline .tac-hostname[b-ckw5rajrvy] {
    color: var(--tac-ink2);
}

/* ------------------------------------------------------------ status dot+label */

/* The tactical status convention: a semantic dot next to an uppercase mono label.
   site.css draws .status as a rounded pill, so the pill is unwound here. */
.tac-collection .tac-status[b-ckw5rajrvy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge renders inside a table data cell, where the
       surrounding text is 12-13px. --tac-label-size is the 16px CARD-LABEL role;
       wearing it here made the badge tower over the row it belongs to. Same defect
       fixed on AuditLog - the redesign cloned one badge block onto every page and
       the wrong token came with it. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-collection .tac-status-online[b-ckw5rajrvy] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-collection .tac-status-online .tac-dot[b-ckw5rajrvy] { background: var(--tac-ok); }

.tac-collection .tac-status-offline[b-ckw5rajrvy] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-collection .tac-status-offline .tac-dot[b-ckw5rajrvy] { background: var(--tac-ink3); }

.tac-collection .tac-status-failed[b-ckw5rajrvy] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-collection .tac-status-failed .tac-dot[b-ckw5rajrvy] { background: var(--tac-crit); }

.tac-collection .tac-status-pending[b-ckw5rajrvy] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-collection .tac-status-pending .tac-dot[b-ckw5rajrvy] { background: var(--tac-warn); }

/* --------------------------------------------------------------------- modal */

/* The dialog keeps .modal-overlay > .modal and the header/body/footer chain —
   CollectionsPageTests drives delete/cancel through exactly those selectors. */
.tac-collection .tac-modal-overlay[b-ckw5rajrvy] {
    backdrop-filter: none;
}

.tac-collection .tac-modal-overlay .tac-modal[b-ckw5rajrvy] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-collection .tac-modal-overlay .tac-modal[b-ckw5rajrvy]::before,
.tac-collection .tac-modal-overlay .tac-modal[b-ckw5rajrvy]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-collection .tac-modal-overlay .tac-modal[b-ckw5rajrvy]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-collection .tac-modal-overlay .tac-modal[b-ckw5rajrvy]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-collection .tac-modal-head[b-ckw5rajrvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-collection .tac-modal-title[b-ckw5rajrvy] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-collection .tac-modal-close[b-ckw5rajrvy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-size: var(--tac-fs-lg);
    line-height: 1;
    cursor: pointer;
}

.tac-collection .tac-modal-close:hover[b-ckw5rajrvy] {
    border-color: var(--tac-line2);
    color: var(--tac-crit);
}

.tac-collection .tac-modal-close:focus-visible[b-ckw5rajrvy] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-collection .tac-modal-body[b-ckw5rajrvy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    text-align: center;
    background: none;
}

.tac-collection .tac-confirm-mark[b-ckw5rajrvy] {
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 0;
}

.tac-collection .tac-confirm-mark svg[b-ckw5rajrvy] {
    width: 42px;
    height: 42px;
    stroke: var(--tac-crit);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-collection .tac-confirm-lead[b-ckw5rajrvy] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-collection .tac-confirm-body[b-ckw5rajrvy] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.tac-collection .tac-warnbox[b-ckw5rajrvy] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.55;
    text-align: start;
}

.tac-collection .tac-modal-foot[b-ckw5rajrvy] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
    .tac-collection .tac-pagetitle[b-ckw5rajrvy] {
        font-size: 21px;
    }
}

@media (max-width: 767px) {
    .tac-collection[b-ckw5rajrvy] {
        gap: 12px;
    }

    .tac-collection .tac-panel[b-ckw5rajrvy] {
        padding: 14px 14px 16px;
    }

    .tac-collection .tac-toolbar[b-ckw5rajrvy] {
        margin: -14px -14px 0;
        padding: 10px 12px;
    }

    .tac-collection .tac-tablewrap[b-ckw5rajrvy] {
        margin: 0 -14px -16px;
    }

    .tac-collection .tac-detailhead[b-ckw5rajrvy] {
        align-items: flex-start;
    }

    /* The action cluster stacks under the title rather than squeezing beside it —
       three uppercase buttons will not fit a 375px row. */
    .tac-collection .tac-detailhead-actions[b-ckw5rajrvy] {
        width: 100%;
    }

    .tac-collection .tac-detailhead-actions .tac-btn[b-ckw5rajrvy] {
        flex: 1 1 auto;
    }

    .tac-collection .tac-typemark[b-ckw5rajrvy] {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .tac-collection .tac-pagetitle[b-ckw5rajrvy] {
        font-size: 19px;
    }

    .tac-collection .tac-filtercard[b-ckw5rajrvy] {
        gap: 8px 12px;
    }
}

/* Honour reduced-motion: the only animations here are the spinners and hover
   washes, but kill them anyway so nothing moves for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-collection *[b-ckw5rajrvy],
    .tac-collection *[b-ckw5rajrvy]::before,
    .tac-collection *[b-ckw5rajrvy]::after {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/CollectionEdit.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops collection editor — Pages/CollectionEdit.razor.

   No artboard exists for this screen in Mock/tactical-ops/, so every value below
   is taken from the shipped reference implementations (Login.razor.css,
   Dashboard.razor.css, Agents.razor.css, DeployPackage.razor.css) rather than
   invented. Consistency with what already ships beats novelty here.

   Scoped to CollectionEdit.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   ── TWO RULES THIS SHEET MUST NOT BREAK ───────────────────────────────────────

   1. NOTHING here may name a bare shared selector. .content-card, .card-title,
      .form-group, .form-control, .form-input, .form-textarea, .btn/.btn-primary/
      .btn-secondary, .modal/.modal-overlay, .status, .table and friends are
      shared with 15-41 other screens and their rules stay in site.css as dead
      weight for the final sweep. Every element therefore carries a NEW .tac-*
      twin, and every selector below hangs off one. The legacy classes stay on
      the markup because the Playwright collections suite and responsive.css's
      phone rules select on them (see the comment block at the top of the
      .razor).

      Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css,
      and Blazor rewrites every selector with this component's [b-*] attribute —
      so a single .tac-* class here outranks a single legacy class there.

   2. This page has NO child components (no EditForm, no ActionButton, no
      AgentSelector): the form controls, the filter cards, the agent picker and
      the field browser are all plain markup owned by CollectionEdit.razor, so
      every element carries this component's scope attribute and no ::deep is
      needed anywhere in this sheet.
   ============================================================================ */

.tac-cedit[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The editor must never be the reason the document scrolls sideways. */
    min-width: 0;
    max-width: 1200px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-cedit .tac-num[b-1pgwkmsp6q] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-cedit .tac-lbl[b-1pgwkmsp6q],
.tac-cedit .tac-eyebrow[b-1pgwkmsp6q] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-cedit .tac-eyebrow[b-1pgwkmsp6q] {
    color: var(--tac-acc);
}

.tac-cedit .tac-dot[b-1pgwkmsp6q] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

.tac-cedit .tac-dot.info[b-1pgwkmsp6q] { background: var(--tac-acc); }
.tac-cedit .tac-dot.off[b-1pgwkmsp6q] { background: var(--tac-ink3); }

.tac-cedit .tac-note[b-1pgwkmsp6q] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* Field examples are literal machine strings ("ex: SERVER01"), so they keep the
   mono face but lose the uppercase tracking of a label. */
.tac-cedit .tac-mono-note[b-1pgwkmsp6q] {
    letter-spacing: 0;
    color: var(--tac-ink2);
}

/* ----------------------------------------------------------------- crumb rail */

.tac-breadcrumb[b-1pgwkmsp6q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-width: 0;
}

.tac-breadcrumb a[b-1pgwkmsp6q] {
    color: var(--tac-ink3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tac-breadcrumb a:hover[b-1pgwkmsp6q] {
    color: var(--tac-acc);
    border-bottom-color: var(--tac-acc);
}

.tac-breadcrumb a:focus-visible[b-1pgwkmsp6q] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-crumb-sep[b-1pgwkmsp6q] {
    color: var(--tac-line2);
}

.tac-crumb-current[b-1pgwkmsp6q] {
    color: var(--tac-ink0);
}

/* --------------------------------------------------------------- page header */

.tac-pagehead[b-1pgwkmsp6q] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-pagehead-text[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Collections") from
   GetPageTitle(). */
.tac-pagetitle[b-1pgwkmsp6q] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-pagesub[b-1pgwkmsp6q] {
    margin: 0;
    max-width: 62ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* The type read-out: what the old .info-banner said, in the shape the other
   tactical pages use for a state chip. Type is fixed at creation. */
.tac-typeread[b-1pgwkmsp6q] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    white-space: nowrap;
}

.tac-typebadge[b-1pgwkmsp6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    padding: 0;
    border: 1px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-s1);
    background-image: none;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--tac-acc);
}

.tac-typeread-text[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-typeread-value[b-1pgwkmsp6q] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ---------------------------------------------------------------------- grid */

/* Identity on the left, the scope read-out on the right; the filter builder /
   agent picker and the commit bar span the full width. */
.tac-grid[b-1pgwkmsp6q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: start;
    gap: 16px;
    margin: 0;
    padding: 0;
    max-width: none;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-panel-filters[b-1pgwkmsp6q],
.tac-panel-agents[b-1pgwkmsp6q],
.tac-panel-commit[b-1pgwkmsp6q] {
    grid-column: 1 / -1;
}

/* -------------------------------------------------------------------- panels */

.tac-panel[b-1pgwkmsp6q] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-panel[b-1pgwkmsp6q]::before,
.tac-panel[b-1pgwkmsp6q]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-panel[b-1pgwkmsp6q]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-1pgwkmsp6q]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-1pgwkmsp6q] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-panel-head[b-1pgwkmsp6q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 14px 18px 12px;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    border-bottom: 0;
}

.tac-panel-head-ruled[b-1pgwkmsp6q] {
    border-bottom: 1px solid var(--tac-line);
}

/* The 01..04 edit order: identity, scope, membership, commit. */
.tac-panel-index[b-1pgwkmsp6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-panel-title[b-1pgwkmsp6q] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-panel-count[b-1pgwkmsp6q] {
    margin-left: auto;
    font-size: var(--tac-fs-label);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-panel-body[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px 16px;
    min-width: 0;
}

/* ------------------------------------------------------------------- fields */

.tac-field[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-label[b-1pgwkmsp6q] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-input[b-1pgwkmsp6q],
.tac-select[b-1pgwkmsp6q],
.tac-textarea[b-1pgwkmsp6q] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-input[b-1pgwkmsp6q],
.tac-select[b-1pgwkmsp6q] {
    height: 38px;
}

.tac-textarea[b-1pgwkmsp6q] {
    padding: 10px 12px;
    min-height: 78px;
    line-height: 1.5;
    resize: vertical;
}

.tac-input[b-1pgwkmsp6q]::placeholder,
.tac-textarea[b-1pgwkmsp6q]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

.tac-input:hover[b-1pgwkmsp6q],
.tac-select:hover[b-1pgwkmsp6q],
.tac-textarea:hover[b-1pgwkmsp6q] {
    background: var(--tac-s1);
}

.tac-input:focus[b-1pgwkmsp6q],
.tac-select:focus[b-1pgwkmsp6q],
.tac-textarea:focus[b-1pgwkmsp6q] {
    outline: none;
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    /* site.css puts a 3px blue glow on any focused control; here it reads as a
       second border inside the field frame. The frame itself is the affordance. */
    box-shadow: none;
}

.tac-input:focus-visible[b-1pgwkmsp6q],
.tac-select:focus-visible[b-1pgwkmsp6q],
.tac-textarea:focus-visible[b-1pgwkmsp6q] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-input-invalid[b-1pgwkmsp6q] {
    border-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.05);
}

.tac-field-error[b-1pgwkmsp6q] {
    display: block;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-crit);
}

/* The description counter sits hard right under the textarea. */
.tac-counter[b-1pgwkmsp6q] {
    align-self: flex-end;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- scope read-out */

.tac-summary[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    min-width: 0;
}

.tac-summary-row[b-1pgwkmsp6q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-summary-row:last-child[b-1pgwkmsp6q] {
    border-bottom: 0;
}

.tac-summary-value[b-1pgwkmsp6q] {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tac-summary-value.tac-num[b-1pgwkmsp6q] {
    font-weight: 500;
}

/* --------------------------------------------------------------- logic modes */

.tac-modes[b-1pgwkmsp6q] {
    display: flex;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.tac-mode[b-1pgwkmsp6q] {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.tac-mode:hover[b-1pgwkmsp6q] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
}

.tac-mode.selected[b-1pgwkmsp6q] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

.tac-mode:focus-within[b-1pgwkmsp6q] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The radio itself stays in the DOM and keeps driving the choice (and keyboard
   focus), but the dot+label pair is the visible state, as everywhere else. */
.tac-mode-radio[b-1pgwkmsp6q] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.tac-mode .tac-dot[b-1pgwkmsp6q] {
    margin-top: 5px;
}

.tac-mode-text[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-mode-name[b-1pgwkmsp6q] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-mode.selected .tac-mode-name[b-1pgwkmsp6q] {
    color: var(--tac-ink0);
}

.tac-mode-hint[b-1pgwkmsp6q] {
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tac-ink3);
}

/* ------------------------------------------------------- sub-head + inline row */

.tac-subhead[b-1pgwkmsp6q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    padding: 0 0 2px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-subhead-count[b-1pgwkmsp6q] {
    font-size: var(--tac-fs-body);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-inline-actions[b-1pgwkmsp6q] {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* -------------------------------------------------------------- filter cards */

.tac-filters[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.tac-filter[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--tac-line);
    border-left: 2px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    min-width: 0;
}

.tac-filter-head[b-1pgwkmsp6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tac-filter-index[b-1pgwkmsp6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    flex: none;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s1);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

/* AND / OR between clauses — a read-out of the group chosen above. */
.tac-conjunction[b-1pgwkmsp6q] {
    flex: none;
    padding: 1px 8px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-filter-head .tac-btn-danger[b-1pgwkmsp6q] {
    margin-left: auto;
}

.tac-filter-body[b-1pgwkmsp6q] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 10px 12px;
    min-width: 0;
}

/* ------------------------------------------------------------- agent picker */

.tac-agentpicker[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.tac-agentlist[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 340px;
    overflow-y: auto;
    /* A long roster scrolls inside its own frame; the page never scrolls sideways. */
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-line);
    min-width: 0;
}

.tac-agentrow[b-1pgwkmsp6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: none;
    cursor: pointer;
    min-width: 0;
    transition: background 0.15s ease;
}

.tac-agentrow:hover[b-1pgwkmsp6q] {
    background: var(--tac-s2);
}

.tac-agentrow.selected[b-1pgwkmsp6q] {
    background: var(--tac-acc-dim);
    box-shadow: inset 2px 0 0 var(--tac-acc);
}

.tac-agentrow:focus-within[b-1pgwkmsp6q] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-agentrow input[type="checkbox"][b-1pgwkmsp6q] {
    width: 14px;
    height: 14px;
    flex: none;
    margin: 0;
    accent-color: var(--tac-acc);
    cursor: pointer;
}

.tac-agentrow-info[b-1pgwkmsp6q] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px;
    min-width: 0;
}

.tac-agent-name[b-1pgwkmsp6q] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tac-agent-meta[b-1pgwkmsp6q] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
    min-width: 0;
}

.tac-agent-status[b-1pgwkmsp6q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tac-agent-status-online[b-1pgwkmsp6q] { color: var(--tac-ok); }
.tac-agent-status-online .tac-dot[b-1pgwkmsp6q] { background: var(--tac-ok); }

.tac-agent-status-offline[b-1pgwkmsp6q] { color: var(--tac-ink3); }
.tac-agent-status-offline .tac-dot[b-1pgwkmsp6q] { background: var(--tac-ink3); }

.tac-agent-status-pending[b-1pgwkmsp6q] { color: var(--tac-warn); }
.tac-agent-status-pending .tac-dot[b-1pgwkmsp6q] { background: var(--tac-warn); }

.tac-agent-status-busy[b-1pgwkmsp6q] { color: var(--tac-acc); }
.tac-agent-status-busy .tac-dot[b-1pgwkmsp6q] { background: var(--tac-acc); }

.tac-agent-status-error[b-1pgwkmsp6q],
.tac-agent-status-revoked[b-1pgwkmsp6q] { color: var(--tac-crit); }
.tac-agent-status-error .tac-dot[b-1pgwkmsp6q],
.tac-agent-status-revoked .tac-dot[b-1pgwkmsp6q] { background: var(--tac-crit); }

/* ------------------------------------------------------------------- banners */

.tac-banner[b-1pgwkmsp6q] {
    display: block;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid;
    border-radius: 0;
    background: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: left;
}

.tac-banner strong[b-1pgwkmsp6q] {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-banner-error[b-1pgwkmsp6q] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-banner-ok[b-1pgwkmsp6q] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

/* ------------------------------------------------------------------- actions */

.tac-actions[b-1pgwkmsp6q] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.tac-btn[b-1pgwkmsp6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    background-image: none;
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-btn:hover:not(:disabled)[b-1pgwkmsp6q] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-btn:focus-visible[b-1pgwkmsp6q] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-btn:disabled[b-1pgwkmsp6q] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-btn-sm[b-1pgwkmsp6q] {
    height: 30px;
    padding: 0 10px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
}

.tac-btn-primary[b-1pgwkmsp6q] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-btn-primary:hover:not(:disabled)[b-1pgwkmsp6q] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

/* "Add filter" is the constructive action in the builder — accent outline, not a
   green pill. */
.tac-btn-accent[b-1pgwkmsp6q] {
    border-color: var(--tac-acc);
    color: var(--tac-acc);
}

.tac-btn-accent:hover:not(:disabled)[b-1pgwkmsp6q] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-btn-danger[b-1pgwkmsp6q] {
    border-color: rgba(220, 38, 38, 0.45);
    color: var(--tac-crit);
}

.tac-btn-danger:hover:not(:disabled)[b-1pgwkmsp6q] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-btn-icon[b-1pgwkmsp6q] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-btn-sm .tac-btn-icon[b-1pgwkmsp6q] {
    width: 12px;
    height: 12px;
}

.tac-btn-spinner[b-1pgwkmsp6q] {
    width: 13px;
    height: 13px;
    flex: none;
    margin: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: tac-spin-b-1pgwkmsp6q 0.9s linear infinite;
}

/* --------------------------------------------------- loading / empty states */

.tac-state[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-inline-state[b-1pgwkmsp6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 0;
}

.tac-spinner[b-1pgwkmsp6q],
.tac-spinner-sm[b-1pgwkmsp6q] {
    margin: 0;
    border: 2px solid var(--tac-line);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-1pgwkmsp6q 0.9s linear infinite;
}

.tac-spinner[b-1pgwkmsp6q] {
    width: 28px;
    height: 28px;
}

.tac-spinner-sm[b-1pgwkmsp6q] {
    width: 15px;
    height: 15px;
    flex: none;
}

.tac-state-text[b-1pgwkmsp6q] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-empty[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 36px 20px;
    border: 1px dashed var(--tac-line2);
    border-radius: 0;
    background: none;
    text-align: center;
}

.tac-empty-icon[b-1pgwkmsp6q] {
    width: 30px;
    height: 30px;
    stroke: var(--tac-line2);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-empty-title[b-1pgwkmsp6q] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-empty-text[b-1pgwkmsp6q] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-panel-error .tac-empty[b-1pgwkmsp6q] {
    border: 0;
    padding: 40px 20px 44px;
}

/* ------------------------------------------------------- field browser modal */

.tac-modal-overlay[b-1pgwkmsp6q] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-1pgwkmsp6q] {
    position: relative;
    max-width: 760px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal[b-1pgwkmsp6q]::before,
.tac-modal-overlay .tac-modal[b-1pgwkmsp6q]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-1pgwkmsp6q]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-1pgwkmsp6q]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-head[b-1pgwkmsp6q] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-title[b-1pgwkmsp6q] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-label);
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-close[b-1pgwkmsp6q] {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    line-height: 1;
    cursor: pointer;
}

.tac-modal-close:hover[b-1pgwkmsp6q] {
    border-color: var(--tac-line2);
    color: var(--tac-ink0);
}

.tac-modal-close:focus-visible[b-1pgwkmsp6q] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-modal-body[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px 16px;
    min-width: 0;
}

.tac-modal-search[b-1pgwkmsp6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    min-width: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-modal-search:focus-within[b-1pgwkmsp6q] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-search-icon[b-1pgwkmsp6q] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-modal-search:focus-within .tac-search-icon[b-1pgwkmsp6q] {
    stroke: var(--tac-acc);
}

.tac-search-input[b-1pgwkmsp6q] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
}

.tac-search-input[b-1pgwkmsp6q]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

.tac-fieldlist[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 52vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    min-width: 0;
}

.tac-fieldlist-empty[b-1pgwkmsp6q] {
    padding: 24px 0;
    text-align: center;
}

.tac-fieldcat[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tac-fieldcat-title[b-1pgwkmsp6q] {
    margin: 0 0 5px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-fielditem[b-1pgwkmsp6q] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tac-fielditem:hover[b-1pgwkmsp6q] {
    background: var(--tac-s2);
    border-color: var(--tac-line2);
}

.tac-fielditem:focus-visible[b-1pgwkmsp6q] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-fielditem-info[b-1pgwkmsp6q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tac-fielditem-name[b-1pgwkmsp6q] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    letter-spacing: 0.03em;
    color: var(--tac-ink0);
}

.tac-fielditem-path[b-1pgwkmsp6q] {
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-acc);
    overflow-wrap: anywhere;
}

.tac-fielditem-desc[b-1pgwkmsp6q] {
    font-size: var(--tac-fs-micro);
    line-height: 1.45;
    color: var(--tac-ink2);
}

/* FilterFieldType is a wire enum, so it reads as a machine token. */
.tac-typechip[b-1pgwkmsp6q] {
    flex: none;
    margin-top: 2px;
    padding: 1px 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    background-image: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-modal-foot[b-1pgwkmsp6q] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

@keyframes tac-spin-b-1pgwkmsp6q {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------- responsive */

/* The two-up grid has to collapse before the shell's own tablet breakpoint,
   otherwise the identity panel plus the read-out plus the sidebar overflow. */
@media (max-width: 1023px) {
    .tac-grid[b-1pgwkmsp6q] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-pagetitle[b-1pgwkmsp6q] {
        font-size: 20px;
    }

    .tac-typeread[b-1pgwkmsp6q] {
        margin-left: 0;
    }

    .tac-filter-body[b-1pgwkmsp6q] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .tac-cedit[b-1pgwkmsp6q] {
        gap: 12px;
    }

    .tac-panel-head[b-1pgwkmsp6q],
    .tac-panel-body[b-1pgwkmsp6q] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-filter-body[b-1pgwkmsp6q] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-modes[b-1pgwkmsp6q] {
        flex-wrap: wrap;
    }

    .tac-mode[b-1pgwkmsp6q] {
        flex: 1 1 100%;
    }

    .tac-inline-actions[b-1pgwkmsp6q] {
        margin-left: 0;
        width: 100%;
    }

    .tac-inline-actions .tac-btn[b-1pgwkmsp6q] {
        flex: 1 1 auto;
    }

    .tac-actions .tac-btn[b-1pgwkmsp6q] {
        flex: 1 1 auto;
    }

    .tac-summary-row[b-1pgwkmsp6q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .tac-summary-value[b-1pgwkmsp6q] {
        text-align: left;
    }

    .tac-agentrow-info[b-1pgwkmsp6q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .tac-modal-head[b-1pgwkmsp6q],
    .tac-modal-body[b-1pgwkmsp6q],
    .tac-modal-foot[b-1pgwkmsp6q] {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Honour reduced-motion: kill the hover washes and stop the spinners from
   animating for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-cedit *[b-1pgwkmsp6q] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/Collections.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Collections roster.

   There is no Mock/tactical-ops artboard for this screen, so the look is DERIVED
   from the shipped conversions (Login, Dashboard, Agents). Consistency with them
   is the contract; the vocabulary below is deliberately the SAME vocabulary
   Agents.razor.css uses — panel + scan line + bracket ticks, mono chips, mono
   table, dot+label badges, flat square buttons.

   Scoped to Collections.razor. The design tokens (--tac-*) are NOT declared here —
   they live on :root in wwwroot/css/tactical-tokens.css, linked first in _Host, so
   every tactical-ops page shares one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with up to
   41 other screens (.stats-bar, .stat-item, .content-card, .card-header,
   .card-title, .data-table, .type-label, .member-count, .pagination, .modal ...).
   Blazor scoping alone would keep a bare `.card-title { }` rule from leaking, but
   it would still fight site.css on THIS page in ways that are invisible from the
   other 40. So the markup carries a NEW .tac-* class next to every legacy one, and
   every selector below hangs off a .tac-* name. The legacy classes stay on the
   elements untouched because CollectionsPageTests (Playwright) and site.css both
   select on them (see the comment block at the top of Collections.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so an
   equal-specificity .tac-* rule wins on source order. Where site.css is more
   specific the rule below is written long enough to outrank it.

   SearchBar and ActionButton are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does.
   ============================================================================ */

.tac-collections[b-n7h95r209t] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The roster must never be the reason the document scrolls sideways —
       the responsive breakpoint suites assert zero page overflow. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-collections .tac-panel[b-n7h95r209t] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-collections .tac-panel[b-n7h95r209t]::before,
.tac-collections .tac-panel[b-n7h95r209t]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-collections .tac-panel[b-n7h95r209t]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-collections .tac-panel[b-n7h95r209t]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-collections .tac-scan[b-n7h95r209t] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

/* Every count, id and timestamp on this page is mono and tabular so columns of
   digits line up vertically. */
.tac-collections .tac-num[b-n7h95r209t] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-collections .tac-dot[b-n7h95r209t] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

/* Flat, square, uppercase — the same button the login panel and the agent modals
   use. Only ever applied through a .tac-btn class the markup opts into. */
.tac-collections .tac-btn[b-n7h95r209t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-collections .tac-btn:hover:not(:disabled)[b-n7h95r209t] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-collections .tac-btn.tac-btn-primary[b-n7h95r209t] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-collections .tac-btn.tac-btn-primary:hover:not(:disabled)[b-n7h95r209t] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-collections .tac-btn:focus-visible[b-n7h95r209t] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ---------------------------------------------------------- KPI card stat bar */

/* ONE card treatment for the whole app.

   This is the Dashboard's KPI tile (Pages/Dashboard.razor.css - the reference, and
   NOT edited by this change) lifted across: the same 1px hairline on --tac-s1, the
   same 9px bracket ticks, the same head / figure / foot rhythm, and the same
   ok | warn | crit | info | off dot vocabulary. The compact chip bar that used to
   live here is gone; the app no longer has two card treatments.

   What the Dashboard rail does NOT have - because its tiles are passive read-outs -
   is a pressed state. These cards ARE the page's filter, so the affordance is
   carried over from the chip bar they replace: a left accent border plus an inset
   ring on .selected, an accent hairline and surface wash on hover, and
   role="button" + tabindex="0" in the markup so a card is reachable and operable
   from the keyboard. A card that looks passive but filters on click would be worse
   than the chip it replaced.

   EVERY font-size below comes from a token in wwwroot/css/tactical-tokens.css
   (--tac-label-size / --tac-label-size-sm / --tac-stat-value-size). Nine pages each
   deciding for themselves what a stat count is worth - 18px on /credentials, 14px on
   /agents - is exactly what this block exists to end.

   Nothing here restyles a bare shared selector: the stat-item / stat-icon /
   stat-content / stat-label / stats-bar names stay on the markup as the Playwright and
   bUnit hooks they are, and are only ever reached THROUGH a .tac-* class.

   The .tac-chip* names stay on the markup too, and nothing styles them any more: nine
   bUnit suites select .tac-chipbar / .tac-chip / .tac-chip-count / .tac-chip-label /
   .tac-chip-readout, so after the conversion they are selector hooks exactly like the
   site.css names beside them. */

.tac-collections .tac-kpibar[b-n7h95r209t] {
    display: grid;
    /* min() so a track can never be wider than the bar itself. A bare 190px minimum
       pushes the DOCUMENT sideways at 375px, and AssertNoPageOverflow runs there. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-collections .tac-kpi[b-n7h95r209t] {
    position: relative;
    /* LOAD-BEARING. shell.css:489 declares a bare stat-content as flex-direction:column,
       and site.css:368 makes a bare stat-item a centred flex ROW. A container that
       sets display:flex without saying which way it runs inherits whichever of those
       reaches it and stacks - or in-lines - its children by accident; that is the bug
       that put the dot on top of the Agents chip. Every flex container in this block
       states its direction explicitly. */
    /* TWO LINES, number on the right:
           row 1  label + dot ............ figure
           row 2  caption (spans both columns)
       A grid rather than the old three stacked rows, so the figure can sit beside
       the label instead of under it and the card loses a line without losing data. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head figure"
        "foot foot";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Bracket ticks - the signature of the tactical-ops panel, the same 9px corner pair
   the Dashboard tile draws. */
.tac-collections .tac-kpi[b-n7h95r209t]::before,
.tac-collections .tac-kpi[b-n7h95r209t]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-collections .tac-kpi[b-n7h95r209t]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-collections .tac-kpi[b-n7h95r209t]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

/* The filter states the Dashboard tile has no need for. */

.tac-collections .tac-kpi-filter[b-n7h95r209t] {
    cursor: pointer;
}

.tac-collections .tac-kpi-filter:hover[b-n7h95r209t] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    /* site.css:382 lifts a bare stat-item 2px on hover. A card bouncing under the
       pointer is noise, so the surface wash IS the hover. */
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-collections .tac-kpi-filter:focus-visible[b-n7h95r209t] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The pressed state. Declared AFTER :hover on purpose - same specificity, so the
   later rule wins and a selected card keeps reading as selected under the pointer.
   padding-left gives back the 2px the border takes, so the label does not shift when
   a card is picked. */
.tac-collections .tac-kpi.selected[b-n7h95r209t] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    border-left: 3px solid var(--tac-acc);
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

/* A read-out is not a filter and must not look like one. */
.tac-collections .tac-kpi-readout[b-n7h95r209t] {
    cursor: default;
}

/* Head / figure / foot. */

.tac-collections .tac-kpi .tac-kpi-head[b-n7h95r209t] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    /* site.css:444 gives a bare stat-content flex:1; inside a column card that would
       make the head eat the space the figure and foot need. */
    flex: none;
}

.tac-collections .tac-kpi .tac-lbl[b-n7h95r209t] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    /* 0.14em is the mock's tracking; at 16px it widens a label like
       "MAINTENANCE MODE" far enough to force a second grid row on a laptop. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-collections .tac-kpi.selected .tac-lbl[b-n7h95r209t] {
    color: var(--tac-ink);
}

.tac-collections .tac-kpi .tac-kpi-head .tac-dot[b-n7h95r209t] {
    margin-left: auto;
    /* Never let a stray align-items:stretch pull the dot off the head's centre
       line - that is what read as "the dot is stuck on the top of the card". */
    align-self: center;
}

.tac-collections .tac-kpi .tac-kpi-figure[b-n7h95r209t] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The count. site.css:392 paints a bare stat-icon as a 48-60px gradient circle; here
   it is a number, so the whole badge treatment is unwound. Four classes deep so it
   outranks the two-class site.css:6289 rule that paints the maintenance counter. */
.tac-collections .tac-kpibar .tac-kpi .tac-kpi-value[b-n7h95r209t] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-stat-value-size);
    font-weight: 600;
    line-height: 1;
}

.tac-collections .tac-kpi .tac-kpi-foot[b-n7h95r209t] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The dot vocabulary, verbatim from the Dashboard rail. */
.tac-collections .tac-kpi .tac-dot.ok[b-n7h95r209t] { background: var(--tac-ok); }
.tac-collections .tac-kpi .tac-dot.warn[b-n7h95r209t] { background: var(--tac-warn); }
.tac-collections .tac-kpi .tac-dot.crit[b-n7h95r209t] { background: var(--tac-crit); }
.tac-collections .tac-kpi .tac-dot.info[b-n7h95r209t] { background: var(--tac-acc); }
.tac-collections .tac-kpi .tac-dot.off[b-n7h95r209t] { background: var(--tac-ink3); }

/* ------------------------------------------------------------------- container */

.tac-collections .tac-roster[b-n7h95r209t] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-collections .tac-toolbar[b-n7h95r209t] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-collections .tac-toolbar-title[b-n7h95r209t] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-collections .tac-toolbar-count[b-n7h95r209t] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-collections .tac-toolbar-controls[b-n7h95r209t] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-collections .tac-toolbar-actions[b-n7h95r209t] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* SearchBar is a child component. */
.tac-collections[b-n7h95r209t]  .search-bar {
    height: 34px;
    width: 300px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-collections[b-n7h95r209t]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-collections[b-n7h95r209t]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-collections[b-n7h95r209t]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-collections[b-n7h95r209t]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-collections[b-n7h95r209t]  .search-bar .clear-search,
.tac-collections[b-n7h95r209t]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* ---------------------------------------------------------- loading / empty state */

.tac-collections .tac-state[b-n7h95r209t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-collections .tac-state h3[b-n7h95r209t] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-collections .tac-state p[b-n7h95r209t] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-collections .tac-state .tac-state-eyebrow[b-n7h95r209t] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Line-art marks instead of the 📁 / ⚠ glyphs — an emoji renders in whatever face
   the OS ships and cannot be made to sit in this palette. */
.tac-collections .tac-state-mark[b-n7h95r209t] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-collections .tac-state-mark.tac-state-mark-alert[b-n7h95r209t] {
    stroke: var(--tac-crit);
    opacity: 0.85;
}

.tac-collections .tac-spinner[b-n7h95r209t] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-n7h95r209t 0.9s linear infinite;
}

@keyframes tac-spin-b-n7h95r209t {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* overflow-x here at EVERY width is the belt-and-braces that keeps a six-column
   roster from pushing the document sideways. */
.tac-collections .tac-tablewrap[b-n7h95r209t] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-collections .tac-table[b-n7h95r209t] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-collections .tac-table .tac-th[b-n7h95r209t] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-collections .tac-table .tac-th-num[b-n7h95r209t] {
    text-align: end;
}

.tac-collections .tac-table .tac-th-actions[b-n7h95r209t] {
    text-align: end;
}

.tac-collections .tac-table .tac-row > td[b-n7h95r209t] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-collections .tac-table .tac-row:last-child > td[b-n7h95r209t] {
    border-bottom: 0;
}

.tac-collections .tac-table .tac-row[b-n7h95r209t] {
    cursor: pointer;
    background: none;
    transition: background 0.12s ease;
}

.tac-collections .tac-table .tac-row:hover > td[b-n7h95r209t] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-collections .tac-table .tac-cell-num[b-n7h95r209t] {
    text-align: end;
}

.tac-collections .tac-table .tac-cell-actions[b-n7h95r209t] {
    text-align: end;
    white-space: nowrap;
}

/* ------------------------------------------------------------- name cell + mark */

.tac-collections .tac-identity[b-n7h95r209t] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tac-collections .tac-name[b-n7h95r209t] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* The D / S / C letter mark. site.css draws .collection-type-badge as a coloured
   circle; here it is a square mono tile with a hairline frame, which is the same
   move the agent roster makes on its OS marks. The polarity modifier
   (.compliance-compliant) is preserved by COLOUR only — the glyph is shared. */
.tac-collections .tac-table .tac-typemark[b-n7h95r209t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.tac-collections .tac-table .tac-typemark.dynamic[b-n7h95r209t] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.45);
    background: var(--tac-acc-dim);
}

.tac-collections .tac-table .tac-typemark.static[b-n7h95r209t] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-collections .tac-table .tac-typemark.compliance[b-n7h95r209t] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.45);
    background: rgba(180, 83, 9, 0.07);
}

.tac-collections .tac-table .tac-typemark.compliance.compliance-compliant[b-n7h95r209t] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.45);
    background: rgba(21, 128, 61, 0.07);
}

/* ------------------------------------------------------------------ type column */

/* The dot+label convention, borrowed from the agent roster's status badges: a
   semantic dot next to an uppercase mono label. site.css draws .type-label as a
   rounded pill, so the pill is unwound here. */
.tac-collections .tac-table .tac-typelabel[b-n7h95r209t] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge renders inside a table data cell, where the
       surrounding text is 12-13px. --tac-label-size is the 16px CARD-LABEL role;
       wearing it here made the badge tower over the row it belongs to. Same defect
       fixed on AuditLog - the redesign cloned one badge block onto every page and
       the wrong token came with it. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-collections .tac-table .tac-typelabel-dynamic[b-n7h95r209t] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-collections .tac-table .tac-typelabel-dynamic .tac-dot[b-n7h95r209t] { background: var(--tac-acc); }

.tac-collections .tac-table .tac-typelabel-static .tac-dot[b-n7h95r209t] { background: var(--tac-ink2); }

.tac-collections .tac-table .tac-typelabel-compliance[b-n7h95r209t] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-collections .tac-table .tac-typelabel-compliance .tac-dot[b-n7h95r209t] { background: var(--tac-warn); }

/* -------------------------------------------------------------- member + dates */

.tac-collections .tac-table .member-count.tac-num[b-n7h95r209t] {
    display: inline-block;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
}

.tac-collections .tac-table .tac-desc[b-n7h95r209t] {
    display: inline-block;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-micro);
}

.tac-collections .tac-table .date-cell.tac-num[b-n7h95r209t] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* --------------------------------------------------------- system-managed marker */

/* Not a button: a Compliance companion is owned by its baseline assignment, and
   this states WHY the edit/delete actions are missing on that row. */
.tac-collections .tac-managed[b-n7h95r209t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px dashed var(--tac-line2);
    background: var(--tac-s2);
    cursor: help;
}

.tac-collections .tac-managed-mark[b-n7h95r209t] {
    width: 14px;
    height: 14px;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -------------------------------------------------------------- row action btns */

.tac-collections .tac-actions[b-n7h95r209t] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of four actions reads as one instrument cluster rather
   than four competing pills. Hover restores the semantic colour. */
.tac-collections[b-n7h95r209t]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-collections[b-n7h95r209t]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-collections[b-n7h95r209t]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-collections[b-n7h95r209t]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-collections[b-n7h95r209t]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ----------------------------------------------------------------- pagination */

.tac-collections .tac-pagination[b-n7h95r209t] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-collections .tac-pagination .tac-page-info[b-n7h95r209t] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-collections .tac-pagination .tac-page-controls[b-n7h95r209t] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-collections .tac-pagination .tac-page-btn[b-n7h95r209t] {
    min-width: 30px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-collections .tac-pagination .tac-page-btn:hover:not(:disabled)[b-n7h95r209t] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-collections .tac-pagination .tac-page-btn:disabled[b-n7h95r209t] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-collections .tac-pagination .tac-page-btn:focus-visible[b-n7h95r209t] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------- modal */

/* The modal keeps .modal-overlay > .modal and the header/body/footer chain —
   CollectionsPageTests drives the delete dialog through exactly those selectors. */
.tac-modal-overlay[b-n7h95r209t] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-n7h95r209t] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal[b-n7h95r209t]::before,
.tac-modal-overlay .tac-modal[b-n7h95r209t]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-n7h95r209t]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-n7h95r209t]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-n7h95r209t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h2[b-n7h95r209t] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-close[b-n7h95r209t] {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
}

.tac-modal-overlay .tac-close:hover[b-n7h95r209t] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-close:focus-visible[b-n7h95r209t] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-modal-overlay .tac-modal-body[b-n7h95r209t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    text-align: center;
    background: none;
}

.tac-modal-overlay .tac-confirm-mark[b-n7h95r209t] {
    width: 42px;
    height: 42px;
    stroke: var(--tac-crit);
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    /* site.css sizes .confirm-icon as a text glyph; it is an <svg> now. */
    font-size: 0;
    line-height: 0;
}

.tac-modal-overlay .tac-modal-body h3[b-n7h95r209t] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-body p[b-n7h95r209t] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-modal-overlay .tac-warnbox[b-n7h95r209t] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-align: start;
}

.tac-modal-overlay .tac-modal-foot[b-n7h95r209t] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* Modal buttons: flat, uppercase, square. */
.tac-modal-overlay .tac-modal-foot .btn[b-n7h95r209t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-n7h95r209t] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-n7h95r209t] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-n7h95r209t] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-n7h95r209t] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-n7h95r209t] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------- responsive */

/* Tablet: the toolbar stops trying to fit on one line. */
@media (max-width: 1023px) {
    .tac-collections .tac-toolbar-controls[b-n7h95r209t] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-collections[b-n7h95r209t]  .search-bar {
        flex: 1 1 220px;
        width: auto;
    }

    .tac-collections .tac-toolbar-actions[b-n7h95r209t] {
        margin-inline-start: auto;
    }
}

/* Phone: six columns cannot honestly fit, and responsive.css builds its card
   layout only for .agents-table / .audit-table / .scheduler-table — not for
   .data-table. So this page restacks its OWN rows as labelled cards, from the
   data-label attribute every <td> carries. */
@media (max-width: 767px) {
    .tac-collections[b-n7h95r209t] {
        gap: 12px;
    }

    .tac-collections .tac-kpibar[b-n7h95r209t] {
        /* Two cards per row at phone. minmax(0, 1fr) cannot overflow, so a long
           label ellipsises inside its own card instead of widening the document -
           AssertNoPageOverflow runs at 375px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tac-collections .tac-kpi[b-n7h95r209t] {
        padding: 12px 14px;
    }

    .tac-collections .tac-kpi.selected[b-n7h95r209t] {
        padding-left: 12px;
    }

    .tac-collections .tac-toolbar[b-n7h95r209t] {
        padding: 12px;
        gap: 10px;
    }

    .tac-collections .tac-tablewrap[b-n7h95r209t] {
        overflow-x: hidden;
    }

    .tac-collections .tac-table[b-n7h95r209t],
    .tac-collections .tac-table tbody[b-n7h95r209t] {
        display: block;
    }

    .tac-collections .tac-table thead[b-n7h95r209t] {
        position: absolute;
        left: -9999px;
    }

    .tac-collections .tac-table .tac-row[b-n7h95r209t] {
        display: block;
        margin: 12px;
        padding: 10px 12px;
        border: 1px solid var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-collections .tac-table .tac-row > td[b-n7h95r209t] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid var(--tac-line);
        text-align: start;
    }

    .tac-collections .tac-table .tac-row > td:last-child[b-n7h95r209t] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .tac-collections .tac-table .tac-row > td[b-n7h95r209t]::before {
        content: attr(data-label);
        flex: none;
        font-family: var(--tac-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-collections .tac-table .tac-desc[b-n7h95r209t] {
        max-width: 22ch;
    }

    .tac-collections .tac-pagination[b-n7h95r209t] {
        padding: 10px 12px;
    }

    .tac-collections .tac-pagination .tac-page-controls[b-n7h95r209t] {
        margin-inline-start: 0;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-collections *[b-n7h95r209t],
    .tac-collections[b-n7h95r209t]  *,
    .tac-modal-overlay *[b-n7h95r209t] {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- two-line card: label+figure on one row, caption beneath ---------------- */
.tac-collections .tac-kpi .tac-kpi-head[b-n7h95r209t] {
    grid-area: head;
}

.tac-collections .tac-kpi .tac-kpi-figure[b-n7h95r209t] {
    grid-area: figure;
    justify-content: flex-end;
    justify-self: end;
    align-items: baseline;
}

.tac-collections .tac-kpi .tac-kpi-foot[b-n7h95r209t] {
    grid-area: foot;
}

.tac-collections .tac-kpi .tac-kpi-value[b-n7h95r209t] {
    /* The figure is the point of the card, so it leads. It was reading SMALLER than
       its own 16px label, which inverted the hierarchy. */
    font-size: var(--tac-stat-value-size);
    line-height: 1;
}
/* _content/Athena.Server/Pages/CommandDetails.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops command record — /commands/{id}

   Scoped to CommandDetails.razor. The design tokens (--tac-*) are NOT declared
   here: they live on the document root in wwwroot/css/tactical-tokens.css,
   linked first in _Host, so every tactical-ops page shares one source of truth.

   Mock/tactical-ops/ has no artboard for this screen, so the look is DERIVED
   from the shipped references (Login / Dashboard / Agents / DeploymentHistory).
   The conversion notes and the "what was deliberately dropped" list live at the
   bottom of CommandDetails.razor.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built out of class names site.css shares with up to 41 other
   screens (breadcrumb, details-card, status, stat, btn, code-block, the modal
   chain ...). Blazor scoping alone would stop a bare rule leaking, but it would
   still fight site.css on THIS page in ways invisible from the other 40. So the
   markup carries a NEW .tac-* class next to every legacy one, and every selector
   below hangs off a .tac-* name. The legacy classes stay on the elements
   untouched — site.css and responsive.css still drive the phone collapse of the
   split panel, and the other suites select on them.

   Scoped sheets load from Athena.Server.styles.css, i.e. AFTER site.css, so an
   equal-specificity .tac-* rule wins on source order.

   ActionButton and Virtualize are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does.
   ============================================================================ */

.tac-cmd[b-uzsjsi5lrj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    /* This page must never be the reason the document scrolls sideways —
       AssertNoPageOverflow runs at phone / tablet / desktop / 1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------- shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-cmd .tac-panel[b-uzsjsi5lrj] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.tac-cmd .tac-panel[b-uzsjsi5lrj]::before,
.tac-cmd .tac-panel[b-uzsjsi5lrj]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-cmd .tac-panel[b-uzsjsi5lrj]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-cmd .tac-panel[b-uzsjsi5lrj]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-cmd .tac-scan[b-uzsjsi5lrj] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-cmd .tac-eyebrow[b-uzsjsi5lrj] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every id, count, exit code and timestamp on this page is mono and tabular so
   columns of digits line up vertically. */
.tac-cmd .tac-mono[b-uzsjsi5lrj] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-cmd .tac-dot[b-uzsjsi5lrj] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

/* --------------------------------------------------------------- breadcrumb */

.tac-cmd .tac-crumbs[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-cmd .tac-crumbs a[b-uzsjsi5lrj] {
    color: var(--tac-acc);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.tac-cmd .tac-crumbs a:hover[b-uzsjsi5lrj] {
    border-bottom-color: var(--tac-acc);
}

.tac-cmd .tac-crumbsep[b-uzsjsi5lrj] {
    color: var(--tac-line2);
}

/* -------------------------------------------------------------- page header */

.tac-cmd .tac-pagehead[b-uzsjsi5lrj] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
    min-width: 0;
}

.tac-cmd .tac-pagehead-text[b-uzsjsi5lrj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tac-cmd .tac-pagetitle[b-uzsjsi5lrj] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-xl);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-cmd .tac-pagehead-actions[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------- identity rail */

.tac-cmd .tac-idrail[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    min-width: 0;
}

.tac-cmd .tac-idchip[b-uzsjsi5lrj] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    min-width: 0;
}

.tac-cmd .tac-idlabel[b-uzsjsi5lrj] {
    flex: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-cmd .tac-idvalue[b-uzsjsi5lrj] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
    min-width: 0;
}

/* ------------------------------------------------------- dot+label statuses */

.tac-cmd .tac-status[b-uzsjsi5lrj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-cmd .tac-status-completed[b-uzsjsi5lrj] {
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
    color: var(--tac-ok);
}

.tac-cmd .tac-status-completed .tac-dot[b-uzsjsi5lrj] { background: var(--tac-ok); }

.tac-cmd .tac-status-failed[b-uzsjsi5lrj] {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
}

.tac-cmd .tac-status-failed .tac-dot[b-uzsjsi5lrj] { background: var(--tac-crit); }

.tac-cmd .tac-status-running[b-uzsjsi5lrj] {
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-cmd .tac-status-running .tac-dot[b-uzsjsi5lrj] { background: var(--tac-acc); }

.tac-cmd .tac-status-pending[b-uzsjsi5lrj] {
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
}

.tac-cmd .tac-status-pending .tac-dot[b-uzsjsi5lrj] { background: var(--tac-warn); }

.tac-cmd .tac-status-skipped[b-uzsjsi5lrj] {
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
}

.tac-cmd .tac-status-skipped .tac-dot[b-uzsjsi5lrj] { background: var(--tac-warn); }

.tac-cmd .tac-status-cancelled .tac-dot[b-uzsjsi5lrj] { background: var(--tac-ink3); }

/* ------------------------------------------------------------ section heads */

.tac-cmd .tac-section[b-uzsjsi5lrj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.tac-cmd .tac-sectiontitle[b-uzsjsi5lrj] {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* ------------------------------------------------------------- script block */

.tac-cmd .tac-code[b-uzsjsi5lrj] {
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    overflow: hidden;
    min-width: 0;
}

.tac-cmd .tac-code-head[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--tac-line);
    background: var(--tac-s2);
    border-radius: 0;
}

.tac-cmd .tac-code-lang[b-uzsjsi5lrj] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tac-acc);
    background: none;
    padding: 0;
    border-radius: 0;
}

/* The script is a terminal payload, so it gets the one dark surface on this
   light page — the same treatment the deployment-history console wears. */
.tac-cmd .tac-code-body[b-uzsjsi5lrj] {
    margin: 0;
    padding: 14px;
    border: 0;
    border-radius: 0;
    background: var(--tac-ink0);
    color: #dbe6f4;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.6;
    max-height: 260px;
    overflow: auto;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ----------------------------------------------------------- metadata grid */

.tac-cmd .tac-metagrid[b-uzsjsi5lrj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin: 0;
    padding: 1px;
    background: var(--tac-line);
    border: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-cmd .tac-meta[b-uzsjsi5lrj] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: var(--tac-s1);
    min-width: 0;
}

.tac-cmd .tac-metalabel[b-uzsjsi5lrj] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-cmd .tac-metavalue[b-uzsjsi5lrj] {
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
    min-width: 0;
}

.tac-cmd .tac-metavalue.tac-mono[b-uzsjsi5lrj] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-transform: none;
    letter-spacing: 0;
}

/* The status cell keeps the badge treatment; it is a status, not a datum. */
.tac-cmd .tac-metavalue.tac-status[b-uzsjsi5lrj] {
    align-self: flex-start;
    font-size: var(--tac-fs-micro);
}

/* --------------------------------------------------------- results tally */

.tac-cmd .tac-summary[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    min-width: 0;
}

.tac-cmd .tac-statrail[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
}

.tac-cmd .tac-statchip[b-uzsjsi5lrj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-cmd .tac-statnum[b-uzsjsi5lrj] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-cmd .tac-statlabel[b-uzsjsi5lrj] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-cmd .tac-statchip-total .tac-dot[b-uzsjsi5lrj] { background: var(--tac-ink3); }
.tac-cmd .tac-statchip-completed .tac-dot[b-uzsjsi5lrj] { background: var(--tac-ok); }
.tac-cmd .tac-statchip-failed .tac-dot[b-uzsjsi5lrj] { background: var(--tac-crit); }
.tac-cmd .tac-statchip-running .tac-dot[b-uzsjsi5lrj] { background: var(--tac-acc); }
.tac-cmd .tac-statchip-skipped .tac-dot[b-uzsjsi5lrj] { background: var(--tac-warn); }

/* The pipes were the pre-tactical separator. They stay in the markup (they are
   an existing hook) but read as a hairline rule between chips. */
.tac-cmd .tac-statsep[b-uzsjsi5lrj] {
    color: var(--tac-line2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    user-select: none;
}

/* -------------------------------------------------------------- filter row */

.tac-cmd .tac-controls[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-cmd .tac-select[b-uzsjsi5lrj],
.tac-cmd .tac-search[b-uzsjsi5lrj] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    min-width: 0;
}

.tac-cmd .tac-select[b-uzsjsi5lrj] {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.tac-cmd .tac-search[b-uzsjsi5lrj] {
    flex: 1 1 200px;
    max-width: 260px;
}

.tac-cmd .tac-select:hover[b-uzsjsi5lrj],
.tac-cmd .tac-search:hover[b-uzsjsi5lrj] {
    border-color: var(--tac-line2);
}

.tac-cmd .tac-select:focus[b-uzsjsi5lrj],
.tac-cmd .tac-search:focus[b-uzsjsi5lrj] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    outline: none;
}

.tac-cmd .tac-search[b-uzsjsi5lrj]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
    text-transform: none;
    letter-spacing: 0;
}

/* --------------------------------------------------------------- split panel */

/* site.css lays this out with flex and a fixed 280px rail; the grid below is the
   same shape but collapses cleanly, and minmax(0, ...) on BOTH tracks is what
   stops a long console line widening the document. */
.tac-cmd .tac-split[b-uzsjsi5lrj] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    overflow: hidden;
    min-height: 420px;
    min-width: 0;
    max-width: 100%;
}

.tac-cmd .tac-agentlist[b-uzsjsi5lrj] {
    width: auto;
    border-right: 1px solid var(--tac-line);
    border-bottom: 0;
    background: var(--tac-s2);
    overflow-y: auto;
    max-height: 520px;
    min-width: 0;
}

.tac-cmd .tac-agentitem[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--tac-line);
    border-left: 3px solid transparent;
    background: none;
    cursor: pointer;
    transition: background 0.12s ease;
    min-width: 0;
}

.tac-cmd .tac-agentitem:hover[b-uzsjsi5lrj] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-cmd .tac-agentitem.selected[b-uzsjsi5lrj] {
    padding-left: 12px;
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-dim);
}

.tac-cmd .tac-agentitem.skipped[b-uzsjsi5lrj] {
    border-left-color: var(--tac-warn);
    background: rgba(180, 83, 9, 0.06);
}

.tac-cmd .tac-agentitem.skipped.selected[b-uzsjsi5lrj] {
    background: rgba(180, 83, 9, 0.12);
}

.tac-cmd .tac-glyph[b-uzsjsi5lrj] {
    flex: none;
    width: 16px;
    text-align: center;
    font-size: var(--tac-fs-meta);
    line-height: 1;
    color: var(--tac-ink3);
}

.tac-cmd .tac-agentitem.completed .tac-glyph[b-uzsjsi5lrj] { color: var(--tac-ok); }
.tac-cmd .tac-agentitem.failed .tac-glyph[b-uzsjsi5lrj] { color: var(--tac-crit); }
.tac-cmd .tac-agentitem.running .tac-glyph[b-uzsjsi5lrj] { color: var(--tac-acc); }
.tac-cmd .tac-agentitem.skipped .tac-glyph[b-uzsjsi5lrj] { color: var(--tac-warn); }

.tac-cmd .tac-hostname[b-uzsjsi5lrj] {
    flex: 1;
    min-width: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tac-cmd .tac-exitbadge[b-uzsjsi5lrj] {
    flex: none;
    padding: 1px 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    color: var(--tac-ink2);
}

.tac-cmd .tac-exitbadge.success[b-uzsjsi5lrj] {
    border-color: rgba(21, 128, 61, 0.4);
    color: var(--tac-ok);
    background: rgba(21, 128, 61, 0.07);
}

.tac-cmd .tac-exitbadge.error[b-uzsjsi5lrj] {
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.07);
}

.tac-cmd .tac-exitbadge.live[b-uzsjsi5lrj] {
    border-color: rgba(3, 105, 161, 0.4);
    color: var(--tac-acc-deep);
    background: var(--tac-acc-dim);
}

/* --------------------------------------------------------------- output pane */

.tac-cmd .tac-outpanel[b-uzsjsi5lrj] {
    display: flex;
    flex-direction: column;
    background: var(--tac-s1);
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.tac-cmd .tac-outhead[b-uzsjsi5lrj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    min-width: 0;
}

.tac-cmd .tac-outhost[b-uzsjsi5lrj] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
    min-width: 0;
}

.tac-cmd .tac-outmeta[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.tac-cmd .tac-exit[b-uzsjsi5lrj],
.tac-cmd .tac-duration[b-uzsjsi5lrj] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-cmd .tac-exit.success[b-uzsjsi5lrj] { color: var(--tac-ok); }
.tac-cmd .tac-exit.error[b-uzsjsi5lrj] { color: var(--tac-crit); }

.tac-cmd .tac-outbody[b-uzsjsi5lrj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 14px;
    overflow-y: auto;
    max-height: 520px;
    min-width: 0;
}

/* ------------------------------------------------------------ output streams */

.tac-cmd .tac-stream[b-uzsjsi5lrj] {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    min-width: 0;
}

.tac-cmd .tac-streamhead[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 0 6px;
    border: 0;
    background: none;
    min-width: 0;
}

/* A mono tab welded above the console block, square on every corner. */
.tac-cmd .tac-streamlabel[b-uzsjsi5lrj] {
    padding: 3px 9px;
    border: 1px solid var(--tac-line2);
    border-bottom: 0;
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-cmd .tac-stream-error .tac-streamlabel[b-uzsjsi5lrj] {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
}

.tac-cmd .tac-streamhead .tac-mono[b-uzsjsi5lrj] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-cmd .tac-streamhead .tac-actions[b-uzsjsi5lrj] {
    margin-inline-start: auto;
}

/* The console is the one dark surface on this light page — a terminal should
   look like a terminal. overflow-x at EVERY width (not only under a media
   query) is what keeps a 400-character log line inside its own box. */
.tac-cmd .tac-console[b-uzsjsi5lrj] {
    margin: 0;
    padding: 10px 0;
    border: 1px solid var(--tac-ink0);
    border-radius: 0;
    background: var(--tac-ink0);
    color: #dbe6f4;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.55;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: auto;
    min-width: 0;
}

.tac-cmd .tac-console-error[b-uzsjsi5lrj] {
    border-color: rgba(220, 38, 38, 0.55);
}

.tac-cmd .tac-line[b-uzsjsi5lrj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 12px;
    border: 0;
    background: none;
    min-height: 20px;
    line-height: 20px;
}

.tac-cmd .tac-line:hover[b-uzsjsi5lrj] {
    background: rgba(255, 255, 255, 0.05);
}

.tac-cmd .tac-lineno[b-uzsjsi5lrj] {
    flex: none;
    width: 4ch;
    text-align: right;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: #64748b;
    user-select: none;
}

.tac-cmd .tac-linetext[b-uzsjsi5lrj] {
    flex: 1;
    min-width: 0;
    font-family: var(--tac-mono);
    white-space: pre;
    color: #dbe6f4;
}

.tac-cmd .tac-console-error .tac-linetext[b-uzsjsi5lrj] {
    color: #fecaca;
}

/* -------------------------------------------------------------- error banner */

.tac-cmd .tac-error[b-uzsjsi5lrj] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 0;
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- maintenance notice block */

.tac-cmd .tac-notice[b-uzsjsi5lrj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.06);
    min-width: 0;
}

.tac-cmd .tac-notice-head[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tac-cmd .tac-notice-mark[b-uzsjsi5lrj] {
    font-size: var(--tac-fs-label);
    line-height: 1;
}

.tac-cmd .tac-notice-title[b-uzsjsi5lrj] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-warn);
}

.tac-cmd .tac-notice-body[b-uzsjsi5lrj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tac-cmd .tac-notice-row[b-uzsjsi5lrj] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-cmd .tac-notice-row .tac-metalabel[b-uzsjsi5lrj] {
    flex: none;
    min-width: 14ch;
}

.tac-cmd .tac-notice-foot p[b-uzsjsi5lrj] {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(180, 83, 9, 0.3);
    font-size: var(--tac-fs-micro);
    line-height: 1.55;
    color: var(--tac-ink2);
}

/* ------------------------------------------------------------- empty states */

.tac-cmd .tac-state[b-uzsjsi5lrj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 44px 16px;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: center;
    min-width: 0;
}

.tac-cmd .tac-state p[b-uzsjsi5lrj] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-cmd .tac-state-mark[b-uzsjsi5lrj] {
    font-size: var(--tac-fs-xl);
    line-height: 1;
    opacity: 0.65;
}

.tac-cmd .tac-spinner[b-uzsjsi5lrj] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-cmd-spin-b-uzsjsi5lrj 0.9s linear infinite;
}

@keyframes tac-cmd-spin-b-uzsjsi5lrj {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ actions */

/* ActionButton is a child component, so its button never carries this
   component's scope attribute — reach it with ::deep. */
.tac-cmd .tac-actions[b-uzsjsi5lrj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tac-cmd .tac-actions[b-uzsjsi5lrj]  .btn.btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink2);
    box-shadow: none;
    transform: none;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.tac-cmd .tac-actions[b-uzsjsi5lrj]  .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-acc-deep);
    transform: none;
    box-shadow: none;
}

.tac-cmd .tac-actions[b-uzsjsi5lrj]  .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-cmd .tac-actions[b-uzsjsi5lrj]  .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-cmd .tac-actions[b-uzsjsi5lrj]  .action-btn-icon {
    font-size: var(--tac-fs-meta);
    line-height: 1;
}

/* On the dark console header the copy/download cluster sits on a light tab row,
   so it keeps the same treatment — nothing extra needed. */

/* ------------------------------------------------------------- delete dialog */

/* The overlay and its dialog keep every legacy hook; only the surface changes. */
.tac-modal-overlay[b-uzsjsi5lrj] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-uzsjsi5lrj] {
    position: relative;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal[b-uzsjsi5lrj]::before,
.tac-modal-overlay .tac-modal[b-uzsjsi5lrj]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-uzsjsi5lrj]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-uzsjsi5lrj]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-uzsjsi5lrj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h3[b-uzsjsi5lrj] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-close[b-uzsjsi5lrj] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    cursor: pointer;
}

.tac-modal-overlay .tac-modal-close:hover[b-uzsjsi5lrj] {
    border-color: var(--tac-line2);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-modal-body[b-uzsjsi5lrj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    background: none;
}

.tac-modal-overlay .tac-modal-body p[b-uzsjsi5lrj] {
    margin: 0;
    font-size: var(--tac-fs-meta);
    line-height: 1.55;
}

.tac-modal-overlay .tac-warnbox[b-uzsjsi5lrj] {
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
}

.tac-modal-overlay .tac-modal-foot[b-uzsjsi5lrj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* Flat, uppercase, square. Matched on the ELEMENT so this sheet never restyles
   a bare shared button class. */
.tac-modal-overlay .tac-modal-foot button[b-uzsjsi5lrj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-modal-overlay .tac-modal-foot button:hover:not(:disabled)[b-uzsjsi5lrj] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot button:last-child[b-uzsjsi5lrj] {
    border-color: var(--tac-crit);
    background: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot button:last-child:hover:not(:disabled)[b-uzsjsi5lrj] {
    border-color: #b91c1c;
    background: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot button:disabled[b-uzsjsi5lrj] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot button:focus-visible[b-uzsjsi5lrj] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet and below: the split panel becomes one column so the console never
   pushes the document sideways. */
@media (max-width: 1023px) {
    .tac-cmd .tac-split[b-uzsjsi5lrj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-cmd .tac-agentlist[b-uzsjsi5lrj] {
        border-right: 0;
        border-bottom: 1px solid var(--tac-line);
        max-height: 220px;
    }

    .tac-cmd .tac-summary[b-uzsjsi5lrj] {
        align-items: stretch;
    }

    .tac-cmd .tac-controls[b-uzsjsi5lrj] {
        width: 100%;
    }

    .tac-cmd .tac-search[b-uzsjsi5lrj] {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .tac-cmd[b-uzsjsi5lrj] {
        gap: 12px;
    }

    .tac-cmd .tac-panel[b-uzsjsi5lrj] {
        padding: 14px;
        gap: 16px;
    }

    .tac-cmd .tac-pagetitle[b-uzsjsi5lrj] {
        font-size: 18px;
    }

    .tac-cmd .tac-metagrid[b-uzsjsi5lrj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-cmd .tac-idchip[b-uzsjsi5lrj] {
        width: 100%;
    }

    .tac-cmd .tac-outbody[b-uzsjsi5lrj] {
        padding: 10px;
    }

    .tac-cmd .tac-console[b-uzsjsi5lrj] {
        font-size: 11px;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-cmd *[b-uzsjsi5lrj],
    .tac-cmd[b-uzsjsi5lrj]  *,
    .tac-modal-overlay *[b-uzsjsi5lrj] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/Commands.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Commands console — derived from the shipped Login / Dashboard /
   Agents / Deployments conversions (Mock/tactical-ops ships no artboard for this
   page, so consistency with those four IS the specification).

   Scoped to Commands.razor. The design tokens (--tac-*) are NOT declared here —
   they live on :root in wwwroot/css/tactical-tokens.css, linked first in _Host,
   so every tactical-ops page shares one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with
   15-41 other screens (.quick-actions, .quick-action-card, .stats-bar,
   .stat-item, .stat-label, .status, .btn, .pagination, .empty-state ...).
   Blazor scoping alone would stop a bare `.status { }` rule leaking, but it
   would still fight site.css on THIS page in ways invisible from the other 40.
   So the markup carries a NEW .tac-* class next to every legacy one, and every
   selector below hangs off a .tac-* name. The legacy classes stay on the
   elements untouched because the Playwright suite and responsive.css select on
   them (see the comment block at the top of Commands.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css,
   so an equal-specificity .tac-* rule wins on source order. Where site.css is
   more specific (e.g. `.stat-item .stat-icon.running`) the rule below is
   deliberately written long enough to outrank it.

   SearchBar and ActionButton are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does.
   ============================================================================ */

.tac-commands[b-cmzfxzrqyt] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The console must never be the reason the document scrolls sideways —
       Responsive/*BreakpointTests assert zero page overflow at 375/768/1280/1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-commands .tac-panel[b-cmzfxzrqyt] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-commands .tac-panel[b-cmzfxzrqyt]::before,
.tac-commands .tac-panel[b-cmzfxzrqyt]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-commands .tac-panel[b-cmzfxzrqyt]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-commands .tac-panel[b-cmzfxzrqyt]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-commands .tac-scan[b-cmzfxzrqyt] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-commands .tac-eyebrow[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every count, duration, page number and timestamp on this page is mono and
   tabular so columns of digits line up vertically. */
.tac-commands .tac-num[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-commands .tac-muted[b-cmzfxzrqyt] {
    color: var(--tac-ink3);
}

.tac-commands .tac-dot[b-cmzfxzrqyt] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

/* Line-art marks replace the page's former emoji glyphs. */
.tac-commands .tac-mark[b-cmzfxzrqyt] {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------- ops rail */

.tac-commands .tac-oprail-wrap[b-cmzfxzrqyt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* .quick-actions keeps its bare name for responsive.css, but the grid template is
   restated here so the four cards size to the tactical rail rather than site.css's
   softer card grid. */
.tac-commands .tac-oprail[b-cmzfxzrqyt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.tac-commands .tac-op[b-cmzfxzrqyt] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 14px 14px 13px;
    min-width: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-left: 2px solid var(--tac-line2);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    text-align: start;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-commands .tac-op[b-cmzfxzrqyt]::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
    opacity: 0.7;
    pointer-events: none;
}

.tac-commands .tac-op:hover[b-cmzfxzrqyt] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    border-left-color: var(--tac-acc);
    box-shadow: none;
    transform: none;
}

.tac-commands .tac-op:focus-visible[b-cmzfxzrqyt] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* site.css renders .quick-action-icon as a ~32px emoji block; unwind it to a fixed
   stroke-glyph box so all four marks share one optical weight. */
.tac-commands .tac-oprail .tac-op .tac-op-mark[b-cmzfxzrqyt] {
    flex: none;
    display: block;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: var(--tac-acc);
}

.tac-commands .tac-op-text[b-cmzfxzrqyt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.tac-commands .tac-op-index[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.2em;
    color: var(--tac-ink3);
}

.tac-commands .tac-oprail .tac-op .tac-op-title[b-cmzfxzrqyt] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-commands .tac-oprail .tac-op .tac-op-desc[b-cmzfxzrqyt] {
    margin: 0;
    font-size: var(--tac-fs-micro);
    line-height: 1.45;
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-commands .tac-op-arrow[b-cmzfxzrqyt] {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    stroke: var(--tac-line2);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.15s ease;
}

.tac-commands .tac-op:hover .tac-op-arrow[b-cmzfxzrqyt] {
    stroke: var(--tac-acc);
}

/* ---------------------------------------------------------- KPI card stat bar */

/* ONE card treatment for the whole app.

   This is the Dashboard's KPI tile (Pages/Dashboard.razor.css - the reference, and
   NOT edited by this change) lifted across: the same 1px hairline on --tac-s1, the
   same 9px bracket ticks, the same head / figure / foot rhythm, and the same
   ok | warn | crit | info | off dot vocabulary. The compact chip bar that used to
   live here is gone; the app no longer has two card treatments.

   What the Dashboard rail does NOT have - because its tiles are passive read-outs -
   is a pressed state. These cards ARE the page's filter, so the affordance is
   carried over from the chip bar they replace: a left accent border plus an inset
   ring on .selected, an accent hairline and surface wash on hover, and
   role="button" + tabindex="0" in the markup so a card is reachable and operable
   from the keyboard. A card that looks passive but filters on click would be worse
   than the chip it replaced.

   EVERY font-size below comes from a token in wwwroot/css/tactical-tokens.css
   (--tac-label-size / --tac-label-size-sm / --tac-stat-value-size). Nine pages each
   deciding for themselves what a stat count is worth - 18px on /credentials, 14px on
   /agents - is exactly what this block exists to end.

   Nothing here restyles a bare shared selector: the stat-item / stat-icon /
   stat-content / stat-label / stats-bar names stay on the markup as the Playwright and
   bUnit hooks they are, and are only ever reached THROUGH a .tac-* class.

   The .tac-chip* names stay on the markup too, and nothing styles them any more: nine
   bUnit suites select .tac-chipbar / .tac-chip / .tac-chip-count / .tac-chip-label /
   .tac-chip-readout, so after the conversion they are selector hooks exactly like the
   site.css names beside them. */

.tac-commands .tac-kpibar[b-cmzfxzrqyt] {
    display: grid;
    /* min() so a track can never be wider than the bar itself. A bare 190px minimum
       pushes the DOCUMENT sideways at 375px, and AssertNoPageOverflow runs there. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-commands .tac-kpi[b-cmzfxzrqyt] {
    position: relative;
    /* LOAD-BEARING. shell.css:489 declares a bare stat-content as flex-direction:column,
       and site.css:368 makes a bare stat-item a centred flex ROW. A container that
       sets display:flex without saying which way it runs inherits whichever of those
       reaches it and stacks - or in-lines - its children by accident; that is the bug
       that put the dot on top of the Agents chip. Every flex container in this block
       states its direction explicitly. */
    /* TWO LINES, number on the right:
           row 1  label + dot ............ figure
           row 2  caption (spans both columns)
       A grid rather than the old three stacked rows, so the figure can sit beside
       the label instead of under it and the card loses a line without losing data. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head figure"
        "foot foot";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Bracket ticks - the signature of the tactical-ops panel, the same 9px corner pair
   the Dashboard tile draws. */
.tac-commands .tac-kpi[b-cmzfxzrqyt]::before,
.tac-commands .tac-kpi[b-cmzfxzrqyt]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-commands .tac-kpi[b-cmzfxzrqyt]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-commands .tac-kpi[b-cmzfxzrqyt]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

/* The filter states the Dashboard tile has no need for. */

.tac-commands .tac-kpi-filter[b-cmzfxzrqyt] {
    cursor: pointer;
}

.tac-commands .tac-kpi-filter:hover[b-cmzfxzrqyt] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    /* site.css:382 lifts a bare stat-item 2px on hover. A card bouncing under the
       pointer is noise, so the surface wash IS the hover. */
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-commands .tac-kpi-filter:focus-visible[b-cmzfxzrqyt] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The pressed state. Declared AFTER :hover on purpose - same specificity, so the
   later rule wins and a selected card keeps reading as selected under the pointer.
   padding-left gives back the 2px the border takes, so the label does not shift when
   a card is picked. */
.tac-commands .tac-kpi.selected[b-cmzfxzrqyt] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    border-left: 3px solid var(--tac-acc);
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

/* A read-out is not a filter and must not look like one. */
.tac-commands .tac-kpi-readout[b-cmzfxzrqyt] {
    cursor: default;
}

/* Head / figure / foot. */

.tac-commands .tac-kpi .tac-kpi-head[b-cmzfxzrqyt] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    /* site.css:444 gives a bare stat-content flex:1; inside a column card that would
       make the head eat the space the figure and foot need. */
    flex: none;
}

.tac-commands .tac-kpi .tac-lbl[b-cmzfxzrqyt] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    /* 0.14em is the mock's tracking; at 16px it widens a label like
       "MAINTENANCE MODE" far enough to force a second grid row on a laptop. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-commands .tac-kpi.selected .tac-lbl[b-cmzfxzrqyt] {
    color: var(--tac-ink);
}

.tac-commands .tac-kpi .tac-kpi-head .tac-dot[b-cmzfxzrqyt] {
    margin-left: auto;
    /* Never let a stray align-items:stretch pull the dot off the head's centre
       line - that is what read as "the dot is stuck on the top of the card". */
    align-self: center;
}

.tac-commands .tac-kpi .tac-kpi-figure[b-cmzfxzrqyt] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The count. site.css:392 paints a bare stat-icon as a 48-60px gradient circle; here
   it is a number, so the whole badge treatment is unwound. Four classes deep so it
   outranks the two-class site.css:6289 rule that paints the maintenance counter. */
.tac-commands .tac-kpibar .tac-kpi .tac-kpi-value[b-cmzfxzrqyt] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-stat-value-size);
    font-weight: 600;
    line-height: 1;
}

.tac-commands .tac-kpi .tac-kpi-foot[b-cmzfxzrqyt] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The dot vocabulary, verbatim from the Dashboard rail. */
.tac-commands .tac-kpi .tac-dot.ok[b-cmzfxzrqyt] { background: var(--tac-ok); }
.tac-commands .tac-kpi .tac-dot.warn[b-cmzfxzrqyt] { background: var(--tac-warn); }
.tac-commands .tac-kpi .tac-dot.crit[b-cmzfxzrqyt] { background: var(--tac-crit); }
.tac-commands .tac-kpi .tac-dot.info[b-cmzfxzrqyt] { background: var(--tac-acc); }
.tac-commands .tac-kpi .tac-dot.off[b-cmzfxzrqyt] { background: var(--tac-ink3); }

/* ------------------------------------------------------------- history console */

.tac-commands .tac-console[b-cmzfxzrqyt] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-commands .tac-toolbar[b-cmzfxzrqyt] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-commands .tac-toolbar-title[b-cmzfxzrqyt] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-commands .tac-toolbar-count[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-commands .tac-toolbar-of[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-commands .tac-toolbar-controls[b-cmzfxzrqyt] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-commands[b-cmzfxzrqyt]  .search-bar {
    height: 34px;
    width: 260px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-commands[b-cmzfxzrqyt]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-commands[b-cmzfxzrqyt]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-commands[b-cmzfxzrqyt]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-commands[b-cmzfxzrqyt]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-commands[b-cmzfxzrqyt]  .search-bar .clear-search,
.tac-commands[b-cmzfxzrqyt]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* Command-type filter — a native <select> so it keeps the platform's keyboard
   handling and mobile picker; only the frame is restyled. */
.tac-commands .tac-filter[b-cmzfxzrqyt] {
    height: 34px;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-commands .tac-filter:hover[b-cmzfxzrqyt] {
    border-color: var(--tac-acc);
}

.tac-commands .tac-filter:focus-visible[b-cmzfxzrqyt] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* Flat, uppercase, square page button (the empty state's call to action). */
.tac-commands .tac-btn[b-cmzfxzrqyt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-commands .tac-btn:hover:not(:disabled)[b-cmzfxzrqyt] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    box-shadow: none;
    transform: none;
}

.tac-commands .tac-btn.btn-primary[b-cmzfxzrqyt] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-commands .tac-btn.btn-primary:hover:not(:disabled)[b-cmzfxzrqyt] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-commands .tac-btn:focus-visible[b-cmzfxzrqyt] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ loading / empty */

.tac-commands .tac-state[b-cmzfxzrqyt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-commands .tac-state h3[b-cmzfxzrqyt] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-commands .tac-state p[b-cmzfxzrqyt] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-commands .tac-state .tac-state-eyebrow[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* A line-art console instead of the gear emoji. */
.tac-commands .tac-state-mark[b-cmzfxzrqyt] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-commands .tac-spinner[b-cmzfxzrqyt] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-cmzfxzrqyt 0.9s linear infinite;
}

@keyframes tac-spin-b-cmzfxzrqyt {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* Seven columns will not fit a phone. The WRAPPER owns the horizontal scroll at
   every width so the document never does. */
.tac-commands .tac-tablewrap[b-cmzfxzrqyt] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-commands .tac-table[b-cmzfxzrqyt] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-commands .tac-table .tac-th[b-cmzfxzrqyt] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-commands .tac-table .tac-th-actions[b-cmzfxzrqyt] {
    text-align: end;
}

.tac-commands .tac-table .tac-row > td[b-cmzfxzrqyt] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-commands .tac-table .tac-row:last-child > td[b-cmzfxzrqyt] {
    border-bottom: 0;
}

.tac-commands .tac-table .tac-row[b-cmzfxzrqyt] {
    cursor: pointer;
    background: none;
    transition: background 0.12s ease;
}

.tac-commands .tac-table .tac-row:hover > td[b-cmzfxzrqyt] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-commands .tac-table .tac-cell-actions[b-cmzfxzrqyt] {
    text-align: end;
    white-space: nowrap;
}

/* ---------------------------------------------------------- the command cell */

.tac-commands .tac-identity[b-cmzfxzrqyt] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
}

.tac-commands .tac-identity-text[b-cmzfxzrqyt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The shell prompt caret. */
.tac-commands .tac-cmd-mark[b-cmzfxzrqyt] {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}

/* A command IS code — mono, at the ink of a heading, never body text. */
.tac-commands .tac-cmd[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.01em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* The author already rides on this read and the search box matches it, so it sits
   under the command instead of costing an eighth column. */
.tac-commands .tac-byline[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ type chip */

/* site.css draws .command-type as a rounded pill; unwind it to the flat frame the
   rest of the console uses. */
.tac-commands .tac-type[b-cmzfxzrqyt] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-commands .tac-type.powershell[b-cmzfxzrqyt] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

/* Batch / Shell / Executable / Chocolatey stay in the neutral frame: the accent is
   reserved so the eye can find the interpreter that actually differs. */
.tac-commands .tac-type.batch[b-cmzfxzrqyt],
.tac-commands .tac-type.shell[b-cmzfxzrqyt],
.tac-commands .tac-type.executable[b-cmzfxzrqyt],
.tac-commands .tac-type.chocolatey[b-cmzfxzrqyt] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

/* ------------------------------------------------------------------ target cell */

.tac-commands .tac-target[b-cmzfxzrqyt] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
}

.tac-commands .tac-target-mark[b-cmzfxzrqyt] {
    flex: none;
    width: 14px;
    height: 14px;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-commands .tac-target-text[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- status dot + label */

/* The mock's status convention: a semantic dot next to an uppercase mono label.
   site.css draws .status as a rounded pill, so the pill is unwound here. */
.tac-commands .tac-status[b-cmzfxzrqyt] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge renders inside a table data cell, where the
       surrounding text is 12-13px. --tac-label-size is the 16px CARD-LABEL role;
       wearing it here made the badge tower over the row it belongs to. Same defect
       fixed on AuditLog - the redesign cloned one badge block onto every page and
       the wrong token came with it. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-commands .tac-status-running[b-cmzfxzrqyt] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-commands .tac-status-running .tac-dot[b-cmzfxzrqyt] { background: var(--tac-acc); }

.tac-commands .tac-status-pending[b-cmzfxzrqyt] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-commands .tac-status-pending .tac-dot[b-cmzfxzrqyt] { background: var(--tac-warn); }

.tac-commands .tac-status-completed[b-cmzfxzrqyt] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-commands .tac-status-completed .tac-dot[b-cmzfxzrqyt] { background: var(--tac-ok); }

/* Failed AND TimedOut both map to "failed" — GetStatusClass has always folded them
   together, and the LABEL still tells the two apart. */
.tac-commands .tac-status-failed[b-cmzfxzrqyt] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-commands .tac-status-failed .tac-dot[b-cmzfxzrqyt] { background: var(--tac-crit); }

.tac-commands .tac-status-cancelled[b-cmzfxzrqyt] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-commands .tac-status-cancelled .tac-dot[b-cmzfxzrqyt] { background: var(--tac-ink3); }

/* ------------------------------------------------- two-line "executed" cell */

.tac-commands .tac-stack[b-cmzfxzrqyt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The absolute stamp stays on the line above the relative one because
   yyyy/MM/dd HH:mm:ss is the house format and "2 hours ago" alone loses the date
   entirely once a command is a day old. */
.tac-commands .tac-relative[b-cmzfxzrqyt] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- row action btns */

.tac-commands .tac-actions[b-cmzfxzrqyt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of actions reads as one instrument cluster rather than
   three competing pills. Hover restores the semantic colour. */
.tac-commands[b-cmzfxzrqyt]  .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-commands[b-cmzfxzrqyt]  .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-commands[b-cmzfxzrqyt]  .btn.btn-icon.btn-warning:hover:not(:disabled) {
    border-color: var(--tac-warn);
}

.tac-commands[b-cmzfxzrqyt]  .btn.btn-icon.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-commands[b-cmzfxzrqyt]  .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-commands[b-cmzfxzrqyt]  .btn.btn-icon .action-btn-icon {
    filter: grayscale(0.4);
}

/* --------------------------------------------------------------- pagination */

.tac-commands .tac-pager[b-cmzfxzrqyt] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-commands .tac-pager-info[b-cmzfxzrqyt] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-commands .tac-pager-controls[b-cmzfxzrqyt] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-commands .tac-page-btn[b-cmzfxzrqyt] {
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tac-commands .tac-page-btn:hover:not(:disabled)[b-cmzfxzrqyt] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-commands .tac-page-btn.active[b-cmzfxzrqyt] {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-commands .tac-page-btn:disabled[b-cmzfxzrqyt] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-commands .tac-page-btn:focus-visible[b-cmzfxzrqyt] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the toolbar stops trying to fit on one line. responsive.css already
   hides table columns 5 and 6 here. */
@media (max-width: 1023px) {
    .tac-commands .tac-toolbar-controls[b-cmzfxzrqyt] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-commands[b-cmzfxzrqyt]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-commands .tac-oprail[b-cmzfxzrqyt] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* Phone: one column everywhere, and the chip row splits in half. */
@media (max-width: 767px) {
    .tac-commands[b-cmzfxzrqyt] {
        gap: 12px;
    }

    .tac-commands .tac-oprail[b-cmzfxzrqyt] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .tac-commands .tac-kpibar[b-cmzfxzrqyt] {
        /* Two cards per row at phone. minmax(0, 1fr) cannot overflow, so a long
           label ellipsises inside its own card instead of widening the document -
           AssertNoPageOverflow runs at 375px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tac-commands .tac-kpi[b-cmzfxzrqyt] {
        padding: 12px 14px;
    }

    .tac-commands .tac-kpi.selected[b-cmzfxzrqyt] {
        padding-left: 12px;
    }

    .tac-commands .tac-toolbar[b-cmzfxzrqyt] {
        padding: 12px;
        gap: 10px;
    }

    .tac-commands .tac-pager[b-cmzfxzrqyt] {
        padding: 10px 12px;
    }

    .tac-commands .tac-pager-controls[b-cmzfxzrqyt] {
        margin-inline-start: 0;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including the
   loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-commands *[b-cmzfxzrqyt],
    .tac-commands[b-cmzfxzrqyt]  * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- two-line card: label+figure on one row, caption beneath ---------------- */
.tac-commands .tac-kpi .tac-kpi-head[b-cmzfxzrqyt] {
    grid-area: head;
}

.tac-commands .tac-kpi .tac-kpi-figure[b-cmzfxzrqyt] {
    grid-area: figure;
    justify-content: flex-end;
    justify-self: end;
    align-items: baseline;
}

.tac-commands .tac-kpi .tac-kpi-foot[b-cmzfxzrqyt] {
    grid-area: foot;
}

.tac-commands .tac-kpi .tac-kpi-value[b-cmzfxzrqyt] {
    /* The figure is the point of the card, so it leads. It was reading SMALLER than
       its own 16px label, which inverted the hierarchy. */
    font-size: var(--tac-stat-value-size);
    line-height: 1;
}
/* _content/Athena.Server/Pages/CommandTemplates.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops command-template library — /commands/templates.

   Scoped to CommandTemplates.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   There is no artboard for this page in Mock/tactical-ops; every value below is
   taken from the shipped Login / Dashboard / Agents / PackageTemplates sheets so
   the library reads as part of the same product.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with
   dozens of other screens (.stats-bar, .stat-item, .status-badge, .users-table,
   .btn, .modal-*, .form-control, .role-badge ...). Blazor scoping alone would
   keep a bare `.status-badge { }` rule from leaking, but it would still fight
   site.css on THIS page in ways that are invisible from the other 40. So the
   markup carries a NEW .tac-* class next to every legacy one, and every selector
   below hangs off a .tac-* name. The legacy classes stay on the elements
   untouched because Athena.E2ETests/CommandTemplatesPageTests selects on them
   (see the comment block at the top of CommandTemplates.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so
   an equal-specificity .tac-* rule wins on source order. Where site.css is more
   specific (e.g. `.stat-item.stat-item-warning .stat-icon`) the rule below is
   deliberately written long enough to outrank it.

   SearchBar / ActionButton are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does.
   ============================================================================ */

.tac-templates[b-92w1pi0a14] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The library must never be the reason the document scrolls sideways —
       AssertNoPageOverflow runs at 375 / 768 / 1280 / 1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-panel[b-92w1pi0a14] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-panel[b-92w1pi0a14]::before,
.tac-panel[b-92w1pi0a14]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-panel[b-92w1pi0a14]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-92w1pi0a14]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-92w1pi0a14] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-eyebrow[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every count, author, id and timestamp on this page is mono and tabular so
   columns of digits line up vertically. */
.tac-num[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-dot[b-92w1pi0a14] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-glyph[b-92w1pi0a14] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------- headbar */

/* Replaces the old "Commands > Command Templates" breadcrumb + emoji <h1>. The
   back control keeps .back-btn, which the Playwright suite clicks. */
.tac-templates .tac-headbar[b-92w1pi0a14] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-templates .tac-headbar-left[b-92w1pi0a14] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.tac-templates .tac-back[b-92w1pi0a14] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 32px;
    margin: 2px 0 0;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tac-templates .tac-back:hover[b-92w1pi0a14] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-templates .tac-back:focus-visible[b-92w1pi0a14] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-templates .tac-headbar-title[b-92w1pi0a14] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* <h2>, not <h1> — MainLayout already owns the page's only top-level heading. */
.tac-templates .tac-headline[b-92w1pi0a14] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-templates .tac-subhead[b-92w1pi0a14] {
    margin: 0;
    max-width: 60ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* ---------------------------------------------------------- KPI card stat bar */

/* ONE card treatment for the whole app.

   This is the Dashboard's KPI tile (Pages/Dashboard.razor.css - the reference, and
   NOT edited by this change) lifted across: the same 1px hairline on --tac-s1, the
   same 9px bracket ticks, the same head / figure / foot rhythm, and the same
   ok | warn | crit | info | off dot vocabulary. The compact chip bar that used to
   live here is gone; the app no longer has two card treatments.

   What the Dashboard rail does NOT have - because its tiles are passive read-outs -
   is a pressed state. These cards ARE the page's filter, so the affordance is
   carried over from the chip bar they replace: a left accent border plus an inset
   ring on .selected, an accent hairline and surface wash on hover, and
   role="button" + tabindex="0" in the markup so a card is reachable and operable
   from the keyboard. A card that looks passive but filters on click would be worse
   than the chip it replaced.

   EVERY font-size below comes from a token in wwwroot/css/tactical-tokens.css
   (--tac-label-size / --tac-label-size-sm / --tac-stat-value-size). Nine pages each
   deciding for themselves what a stat count is worth - 18px on /credentials, 14px on
   /agents - is exactly what this block exists to end.

   Nothing here restyles a bare shared selector: the stat-item / stat-icon /
   stat-content / stat-label / stats-bar names stay on the markup as the Playwright and
   bUnit hooks they are, and are only ever reached THROUGH a .tac-* class.

   The .tac-chip* names stay on the markup too, and nothing styles them any more: nine
   bUnit suites select .tac-chipbar / .tac-chip / .tac-chip-count / .tac-chip-label /
   .tac-chip-readout, so after the conversion they are selector hooks exactly like the
   site.css names beside them. */

.tac-templates .tac-kpibar[b-92w1pi0a14] {
    display: grid;
    /* min() so a track can never be wider than the bar itself. A bare 190px minimum
       pushes the DOCUMENT sideways at 375px, and AssertNoPageOverflow runs there. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-templates .tac-kpi[b-92w1pi0a14] {
    position: relative;
    /* LOAD-BEARING. shell.css:489 declares a bare stat-content as flex-direction:column,
       and site.css:368 makes a bare stat-item a centred flex ROW. A container that
       sets display:flex without saying which way it runs inherits whichever of those
       reaches it and stacks - or in-lines - its children by accident; that is the bug
       that put the dot on top of the Agents chip. Every flex container in this block
       states its direction explicitly. */
    /* TWO LINES, number on the right:
           row 1  label + dot ............ figure
           row 2  caption (spans both columns)
       A grid rather than the old three stacked rows, so the figure can sit beside
       the label instead of under it and the card loses a line without losing data. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head figure"
        "foot foot";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Bracket ticks - the signature of the tactical-ops panel, the same 9px corner pair
   the Dashboard tile draws. */
.tac-templates .tac-kpi[b-92w1pi0a14]::before,
.tac-templates .tac-kpi[b-92w1pi0a14]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-templates .tac-kpi[b-92w1pi0a14]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-templates .tac-kpi[b-92w1pi0a14]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

/* The filter states the Dashboard tile has no need for. */

.tac-templates .tac-kpi-filter[b-92w1pi0a14] {
    cursor: pointer;
}

.tac-templates .tac-kpi-filter:hover[b-92w1pi0a14] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    /* site.css:382 lifts a bare stat-item 2px on hover. A card bouncing under the
       pointer is noise, so the surface wash IS the hover. */
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-templates .tac-kpi-filter:focus-visible[b-92w1pi0a14] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The pressed state. Declared AFTER :hover on purpose - same specificity, so the
   later rule wins and a selected card keeps reading as selected under the pointer.
   padding-left gives back the 2px the border takes, so the label does not shift when
   a card is picked. */
.tac-templates .tac-kpi.selected[b-92w1pi0a14] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    border-left: 3px solid var(--tac-acc);
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

/* A read-out is not a filter and must not look like one. */
.tac-templates .tac-kpi-readout[b-92w1pi0a14] {
    cursor: default;
}

/* Head / figure / foot. */

.tac-templates .tac-kpi .tac-kpi-head[b-92w1pi0a14] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    /* site.css:444 gives a bare stat-content flex:1; inside a column card that would
       make the head eat the space the figure and foot need. */
    flex: none;
}

.tac-templates .tac-kpi .tac-lbl[b-92w1pi0a14] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    /* 0.14em is the mock's tracking; at 16px it widens a label like
       "MAINTENANCE MODE" far enough to force a second grid row on a laptop. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-templates .tac-kpi.selected .tac-lbl[b-92w1pi0a14] {
    color: var(--tac-ink);
}

.tac-templates .tac-kpi .tac-kpi-head .tac-dot[b-92w1pi0a14] {
    margin-left: auto;
    /* Never let a stray align-items:stretch pull the dot off the head's centre
       line - that is what read as "the dot is stuck on the top of the card". */
    align-self: center;
}

.tac-templates .tac-kpi .tac-kpi-figure[b-92w1pi0a14] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The count. site.css:392 paints a bare stat-icon as a 48-60px gradient circle; here
   it is a number, so the whole badge treatment is unwound. Four classes deep so it
   outranks the two-class site.css:6289 rule that paints the maintenance counter. */
.tac-templates .tac-kpibar .tac-kpi .tac-kpi-value[b-92w1pi0a14] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-stat-value-size);
    font-weight: 600;
    line-height: 1;
}

.tac-templates .tac-kpi .tac-kpi-foot[b-92w1pi0a14] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The dot vocabulary, verbatim from the Dashboard rail. */
.tac-templates .tac-kpi .tac-dot.ok[b-92w1pi0a14] { background: var(--tac-ok); }
.tac-templates .tac-kpi .tac-dot.warn[b-92w1pi0a14] { background: var(--tac-warn); }
.tac-templates .tac-kpi .tac-dot.crit[b-92w1pi0a14] { background: var(--tac-crit); }
.tac-templates .tac-kpi .tac-dot.info[b-92w1pi0a14] { background: var(--tac-acc); }
.tac-templates .tac-kpi .tac-dot.off[b-92w1pi0a14] { background: var(--tac-ink3); }

/* ------------------------------------------------------------- library panel */

.tac-templates .tac-library[b-92w1pi0a14] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-templates .tac-toolbar[b-92w1pi0a14] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-templates .tac-toolbar-title[b-92w1pi0a14] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-templates .tac-toolbar-count[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-templates .tac-toolbar-total[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

.tac-templates .tac-toolbar-controls[b-92w1pi0a14] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-templates[b-92w1pi0a14]  .search-bar {
    height: 34px;
    width: 260px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-templates[b-92w1pi0a14]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-templates[b-92w1pi0a14]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-templates[b-92w1pi0a14]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

/* The shared component ships a magnifier emoji; desaturate it rather than fork
   the component. */
.tac-templates[b-92w1pi0a14]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-templates[b-92w1pi0a14]  .search-bar .clear-search,
.tac-templates[b-92w1pi0a14]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* Category filter — a native <select> so it keeps the platform's keyboard
   handling and mobile picker; only the frame is restyled. */
.tac-templates .tac-filter[b-92w1pi0a14] {
    height: 34px;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-templates .tac-filter:hover[b-92w1pi0a14] {
    border-color: var(--tac-acc);
}

.tac-templates .tac-filter:focus[b-92w1pi0a14],
.tac-templates .tac-filter:focus-visible[b-92w1pi0a14] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
    box-shadow: none;
}

/* ------------------------------------------------------------- toolbar button */

.tac-templates .tac-btn[b-92w1pi0a14] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-templates .tac-btn-primary[b-92w1pi0a14] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-templates .tac-btn-primary:hover:not(:disabled)[b-92w1pi0a14] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

.tac-templates .tac-btn:focus-visible[b-92w1pi0a14] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ loading / empty */

.tac-templates .tac-state[b-92w1pi0a14] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-templates .tac-state h3[b-92w1pi0a14] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-templates .tac-state p[b-92w1pi0a14] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-templates .tac-state .tac-state-eyebrow[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-templates .tac-state-mark[b-92w1pi0a14] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-templates .tac-spinner[b-92w1pi0a14] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-92w1pi0a14 0.9s linear infinite;
}

@keyframes tac-spin-b-92w1pi0a14 {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* Seven columns is more than a phone can hold, and responsive.css has NO card
   layout for .users-table, so the wrapper is the whole answer: the table scrolls
   inside its own box and the document never does. */
.tac-templates .tac-tablewrap[b-92w1pi0a14] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-templates .tac-table[b-92w1pi0a14] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-templates .tac-table .tac-th[b-92w1pi0a14] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-templates .tac-table .tac-th-actions[b-92w1pi0a14] {
    text-align: end;
}

.tac-templates .tac-table .tac-row > td[b-92w1pi0a14] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-templates .tac-table .tac-row:last-child > td[b-92w1pi0a14] {
    border-bottom: 0;
}

.tac-templates .tac-table .tac-row[b-92w1pi0a14] {
    background: none;
    transition: background 0.12s ease;
}

.tac-templates .tac-table .tac-row:hover > td[b-92w1pi0a14] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-templates .tac-table .tac-cell-actions[b-92w1pi0a14] {
    text-align: end;
    white-space: nowrap;
}

/* ------------------------------------------------------- identity cell (name) */

.tac-templates .tac-identity[b-92w1pi0a14] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* One line-art terminal mark per row, tinted by command type. Replaces the old
   per-type emoji avatar, which rendered in whatever face the OS shipped. */
.tac-templates .tac-typemark[b-92w1pi0a14] {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-templates .tac-typemark-powershell[b-92w1pi0a14] { stroke: var(--tac-acc); }
.tac-templates .tac-typemark-batch[b-92w1pi0a14] { stroke: var(--tac-warn); }
.tac-templates .tac-typemark-shell[b-92w1pi0a14] { stroke: var(--tac-ok); }
.tac-templates .tac-typemark-executable[b-92w1pi0a14] { stroke: var(--tac-ink2); }

.tac-templates .tac-identity-text[b-92w1pi0a14] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-templates .tac-name[b-92w1pi0a14] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-templates .tac-desc[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
    max-width: 52ch;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- category tag */

/* .role-badge keeps its name (the category-filter E2E reads it); only the shape
   changes, from a coloured role pill to the flat chip the rest of the language
   uses for a free-text label. */
.tac-templates .tac-tag[b-92w1pi0a14] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge renders inside a table data cell, where the
       surrounding text is 12-13px. --tac-label-size is the 16px CARD-LABEL role;
       wearing it here made the badge tower over the row it belongs to. Same defect
       fixed on AuditLog - the redesign cloned one badge block onto every page and
       the wrong token came with it. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--tac-ink2);
    white-space: nowrap;
}

/* ------------------------------------------------- command type + row status */

/* The dot+label convention, shared by the type chip and the status chip so a row
   reads as one instrument line rather than two competing pill styles. */
.tac-templates .tac-type[b-92w1pi0a14],
.tac-templates .tac-status[b-92w1pi0a14] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge renders inside a table data cell, where the
       surrounding text is 12-13px. --tac-label-size is the 16px CARD-LABEL role;
       wearing it here made the badge tower over the row it belongs to. Same defect
       fixed on AuditLog - the redesign cloned one badge block onto every page and
       the wrong token came with it. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-templates .tac-type-powershell[b-92w1pi0a14] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-templates .tac-type-powershell .tac-dot[b-92w1pi0a14] { background: var(--tac-acc); }

.tac-templates .tac-type-batch[b-92w1pi0a14] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-templates .tac-type-batch .tac-dot[b-92w1pi0a14] { background: var(--tac-warn); }

.tac-templates .tac-type-shell[b-92w1pi0a14] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-templates .tac-type-shell .tac-dot[b-92w1pi0a14] { background: var(--tac-ok); }

.tac-templates .tac-type-executable[b-92w1pi0a14] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-templates .tac-type-executable .tac-dot[b-92w1pi0a14] { background: var(--tac-ink2); }

/* Predefined = shipped with the product, Shared = visible to everyone,
   Private = only mine. None of the three is an error state, so none of them is
   red — the accent/ok/neutral split says "origin", not "health". */
.tac-templates .tac-status-predefined[b-92w1pi0a14] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-templates .tac-status-predefined .tac-dot[b-92w1pi0a14] { background: var(--tac-acc); }

.tac-templates .tac-status-shared[b-92w1pi0a14] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-templates .tac-status-shared .tac-dot[b-92w1pi0a14] { background: var(--tac-ok); }

.tac-templates .tac-status-private[b-92w1pi0a14] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-templates .tac-status-private .tac-dot[b-92w1pi0a14] { background: var(--tac-ink3); }

/* --------------------------------------------------------------- created cell */

.tac-templates .tac-created[b-92w1pi0a14] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

/* -------------------------------------------------------------- row action btns */

.tac-templates .tac-actions[b-92w1pi0a14] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of three actions reads as one instrument cluster
   rather than three competing pills. Hover restores the semantic colour. */
.tac-templates[b-92w1pi0a14]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-templates[b-92w1pi0a14]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-templates[b-92w1pi0a14]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-templates[b-92w1pi0a14]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-templates[b-92w1pi0a14]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------------- modals */

/* The three dialogs keep .modal-overlay > .modal and the header/body/footer
   chain — the Playwright suite drives all of them through exactly those
   selectors. They render OUTSIDE .tac-templates, so these rules hang off
   .tac-modal-overlay instead. */
.tac-modal-overlay[b-92w1pi0a14] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-92w1pi0a14] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

/* The old inline <style> pinned .modal-large at a flat 700px, which overflows a
   phone. Same intent, but it can never be wider than the viewport. */
.tac-modal-overlay .tac-modal.modal-large[b-92w1pi0a14] {
    width: 700px;
    max-width: min(700px, calc(100vw - 32px));
}

.tac-modal-overlay .tac-modal.modal-small[b-92w1pi0a14] {
    max-width: min(460px, calc(100vw - 32px));
}

.tac-modal-overlay .tac-modal[b-92w1pi0a14]::before,
.tac-modal-overlay .tac-modal[b-92w1pi0a14]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-92w1pi0a14]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-92w1pi0a14]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-92w1pi0a14] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h3[b-92w1pi0a14] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-body[b-92w1pi0a14] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: none;
}

.tac-modal-overlay .tac-modal-foot[b-92w1pi0a14] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* --------------------------------------------------------------- modal fields */

/* Two fields side by side above 640px, stacked below it. The old inline rule was
   an unconditional `display:flex`, which squeezed both fields to nothing on a
   phone. */
.tac-modal-overlay .tac-formrow[b-92w1pi0a14] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.tac-modal-overlay .tac-field[b-92w1pi0a14] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-modal-overlay .tac-label[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-input[b-92w1pi0a14] {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-input:focus[b-92w1pi0a14] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    outline: none;
}

.tac-modal-overlay .tac-input[b-92w1pi0a14]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-modal-overlay .tac-input.input-error[b-92w1pi0a14] {
    border-color: var(--tac-crit);
}

/* The command body: a real code field, so it gets the mono face at a readable
   size and may only grow vertically. */
.tac-modal-overlay .tac-code[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    line-height: 1.55;
    resize: vertical;
    tab-size: 4;
}

.tac-modal-overlay .tac-check[b-92w1pi0a14] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    cursor: pointer;
}

.tac-modal-overlay .tac-check input[type="checkbox"][b-92w1pi0a14] {
    width: 15px;
    height: 15px;
    accent-color: var(--tac-acc);
    cursor: pointer;
}

.tac-modal-overlay .tac-hint[b-92w1pi0a14] {
    display: block;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
}

.tac-modal-overlay .tac-fielderror[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-crit);
}

/* ---------------------------------------------------------- modal boxes/errors */

.tac-modal-overlay .tac-warnbox[b-92w1pi0a14] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
}

.tac-modal-overlay .tac-warnbox strong[b-92w1pi0a14] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-modal-overlay .tac-confirm[b-92w1pi0a14] {
    margin: 0;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink);
}

/* Read-only "what am I about to act on" block. */
.tac-modal-overlay .tac-subject[b-92w1pi0a14] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-modal-overlay .tac-subject p[b-92w1pi0a14] {
    display: flex;
    gap: 10px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-modal-overlay .tac-subject p strong[b-92w1pi0a14] {
    flex: none;
    min-width: 10ch;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-error[b-92w1pi0a14] {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 0;
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

/* --------------------------------------------------------------- modal buttons */

.tac-modal-overlay .tac-modal-foot .btn[b-92w1pi0a14] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-92w1pi0a14] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary[b-92w1pi0a14] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-92w1pi0a14] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-92w1pi0a14] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-92w1pi0a14] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-92w1pi0a14] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-92w1pi0a14] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the toolbar stops trying to fit on one line, and the least load-bearing
   column (Created — the same fact is implied by CreatedBy plus the row order)
   steps aside so the remaining six fit without a scroll. */
@media (max-width: 1023px) {
    .tac-templates .tac-toolbar-controls[b-92w1pi0a14] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-templates[b-92w1pi0a14]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-templates .tac-table .tac-th-created[b-92w1pi0a14] {
        display: none;
    }
}

@media (max-width: 767px) {
    .tac-templates[b-92w1pi0a14] {
        gap: 12px;
    }

    .tac-templates .tac-headbar-left[b-92w1pi0a14] {
        flex-wrap: wrap;
    }

    .tac-templates .tac-headline[b-92w1pi0a14] {
        font-size: 20px;
    }

    .tac-templates .tac-kpibar[b-92w1pi0a14] {
        /* Two cards per row at phone. minmax(0, 1fr) cannot overflow, so a long
           label ellipsises inside its own card instead of widening the document -
           AssertNoPageOverflow runs at 375px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tac-templates .tac-kpi[b-92w1pi0a14] {
        padding: 12px 14px;
    }

    .tac-templates .tac-kpi.selected[b-92w1pi0a14] {
        padding-left: 12px;
    }

    .tac-templates .tac-toolbar[b-92w1pi0a14] {
        padding: 12px;
        gap: 10px;
    }

    .tac-templates .tac-toolbar-controls .tac-btn[b-92w1pi0a14] {
        flex: 1 1 auto;
    }

    .tac-modal-overlay .tac-formrow[b-92w1pi0a14] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-modal-overlay .tac-check[b-92w1pi0a14] {
        margin-top: 0;
    }

    .tac-modal-overlay .tac-modal-body[b-92w1pi0a14] {
        padding: 14px 16px;
    }

    .tac-modal-overlay .tac-modal-head[b-92w1pi0a14],
    .tac-modal-overlay .tac-modal-foot[b-92w1pi0a14] {
        padding-inline: 16px;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-templates *[b-92w1pi0a14],
    .tac-templates[b-92w1pi0a14]  *,
    .tac-modal-overlay *[b-92w1pi0a14] {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- two-line card: label+figure on one row, caption beneath ---------------- */
.tac-templates .tac-kpi .tac-kpi-head[b-92w1pi0a14] {
    grid-area: head;
}

.tac-templates .tac-kpi .tac-kpi-figure[b-92w1pi0a14] {
    grid-area: figure;
    justify-content: flex-end;
    justify-self: end;
    align-items: baseline;
}

.tac-templates .tac-kpi .tac-kpi-foot[b-92w1pi0a14] {
    grid-area: foot;
}

.tac-templates .tac-kpi .tac-kpi-value[b-92w1pi0a14] {
    /* The figure is the point of the card, so it leads. It was reading SMALLER than
       its own 16px label, which inverted the hierarchy. */
    font-size: var(--tac-stat-value-size);
    line-height: 1;
}
/* _content/Athena.Server/Pages/Compliance/Assignments.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Compliance — SHARED BASE
   ----------------------------------------------------------------------------
   The four Compliance screens (Rules / Baselines / BaselineEdit / Assignments)
   were missed by the site-wide restyle because its enumeration globbed
   Pages/*.razor, which does not recurse into Pages/Compliance/. There is no
   Mock/tactical-ops artboard for compliance, so the look is DERIVED from the
   shipped conversions (Login, Agents, Collections) and the vocabulary below is
   deliberately the SAME vocabulary Collections.razor.css uses: panel + scan line
   + bracket ticks, mono toolbar counts, mono table, dot+label badges, line-art
   marks, flat square buttons.

   This block is IDENTICAL in all four scoped stylesheets on purpose — Blazor CSS
   isolation gives each file its own [b-xxxxx] attribute, so a rule written here
   can only ever match the page it is scoped to. Sharing the text is what keeps
   the four screens from drifting apart; each file appends its own page-specific
   section after this base.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, linked first in _Host, so every tactical-ops
   page reads one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   These pages are built out of class names site.css shares with up to 41 other
   screens (.content-card, .card-header, .card-title, .data-table, .type-label,
   .badge, .pagination, .form-group, .form-control, .modal ...). Blazor scoping
   alone would keep a bare `.card-title { }` rule from leaking, but it would still
   fight site.css on THIS page in ways that are invisible from the other 40. So
   the markup carries a NEW .tac-* class next to every legacy one, and every
   selector below hangs off a .tac-* name. The legacy classes stay on the elements
   untouched because Athena.E2ETests/CompliancePageTests and site.css both select
   on them.

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so
   an equal-specificity .tac-* rule wins on source order. Where site.css is more
   specific the rule below is written long enough to outrank it.

   ComplianceTabNavigation, SearchBar and ActionButton are CHILD components: their
   DOM never carries this component's scope attribute, so those rules go through
   ::deep from a .tac-* ancestor that does.
   ============================================================================ */

.tac-compliance[b-b82zvo31g8] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* These screens must never be the reason the document scrolls sideways —
       the responsive breakpoint suites assert zero page overflow. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-compliance .tac-panel[b-b82zvo31g8] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-compliance .tac-panel[b-b82zvo31g8]::before,
.tac-compliance .tac-panel[b-b82zvo31g8]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-compliance .tac-panel[b-b82zvo31g8]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-compliance .tac-panel[b-b82zvo31g8]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-compliance .tac-scan[b-b82zvo31g8] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

/* Every count, id, hash and timestamp on these pages is mono and tabular so
   columns of digits line up vertically. */
.tac-compliance .tac-num[b-b82zvo31g8] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-compliance .tac-dot[b-b82zvo31g8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-compliance .tac-eyebrow[b-b82zvo31g8] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Flat, square, uppercase — the same button the login panel and the collection
   roster use. Only ever applied through a .tac-btn class the markup opts into. */
.tac-compliance .tac-btn[b-b82zvo31g8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-compliance .tac-btn:hover:not(:disabled)[b-b82zvo31g8] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-compliance .tac-btn.tac-btn-primary[b-b82zvo31g8] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-compliance .tac-btn.tac-btn-primary:hover:not(:disabled)[b-b82zvo31g8] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-compliance .tac-btn:disabled[b-b82zvo31g8] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-compliance .tac-btn:focus-visible[b-b82zvo31g8] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------- tab strip */

/* ComplianceTabNavigation is a child component (Components/Compliance), shared by
   these four pages and nothing else. It is reached through ::deep rather than
   edited, so the component itself stays a plain NavLink strip and no other screen
   can be affected. */
.tac-compliance[b-b82zvo31g8]  .compliance-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
}

.tac-compliance[b-b82zvo31g8]  .compliance-tabs .tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tac-compliance[b-b82zvo31g8]  .compliance-tabs .tab-btn:hover {
    color: var(--tac-ink0);
    background: none;
    transform: none;
}

.tac-compliance[b-b82zvo31g8]  .compliance-tabs .tab-btn.active {
    color: var(--tac-acc);
    border-bottom-color: var(--tac-acc);
    background: none;
    font-weight: 600;
}

.tac-compliance[b-b82zvo31g8]  .compliance-tabs .tab-btn:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------- page head */

.tac-compliance .tac-pagehead[b-b82zvo31g8] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-compliance .tac-pagehead-text[b-b82zvo31g8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the shell's only <h1> ("Compliance"). */
.tac-compliance .tac-pagetitle[b-b82zvo31g8] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-compliance .tac-pagesub[b-b82zvo31g8] {
    margin: 0;
    max-width: 78ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.55;
}

/* ------------------------------------------------------------------- container */

.tac-compliance .tac-roster[b-b82zvo31g8] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-compliance .tac-toolbar[b-b82zvo31g8] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-compliance .tac-toolbar-title[b-b82zvo31g8] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-compliance .tac-toolbar-count[b-b82zvo31g8] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-compliance .tac-toolbar-controls[b-b82zvo31g8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-compliance .tac-toolbar-actions[b-b82zvo31g8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* SearchBar is a child component. */
.tac-compliance[b-b82zvo31g8]  .search-bar {
    height: 34px;
    width: 280px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance[b-b82zvo31g8]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-compliance[b-b82zvo31g8]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-compliance[b-b82zvo31g8]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-compliance[b-b82zvo31g8]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-compliance[b-b82zvo31g8]  .search-bar .clear-search,
.tac-compliance[b-b82zvo31g8]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* -------------------------------------------------------- loading / empty state */

.tac-compliance .tac-state[b-b82zvo31g8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-compliance .tac-state h3[b-b82zvo31g8] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-compliance .tac-state p[b-b82zvo31g8] {
    margin: 0;
    max-width: 52ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-compliance .tac-state .tac-state-eyebrow[b-b82zvo31g8] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Line-art marks instead of the ☰ / 📁 / ⚠ dingbats — a glyph renders in whatever
   face the OS ships and cannot be made to sit in this palette. */
.tac-compliance .tac-state-mark[b-b82zvo31g8] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-compliance .tac-state-mark.tac-state-mark-alert[b-b82zvo31g8] {
    stroke: var(--tac-crit);
    opacity: 0.85;
}

.tac-compliance .tac-spinner[b-b82zvo31g8] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-b82zvo31g8 0.9s linear infinite;
}

@keyframes tac-spin-b-b82zvo31g8 {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* overflow-x here at EVERY width is the belt-and-braces that keeps a wide grid
   from pushing the document sideways. */
.tac-compliance .tac-tablewrap[b-b82zvo31g8] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-compliance .tac-table[b-b82zvo31g8] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-compliance .tac-table .tac-th[b-b82zvo31g8] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-compliance .tac-table .tac-th-num[b-b82zvo31g8],
.tac-compliance .tac-table .tac-th-actions[b-b82zvo31g8] {
    text-align: end;
}

.tac-compliance .tac-table .tac-row > td[b-b82zvo31g8] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-compliance .tac-table .tac-row:last-child > td[b-b82zvo31g8] {
    border-bottom: 0;
}

.tac-compliance .tac-table .tac-row[b-b82zvo31g8] {
    background: none;
    transition: background 0.12s ease;
}

.tac-compliance .tac-table .tac-row:hover > td[b-b82zvo31g8] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-compliance .tac-table .tac-cell-num[b-b82zvo31g8] {
    text-align: end;
}

.tac-compliance .tac-table .tac-cell-actions[b-b82zvo31g8] {
    text-align: end;
    white-space: nowrap;
}

.tac-compliance .tac-table .tac-name[b-b82zvo31g8] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-compliance .tac-table .tac-num[b-b82zvo31g8] {
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
}

.tac-compliance .tac-table .date-cell.tac-num[b-b82zvo31g8] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* A SHA-256 is the one cell that has to be mono: an operator compares it glyph by
   glyph against a hash printed somewhere else. */
.tac-compliance .tac-table .tac-hash[b-b82zvo31g8] {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    cursor: help;
}

.tac-compliance .tac-noaction[b-b82zvo31g8] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* ---------------------------------------------------------- dot + label badges */

/* The dot+label convention, borrowed from the agent roster's status badges: a
   semantic dot next to an uppercase mono label. site.css draws .type-label and
   .badge as rounded pills, so the pill is unwound here. */
.tac-compliance .tac-typelabel[b-b82zvo31g8],
.tac-compliance .tac-flag[b-b82zvo31g8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-compliance .tac-typelabel-platform-windows[b-b82zvo31g8] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-compliance .tac-typelabel-platform-windows .tac-dot[b-b82zvo31g8] { background: var(--tac-acc); }

.tac-compliance .tac-typelabel-platform-linux .tac-dot[b-b82zvo31g8] { background: var(--tac-ink2); }

.tac-compliance .tac-typelabel-platform-any[b-b82zvo31g8] {
    border-style: dashed;
}

.tac-compliance .tac-typelabel-platform-any .tac-dot[b-b82zvo31g8] { background: var(--tac-ink3); }

/* Auto-remediate ON is warn-coloured: that rule is allowed to CHANGE agent state
   on its own, which is exactly the fact an operator scans this column for. */
.tac-compliance .tac-flag.tac-flag-on[b-b82zvo31g8] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-compliance .tac-flag.tac-flag-on .tac-dot[b-b82zvo31g8] { background: var(--tac-warn); }

.tac-compliance .tac-flag.tac-flag-off[b-b82zvo31g8] {
    color: var(--tac-ink3);
    border-color: var(--tac-line);
    background: none;
}

.tac-compliance .tac-flag.tac-flag-off .tac-dot[b-b82zvo31g8] { background: var(--tac-line2); }

/* -------------------------------------------------------------- row action btns */

.tac-compliance .tac-actions[b-b82zvo31g8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of actions reads as one instrument cluster rather than
   a set of competing pills. Hover restores the semantic colour. */
.tac-compliance[b-b82zvo31g8]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance[b-b82zvo31g8]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-compliance[b-b82zvo31g8]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-compliance[b-b82zvo31g8]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-compliance[b-b82zvo31g8]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------------ pagination */

.tac-compliance .tac-pagination[b-b82zvo31g8] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-compliance .tac-pagination .tac-page-info[b-b82zvo31g8] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-compliance .tac-pagination .tac-page-controls[b-b82zvo31g8] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-compliance .tac-pagination .tac-page-btn[b-b82zvo31g8] {
    min-width: 30px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-compliance .tac-pagination .tac-page-btn:hover:not(:disabled)[b-b82zvo31g8] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-compliance .tac-pagination .tac-page-btn:disabled[b-b82zvo31g8] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-compliance .tac-pagination .tac-page-btn:focus-visible[b-b82zvo31g8] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- alert banners */

.tac-compliance .tac-alert[b-b82zvo31g8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-ink3);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
}

.tac-compliance .tac-alert.tac-alert-crit[b-b82zvo31g8] {
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-compliance .tac-alert.tac-alert-ok[b-b82zvo31g8] {
    border-color: rgba(21, 128, 61, 0.4);
    border-left-color: var(--tac-ok);
    background: rgba(21, 128, 61, 0.06);
    color: var(--tac-ok);
}

.tac-compliance .tac-alert.tac-alert-info[b-b82zvo31g8] {
    border-color: rgba(3, 105, 161, 0.4);
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-compliance .tac-alert .tac-alert-mark[b-b82zvo31g8] {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-compliance .tac-alert .tac-alert-text[b-b82zvo31g8] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tac-compliance .tac-alert .tac-alert-close[b-b82zvo31g8] {
    margin-inline-start: auto;
    width: 22px;
    height: 22px;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
}

.tac-compliance .tac-alert .tac-alert-close:hover[b-b82zvo31g8] {
    border-color: currentColor;
}

.tac-compliance .tac-alert .tac-alert-close:focus-visible[b-b82zvo31g8] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------- forms */

.tac-compliance .tac-form[b-b82zvo31g8],
.tac-modal-overlay .tac-form[b-b82zvo31g8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tac-compliance .tac-field[b-b82zvo31g8],
.tac-modal-overlay .tac-field[b-b82zvo31g8] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

.tac-compliance .tac-field-row[b-b82zvo31g8],
.tac-modal-overlay .tac-field-row[b-b82zvo31g8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.tac-compliance .tac-label[b-b82zvo31g8],
.tac-modal-overlay .tac-label[b-b82zvo31g8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-compliance .tac-req[b-b82zvo31g8],
.tac-modal-overlay .tac-req[b-b82zvo31g8] {
    color: var(--tac-crit);
}

.tac-compliance .tac-input[b-b82zvo31g8],
.tac-modal-overlay .tac-input[b-b82zvo31g8] {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink0);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance textarea.tac-input[b-b82zvo31g8],
.tac-modal-overlay textarea.tac-input[b-b82zvo31g8] {
    height: auto;
    min-height: 60px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
}

.tac-compliance .tac-input-num[b-b82zvo31g8],
.tac-modal-overlay .tac-input-num[b-b82zvo31g8] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-compliance .tac-input:focus[b-b82zvo31g8],
.tac-modal-overlay .tac-input:focus[b-b82zvo31g8] {
    outline: none;
    border-color: var(--tac-acc);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.18);
}

.tac-compliance .tac-input[b-b82zvo31g8]::placeholder,
.tac-modal-overlay .tac-input[b-b82zvo31g8]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-compliance .tac-input:disabled[b-b82zvo31g8],
.tac-modal-overlay .tac-input:disabled[b-b82zvo31g8] {
    background: var(--tac-s2);
    color: var(--tac-ink3);
    cursor: not-allowed;
}

.tac-compliance .tac-hint[b-b82zvo31g8],
.tac-modal-overlay .tac-hint[b-b82zvo31g8] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
}

.tac-compliance .tac-check[b-b82zvo31g8],
.tac-modal-overlay .tac-check[b-b82zvo31g8] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 9px;
}

.tac-compliance .tac-check .tac-checkbox[b-b82zvo31g8],
.tac-modal-overlay .tac-check .tac-checkbox[b-b82zvo31g8] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--tac-acc);
    cursor: pointer;
}

.tac-compliance .tac-check .tac-checkbox:disabled[b-b82zvo31g8],
.tac-modal-overlay .tac-check .tac-checkbox:disabled[b-b82zvo31g8] {
    cursor: not-allowed;
}

.tac-compliance .tac-check .tac-hint[b-b82zvo31g8],
.tac-modal-overlay .tac-check .tac-hint[b-b82zvo31g8] {
    grid-column: 2;
}

.tac-compliance .tac-readonly[b-b82zvo31g8],
.tac-modal-overlay .tac-readonly[b-b82zvo31g8] {
    display: block;
    margin: 0;
    padding: 8px 10px;
    border: 1px dashed var(--tac-line2);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    overflow-wrap: anywhere;
}

.tac-compliance .tac-hashblock[b-b82zvo31g8],
.tac-modal-overlay .tac-hashblock[b-b82zvo31g8] {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------- modal */

/* The modal keeps .modal-overlay > .modal and the header/body/footer chain —
   CompliancePageTests drives the create and delete dialogs through exactly those
   selectors. */
.tac-modal-overlay[b-b82zvo31g8] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-b82zvo31g8] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal.tac-modal-wide[b-b82zvo31g8] {
    max-width: 860px;
}

.tac-modal-overlay .tac-modal[b-b82zvo31g8]::before,
.tac-modal-overlay .tac-modal[b-b82zvo31g8]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-b82zvo31g8]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-b82zvo31g8]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-b82zvo31g8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h2[b-b82zvo31g8] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-close[b-b82zvo31g8] {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
}

.tac-modal-overlay .tac-close:hover[b-b82zvo31g8] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-close:focus-visible[b-b82zvo31g8] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-modal-overlay .tac-modal-body[b-b82zvo31g8] {
    padding: 20px;
    background: none;
}

/* The confirm dialogs stay centred; the form dialogs do not. */
.tac-modal-overlay .confirm-modal .tac-modal-body[b-b82zvo31g8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.tac-modal-overlay .tac-confirm-mark[b-b82zvo31g8] {
    width: 42px;
    height: 42px;
    stroke: var(--tac-crit);
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    /* site.css sizes .confirm-icon as a text glyph; it is an <svg> now. */
    font-size: 0;
    line-height: 0;
}

.tac-modal-overlay .tac-modal-body h3[b-b82zvo31g8] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-modal-overlay .confirm-modal .tac-modal-body p[b-b82zvo31g8] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-modal-overlay .tac-warnbox[b-b82zvo31g8] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-align: start;
}

.tac-modal-overlay .tac-alert[b-b82zvo31g8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-ink3);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
    text-align: start;
}

.tac-modal-overlay .tac-alert.tac-alert-crit[b-b82zvo31g8] {
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-alert.tac-alert-info[b-b82zvo31g8] {
    border-color: rgba(3, 105, 161, 0.4);
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-modal-overlay .tac-alert .tac-alert-text[b-b82zvo31g8] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Monaco draws itself into this box; the frame is a token hairline instead of the
   hardcoded #ccc the inline style used to carry. */
.tac-modal-overlay .tac-monaco[b-b82zvo31g8] {
    height: 240px;
    min-width: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
}

.tac-modal-overlay .tac-modal-foot[b-b82zvo31g8] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* Modal buttons: flat, uppercase, square. */
.tac-modal-overlay .tac-modal-foot .btn[b-b82zvo31g8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-b82zvo31g8] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary[b-b82zvo31g8] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-b82zvo31g8] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-b82zvo31g8] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-b82zvo31g8] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-b82zvo31g8] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-b82zvo31g8] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ responsive */

/* Tablet: the toolbar stops trying to fit on one line, and paired fields stack. */
@media (max-width: 1023px) {
    .tac-compliance .tac-toolbar-controls[b-b82zvo31g8] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-compliance[b-b82zvo31g8]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-compliance .tac-toolbar-actions[b-b82zvo31g8] {
        margin-inline-start: auto;
    }

    .tac-compliance .tac-field-row[b-b82zvo31g8],
    .tac-modal-overlay .tac-field-row[b-b82zvo31g8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phone: a seven- or eight-column grid cannot honestly fit, and responsive.css
   builds its card layout only for .agents-table / .audit-table / .scheduler-table
   — not for a bare .data-table. So these pages restack their OWN rows as labelled
   cards, from the data-label attribute every <td> carries. */
@media (max-width: 767px) {
    .tac-compliance[b-b82zvo31g8] {
        gap: 12px;
    }

    .tac-compliance .tac-pagetitle[b-b82zvo31g8] {
        font-size: 20px;
    }

    .tac-compliance[b-b82zvo31g8]  .compliance-tabs .tab-btn {
        padding: 0 11px;
        letter-spacing: 0.1em;
    }

    .tac-compliance .tac-toolbar[b-b82zvo31g8] {
        padding: 12px;
        gap: 10px;
    }

    .tac-compliance .tac-tablewrap[b-b82zvo31g8] {
        overflow-x: hidden;
    }

    .tac-compliance .tac-table[b-b82zvo31g8],
    .tac-compliance .tac-table tbody[b-b82zvo31g8] {
        display: block;
    }

    .tac-compliance .tac-table thead[b-b82zvo31g8] {
        position: absolute;
        left: -9999px;
    }

    .tac-compliance .tac-table .tac-row[b-b82zvo31g8] {
        display: block;
        margin: 12px;
        padding: 10px 12px;
        border: 1px solid var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-compliance .tac-table .tac-row > td[b-b82zvo31g8] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid var(--tac-line);
        text-align: start;
    }

    .tac-compliance .tac-table .tac-row > td:last-child[b-b82zvo31g8] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .tac-compliance .tac-table .tac-row > td[b-b82zvo31g8]::before {
        content: attr(data-label);
        flex: none;
        font-family: var(--tac-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-compliance .tac-pagination[b-b82zvo31g8] {
        padding: 10px 12px;
    }

    .tac-compliance .tac-pagination .tac-page-controls[b-b82zvo31g8] {
        margin-inline-start: 0;
    }

    .tac-modal-overlay .tac-modal-body[b-b82zvo31g8] {
        padding: 14px;
    }

    .tac-modal-overlay .tac-monaco[b-b82zvo31g8] {
        height: 180px;
    }
}

/* Nothing on these pages animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-compliance *[b-b82zvo31g8],
    .tac-compliance[b-b82zvo31g8]  *,
    .tac-modal-overlay *[b-b82zvo31g8] {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   PAGE-SPECIFIC — Assignments
   ============================================================================ */

/* An assignment row is not clickable — Edit is the only drill-in and it is an
   explicit action button; the compliant / non-compliant counts are their own
   links into the companion collections. */
.tac-compliance .tac-table .tac-row[b-b82zvo31g8] {
    cursor: default;
}

/* Desktop/tablet ONLY — below 768px the row is a stacked card, where a min-width
   would fight the 375px viewport the overflow suite checks. */
@media (min-width: 768px) {
    .tac-compliance .tac-table td:first-child[b-b82zvo31g8],
    .tac-compliance .tac-table td:nth-child(2)[b-b82zvo31g8] {
        min-width: 160px;
    }
}

/* Baseline is the subject of the row, Collection is its target — same size, one
   step apart in weight so the pair reads as "this → that". */
.tac-compliance .tac-table .tac-target[b-b82zvo31g8] {
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

/* The one place on these four screens where real fleet numbers exist, so they get
   the strongest mono treatment on the page. */
.tac-compliance .tac-table .tac-count[b-b82zvo31g8] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tac-compliance .tac-table .tac-count-ok[b-b82zvo31g8] {
    color: var(--tac-ok);
}

.tac-compliance .tac-table .tac-count-crit[b-b82zvo31g8] {
    color: var(--tac-crit);
}

/* Zero is a fact, not an alarm: it stays quiet. */
.tac-compliance .tac-table .tac-count-zero[b-b82zvo31g8] {
    color: var(--tac-ink3);
    font-weight: 500;
}

/* A count that deep-links into its companion collection says so with an underline
   offset, not with link-blue — the colour is already carrying the polarity. */
.tac-compliance .tac-table a.tac-count-link[b-b82zvo31g8] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.tac-compliance .tac-table a.tac-count-link:hover[b-b82zvo31g8] {
    text-decoration-style: solid;
}

.tac-compliance .tac-table a.tac-count-link:focus-visible[b-b82zvo31g8] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* "Unlimited" is the absence of a throttle, so it reads as an unset field rather
   than as a value. */
.tac-compliance .tac-table .tac-unset[b-b82zvo31g8] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* Evaluate Now sits INSIDE a row, so it is a row-height chip rather than the
   34px toolbar button .tac-btn describes. */
.tac-compliance .tac-actions .tac-btn-eval[b-b82zvo31g8] {
    height: 26px;
    padding: 0 11px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* The immutability note under Max Concurrent Remediations is a v1 limitation, not
   a hint about how to use the field — it is set apart accordingly. */
.tac-compliance .tac-hint-note[b-b82zvo31g8],
.tac-modal-overlay .tac-hint-note[b-b82zvo31g8] {
    padding-inline-start: 8px;
    border-inline-start: 2px solid var(--tac-line2);
    color: var(--tac-warn);
}

@media (max-width: 767px) {
    /* Restacked as a card, the action cluster gets a line of its own so the
       Evaluate Now chip is not squeezed against two icon buttons. */
    .tac-compliance .tac-table .tac-row > td.tac-cell-actions[b-b82zvo31g8] {
        flex-wrap: wrap;
    }

    .tac-compliance .tac-actions[b-b82zvo31g8] {
        justify-content: flex-end;
        flex: 1 1 auto;
    }
}
/* _content/Athena.Server/Pages/Compliance/BaselineEdit.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Compliance — SHARED BASE
   ----------------------------------------------------------------------------
   The four Compliance screens (Rules / Baselines / BaselineEdit / Assignments)
   were missed by the site-wide restyle because its enumeration globbed
   Pages/*.razor, which does not recurse into Pages/Compliance/. There is no
   Mock/tactical-ops artboard for compliance, so the look is DERIVED from the
   shipped conversions (Login, Agents, Collections) and the vocabulary below is
   deliberately the SAME vocabulary Collections.razor.css uses: panel + scan line
   + bracket ticks, mono toolbar counts, mono table, dot+label badges, line-art
   marks, flat square buttons.

   This block is IDENTICAL in all four scoped stylesheets on purpose — Blazor CSS
   isolation gives each file its own [b-xxxxx] attribute, so a rule written here
   can only ever match the page it is scoped to. Sharing the text is what keeps
   the four screens from drifting apart; each file appends its own page-specific
   section after this base.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, linked first in _Host, so every tactical-ops
   page reads one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   These pages are built out of class names site.css shares with up to 41 other
   screens (.content-card, .card-header, .card-title, .data-table, .type-label,
   .badge, .pagination, .form-group, .form-control, .modal ...). Blazor scoping
   alone would keep a bare `.card-title { }` rule from leaking, but it would still
   fight site.css on THIS page in ways that are invisible from the other 40. So
   the markup carries a NEW .tac-* class next to every legacy one, and every
   selector below hangs off a .tac-* name. The legacy classes stay on the elements
   untouched because Athena.E2ETests/CompliancePageTests and site.css both select
   on them.

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so
   an equal-specificity .tac-* rule wins on source order. Where site.css is more
   specific the rule below is written long enough to outrank it.

   ComplianceTabNavigation, SearchBar and ActionButton are CHILD components: their
   DOM never carries this component's scope attribute, so those rules go through
   ::deep from a .tac-* ancestor that does.
   ============================================================================ */

.tac-compliance[b-m09hui5l4g] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* These screens must never be the reason the document scrolls sideways —
       the responsive breakpoint suites assert zero page overflow. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-compliance .tac-panel[b-m09hui5l4g] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-compliance .tac-panel[b-m09hui5l4g]::before,
.tac-compliance .tac-panel[b-m09hui5l4g]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-compliance .tac-panel[b-m09hui5l4g]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-compliance .tac-panel[b-m09hui5l4g]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-compliance .tac-scan[b-m09hui5l4g] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

/* Every count, id, hash and timestamp on these pages is mono and tabular so
   columns of digits line up vertically. */
.tac-compliance .tac-num[b-m09hui5l4g] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-compliance .tac-dot[b-m09hui5l4g] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-compliance .tac-eyebrow[b-m09hui5l4g] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Flat, square, uppercase — the same button the login panel and the collection
   roster use. Only ever applied through a .tac-btn class the markup opts into. */
.tac-compliance .tac-btn[b-m09hui5l4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-compliance .tac-btn:hover:not(:disabled)[b-m09hui5l4g] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-compliance .tac-btn.tac-btn-primary[b-m09hui5l4g] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-compliance .tac-btn.tac-btn-primary:hover:not(:disabled)[b-m09hui5l4g] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-compliance .tac-btn:disabled[b-m09hui5l4g] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-compliance .tac-btn:focus-visible[b-m09hui5l4g] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------- tab strip */

/* ComplianceTabNavigation is a child component (Components/Compliance), shared by
   these four pages and nothing else. It is reached through ::deep rather than
   edited, so the component itself stays a plain NavLink strip and no other screen
   can be affected. */
.tac-compliance[b-m09hui5l4g]  .compliance-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
}

.tac-compliance[b-m09hui5l4g]  .compliance-tabs .tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tac-compliance[b-m09hui5l4g]  .compliance-tabs .tab-btn:hover {
    color: var(--tac-ink0);
    background: none;
    transform: none;
}

.tac-compliance[b-m09hui5l4g]  .compliance-tabs .tab-btn.active {
    color: var(--tac-acc);
    border-bottom-color: var(--tac-acc);
    background: none;
    font-weight: 600;
}

.tac-compliance[b-m09hui5l4g]  .compliance-tabs .tab-btn:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------- page head */

.tac-compliance .tac-pagehead[b-m09hui5l4g] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-compliance .tac-pagehead-text[b-m09hui5l4g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the shell's only <h1> ("Compliance"). */
.tac-compliance .tac-pagetitle[b-m09hui5l4g] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-compliance .tac-pagesub[b-m09hui5l4g] {
    margin: 0;
    max-width: 78ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.55;
}

/* ------------------------------------------------------------------- container */

.tac-compliance .tac-roster[b-m09hui5l4g] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-compliance .tac-toolbar[b-m09hui5l4g] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-compliance .tac-toolbar-title[b-m09hui5l4g] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-compliance .tac-toolbar-count[b-m09hui5l4g] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-compliance .tac-toolbar-controls[b-m09hui5l4g] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-compliance .tac-toolbar-actions[b-m09hui5l4g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* SearchBar is a child component. */
.tac-compliance[b-m09hui5l4g]  .search-bar {
    height: 34px;
    width: 280px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance[b-m09hui5l4g]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-compliance[b-m09hui5l4g]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-compliance[b-m09hui5l4g]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-compliance[b-m09hui5l4g]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-compliance[b-m09hui5l4g]  .search-bar .clear-search,
.tac-compliance[b-m09hui5l4g]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* -------------------------------------------------------- loading / empty state */

.tac-compliance .tac-state[b-m09hui5l4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-compliance .tac-state h3[b-m09hui5l4g] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-compliance .tac-state p[b-m09hui5l4g] {
    margin: 0;
    max-width: 52ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-compliance .tac-state .tac-state-eyebrow[b-m09hui5l4g] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Line-art marks instead of the ☰ / 📁 / ⚠ dingbats — a glyph renders in whatever
   face the OS ships and cannot be made to sit in this palette. */
.tac-compliance .tac-state-mark[b-m09hui5l4g] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-compliance .tac-state-mark.tac-state-mark-alert[b-m09hui5l4g] {
    stroke: var(--tac-crit);
    opacity: 0.85;
}

.tac-compliance .tac-spinner[b-m09hui5l4g] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-m09hui5l4g 0.9s linear infinite;
}

@keyframes tac-spin-b-m09hui5l4g {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* overflow-x here at EVERY width is the belt-and-braces that keeps a wide grid
   from pushing the document sideways. */
.tac-compliance .tac-tablewrap[b-m09hui5l4g] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-compliance .tac-table[b-m09hui5l4g] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-compliance .tac-table .tac-th[b-m09hui5l4g] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-compliance .tac-table .tac-th-num[b-m09hui5l4g],
.tac-compliance .tac-table .tac-th-actions[b-m09hui5l4g] {
    text-align: end;
}

.tac-compliance .tac-table .tac-row > td[b-m09hui5l4g] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-compliance .tac-table .tac-row:last-child > td[b-m09hui5l4g] {
    border-bottom: 0;
}

.tac-compliance .tac-table .tac-row[b-m09hui5l4g] {
    background: none;
    transition: background 0.12s ease;
}

.tac-compliance .tac-table .tac-row:hover > td[b-m09hui5l4g] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-compliance .tac-table .tac-cell-num[b-m09hui5l4g] {
    text-align: end;
}

.tac-compliance .tac-table .tac-cell-actions[b-m09hui5l4g] {
    text-align: end;
    white-space: nowrap;
}

.tac-compliance .tac-table .tac-name[b-m09hui5l4g] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-compliance .tac-table .tac-num[b-m09hui5l4g] {
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
}

.tac-compliance .tac-table .date-cell.tac-num[b-m09hui5l4g] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* A SHA-256 is the one cell that has to be mono: an operator compares it glyph by
   glyph against a hash printed somewhere else. */
.tac-compliance .tac-table .tac-hash[b-m09hui5l4g] {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    cursor: help;
}

.tac-compliance .tac-noaction[b-m09hui5l4g] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* ---------------------------------------------------------- dot + label badges */

/* The dot+label convention, borrowed from the agent roster's status badges: a
   semantic dot next to an uppercase mono label. site.css draws .type-label and
   .badge as rounded pills, so the pill is unwound here. */
.tac-compliance .tac-typelabel[b-m09hui5l4g],
.tac-compliance .tac-flag[b-m09hui5l4g] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-compliance .tac-typelabel-platform-windows[b-m09hui5l4g] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-compliance .tac-typelabel-platform-windows .tac-dot[b-m09hui5l4g] { background: var(--tac-acc); }

.tac-compliance .tac-typelabel-platform-linux .tac-dot[b-m09hui5l4g] { background: var(--tac-ink2); }

.tac-compliance .tac-typelabel-platform-any[b-m09hui5l4g] {
    border-style: dashed;
}

.tac-compliance .tac-typelabel-platform-any .tac-dot[b-m09hui5l4g] { background: var(--tac-ink3); }

/* Auto-remediate ON is warn-coloured: that rule is allowed to CHANGE agent state
   on its own, which is exactly the fact an operator scans this column for. */
.tac-compliance .tac-flag.tac-flag-on[b-m09hui5l4g] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-compliance .tac-flag.tac-flag-on .tac-dot[b-m09hui5l4g] { background: var(--tac-warn); }

.tac-compliance .tac-flag.tac-flag-off[b-m09hui5l4g] {
    color: var(--tac-ink3);
    border-color: var(--tac-line);
    background: none;
}

.tac-compliance .tac-flag.tac-flag-off .tac-dot[b-m09hui5l4g] { background: var(--tac-line2); }

/* -------------------------------------------------------------- row action btns */

.tac-compliance .tac-actions[b-m09hui5l4g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of actions reads as one instrument cluster rather than
   a set of competing pills. Hover restores the semantic colour. */
.tac-compliance[b-m09hui5l4g]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance[b-m09hui5l4g]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-compliance[b-m09hui5l4g]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-compliance[b-m09hui5l4g]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-compliance[b-m09hui5l4g]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------------ pagination */

.tac-compliance .tac-pagination[b-m09hui5l4g] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-compliance .tac-pagination .tac-page-info[b-m09hui5l4g] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-compliance .tac-pagination .tac-page-controls[b-m09hui5l4g] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-compliance .tac-pagination .tac-page-btn[b-m09hui5l4g] {
    min-width: 30px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-compliance .tac-pagination .tac-page-btn:hover:not(:disabled)[b-m09hui5l4g] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-compliance .tac-pagination .tac-page-btn:disabled[b-m09hui5l4g] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-compliance .tac-pagination .tac-page-btn:focus-visible[b-m09hui5l4g] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- alert banners */

.tac-compliance .tac-alert[b-m09hui5l4g] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-ink3);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
}

.tac-compliance .tac-alert.tac-alert-crit[b-m09hui5l4g] {
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-compliance .tac-alert.tac-alert-ok[b-m09hui5l4g] {
    border-color: rgba(21, 128, 61, 0.4);
    border-left-color: var(--tac-ok);
    background: rgba(21, 128, 61, 0.06);
    color: var(--tac-ok);
}

.tac-compliance .tac-alert.tac-alert-info[b-m09hui5l4g] {
    border-color: rgba(3, 105, 161, 0.4);
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-compliance .tac-alert .tac-alert-mark[b-m09hui5l4g] {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-compliance .tac-alert .tac-alert-text[b-m09hui5l4g] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tac-compliance .tac-alert .tac-alert-close[b-m09hui5l4g] {
    margin-inline-start: auto;
    width: 22px;
    height: 22px;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
}

.tac-compliance .tac-alert .tac-alert-close:hover[b-m09hui5l4g] {
    border-color: currentColor;
}

.tac-compliance .tac-alert .tac-alert-close:focus-visible[b-m09hui5l4g] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------- forms */

.tac-compliance .tac-form[b-m09hui5l4g],
.tac-modal-overlay .tac-form[b-m09hui5l4g] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tac-compliance .tac-field[b-m09hui5l4g],
.tac-modal-overlay .tac-field[b-m09hui5l4g] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

.tac-compliance .tac-field-row[b-m09hui5l4g],
.tac-modal-overlay .tac-field-row[b-m09hui5l4g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.tac-compliance .tac-label[b-m09hui5l4g],
.tac-modal-overlay .tac-label[b-m09hui5l4g] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-compliance .tac-req[b-m09hui5l4g],
.tac-modal-overlay .tac-req[b-m09hui5l4g] {
    color: var(--tac-crit);
}

.tac-compliance .tac-input[b-m09hui5l4g],
.tac-modal-overlay .tac-input[b-m09hui5l4g] {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink0);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance textarea.tac-input[b-m09hui5l4g],
.tac-modal-overlay textarea.tac-input[b-m09hui5l4g] {
    height: auto;
    min-height: 60px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
}

.tac-compliance .tac-input-num[b-m09hui5l4g],
.tac-modal-overlay .tac-input-num[b-m09hui5l4g] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-compliance .tac-input:focus[b-m09hui5l4g],
.tac-modal-overlay .tac-input:focus[b-m09hui5l4g] {
    outline: none;
    border-color: var(--tac-acc);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.18);
}

.tac-compliance .tac-input[b-m09hui5l4g]::placeholder,
.tac-modal-overlay .tac-input[b-m09hui5l4g]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-compliance .tac-input:disabled[b-m09hui5l4g],
.tac-modal-overlay .tac-input:disabled[b-m09hui5l4g] {
    background: var(--tac-s2);
    color: var(--tac-ink3);
    cursor: not-allowed;
}

.tac-compliance .tac-hint[b-m09hui5l4g],
.tac-modal-overlay .tac-hint[b-m09hui5l4g] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
}

.tac-compliance .tac-check[b-m09hui5l4g],
.tac-modal-overlay .tac-check[b-m09hui5l4g] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 9px;
}

.tac-compliance .tac-check .tac-checkbox[b-m09hui5l4g],
.tac-modal-overlay .tac-check .tac-checkbox[b-m09hui5l4g] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--tac-acc);
    cursor: pointer;
}

.tac-compliance .tac-check .tac-checkbox:disabled[b-m09hui5l4g],
.tac-modal-overlay .tac-check .tac-checkbox:disabled[b-m09hui5l4g] {
    cursor: not-allowed;
}

.tac-compliance .tac-check .tac-hint[b-m09hui5l4g],
.tac-modal-overlay .tac-check .tac-hint[b-m09hui5l4g] {
    grid-column: 2;
}

.tac-compliance .tac-readonly[b-m09hui5l4g],
.tac-modal-overlay .tac-readonly[b-m09hui5l4g] {
    display: block;
    margin: 0;
    padding: 8px 10px;
    border: 1px dashed var(--tac-line2);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    overflow-wrap: anywhere;
}

.tac-compliance .tac-hashblock[b-m09hui5l4g],
.tac-modal-overlay .tac-hashblock[b-m09hui5l4g] {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------- modal */

/* The modal keeps .modal-overlay > .modal and the header/body/footer chain —
   CompliancePageTests drives the create and delete dialogs through exactly those
   selectors. */
.tac-modal-overlay[b-m09hui5l4g] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-m09hui5l4g] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal.tac-modal-wide[b-m09hui5l4g] {
    max-width: 860px;
}

.tac-modal-overlay .tac-modal[b-m09hui5l4g]::before,
.tac-modal-overlay .tac-modal[b-m09hui5l4g]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-m09hui5l4g]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-m09hui5l4g]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-m09hui5l4g] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h2[b-m09hui5l4g] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-close[b-m09hui5l4g] {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
}

.tac-modal-overlay .tac-close:hover[b-m09hui5l4g] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-close:focus-visible[b-m09hui5l4g] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-modal-overlay .tac-modal-body[b-m09hui5l4g] {
    padding: 20px;
    background: none;
}

/* The confirm dialogs stay centred; the form dialogs do not. */
.tac-modal-overlay .confirm-modal .tac-modal-body[b-m09hui5l4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.tac-modal-overlay .tac-confirm-mark[b-m09hui5l4g] {
    width: 42px;
    height: 42px;
    stroke: var(--tac-crit);
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    /* site.css sizes .confirm-icon as a text glyph; it is an <svg> now. */
    font-size: 0;
    line-height: 0;
}

.tac-modal-overlay .tac-modal-body h3[b-m09hui5l4g] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-modal-overlay .confirm-modal .tac-modal-body p[b-m09hui5l4g] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-modal-overlay .tac-warnbox[b-m09hui5l4g] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-align: start;
}

.tac-modal-overlay .tac-alert[b-m09hui5l4g] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-ink3);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
    text-align: start;
}

.tac-modal-overlay .tac-alert.tac-alert-crit[b-m09hui5l4g] {
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-alert.tac-alert-info[b-m09hui5l4g] {
    border-color: rgba(3, 105, 161, 0.4);
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-modal-overlay .tac-alert .tac-alert-text[b-m09hui5l4g] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Monaco draws itself into this box; the frame is a token hairline instead of the
   hardcoded #ccc the inline style used to carry. */
.tac-modal-overlay .tac-monaco[b-m09hui5l4g] {
    height: 240px;
    min-width: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
}

.tac-modal-overlay .tac-modal-foot[b-m09hui5l4g] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* Modal buttons: flat, uppercase, square. */
.tac-modal-overlay .tac-modal-foot .btn[b-m09hui5l4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-m09hui5l4g] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary[b-m09hui5l4g] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-m09hui5l4g] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-m09hui5l4g] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-m09hui5l4g] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-m09hui5l4g] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-m09hui5l4g] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ responsive */

/* Tablet: the toolbar stops trying to fit on one line, and paired fields stack. */
@media (max-width: 1023px) {
    .tac-compliance .tac-toolbar-controls[b-m09hui5l4g] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-compliance[b-m09hui5l4g]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-compliance .tac-toolbar-actions[b-m09hui5l4g] {
        margin-inline-start: auto;
    }

    .tac-compliance .tac-field-row[b-m09hui5l4g],
    .tac-modal-overlay .tac-field-row[b-m09hui5l4g] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phone: a seven- or eight-column grid cannot honestly fit, and responsive.css
   builds its card layout only for .agents-table / .audit-table / .scheduler-table
   — not for a bare .data-table. So these pages restack their OWN rows as labelled
   cards, from the data-label attribute every <td> carries. */
@media (max-width: 767px) {
    .tac-compliance[b-m09hui5l4g] {
        gap: 12px;
    }

    .tac-compliance .tac-pagetitle[b-m09hui5l4g] {
        font-size: 20px;
    }

    .tac-compliance[b-m09hui5l4g]  .compliance-tabs .tab-btn {
        padding: 0 11px;
        letter-spacing: 0.1em;
    }

    .tac-compliance .tac-toolbar[b-m09hui5l4g] {
        padding: 12px;
        gap: 10px;
    }

    .tac-compliance .tac-tablewrap[b-m09hui5l4g] {
        overflow-x: hidden;
    }

    .tac-compliance .tac-table[b-m09hui5l4g],
    .tac-compliance .tac-table tbody[b-m09hui5l4g] {
        display: block;
    }

    .tac-compliance .tac-table thead[b-m09hui5l4g] {
        position: absolute;
        left: -9999px;
    }

    .tac-compliance .tac-table .tac-row[b-m09hui5l4g] {
        display: block;
        margin: 12px;
        padding: 10px 12px;
        border: 1px solid var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-compliance .tac-table .tac-row > td[b-m09hui5l4g] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid var(--tac-line);
        text-align: start;
    }

    .tac-compliance .tac-table .tac-row > td:last-child[b-m09hui5l4g] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .tac-compliance .tac-table .tac-row > td[b-m09hui5l4g]::before {
        content: attr(data-label);
        flex: none;
        font-family: var(--tac-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-compliance .tac-pagination[b-m09hui5l4g] {
        padding: 10px 12px;
    }

    .tac-compliance .tac-pagination .tac-page-controls[b-m09hui5l4g] {
        margin-inline-start: 0;
    }

    .tac-modal-overlay .tac-modal-body[b-m09hui5l4g] {
        padding: 14px;
    }

    .tac-modal-overlay .tac-monaco[b-m09hui5l4g] {
        height: 180px;
    }
}

/* Nothing on these pages animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-compliance *[b-m09hui5l4g],
    .tac-compliance[b-m09hui5l4g]  *,
    .tac-modal-overlay *[b-m09hui5l4g] {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   PAGE-SPECIFIC — BaselineEdit (ordered rule-membership editor)
   ----------------------------------------------------------------------------
   Everything below used to live in inline style="" attributes on the markup:
   flex ratios, 6px radii, borders hardcoded to #ddd / #eee, and a
   var(--border-color) fallback from the pre-tactical palette. Moving it here is
   what lets this screen read from the same --tac-* tokens as every other page.
   ============================================================================ */

.tac-compliance .tac-editor[b-m09hui5l4g] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

.tac-compliance .tac-editor-body[b-m09hui5l4g] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 16px;
    margin: 0;
    background: none;
    border: 0;
}

/* The identity fields sit two-up at desktop; NameHint / description need the room
   below 1023px, where the shared base collapses .tac-field-row to one column. */
.tac-compliance .tac-editor-body .tac-form[b-m09hui5l4g] {
    gap: 14px;
}

.tac-compliance .tac-editor-foot[b-m09hui5l4g] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* ------------------------------------------------------------------- the mover */

.tac-compliance .tac-mover[b-m09hui5l4g] {
    display: grid;
    /* 1fr / 1.4fr — the Selected side carries an order index and three controls on
       top of the rule name, so it needs the extra track. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 16px;
    min-width: 0;
}

.tac-compliance .tac-mover-col[b-m09hui5l4g] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
}

/* The Selected column is where the work lands, so it gets the accent edge. */
.tac-compliance .tac-mover-selected[b-m09hui5l4g] {
    border-left: 2px solid var(--tac-acc);
    background: var(--tac-s1);
}

.tac-compliance .tac-mover-head[b-m09hui5l4g] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tac-line);
}

.tac-compliance .tac-mover-title[b-m09hui5l4g] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-compliance .tac-mover-count[b-m09hui5l4g] {
    margin-inline-start: auto;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    color: var(--tac-acc);
}

.tac-compliance .tac-mover-hint[b-m09hui5l4g] {
    margin: 0;
}

.tac-compliance .tac-mover-empty[b-m09hui5l4g] {
    margin: 0;
    padding: 18px 4px;
    color: var(--tac-ink3);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
}

.tac-compliance .tac-mover-list[b-m09hui5l4g] {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    /* 500 rules is a supported load (the picker requests pageSize 500), so the
       column scrolls itself rather than the page. */
    max-height: 340px;
    overflow-y: auto;
}

.tac-compliance .tac-mover-item[b-m09hui5l4g] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 4px;
    border-bottom: 1px solid var(--tac-line);
}

.tac-compliance .tac-mover-item:last-child[b-m09hui5l4g] {
    border-bottom: 0;
}

.tac-compliance .tac-mover-item:hover[b-m09hui5l4g] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-compliance .tac-mover-item-drag[b-m09hui5l4g] {
    cursor: move;
}

.tac-compliance .tac-mover-order[b-m09hui5l4g] {
    flex: none;
    min-width: 2.2ch;
    text-align: end;
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    color: var(--tac-ink3);
}

.tac-compliance .tac-mover-name[b-m09hui5l4g] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink);
}

.tac-compliance .tac-mover-selected .tac-mover-name[b-m09hui5l4g] {
    font-weight: 600;
    color: var(--tac-ink0);
}

/* The Add button is a flat mono chip, not a pill. */
.tac-compliance .tac-mover-add[b-m09hui5l4g] {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-compliance .tac-mover-add:hover:not(:disabled)[b-m09hui5l4g] {
    border-color: var(--tac-acc);
    color: var(--tac-acc);
    background: var(--tac-s1);
    transform: none;
    box-shadow: none;
}

.tac-compliance .tac-mover-add:focus-visible[b-m09hui5l4g] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-compliance .tac-mover-actions[b-m09hui5l4g] {
    display: flex;
    gap: 3px;
    flex: none;
}

/* Move up / Move down / Remove were ▲ ▼ × dingbats; they are line art now, and
   they keep the aria-label + title CompliancePageTests and screen readers use. */
.tac-compliance .tac-mover-btn[b-m09hui5l4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink2);
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-compliance .tac-mover-btn svg[b-m09hui5l4g] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-compliance .tac-mover-btn:hover:not(:disabled)[b-m09hui5l4g] {
    border-color: var(--tac-acc);
    color: var(--tac-acc);
    background: var(--tac-s1);
    transform: none;
    box-shadow: none;
}

.tac-compliance .tac-mover-btn-remove:hover:not(:disabled)[b-m09hui5l4g] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-compliance .tac-mover-btn:disabled[b-m09hui5l4g] {
    opacity: 0.35;
    cursor: not-allowed;
}

.tac-compliance .tac-mover-btn:focus-visible[b-m09hui5l4g] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* The loading panel is a bracket-ticked panel of its own on this page (there is no
   roster to sit inside), so it needs the padding a .tac-panel would otherwise get
   from its toolbar. */
.tac-compliance .tac-state.tac-panel[b-m09hui5l4g] {
    padding: 48px 20px;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1023px) {
    .tac-compliance .tac-mover[b-m09hui5l4g] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-compliance .tac-mover-list[b-m09hui5l4g] {
        max-height: 260px;
    }
}

@media (max-width: 767px) {
    .tac-compliance .tac-editor-body[b-m09hui5l4g] {
        padding: 14px 12px;
        gap: 14px;
    }

    .tac-compliance .tac-mover-col[b-m09hui5l4g] {
        padding: 10px;
    }

    .tac-compliance .tac-editor-foot[b-m09hui5l4g] {
        padding: 12px;
    }
}
/* _content/Athena.Server/Pages/Compliance/Baselines.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Compliance — SHARED BASE
   ----------------------------------------------------------------------------
   The four Compliance screens (Rules / Baselines / BaselineEdit / Assignments)
   were missed by the site-wide restyle because its enumeration globbed
   Pages/*.razor, which does not recurse into Pages/Compliance/. There is no
   Mock/tactical-ops artboard for compliance, so the look is DERIVED from the
   shipped conversions (Login, Agents, Collections) and the vocabulary below is
   deliberately the SAME vocabulary Collections.razor.css uses: panel + scan line
   + bracket ticks, mono toolbar counts, mono table, dot+label badges, line-art
   marks, flat square buttons.

   This block is IDENTICAL in all four scoped stylesheets on purpose — Blazor CSS
   isolation gives each file its own [b-xxxxx] attribute, so a rule written here
   can only ever match the page it is scoped to. Sharing the text is what keeps
   the four screens from drifting apart; each file appends its own page-specific
   section after this base.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, linked first in _Host, so every tactical-ops
   page reads one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   These pages are built out of class names site.css shares with up to 41 other
   screens (.content-card, .card-header, .card-title, .data-table, .type-label,
   .badge, .pagination, .form-group, .form-control, .modal ...). Blazor scoping
   alone would keep a bare `.card-title { }` rule from leaking, but it would still
   fight site.css on THIS page in ways that are invisible from the other 40. So
   the markup carries a NEW .tac-* class next to every legacy one, and every
   selector below hangs off a .tac-* name. The legacy classes stay on the elements
   untouched because Athena.E2ETests/CompliancePageTests and site.css both select
   on them.

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so
   an equal-specificity .tac-* rule wins on source order. Where site.css is more
   specific the rule below is written long enough to outrank it.

   ComplianceTabNavigation, SearchBar and ActionButton are CHILD components: their
   DOM never carries this component's scope attribute, so those rules go through
   ::deep from a .tac-* ancestor that does.
   ============================================================================ */

.tac-compliance[b-svqsnypznl] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* These screens must never be the reason the document scrolls sideways —
       the responsive breakpoint suites assert zero page overflow. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-compliance .tac-panel[b-svqsnypznl] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-compliance .tac-panel[b-svqsnypznl]::before,
.tac-compliance .tac-panel[b-svqsnypznl]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-compliance .tac-panel[b-svqsnypznl]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-compliance .tac-panel[b-svqsnypznl]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-compliance .tac-scan[b-svqsnypznl] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

/* Every count, id, hash and timestamp on these pages is mono and tabular so
   columns of digits line up vertically. */
.tac-compliance .tac-num[b-svqsnypznl] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-compliance .tac-dot[b-svqsnypznl] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-compliance .tac-eyebrow[b-svqsnypznl] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Flat, square, uppercase — the same button the login panel and the collection
   roster use. Only ever applied through a .tac-btn class the markup opts into. */
.tac-compliance .tac-btn[b-svqsnypznl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-compliance .tac-btn:hover:not(:disabled)[b-svqsnypznl] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-compliance .tac-btn.tac-btn-primary[b-svqsnypznl] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-compliance .tac-btn.tac-btn-primary:hover:not(:disabled)[b-svqsnypznl] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-compliance .tac-btn:disabled[b-svqsnypznl] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-compliance .tac-btn:focus-visible[b-svqsnypznl] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------- tab strip */

/* ComplianceTabNavigation is a child component (Components/Compliance), shared by
   these four pages and nothing else. It is reached through ::deep rather than
   edited, so the component itself stays a plain NavLink strip and no other screen
   can be affected. */
.tac-compliance[b-svqsnypznl]  .compliance-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
}

.tac-compliance[b-svqsnypznl]  .compliance-tabs .tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tac-compliance[b-svqsnypznl]  .compliance-tabs .tab-btn:hover {
    color: var(--tac-ink0);
    background: none;
    transform: none;
}

.tac-compliance[b-svqsnypznl]  .compliance-tabs .tab-btn.active {
    color: var(--tac-acc);
    border-bottom-color: var(--tac-acc);
    background: none;
    font-weight: 600;
}

.tac-compliance[b-svqsnypznl]  .compliance-tabs .tab-btn:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------- page head */

.tac-compliance .tac-pagehead[b-svqsnypznl] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-compliance .tac-pagehead-text[b-svqsnypznl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the shell's only <h1> ("Compliance"). */
.tac-compliance .tac-pagetitle[b-svqsnypznl] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-compliance .tac-pagesub[b-svqsnypznl] {
    margin: 0;
    max-width: 78ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.55;
}

/* ------------------------------------------------------------------- container */

.tac-compliance .tac-roster[b-svqsnypznl] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-compliance .tac-toolbar[b-svqsnypznl] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-compliance .tac-toolbar-title[b-svqsnypznl] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-compliance .tac-toolbar-count[b-svqsnypznl] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-compliance .tac-toolbar-controls[b-svqsnypznl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-compliance .tac-toolbar-actions[b-svqsnypznl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* SearchBar is a child component. */
.tac-compliance[b-svqsnypznl]  .search-bar {
    height: 34px;
    width: 280px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance[b-svqsnypznl]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-compliance[b-svqsnypznl]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-compliance[b-svqsnypznl]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-compliance[b-svqsnypznl]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-compliance[b-svqsnypznl]  .search-bar .clear-search,
.tac-compliance[b-svqsnypznl]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* -------------------------------------------------------- loading / empty state */

.tac-compliance .tac-state[b-svqsnypznl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-compliance .tac-state h3[b-svqsnypznl] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-compliance .tac-state p[b-svqsnypznl] {
    margin: 0;
    max-width: 52ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-compliance .tac-state .tac-state-eyebrow[b-svqsnypznl] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Line-art marks instead of the ☰ / 📁 / ⚠ dingbats — a glyph renders in whatever
   face the OS ships and cannot be made to sit in this palette. */
.tac-compliance .tac-state-mark[b-svqsnypznl] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-compliance .tac-state-mark.tac-state-mark-alert[b-svqsnypznl] {
    stroke: var(--tac-crit);
    opacity: 0.85;
}

.tac-compliance .tac-spinner[b-svqsnypznl] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-svqsnypznl 0.9s linear infinite;
}

@keyframes tac-spin-b-svqsnypznl {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* overflow-x here at EVERY width is the belt-and-braces that keeps a wide grid
   from pushing the document sideways. */
.tac-compliance .tac-tablewrap[b-svqsnypznl] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-compliance .tac-table[b-svqsnypznl] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-compliance .tac-table .tac-th[b-svqsnypznl] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-compliance .tac-table .tac-th-num[b-svqsnypznl],
.tac-compliance .tac-table .tac-th-actions[b-svqsnypznl] {
    text-align: end;
}

.tac-compliance .tac-table .tac-row > td[b-svqsnypznl] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-compliance .tac-table .tac-row:last-child > td[b-svqsnypznl] {
    border-bottom: 0;
}

.tac-compliance .tac-table .tac-row[b-svqsnypznl] {
    background: none;
    transition: background 0.12s ease;
}

.tac-compliance .tac-table .tac-row:hover > td[b-svqsnypznl] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-compliance .tac-table .tac-cell-num[b-svqsnypznl] {
    text-align: end;
}

.tac-compliance .tac-table .tac-cell-actions[b-svqsnypznl] {
    text-align: end;
    white-space: nowrap;
}

.tac-compliance .tac-table .tac-name[b-svqsnypznl] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-compliance .tac-table .tac-num[b-svqsnypznl] {
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
}

.tac-compliance .tac-table .date-cell.tac-num[b-svqsnypznl] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* A SHA-256 is the one cell that has to be mono: an operator compares it glyph by
   glyph against a hash printed somewhere else. */
.tac-compliance .tac-table .tac-hash[b-svqsnypznl] {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    cursor: help;
}

.tac-compliance .tac-noaction[b-svqsnypznl] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* ---------------------------------------------------------- dot + label badges */

/* The dot+label convention, borrowed from the agent roster's status badges: a
   semantic dot next to an uppercase mono label. site.css draws .type-label and
   .badge as rounded pills, so the pill is unwound here. */
.tac-compliance .tac-typelabel[b-svqsnypznl],
.tac-compliance .tac-flag[b-svqsnypznl] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-compliance .tac-typelabel-platform-windows[b-svqsnypznl] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-compliance .tac-typelabel-platform-windows .tac-dot[b-svqsnypznl] { background: var(--tac-acc); }

.tac-compliance .tac-typelabel-platform-linux .tac-dot[b-svqsnypznl] { background: var(--tac-ink2); }

.tac-compliance .tac-typelabel-platform-any[b-svqsnypznl] {
    border-style: dashed;
}

.tac-compliance .tac-typelabel-platform-any .tac-dot[b-svqsnypznl] { background: var(--tac-ink3); }

/* Auto-remediate ON is warn-coloured: that rule is allowed to CHANGE agent state
   on its own, which is exactly the fact an operator scans this column for. */
.tac-compliance .tac-flag.tac-flag-on[b-svqsnypznl] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-compliance .tac-flag.tac-flag-on .tac-dot[b-svqsnypznl] { background: var(--tac-warn); }

.tac-compliance .tac-flag.tac-flag-off[b-svqsnypznl] {
    color: var(--tac-ink3);
    border-color: var(--tac-line);
    background: none;
}

.tac-compliance .tac-flag.tac-flag-off .tac-dot[b-svqsnypznl] { background: var(--tac-line2); }

/* -------------------------------------------------------------- row action btns */

.tac-compliance .tac-actions[b-svqsnypznl] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of actions reads as one instrument cluster rather than
   a set of competing pills. Hover restores the semantic colour. */
.tac-compliance[b-svqsnypznl]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance[b-svqsnypznl]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-compliance[b-svqsnypznl]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-compliance[b-svqsnypznl]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-compliance[b-svqsnypznl]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------------ pagination */

.tac-compliance .tac-pagination[b-svqsnypznl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-compliance .tac-pagination .tac-page-info[b-svqsnypznl] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-compliance .tac-pagination .tac-page-controls[b-svqsnypznl] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-compliance .tac-pagination .tac-page-btn[b-svqsnypznl] {
    min-width: 30px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-compliance .tac-pagination .tac-page-btn:hover:not(:disabled)[b-svqsnypznl] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-compliance .tac-pagination .tac-page-btn:disabled[b-svqsnypznl] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-compliance .tac-pagination .tac-page-btn:focus-visible[b-svqsnypznl] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- alert banners */

.tac-compliance .tac-alert[b-svqsnypznl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-ink3);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
}

.tac-compliance .tac-alert.tac-alert-crit[b-svqsnypznl] {
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-compliance .tac-alert.tac-alert-ok[b-svqsnypznl] {
    border-color: rgba(21, 128, 61, 0.4);
    border-left-color: var(--tac-ok);
    background: rgba(21, 128, 61, 0.06);
    color: var(--tac-ok);
}

.tac-compliance .tac-alert.tac-alert-info[b-svqsnypznl] {
    border-color: rgba(3, 105, 161, 0.4);
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-compliance .tac-alert .tac-alert-mark[b-svqsnypznl] {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-compliance .tac-alert .tac-alert-text[b-svqsnypznl] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tac-compliance .tac-alert .tac-alert-close[b-svqsnypznl] {
    margin-inline-start: auto;
    width: 22px;
    height: 22px;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
}

.tac-compliance .tac-alert .tac-alert-close:hover[b-svqsnypznl] {
    border-color: currentColor;
}

.tac-compliance .tac-alert .tac-alert-close:focus-visible[b-svqsnypznl] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------- forms */

.tac-compliance .tac-form[b-svqsnypznl],
.tac-modal-overlay .tac-form[b-svqsnypznl] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tac-compliance .tac-field[b-svqsnypznl],
.tac-modal-overlay .tac-field[b-svqsnypznl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

.tac-compliance .tac-field-row[b-svqsnypznl],
.tac-modal-overlay .tac-field-row[b-svqsnypznl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.tac-compliance .tac-label[b-svqsnypznl],
.tac-modal-overlay .tac-label[b-svqsnypznl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-compliance .tac-req[b-svqsnypznl],
.tac-modal-overlay .tac-req[b-svqsnypznl] {
    color: var(--tac-crit);
}

.tac-compliance .tac-input[b-svqsnypznl],
.tac-modal-overlay .tac-input[b-svqsnypznl] {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink0);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance textarea.tac-input[b-svqsnypznl],
.tac-modal-overlay textarea.tac-input[b-svqsnypznl] {
    height: auto;
    min-height: 60px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
}

.tac-compliance .tac-input-num[b-svqsnypznl],
.tac-modal-overlay .tac-input-num[b-svqsnypznl] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-compliance .tac-input:focus[b-svqsnypznl],
.tac-modal-overlay .tac-input:focus[b-svqsnypznl] {
    outline: none;
    border-color: var(--tac-acc);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.18);
}

.tac-compliance .tac-input[b-svqsnypznl]::placeholder,
.tac-modal-overlay .tac-input[b-svqsnypznl]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-compliance .tac-input:disabled[b-svqsnypznl],
.tac-modal-overlay .tac-input:disabled[b-svqsnypznl] {
    background: var(--tac-s2);
    color: var(--tac-ink3);
    cursor: not-allowed;
}

.tac-compliance .tac-hint[b-svqsnypznl],
.tac-modal-overlay .tac-hint[b-svqsnypznl] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
}

.tac-compliance .tac-check[b-svqsnypznl],
.tac-modal-overlay .tac-check[b-svqsnypznl] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 9px;
}

.tac-compliance .tac-check .tac-checkbox[b-svqsnypznl],
.tac-modal-overlay .tac-check .tac-checkbox[b-svqsnypznl] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--tac-acc);
    cursor: pointer;
}

.tac-compliance .tac-check .tac-checkbox:disabled[b-svqsnypznl],
.tac-modal-overlay .tac-check .tac-checkbox:disabled[b-svqsnypznl] {
    cursor: not-allowed;
}

.tac-compliance .tac-check .tac-hint[b-svqsnypznl],
.tac-modal-overlay .tac-check .tac-hint[b-svqsnypznl] {
    grid-column: 2;
}

.tac-compliance .tac-readonly[b-svqsnypznl],
.tac-modal-overlay .tac-readonly[b-svqsnypznl] {
    display: block;
    margin: 0;
    padding: 8px 10px;
    border: 1px dashed var(--tac-line2);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    overflow-wrap: anywhere;
}

.tac-compliance .tac-hashblock[b-svqsnypznl],
.tac-modal-overlay .tac-hashblock[b-svqsnypznl] {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------- modal */

/* The modal keeps .modal-overlay > .modal and the header/body/footer chain —
   CompliancePageTests drives the create and delete dialogs through exactly those
   selectors. */
.tac-modal-overlay[b-svqsnypznl] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-svqsnypznl] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal.tac-modal-wide[b-svqsnypznl] {
    max-width: 860px;
}

.tac-modal-overlay .tac-modal[b-svqsnypznl]::before,
.tac-modal-overlay .tac-modal[b-svqsnypznl]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-svqsnypznl]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-svqsnypznl]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-svqsnypznl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h2[b-svqsnypznl] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-close[b-svqsnypznl] {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
}

.tac-modal-overlay .tac-close:hover[b-svqsnypznl] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-close:focus-visible[b-svqsnypznl] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-modal-overlay .tac-modal-body[b-svqsnypznl] {
    padding: 20px;
    background: none;
}

/* The confirm dialogs stay centred; the form dialogs do not. */
.tac-modal-overlay .confirm-modal .tac-modal-body[b-svqsnypznl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.tac-modal-overlay .tac-confirm-mark[b-svqsnypznl] {
    width: 42px;
    height: 42px;
    stroke: var(--tac-crit);
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    /* site.css sizes .confirm-icon as a text glyph; it is an <svg> now. */
    font-size: 0;
    line-height: 0;
}

.tac-modal-overlay .tac-modal-body h3[b-svqsnypznl] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-modal-overlay .confirm-modal .tac-modal-body p[b-svqsnypznl] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-modal-overlay .tac-warnbox[b-svqsnypznl] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-align: start;
}

.tac-modal-overlay .tac-alert[b-svqsnypznl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-ink3);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
    text-align: start;
}

.tac-modal-overlay .tac-alert.tac-alert-crit[b-svqsnypznl] {
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-alert.tac-alert-info[b-svqsnypznl] {
    border-color: rgba(3, 105, 161, 0.4);
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-modal-overlay .tac-alert .tac-alert-text[b-svqsnypznl] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Monaco draws itself into this box; the frame is a token hairline instead of the
   hardcoded #ccc the inline style used to carry. */
.tac-modal-overlay .tac-monaco[b-svqsnypznl] {
    height: 240px;
    min-width: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
}

.tac-modal-overlay .tac-modal-foot[b-svqsnypznl] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* Modal buttons: flat, uppercase, square. */
.tac-modal-overlay .tac-modal-foot .btn[b-svqsnypznl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-svqsnypznl] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary[b-svqsnypznl] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-svqsnypznl] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-svqsnypznl] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-svqsnypznl] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-svqsnypznl] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-svqsnypznl] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ responsive */

/* Tablet: the toolbar stops trying to fit on one line, and paired fields stack. */
@media (max-width: 1023px) {
    .tac-compliance .tac-toolbar-controls[b-svqsnypznl] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-compliance[b-svqsnypznl]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-compliance .tac-toolbar-actions[b-svqsnypznl] {
        margin-inline-start: auto;
    }

    .tac-compliance .tac-field-row[b-svqsnypznl],
    .tac-modal-overlay .tac-field-row[b-svqsnypznl] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phone: a seven- or eight-column grid cannot honestly fit, and responsive.css
   builds its card layout only for .agents-table / .audit-table / .scheduler-table
   — not for a bare .data-table. So these pages restack their OWN rows as labelled
   cards, from the data-label attribute every <td> carries. */
@media (max-width: 767px) {
    .tac-compliance[b-svqsnypznl] {
        gap: 12px;
    }

    .tac-compliance .tac-pagetitle[b-svqsnypznl] {
        font-size: 20px;
    }

    .tac-compliance[b-svqsnypznl]  .compliance-tabs .tab-btn {
        padding: 0 11px;
        letter-spacing: 0.1em;
    }

    .tac-compliance .tac-toolbar[b-svqsnypznl] {
        padding: 12px;
        gap: 10px;
    }

    .tac-compliance .tac-tablewrap[b-svqsnypznl] {
        overflow-x: hidden;
    }

    .tac-compliance .tac-table[b-svqsnypznl],
    .tac-compliance .tac-table tbody[b-svqsnypznl] {
        display: block;
    }

    .tac-compliance .tac-table thead[b-svqsnypznl] {
        position: absolute;
        left: -9999px;
    }

    .tac-compliance .tac-table .tac-row[b-svqsnypznl] {
        display: block;
        margin: 12px;
        padding: 10px 12px;
        border: 1px solid var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-compliance .tac-table .tac-row > td[b-svqsnypznl] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid var(--tac-line);
        text-align: start;
    }

    .tac-compliance .tac-table .tac-row > td:last-child[b-svqsnypznl] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .tac-compliance .tac-table .tac-row > td[b-svqsnypznl]::before {
        content: attr(data-label);
        flex: none;
        font-family: var(--tac-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-compliance .tac-pagination[b-svqsnypznl] {
        padding: 10px 12px;
    }

    .tac-compliance .tac-pagination .tac-page-controls[b-svqsnypznl] {
        margin-inline-start: 0;
    }

    .tac-modal-overlay .tac-modal-body[b-svqsnypznl] {
        padding: 14px;
    }

    .tac-modal-overlay .tac-monaco[b-svqsnypznl] {
        height: 180px;
    }
}

/* Nothing on these pages animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-compliance *[b-svqsnypznl],
    .tac-compliance[b-svqsnypznl]  *,
    .tac-modal-overlay *[b-svqsnypznl] {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   PAGE-SPECIFIC — Baselines
   ============================================================================ */

/* The name cell leads with a line-art stack mark — a baseline IS an ordered stack
   of rules, and the mark is the only thing carrying that idea in a three-column
   grid. It is decoration, not data, so it is aria-hidden in the markup. */
.tac-compliance .tac-identity[b-svqsnypznl] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tac-compliance .tac-rowmark[b-svqsnypznl] {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
}

/* A baseline row is not clickable — Edit is the only drill-in and it is an explicit
   action button. */
.tac-compliance .tac-table .tac-row[b-svqsnypznl] {
    cursor: default;
}

/* Desktop/tablet ONLY — below 768px the row is a stacked card, where a min-width
   would fight the 375px viewport the overflow suite checks. */
@media (min-width: 768px) {
    .tac-compliance .tac-table td:first-child[b-svqsnypznl] {
        min-width: 200px;
    }
}

/* The delete dialog can surface a failure banner under the warning box; it is the
   one alert inside a centre-aligned confirm body, so it reads left-aligned. */
.tac-modal-overlay .confirm-modal .tac-alert[b-svqsnypznl] {
    width: 100%;
    margin-top: 4px;
}
/* _content/Athena.Server/Pages/Compliance/Rules.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Compliance — SHARED BASE
   ----------------------------------------------------------------------------
   The four Compliance screens (Rules / Baselines / BaselineEdit / Assignments)
   were missed by the site-wide restyle because its enumeration globbed
   Pages/*.razor, which does not recurse into Pages/Compliance/. There is no
   Mock/tactical-ops artboard for compliance, so the look is DERIVED from the
   shipped conversions (Login, Agents, Collections) and the vocabulary below is
   deliberately the SAME vocabulary Collections.razor.css uses: panel + scan line
   + bracket ticks, mono toolbar counts, mono table, dot+label badges, line-art
   marks, flat square buttons.

   This block is IDENTICAL in all four scoped stylesheets on purpose — Blazor CSS
   isolation gives each file its own [b-xxxxx] attribute, so a rule written here
   can only ever match the page it is scoped to. Sharing the text is what keeps
   the four screens from drifting apart; each file appends its own page-specific
   section after this base.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, linked first in _Host, so every tactical-ops
   page reads one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   These pages are built out of class names site.css shares with up to 41 other
   screens (.content-card, .card-header, .card-title, .data-table, .type-label,
   .badge, .pagination, .form-group, .form-control, .modal ...). Blazor scoping
   alone would keep a bare `.card-title { }` rule from leaking, but it would still
   fight site.css on THIS page in ways that are invisible from the other 40. So
   the markup carries a NEW .tac-* class next to every legacy one, and every
   selector below hangs off a .tac-* name. The legacy classes stay on the elements
   untouched because Athena.E2ETests/CompliancePageTests and site.css both select
   on them.

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so
   an equal-specificity .tac-* rule wins on source order. Where site.css is more
   specific the rule below is written long enough to outrank it.

   ComplianceTabNavigation, SearchBar and ActionButton are CHILD components: their
   DOM never carries this component's scope attribute, so those rules go through
   ::deep from a .tac-* ancestor that does.
   ============================================================================ */

.tac-compliance[b-r26hpdke3w] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* These screens must never be the reason the document scrolls sideways —
       the responsive breakpoint suites assert zero page overflow. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-compliance .tac-panel[b-r26hpdke3w] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-compliance .tac-panel[b-r26hpdke3w]::before,
.tac-compliance .tac-panel[b-r26hpdke3w]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-compliance .tac-panel[b-r26hpdke3w]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-compliance .tac-panel[b-r26hpdke3w]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-compliance .tac-scan[b-r26hpdke3w] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

/* Every count, id, hash and timestamp on these pages is mono and tabular so
   columns of digits line up vertically. */
.tac-compliance .tac-num[b-r26hpdke3w] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-compliance .tac-dot[b-r26hpdke3w] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-compliance .tac-eyebrow[b-r26hpdke3w] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Flat, square, uppercase — the same button the login panel and the collection
   roster use. Only ever applied through a .tac-btn class the markup opts into. */
.tac-compliance .tac-btn[b-r26hpdke3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-compliance .tac-btn:hover:not(:disabled)[b-r26hpdke3w] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-compliance .tac-btn.tac-btn-primary[b-r26hpdke3w] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-compliance .tac-btn.tac-btn-primary:hover:not(:disabled)[b-r26hpdke3w] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-compliance .tac-btn:disabled[b-r26hpdke3w] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-compliance .tac-btn:focus-visible[b-r26hpdke3w] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------- tab strip */

/* ComplianceTabNavigation is a child component (Components/Compliance), shared by
   these four pages and nothing else. It is reached through ::deep rather than
   edited, so the component itself stays a plain NavLink strip and no other screen
   can be affected. */
.tac-compliance[b-r26hpdke3w]  .compliance-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
}

.tac-compliance[b-r26hpdke3w]  .compliance-tabs .tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tac-compliance[b-r26hpdke3w]  .compliance-tabs .tab-btn:hover {
    color: var(--tac-ink0);
    background: none;
    transform: none;
}

.tac-compliance[b-r26hpdke3w]  .compliance-tabs .tab-btn.active {
    color: var(--tac-acc);
    border-bottom-color: var(--tac-acc);
    background: none;
    font-weight: 600;
}

.tac-compliance[b-r26hpdke3w]  .compliance-tabs .tab-btn:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------- page head */

.tac-compliance .tac-pagehead[b-r26hpdke3w] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-compliance .tac-pagehead-text[b-r26hpdke3w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the shell's only <h1> ("Compliance"). */
.tac-compliance .tac-pagetitle[b-r26hpdke3w] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-compliance .tac-pagesub[b-r26hpdke3w] {
    margin: 0;
    max-width: 78ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.55;
}

/* ------------------------------------------------------------------- container */

.tac-compliance .tac-roster[b-r26hpdke3w] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-compliance .tac-toolbar[b-r26hpdke3w] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-compliance .tac-toolbar-title[b-r26hpdke3w] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-compliance .tac-toolbar-count[b-r26hpdke3w] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-compliance .tac-toolbar-controls[b-r26hpdke3w] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-compliance .tac-toolbar-actions[b-r26hpdke3w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* SearchBar is a child component. */
.tac-compliance[b-r26hpdke3w]  .search-bar {
    height: 34px;
    width: 280px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance[b-r26hpdke3w]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-compliance[b-r26hpdke3w]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-compliance[b-r26hpdke3w]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-compliance[b-r26hpdke3w]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-compliance[b-r26hpdke3w]  .search-bar .clear-search,
.tac-compliance[b-r26hpdke3w]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* -------------------------------------------------------- loading / empty state */

.tac-compliance .tac-state[b-r26hpdke3w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-compliance .tac-state h3[b-r26hpdke3w] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-compliance .tac-state p[b-r26hpdke3w] {
    margin: 0;
    max-width: 52ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-compliance .tac-state .tac-state-eyebrow[b-r26hpdke3w] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Line-art marks instead of the ☰ / 📁 / ⚠ dingbats — a glyph renders in whatever
   face the OS ships and cannot be made to sit in this palette. */
.tac-compliance .tac-state-mark[b-r26hpdke3w] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-compliance .tac-state-mark.tac-state-mark-alert[b-r26hpdke3w] {
    stroke: var(--tac-crit);
    opacity: 0.85;
}

.tac-compliance .tac-spinner[b-r26hpdke3w] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-r26hpdke3w 0.9s linear infinite;
}

@keyframes tac-spin-b-r26hpdke3w {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* overflow-x here at EVERY width is the belt-and-braces that keeps a wide grid
   from pushing the document sideways. */
.tac-compliance .tac-tablewrap[b-r26hpdke3w] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-compliance .tac-table[b-r26hpdke3w] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-compliance .tac-table .tac-th[b-r26hpdke3w] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-compliance .tac-table .tac-th-num[b-r26hpdke3w],
.tac-compliance .tac-table .tac-th-actions[b-r26hpdke3w] {
    text-align: end;
}

.tac-compliance .tac-table .tac-row > td[b-r26hpdke3w] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-compliance .tac-table .tac-row:last-child > td[b-r26hpdke3w] {
    border-bottom: 0;
}

.tac-compliance .tac-table .tac-row[b-r26hpdke3w] {
    background: none;
    transition: background 0.12s ease;
}

.tac-compliance .tac-table .tac-row:hover > td[b-r26hpdke3w] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-compliance .tac-table .tac-cell-num[b-r26hpdke3w] {
    text-align: end;
}

.tac-compliance .tac-table .tac-cell-actions[b-r26hpdke3w] {
    text-align: end;
    white-space: nowrap;
}

.tac-compliance .tac-table .tac-name[b-r26hpdke3w] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-compliance .tac-table .tac-num[b-r26hpdke3w] {
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
}

.tac-compliance .tac-table .date-cell.tac-num[b-r26hpdke3w] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* A SHA-256 is the one cell that has to be mono: an operator compares it glyph by
   glyph against a hash printed somewhere else. */
.tac-compliance .tac-table .tac-hash[b-r26hpdke3w] {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    cursor: help;
}

.tac-compliance .tac-noaction[b-r26hpdke3w] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* ---------------------------------------------------------- dot + label badges */

/* The dot+label convention, borrowed from the agent roster's status badges: a
   semantic dot next to an uppercase mono label. site.css draws .type-label and
   .badge as rounded pills, so the pill is unwound here. */
.tac-compliance .tac-typelabel[b-r26hpdke3w],
.tac-compliance .tac-flag[b-r26hpdke3w] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-compliance .tac-typelabel-platform-windows[b-r26hpdke3w] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-compliance .tac-typelabel-platform-windows .tac-dot[b-r26hpdke3w] { background: var(--tac-acc); }

.tac-compliance .tac-typelabel-platform-linux .tac-dot[b-r26hpdke3w] { background: var(--tac-ink2); }

.tac-compliance .tac-typelabel-platform-any[b-r26hpdke3w] {
    border-style: dashed;
}

.tac-compliance .tac-typelabel-platform-any .tac-dot[b-r26hpdke3w] { background: var(--tac-ink3); }

/* Auto-remediate ON is warn-coloured: that rule is allowed to CHANGE agent state
   on its own, which is exactly the fact an operator scans this column for. */
.tac-compliance .tac-flag.tac-flag-on[b-r26hpdke3w] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-compliance .tac-flag.tac-flag-on .tac-dot[b-r26hpdke3w] { background: var(--tac-warn); }

.tac-compliance .tac-flag.tac-flag-off[b-r26hpdke3w] {
    color: var(--tac-ink3);
    border-color: var(--tac-line);
    background: none;
}

.tac-compliance .tac-flag.tac-flag-off .tac-dot[b-r26hpdke3w] { background: var(--tac-line2); }

/* -------------------------------------------------------------- row action btns */

.tac-compliance .tac-actions[b-r26hpdke3w] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of actions reads as one instrument cluster rather than
   a set of competing pills. Hover restores the semantic colour. */
.tac-compliance[b-r26hpdke3w]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance[b-r26hpdke3w]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-compliance[b-r26hpdke3w]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-compliance[b-r26hpdke3w]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-compliance[b-r26hpdke3w]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------------ pagination */

.tac-compliance .tac-pagination[b-r26hpdke3w] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-compliance .tac-pagination .tac-page-info[b-r26hpdke3w] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-compliance .tac-pagination .tac-page-controls[b-r26hpdke3w] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-compliance .tac-pagination .tac-page-btn[b-r26hpdke3w] {
    min-width: 30px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-compliance .tac-pagination .tac-page-btn:hover:not(:disabled)[b-r26hpdke3w] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-compliance .tac-pagination .tac-page-btn:disabled[b-r26hpdke3w] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-compliance .tac-pagination .tac-page-btn:focus-visible[b-r26hpdke3w] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- alert banners */

.tac-compliance .tac-alert[b-r26hpdke3w] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-ink3);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
}

.tac-compliance .tac-alert.tac-alert-crit[b-r26hpdke3w] {
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-compliance .tac-alert.tac-alert-ok[b-r26hpdke3w] {
    border-color: rgba(21, 128, 61, 0.4);
    border-left-color: var(--tac-ok);
    background: rgba(21, 128, 61, 0.06);
    color: var(--tac-ok);
}

.tac-compliance .tac-alert.tac-alert-info[b-r26hpdke3w] {
    border-color: rgba(3, 105, 161, 0.4);
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-compliance .tac-alert .tac-alert-mark[b-r26hpdke3w] {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-compliance .tac-alert .tac-alert-text[b-r26hpdke3w] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tac-compliance .tac-alert .tac-alert-close[b-r26hpdke3w] {
    margin-inline-start: auto;
    width: 22px;
    height: 22px;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
}

.tac-compliance .tac-alert .tac-alert-close:hover[b-r26hpdke3w] {
    border-color: currentColor;
}

.tac-compliance .tac-alert .tac-alert-close:focus-visible[b-r26hpdke3w] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------- forms */

.tac-compliance .tac-form[b-r26hpdke3w],
.tac-modal-overlay .tac-form[b-r26hpdke3w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tac-compliance .tac-field[b-r26hpdke3w],
.tac-modal-overlay .tac-field[b-r26hpdke3w] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

.tac-compliance .tac-field-row[b-r26hpdke3w],
.tac-modal-overlay .tac-field-row[b-r26hpdke3w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.tac-compliance .tac-label[b-r26hpdke3w],
.tac-modal-overlay .tac-label[b-r26hpdke3w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-compliance .tac-req[b-r26hpdke3w],
.tac-modal-overlay .tac-req[b-r26hpdke3w] {
    color: var(--tac-crit);
}

.tac-compliance .tac-input[b-r26hpdke3w],
.tac-modal-overlay .tac-input[b-r26hpdke3w] {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink0);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-compliance textarea.tac-input[b-r26hpdke3w],
.tac-modal-overlay textarea.tac-input[b-r26hpdke3w] {
    height: auto;
    min-height: 60px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
}

.tac-compliance .tac-input-num[b-r26hpdke3w],
.tac-modal-overlay .tac-input-num[b-r26hpdke3w] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-compliance .tac-input:focus[b-r26hpdke3w],
.tac-modal-overlay .tac-input:focus[b-r26hpdke3w] {
    outline: none;
    border-color: var(--tac-acc);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.18);
}

.tac-compliance .tac-input[b-r26hpdke3w]::placeholder,
.tac-modal-overlay .tac-input[b-r26hpdke3w]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-compliance .tac-input:disabled[b-r26hpdke3w],
.tac-modal-overlay .tac-input:disabled[b-r26hpdke3w] {
    background: var(--tac-s2);
    color: var(--tac-ink3);
    cursor: not-allowed;
}

.tac-compliance .tac-hint[b-r26hpdke3w],
.tac-modal-overlay .tac-hint[b-r26hpdke3w] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
}

.tac-compliance .tac-check[b-r26hpdke3w],
.tac-modal-overlay .tac-check[b-r26hpdke3w] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 9px;
}

.tac-compliance .tac-check .tac-checkbox[b-r26hpdke3w],
.tac-modal-overlay .tac-check .tac-checkbox[b-r26hpdke3w] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--tac-acc);
    cursor: pointer;
}

.tac-compliance .tac-check .tac-checkbox:disabled[b-r26hpdke3w],
.tac-modal-overlay .tac-check .tac-checkbox:disabled[b-r26hpdke3w] {
    cursor: not-allowed;
}

.tac-compliance .tac-check .tac-hint[b-r26hpdke3w],
.tac-modal-overlay .tac-check .tac-hint[b-r26hpdke3w] {
    grid-column: 2;
}

.tac-compliance .tac-readonly[b-r26hpdke3w],
.tac-modal-overlay .tac-readonly[b-r26hpdke3w] {
    display: block;
    margin: 0;
    padding: 8px 10px;
    border: 1px dashed var(--tac-line2);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    overflow-wrap: anywhere;
}

.tac-compliance .tac-hashblock[b-r26hpdke3w],
.tac-modal-overlay .tac-hashblock[b-r26hpdke3w] {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------- modal */

/* The modal keeps .modal-overlay > .modal and the header/body/footer chain —
   CompliancePageTests drives the create and delete dialogs through exactly those
   selectors. */
.tac-modal-overlay[b-r26hpdke3w] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-r26hpdke3w] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal.tac-modal-wide[b-r26hpdke3w] {
    max-width: 860px;
}

.tac-modal-overlay .tac-modal[b-r26hpdke3w]::before,
.tac-modal-overlay .tac-modal[b-r26hpdke3w]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-r26hpdke3w]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-r26hpdke3w]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-r26hpdke3w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h2[b-r26hpdke3w] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-close[b-r26hpdke3w] {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
}

.tac-modal-overlay .tac-close:hover[b-r26hpdke3w] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-close:focus-visible[b-r26hpdke3w] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-modal-overlay .tac-modal-body[b-r26hpdke3w] {
    padding: 20px;
    background: none;
}

/* The confirm dialogs stay centred; the form dialogs do not. */
.tac-modal-overlay .confirm-modal .tac-modal-body[b-r26hpdke3w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.tac-modal-overlay .tac-confirm-mark[b-r26hpdke3w] {
    width: 42px;
    height: 42px;
    stroke: var(--tac-crit);
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    /* site.css sizes .confirm-icon as a text glyph; it is an <svg> now. */
    font-size: 0;
    line-height: 0;
}

.tac-modal-overlay .tac-modal-body h3[b-r26hpdke3w] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-modal-overlay .confirm-modal .tac-modal-body p[b-r26hpdke3w] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-modal-overlay .tac-warnbox[b-r26hpdke3w] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-align: start;
}

.tac-modal-overlay .tac-alert[b-r26hpdke3w] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-ink3);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
    text-align: start;
}

.tac-modal-overlay .tac-alert.tac-alert-crit[b-r26hpdke3w] {
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-modal-overlay .tac-alert.tac-alert-info[b-r26hpdke3w] {
    border-color: rgba(3, 105, 161, 0.4);
    border-left-color: var(--tac-acc);
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
}

.tac-modal-overlay .tac-alert .tac-alert-text[b-r26hpdke3w] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Monaco draws itself into this box; the frame is a token hairline instead of the
   hardcoded #ccc the inline style used to carry. */
.tac-modal-overlay .tac-monaco[b-r26hpdke3w] {
    height: 240px;
    min-width: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
}

.tac-modal-overlay .tac-modal-foot[b-r26hpdke3w] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* Modal buttons: flat, uppercase, square. */
.tac-modal-overlay .tac-modal-foot .btn[b-r26hpdke3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-r26hpdke3w] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary[b-r26hpdke3w] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-r26hpdke3w] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-r26hpdke3w] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-r26hpdke3w] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-r26hpdke3w] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-r26hpdke3w] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ responsive */

/* Tablet: the toolbar stops trying to fit on one line, and paired fields stack. */
@media (max-width: 1023px) {
    .tac-compliance .tac-toolbar-controls[b-r26hpdke3w] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-compliance[b-r26hpdke3w]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-compliance .tac-toolbar-actions[b-r26hpdke3w] {
        margin-inline-start: auto;
    }

    .tac-compliance .tac-field-row[b-r26hpdke3w],
    .tac-modal-overlay .tac-field-row[b-r26hpdke3w] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phone: a seven- or eight-column grid cannot honestly fit, and responsive.css
   builds its card layout only for .agents-table / .audit-table / .scheduler-table
   — not for a bare .data-table. So these pages restack their OWN rows as labelled
   cards, from the data-label attribute every <td> carries. */
@media (max-width: 767px) {
    .tac-compliance[b-r26hpdke3w] {
        gap: 12px;
    }

    .tac-compliance .tac-pagetitle[b-r26hpdke3w] {
        font-size: 20px;
    }

    .tac-compliance[b-r26hpdke3w]  .compliance-tabs .tab-btn {
        padding: 0 11px;
        letter-spacing: 0.1em;
    }

    .tac-compliance .tac-toolbar[b-r26hpdke3w] {
        padding: 12px;
        gap: 10px;
    }

    .tac-compliance .tac-tablewrap[b-r26hpdke3w] {
        overflow-x: hidden;
    }

    .tac-compliance .tac-table[b-r26hpdke3w],
    .tac-compliance .tac-table tbody[b-r26hpdke3w] {
        display: block;
    }

    .tac-compliance .tac-table thead[b-r26hpdke3w] {
        position: absolute;
        left: -9999px;
    }

    .tac-compliance .tac-table .tac-row[b-r26hpdke3w] {
        display: block;
        margin: 12px;
        padding: 10px 12px;
        border: 1px solid var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-compliance .tac-table .tac-row > td[b-r26hpdke3w] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid var(--tac-line);
        text-align: start;
    }

    .tac-compliance .tac-table .tac-row > td:last-child[b-r26hpdke3w] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .tac-compliance .tac-table .tac-row > td[b-r26hpdke3w]::before {
        content: attr(data-label);
        flex: none;
        font-family: var(--tac-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-compliance .tac-pagination[b-r26hpdke3w] {
        padding: 10px 12px;
    }

    .tac-compliance .tac-pagination .tac-page-controls[b-r26hpdke3w] {
        margin-inline-start: 0;
    }

    .tac-modal-overlay .tac-modal-body[b-r26hpdke3w] {
        padding: 14px;
    }

    .tac-modal-overlay .tac-monaco[b-r26hpdke3w] {
        height: 180px;
    }
}

/* Nothing on these pages animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-compliance *[b-r26hpdke3w],
    .tac-compliance[b-r26hpdke3w]  *,
    .tac-modal-overlay *[b-r26hpdke3w] {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   PAGE-SPECIFIC — Rules
   ============================================================================ */

/* The Name column carries the longest strings on the page; let it take the slack
   the fixed-width mono columns give back. Desktop/tablet ONLY: below 768px the row
   is a stacked card, where a min-width would fight the 375px viewport the overflow
   suite checks. */
@media (min-width: 768px) {
    .tac-compliance .tac-table td:first-child[b-r26hpdke3w] {
        min-width: 180px;
    }
}

/* A rule row is not clickable — there is no /compliance/rules/{id} route — so it
   must not offer a pointer it cannot honour. Only the action buttons navigate. */
.tac-compliance .tac-table .tac-row[b-r26hpdke3w] {
    cursor: default;
}

/* The Rules modal is the tallest form in the app (two 240px Monaco editors), so it
   gets its own scroll rather than pushing the dialog past the viewport. */
.tac-modal-overlay .tac-modal.tac-modal-wide .tac-modal-body[b-r26hpdke3w] {
    max-height: calc(90vh - 150px);
    overflow-y: auto;
}
/* _content/Athena.Server/Pages/Credentials.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops credential vault — /credentials.

   Scoped to Credentials.razor. The design tokens (--tac-*) are NOT declared here
   — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   There is no artboard for this page in Mock/tactical-ops; every value below is
   taken from the shipped Login / Dashboard / Agents / CommandTemplates sheets so
   the vault reads as part of the same product.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with
   dozens of other screens (.stats-bar, .stat-item, .status-badge, .role-badge,
   .users-table, .btn, .modal-*, .form-control ...). Blazor scoping alone would
   keep a bare `.status-badge { }` rule from leaking, but it would still fight
   site.css on THIS page in ways that are invisible from the other 40. So the
   markup carries a NEW .tac-* class next to every legacy one, and every selector
   below hangs off a .tac-* name. The legacy classes stay on the elements
   untouched (see the comment block at the top of Credentials.razor), and the
   page's OLD rules in site.css are removed by a separate sweep, not from here.

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so
   an equal-specificity .tac-* rule wins on source order. Where site.css is more
   specific (e.g. `.stat-item.stat-item-warning .stat-icon`) the rule below is
   deliberately written long enough to outrank it.

   SearchBar / ActionButton are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does.
   ============================================================================ */

.tac-credentials[b-zlf6ne17i3] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The vault must never be the reason the document scrolls sideways —
       AssertNoPageOverflow runs at 375 / 768 / 1280 / 1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-credentials .tac-panel[b-zlf6ne17i3] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-credentials .tac-panel[b-zlf6ne17i3]::before,
.tac-credentials .tac-panel[b-zlf6ne17i3]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-credentials .tac-panel[b-zlf6ne17i3]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-credentials .tac-panel[b-zlf6ne17i3]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-credentials .tac-scan[b-zlf6ne17i3] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-credentials .tac-eyebrow[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every count, account name and timestamp on this page is mono and tabular so
   columns of digits line up vertically. */
.tac-credentials .tac-num[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-credentials .tac-dot[b-zlf6ne17i3] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-credentials .tac-glyph[b-zlf6ne17i3] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------- KPI card stat bar */

/* ONE card treatment for the whole app.

   This is the Dashboard's KPI tile (Pages/Dashboard.razor.css - the reference, and
   NOT edited by this change) lifted across: the same 1px hairline on --tac-s1, the
   same 9px bracket ticks, the same head / figure / foot rhythm, and the same
   ok | warn | crit | info | off dot vocabulary. The compact chip bar that used to
   live here is gone; the app no longer has two card treatments.

   What the Dashboard rail does NOT have - because its tiles are passive read-outs -
   is a pressed state. These cards ARE the page's filter, so the affordance is
   carried over from the chip bar they replace: a left accent border plus an inset
   ring on .selected, an accent hairline and surface wash on hover, and
   role="button" + tabindex="0" in the markup so a card is reachable and operable
   from the keyboard. A card that looks passive but filters on click would be worse
   than the chip it replaced.

   EVERY font-size below comes from a token in wwwroot/css/tactical-tokens.css
   (--tac-label-size / --tac-label-size-sm / --tac-stat-value-size). Nine pages each
   deciding for themselves what a stat count is worth - 18px on /credentials, 14px on
   /agents - is exactly what this block exists to end.

   Nothing here restyles a bare shared selector: the stat-item / stat-icon /
   stat-content / stat-label / stats-bar names stay on the markup as the Playwright and
   bUnit hooks they are, and are only ever reached THROUGH a .tac-* class.

   The .tac-chip* names stay on the markup too, and nothing styles them any more: nine
   bUnit suites select .tac-chipbar / .tac-chip / .tac-chip-count / .tac-chip-label /
   .tac-chip-readout, so after the conversion they are selector hooks exactly like the
   site.css names beside them. */

.tac-credentials .tac-kpibar[b-zlf6ne17i3] {
    display: grid;
    /* min() so a track can never be wider than the bar itself. A bare 190px minimum
       pushes the DOCUMENT sideways at 375px, and AssertNoPageOverflow runs there. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-credentials .tac-kpi[b-zlf6ne17i3] {
    position: relative;
    /* LOAD-BEARING. shell.css:489 declares a bare stat-content as flex-direction:column,
       and site.css:368 makes a bare stat-item a centred flex ROW. A container that
       sets display:flex without saying which way it runs inherits whichever of those
       reaches it and stacks - or in-lines - its children by accident; that is the bug
       that put the dot on top of the Agents chip. Every flex container in this block
       states its direction explicitly. */
    /* TWO LINES, number on the right:
           row 1  label + dot ............ figure
           row 2  caption (spans both columns)
       A grid rather than the old three stacked rows, so the figure can sit beside
       the label instead of under it and the card loses a line without losing data. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head figure"
        "foot foot";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Bracket ticks - the signature of the tactical-ops panel, the same 9px corner pair
   the Dashboard tile draws. */
.tac-credentials .tac-kpi[b-zlf6ne17i3]::before,
.tac-credentials .tac-kpi[b-zlf6ne17i3]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-credentials .tac-kpi[b-zlf6ne17i3]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-credentials .tac-kpi[b-zlf6ne17i3]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

/* The filter states the Dashboard tile has no need for. */

.tac-credentials .tac-kpi-filter[b-zlf6ne17i3] {
    cursor: pointer;
}

.tac-credentials .tac-kpi-filter:hover[b-zlf6ne17i3] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    /* site.css:382 lifts a bare stat-item 2px on hover. A card bouncing under the
       pointer is noise, so the surface wash IS the hover. */
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-credentials .tac-kpi-filter:focus-visible[b-zlf6ne17i3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The pressed state. Declared AFTER :hover on purpose - same specificity, so the
   later rule wins and a selected card keeps reading as selected under the pointer.
   padding-left gives back the 2px the border takes, so the label does not shift when
   a card is picked. */
.tac-credentials .tac-kpi.selected[b-zlf6ne17i3] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    border-left: 3px solid var(--tac-acc);
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

/* A read-out is not a filter and must not look like one. */
.tac-credentials .tac-kpi-readout[b-zlf6ne17i3] {
    cursor: default;
}

/* Head / figure / foot. */

.tac-credentials .tac-kpi .tac-kpi-head[b-zlf6ne17i3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    /* site.css:444 gives a bare stat-content flex:1; inside a column card that would
       make the head eat the space the figure and foot need. */
    flex: none;
}

.tac-credentials .tac-kpi .tac-lbl[b-zlf6ne17i3] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    /* 0.14em is the mock's tracking; at 16px it widens a label like
       "MAINTENANCE MODE" far enough to force a second grid row on a laptop. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-credentials .tac-kpi.selected .tac-lbl[b-zlf6ne17i3] {
    color: var(--tac-ink);
}

.tac-credentials .tac-kpi .tac-kpi-head .tac-dot[b-zlf6ne17i3] {
    margin-left: auto;
    /* Never let a stray align-items:stretch pull the dot off the head's centre
       line - that is what read as "the dot is stuck on the top of the card". */
    align-self: center;
}

.tac-credentials .tac-kpi .tac-kpi-figure[b-zlf6ne17i3] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The count. site.css:392 paints a bare stat-icon as a 48-60px gradient circle; here
   it is a number, so the whole badge treatment is unwound. Four classes deep so it
   outranks the two-class site.css:6289 rule that paints the maintenance counter. */
.tac-credentials .tac-kpibar .tac-kpi .tac-kpi-value[b-zlf6ne17i3] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-stat-value-size);
    font-weight: 600;
    line-height: 1;
}

.tac-credentials .tac-kpi .tac-kpi-foot[b-zlf6ne17i3] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The dot vocabulary, verbatim from the Dashboard rail. */
.tac-credentials .tac-kpi .tac-dot.ok[b-zlf6ne17i3] { background: var(--tac-ok); }
.tac-credentials .tac-kpi .tac-dot.warn[b-zlf6ne17i3] { background: var(--tac-warn); }
.tac-credentials .tac-kpi .tac-dot.crit[b-zlf6ne17i3] { background: var(--tac-crit); }
.tac-credentials .tac-kpi .tac-dot.info[b-zlf6ne17i3] { background: var(--tac-acc); }
.tac-credentials .tac-kpi .tac-dot.off[b-zlf6ne17i3] { background: var(--tac-ink3); }

/* --------------------------------------------------------------- vault panel */

.tac-credentials .tac-vault[b-zlf6ne17i3] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-credentials .tac-toolbar[b-zlf6ne17i3] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-credentials .tac-toolbar-title[b-zlf6ne17i3] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-credentials .tac-toolbar-count[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-credentials .tac-toolbar-total[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

.tac-credentials .tac-toolbar-controls[b-zlf6ne17i3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-credentials[b-zlf6ne17i3]  .search-bar {
    height: 34px;
    width: 260px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-credentials[b-zlf6ne17i3]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-credentials[b-zlf6ne17i3]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-credentials[b-zlf6ne17i3]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

/* The shared component ships a magnifier emoji; desaturate it rather than fork
   the component. */
.tac-credentials[b-zlf6ne17i3]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-credentials[b-zlf6ne17i3]  .search-bar .clear-search,
.tac-credentials[b-zlf6ne17i3]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* ------------------------------------------------------------- toolbar button */

.tac-credentials .tac-btn[b-zlf6ne17i3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-credentials .tac-btn-primary[b-zlf6ne17i3] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-credentials .tac-btn-primary:hover:not(:disabled)[b-zlf6ne17i3] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

.tac-credentials .tac-btn:focus-visible[b-zlf6ne17i3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ loading / empty */

.tac-credentials .tac-state[b-zlf6ne17i3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-credentials .tac-state h3[b-zlf6ne17i3] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-credentials .tac-state p[b-zlf6ne17i3] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-credentials .tac-state .tac-state-eyebrow[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* A line-art vault mark instead of the key emoji. */
.tac-credentials .tac-state-mark[b-zlf6ne17i3] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-credentials .tac-spinner[b-zlf6ne17i3] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-zlf6ne17i3 0.9s linear infinite;
}

@keyframes tac-spin-b-zlf6ne17i3 {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* Seven columns is more than a phone can hold, and responsive.css has NO card
   layout for .users-table, so the wrapper is the whole answer: the table scrolls
   inside its own box and the document never does. */
.tac-credentials .tac-tablewrap[b-zlf6ne17i3] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-credentials .tac-table[b-zlf6ne17i3] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-credentials .tac-table .tac-th[b-zlf6ne17i3] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-credentials .tac-table .tac-th-actions[b-zlf6ne17i3] {
    text-align: end;
}

.tac-credentials .tac-table .tac-row > td[b-zlf6ne17i3] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-credentials .tac-table .tac-row:last-child > td[b-zlf6ne17i3] {
    border-bottom: 0;
}

.tac-credentials .tac-table .tac-row[b-zlf6ne17i3] {
    background: none;
    transition: background 0.12s ease;
}

.tac-credentials .tac-table .tac-row:hover > td[b-zlf6ne17i3] {
    background: rgba(3, 105, 161, 0.05);
}

/* A switched-off credential is dimmed, not painted red — red is reserved for the
   destructive action and the error banner, so those stay the only things that
   pull the eye. */
.tac-credentials .tac-table .tac-row.disabled-row > td[b-zlf6ne17i3] {
    color: var(--tac-ink3);
    background: none;
    opacity: 1;
}

.tac-credentials .tac-table .tac-row.disabled-row:hover > td[b-zlf6ne17i3] {
    background: rgba(3, 105, 161, 0.04);
}

.tac-credentials .tac-table .tac-cell-actions[b-zlf6ne17i3] {
    text-align: end;
    white-space: nowrap;
}

/* ------------------------------------------------------- identity cell (name) */

.tac-credentials .tac-identity[b-zlf6ne17i3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* One line-art key mark per row, tinted by credential type. */
.tac-credentials .tac-keymark[b-zlf6ne17i3] {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-credentials .tac-keymark-domain[b-zlf6ne17i3] { stroke: var(--tac-acc); }
.tac-credentials .tac-keymark-local[b-zlf6ne17i3] { stroke: var(--tac-ok); }

.tac-credentials .tac-row.disabled-row .tac-keymark[b-zlf6ne17i3] { stroke: var(--tac-ink3); }

.tac-credentials .tac-identity-text[b-zlf6ne17i3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-credentials .tac-name[b-zlf6ne17i3] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-credentials .tac-row.disabled-row .tac-name[b-zlf6ne17i3] {
    color: var(--tac-ink2);
}

/* CredentialDto.Description was already loaded and never shown; it rides under
   the name rather than taking an eighth column. */
.tac-credentials .tac-desc[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
    max-width: 52ch;
    overflow-wrap: anywhere;
}

/* DOMAIN\user / .\user — an identifier, so mono. */
.tac-credentials .tac-account[b-zlf6ne17i3] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------- type + status chips */

/* The dot+label convention, shared by the type chip and the status chip so a row
   reads as one instrument line rather than two competing pill styles. site.css
   draws .role-badge and .status-badge as rounded pastel pills; both are unwound
   here. */
.tac-credentials .tac-type[b-zlf6ne17i3],
.tac-credentials .tac-status[b-zlf6ne17i3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge renders inside a table data cell, where the
       surrounding text is 12-13px. --tac-label-size is the 16px CARD-LABEL role;
       wearing it here made the badge tower over the row it belongs to. Same defect
       fixed on AuditLog - the redesign cloned one badge block onto every page and
       the wrong token came with it. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-credentials .tac-type-domain[b-zlf6ne17i3] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-credentials .tac-type-domain .tac-dot[b-zlf6ne17i3] { background: var(--tac-acc); }

.tac-credentials .tac-type-local[b-zlf6ne17i3] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-credentials .tac-type-local .tac-dot[b-zlf6ne17i3] { background: var(--tac-ok); }

.tac-credentials .tac-status-active[b-zlf6ne17i3] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-credentials .tac-status-active .tac-dot[b-zlf6ne17i3] { background: var(--tac-ok); }

/* Inactive is neutral, not critical: a credential is switched off on purpose. */
.tac-credentials .tac-status-inactive[b-zlf6ne17i3] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-credentials .tac-status-inactive .tac-dot[b-zlf6ne17i3] { background: var(--tac-ink3); }

/* --------------------------------------------------- two-line last-used cell */

.tac-credentials .tac-stack[b-zlf6ne17i3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-credentials .tac-lastused-abs[b-zlf6ne17i3] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
}

/* The relative gloss. The absolute stamp stays on the line above it because
   yyyy/MM/dd HH:mm:ss is the house format and relative time alone loses the date
   entirely once a credential has been idle for a day. */
.tac-credentials .tac-relative[b-zlf6ne17i3] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* The quiet "never": stated, not shouted. No border — it must not read as a badge. */
.tac-credentials .tac-never[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

.tac-credentials .tac-usage[b-zlf6ne17i3] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
}

/* -------------------------------------------------------------- row action btns */

.tac-credentials .tac-actions[b-zlf6ne17i3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so the pair reads as one instrument cluster rather than two
   competing pills. Hover restores the semantic colour. */
.tac-credentials[b-zlf6ne17i3]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-credentials[b-zlf6ne17i3]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-credentials[b-zlf6ne17i3]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-credentials[b-zlf6ne17i3]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-credentials[b-zlf6ne17i3]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------------- modals */

/* The three dialogs keep .modal-overlay > .modal and the header/body/footer
   chain. They render OUTSIDE .tac-credentials, so these rules hang off
   .tac-modal-overlay instead. */
.tac-modal-overlay[b-zlf6ne17i3] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-zlf6ne17i3] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
    max-width: min(560px, calc(100vw - 32px));
}

.tac-modal-overlay .tac-modal.modal-small[b-zlf6ne17i3] {
    max-width: min(460px, calc(100vw - 32px));
}

.tac-modal-overlay .tac-modal[b-zlf6ne17i3]::before,
.tac-modal-overlay .tac-modal[b-zlf6ne17i3]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-zlf6ne17i3]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-zlf6ne17i3]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-zlf6ne17i3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head .tac-eyebrow[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head h3[b-zlf6ne17i3] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-body[b-zlf6ne17i3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: none;
}

.tac-modal-overlay .tac-modal-foot[b-zlf6ne17i3] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* --------------------------------------------------------------- modal fields */

.tac-modal-overlay .tac-field[b-zlf6ne17i3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-modal-overlay .tac-label[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-input[b-zlf6ne17i3] {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-input:focus[b-zlf6ne17i3] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    outline: none;
}

.tac-modal-overlay .tac-input[b-zlf6ne17i3]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-modal-overlay .tac-input.input-error[b-zlf6ne17i3] {
    border-color: var(--tac-crit);
}

.tac-modal-overlay .tac-check[b-zlf6ne17i3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    cursor: pointer;
}

.tac-modal-overlay .tac-check input[type="checkbox"][b-zlf6ne17i3] {
    width: 15px;
    height: 15px;
    accent-color: var(--tac-acc);
    cursor: pointer;
}

.tac-modal-overlay .tac-fielderror[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-crit);
}

/* ---------------------------------------------------------- modal boxes/errors */

.tac-modal-overlay .tac-warnbox[b-zlf6ne17i3] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
}

.tac-modal-overlay .tac-warnbox strong[b-zlf6ne17i3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-modal-overlay .tac-confirm[b-zlf6ne17i3] {
    margin: 0;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink);
}

/* Read-only "what am I about to destroy" block. */
.tac-modal-overlay .tac-subject[b-zlf6ne17i3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-modal-overlay .tac-subject p[b-zlf6ne17i3] {
    display: flex;
    gap: 10px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-modal-overlay .tac-subject p strong[b-zlf6ne17i3] {
    flex: none;
    min-width: 11ch;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-error[b-zlf6ne17i3] {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 0;
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

/* --------------------------------------------------------------- modal buttons */

.tac-modal-overlay .tac-modal-foot .btn[b-zlf6ne17i3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-zlf6ne17i3] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary[b-zlf6ne17i3] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-zlf6ne17i3] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-zlf6ne17i3] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-zlf6ne17i3] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-zlf6ne17i3] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-zlf6ne17i3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the toolbar stops trying to fit on one line, and the least load-bearing
   column steps aside. Last Used is the one that goes: the row still says how many
   times the credential has been used, and the exact stamp is a detail rather than
   a scanning key. */
@media (max-width: 1023px) {
    .tac-credentials .tac-toolbar-controls[b-zlf6ne17i3] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-credentials[b-zlf6ne17i3]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-credentials .tac-table .tac-th-lastused[b-zlf6ne17i3] {
        display: none;
    }
}

@media (max-width: 767px) {
    .tac-credentials[b-zlf6ne17i3] {
        gap: 12px;
    }

    .tac-credentials .tac-kpibar[b-zlf6ne17i3] {
        /* Two cards per row at phone. minmax(0, 1fr) cannot overflow, so a long
           label ellipsises inside its own card instead of widening the document -
           AssertNoPageOverflow runs at 375px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tac-credentials .tac-kpi[b-zlf6ne17i3] {
        padding: 12px 14px;
    }

    .tac-credentials .tac-kpi.selected[b-zlf6ne17i3] {
        padding-left: 12px;
    }

    .tac-credentials .tac-toolbar[b-zlf6ne17i3] {
        padding: 12px;
        gap: 10px;
    }

    .tac-credentials .tac-toolbar-controls .tac-btn[b-zlf6ne17i3] {
        flex: 1 1 auto;
    }

    .tac-modal-overlay .tac-modal-body[b-zlf6ne17i3] {
        padding: 14px 16px;
    }

    .tac-modal-overlay .tac-modal-head[b-zlf6ne17i3],
    .tac-modal-overlay .tac-modal-foot[b-zlf6ne17i3] {
        padding-inline: 16px;
    }

    .tac-modal-overlay .tac-subject p[b-zlf6ne17i3] {
        flex-direction: column;
        gap: 2px;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-credentials *[b-zlf6ne17i3],
    .tac-credentials[b-zlf6ne17i3]  *,
    .tac-modal-overlay *[b-zlf6ne17i3] {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- two-line card: label+figure on one row, caption beneath ---------------- */
.tac-credentials .tac-kpi .tac-kpi-head[b-zlf6ne17i3] {
    grid-area: head;
}

.tac-credentials .tac-kpi .tac-kpi-figure[b-zlf6ne17i3] {
    grid-area: figure;
    justify-content: flex-end;
    justify-self: end;
    align-items: baseline;
}

.tac-credentials .tac-kpi .tac-kpi-foot[b-zlf6ne17i3] {
    grid-area: foot;
}

.tac-credentials .tac-kpi .tac-kpi-value[b-zlf6ne17i3] {
    /* The figure is the point of the card, so it leads. It was reading SMALLER than
       its own 16px label, which inverted the hierarchy. */
    font-size: var(--tac-stat-value-size);
    line-height: 1;
}
/* _content/Athena.Server/Pages/Dashboard.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops fleet overview — Mock/tactical-ops/dashboard.html translated to a
   real, responsive Blazor page.

   Scoped to Dashboard.razor. The design tokens (--tac-*) live on :root in
   wwwroot/css/tactical-tokens.css, which is linked first in _Host, so this sheet
   only consumes them. Same names, same values as Pages/Login.razor.css.

   ── THREE RULES THIS SHEET MUST NOT BREAK ─────────────────────────────────────

   1. NOTHING here may name the shared stat selectors. The Playwright responsive
      suite reads the KPI rail's computed grid-template-columns off the BARE
      `stats` class selector (1 column at phone, 2 at tablet, >=3 at desktop, exactly 4
      at 1920) and the big number's computed font-size off the BARE stat-value
      selector (28px at phone) — both served by wwwroot/css/responsive.css. A
      scoped rule carries this component's [b-xxxxx] attribute, so it would
      out-specify responsive.css and silently fail those tests. Every tile therefore
      keeps its shared class for LAYOUT and gets a `tac-*` twin that this sheet
      styles. The one place the big number's size is set is inside a
      `min-width: 768px` query, above the phone breakpoint responsive.css owns.
      DashboardTacticalOpsLayoutTests regression-locks all of that.

   2. NOTHING here may name a selector shared with other pages — content-card,
      card-title, card-header, status, table, progress-bar (all as bare class
      selectors). Even scoped,
      emitting them would mean the page is still on the shared chrome. New `tac-*`
      names only.

   3. ActionButton and Pagination are child components: their DOM never carries
      this component's scope attribute, so those rules go through ::deep from an
      ancestor that does — exactly as Login.razor.css does for input.form-control.
   ============================================================================ */

.tac-dash[b-m4l213mgex] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- page header */

.tac-pagehead[b-m4l213mgex] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
}

.tac-pagehead-id[b-m4l213mgex] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Dashboard") from
   GetPageTitle(), and DashboardPageTests asserts that text exactly. */
.tac-pagetitle[b-m4l213mgex] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-pagemeta[b-m4l213mgex] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-sep[b-m4l213mgex] {
    color: var(--tac-ink3);
}

.tac-pagehead-actions[b-m4l213mgex] {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-num[b-m4l213mgex],
.tac-lbl[b-m4l213mgex] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-lbl[b-m4l213mgex] {
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-dot[b-m4l213mgex] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
}

.tac-dot.ok[b-m4l213mgex] { background: var(--tac-ok); }
.tac-dot.warn[b-m4l213mgex] { background: var(--tac-warn); }
.tac-dot.crit[b-m4l213mgex] { background: var(--tac-crit); }
.tac-dot.info[b-m4l213mgex] { background: var(--tac-acc); }
.tac-dot.off[b-m4l213mgex] { background: var(--tac-ink3); }

.tac-chip[b-m4l213mgex] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tac-chip.ok[b-m4l213mgex] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-chip.warn[b-m4l213mgex] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-chip.crit[b-m4l213mgex] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-chip.info[b-m4l213mgex] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-bar[b-m4l213mgex] {
    position: relative;
    display: block;
    height: 4px;
    width: 100%;
    background: var(--tac-line);
    overflow: hidden;
}

.tac-bar-fill[b-m4l213mgex] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--tac-acc);
}

.tac-bar-fill.warn[b-m4l213mgex] {
    background: var(--tac-warn);
}

.tac-ellipsis[b-m4l213mgex] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* LOAD-BEARING. .tac-ellipsis is worn by both <span>s and <td>s on this page.
   display:block is what makes it work on a span - and it is exactly what breaks it
   on a cell. A <td> set to display:block leaves the table's cell layout, so it
   stops stretching to the row height and stops holding its column slot. Measured on
   the agents roster: the OS cell's border-bottom drew at y=461.8 while every other
   cell in the row drew at y=471.1, which is the separator that looked misaligned
   between the two agents; a 44.7px gap opened between that cell and Status where no
   cell was painting a border at all; and the text clipped at the blanket
   `.tac-table td { max-width: 260px }` instead of using the 305px its column had.
   A cell ellipsises from overflow + nowrap + a width bound on its own. It does not
   need display:block, and must not have it. */
td.tac-ellipsis[b-m4l213mgex] {
    display: table-cell;
}

.tac-right[b-m4l213mgex] {
    text-align: right;
}

.tac-link[b-m4l213mgex] {
    margin-left: auto;
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
    text-decoration: none;
    white-space: nowrap;
}

.tac-link:hover[b-m4l213mgex] {
    color: var(--tac-acc-deep);
}

/* ------------------------------------------------------------------ KPI rail */

/* NOTE: no grid-template-columns here. The rail's column count is owned by the
   bare stats class selector in shell.css/responsive.css — see rule 1 at the top. */

.tac-kpi[b-m4l213mgex] {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 16px 18px 14px;
    border-radius: 0;
    border-left: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Bracket ticks — the signature of the tactical-ops panel. */
.tac-kpi[b-m4l213mgex]::before,
.tac-kpi[b-m4l213mgex]::after,
.tac-panel[b-m4l213mgex]::before,
.tac-panel[b-m4l213mgex]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-kpi[b-m4l213mgex]::before,
.tac-panel[b-m4l213mgex]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-kpi[b-m4l213mgex]::after,
.tac-panel[b-m4l213mgex]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-kpi-head[b-m4l213mgex] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tac-kpi-head .tac-lbl[b-m4l213mgex] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tac-kpi-head .tac-dot[b-m4l213mgex] {
    margin-left: auto;
}

.tac-kpi-figure[b-m4l213mgex] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* Deliberately NOT sizing the shared stat-value class — its computed size at phone
   is asserted at 28px from responsive.css. `tac-kpi-value` is the twin this sheet
   owns, and it only takes over from the tablet breakpoint up (see the media query
   at the bottom of this file). Colour/family are safe at every width. */
.tac-kpi-value[b-m4l213mgex] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
    color: var(--tac-ink0);
}

.tac-kpi-unit[b-m4l213mgex] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink3);
}

.tac-kpi-foot[b-m4l213mgex] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-kpi-chips[b-m4l213mgex] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tac-kpi-progress[b-m4l213mgex] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tac-kpi-progress-row[b-m4l213mgex] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
}

.tac-kpi-progress-row .tac-num[b-m4l213mgex] {
    flex: none;
}

/* --------------------------------------------------------------------- rows */

/* The mock's minmax(0, 1.55fr) minmax(0, 1fr) pair. min-width:0 on both tracks AND
   on the panels is what keeps a long hostname or command from forcing page-wide
   horizontal overflow (AssertNoPageOverflow runs at every breakpoint). */
.tac-row[b-m4l213mgex] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
}

/* A panel whose sibling was hidden by <AuthorizeView> should take the whole row
   rather than sit in a 1.55fr stub next to dead space. */
.tac-row > :only-child[b-m4l213mgex] {
    grid-column: 1 / -1;
}

/* Both panels denied: collapse the empty row so it contributes no gap. */
.tac-row:empty[b-m4l213mgex] {
    display: none;
}

/* -------------------------------------------------------------------- panels */

.tac-panel[b-m4l213mgex] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-scan[b-m4l213mgex] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
}

.tac-panel-head[b-m4l213mgex] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 16px 18px 12px;
    min-width: 0;
}

.tac-panel-head-ruled[b-m4l213mgex] {
    border-bottom: 1px solid var(--tac-line);
}

.tac-panel-title[b-m4l213mgex] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-panel-body[b-m4l213mgex] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px 16px;
    min-width: 0;
}

.tac-empty[b-m4l213mgex] {
    padding: 18px;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

.tac-empty-cell[b-m4l213mgex] {
    text-align: center;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

.tac-note[b-m4l213mgex] {
    margin: 0;
    color: var(--tac-ink3);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
}

/* -------------------------------------------------------------- fleet health */

.tac-segbar[b-m4l213mgex] {
    display: flex;
    height: 10px;
    gap: 2px;
    min-width: 0;
    background: var(--tac-s2);
}

.tac-seg[b-m4l213mgex] {
    display: block;
    height: 100%;
}

.tac-seg.ok[b-m4l213mgex] { background: var(--tac-ok); }
.tac-seg.off[b-m4l213mgex] { background: var(--tac-ink3); }

.tac-legend[b-m4l213mgex] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    min-width: 0;
}

.tac-legend-item[b-m4l213mgex] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
}

.tac-legend-item .tac-num[b-m4l213mgex] {
    color: var(--tac-ink);
}

/* ------------------------------------------------------------- feeds (lists) */

.tac-feed[b-m4l213mgex] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.tac-feed-row[b-m4l213mgex] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-feed-row:last-child[b-m4l213mgex] {
    border-bottom: 0;
}

.tac-feed-row-clickable[b-m4l213mgex] {
    cursor: pointer;
}

.tac-feed-row-clickable:hover[b-m4l213mgex] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-feed-row > .tac-chip[b-m4l213mgex],
.tac-feed-time[b-m4l213mgex] {
    flex: none;
}

.tac-feed-time[b-m4l213mgex] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
    padding-top: 2px;
}

.tac-feed-body[b-m4l213mgex] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.tac-feed-title[b-m4l213mgex] {
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-feed-sub[b-m4l213mgex] {
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
}

.tac-feed-age[b-m4l213mgex] {
    margin-left: auto;
    flex: none;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------------- tables */

/* Own scroll container: the shared content-card/table
   overflow pair in responsive.css is not in play here, and a
   wide table must never push the PAGE sideways. */
.tac-scroll[b-m4l213mgex] {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.tac-table[b-m4l213mgex] {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
}

.tac-table-wide[b-m4l213mgex] {
    min-width: 680px;
}

.tac-table th[b-m4l213mgex] {
    text-align: left;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    font-weight: 500;
    padding: 8px 12px;
    border-bottom: 1px solid var(--tac-line);
    white-space: nowrap;
}

.tac-table td[b-m4l213mgex] {
    padding: 9px 12px;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
    max-width: 260px;
}

.tac-table tbody tr:last-child td[b-m4l213mgex] {
    border-bottom: 0;
}

.tac-table tbody tr:hover td[b-m4l213mgex] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-col-progress[b-m4l213mgex] {
    width: 170px;
}

.tac-cell-stack[b-m4l213mgex] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.tac-cell-strong[b-m4l213mgex] {
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-cell-sub[b-m4l213mgex] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-rowactions[b-m4l213mgex] {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}

/* --------------------------------------------------- child components (::deep) */

/* ActionButton renders its own <button class="btn ..."> — a shared selector this
   sheet must not restyle globally, so it is reached only through ::deep from a
   tactical ancestor. */
.tac-pagehead[b-m4l213mgex]  .btn,
.tac-panel[b-m4l213mgex]  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-pagehead[b-m4l213mgex]  .btn:hover:not(:disabled),
.tac-panel[b-m4l213mgex]  .btn:hover:not(:disabled) {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
}

.tac-pagehead[b-m4l213mgex]  .btn:focus-visible,
.tac-panel[b-m4l213mgex]  .btn:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-pagehead[b-m4l213mgex]  .btn.btn-primary {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-pagehead[b-m4l213mgex]  .btn.btn-primary:hover:not(:disabled) {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-pagehead[b-m4l213mgex]  .btn.btn-icon,
.tac-panel[b-m4l213mgex]  .btn.btn-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
}

/* An icon action in a panel header is the trailing affordance. */
.tac-panel-head[b-m4l213mgex]  .btn.btn-icon {
    margin-left: auto;
}

/* Pagination is a child component too. */
.tac-panel[b-m4l213mgex]  .pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid var(--tac-line);
    padding: 10px 18px;
    margin: 0;
}

.tac-panel[b-m4l213mgex]  .pagination-info {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    color: var(--tac-ink3);
}

.tac-panel[b-m4l213mgex]  .pagination-controls {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tac-panel[b-m4l213mgex]  .page-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    cursor: pointer;
}

.tac-panel[b-m4l213mgex]  .page-btn:hover:not(:disabled) {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-panel[b-m4l213mgex]  .page-btn.active {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-panel[b-m4l213mgex]  .page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --------------------------------------------------------------- responsive */

/* From the tablet breakpoint up this sheet owns the KPI number's size (32px, the
   mock's figure). BELOW 768px it stays out of the way so responsive.css's 28px —
   which PhoneBreakpointTests asserts — is the computed value. */
@media (min-width: 768px) {
    .tac-kpi-value[b-m4l213mgex] {
        font-size: 32px;
    }
}

/* The 1.55fr / 1fr pair has to collapse before the shell's own tablet breakpoint,
   otherwise two panels plus the sidebar overflow the viewport. */
@media (max-width: 1023px) {
    .tac-row[b-m4l213mgex] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-pagetitle[b-m4l213mgex] {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .tac-dash[b-m4l213mgex] {
        gap: 12px;
    }

    .tac-pagehead-actions[b-m4l213mgex] {
        margin-left: 0;
        width: 100%;
    }

    .tac-panel-head[b-m4l213mgex],
    .tac-feed-row[b-m4l213mgex] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-panel-body[b-m4l213mgex] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-kpi[b-m4l213mgex] {
        padding: 12px 14px;
    }

    .tac-table td[b-m4l213mgex] {
        max-width: 200px;
    }
}

/* Honour reduced-motion: the only transitions here are hover washes, but kill them
   anyway so nothing animates for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-dash *[b-m4l213mgex],
    .tac-panel[b-m4l213mgex]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/DeploymentHistory.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops deployment history.

   Scoped to DeploymentHistory.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   There is no artboard for this page in Mock/tactical-ops/, so the vocabulary is
   lifted verbatim from the three shipped references: the bracket-tick panel and
   scan rule from Login.razor.css, the page-head/eyebrow/mono-number atoms from
   Dashboard.razor.css, and the table / status-chip / modal treatment from
   Agents.razor.css.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of names site.css shares with other
   screens (.status, .status-badge, .info-grid, .detail-section, .page-btn,
   .modal-*, .agent-item, .agent-list, .no-output, .output-header, .section-title,
   .loading-state, .empty-state ...). Blazor scoping alone would stop a bare
   `.status { }` rule from leaking, but it would still fight site.css on THIS page
   in ways invisible from the other 40. So the markup carries a NEW .tac-* class
   next to every legacy one, and every selector below hangs off a .tac-* name. The
   legacy classes stay on the elements untouched because the Playwright deployment
   suite walks them (see the comment block at the top of DeploymentHistory.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css and
   responsive.css, so an equal-specificity .tac-* rule wins on source order; where
   site.css is more specific (`.agent-results-section .split-panel`) the rule below
   is written long enough to outrank it.

   SearchBar and ActionButton are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does.
   ============================================================================ */

.tac-dephistory[b-oinhrj2qkb] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* This page must never be the reason the document scrolls sideways. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared atoms */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-dephistory .tac-panel[b-oinhrj2qkb] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-dephistory .tac-panel[b-oinhrj2qkb]::before,
.tac-dephistory .tac-panel[b-oinhrj2qkb]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-dephistory .tac-panel[b-oinhrj2qkb]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-dephistory .tac-panel[b-oinhrj2qkb]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-dephistory .tac-scan[b-oinhrj2qkb] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-dephistory .tac-eyebrow[b-oinhrj2qkb] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-dephistory .tac-dot[b-oinhrj2qkb] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Deployments") from
   GetPageTitle(). Same call Dashboard.razor.css documents. */
.tac-dephistory .tac-pagetitle[b-oinhrj2qkb] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- page header */

.tac-dephistory .tac-pagehead[b-oinhrj2qkb] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    min-width: 0;
}

.tac-dephistory .tac-pagehead-left[b-oinhrj2qkb] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-dephistory .tac-pagehead-id[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tac-dephistory .tac-subtitle[b-oinhrj2qkb] {
    margin: 0;
    max-width: 60ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-dephistory .tac-pagehead-actions[b-oinhrj2qkb] {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* Back control — a flat hairline chip, not a rounded pill. */
.tac-dephistory .tac-back[b-oinhrj2qkb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    flex: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tac-dephistory .tac-back:hover[b-oinhrj2qkb] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-dephistory .tac-back:focus-visible[b-oinhrj2qkb] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-dephistory .tac-back-arrow[b-oinhrj2qkb] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Native <select> keeps the platform keyboard handling and the mobile picker;
   only the frame is restyled. */
.tac-dephistory .tac-select[b-oinhrj2qkb] {
    height: 34px;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-dephistory .tac-select:hover[b-oinhrj2qkb] {
    border-color: var(--tac-acc);
}

.tac-dephistory .tac-select:focus[b-oinhrj2qkb],
.tac-dephistory .tac-select:focus-visible[b-oinhrj2qkb] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
    border-color: var(--tac-acc);
    box-shadow: none;
}

/* -------------------------------------------------------------- loading / empty */

.tac-dephistory .tac-state[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    border-radius: 0;
}

.tac-dephistory .tac-state h3[b-oinhrj2qkb] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-dephistory .tac-state p[b-oinhrj2qkb] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* A bracket-ticked line mark instead of the emoji glyph the old markup used. */
.tac-dephistory .tac-statemark-wrap[b-oinhrj2qkb] {
    display: flex;
    font-size: 0;
    line-height: 0;
}

.tac-dephistory .tac-statemark[b-oinhrj2qkb] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-dephistory .tac-spinner[b-oinhrj2qkb] {
    width: 26px;
    height: 26px;
    margin: 0;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-dh-spin-b-oinhrj2qkb 0.9s linear infinite;
}

@keyframes tac-dh-spin-b-oinhrj2qkb {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------- list table */

/* overflow-x at EVERY width (not only under a media query) is what keeps a wide
   execution row from pushing the document sideways. */
.tac-dephistory .tac-tablewrap[b-oinhrj2qkb] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tac-dephistory .tac-table[b-oinhrj2qkb] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-dephistory .tac-table .tac-th[b-oinhrj2qkb] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-dephistory .tac-table .tac-th-actions[b-oinhrj2qkb] {
    text-align: end;
}

.tac-dephistory .tac-table .tac-row > td[b-oinhrj2qkb] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-dephistory .tac-table .tac-row:last-child > td[b-oinhrj2qkb] {
    border-bottom: 0;
}

.tac-dephistory .tac-table .tac-row:hover > td[b-oinhrj2qkb] {
    background: rgba(3, 105, 161, 0.05);
}

/* The execution name is the row's only navigation affordance — it stays the one
   coloured thing in the row. */
.tac-dephistory .tac-name[b-oinhrj2qkb] {
    display: inline-block;
    max-width: 42ch;
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-acc);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.tac-dephistory .tac-name:hover[b-oinhrj2qkb] {
    color: var(--tac-acc-deep);
    text-decoration: underline;
}

.tac-dephistory .tac-package[b-oinhrj2qkb] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

/* Timestamps are mono and tabular so a column of them lines up. */
.tac-dephistory .tac-stamp[b-oinhrj2qkb] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    white-space: nowrap;
}

/* ------------------------------------------------------- succeeded/failed counts */

.tac-dephistory .tac-agentstats[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--tac-fs-meta);
}

/* The old markup shouted the counts with a green tick and a red cross. The
   tactical convention is a semantic dot next to a tabular number; the meaning
   still reaches assistive tech through the existing title attribute. */
.tac-dephistory .tac-count[b-oinhrj2qkb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-dephistory .tac-count-ok[b-oinhrj2qkb] {
    color: var(--tac-ok);
}

.tac-dephistory .tac-count-ok .tac-dot[b-oinhrj2qkb] {
    background: var(--tac-ok);
}

.tac-dephistory .tac-count-crit[b-oinhrj2qkb] {
    color: var(--tac-crit);
}

.tac-dephistory .tac-count-crit .tac-dot[b-oinhrj2qkb] {
    background: var(--tac-crit);
}

.tac-dephistory .tac-count-total[b-oinhrj2qkb] {
    color: var(--tac-ink3);
}

/* ---------------------------------------------------------- status: dot + label */

/* site.css draws .status as a rounded pill; the pill is unwound here into the
   flat dot+label chip the shipped tactical pages use. */
.tac-dephistory .tac-status[b-oinhrj2qkb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

/* The compact form inside the agent list / output header. Same vocabulary, no
   fixed height so it can sit in a 100px grid column. */
.tac-dephistory .tac-badge[b-oinhrj2qkb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-dephistory .tac-status.completed[b-oinhrj2qkb],
.tac-dephistory .tac-badge.completed[b-oinhrj2qkb] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-dephistory .tac-status.completed .tac-dot[b-oinhrj2qkb],
.tac-dephistory .tac-badge.completed .tac-dot[b-oinhrj2qkb] {
    background: var(--tac-ok);
}

.tac-dephistory .tac-status.failed[b-oinhrj2qkb],
.tac-dephistory .tac-badge.failed[b-oinhrj2qkb] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-dephistory .tac-status.failed .tac-dot[b-oinhrj2qkb],
.tac-dephistory .tac-badge.failed .tac-dot[b-oinhrj2qkb] {
    background: var(--tac-crit);
}

/* PartialSuccess and Pending share the warn colour: both mean "not clean yet". */
.tac-dephistory .tac-status.partial[b-oinhrj2qkb],
.tac-dephistory .tac-status.pending[b-oinhrj2qkb],
.tac-dephistory .tac-badge.partial[b-oinhrj2qkb],
.tac-dephistory .tac-badge.pending[b-oinhrj2qkb] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-dephistory .tac-status.partial .tac-dot[b-oinhrj2qkb],
.tac-dephistory .tac-status.pending .tac-dot[b-oinhrj2qkb],
.tac-dephistory .tac-badge.partial .tac-dot[b-oinhrj2qkb],
.tac-dephistory .tac-badge.pending .tac-dot[b-oinhrj2qkb] {
    background: var(--tac-warn);
}

.tac-dephistory .tac-status.running[b-oinhrj2qkb],
.tac-dephistory .tac-badge.running[b-oinhrj2qkb] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-dephistory .tac-status.running .tac-dot[b-oinhrj2qkb],
.tac-dephistory .tac-badge.running .tac-dot[b-oinhrj2qkb] {
    background: var(--tac-acc);
}

/* Cancelled and skipped are dimmed, not coloured — nothing went wrong, it simply
   did not run, and the crit colour is reserved for real failures. */
.tac-dephistory .tac-status.cancelled[b-oinhrj2qkb],
.tac-dephistory .tac-badge.cancelled[b-oinhrj2qkb],
.tac-dephistory .tac-badge.skipped[b-oinhrj2qkb] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-dephistory .tac-status.cancelled .tac-dot[b-oinhrj2qkb],
.tac-dephistory .tac-badge.cancelled .tac-dot[b-oinhrj2qkb],
.tac-dephistory .tac-badge.skipped .tac-dot[b-oinhrj2qkb] {
    background: var(--tac-ink3);
}

/* -------------------------------------------------------------- list pagination */

.tac-dephistory .tac-pager[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    background: none;
}

.tac-dephistory .tac-pagebtn[b-oinhrj2qkb] {
    min-width: 30px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    box-shadow: none;
    cursor: pointer;
}

.tac-dephistory .tac-pagebtn:hover:not(:disabled)[b-oinhrj2qkb] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-dephistory .tac-pagebtn.active[b-oinhrj2qkb] {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-dephistory .tac-pagebtn:disabled[b-oinhrj2qkb] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-dephistory .tac-pagebtn:focus-visible[b-oinhrj2qkb] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* ------------------------------------------------------------- row action button */

.tac-dephistory .tac-cell-actions[b-oinhrj2qkb] {
    text-align: end;
    white-space: nowrap;
}

.tac-dephistory .tac-actions[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm it down to a hairline
   frame so the cluster reads as one instrument, not two competing pills. */
.tac-dephistory[b-oinhrj2qkb]  .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-dephistory[b-oinhrj2qkb]  .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-dephistory[b-oinhrj2qkb]  .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-dephistory[b-oinhrj2qkb]  .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-dephistory[b-oinhrj2qkb]  .action-btn-icon {
    filter: grayscale(0.4);
}

/* ============================================================================
   DETAIL VIEW
   ============================================================================ */

.tac-dephistory .tac-detailhead[b-oinhrj2qkb] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0;
}

.tac-dephistory .tac-detailhead-id[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 240px;
}

.tac-dephistory .tac-detail[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.tac-dephistory .tac-summary[b-oinhrj2qkb],
.tac-dephistory .tac-agentresults[b-oinhrj2qkb] {
    padding: 18px 20px 20px;
    min-width: 0;
}

.tac-dephistory .tac-sectiontitle[b-oinhrj2qkb] {
    margin: 0 0 16px;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ------------------------------------------------------------- summary info grid */

/* responsive.css collapses the bare .info-grid to 2 columns at 1023px and 1 at
   767px; the rules below only restyle the cells, never the track count, so that
   behaviour is inherited rather than fought. */
.tac-dephistory .tac-infogrid[b-oinhrj2qkb] {
    margin-bottom: 20px;
    gap: 14px 20px;
    min-width: 0;
}

.tac-dephistory .tac-infoitem[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tac-dephistory .tac-infolabel[b-oinhrj2qkb] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-dephistory .tac-infovalue[b-oinhrj2qkb] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- result counters */

.tac-dephistory .tac-results[b-oinhrj2qkb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

/* Flat hairline counters with a semantic left rule — no pastel fills. */
.tac-dephistory .tac-resultbox[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: none;
    padding: 12px 14px;
    border: 1px solid var(--tac-line);
    border-left: 2px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    text-align: start;
    min-width: 0;
}

.tac-dephistory .tac-resulthead[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.tac-dephistory .tac-resultlabel[b-oinhrj2qkb] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tac-dephistory .tac-resultcount[b-oinhrj2qkb] {
    display: block;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-display);
    font-weight: 600;
    line-height: 1;
    color: var(--tac-ink0);
}

.tac-dephistory .tac-resultbox.completed[b-oinhrj2qkb] {
    border-left-color: var(--tac-ok);
}

.tac-dephistory .tac-resultbox.completed .tac-dot[b-oinhrj2qkb] { background: var(--tac-ok); }
.tac-dephistory .tac-resultbox.completed .tac-resultcount[b-oinhrj2qkb] { color: var(--tac-ok); }

.tac-dephistory .tac-resultbox.failed[b-oinhrj2qkb] {
    border-left-color: var(--tac-crit);
}

.tac-dephistory .tac-resultbox.failed .tac-dot[b-oinhrj2qkb] { background: var(--tac-crit); }
.tac-dephistory .tac-resultbox.failed .tac-resultcount[b-oinhrj2qkb] { color: var(--tac-crit); }

.tac-dephistory .tac-resultbox.total[b-oinhrj2qkb] {
    border-left-color: var(--tac-acc);
}

.tac-dephistory .tac-resultbox.total .tac-dot[b-oinhrj2qkb] { background: var(--tac-acc); }

/* --------------------------------------------------------------- agent toolbar */

.tac-dephistory .tac-toolbar[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-dephistory[b-oinhrj2qkb]  .search-bar {
    height: 34px;
    width: 300px;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 200px;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-dephistory[b-oinhrj2qkb]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-dephistory[b-oinhrj2qkb]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-dephistory[b-oinhrj2qkb]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-dephistory[b-oinhrj2qkb]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-dephistory[b-oinhrj2qkb]  .search-bar .clear-search,
.tac-dephistory[b-oinhrj2qkb]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* ------------------------------------------------------------------ split panel */

/* THE OVERFLOW FIX. responsive.css's `.split-panel { grid-template-columns: 1fr }`
   is (0,1,0) and site.css's `.agent-results-section .split-panel` is (0,2,0), so
   the two-column layout used to survive all the way to phone width and push the
   document sideways. This scoped rule carries the component's scope attribute on
   BOTH compound selectors, outranks site.css, and collapses at the tablet break. */
.tac-dephistory .tac-agentresults .tac-split[b-oinhrj2qkb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    min-height: 400px;
    min-width: 0;
}

.tac-dephistory .tac-subpanel[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s1);
    overflow: hidden;
    min-width: 0;
}

.tac-dephistory .tac-listhead[b-oinhrj2qkb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 104px;
    gap: 10px;
    padding: 9px 12px;
    background: var(--tac-s2);
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-dephistory .tac-listhead span:nth-child(2)[b-oinhrj2qkb],
.tac-dephistory .tac-listhead span:nth-child(3)[b-oinhrj2qkb] {
    text-align: center;
}

.tac-dephistory .tac-list[b-oinhrj2qkb] {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
    min-width: 0;
}

/* ---------------------------------------------------------------- agent rows */

.tac-dephistory .tac-agentitem[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--tac-line);
    background: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.tac-dephistory .tac-agentitem:last-child[b-oinhrj2qkb] {
    border-bottom: 0;
}

.tac-dephistory .tac-agentitem.selected[b-oinhrj2qkb] {
    background: none;
}

.tac-dephistory .tac-agentitem.selected > .tac-agentrow[b-oinhrj2qkb] {
    background: var(--tac-acc-dim);
    box-shadow: inset 2px 0 0 var(--tac-acc);
}

.tac-dephistory .tac-agentrow[b-oinhrj2qkb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 104px;
    gap: 10px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.tac-dephistory .tac-agentrow:hover[b-oinhrj2qkb] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-dephistory .tac-agentinfo[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tac-dephistory .tac-expand[b-oinhrj2qkb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    border: 1px solid transparent;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
    cursor: pointer;
    user-select: none;
}

.tac-dephistory .tac-expand:hover[b-oinhrj2qkb] {
    border-color: var(--tac-line2);
    color: var(--tac-acc);
}

.tac-dephistory .tac-hostname[b-oinhrj2qkb] {
    flex: 1;
    min-width: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tac-dephistory .tac-progress[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

.tac-dephistory .tac-agentstatus[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    min-width: 0;
}

/* ------------------------------------------------------------------ step rail */

.tac-dephistory .tac-steps[b-oinhrj2qkb] {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px 10px 34px;
    background: var(--tac-s2);
    border-top: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-dephistory .tac-step[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin: 0 0 3px;
    border: 1px solid transparent;
    border-inline-start: 2px solid var(--tac-line2);
    border-radius: 0;
    background: none;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    min-width: 0;
}

.tac-dephistory .tac-step:hover[b-oinhrj2qkb] {
    background: var(--tac-s1);
    border-color: var(--tac-line);
}

.tac-dephistory .tac-step.selected[b-oinhrj2qkb] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    box-shadow: none;
}

.tac-dephistory .tac-step.completed[b-oinhrj2qkb] { border-inline-start-color: var(--tac-ok); }
.tac-dephistory .tac-step.running[b-oinhrj2qkb]   { border-inline-start-color: var(--tac-acc); }
.tac-dephistory .tac-step.failed[b-oinhrj2qkb]    { border-inline-start-color: var(--tac-crit); }
.tac-dephistory .tac-step.skipped[b-oinhrj2qkb]   { border-inline-start-color: var(--tac-ink3); }
.tac-dephistory .tac-step.pending[b-oinhrj2qkb]   { border-inline-start-color: var(--tac-line2); }

/* A square index plate, not a circle — sharp corners are the house rule. */
.tac-dephistory .tac-stepnum[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    color: var(--tac-ink3);
}

.tac-dephistory .tac-step.completed .tac-stepnum[b-oinhrj2qkb] {
    border-color: rgba(21, 128, 61, 0.4);
    color: var(--tac-ok);
    background: rgba(21, 128, 61, 0.07);
}

.tac-dephistory .tac-step.failed .tac-stepnum[b-oinhrj2qkb] {
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.07);
}

.tac-dephistory .tac-step.running .tac-stepnum[b-oinhrj2qkb] {
    border-color: rgba(3, 105, 161, 0.4);
    color: var(--tac-acc);
    background: var(--tac-acc-dim);
}

.tac-dephistory .tac-stepname[b-oinhrj2qkb] {
    flex: 1;
    min-width: 0;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tac-dephistory .tac-stepicon[b-oinhrj2qkb] {
    flex: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-dephistory .tac-step.completed .tac-stepicon[b-oinhrj2qkb] { color: var(--tac-ok); }
.tac-dephistory .tac-step.failed .tac-stepicon[b-oinhrj2qkb]    { color: var(--tac-crit); }
.tac-dephistory .tac-step.running .tac-stepicon[b-oinhrj2qkb]   { color: var(--tac-acc); }

/* --------------------------------------------------------- agent list footer */

.tac-dephistory .tac-listfoot[b-oinhrj2qkb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 12px;
    background: var(--tac-s2);
    border-top: 1px solid var(--tac-line);
}

.tac-dephistory .tac-listcount[b-oinhrj2qkb],
.tac-dephistory .tac-pageinfo[b-oinhrj2qkb] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-dephistory .tac-pageinfo[b-oinhrj2qkb] {
    color: var(--tac-ink2);
}

.tac-dephistory .tac-pagerctl[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ------------------------------------------------------------------ output pane */

.tac-dephistory .tac-outputhead[b-oinhrj2qkb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px;
    background: var(--tac-s2);
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-dephistory .tac-outputtitle[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 160px;
    min-width: 0;
}

.tac-dephistory .tac-outputagent[b-oinhrj2qkb] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-dephistory .tac-outputstep[b-oinhrj2qkb] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-dephistory .tac-outputmeta[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: none;
    min-width: 0;
}

.tac-dephistory .tac-exit[b-oinhrj2qkb],
.tac-dephistory .tac-duration[b-oinhrj2qkb] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-dephistory .tac-outputbody[b-oinhrj2qkb] {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 350px;
    min-width: 0;
}

.tac-dephistory .tac-stream[b-oinhrj2qkb] {
    margin: 0 0 14px;
    min-width: 0;
}

.tac-dephistory .tac-stream:last-child[b-oinhrj2qkb] {
    margin-bottom: 0;
}

/* A mono tab welded to the top of the stream block, square on every corner. */
.tac-dephistory .tac-streamlabel[b-oinhrj2qkb] {
    display: inline-block;
    margin: 0;
    padding: 3px 9px;
    border: 1px solid var(--tac-line2);
    border-bottom: 0;
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-dephistory .tac-stream-error .tac-streamlabel[b-oinhrj2qkb] {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
}

/* The console block is the ONE dark surface on this light page — a terminal
   should look like a terminal. */
.tac-dephistory .tac-stream pre[b-oinhrj2qkb] {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--tac-ink0);
    border-radius: 0;
    background: var(--tac-ink0);
    color: #dbe6f4;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.55;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tac-dephistory .tac-stream pre.error[b-oinhrj2qkb] {
    border-color: rgba(220, 38, 38, 0.55);
    color: #fecaca;
}

.tac-dephistory .tac-noout[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    text-align: center;
}

.tac-dephistory .tac-nooterror[b-oinhrj2qkb] {
    color: var(--tac-crit);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: var(--tac-fs-micro);
    overflow-wrap: anywhere;
}

.tac-dephistory .tac-skip[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-size: var(--tac-fs-micro);
    overflow-wrap: anywhere;
}

.tac-dephistory .tac-skipmark[b-oinhrj2qkb] {
    width: 18px;
    height: 18px;
    flex: none;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-dephistory .tac-placeholder[b-oinhrj2qkb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 36px 20px;
    text-align: center;
}

.tac-dephistory .tac-placeholder p[b-oinhrj2qkb] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* ------------------------------------------------------------------ modals */

/* The dialog keeps .modal-overlay > .modal and the header/body/footer chain. */
.tac-dephistory .tac-modal-overlay[b-oinhrj2qkb] {
    backdrop-filter: none;
}

.tac-dephistory .tac-modal-overlay .tac-modal[b-oinhrj2qkb] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-dephistory .tac-modal-overlay .tac-modal[b-oinhrj2qkb]::before,
.tac-dephistory .tac-modal-overlay .tac-modal[b-oinhrj2qkb]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-dephistory .tac-modal-overlay .tac-modal[b-oinhrj2qkb]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-dephistory .tac-modal-overlay .tac-modal[b-oinhrj2qkb]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-dephistory .tac-modal-head[b-oinhrj2qkb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-dephistory .tac-modal-head h2[b-oinhrj2qkb] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-dephistory .tac-close[b-oinhrj2qkb] {
    width: 28px;
    height: 28px;
    flex: none;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-label);
    line-height: 1;
    cursor: pointer;
}

.tac-dephistory .tac-close:hover[b-oinhrj2qkb] {
    border-color: var(--tac-line2);
    color: var(--tac-crit);
}

.tac-dephistory .tac-close:focus-visible[b-oinhrj2qkb] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-dephistory .tac-modal-body[b-oinhrj2qkb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: none;
    text-align: center;
}

.tac-dephistory .tac-modal-body h3[b-oinhrj2qkb] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-dephistory .tac-modal-body p[b-oinhrj2qkb] {
    margin: 0;
    max-width: 52ch;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-dephistory .tac-modal-body strong[b-oinhrj2qkb] {
    font-family: var(--tac-mono);
    color: var(--tac-ink0);
}

.tac-dephistory .tac-confirmmark-wrap[b-oinhrj2qkb] {
    display: flex;
    font-size: 0;
    line-height: 0;
}

.tac-dephistory .tac-confirmmark[b-oinhrj2qkb] {
    width: 36px;
    height: 36px;
    stroke: var(--tac-crit);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-dephistory .tac-warnbox[b-oinhrj2qkb] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    text-align: start;
}

.tac-dephistory .tac-modal-foot[b-oinhrj2qkb] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-dephistory .tac-modal-foot .btn[b-oinhrj2qkb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-dephistory .tac-modal-foot .btn:hover:not(:disabled)[b-oinhrj2qkb] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-dephistory .tac-modal-foot .btn.btn-danger[b-oinhrj2qkb] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-dephistory .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-oinhrj2qkb] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-dephistory .tac-modal-foot .btn:disabled[b-oinhrj2qkb] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-dephistory .tac-modal-foot .btn:focus-visible[b-oinhrj2qkb] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the split panel becomes one column — see the OVERFLOW FIX note above. */
@media (max-width: 1023px) {
    .tac-dephistory .tac-agentresults .tac-split[b-oinhrj2qkb] {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .tac-dephistory .tac-pagehead-actions[b-oinhrj2qkb] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-dephistory .tac-results[b-oinhrj2qkb] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Phone: everything stacks, and the two counters that must stay readable get a
   full row each. */
@media (max-width: 767px) {
    .tac-dephistory[b-oinhrj2qkb] {
        gap: 12px;
    }

    .tac-dephistory .tac-pagetitle[b-oinhrj2qkb] {
        font-size: 20px;
    }

    .tac-dephistory .tac-summary[b-oinhrj2qkb],
    .tac-dephistory .tac-agentresults[b-oinhrj2qkb] {
        padding: 14px;
    }

    .tac-dephistory .tac-results[b-oinhrj2qkb] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-dephistory .tac-listhead[b-oinhrj2qkb],
    .tac-dephistory .tac-agentrow[b-oinhrj2qkb] {
        grid-template-columns: minmax(0, 1fr) 56px 92px;
        gap: 8px;
        padding: 9px 10px;
    }

    .tac-dephistory .tac-steps[b-oinhrj2qkb] {
        padding-inline-start: 20px;
    }

    .tac-dephistory .tac-outputmeta[b-oinhrj2qkb] {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .tac-dephistory .tac-detailhead[b-oinhrj2qkb],
    .tac-dephistory .tac-pagehead[b-oinhrj2qkb] {
        align-items: flex-start;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-dephistory *[b-oinhrj2qkb],
    .tac-dephistory[b-oinhrj2qkb]  * {
        transition: none !important;
        animation: none !important;
    }
}

/* .tac-dephistory .tac-status is worn by TWO different things on this page: the hero badge
   in the summary header, where the 16px label step is right, and a badge inside a
   table data cell, where the surrounding text is 12-13px and 16px towers over the
   row. Scoping to `td` retunes only the in-row instance and leaves the hero alone -
   which is why this is an override rather than an edit to the rule above. */
.tac-dephistory td .tac-status[b-oinhrj2qkb] {
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
}
/* _content/Athena.Server/Pages/Deployments.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops deployment console — Pages/Deployments.razor.

   There is NO Mock/tactical-ops artboard for this page, so the vocabulary below
   is taken verbatim from the three shipped conversions (Login.razor.css,
   Dashboard.razor.css, Agents.razor.css): bracket-ticked .tac-panel, a .tac-scan
   hairline, mono .tac-chip counters, the .tac-table roster, dot+label
   .tac-status, and the .tac-bar / .tac-bar-fill progress track.

   Scoped to Deployments.razor. The design tokens (--tac-*) are NOT declared here
   — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with up
   to 41 other screens (.stats-bar, .stat-item, .stat-label, .btn, .modal-*,
   .form-group, .form-control, .progress-fill, .search-bar ...). Blazor scoping
   alone would keep a bare `.stat-item { }` rule from leaking, but it would still
   fight site.css on THIS page in ways invisible from the other 40. So the markup
   carries a NEW .tac-* class next to every legacy one, and every selector below
   hangs off a .tac-* name. The legacy classes stay on the elements untouched
   because the Playwright suite and responsive.css select on them (see the
   comment block at the top of Deployments.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so
   an equal-specificity .tac-* rule wins on source order. Where site.css is more
   specific (e.g. `.stat-item.stat-item-failed .stat-icon`) the rule below is
   deliberately written long enough to outrank it.

   SearchBar and ActionButton are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does.
   ============================================================================ */

.tac-deployments[b-ihxb23q1b4] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* This page must never be the reason the document scrolls sideways —
       Responsive/*BreakpointTests assert zero page overflow at 375/768/1280/1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-deployments .tac-panel[b-ihxb23q1b4] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-deployments .tac-panel[b-ihxb23q1b4]::before,
.tac-deployments .tac-panel[b-ihxb23q1b4]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-deployments .tac-panel[b-ihxb23q1b4]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-deployments .tac-panel[b-ihxb23q1b4]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-deployments .tac-scan[b-ihxb23q1b4] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-deployments .tac-eyebrow[b-ihxb23q1b4] {
    display: block;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every count, id, folder name, percentage and timestamp on this page is mono
   and tabular so columns of digits line up vertically. */
.tac-deployments .tac-num[b-ihxb23q1b4] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-deployments .tac-sep[b-ihxb23q1b4] {
    color: var(--tac-line2);
}

.tac-deployments .tac-dot[b-ihxb23q1b4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

/* Line-art marks replace the page's former emoji glyphs. */
.tac-deployments .tac-mark[b-ihxb23q1b4] {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------- ops rail */

.tac-deployments .tac-oprail-wrap[b-ihxb23q1b4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* .quick-actions keeps its bare name for responsive.css, but the grid template is
   restated here so the four cards size to the tactical rail rather than site.css's
   softer card grid. */
.tac-deployments .tac-oprail[b-ihxb23q1b4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.tac-deployments .tac-op[b-ihxb23q1b4] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 14px 14px 13px;
    min-width: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-left: 2px solid var(--tac-line2);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    text-align: start;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-deployments .tac-op[b-ihxb23q1b4]::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
    opacity: 0.7;
    pointer-events: none;
}

.tac-deployments .tac-op:hover[b-ihxb23q1b4] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    border-left-color: var(--tac-acc);
    box-shadow: none;
    transform: none;
}

.tac-deployments .tac-op:focus-visible[b-ihxb23q1b4] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* site.css renders .quick-action-icon as a ~32px emoji block; unwind it to a
   fixed stroke-glyph box so all four marks share one optical weight. */
.tac-deployments .tac-oprail .tac-op .tac-op-mark[b-ihxb23q1b4] {
    flex: none;
    display: block;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: var(--tac-acc);
}

.tac-deployments .tac-op-text[b-ihxb23q1b4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.tac-deployments .tac-op-index[b-ihxb23q1b4] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.2em;
    color: var(--tac-ink3);
}

.tac-deployments .tac-oprail .tac-op .tac-op-title[b-ihxb23q1b4] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-deployments .tac-oprail .tac-op .tac-op-desc[b-ihxb23q1b4] {
    margin: 0;
    font-size: var(--tac-fs-micro);
    line-height: 1.45;
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-deployments .tac-op-arrow[b-ihxb23q1b4] {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    stroke: var(--tac-line2);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.15s ease;
}

.tac-deployments .tac-op:hover .tac-op-arrow[b-ihxb23q1b4] {
    stroke: var(--tac-acc);
}

/* ---------------------------------------------------------- KPI card stat bar */

/* ONE card treatment for the whole app.

   This is the Dashboard's KPI tile (Pages/Dashboard.razor.css - the reference, and
   NOT edited by this change) lifted across: the same 1px hairline on --tac-s1, the
   same 9px bracket ticks, the same head / figure / foot rhythm, and the same
   ok | warn | crit | info | off dot vocabulary. The compact chip bar that used to
   live here is gone; the app no longer has two card treatments.

   What the Dashboard rail does NOT have - because its tiles are passive read-outs -
   is a pressed state. These cards ARE the page's filter, so the affordance is
   carried over from the chip bar they replace: a left accent border plus an inset
   ring on .selected, an accent hairline and surface wash on hover, and
   role="button" + tabindex="0" in the markup so a card is reachable and operable
   from the keyboard. A card that looks passive but filters on click would be worse
   than the chip it replaced.

   EVERY font-size below comes from a token in wwwroot/css/tactical-tokens.css
   (--tac-label-size / --tac-label-size-sm / --tac-stat-value-size). Nine pages each
   deciding for themselves what a stat count is worth - 18px on /credentials, 14px on
   /agents - is exactly what this block exists to end.

   Nothing here restyles a bare shared selector: the stat-item / stat-icon /
   stat-content / stat-label / stats-bar names stay on the markup as the Playwright and
   bUnit hooks they are, and are only ever reached THROUGH a .tac-* class.

   The .tac-chip* names stay on the markup too, and nothing styles them any more: nine
   bUnit suites select .tac-chipbar / .tac-chip / .tac-chip-count / .tac-chip-label /
   .tac-chip-readout, so after the conversion they are selector hooks exactly like the
   site.css names beside them. */

.tac-deployments .tac-kpibar[b-ihxb23q1b4] {
    display: grid;
    /* min() so a track can never be wider than the bar itself. A bare 190px minimum
       pushes the DOCUMENT sideways at 375px, and AssertNoPageOverflow runs there. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-deployments .tac-kpi[b-ihxb23q1b4] {
    position: relative;
    /* LOAD-BEARING. shell.css:489 declares a bare stat-content as flex-direction:column,
       and site.css:368 makes a bare stat-item a centred flex ROW. A container that
       sets display:flex without saying which way it runs inherits whichever of those
       reaches it and stacks - or in-lines - its children by accident; that is the bug
       that put the dot on top of the Agents chip. Every flex container in this block
       states its direction explicitly. */
    /* TWO LINES, number on the right:
           row 1  label + dot ............ figure
           row 2  caption (spans both columns)
       A grid rather than the old three stacked rows, so the figure can sit beside
       the label instead of under it and the card loses a line without losing data. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head figure"
        "foot foot";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Bracket ticks - the signature of the tactical-ops panel, the same 9px corner pair
   the Dashboard tile draws. */
.tac-deployments .tac-kpi[b-ihxb23q1b4]::before,
.tac-deployments .tac-kpi[b-ihxb23q1b4]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-deployments .tac-kpi[b-ihxb23q1b4]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-deployments .tac-kpi[b-ihxb23q1b4]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

/* The filter states the Dashboard tile has no need for. */

.tac-deployments .tac-kpi-filter[b-ihxb23q1b4] {
    cursor: pointer;
}

.tac-deployments .tac-kpi-filter:hover[b-ihxb23q1b4] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    /* site.css:382 lifts a bare stat-item 2px on hover. A card bouncing under the
       pointer is noise, so the surface wash IS the hover. */
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-deployments .tac-kpi-filter:focus-visible[b-ihxb23q1b4] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The pressed state. Declared AFTER :hover on purpose - same specificity, so the
   later rule wins and a selected card keeps reading as selected under the pointer.
   padding-left gives back the 2px the border takes, so the label does not shift when
   a card is picked. */
.tac-deployments .tac-kpi.selected[b-ihxb23q1b4] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    border-left: 3px solid var(--tac-acc);
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

/* A read-out is not a filter and must not look like one. */
.tac-deployments .tac-kpi-readout[b-ihxb23q1b4] {
    cursor: default;
}

/* Head / figure / foot. */

.tac-deployments .tac-kpi .tac-kpi-head[b-ihxb23q1b4] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    /* site.css:444 gives a bare stat-content flex:1; inside a column card that would
       make the head eat the space the figure and foot need. */
    flex: none;
}

.tac-deployments .tac-kpi .tac-lbl[b-ihxb23q1b4] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    /* 0.14em is the mock's tracking; at 16px it widens a label like
       "MAINTENANCE MODE" far enough to force a second grid row on a laptop. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-deployments .tac-kpi.selected .tac-lbl[b-ihxb23q1b4] {
    color: var(--tac-ink);
}

.tac-deployments .tac-kpi .tac-kpi-head .tac-dot[b-ihxb23q1b4] {
    margin-left: auto;
    /* Never let a stray align-items:stretch pull the dot off the head's centre
       line - that is what read as "the dot is stuck on the top of the card". */
    align-self: center;
}

.tac-deployments .tac-kpi .tac-kpi-figure[b-ihxb23q1b4] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The count. site.css:392 paints a bare stat-icon as a 48-60px gradient circle; here
   it is a number, so the whole badge treatment is unwound. Four classes deep so it
   outranks the two-class site.css:6289 rule that paints the maintenance counter. */
.tac-deployments .tac-kpibar .tac-kpi .tac-kpi-value[b-ihxb23q1b4] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-stat-value-size);
    font-weight: 600;
    line-height: 1;
}

.tac-deployments .tac-kpi .tac-kpi-foot[b-ihxb23q1b4] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The dot vocabulary, verbatim from the Dashboard rail. */
.tac-deployments .tac-kpi .tac-dot.ok[b-ihxb23q1b4] { background: var(--tac-ok); }
.tac-deployments .tac-kpi .tac-dot.warn[b-ihxb23q1b4] { background: var(--tac-warn); }
.tac-deployments .tac-kpi .tac-dot.crit[b-ihxb23q1b4] { background: var(--tac-crit); }
.tac-deployments .tac-kpi .tac-dot.info[b-ihxb23q1b4] { background: var(--tac-acc); }
.tac-deployments .tac-kpi .tac-dot.off[b-ihxb23q1b4] { background: var(--tac-ink3); }

/* --------------------------------------------------------------------- section */

.tac-deployments .tac-section[b-ihxb23q1b4] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-deployments .tac-toolbar[b-ihxb23q1b4] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-deployments .tac-toolbar-title[b-ihxb23q1b4] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-deployments .tac-toolbar-count[b-ihxb23q1b4] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-deployments .tac-toolbar-controls[b-ihxb23q1b4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-deployments[b-ihxb23q1b4]  .search-bar {
    height: 34px;
    width: 260px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-deployments[b-ihxb23q1b4]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-deployments[b-ihxb23q1b4]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-deployments[b-ihxb23q1b4]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-deployments[b-ihxb23q1b4]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-deployments[b-ihxb23q1b4]  .search-bar .clear-search,
.tac-deployments[b-ihxb23q1b4]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* Segmented List/Grid switch — and the deploy dialog's target tabs, which are the
   same control in a different place. */
.tac-deployments .tac-segment[b-ihxb23q1b4] {
    display: flex;
    gap: 0;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    overflow: hidden;
}

.tac-deployments .tac-segment .tac-segment-btn[b-ihxb23q1b4] {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.tac-deployments .tac-segment .tac-segment-btn + .tac-segment-btn[b-ihxb23q1b4] {
    border-inline-start: 1px solid var(--tac-line2);
}

.tac-deployments .tac-segment .tac-segment-btn:hover[b-ihxb23q1b4] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

.tac-deployments .tac-segment .tac-segment-btn.active[b-ihxb23q1b4] {
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-deployments .tac-segment .tac-segment-btn:focus-visible[b-ihxb23q1b4] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* Flat, uppercase, square page buttons (View All / View All Packages / Create). */
.tac-deployments .tac-btn[b-ihxb23q1b4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-deployments .tac-btn:hover:not(:disabled)[b-ihxb23q1b4] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    box-shadow: none;
    transform: none;
}

.tac-deployments .tac-btn.btn-primary[b-ihxb23q1b4] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-deployments .tac-btn.btn-primary:hover:not(:disabled)[b-ihxb23q1b4] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-deployments .tac-btn:focus-visible[b-ihxb23q1b4] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ loading / empty */

.tac-deployments .tac-state[b-ihxb23q1b4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-deployments .tac-state h3[b-ihxb23q1b4] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-deployments .tac-state p[b-ihxb23q1b4] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-deployments .tac-state .tac-state-eyebrow[b-ihxb23q1b4] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-deployments .tac-state-mark[b-ihxb23q1b4] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-deployments .tac-spinner[b-ihxb23q1b4] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-ihxb23q1b4 0.9s linear infinite;
}

@keyframes tac-spin-b-ihxb23q1b4 {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* Six columns will not fit a phone. The WRAPPER owns the horizontal scroll at
   every width so the document never does. */
.tac-deployments .tac-tablewrap[b-ihxb23q1b4] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-deployments .tac-table[b-ihxb23q1b4] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-deployments .tac-table .tac-th[b-ihxb23q1b4] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-deployments .tac-table .tac-th-num[b-ihxb23q1b4] {
    text-align: end;
}

.tac-deployments .tac-table .tac-th-actions[b-ihxb23q1b4] {
    text-align: end;
}

.tac-deployments .tac-table .tac-row > td[b-ihxb23q1b4] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-deployments .tac-table .tac-row:last-child > td[b-ihxb23q1b4] {
    border-bottom: 0;
}

.tac-deployments .tac-table .tac-row[b-ihxb23q1b4] {
    cursor: pointer;
    background: none;
    transition: background 0.12s ease;
}

.tac-deployments .tac-table .tac-row:hover > td[b-ihxb23q1b4] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-deployments .tac-table .tac-cell-num[b-ihxb23q1b4] {
    text-align: end;
    white-space: nowrap;
}

.tac-deployments .tac-table .tac-cell-actions[b-ihxb23q1b4] {
    text-align: end;
    white-space: nowrap;
}

/* ------------------------------------------------------------- identity cells */

.tac-deployments .tac-identity[b-ihxb23q1b4] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tac-deployments .tac-identity-text[b-ihxb23q1b4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-deployments .tac-row-mark[b-ihxb23q1b4] {
    flex: none;
    display: block;
    width: 16px;
    height: 16px;
    font-size: 0;
    line-height: 0;
    color: var(--tac-ink3);
}

.tac-deployments .tac-rowtitle[b-ihxb23q1b4] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* Folder names are paths — mono, and never the browser's default red-on-pink. */
.tac-deployments .tac-code[b-ihxb23q1b4] {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- status dot + label */

/* site.css draws .status-badge as a rounded pill; the pill is unwound here to the
   flat dot+label chip the Agents roster uses. */
.tac-deployments .tac-status[b-ihxb23q1b4] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-deployments .tac-status-running[b-ihxb23q1b4] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-deployments .tac-status-running .tac-dot[b-ihxb23q1b4] { background: var(--tac-acc); }

.tac-deployments .tac-status-pending[b-ihxb23q1b4],
.tac-deployments .tac-status-scheduled[b-ihxb23q1b4] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-deployments .tac-status-pending .tac-dot[b-ihxb23q1b4],
.tac-deployments .tac-status-scheduled .tac-dot[b-ihxb23q1b4] { background: var(--tac-warn); }

.tac-deployments .tac-status-completed[b-ihxb23q1b4] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-deployments .tac-status-completed .tac-dot[b-ihxb23q1b4] { background: var(--tac-ok); }

.tac-deployments .tac-status-failed[b-ihxb23q1b4] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-deployments .tac-status-failed .tac-dot[b-ihxb23q1b4] { background: var(--tac-crit); }

/* A partial success is a warning, not a failure: some agents finished. */
.tac-deployments .tac-status-partial[b-ihxb23q1b4] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-deployments .tac-status-partial .tac-dot[b-ihxb23q1b4] { background: var(--tac-warn); }

.tac-deployments .tac-status-cancelled[b-ihxb23q1b4] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-deployments .tac-status-cancelled .tac-dot[b-ihxb23q1b4] { background: var(--tac-ink3); }

/* ------------------------------------------------------------------- progress */

.tac-deployments .tac-progress[b-ihxb23q1b4] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* site.css gives .progress-bar-mini a pill radius and a gradient fill; flatten
   both to the 4px track Dashboard.razor.css established. */
.tac-deployments .tac-progress .tac-bar[b-ihxb23q1b4] {
    position: relative;
    display: block;
    flex: 1;
    height: 4px;
    min-width: 60px;
    border-radius: 0;
    background: var(--tac-line);
    overflow: hidden;
}

.tac-deployments .tac-progress .tac-bar-fill[b-ihxb23q1b4] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    border-radius: 0;
    background: var(--tac-acc);
    transition: width 0.25s ease;
}

.tac-deployments .tac-progress .tac-bar-fill.partial[b-ihxb23q1b4] {
    background: var(--tac-warn);
}

.tac-deployments .tac-progress .tac-bar-fill.failed[b-ihxb23q1b4] {
    background: var(--tac-crit);
}

.tac-deployments .tac-progress .tac-num[b-ihxb23q1b4] {
    flex: none;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

/* -------------------------------------------------------------- row action btns */

.tac-deployments .tac-actions[b-ihxb23q1b4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of actions reads as one instrument cluster rather than
   three competing pills. Hover restores the semantic colour. */
.tac-deployments[b-ihxb23q1b4]  .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-deployments[b-ihxb23q1b4]  .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-deployments[b-ihxb23q1b4]  .btn.btn-icon.btn-warning:hover:not(:disabled) {
    border-color: var(--tac-warn);
}

.tac-deployments[b-ihxb23q1b4]  .btn.btn-icon.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-deployments[b-ihxb23q1b4]  .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-deployments[b-ihxb23q1b4]  .btn.btn-icon .action-btn-icon {
    filter: grayscale(0.4);
}

/* ------------------------------------------------------------------ card grids */

.tac-deployments .tac-cardgrid[b-ihxb23q1b4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 16px;
    margin: 0;
    min-width: 0;
}

.tac-deployments .tac-card[b-ihxb23q1b4] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    margin: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tac-deployments .tac-card[b-ihxb23q1b4]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
    opacity: 0.7;
    pointer-events: none;
}

.tac-deployments .tac-card:hover[b-ihxb23q1b4] {
    border-color: var(--tac-acc);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transform: none;
}

.tac-deployments .tac-card-head[b-ihxb23q1b4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.tac-deployments .tac-card .tac-card-mark[b-ihxb23q1b4] {
    flex: none;
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: var(--tac-acc);
}

.tac-deployments .tac-card .tac-cardtitle[b-ihxb23q1b4] {
    flex: 1;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-deployments .tac-card .tac-card-meta[b-ihxb23q1b4] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-deployments .tac-card .tac-card-desc[b-ihxb23q1b4] {
    margin: 0;
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-deployments .tac-card .tac-card-foot[b-ihxb23q1b4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-deployments .tac-card .tac-card-foot .tac-num[b-ihxb23q1b4],
.tac-deployments .tac-card .tac-meta[b-ihxb23q1b4] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The compact active-deployment card keeps the status badge on the head row. */
.tac-deployments .tac-card .tac-card-head .tac-status[b-ihxb23q1b4] {
    margin-inline-start: auto;
}

/* ------------------------------------------------------------------- modals */

/* The dialog keeps .modal-overlay and the header/body/footer chain. */
.tac-deployments .tac-modal-overlay[b-ihxb23q1b4] {
    backdrop-filter: none;
}

.tac-deployments .tac-modal-overlay .tac-modal[b-ihxb23q1b4] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-deployments .tac-modal-overlay .tac-modal[b-ihxb23q1b4]::before,
.tac-deployments .tac-modal-overlay .tac-modal[b-ihxb23q1b4]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-deployments .tac-modal-overlay .tac-modal[b-ihxb23q1b4]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-deployments .tac-modal-overlay .tac-modal[b-ihxb23q1b4]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-deployments .tac-modal-head[b-ihxb23q1b4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-deployments .tac-modal-head h3[b-ihxb23q1b4] {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-deployments .tac-modal-close[b-ihxb23q1b4] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    cursor: pointer;
}

.tac-deployments .tac-modal-close svg[b-ihxb23q1b4] {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.tac-deployments .tac-modal-close:hover[b-ihxb23q1b4] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-deployments .tac-modal-body[b-ihxb23q1b4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: none;
}

.tac-deployments .tac-modal-foot[b-ihxb23q1b4] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-deployments .tac-field[b-ihxb23q1b4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-deployments .tac-field > label[b-ihxb23q1b4] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-deployments .tac-field .form-control[b-ihxb23q1b4] {
    height: 34px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-deployments .tac-field .form-control:focus[b-ihxb23q1b4] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    outline: none;
}

.tac-deployments .tac-formrow[b-ihxb23q1b4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    min-width: 0;
}

.tac-deployments .tac-targets[b-ihxb23q1b4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.tac-deployments .tac-agentlist[b-ihxb23q1b4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-deployments .tac-check[b-ihxb23q1b4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px 2px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    cursor: pointer;
}

.tac-deployments .tac-check input[type="checkbox"][b-ihxb23q1b4] {
    accent-color: var(--tac-acc);
    margin: 0;
}

.tac-deployments .tac-modal-foot .btn[b-ihxb23q1b4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-deployments .tac-modal-foot .btn:hover:not(:disabled)[b-ihxb23q1b4] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-deployments .tac-modal-foot .btn.btn-primary[b-ihxb23q1b4] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-deployments .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-ihxb23q1b4] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-deployments .tac-modal-foot .btn:disabled[b-ihxb23q1b4] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-deployments .tac-modal-foot .btn:focus-visible[b-ihxb23q1b4] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the toolbars stop trying to fit on one line. */
@media (max-width: 1023px) {
    .tac-deployments .tac-toolbar-controls[b-ihxb23q1b4] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-deployments[b-ihxb23q1b4]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-deployments .tac-oprail[b-ihxb23q1b4] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* Phone: one column everywhere, and the two chip rows split in half. */
@media (max-width: 767px) {
    .tac-deployments[b-ihxb23q1b4] {
        gap: 12px;
    }

    .tac-deployments .tac-oprail[b-ihxb23q1b4] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .tac-deployments .tac-kpibar[b-ihxb23q1b4] {
        /* Two cards per row at phone. minmax(0, 1fr) cannot overflow, so a long
           label ellipsises inside its own card instead of widening the document -
           AssertNoPageOverflow runs at 375px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tac-deployments .tac-kpi[b-ihxb23q1b4] {
        padding: 12px 14px;
    }

    .tac-deployments .tac-kpi.selected[b-ihxb23q1b4] {
        padding-left: 12px;
    }

    .tac-deployments .tac-toolbar[b-ihxb23q1b4] {
        padding: 12px;
        gap: 10px;
    }

    .tac-deployments .tac-cardgrid[b-ihxb23q1b4] {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }

    .tac-deployments .tac-segment .tac-segment-btn[b-ihxb23q1b4] {
        padding: 0 10px;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-deployments *[b-ihxb23q1b4],
    .tac-deployments[b-ihxb23q1b4]  * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- two-line card: label+figure on one row, caption beneath ---------------- */
.tac-deployments .tac-kpi .tac-kpi-head[b-ihxb23q1b4] {
    grid-area: head;
}

.tac-deployments .tac-kpi .tac-kpi-figure[b-ihxb23q1b4] {
    grid-area: figure;
    justify-content: flex-end;
    justify-self: end;
    align-items: baseline;
}

.tac-deployments .tac-kpi .tac-kpi-foot[b-ihxb23q1b4] {
    grid-area: foot;
}

.tac-deployments .tac-kpi .tac-kpi-value[b-ihxb23q1b4] {
    /* The figure is the point of the card, so it leads. It was reading SMALLER than
       its own 16px label, which inverted the hierarchy. */
    font-size: var(--tac-stat-value-size);
    line-height: 1;
}
/* _content/Athena.Server/Pages/DeployPackage.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops deploy console — Pages/DeployPackage.razor.

   No artboard exists for this screen in Mock/tactical-ops/, so every value below
   is taken from the three shipped reference implementations (Login.razor.css,
   Dashboard.razor.css, Agents.razor.css) rather than invented. Consistency with
   what already ships beats novelty here.

   Scoped to DeployPackage.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   ── TWO RULES THIS SHEET MUST NOT BREAK ───────────────────────────────────────

   1. NOTHING here may name a bare shared selector. .form-section, .form-control,
      .form-group, .btn/.btn-primary/.btn-secondary, .section-title, .page-header,
      .loading-state and friends are shared with dozens of other pages and their
      rules stay in site.css as dead weight for the final sweep. Every element
      therefore carries a NEW .tac-* twin, and every selector below hangs off one.
      The legacy classes stay on the markup because the Playwright deployment
      suites select on them (see the comment block at the top of the .razor).

   2. AgentSelector is a CHILD COMPONENT: its DOM never carries this component's
      scope attribute, so the handful of rules that keep it from fighting the
      tactical panel go through ::deep from a .tac-* ancestor that does — exactly
      as Login.razor.css does for input.form-control. Those rules are deliberately
      cosmetic-only (corners, faces, accent) because AgentSelector is shared with
      Alerts, ExecuteCommand, ScheduleTask and three Settings sections.
   ============================================================================ */

.tac-deploy[b-m2c73x3tse] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The console must never be the reason the document scrolls sideways. */
    min-width: 0;
    max-width: 1200px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-num[b-m2c73x3tse] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-lbl[b-m2c73x3tse],
.tac-eyebrow[b-m2c73x3tse] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-eyebrow[b-m2c73x3tse] {
    color: var(--tac-acc);
}

.tac-dot[b-m2c73x3tse] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

.tac-dot.ok[b-m2c73x3tse] { background: var(--tac-ok); }
.tac-dot.info[b-m2c73x3tse] { background: var(--tac-acc); }
.tac-dot.off[b-m2c73x3tse] { background: var(--tac-ink3); }

.tac-note[b-m2c73x3tse] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* --------------------------------------------------------------- page header */

.tac-pagehead[b-m2c73x3tse] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-pagehead-id[b-m2c73x3tse] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* A quiet, sharp-cornered back control — the rounded pill from site.css is unwound. */
.tac-back[b-m2c73x3tse] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tac-back:hover[b-m2c73x3tse] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-back:focus-visible[b-m2c73x3tse] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-back-icon[b-m2c73x3tse] {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-pagehead-text[b-m2c73x3tse] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Deployments") from
   GetPageTitle(). */
.tac-pagetitle[b-m2c73x3tse] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-pagesub[b-m2c73x3tse] {
    margin: 0;
    max-width: 60ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* The readiness read-out mirrors CanDeploy — the same expression that gates the
   Deploy button, so the light can never disagree with the control. */
.tac-readiness[b-m2c73x3tse] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-line2);
    background: var(--tac-s2);
    white-space: nowrap;
}

.tac-readiness-value[b-m2c73x3tse] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ---------------------------------------------------------------------- grid */

.tac-deploy-body[b-m2c73x3tse] {
    min-width: 0;
}

.tac-grid[b-m2c73x3tse] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-width: 0;
}

/* -------------------------------------------------------------------- panels */

.tac-panel[b-m2c73x3tse] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-panel[b-m2c73x3tse]::before,
.tac-panel[b-m2c73x3tse]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-panel[b-m2c73x3tse]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-m2c73x3tse]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-m2c73x3tse] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-panel-head[b-m2c73x3tse] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 14px 18px 12px;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.tac-panel-head-ruled[b-m2c73x3tse] {
    border-bottom: 1px solid var(--tac-line);
}

/* The 01..04 launch order replaces the emoji that used to head each section. */
.tac-panel-index[b-m2c73x3tse] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-panel-title[b-m2c73x3tse] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* The live count of chosen targets, trailing the panel title. */
.tac-panel-count[b-m2c73x3tse] {
    margin-left: auto;
    font-size: var(--tac-fs-label);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-panel-body[b-m2c73x3tse] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px 16px;
    min-width: 0;
}

/* The targets panel hands its whole body to AgentSelector, which brings its own
   internal padding. */
.tac-panel-body-flush[b-m2c73x3tse] {
    padding: 0;
}

.tac-panel-summary[b-m2c73x3tse] {
    height: 100%;
}

.tac-panel-summary .tac-panel-body[b-m2c73x3tse] {
    flex: 1;
    justify-content: space-between;
}

/* ------------------------------------------------------------------- fields */

.tac-field[b-m2c73x3tse] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-label[b-m2c73x3tse] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-select[b-m2c73x3tse],
.tac-input[b-m2c73x3tse] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-select:hover[b-m2c73x3tse],
.tac-input:hover[b-m2c73x3tse] {
    border-color: var(--tac-line2);
    background: var(--tac-s1);
}

.tac-select:focus[b-m2c73x3tse],
.tac-input:focus[b-m2c73x3tse] {
    outline: none;
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    /* site.css puts a 3px blue glow on any focused control; here it reads as a
       second border inside the field frame. The frame itself is the affordance. */
    box-shadow: none;
}

.tac-select:focus-visible[b-m2c73x3tse],
.tac-input:focus-visible[b-m2c73x3tse] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* ----------------------------------------------------------- package preview */

.tac-preview[b-m2c73x3tse] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--tac-line);
    border-left: 2px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-s2);
    min-width: 0;
}

.tac-preview-empty[b-m2c73x3tse] {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--tac-line2);
    background: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

.tac-preview-head[b-m2c73x3tse] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    min-width: 0;
}

.tac-preview-title[b-m2c73x3tse] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.02em;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tac-preview-stats[b-m2c73x3tse] {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.tac-preview-stat[b-m2c73x3tse] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.tac-preview-stat .tac-num[b-m2c73x3tse] {
    font-size: var(--tac-fs-label);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-preview-desc[b-m2c73x3tse] {
    margin: 0;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* The step rail: a numbered execution order, not a bag of pills. */
.tac-steps[b-m2c73x3tse] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--tac-line);
    border: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-step[b-m2c73x3tse] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: var(--tac-s1);
    border-radius: 0;
    min-width: 0;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink);
}

.tac-step-order[b-m2c73x3tse] {
    flex: none;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    color: var(--tac-acc);
}

.tac-step-name[b-m2c73x3tse] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tac-ink0);
}

/* DeploymentStepType is a wire enum, so it reads as a machine token. */
.tac-step-type[b-m2c73x3tse] {
    margin-left: auto;
    flex: none;
    padding: 1px 7px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- schedule mode */

.tac-modes[b-m2c73x3tse] {
    display: flex;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.tac-mode[b-m2c73x3tse] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.tac-mode:hover[b-m2c73x3tse] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
}

.tac-mode.selected[b-m2c73x3tse] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

.tac-mode:focus-visible[b-m2c73x3tse] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-mode-name[b-m2c73x3tse] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tac-mode.selected .tac-mode-name[b-m2c73x3tse] {
    color: var(--tac-ink0);
}

.tac-datetime[b-m2c73x3tse] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}

/* ------------------------------------------------------------------- summary */

.tac-summary[b-m2c73x3tse] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    min-width: 0;
}

.tac-summary-row[b-m2c73x3tse] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-summary-row:last-child[b-m2c73x3tse] {
    border-bottom: 0;
}

.tac-summary-value[b-m2c73x3tse] {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tac-summary-value.tac-num[b-m2c73x3tse] {
    font-weight: 500;
}

/* ------------------------------------------------------------------- actions */

.tac-actions[b-m2c73x3tse] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.tac-btn[b-m2c73x3tse] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-btn:hover:not(:disabled)[b-m2c73x3tse] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-btn:focus-visible[b-m2c73x3tse] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-btn-primary[b-m2c73x3tse] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-btn-primary:hover:not(:disabled)[b-m2c73x3tse] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-btn:disabled[b-m2c73x3tse] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-btn-icon[b-m2c73x3tse] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-btn-spinner[b-m2c73x3tse] {
    width: 13px;
    height: 13px;
    flex: none;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: tac-spin-b-m2c73x3tse 0.9s linear infinite;
}

/* ------------------------------------------------------------- loading state */

.tac-state[b-m2c73x3tse] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-spinner[b-m2c73x3tse] {
    width: 28px;
    height: 28px;
    margin: 0;
    border: 2px solid var(--tac-line);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-m2c73x3tse 0.9s linear infinite;
}

.tac-state-text[b-m2c73x3tse] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

@keyframes tac-spin-b-m2c73x3tse {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------- child component (::deep) */

/* AgentSelector is SHARED (Alerts, ExecuteCommand, ScheduleTask, three Settings
   sections), so it is not converted here. These rules only stop its rounded,
   blue-gradient chrome from fighting the tactical panel it now sits inside, and
   they apply ONLY within this page's scope. */
.tac-panel-targets[b-m2c73x3tse]  .agent-selector {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--tac-body);
}

.tac-panel-targets[b-m2c73x3tse]  .agent-selector-tab,
.tac-panel-targets[b-m2c73x3tse]  .agent-selector-search input,
.tac-panel-targets[b-m2c73x3tse]  .agent-selector-filter select,
.tac-panel-targets[b-m2c73x3tse]  .agent-selector-item,
.tac-panel-targets[b-m2c73x3tse]  .agent-selector-collection-item {
    border-radius: 0;
}

.tac-panel-targets[b-m2c73x3tse]  .agent-selector-tab {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-panel-targets[b-m2c73x3tse]  .agent-selector-tab.active {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-panel-targets[b-m2c73x3tse]  .agent-selector-ip,
.tac-panel-targets[b-m2c73x3tse]  .agent-selector-version,
.tac-panel-targets[b-m2c73x3tse]  .agent-selector-selected-count,
.tac-panel-targets[b-m2c73x3tse]  .agent-selector-collection-details {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- responsive */

/* The two-up grid has to collapse before the shell's own tablet breakpoint,
   otherwise two panels plus the sidebar overflow the viewport. */
@media (max-width: 1023px) {
    .tac-grid[b-m2c73x3tse] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-pagetitle[b-m2c73x3tse] {
        font-size: 20px;
    }

    .tac-readiness[b-m2c73x3tse] {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .tac-deploy[b-m2c73x3tse] {
        gap: 12px;
    }

    .tac-panel-head[b-m2c73x3tse] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-panel-body[b-m2c73x3tse] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-panel-body-flush[b-m2c73x3tse] {
        padding: 0;
    }

    .tac-preview-stats[b-m2c73x3tse] {
        margin-left: 0;
    }

    .tac-datetime[b-m2c73x3tse] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-modes[b-m2c73x3tse] {
        flex-wrap: wrap;
    }

    .tac-mode[b-m2c73x3tse] {
        flex: 1 1 140px;
    }

    .tac-actions .tac-btn[b-m2c73x3tse] {
        flex: 1 1 auto;
    }

    .tac-summary-row[b-m2c73x3tse] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .tac-summary-value[b-m2c73x3tse] {
        text-align: left;
    }
}

/* Honour reduced-motion: kill the hover washes and stop the spinners from
   animating for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-deploy *[b-m2c73x3tse],
    .tac-panel[b-m2c73x3tse]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/ExecuteCommand.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops command console — Pages/ExecuteCommand.razor.

   No artboard exists for this screen in Mock/tactical-ops/ (the folder holds
   login, dashboard, agents and report-builder only), so every value below is
   taken from the shipped reference implementations — Login.razor.css,
   Dashboard.razor.css, Agents.razor.css and DeployPackage.razor.css — rather
   than invented. Consistency with what already ships beats novelty here.

   Scoped to ExecuteCommand.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   ── THREE RULES THIS SHEET MUST NOT BREAK ─────────────────────────────────────

   1. NOTHING here may name a bare shared selector. .section-card, .form-group,
      .form-control, .btn/.btn-primary/.btn-secondary, .page-header,
      .validation-message and friends are shared with dozens of other pages and
      their rules stay in site.css as dead weight for the final sweep. Every
      element therefore carries a NEW .tac-* twin and every selector below hangs
      off one. The legacy classes stay on the markup because the Playwright
      suites and responsive.css select on them (see the .razor comment block).

   2. AgentSelector is a SHARED CHILD COMPONENT (Alerts, DeployPackage,
      ScheduleTask and three Settings sections use it too): its DOM never carries
      this component's scope attribute, so the handful of rules that stop its
      rounded, blue-gradient chrome from fighting the tactical panel go through
      ::deep from a .tac-* ancestor that does — exactly as Login.razor.css does
      for input.form-control. Those rules are deliberately cosmetic-only.

   3. Monaco owns everything inside #monaco-editor-container. This sheet only
      frames it; it never reaches into the editor's own DOM (which is rendered
      by the library and would need ::deep anyway).
   ============================================================================ */

.tac-execute[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The console must never be the reason the document scrolls sideways. */
    min-width: 0;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    /* site.css gives .execute-page a fixed height + its own flex column; the
       tactical layout scrolls with the shell instead. */
    height: auto;
    padding: 0;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-num[b-d3dt59ecmx] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-lbl[b-d3dt59ecmx],
.tac-eyebrow[b-d3dt59ecmx] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-eyebrow[b-d3dt59ecmx] {
    color: var(--tac-acc);
}

.tac-dot[b-d3dt59ecmx] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

.tac-dot.ok[b-d3dt59ecmx] { background: var(--tac-ok); }
.tac-dot.info[b-d3dt59ecmx] { background: var(--tac-acc); }
.tac-dot.warn[b-d3dt59ecmx] { background: var(--tac-warn); }
.tac-dot.off[b-d3dt59ecmx] { background: var(--tac-ink3); }

.tac-note[b-d3dt59ecmx] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- rotate hint */

/* responsive.css decides WHETHER this shows (portrait phone only); this only
   restyles it when it does. */
.tac-rotate[b-d3dt59ecmx] {
    border-radius: 0;
    border-color: var(--tac-line);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tac-rotate-icon[b-d3dt59ecmx] {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-rotate-dismiss[b-d3dt59ecmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tac-ink3);
}

.tac-rotate-dismiss svg[b-d3dt59ecmx] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* --------------------------------------------------------------- page header */

.tac-pagehead[b-d3dt59ecmx] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-pagehead-id[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* A quiet, sharp-cornered back control — the rounded pill from site.css is unwound. */
.tac-back[b-d3dt59ecmx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tac-back:hover[b-d3dt59ecmx] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-back:focus-visible[b-d3dt59ecmx] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-back-icon[b-d3dt59ecmx] {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-pagehead-text[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Commands") from
   GetPageTitle(). */
.tac-pagetitle[b-d3dt59ecmx] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-pagesub[b-d3dt59ecmx] {
    margin: 0;
    max-width: 60ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* The readiness read-out mirrors CanExecute — the same expression that gates the
   Execute button, so the light can never disagree with the control. */
.tac-readiness[b-d3dt59ecmx] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-line2);
    background: var(--tac-s2);
    white-space: nowrap;
}

.tac-readiness-value[b-d3dt59ecmx] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ---------------------------------------------------------------------- grid */

.tac-grid[b-d3dt59ecmx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: start;
    gap: 16px;
    min-width: 0;
    padding: 0;
    flex: initial;
}

.tac-col[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* The editor column is one tall panel; let it stretch to the settings column. */
.tac-col-editor[b-d3dt59ecmx] {
    align-self: stretch;
}

/* -------------------------------------------------------------------- panels */

.tac-panel[b-d3dt59ecmx] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    overflow: visible;
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-panel[b-d3dt59ecmx]::before,
.tac-panel[b-d3dt59ecmx]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-panel[b-d3dt59ecmx]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-d3dt59ecmx]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-d3dt59ecmx] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-panel-head[b-d3dt59ecmx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 14px 18px 12px;
    min-width: 0;
    background: none;
    border: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.tac-panel-head-ruled[b-d3dt59ecmx] {
    border-bottom: 1px solid var(--tac-line);
}

/* The 01..04 launch order replaces the emoji that used to head each section. */
.tac-panel-index[b-d3dt59ecmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-panel-title[b-d3dt59ecmx] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* The live count of chosen targets, trailing the panel title. */
.tac-panel-count[b-d3dt59ecmx] {
    margin-left: auto;
    font-size: var(--tac-fs-label);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-panel-body[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px 16px;
    min-width: 0;
}

/* The targets panel hands its whole body to AgentSelector, which brings its own
   internal padding. */
.tac-panel-body-flush[b-d3dt59ecmx] {
    padding: 0;
}

/* --------------------------------------------------------------- 01 the editor */

.tac-panel-script[b-d3dt59ecmx] {
    flex: 1;
    min-height: 0;
}

/* The command-type picker rides on the right of the script panel header. */
.tac-typepick[b-d3dt59ecmx] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tac-typepick .tac-lbl[b-d3dt59ecmx] {
    white-space: nowrap;
}

.tac-editor[b-d3dt59ecmx] {
    flex: 1;
    min-height: 420px;
    min-width: 0;
    border-top: 0;
    /* Monaco measures its own container; a hard frame keeps the sharp-cornered
       language even while the library is still loading. */
    background: var(--tac-s2);
}

/* -------------------------------------------------------------------- fields */

.tac-field[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-label[b-d3dt59ecmx] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-select[b-d3dt59ecmx],
.tac-input[b-d3dt59ecmx] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* The header-mounted type picker is a size smaller and sized to its content. */
.tac-select-sm[b-d3dt59ecmx] {
    width: auto;
    height: 28px;
    padding: 0 8px;
    font-size: var(--tac-fs-micro);
}

.tac-select:hover[b-d3dt59ecmx],
.tac-input:hover[b-d3dt59ecmx] {
    background: var(--tac-s1);
}

.tac-select:focus[b-d3dt59ecmx],
.tac-input:focus[b-d3dt59ecmx] {
    outline: none;
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    /* site.css puts a 3px blue glow on any focused control; here it reads as a
       second border inside the field frame. The frame itself is the affordance. */
    box-shadow: none;
}

.tac-select:focus-visible[b-d3dt59ecmx],
.tac-input:focus-visible[b-d3dt59ecmx] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* ------------------------------------------------------------------- run as */

.tac-runas[b-d3dt59ecmx] {
    gap: 8px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--tac-line);
}

.tac-modes[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.tac-mode[b-d3dt59ecmx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.tac-mode:hover[b-d3dt59ecmx] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
}

.tac-mode.selected[b-d3dt59ecmx] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

.tac-mode:focus-visible[b-d3dt59ecmx] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-mode .tac-dot[b-d3dt59ecmx] {
    margin-top: 5px;
}

.tac-mode-text[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-mode-name[b-d3dt59ecmx] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-mode.selected .tac-mode-name[b-d3dt59ecmx] {
    color: var(--tac-ink0);
}

.tac-mode-hint[b-d3dt59ecmx] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-credential[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    min-width: 0;
}

.tac-empty[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px dashed var(--tac-line2);
    border-radius: 0;
    background: none;
    text-align: left;
}

.tac-empty-text[b-d3dt59ecmx] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-empty-link[b-d3dt59ecmx] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-acc);
    text-decoration: none;
    border-bottom: 1px solid rgba(3, 105, 161, 0.4);
}

.tac-empty-link:hover[b-d3dt59ecmx] {
    color: var(--tac-acc-deep);
    border-bottom-color: var(--tac-acc-deep);
    text-decoration: none;
}

/* ------------------------------------------------------------ 04 launch panel */

.tac-summary[b-d3dt59ecmx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    min-width: 0;
}

.tac-summary-row[b-d3dt59ecmx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-summary-row:last-child[b-d3dt59ecmx] {
    border-bottom: 0;
}

.tac-summary-row dt[b-d3dt59ecmx] {
    margin: 0;
}

.tac-summary-value[b-d3dt59ecmx] {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tac-summary-value.tac-num[b-d3dt59ecmx] {
    font-weight: 500;
}

/* The blocker line states the FIRST unmet prerequisite — the same string the
   disabled Execute button is disabled for. */
.tac-blocker[b-d3dt59ecmx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    text-align: left;
}

/* ------------------------------------------------------------------- actions */

.tac-actions[b-d3dt59ecmx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.tac-btn[b-d3dt59ecmx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-btn:hover:not(:disabled)[b-d3dt59ecmx] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-btn:focus-visible[b-d3dt59ecmx] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-btn-primary[b-d3dt59ecmx] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-btn-primary:hover:not(:disabled)[b-d3dt59ecmx] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-btn:disabled[b-d3dt59ecmx] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-btn-icon[b-d3dt59ecmx] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------- child component (::deep) */

/* AgentSelector is SHARED (Alerts, DeployPackage, ScheduleTask, three Settings
   sections), so it is not converted here. These rules only stop its rounded,
   blue-gradient chrome from fighting the tactical panel it now sits inside, and
   they apply ONLY within this page's scope. */
.tac-panel-targets[b-d3dt59ecmx]  .agent-selector {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--tac-body);
}

.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-tab,
.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-search input,
.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-filter select,
.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-item,
.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-collection-item {
    border-radius: 0;
}

.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-tab {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-tab.active {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-ip,
.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-version,
.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-selected-count,
.tac-panel-targets[b-d3dt59ecmx]  .agent-selector-collection-details {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- responsive */

/* The two-up grid has to collapse before the shell's own tablet breakpoint,
   otherwise the editor plus the settings rail plus the sidebar overflow the
   viewport. */
@media (max-width: 1023px) {
    .tac-grid[b-d3dt59ecmx] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-pagetitle[b-d3dt59ecmx] {
        font-size: 20px;
    }

    .tac-readiness[b-d3dt59ecmx] {
        margin-left: 0;
    }

    .tac-editor[b-d3dt59ecmx] {
        min-height: 320px;
    }
}

@media (max-width: 767px) {
    .tac-execute[b-d3dt59ecmx] {
        gap: 12px;
    }

    .tac-panel-head[b-d3dt59ecmx] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-panel-body[b-d3dt59ecmx] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-panel-body-flush[b-d3dt59ecmx] {
        padding: 0;
    }

    /* The type picker drops under the panel title rather than squeezing it. */
    .tac-typepick[b-d3dt59ecmx] {
        margin-left: 0;
        flex: 1 1 100%;
    }

    .tac-select-sm[b-d3dt59ecmx] {
        flex: 1;
    }

    .tac-editor[b-d3dt59ecmx] {
        min-height: 260px;
    }

    .tac-actions .tac-btn[b-d3dt59ecmx] {
        flex: 1 1 auto;
    }

    .tac-summary-row[b-d3dt59ecmx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .tac-summary-value[b-d3dt59ecmx] {
        text-align: left;
    }
}

/* Honour reduced-motion: the only transitions here are hover/focus washes, but
   kill them anyway so nothing animates for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-execute *[b-d3dt59ecmx],
    .tac-panel[b-d3dt59ecmx]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/Help.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops documentation reader — the scoped stylesheet for Pages/Help.razor.

   This file REPLACES the page-level inline <style> block Help.razor used to
   carry. Everything that block did (the two-column shell, the nav rail, the
   markdown typography, the PowerShell callout, the empty states) is here, in the
   tactical-ops language, and nothing was moved into wwwroot/css/site.css.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, which is linked first in _Host, so every
   tactical-ops page shares one source of truth.

   ── THREE RULES THIS SHEET MUST NOT BREAK ─────────────────────────────────────

   1. NOTHING here may name a bare shared selector. `.nav-item` in particular is
      the left rail's class in wwwroot/css/shell.css and belongs to the SHELL, not
      to this page. The help tree keeps `nav-item` for the E2E hooks but is styled
      through the `tac-nav-item` twin, and every rule below is either a `tac-*`
      name or a legacy name qualified by a `tac-*` ancestor.

   2. The rendered document is a MarkupString produced by IMarkdownService. Its
      nodes never carry this component's scope attribute, so every rule that
      styles the document's own HTML goes through ::deep from `.tac-doc`, which
      does. Same for ActionButton, a child component.

   3. Nothing may overflow horizontally. AssertNoPageOverflow runs at phone,
      tablet, desktop and 1920: the grid collapses to one column below 1024px,
      long code and URLs wrap, and the two things that genuinely cannot wrap —
      fenced code blocks and markdown tables — each get their OWN
      overflow-x: auto container rather than pushing the page wide.
   ============================================================================ */

.tac-help[b-ipgrfcifb3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- route trail */

.tac-crumbs[b-ipgrfcifb3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    min-width: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-crumb[b-ipgrfcifb3] {
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
}

.tac-crumb-current[b-ipgrfcifb3] {
    color: var(--tac-ink0);
}

.tac-crumb-sep[b-ipgrfcifb3] {
    color: var(--tac-line2);
}

/* ---------------------------------------------------------------- meta strip */

/* No <h2> here on purpose — see the heading note in Help.razor. */
.tac-pagehead[b-ipgrfcifb3] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-width: 0;
}

.tac-eyebrow[b-ipgrfcifb3] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-pagemeta[b-ipgrfcifb3] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
    color: var(--tac-ink2);
}

.tac-num[b-ipgrfcifb3] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- two columns */

/* Replaces the old `display: flex; height: calc(100vh - 140px)` shell. A fixed
   viewport height meant two nested scrollbars and a squashed reader on a phone;
   the page scrolls normally now and only the RAIL sticks. */
/* The rail width is a custom property so the splitter can change ONE value at runtime
   instead of rewriting a grid template from script. 264px stays the default, so the
   layout is unchanged until someone actually drags. */
.tac-help-body[b-ipgrfcifb3] {
    display: grid;
    grid-template-columns: var(--help-rail-w, 264px) auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
}

/* ------------------------------------------------------------------- splitter */

/* Stretches the full row so the whole edge is draggable, but paints only a thin
   centre line — a 6px hit target is comfortable, a 6px visible bar is not. */
.help-splitter[b-ipgrfcifb3] {
    align-self: stretch;
    position: relative;
    width: 6px;
    min-height: 80px;
    padding: 0;
    border: 0;
    background: none;
    cursor: col-resize;
    touch-action: none;
}

.help-splitter[b-ipgrfcifb3]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--tac-line);
    transition: background 0.15s ease, width 0.15s ease;
}

.help-splitter:hover[b-ipgrfcifb3]::before,
.help-splitter:focus-visible[b-ipgrfcifb3]::before,
.help-splitter[data-dragging][b-ipgrfcifb3]::before {
    width: 3px;
    background: var(--tac-acc);
}

.help-splitter:focus-visible[b-ipgrfcifb3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------- panels */

.tac-panel[b-ipgrfcifb3] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Bracket ticks — the signature of the tactical-ops panel. */
.tac-panel[b-ipgrfcifb3]::before,
.tac-panel[b-ipgrfcifb3]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-panel[b-ipgrfcifb3]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-ipgrfcifb3]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-ipgrfcifb3] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
}

.tac-panel-head[b-ipgrfcifb3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 14px;
    min-width: 0;
    border-bottom: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-panel-title[b-ipgrfcifb3] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ------------------------------------------------------------ documentation rail */

.tac-help-rail[b-ipgrfcifb3] {
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tac-help-nav[b-ipgrfcifb3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px 12px;
    min-width: 0;
}

.tac-nav-group[b-ipgrfcifb3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-nav-group + .tac-nav-group[b-ipgrfcifb3],
.tac-nav-item + .tac-nav-group[b-ipgrfcifb3] {
    margin-top: 8px;
}

/* The folder row is a <button> when it has an index document and a <div> when it
   does not — one rule covers both, and `all: unset` is deliberately avoided so the
   button keeps its focus ring. */
.tac-nav-group-head[b-ipgrfcifb3] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

button.tac-nav-group-head[b-ipgrfcifb3] {
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

button.tac-nav-group-head:hover[b-ipgrfcifb3] {
    background: var(--tac-s2);
    color: var(--tac-ink0);
}

button.tac-nav-group-head:focus-visible[b-ipgrfcifb3],
.tac-nav-item:focus-visible[b-ipgrfcifb3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* A hairline gutter instead of the old 20px indent: it reads as a tree without
   costing width the rail does not have. */
.tac-nav-children[b-ipgrfcifb3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 9px;
    padding-left: 9px;
    border-left: 1px solid var(--tac-line);
    min-width: 0;
}

/* `height` and `flex` are declared explicitly because the element also carries the
   legacy `nav-item` class, which shell.css sizes for the SHELL's left rail. */
.tac-nav-item[b-ipgrfcifb3] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 32px;
    flex: none;
    padding: 7px 8px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: none;
    text-align: left;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tac-nav-item:hover[b-ipgrfcifb3] {
    background: var(--tac-s2);
    color: var(--tac-ink0);
}

.tac-nav-item.active[b-ipgrfcifb3] {
    background: var(--tac-acc-dim);
    border-left-color: var(--tac-acc);
    color: var(--tac-acc-deep);
    font-weight: 600;
}

/* Document titles WRAP rather than truncate.
   The rail is a fixed 264px, so `text-overflow: ellipsis` clipped any long title -
   "WebRTC Screen Share — Direct ICE" rendered as "WebRTC Screen Share — Di...", which is
   unreadable in a navigation list whose entire job is telling you what a document is.
   `.tac-nav-item` is already `height: auto; min-height: 32px`, so an item simply grows to
   two lines. */
.tac-nav-text[b-ipgrfcifb3] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tac-nav-mark[b-ipgrfcifb3] {
    display: inline-flex;
    flex: none;
    width: 14px;
    height: 14px;
}

.tac-nav-mark svg[b-ipgrfcifb3] {
    width: 14px;
    height: 14px;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-nav-item.active .tac-nav-mark svg[b-ipgrfcifb3] {
    stroke: var(--tac-acc);
}

/* ------------------------------------------------------------ document surface */

.tac-help-doc[b-ipgrfcifb3] {
    padding: 22px 26px 28px;
    gap: 18px;
    min-width: 0;
}

/* ---------------------------------------------------------- PowerShell callout */

.tac-callout[b-ipgrfcifb3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-width: 0;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-acc);
    background: var(--tac-s2);
}

.tac-callout-mark[b-ipgrfcifb3] {
    display: inline-flex;
    flex: none;
    width: 18px;
    height: 18px;
}

.tac-callout-mark svg[b-ipgrfcifb3] {
    width: 18px;
    height: 18px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-callout-text[b-ipgrfcifb3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.tac-callout-title[b-ipgrfcifb3] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-callout-body[b-ipgrfcifb3] {
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-code[b-ipgrfcifb3] {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-callout-action[b-ipgrfcifb3] {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tac-callout-action:hover[b-ipgrfcifb3] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-callout-action:focus-visible[b-ipgrfcifb3] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- empty states */

.tac-empty[b-ipgrfcifb3] {
    padding: 18px;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
}

.tac-empty-block[b-ipgrfcifb3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    padding: 56px 20px;
}

.tac-empty-title[b-ipgrfcifb3] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-empty-body[b-ipgrfcifb3] {
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    letter-spacing: 0;
    color: var(--tac-ink2);
    max-width: 46ch;
}

/* ------------------------------------------------------- the rendered document */

/* Everything below reaches MarkupString output, which carries no scope attribute. */

.tac-doc[b-ipgrfcifb3] {
    max-width: 82ch;
    min-width: 0;
    font-size: var(--tac-fs-body);
    line-height: 1.7;
    color: var(--tac-ink);
}

.tac-doc[b-ipgrfcifb3]  h1,
.tac-doc[b-ipgrfcifb3]  h2,
.tac-doc[b-ipgrfcifb3]  h3,
.tac-doc[b-ipgrfcifb3]  h4 {
    font-family: var(--tac-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-doc[b-ipgrfcifb3]  h1 {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tac-line);
    font-size: var(--tac-fs-display);
    line-height: 1.2;
    letter-spacing: 0.03em;
}

.tac-doc[b-ipgrfcifb3]  h2 {
    margin: 30px 0 12px;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* h3 sits between h2 (--tac-fs-lg) and h4 (--tac-fs-body). Its 15px would fold
   to --tac-fs-body by value and collide with h4, flattening the ladder, so it
   takes the role token one step up. */
.tac-doc[b-ipgrfcifb3]  h3 {
    margin: 22px 0 10px;
    font-size: var(--tac-fs-label);
    letter-spacing: 0.04em;
}

.tac-doc[b-ipgrfcifb3]  h4 {
    margin: 18px 0 8px;
    font-size: var(--tac-fs-body);
}

.tac-doc[b-ipgrfcifb3]  p {
    margin: 0 0 14px;
    color: var(--tac-ink);
}

.tac-doc[b-ipgrfcifb3]  ul,
.tac-doc[b-ipgrfcifb3]  ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.tac-doc[b-ipgrfcifb3]  li {
    margin-bottom: 6px;
}

.tac-doc[b-ipgrfcifb3]  a {
    color: var(--tac-acc);
    text-decoration: none;
    border-bottom: 1px solid rgba(3, 105, 161, 0.35);
    overflow-wrap: anywhere;
}

.tac-doc[b-ipgrfcifb3]  a:hover {
    color: var(--tac-acc-deep);
    border-bottom-color: var(--tac-acc-deep);
}

.tac-doc[b-ipgrfcifb3]  code {
    padding: 1px 5px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* A fenced block is its own horizontal scroll container — it must never widen
   the page (AssertNoPageOverflow). */
.tac-doc[b-ipgrfcifb3]  pre {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--tac-ink0);
    border-radius: 0;
    background: var(--tac-ink0);
    color: #e2e8f0;
    overflow-x: auto;
    max-width: 100%;
}

.tac-doc[b-ipgrfcifb3]  pre code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--tac-fs-micro);
    line-height: 1.6;
    overflow-wrap: normal;
}

.tac-doc[b-ipgrfcifb3]  blockquote {
    margin: 16px 0;
    padding: 8px 0 8px 14px;
    border-left: 2px solid var(--tac-acc);
    color: var(--tac-ink2);
}

.tac-doc[b-ipgrfcifb3]  blockquote p:last-child {
    margin-bottom: 0;
}

.tac-doc[b-ipgrfcifb3]  img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    margin: 16px 0;
}

.tac-doc[b-ipgrfcifb3]  hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--tac-line);
}

/* A markdown table cannot be wrapped in a container from here (the HTML is
   generated), so the table itself becomes the scroll container. */
.tac-doc[b-ipgrfcifb3]  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: var(--tac-fs-meta);
}

.tac-doc[b-ipgrfcifb3]  th,
.tac-doc[b-ipgrfcifb3]  td {
    padding: 8px 12px;
    border: 1px solid var(--tac-line);
    text-align: left;
    vertical-align: top;
}

.tac-doc[b-ipgrfcifb3]  th {
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

/* --------------------------------------------------- child components (::deep) */

/* ActionButton renders its own <button class="btn btn-icon"> — a shared selector
   this sheet must not restyle globally, so it is reached only through ::deep from
   a tactical ancestor. */
.tac-panel-head[b-ipgrfcifb3]  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink2);
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-panel-head[b-ipgrfcifb3]  .btn:hover:not(:disabled) {
    border-color: var(--tac-acc);
    color: var(--tac-acc);
    transform: none;
}

.tac-panel-head[b-ipgrfcifb3]  .btn:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-panel-head[b-ipgrfcifb3]  .action-btn-icon {
    font-size: var(--tac-fs-meta);
    line-height: 1;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
    .tac-help-body[b-ipgrfcifb3] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One column here, so there is no boundary to drag. Hiding it also keeps it out of
       the tab order rather than leaving a focusable control that does nothing. */
    .help-splitter[b-ipgrfcifb3] {
        display: none;
    }

    /* Sticky positioning only makes sense beside the document, not above it. */
    .tac-help-rail[b-ipgrfcifb3] {
        position: static;
        max-height: 340px;
    }

    .tac-help-doc[b-ipgrfcifb3] {
        padding: 18px 18px 22px;
    }
}

@media (max-width: 560px) {
    .tac-help-doc[b-ipgrfcifb3] {
        padding: 16px 14px 20px;
    }

    .tac-callout[b-ipgrfcifb3] {
        flex-wrap: wrap;
    }

    .tac-callout-action[b-ipgrfcifb3] {
        width: 100%;
        justify-content: center;
    }

    .tac-doc[b-ipgrfcifb3]  h1 {
        font-size: 21px;
    }

    .tac-doc[b-ipgrfcifb3]  h2 {
        font-size: 16px;
    }

    .tac-empty-block[b-ipgrfcifb3] {
        padding: 40px 12px;
    }
}

/* Honour reduced-motion: the only transitions here are hover/focus washes, but
   kill them anyway so nothing animates for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-help *[b-ipgrfcifb3],
    .tac-panel[b-ipgrfcifb3]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/Index.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops entry point ("/") — the handoff beat before the redirect to the
   sign-in screen.

   There is no artboard for this route in Mock/tactical-ops/, so everything here
   is derived from Pages/Login.razor.css: the same bracket-ticked .tac-panel,
   the same brandmark/wordmark block, the same mono chrome. Deliberately a
   SINGLE narrow centred panel rather than login's two-column split — this
   screen is on-frame for a fraction of a second and has nothing to say.

   Scoped to Index.razor, so nothing here can leak into any other page. The
   design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, linked first in _Host. The blueprint-grid
   ground comes from Layouts/LoginLayout.razor.css.
   ============================================================================ */

.tac-entry[b-cjg9n108ae] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 48px 32px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------- panel */

.tac-panel[b-cjg9n108ae] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 34px 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--tac-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

/* Bracket ticks — the signature of the tactical-ops panel. */
.tac-panel[b-cjg9n108ae]::before,
.tac-panel[b-cjg9n108ae]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-panel[b-cjg9n108ae]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-cjg9n108ae]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-cjg9n108ae] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
}

/* --------------------------------------------------------------------- brand */

.tac-brand[b-cjg9n108ae] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tac-brandmark[b-cjg9n108ae] {
    width: 40px;
    height: 40px;
    flex: none;
}

.tac-brandmark-hex[b-cjg9n108ae] {
    stroke: var(--tac-acc);
    stroke-width: 1.2;
}

.tac-brandmark-glyph[b-cjg9n108ae] {
    stroke: var(--tac-ink);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-wordmark[b-cjg9n108ae] {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
}

.tac-wordmark-name[b-cjg9n108ae] {
    font-family: var(--tac-display);
    font-weight: 700;
    font-size: var(--tac-fs-xl);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-wordmark-sub[b-cjg9n108ae] {
    margin-top: 5px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* ---------------------------------------------------------------------- head */

.tac-panel-head[b-cjg9n108ae] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--tac-line);
}

.tac-eyebrow[b-cjg9n108ae] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-panel-title[b-cjg9n108ae] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-xl);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

/* App.razor focuses the <h1> on navigation; the panel already reads as the
   focus target, so suppress the browser ring on a programmatic focus only. */
.tac-panel-title:focus[b-cjg9n108ae] {
    outline: none;
}

.tac-panel-title:focus-visible[b-cjg9n108ae] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 3px;
}

/* -------------------------------------------------------------------- status */

.tac-status[b-cjg9n108ae] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.6;
}

.tac-dot[b-cjg9n108ae] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-dot.info[b-cjg9n108ae] {
    background: var(--tac-acc);
}

/* ---------------------------------------------------------------------- meta */

.tac-meta[b-cjg9n108ae] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

.tac-meta dt[b-cjg9n108ae] {
    margin: 0;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-meta dd[b-cjg9n108ae] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--tac-ink0);
}

/* -------------------------------------------------------------------- manual */

/* .btn / .btn-secondary are shared, bare selectors — never restyled globally.
   These rules are scoped to Index.razor AND qualified by .tac-manual, so they
   can only ever touch this one anchor. */
.tac-panel .btn.tac-manual[b-cjg9n108ae] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-panel .btn.tac-manual:hover[b-cjg9n108ae] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-panel .btn.tac-manual:focus-visible[b-cjg9n108ae] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-manual-arrow[b-cjg9n108ae] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------------ footnote */

.tac-footnote[b-cjg9n108ae] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding-top: 10px;
    border-top: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 560px) {
    .tac-entry[b-cjg9n108ae] {
        padding: 28px 16px;
    }

    .tac-panel[b-cjg9n108ae] {
        padding: 24px 20px 18px;
    }

    .tac-wordmark-name[b-cjg9n108ae] {
        font-size: 20px;
    }

    .tac-panel-title[b-cjg9n108ae] {
        font-size: 18px;
    }

    .tac-footnote[b-cjg9n108ae] {
        justify-content: flex-start;
    }
}

/* Honour reduced-motion: the only transitions here are hover/focus washes, but
   kill them anyway so nothing animates for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-entry *[b-cjg9n108ae] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/Login.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops sign-in — Mock/tactical-ops/login.html translated to a real,
   responsive Blazor page.

   Scoped to Login.razor, so nothing here can leak into the authenticated shell.
   The design tokens (--tac-*) are NOT declared here any more — they live on
   :root in wwwroot/css/tactical-tokens.css, which is linked first in _Host, so
   every tactical-ops page shares one source of truth. Same names, same values.

   EditForm / InputText / ValidationMessage are child components, so their DOM
   never carries this component's scope attribute — those rules go through
   ::deep from a .tac-panel ancestor that does.
   ============================================================================ */

.tac-login[b-fm6i31dvmm] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    gap: 64px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- atmosphere */

/* Fixed so the hex lattice reads against the whole viewport, not the 1180px
   content box. Decorative only — aria-hidden in the markup. */
.tac-atmosphere[b-fm6i31dvmm] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    stroke: var(--tac-acc);
    stroke-opacity: 0.22;
    stroke-width: 1;
}

.tac-atmosphere .tac-faint[b-fm6i31dvmm] {
    stroke-opacity: 0.09;
}

.tac-atmosphere .tac-rule[b-fm6i31dvmm] {
    stroke-opacity: 0.3;
}

/* --------------------------------------------------------------------- brief */

.tac-brief[b-fm6i31dvmm] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.tac-brand[b-fm6i31dvmm] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tac-brandmark[b-fm6i31dvmm] {
    width: 44px;
    height: 44px;
    flex: none;
}

.tac-brandmark-hex[b-fm6i31dvmm] {
    stroke: var(--tac-acc);
    stroke-width: 1.2;
}

.tac-brandmark-glyph[b-fm6i31dvmm] {
    stroke: var(--tac-ink);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-wordmark[b-fm6i31dvmm] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.tac-wordmark-name[b-fm6i31dvmm] {
    font-family: var(--tac-display);
    font-weight: 700;
    font-size: var(--tac-fs-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-wordmark-sub[b-fm6i31dvmm] {
    margin-top: 5px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-headline[b-fm6i31dvmm] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--tac-ink0);
}

.tac-subhead[b-fm6i31dvmm] {
    margin: 0;
    max-width: 42ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-body);
    line-height: 1.6;
}

.tac-trust[b-fm6i31dvmm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.tac-trust-item[b-fm6i31dvmm] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

.tac-dot[b-fm6i31dvmm] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tac-ok);
    flex: none;
}

/* --------------------------------------------------------------------- panel */

.tac-panel[b-fm6i31dvmm] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 34px 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--tac-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

/* Bracket ticks — the signature of the tactical-ops panel. */
.tac-panel[b-fm6i31dvmm]::before,
.tac-panel[b-fm6i31dvmm]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-panel[b-fm6i31dvmm]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-fm6i31dvmm]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-fm6i31dvmm] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
}

.tac-panel-head[b-fm6i31dvmm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tac-eyebrow[b-fm6i31dvmm] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-panel-title[b-fm6i31dvmm] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-xl);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

/* ---------------------------------------------------------------------- form */

.tac-panel[b-fm6i31dvmm]  form.tac-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.tac-field[b-fm6i31dvmm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tac-label[b-fm6i31dvmm] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-input-wrap[b-fm6i31dvmm] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-input-wrap:focus-within[b-fm6i31dvmm] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-input-icon[b-fm6i31dvmm] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: var(--tac-ink3);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-input-wrap:focus-within .tac-input-icon[b-fm6i31dvmm] {
    stroke: var(--tac-acc);
}

/* InputText is a child component — reach it through ::deep. */
.tac-panel[b-fm6i31dvmm]  input.form-control {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    /* site.css puts a 3px blue glow on any focused input; here it reads as a second
       border inside the field frame. The focus affordance is .tac-input-wrap:focus-within
       (border + surface + icon all change), so drop the glow. */
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
}

.tac-panel[b-fm6i31dvmm]  input.form-control::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

/* Chrome's autofill wash fights the flat field; keep the ink readable. */
.tac-panel[b-fm6i31dvmm]  input.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--tac-ink0);
    box-shadow: 0 0 0 40px var(--tac-s2) inset;
}

.tac-panel[b-fm6i31dvmm]  .validation-message {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-crit);
    margin: 0;
}

/* ------------------------------------------------------------------- buttons */

.tac-panel .btn[b-fm6i31dvmm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-panel .btn:hover:not(:disabled)[b-fm6i31dvmm] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-panel .btn:focus-visible[b-fm6i31dvmm] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-panel .btn.btn-primary[b-fm6i31dvmm] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-panel .btn.btn-primary:hover:not(:disabled)[b-fm6i31dvmm] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-panel .btn:disabled[b-fm6i31dvmm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.tac-submit-arrow[b-fm6i31dvmm],
.tac-sso-icon[b-fm6i31dvmm] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-sso-icon[b-fm6i31dvmm] {
    stroke-width: 1.7;
}

/* The site-wide .btn-primary.loading::after spinner still drives the busy state;
   just hide the arrow so the two glyphs don't stack. */
.tac-panel .btn.loading .tac-submit-arrow[b-fm6i31dvmm] {
    display: none;
}

.tac-divider[b-fm6i31dvmm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tac-divider[b-fm6i31dvmm]::before,
.tac-divider[b-fm6i31dvmm]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--tac-line);
}

.tac-divider .tac-eyebrow[b-fm6i31dvmm] {
    color: var(--tac-ink3);
}

/* ------------------------------------------------------------------- banners */

.tac-panel .error-message[b-fm6i31dvmm],
.tac-panel .success-message[b-fm6i31dvmm],
.tac-panel .warning-message[b-fm6i31dvmm] {
    display: block;
    margin: 0;
    padding: 9px 12px;
    border-radius: 0;
    border: 1px solid;
    background: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    text-align: left;
}

.tac-panel .error-message[b-fm6i31dvmm] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-panel .success-message[b-fm6i31dvmm] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-panel .warning-message[b-fm6i31dvmm] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

/* ------------------------------------------------------------------ footnote */

.tac-footnote[b-fm6i31dvmm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding-top: 10px;
    border-top: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 960px) {
    .tac-login[b-fm6i31dvmm] {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        max-width: 560px;
        padding: 40px 24px;
    }

    .tac-headline[b-fm6i31dvmm] {
        font-size: 28px;
    }
}

@media (max-width: 560px) {
    .tac-login[b-fm6i31dvmm] {
        padding: 28px 16px;
        gap: 28px;
    }

    .tac-headline[b-fm6i31dvmm] {
        font-size: 24px;
    }

    .tac-panel[b-fm6i31dvmm] {
        padding: 24px 20px 18px;
    }

    .tac-wordmark-name[b-fm6i31dvmm] {
        font-size: 22px;
    }

    .tac-footnote[b-fm6i31dvmm] {
        justify-content: flex-start;
    }
}

/* Honour reduced-motion: the only transitions here are hover/focus washes, but
   kill them anyway so nothing animates for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-login *[b-fm6i31dvmm],
    .tac-panel[b-fm6i31dvmm]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/PackageTemplates.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Package Templates — the package library and the package editor.

   There is NO Mock/tactical-ops artboard for this page, so the look is DERIVED
   from the three shipped reference implementations (Login, Dashboard, Agents)
   rather than invented: bracket-ticked panels, a scan line on the top edge,
   Chakra Petch titles over JetBrains Mono eyebrows, mono on every number /
   folder / timestamp, a dot + uppercase label where there is a real status to
   report, the #0369a1 accent, and no border-radius anywhere.

   Scoped to PackageTemplates.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with
   dozens of other screens (.toolbar, .btn, .modal-*, .form-input, .pagination,
   .empty-state, .detail-tab ...). Blazor scoping alone would keep a bare
   `.btn { }` rule from leaking, but it would still fight site.css on THIS page
   in ways invisible from the other 40. So the markup carries a NEW .tac-* class
   next to every legacy one, and every selector below hangs off a .tac-* name.
   The legacy classes stay on the elements untouched because responsive.css and
   the Playwright suites select on them (see the comment block at the top of
   PackageTemplates.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css,
   so an equal-specificity .tac-* rule wins on source order. Where site.css is
   more specific the rule below is deliberately written long enough to outrank it.

   SearchBar / ActionButton / InputFile are child components: their DOM never
   carries this component's scope attribute, so those rules go through ::deep
   from a .tac-* ancestor that does.
   ============================================================================ */

.tac-packages[b-ox2mnuwft7] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* site.css paints .packages-page a flat #f5f5f5 slab that fills the viewport.
       The tactical-ops shell already owns the ground, so the page sits ON it. */
    background: none;
    min-height: 0;
    /* This page must never be the reason the document scrolls sideways —
       the responsive breakpoint tests assert zero overflow at 375/768/1280/1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-packages .tac-panel[b-ox2mnuwft7] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-packages .tac-panel[b-ox2mnuwft7]::before,
.tac-packages .tac-panel[b-ox2mnuwft7]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-packages .tac-panel[b-ox2mnuwft7]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-packages .tac-panel[b-ox2mnuwft7]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-packages .tac-scan[b-ox2mnuwft7] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-packages .tac-eyebrow[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every number, count, folder, exit code and timestamp is mono and tabular so
   columns of digits line up vertically. */
.tac-packages .tac-num[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-packages .tac-folder[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
    background: none;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
}

.tac-packages .tac-dot[b-ox2mnuwft7] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

.tac-packages .tac-glyph[b-ox2mnuwft7] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------------ command bar */

.tac-packages .tac-headbar[b-ox2mnuwft7] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    min-width: 0;
}

.tac-packages .tac-headbar-left[b-ox2mnuwft7] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.tac-packages .tac-headbar-title[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-packages .tac-headline[b-ox2mnuwft7] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-xl);
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-packages .tac-subhead[b-ox2mnuwft7] {
    margin: 0;
    max-width: 56ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-packages .tac-headbar-actions[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    flex-wrap: wrap;
}

/* The back affordance is a quiet mono link-button, not a filled control. */
.tac-packages .tac-back[b-ox2mnuwft7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 10px;
    margin: 3px 0 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tac-packages .tac-back:hover[b-ox2mnuwft7] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-packages .tac-back:focus-visible[b-ox2mnuwft7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------- buttons */

/* Flat, square, uppercase — the Login panel's button vocabulary. */
.tac-packages .tac-btn[b-ox2mnuwft7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-packages .tac-btn:hover:not(:disabled)[b-ox2mnuwft7] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    box-shadow: none;
    transform: none;
}

.tac-packages .tac-btn:focus-visible[b-ox2mnuwft7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-packages .tac-btn:disabled[b-ox2mnuwft7] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-packages .tac-btn.tac-btn-primary[b-ox2mnuwft7] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-packages .tac-btn.tac-btn-primary:hover:not(:disabled)[b-ox2mnuwft7] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-packages .tac-btn.tac-btn-danger[b-ox2mnuwft7] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-packages .tac-btn.tac-btn-danger:hover:not(:disabled)[b-ox2mnuwft7] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-packages .tac-btn.tac-btn-sm[b-ox2mnuwft7] {
    height: 28px;
    padding: 0 12px;
    font-size: var(--tac-fs-micro);
}

/* The "add the first step" button reads as an outline, not a filled action —
   it sits inside an empty state and must not outrank the panel's own header. */
.tac-packages .tac-btn.tac-btn-ghost[b-ox2mnuwft7] {
    background: none;
    border-style: dashed;
    color: var(--tac-ink2);
}

.tac-packages .tac-btn.tac-btn-ghost:hover:not(:disabled)[b-ox2mnuwft7] {
    border-style: solid;
    border-color: var(--tac-acc);
    color: var(--tac-acc);
}

/* --------------------------------------------------------------- library panel */

.tac-packages .tac-library[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

.tac-packages .tac-toolbar[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.tac-packages .tac-toolbar-title[b-ox2mnuwft7] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-packages .tac-toolbar-count[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-packages .tac-toolbar-controls[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-packages[b-ox2mnuwft7]  .search-bar {
    height: 34px;
    width: 280px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-packages[b-ox2mnuwft7]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-packages[b-ox2mnuwft7]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-packages[b-ox2mnuwft7]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-packages[b-ox2mnuwft7]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-packages[b-ox2mnuwft7]  .search-bar .clear-search,
.tac-packages[b-ox2mnuwft7]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* Segmented grid/list switch — the Agents roster's control, same vocabulary. */
.tac-packages .tac-segment[b-ox2mnuwft7] {
    display: flex;
    gap: 0;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    overflow: hidden;
}

.tac-packages .tac-segment .tac-segment-btn[b-ox2mnuwft7] {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tac-packages .tac-segment .tac-segment-btn + .tac-segment-btn[b-ox2mnuwft7] {
    border-inline-start: 1px solid var(--tac-line2);
}

.tac-packages .tac-segment .tac-segment-btn:hover[b-ox2mnuwft7] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

.tac-packages .tac-segment .tac-segment-btn.active[b-ox2mnuwft7] {
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-packages .tac-segment .tac-segment-btn:focus-visible[b-ox2mnuwft7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* ------------------------------------------------------------ loading / empty */

.tac-packages .tac-state[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--tac-ink2);
}

.tac-packages .tac-state h3[b-ox2mnuwft7] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-packages .tac-state p[b-ox2mnuwft7] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-packages .tac-state .tac-state-eyebrow[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* A line-art mark instead of an emoji glyph. */
.tac-packages .tac-state-mark[b-ox2mnuwft7] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-packages .tac-spinner[b-ox2mnuwft7] {
    width: 22px;
    height: 22px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-pkg-spin-b-ox2mnuwft7 0.9s linear infinite;
}

.tac-packages .loading-state .tac-spinner[b-ox2mnuwft7] {
    width: 26px;
    height: 26px;
}

@keyframes tac-pkg-spin-b-ox2mnuwft7 {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ card grid */

.tac-packages .tac-cardgrid[b-ox2mnuwft7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding: 16px;
    margin: 0;
    min-width: 0;
}

.tac-packages .tac-card[b-ox2mnuwft7] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    margin: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tac-packages .tac-card[b-ox2mnuwft7]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
    opacity: 0.7;
    pointer-events: none;
}

.tac-packages .tac-card:hover[b-ox2mnuwft7] {
    border-color: var(--tac-acc);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transform: none;
}

.tac-packages .tac-card-head[b-ox2mnuwft7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
}

.tac-packages .tac-card-mark[b-ox2mnuwft7] {
    width: 22px;
    height: 22px;
    flex: none;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    background: none;
    border-radius: 0;
    padding: 0;
}

.tac-packages .tac-card-identity[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-packages .tac-cardname[b-ox2mnuwft7] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* Two metrics, both real fields on the list DTO. */
.tac-packages .tac-cardmeta[b-ox2mnuwft7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.tac-packages .tac-metric[b-ox2mnuwft7] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    min-width: 0;
}

.tac-packages .tac-metric-num[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-packages .tac-metric-label[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-packages .tac-carddesc[b-ox2mnuwft7] {
    margin: 0;
    padding: 0;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.tac-packages .tac-card-foot[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 10px;
    margin: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-packages .tac-cardstamp[b-ox2mnuwft7] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-packages .tac-stamp-label[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-packages .tac-cardstamp .tac-num[b-ox2mnuwft7] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

/* Per-card overflow menu. */
.tac-packages .tac-kebab[b-ox2mnuwft7] {
    position: relative;
    margin-inline-start: auto;
    flex: none;
}

.tac-packages .tac-kebab-btn[b-ox2mnuwft7] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-body);
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-packages .tac-kebab-btn:hover[b-ox2mnuwft7] {
    border-color: var(--tac-line2);
    color: var(--tac-ink0);
}

.tac-packages .tac-kebab-btn:focus-visible[b-ox2mnuwft7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-packages .tac-menu[b-ox2mnuwft7] {
    position: absolute;
    top: 28px;
    inset-inline-end: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
}

.tac-packages .tac-menu-item[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: start;
    cursor: pointer;
}

.tac-packages .tac-menu-item + .tac-menu-item[b-ox2mnuwft7] {
    border-top: 1px solid var(--tac-line);
}

.tac-packages .tac-menu-item:hover[b-ox2mnuwft7] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

.tac-packages .tac-menu-item.tac-menu-item-danger[b-ox2mnuwft7] {
    color: var(--tac-crit);
}

.tac-packages .tac-menu-item.tac-menu-item-danger:hover[b-ox2mnuwft7] {
    background: rgba(220, 38, 38, 0.08);
    color: var(--tac-crit);
}

/* ---------------------------------------------------------------------- table */

/* overflow-x at EVERY width is the belt-and-braces that stops a six-column
   roster from pushing the document sideways. */
.tac-packages .tac-tablewrap[b-ox2mnuwft7] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.tac-packages .tac-table[b-ox2mnuwft7] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-packages .tac-table .tac-th[b-ox2mnuwft7] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-packages .tac-table .tac-th-num[b-ox2mnuwft7] {
    text-align: end;
}

.tac-packages .tac-table .tac-th-actions[b-ox2mnuwft7] {
    text-align: end;
}

.tac-packages .tac-table .tac-row > td[b-ox2mnuwft7] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-packages .tac-table .tac-row:last-child > td[b-ox2mnuwft7] {
    border-bottom: 0;
}

.tac-packages .tac-table .tac-row[b-ox2mnuwft7] {
    background: none;
    transition: background 0.12s ease;
}

.tac-packages .tac-table .tac-row:hover > td[b-ox2mnuwft7] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-packages .tac-table .tac-row > td:nth-child(2)[b-ox2mnuwft7],
.tac-packages .tac-table .tac-row > td:nth-child(3)[b-ox2mnuwft7] {
    text-align: end;
}

.tac-packages .tac-table .tac-cell-actions[b-ox2mnuwft7] {
    text-align: end;
    white-space: nowrap;
}

.tac-packages .tac-identity[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tac-packages .tac-row-mark[b-ox2mnuwft7] {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    font-size: inherit;
}

.tac-packages .tac-stack[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The absolute stamp stays on the line above the relative one: yyyy/MM/dd HH:mm:ss
   is the house format, and "4 days ago" alone loses the date entirely. */
.tac-packages .tac-relative[b-ox2mnuwft7] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* ---------------------------------------------------- row / cluster action btns */

.tac-packages .tac-actions[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of actions reads as one instrument cluster rather than
   three competing pills. Hover restores the semantic colour. */
.tac-packages[b-ox2mnuwft7]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-packages[b-ox2mnuwft7]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-packages[b-ox2mnuwft7]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-packages[b-ox2mnuwft7]  .tac-actions .btn.btn-icon:disabled {
    opacity: 0.4;
}

.tac-packages[b-ox2mnuwft7]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* The shared ActionButton ships emoji glyphs as its API; desaturate them so they
   sit in this palette instead of shouting in full colour. */
.tac-packages[b-ox2mnuwft7]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ----------------------------------------------------------------- pagination */

.tac-packages .tac-pagination[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-packages .tac-page-btn[b-ox2mnuwft7] {
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    box-shadow: none;
    cursor: pointer;
}

.tac-packages .tac-page-btn:hover:not(:disabled)[b-ox2mnuwft7] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-packages .tac-page-btn.active[b-ox2mnuwft7] {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-packages .tac-page-btn:disabled[b-ox2mnuwft7] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tac-packages .tac-page-btn:focus-visible[b-ox2mnuwft7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* =============================================================================
   EDITOR
   ============================================================================= */

.tac-packages .tac-editor[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.tac-packages .tac-section[b-ox2mnuwft7] {
    padding: 0;
    margin: 0;
    overflow: visible;
}

.tac-packages .tac-section-head[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 18px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.tac-packages .tac-section-title[b-ox2mnuwft7] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* -------------------------------------------------------------- package info */

.tac-packages .tac-formgrid[b-ox2mnuwft7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    margin: 0;
    min-width: 0;
}

.tac-packages .tac-field-full[b-ox2mnuwft7] {
    grid-column: 1 / -1;
}

.tac-packages .tac-field[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-packages .tac-field-row[b-ox2mnuwft7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.tac-packages .tac-label[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    margin: 0;
}

/* Flat fields: one hairline frame, accent on focus, mono ink — the Login panel's
   field vocabulary applied to plain <input>/<select>/<textarea> (no child
   component here, so no ::deep needed). */
.tac-packages .tac-input[b-ox2mnuwft7],
.tac-packages .tac-select[b-ox2mnuwft7],
.tac-packages .tac-textarea[b-ox2mnuwft7] {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-packages .tac-input[b-ox2mnuwft7],
.tac-packages .tac-select[b-ox2mnuwft7] {
    height: 34px;
}

.tac-packages .tac-textarea[b-ox2mnuwft7] {
    min-height: 80px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
}

.tac-packages .tac-code[b-ox2mnuwft7] {
    min-height: 140px;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.01em;
    tab-size: 4;
}

.tac-packages .tac-input:focus[b-ox2mnuwft7],
.tac-packages .tac-select:focus[b-ox2mnuwft7],
.tac-packages .tac-textarea:focus[b-ox2mnuwft7] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    outline: none;
}

.tac-packages .tac-input[b-ox2mnuwft7]::placeholder,
.tac-packages .tac-textarea[b-ox2mnuwft7]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

.tac-packages .tac-input.input-error[b-ox2mnuwft7] {
    border-color: var(--tac-crit);
}

.tac-packages .tac-input.input-valid[b-ox2mnuwft7] {
    border-color: var(--tac-ok);
}

.tac-packages .tac-hint[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
    line-height: 1.5;
}

.tac-packages .tac-hint.hint-error[b-ox2mnuwft7] {
    color: var(--tac-crit);
}

/* Folder-name field: the availability verdict rides inside the frame. */
.tac-packages .tac-input-wrap[b-ox2mnuwft7] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.tac-packages .tac-input-wrap .tac-input[b-ox2mnuwft7] {
    padding-inline-end: 32px;
}

.tac-packages .tac-validation[b-ox2mnuwft7] {
    position: absolute;
    inset-inline-end: 10px;
    display: flex;
    align-items: center;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    line-height: 1;
    pointer-events: none;
}

.tac-packages .tac-valid[b-ox2mnuwft7] {
    color: var(--tac-ok);
}

.tac-packages .tac-invalid[b-ox2mnuwft7] {
    color: var(--tac-crit);
}

.tac-packages .tac-validation .tac-spinner[b-ox2mnuwft7] {
    width: 13px;
    height: 13px;
    border-width: 1.5px;
}

/* ------------------------------------------------------- steps: master/detail */

/* .master-detail-container keeps its name — responsive.css collapses it to one
   column below 1024px. */
.tac-packages .tac-split[b-ox2mnuwft7] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 420px;
    min-width: 0;
    background: none;
}

.tac-packages .tac-split.disabled-overlay[b-ox2mnuwft7] {
    opacity: 0.55;
    pointer-events: none;
}

.tac-packages .tac-master[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--tac-s2);
    border-inline-end: 1px solid var(--tac-line);
}

.tac-packages .tac-master-head[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}

.tac-packages .tac-master-count[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    color: var(--tac-acc);
}

.tac-packages .tac-master-head[b-ox2mnuwft7]  .btn.btn-icon {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
}

.tac-packages .tac-master-head[b-ox2mnuwft7]  .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    transform: none;
    box-shadow: none;
}

.tac-packages .tac-master-head[b-ox2mnuwft7]  .action-btn-icon {
    filter: grayscale(0.4);
}

.tac-packages .tac-master-body[b-ox2mnuwft7] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-width: 0;
}

.tac-packages .tac-master-body .tac-state[b-ox2mnuwft7] {
    padding: 32px 12px;
    gap: 10px;
}

.tac-packages .tac-master-body .tac-state-mark[b-ox2mnuwft7] {
    width: 36px;
    height: 36px;
}

/* An ordered step reads as a numbered slot: mono index, name, type dot. */
.tac-packages .tac-steprow[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    margin: 0 0 6px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-inline-start: 2px solid var(--tac-line2);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-packages .tac-steprow:hover[b-ox2mnuwft7] {
    border-color: var(--tac-line2);
    border-inline-start-color: var(--tac-acc);
    box-shadow: none;
}

.tac-packages .tac-steprow.selected[b-ox2mnuwft7] {
    border-color: var(--tac-line2);
    border-inline-start-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

.tac-packages .tac-stepnum[b-ox2mnuwft7] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 600;
}

.tac-packages .tac-steprow.selected .tac-stepnum[b-ox2mnuwft7] {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-packages .tac-stepinfo[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.tac-packages .tac-stepname[b-ox2mnuwft7] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The ONE place on this page where the dot+label status convention has a real
   subject: the step's execution family. */
.tac-packages .tac-typebadge[b-ox2mnuwft7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    height: 18px;
    padding: 0 6px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tac-packages .tac-typebadge.badge-script .tac-dot[b-ox2mnuwft7] { background: var(--tac-acc); }
.tac-packages .tac-typebadge.badge-install .tac-dot[b-ox2mnuwft7] { background: var(--tac-ok); }
.tac-packages .tac-typebadge.badge-service .tac-dot[b-ox2mnuwft7] { background: var(--tac-warn); }
.tac-packages .tac-typebadge.badge-files .tac-dot[b-ox2mnuwft7] { background: var(--tac-ink2); }
.tac-packages .tac-typebadge.badge-system .tac-dot[b-ox2mnuwft7] { background: var(--tac-ink3); }

.tac-packages .tac-stepactions[b-ox2mnuwft7] {
    flex: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tac-packages .tac-steprow:hover .tac-stepactions[b-ox2mnuwft7],
.tac-packages .tac-steprow.selected .tac-stepactions[b-ox2mnuwft7],
.tac-packages .tac-stepactions:focus-within[b-ox2mnuwft7] {
    opacity: 1;
}

.tac-packages[b-ox2mnuwft7]  .tac-stepactions .btn.btn-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: var(--tac-fs-micro);
}

/* -------------------------------------------------------------- steps: detail */

.tac-packages .tac-detail[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--tac-s1);
}

/* .detail-tabs / .detail-tab keep their names — responsive.css turns the strip
   into a horizontal scroller below 768px and gives each tab a 44px tap target. */
.tac-packages .tac-tabs[b-ox2mnuwft7] {
    display: flex;
    gap: 0;
    padding: 0 12px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
    min-width: 0;
}

.tac-packages .tac-tab[b-ox2mnuwft7] {
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tac-packages .tac-tab:hover[b-ox2mnuwft7] {
    color: var(--tac-ink0);
}

.tac-packages .tac-tab.active[b-ox2mnuwft7] {
    color: var(--tac-acc);
    border-bottom-color: var(--tac-acc);
    background: none;
}

.tac-packages .tac-tab:focus-visible[b-ox2mnuwft7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-packages .tac-detail-body[b-ox2mnuwft7] {
    flex: 1;
    padding: 18px;
    min-width: 0;
    overflow-y: auto;
}

.tac-packages .tac-detail-form[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Installer/source picker: dropdown + upload, one row. */
.tac-packages .tac-filerow[b-ox2mnuwft7] {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-packages .tac-filerow .tac-select[b-ox2mnuwft7] {
    flex: 1 1 200px;
    width: auto;
}

.tac-packages .tac-upload[b-ox2mnuwft7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px dashed var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-packages .tac-upload:hover[b-ox2mnuwft7] {
    border-style: solid;
    border-color: var(--tac-acc);
    color: var(--tac-acc);
}

.tac-packages .tac-upload:focus-within[b-ox2mnuwft7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* InputFile is a child component; the native control stays hidden behind the label. */
.tac-packages[b-ox2mnuwft7]  .file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.tac-packages .tac-chips[b-ox2mnuwft7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-width: 0;
}

.tac-packages .tac-chip[b-ox2mnuwft7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 4px 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    max-width: 100%;
    min-width: 0;
}

.tac-packages .tac-chip-name[b-ox2mnuwft7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tac-packages .tac-chip-remove[b-ox2mnuwft7] {
    flex: none;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    line-height: 1;
    cursor: pointer;
}

.tac-packages .tac-chip-remove:hover[b-ox2mnuwft7] {
    color: var(--tac-crit);
}

/* Checkboxes — flat squares, mono labels. */
.tac-packages .tac-checkbox[b-ox2mnuwft7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    color: var(--tac-ink2);
    cursor: pointer;
}

.tac-packages .tac-checkbox input[type="checkbox"][b-ox2mnuwft7],
.tac-packages .tac-option input[type="checkbox"][b-ox2mnuwft7] {
    width: 14px;
    height: 14px;
    flex: none;
    accent-color: var(--tac-acc);
    border-radius: 0;
    margin: 0;
}

.tac-packages .tac-osgrid[b-ox2mnuwft7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px 14px;
    padding: 12px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    min-width: 0;
}

.tac-packages .tac-optionlist[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tac-packages .tac-option[b-ox2mnuwft7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.15s ease;
}

.tac-packages .tac-option:hover[b-ox2mnuwft7] {
    border-color: var(--tac-acc);
}

.tac-packages .tac-option input[type="checkbox"][b-ox2mnuwft7] {
    margin-top: 2px;
}

.tac-packages .tac-option-info[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-packages .tac-option-label[b-ox2mnuwft7] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
}

/* Informational notices — an outlined accent strip, never a coloured pill. */
.tac-packages .tac-notice[b-ox2mnuwft7] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 18px 0;
    padding: 9px 12px;
    border: 1px solid rgba(3, 105, 161, 0.4);
    border-radius: 0;
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
}

.tac-packages .tac-detail-form .tac-notice[b-ox2mnuwft7] {
    margin: 0;
}

/* ------------------------------------------------------------ editor actions */

.tac-packages .tac-editor-actions[b-ox2mnuwft7] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
}

/* ------------------------------------------------------------------- modal */

.tac-modal-overlay[b-ox2mnuwft7] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-ox2mnuwft7] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal[b-ox2mnuwft7]::before,
.tac-modal-overlay .tac-modal[b-ox2mnuwft7]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-ox2mnuwft7]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-ox2mnuwft7]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-ox2mnuwft7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h3[b-ox2mnuwft7] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-label);
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-close[b-ox2mnuwft7] {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    line-height: 1;
    cursor: pointer;
}

.tac-modal-overlay .tac-modal-close:hover[b-ox2mnuwft7] {
    border-color: var(--tac-line2);
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-close:focus-visible[b-ox2mnuwft7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-modal-overlay .tac-modal-body[b-ox2mnuwft7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: none;
}

.tac-modal-overlay .tac-warnbox[b-ox2mnuwft7] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 0;
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
}

.tac-modal-overlay .tac-warnbox strong[b-ox2mnuwft7] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* "What am I about to delete" — the subject, stated flatly. */
.tac-modal-overlay .tac-subject[b-ox2mnuwft7] {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-modal-overlay .tac-modal-foot[b-ox2mnuwft7] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* The modal lives OUTSIDE .tac-packages in the DOM, so the button vocabulary is
   restated here rather than inherited. */
.tac-modal-overlay .tac-modal-foot .tac-btn[b-ox2mnuwft7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-modal-overlay .tac-modal-foot .tac-btn:hover:not(:disabled)[b-ox2mnuwft7] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .tac-btn.tac-btn-danger[b-ox2mnuwft7] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .tac-btn.tac-btn-danger:hover:not(:disabled)[b-ox2mnuwft7] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .tac-btn:focus-visible[b-ox2mnuwft7] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the two-column forms and the master/detail split stop competing for
   width. responsive.css already collapses .master-detail-container itself. */
@media (max-width: 1023px) {
    .tac-packages .tac-toolbar-controls[b-ox2mnuwft7] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-packages[b-ox2mnuwft7]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-packages .tac-split[b-ox2mnuwft7] {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .tac-packages .tac-master[b-ox2mnuwft7] {
        border-inline-end: 0;
        border-bottom: 1px solid var(--tac-line);
    }

    .tac-packages .tac-master-body[b-ox2mnuwft7] {
        max-height: 320px;
    }
}

/* Phone: one column everywhere, and the six-column roster becomes stacked cards
   labelled from data-label. responsive.css has no rule for .packages-table, so
   this layout is owned here. */
@media (max-width: 767px) {
    .tac-packages[b-ox2mnuwft7] {
        gap: 12px;
    }

    .tac-packages .tac-headbar[b-ox2mnuwft7] {
        align-items: flex-start;
        gap: 10px;
    }

    .tac-packages .tac-headbar-actions[b-ox2mnuwft7] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-packages .tac-headline[b-ox2mnuwft7] {
        font-size: 18px;
    }

    .tac-packages .tac-toolbar[b-ox2mnuwft7] {
        padding: 12px;
        gap: 10px;
    }

    .tac-packages .tac-formgrid[b-ox2mnuwft7],
    .tac-packages .tac-field-row[b-ox2mnuwft7] {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }

    .tac-packages .tac-field-row[b-ox2mnuwft7] {
        padding: 0;
    }

    .tac-packages .tac-cardgrid[b-ox2mnuwft7] {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }

    .tac-packages .tac-detail-body[b-ox2mnuwft7] {
        padding: 14px;
    }

    .tac-packages .tac-section-head[b-ox2mnuwft7] {
        padding: 12px 14px;
    }

    .tac-packages .tac-notice[b-ox2mnuwft7] {
        margin: 12px 14px 0;
        align-items: flex-start;
    }

    /* Table -> labelled cards. */
    .tac-packages .tac-table[b-ox2mnuwft7],
    .tac-packages .tac-table tbody[b-ox2mnuwft7] {
        display: block;
        min-width: 0;
    }

    .tac-packages .tac-table thead[b-ox2mnuwft7] {
        position: absolute;
        left: -9999px;
    }

    .tac-packages .tac-table .tac-row[b-ox2mnuwft7] {
        display: block;
        margin: 0 12px 10px;
        padding: 10px 12px;
        border: 1px solid var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-packages .tac-table .tac-row > td[b-ox2mnuwft7] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid var(--tac-line);
        text-align: start;
    }

    .tac-packages .tac-table .tac-row > td:nth-child(2)[b-ox2mnuwft7],
    .tac-packages .tac-table .tac-row > td:nth-child(3)[b-ox2mnuwft7] {
        text-align: start;
    }

    .tac-packages .tac-table .tac-row > td:last-child[b-ox2mnuwft7] {
        border-bottom: 0;
    }

    .tac-packages .tac-table .tac-row > td[b-ox2mnuwft7]::before {
        content: attr(data-label);
        flex: none;
        font-family: var(--tac-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-packages .tac-table .tac-row:hover > td[b-ox2mnuwft7] {
        background: none;
    }

    .tac-packages .tac-table .tac-cell-actions[b-ox2mnuwft7] {
        justify-content: space-between;
    }

    .tac-packages .tac-stack[b-ox2mnuwft7] {
        align-items: flex-end;
    }

    .tac-packages .tac-pagination[b-ox2mnuwft7] {
        padding: 10px 12px;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the spinners, which become static rings. */
@media (prefers-reduced-motion: reduce) {
    .tac-packages *[b-ox2mnuwft7],
    .tac-packages[b-ox2mnuwft7]  *,
    .tac-modal-overlay *[b-ox2mnuwft7] {
        transition: none !important;
        animation: none !important;
    }

    .tac-packages .tac-stepactions[b-ox2mnuwft7] {
        opacity: 1;
    }
}
/* _content/Athena.Server/Pages/Profile.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops self-service profile — Pages/Profile.razor.

   No artboard exists for this screen in Mock/tactical-ops/ (the folder holds
   login, dashboard, agents and report-builder only), so every value below is
   taken from the shipped reference implementations (Login.razor.css,
   Dashboard.razor.css, Agents.razor.css, CollectionCreate.razor.css) rather
   than invented. Consistency with what already ships beats novelty here.

   Scoped to Profile.razor. The design tokens (--tac-*) are NOT declared here —
   they live on :root in wwwroot/css/tactical-tokens.css, linked first in _Host,
   so every tactical-ops page shares one source of truth.

   ── TWO RULES THIS SHEET MUST NOT BREAK ───────────────────────────────────────

   1. NOTHING here names a bare shared selector. .content-card, .card-title,
      .card-header, .form-group, .form-control, .form-input, .btn / .btn-primary,
      .status, .modal and friends are shared with dozens of other pages and their
      rules stay in site.css as dead weight for the final sweep. Every element
      carries a NEW .tac-* twin and every selector below hangs off one. The legacy
      classes stay on the markup so browser automation and the responsive.css
      phone rules keep working.

   2. ::deep IS LOAD-BEARING HERE, and used for nearly everything. Three of the
      four things this page renders are CHILD COMPONENTS whose DOM never carries
      this component's scope attribute:
        * EditForm / InputText / ValidationMessage inside both panels, and
        * MyPermissionsSection — the whole third panel, which is used by /profile
          and by nothing else, so it wears the same panel language.
      A `.tac-profile ::deep X` selector compiles to `.tac-profile[b-xxx] X`, which
      reaches the page's OWN markup and the child components alike — one rule for
      one visual language, instead of two that can drift apart. Nothing escapes
      the page: every selector is still anchored on the scoped root.
   ============================================================================ */

.tac-profile[b-1hi6dmzd4x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The console must never be the reason the document scrolls sideways. */
    min-width: 0;
    max-width: 1100px;
    margin: 0 auto;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-profile[b-1hi6dmzd4x]  .tac-lbl,
.tac-profile[b-1hi6dmzd4x]  .tac-eyebrow {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-profile[b-1hi6dmzd4x]  .tac-eyebrow {
    color: var(--tac-acc);
}

.tac-profile[b-1hi6dmzd4x]  .tac-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

.tac-profile[b-1hi6dmzd4x]  .tac-dot.ok { background: var(--tac-ok); }
.tac-profile[b-1hi6dmzd4x]  .tac-dot.crit { background: var(--tac-crit); }

/* ------------------------------------------------------------- load / failure */

.tac-profile[b-1hi6dmzd4x]  .tac-loading,
.tac-profile[b-1hi6dmzd4x]  .tac-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    color: var(--tac-ink2);
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-empty {
    flex-wrap: wrap;
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.06);
}

.tac-profile[b-1hi6dmzd4x]  .tac-empty-tag {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-crit);
}

.tac-profile[b-1hi6dmzd4x]  .tac-empty-text {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--tac-ink);
}

.tac-profile[b-1hi6dmzd4x]  .tac-spinner {
    width: 14px;
    height: 14px;
    flex: none;
    margin: 0;
    border: 2px solid var(--tac-line);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-1hi6dmzd4x 0.9s linear infinite;
}

@keyframes tac-spin-b-1hi6dmzd4x {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------- page head */

/* site.css gives .page-header a card background and a rounded frame; here the
   head is flat chrome that sits directly on the shell. */
.tac-profile[b-1hi6dmzd4x]  .tac-pagehead {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-profile[b-1hi6dmzd4x]  .tac-identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    flex: 1 1 260px;
}

/* Initials, never an avatar image — the letters are derived from DisplayName, so
   the block is real data. Sharp corners and a bracket-tick, not a circle. */
.tac-profile[b-1hi6dmzd4x]  .tac-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: none;
    margin: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
}

.tac-profile[b-1hi6dmzd4x]  .tac-avatar::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-profile[b-1hi6dmzd4x]  .tac-avatar-text {
    font-family: var(--tac-display);
    font-weight: 700;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.06em;
    color: var(--tac-acc);
}

.tac-profile[b-1hi6dmzd4x]  .tac-identity-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> from GetPageTitle(). */
.tac-profile[b-1hi6dmzd4x]  .tac-pagetitle {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-profile[b-1hi6dmzd4x]  .tac-pagesub {
    margin: 0;
    max-width: 58ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-profile[b-1hi6dmzd4x]  .tac-handle {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    color: var(--tac-acc);
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- read-out strip */

.tac-profile[b-1hi6dmzd4x]  .tac-idstrip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-idcell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--tac-line);
    border-left: 2px solid var(--tac-line2);
    background: var(--tac-s2);
}

.tac-profile[b-1hi6dmzd4x]  .tac-idcell dt {
    margin: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-idvalue {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
    white-space: nowrap;
}

/* site.css / the old page style block drew the role as a rounded pill; the
   tactical read-out is a flat accent-keyed word. */
.tac-profile[b-1hi6dmzd4x]  .tac-role {
    padding: 0;
    border-radius: 0;
    background: none;
    font-weight: 600;
    color: var(--tac-acc);
}

/* ---------------------------------------------------------------------- grid */

.tac-profile[b-1hi6dmzd4x]  .tac-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-width: 0;
}

/* The permission list is a long read; it gets the full width under the two forms. */
.tac-profile[b-1hi6dmzd4x]  .tac-panel-permissions {
    grid-column: 1 / -1;
}

/* -------------------------------------------------------------------- panels */

.tac-profile[b-1hi6dmzd4x]  .tac-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-profile[b-1hi6dmzd4x]  .tac-panel::before,
.tac-profile[b-1hi6dmzd4x]  .tac-panel::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-profile[b-1hi6dmzd4x]  .tac-panel::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-profile[b-1hi6dmzd4x]  .tac-panel::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-profile[b-1hi6dmzd4x]  .tac-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-profile[b-1hi6dmzd4x]  .tac-panel-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

/* The 01..03 order gives the stacked sections a readable sequence. */
.tac-profile[b-1hi6dmzd4x]  .tac-panel-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-profile[b-1hi6dmzd4x]  .tac-panel-title {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-profile[b-1hi6dmzd4x]  .tac-panel-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 18px;
    min-width: 0;
}

/* -------------------------------------------------------------- fact read-out */

/* The immutable fields read out as a console table, not as disabled inputs: a
   field you cannot type in should not look like one. */
.tac-profile[b-1hi6dmzd4x]  .tac-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 16px;
    margin: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-fact dt {
    margin: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-fact-value {
    margin: 0;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A 36-character GUID must wrap rather than push the panel wide at phone width. */
.tac-profile[b-1hi6dmzd4x]  .tac-fact-id {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------- forms */

/* EditForm is a child component — its <form> carries no scope attribute. */
.tac-profile[b-1hi6dmzd4x]  form.tac-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-label {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* InputText renders the <input>; reach it through ::deep, exactly as
   Login.razor.css does for input.form-control. */
.tac-profile[b-1hi6dmzd4x]  input.tac-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-profile[b-1hi6dmzd4x]  input.tac-input:hover {
    background: var(--tac-s1);
}

.tac-profile[b-1hi6dmzd4x]  input.tac-input:focus {
    outline: none;
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    /* site.css puts a 3px blue glow on any focused control; here it reads as a
       second border inside the field frame. The frame itself is the affordance. */
    box-shadow: none;
}

.tac-profile[b-1hi6dmzd4x]  input.tac-input:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-profile[b-1hi6dmzd4x]  input.tac-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

/* Chrome's autofill wash fights the flat field; keep the ink readable. */
.tac-profile[b-1hi6dmzd4x]  input.tac-input:-webkit-autofill {
    -webkit-text-fill-color: var(--tac-ink0);
    box-shadow: 0 0 0 40px var(--tac-s2) inset;
}

/* Blazor's own validity classes stay meaningful in the flat frame. */
.tac-profile[b-1hi6dmzd4x]  input.tac-input.invalid {
    border-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.05);
}

.tac-profile[b-1hi6dmzd4x]  .tac-hint {
    margin: 0;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ValidationMessage is a child component too. */
.tac-profile[b-1hi6dmzd4x]  .tac-error {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-crit);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ banners */

.tac-profile[b-1hi6dmzd4x]  .tac-banner {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 0;
    font-size: var(--tac-fs-meta);
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-banner-tag {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-profile[b-1hi6dmzd4x]  .tac-banner-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tac-profile[b-1hi6dmzd4x]  .tac-banner-ok {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-profile[b-1hi6dmzd4x]  .tac-banner-crit {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

/* A stated fact, not an alarm: the directory owns this account's password. */
.tac-profile[b-1hi6dmzd4x]  .tac-notice {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--tac-line);
    border-left: 2px solid var(--tac-acc);
    background: var(--tac-s2);
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-notice-crit {
    border-color: rgba(220, 38, 38, 0.4);
    border-left-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-profile[b-1hi6dmzd4x]  .tac-notice-tag {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-profile[b-1hi6dmzd4x]  .tac-notice-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ buttons */

.tac-profile[b-1hi6dmzd4x]  .tac-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-profile[b-1hi6dmzd4x]  .tac-btn:hover:not(:disabled) {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-profile[b-1hi6dmzd4x]  .tac-btn:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-profile[b-1hi6dmzd4x]  .tac-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-profile[b-1hi6dmzd4x]  .tac-btn-primary {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-profile[b-1hi6dmzd4x]  .tac-btn-primary:hover:not(:disabled) {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-profile[b-1hi6dmzd4x]  .tac-btn-spinner {
    width: 13px;
    height: 13px;
    flex: none;
    margin: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: tac-spin-b-1hi6dmzd4x 0.9s linear infinite;
}

/* ======================================================= the permissions card */
/* MyPermissionsSection renders INSIDE .tac-profile but is a child component, so
   none of its DOM carries this page's scope attribute — every rule below is
   reached through ::deep, the same way Login.razor.css reaches InputText. */

.tac-profile[b-1hi6dmzd4x]  .tac-permintro {
    margin: 0;
    max-width: 78ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-profile[b-1hi6dmzd4x]  .tac-permhead {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-permtotal {
    margin-inline-start: auto;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-profile[b-1hi6dmzd4x]  .tac-permgroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-permcat {
    color: var(--tac-acc);
}

.tac-profile[b-1hi6dmzd4x]  .tac-permlist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-permitem {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 6px 10px;
    border-left: 2px solid var(--tac-line2);
    background: var(--tac-s2);
    min-width: 0;
}

.tac-profile[b-1hi6dmzd4x]  .tac-permid {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
    background: none;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
}

.tac-profile[b-1hi6dmzd4x]  .tac-permdesc {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- responsive */

/* Below the tablet breakpoint every grid collapses to a single column, so the
   page never has a reason to scroll sideways (AssertNoPageOverflow). */
@media (max-width: 1023px) {
    .tac-profile[b-1hi6dmzd4x]  .tac-grid,
    .tac-profile[b-1hi6dmzd4x]  .tac-permlist {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .tac-profile[b-1hi6dmzd4x]  .tac-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-profile[b-1hi6dmzd4x]  .tac-idstrip {
        width: 100%;
    }

    .tac-profile[b-1hi6dmzd4x]  .tac-idcell {
        flex: 1 1 140px;
    }

    .tac-profile[b-1hi6dmzd4x]  .tac-panel-head {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-profile[b-1hi6dmzd4x]  .tac-panel-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-profile[b-1hi6dmzd4x]  .tac-pagetitle {
        font-size: 21px;
    }

    .tac-profile[b-1hi6dmzd4x]  .tac-actions .tac-btn {
        flex: 1 1 auto;
    }
}

/* Honour reduced-motion: kill the hover washes and stop the spinners from
   animating for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-profile *[b-1hi6dmzd4x],
    .tac-profile[b-1hi6dmzd4x]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/Reports.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops report console — Pages/Reports.razor.

   Mock/tactical-ops/report-builder.html IS the artboard for this screen, so the
   shapes below are translated from it rather than invented: a mono tab strip, a
   plain source/name panel, then three bracket-ticked .tac-panel steps numbered
   01..03, a two-pane column picker split by a 44px transfer column, a filter row
   of fixed-width controls, and a preview table with mono uppercase headers. Where
   the artboard was silent (the saved-report library, the save dialog, the export
   menu) the look is DERIVED from the shipped references — Login.razor.css,
   Dashboard.razor.css, Agents.razor.css, Deployments.razor.css and
   ReportSettings.razor.css — because consistency with what already ships beats
   novelty.

   Scoped to Reports.razor. The design tokens (--tac-*) are NOT declared here —
   they live on :root in wwwroot/css/tactical-tokens.css, linked first in _Host,
   so every tactical-ops page shares one source of truth.

   ── FOUR RULES THIS SHEET MUST NOT BREAK ──────────────────────────────────────

   1. NOTHING here may name a bare shared selector. .card, .card-head, .card-body,
      .field, .btn / .btn-primary / .btn-secondary, .page-head, .empty-state,
      .modal and friends are shared with up to 41 other screens; every element
      therefore carries a NEW .tac-* twin and every selector below hangs off one.
      The legacy classes stay on the markup so nothing that selects on them
      breaks — and `.f-val` and `.pill`, which ReportsBuilderTests selects
      directly, are styled through their .tac-* siblings, never on their own.

   2. Everything is flat and square. No border-radius, no drop shadows beyond the
      1px panel lift, no gradients except the panel scan line. Numbers, field
      keys, counts, timestamps and uppercase labels are JetBrains Mono; headings
      are Chakra Petch; body copy is IBM Plex Sans.

   3. The preview table is the one thing on this page that can be arbitrarily
      wide. It lives in .tac-tablewrap with its own overflow-x, so the DOCUMENT
      never scrolls sideways at any width. The two-pane picker and the filter row
      collapse to one column below 1023px; the card grid is auto-fill.

   4. site.css puts a 3px blue glow on every focused control and a rounded pill on
      every .btn. Both are neutralised here — the flat frame IS the affordance —
      but only inside .tac-reports, never globally.
   ============================================================================ */

.tac-reports[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
    padding: 0 0 40px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-reports .tac-lbl[b-otwd65m56k],
.tac-reports .tac-eyebrow[b-otwd65m56k] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-reports .tac-eyebrow[b-otwd65m56k] {
    color: var(--tac-acc);
}

.tac-reports .tac-note[b-otwd65m56k] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* Every inline line icon on the page. They inherit currentColor so a button's
   hover/disabled state carries the glyph with it. */
.tac-reports .tac-ico[b-otwd65m56k] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-reports .tac-grip-ico[b-otwd65m56k] {
    width: 12px;
    height: 12px;
    flex: none;
    fill: currentColor;
    stroke: none;
}

.tac-reports .tac-spacer[b-otwd65m56k] {
    margin-inline-start: auto;
}

/* --------------------------------------------------------------- page header */

.tac-reports .tac-pagehead[b-otwd65m56k] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-reports .tac-pagehead-text[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Reports"). */
.tac-reports .tac-pagetitle[b-otwd65m56k] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-reports .tac-pagesub[b-otwd65m56k] {
    margin: 0;
    max-width: 72ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-reports .tac-actions[b-otwd65m56k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin-inline-start: auto;
    padding: 0;
}

/* ------------------------------------------------------------------- buttons */

.tac-reports .tac-btn[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-reports .tac-btn:hover:not(:disabled)[b-otwd65m56k] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-reports .tac-btn:focus-visible[b-otwd65m56k] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-reports .tac-btn-primary[b-otwd65m56k] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-reports .tac-btn-primary:hover:not(:disabled)[b-otwd65m56k] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-reports .tac-btn-danger:hover:not(:disabled)[b-otwd65m56k] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-reports .tac-btn-sm[b-otwd65m56k] {
    height: 28px;
    padding: 0 10px;
    gap: 6px;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
}

.tac-reports .tac-btn-sm .tac-ico[b-otwd65m56k] {
    width: 12px;
    height: 12px;
}

.tac-reports .tac-btn:disabled[b-otwd65m56k] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* The "+ Add filter" affordance stays a link in weight but picks up the mono
   uppercase treatment every other secondary action on the page has. */
.tac-reports .tac-linkbtn[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--tac-acc);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.tac-reports .tac-linkbtn:hover[b-otwd65m56k] {
    color: var(--tac-acc-deep);
    text-decoration: none;
}

.tac-reports .tac-linkbtn:focus-visible[b-otwd65m56k] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* Square icon-only buttons: the picker's transfer arrows and the filter row's
   remove. */
.tac-reports .tac-iconbtn[b-otwd65m56k] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-reports .tac-iconbtn:hover:not(:disabled)[b-otwd65m56k] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-acc);
    transform: none;
}

.tac-reports .tac-iconbtn:focus-visible[b-otwd65m56k] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-reports .tac-iconbtn-danger:hover:not(:disabled)[b-otwd65m56k] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

/* The three per-column controls (up / down / remove) inside a selected row. */
.tac-reports .tac-minibtn[b-otwd65m56k] {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    padding: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink2);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-reports .tac-minibtn .tac-ico[b-otwd65m56k] {
    width: 11px;
    height: 11px;
    stroke-width: 2.2;
}

.tac-reports .tac-minibtn:hover:not(:disabled)[b-otwd65m56k] {
    border-color: var(--tac-acc);
    color: var(--tac-acc);
}

.tac-reports .tac-minibtn:disabled[b-otwd65m56k] {
    opacity: 0.3;
    cursor: not-allowed;
}

.tac-reports .tac-minibtn-danger:hover:not(:disabled)[b-otwd65m56k] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-reports .tac-minibtn:focus-visible[b-otwd65m56k] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------- tabs */

.tac-reports .tac-tabs[b-otwd65m56k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-reports .tac-tabs .tac-tab[b-otwd65m56k] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tac-reports .tac-tabs .tac-tab:hover[b-otwd65m56k] {
    color: var(--tac-ink0);
    background: var(--tac-acc-dim);
}

.tac-reports .tac-tabs .tac-tab.active[b-otwd65m56k] {
    color: var(--tac-acc-deep);
    border-bottom-color: var(--tac-acc);
    background: none;
}

.tac-reports .tac-tabs .tac-tab:focus-visible[b-otwd65m56k] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* -------------------------------------------------------------------- panels */

.tac-reports .tac-panel[b-otwd65m56k] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

/* The filter panel's field combobox has to escape the panel box. */
.tac-reports .tac-panel-overflow[b-otwd65m56k] {
    overflow: visible;
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-reports .tac-panel[b-otwd65m56k]::before,
.tac-reports .tac-panel[b-otwd65m56k]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-reports .tac-panel[b-otwd65m56k]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-reports .tac-panel[b-otwd65m56k]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-reports .tac-scan[b-otwd65m56k] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-reports .tac-panel-head[b-otwd65m56k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-width: 0;
    margin: 0;
    padding: 14px 18px 12px;
    background: none;
    border: 0;
}

.tac-reports .tac-panel-head-ruled[b-otwd65m56k] {
    border-bottom: 1px solid var(--tac-line);
}

/* The 01..03 build order replaces the old blue circled step numbers. */
.tac-reports .tac-panel-index[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid var(--tac-acc);
    border-radius: 0;
    background: none;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-reports .tac-panel-title[b-otwd65m56k] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-reports .tac-panel-hint[b-otwd65m56k] {
    min-width: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

.tac-reports .tac-panel-body[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 14px 18px 16px;
}

/* The two-pane picker draws its own internal rules edge to edge. */
.tac-reports .tac-panel-body-flush[b-otwd65m56k] {
    gap: 0;
    padding: 0;
}

.tac-reports .tac-panel-foot[b-otwd65m56k] {
    margin: 0;
    padding: 10px 18px;
    border-top: 1px solid var(--tac-line);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------- fields */

.tac-reports .tac-field[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.tac-reports .tac-label[b-otwd65m56k] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-reports .tac-input[b-otwd65m56k],
.tac-reports .tac-select[b-otwd65m56k] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-reports .tac-input:hover[b-otwd65m56k],
.tac-reports .tac-select:hover[b-otwd65m56k] {
    background: var(--tac-s1);
}

.tac-reports .tac-input:focus[b-otwd65m56k],
.tac-reports .tac-select:focus[b-otwd65m56k] {
    outline: none;
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    /* site.css puts a 3px blue glow on any focused control; here it reads as a
       second border inside the field frame. The frame itself is the affordance. */
    box-shadow: none;
}

.tac-reports .tac-input:focus-visible[b-otwd65m56k],
.tac-reports .tac-select:focus-visible[b-otwd65m56k] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-reports .tac-input[b-otwd65m56k]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

/* The source/name row: a fixed source column, the name taking the rest. */
.tac-reports .tac-configrow[b-otwd65m56k] {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: end;
    gap: 16px;
}

.tac-reports .tac-field-grow[b-otwd65m56k] {
    min-width: 0;
}

/* ----------------------------------------------------------------- search box */

.tac-reports .tac-searchbox[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 32px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    color: var(--tac-ink3);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-reports .tac-searchbox:focus-within[b-otwd65m56k] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-acc);
}

.tac-reports .tac-searchbox .tac-ico[b-otwd65m56k] {
    width: 13px;
    height: 13px;
}

.tac-reports .tac-searchinput[b-otwd65m56k] {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-reports .tac-searchinput[b-otwd65m56k]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

.tac-reports .tac-searchinput:focus[b-otwd65m56k] {
    outline: none;
    box-shadow: none;
}

/* ------------------------------------------------------------------- toolbar */

.tac-reports .tac-toolbar[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-reports .tac-toolbar-title[b-otwd65m56k] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-reports .tac-toolbar-count[b-otwd65m56k] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-reports .tac-toolbar-controls[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    margin-inline-start: auto;
}

.tac-reports .tac-toolbar-controls .tac-searchbox[b-otwd65m56k] {
    width: 280px;
    max-width: 100%;
}

/* --------------------------------------------------------------- empty states */

.tac-reports .tac-empty[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 34px 18px;
    border: 1px dashed var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    text-align: center;
    min-width: 0;
}

/* The library's own empty state sits inside the panel, so it keeps a margin off
   the panel walls rather than butting against them. */
.tac-reports .tac-panel > .tac-empty[b-otwd65m56k] {
    margin: 16px;
}

.tac-reports .tac-empty-icon[b-otwd65m56k] {
    width: 26px;
    height: 26px;
    stroke: var(--tac-line2);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-reports .tac-empty-title[b-otwd65m56k] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-reports .tac-empty-hint[b-otwd65m56k] {
    margin: 0;
    max-width: 52ch;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* ---------------------------------------------------------------- chip filters */

.tac-reports .tac-chipbar[b-otwd65m56k] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 12px 16px 0;
    min-width: 0;
}

.tac-reports .tac-chip[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tac-reports .tac-chip:hover[b-otwd65m56k] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-reports .tac-chip.on[b-otwd65m56k] {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-reports .tac-chip:focus-visible[b-otwd65m56k] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- tag sections */

.tac-reports .tac-sections[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0 0 8px;
}

.tac-reports .tac-section[b-otwd65m56k] {
    margin: 0;
    min-width: 0;
}

.tac-reports .tac-section-head[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 16px 0;
    min-width: 0;
}

.tac-reports .tac-section-name[b-otwd65m56k] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-reports .tac-section-count[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-acc);
}

/* ------------------------------------------------------------- saved-report cards */

.tac-reports .tac-cardgrid[b-otwd65m56k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 12px 16px 4px;
    min-width: 0;
}

.tac-reports .tac-card[b-otwd65m56k] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-left: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tac-reports .tac-card[b-otwd65m56k]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
    opacity: 0.7;
    pointer-events: none;
}

.tac-reports .tac-card:hover[b-otwd65m56k] {
    border-color: var(--tac-acc);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transform: none;
}

.tac-reports .tac-card-head[b-otwd65m56k] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.tac-reports .tac-card-mark[b-otwd65m56k] {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-acc);
    font-size: 0;
    line-height: 0;
}

.tac-reports .tac-card-mark .tac-ico[b-otwd65m56k] {
    width: 12px;
    height: 12px;
}

.tac-reports .tac-card-identity[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.tac-reports .tac-cardtitle[b-otwd65m56k] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-reports .tac-card-meta[b-otwd65m56k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-reports .tac-card-sep[b-otwd65m56k] {
    color: var(--tac-line2);
}

.tac-reports .tac-card-desc[b-otwd65m56k] {
    margin: 0;
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-reports .tac-card-tags[b-otwd65m56k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-reports .tac-card-foot[b-otwd65m56k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-reports .tac-meta[b-otwd65m56k] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-reports .tac-card-actions[b-otwd65m56k] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* --------------------------------------------------------------------- tags */

.tac-reports .tac-tag[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    padding: 0 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 400;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.tac-reports .tac-tag-sm[b-otwd65m56k] {
    height: 18px;
    padding: 0 6px;
    font-size: var(--tac-fs-micro);
}

.tac-reports .tac-tag-x[b-otwd65m56k] {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    cursor: pointer;
}

.tac-reports .tac-tag-x .tac-ico[b-otwd65m56k] {
    width: 9px;
    height: 9px;
    stroke-width: 2.4;
}

.tac-reports .tac-tag-x:hover[b-otwd65m56k] {
    color: var(--tac-crit);
}

/* The dashed "edit tags" affordance stays dashed — it is an invitation, not a
   committed action. */
.tac-reports .tac-tag-edit[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 7px;
    border: 1px dashed var(--tac-line2);
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tac-reports .tac-tag-edit .tac-ico[b-otwd65m56k] {
    width: 10px;
    height: 10px;
}

.tac-reports .tac-tag-edit:hover[b-otwd65m56k] {
    border-color: var(--tac-acc);
    color: var(--tac-acc);
}

.tac-reports .tac-taginput[b-otwd65m56k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
}

.tac-reports .tac-taginput:focus-within[b-otwd65m56k] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-reports .tac-tag-entry[b-otwd65m56k] {
    flex: 1;
    min-width: 130px;
    padding: 3px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-reports .tac-tag-entry[b-otwd65m56k]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

/* ------------------------------------------------------------- column picker */

.tac-reports .tac-picker[b-otwd65m56k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    min-width: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.tac-reports .tac-pane[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 300px;
    max-height: 430px;
}

.tac-reports .tac-picker > .tac-pane:first-child[b-otwd65m56k] {
    border-inline-end: 1px solid var(--tac-line);
}

.tac-reports .tac-pane-head[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
    min-width: 0;
}

.tac-reports .tac-pane-count[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-inline-start: auto;
    padding: 0 7px;
    border: 1px solid var(--tac-acc);
    border-radius: 0;
    background: none;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-acc);
}

.tac-reports .tac-pane-search[b-otwd65m56k] {
    padding: 10px 16px 0;
    border: 0;
    min-width: 0;
}

.tac-reports .tac-pane-list[b-otwd65m56k] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 14px;
    min-width: 0;
}

.tac-reports .tac-grp-title[b-otwd65m56k] {
    padding: 10px 4px 5px;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-reports .tac-avail[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px;
    border-radius: 0;
    min-width: 0;
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.tac-reports .tac-avail:hover[b-otwd65m56k] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

.tac-reports .tac-avail.added[b-otwd65m56k] {
    opacity: 0.45;
    pointer-events: none;
}

.tac-reports .tac-avail-name[b-otwd65m56k] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A flat square box, not the OS checkbox — it is a read-out of "already added",
   and the row itself is the control. */
.tac-reports .tac-check[b-otwd65m56k] {
    width: 14px;
    height: 14px;
    flex: none;
    margin: 0;
    accent-color: var(--tac-acc);
}

.tac-reports .tac-avail-add[b-otwd65m56k] {
    margin-inline-start: auto;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-acc);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.tac-reports .tac-avail:hover .tac-avail-add[b-otwd65m56k] {
    opacity: 1;
}

.tac-reports .tac-picker-mid[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    border-inline-end: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-reports .tac-picker-mid .tac-iconbtn[b-otwd65m56k] {
    width: 28px;
    height: 28px;
}

.tac-reports .tac-picker-mid .tac-ico[b-otwd65m56k] {
    width: 12px;
    height: 12px;
}

.tac-reports .tac-sel-list[b-otwd65m56k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    padding: 12px 16px;
    min-width: 0;
}

.tac-reports .tac-sel-list > .tac-empty[b-otwd65m56k] {
    margin: auto 0;
}

.tac-reports .tac-sel[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-size: var(--tac-fs-meta);
    cursor: grab;
}

.tac-reports .tac-sel.dragging[b-otwd65m56k] {
    opacity: 0.4;
    border-color: var(--tac-acc);
}

.tac-reports .tac-sel-name[b-otwd65m56k] {
    min-width: 0;
    font-weight: 600;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-reports .tac-grip[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--tac-ink3);
    cursor: grab;
}

/* ------------------------------------------------------------------- filters */

.tac-reports .tac-matchrow[b-otwd65m56k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0;
    min-width: 0;
    color: var(--tac-ink2);
}

.tac-reports .tac-matchhint[b-otwd65m56k] {
    min-width: 0;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

.tac-reports .tac-seg[b-otwd65m56k] {
    display: inline-flex;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    overflow: hidden;
}

.tac-reports .tac-seg-btn[b-otwd65m56k] {
    margin: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tac-reports .tac-seg-btn:hover:not(.on)[b-otwd65m56k] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

.tac-reports .tac-seg-btn.on[b-otwd65m56k] {
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-reports .tac-seg-btn:focus-visible[b-otwd65m56k] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-reports .tac-filterrow[b-otwd65m56k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.tac-reports .tac-filterrow .tac-combo[b-otwd65m56k] {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
}

.tac-reports .tac-filterrow .tac-op[b-otwd65m56k] {
    flex: 0 1 180px;
    min-width: 0;
}

.tac-reports .tac-filterrow .tac-input.f-val[b-otwd65m56k] {
    flex: 1 1 200px;
    min-width: 0;
    width: auto;
}

.tac-reports .tac-combo-menu[b-otwd65m56k] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.tac-reports .tac-combo-item[b-otwd65m56k] {
    padding: 6px 8px;
    border-radius: 0;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink);
    cursor: pointer;
}

.tac-reports .tac-combo-item:hover[b-otwd65m56k] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

/* ------------------------------------------------------------------- preview */

.tac-reports .tac-prevhead[b-otwd65m56k] {
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--tac-line);
}

.tac-reports .tac-prevhead-left[b-otwd65m56k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.tac-reports .tac-prevhead-rows[b-otwd65m56k] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

.tac-reports .tac-prevhead-controls[b-otwd65m56k] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    margin-inline-start: auto;
}

.tac-reports .tac-prevhead-controls .tac-select[b-otwd65m56k] {
    width: 170px;
    max-width: 100%;
    height: 32px;
}

/* export menu */

.tac-reports .tac-dropdown[b-otwd65m56k] {
    position: relative;
}

.tac-reports .tac-dropdown-menu[b-otwd65m56k] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    display: none;
    min-width: 210px;
    padding: 4px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.tac-reports .tac-dropdown.open .tac-dropdown-menu[b-otwd65m56k] {
    display: block;
}

.tac-reports .tac-dropdown-menu > button[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: start;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    color: var(--tac-ink);
    cursor: pointer;
}

.tac-reports .tac-dropdown-menu > button:hover[b-otwd65m56k] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

.tac-reports .tac-dropdown-menu > button:focus-visible[b-otwd65m56k] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-reports .tac-fmt-ic[b-otwd65m56k] {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
    color: var(--tac-ink2);
}

.tac-reports .tac-fmt-ic .tac-ico[b-otwd65m56k] {
    width: 12px;
    height: 12px;
}

.tac-reports .tac-fmt-name[b-otwd65m56k] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    color: var(--tac-ink0);
}

.tac-reports .tac-fmt-sub[b-otwd65m56k] {
    margin-inline-start: auto;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* drag-to-group panel */

.tac-reports .tac-grouppanel[b-otwd65m56k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 44px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--tac-line);
    background: var(--tac-s2);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.tac-reports .tac-grouppanel.drag-target[b-otwd65m56k] {
    background: var(--tac-acc-dim);
    box-shadow: inset 0 0 0 1px var(--tac-acc);
}

.tac-reports .tac-groupchip[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding: 0 6px 0 10px;
    border: 1px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-s1);
    color: var(--tac-acc);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

/* ---------------------------------------------------------------------- table */

/* The one arbitrarily wide thing on the page gets its own scroller, so the
   document never scrolls sideways at phone, tablet, desktop or 1920. */
.tac-reports .tac-tablewrap[b-otwd65m56k] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-reports .tac-table[b-otwd65m56k] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-reports .tac-table .tac-th[b-otwd65m56k] {
    text-align: start;
    padding: 8px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.tac-reports .tac-table .tac-th:hover[b-otwd65m56k] {
    color: var(--tac-acc);
}

/* Align the table's outer edges with the panel padding, not flush to the wall. */
.tac-reports .tac-table th:first-child[b-otwd65m56k],
.tac-reports .tac-table td:first-child[b-otwd65m56k] {
    padding-inline-start: 18px;
}

.tac-reports .tac-table th:last-child[b-otwd65m56k],
.tac-reports .tac-table td:last-child[b-otwd65m56k] {
    padding-inline-end: 18px;
}

.tac-reports .tac-th-inner[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tac-reports .tac-sortcaret[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    color: var(--tac-line2);
}

.tac-reports .tac-sortcaret .tac-ico[b-otwd65m56k] {
    width: 11px;
    height: 11px;
    stroke-width: 2.2;
}

.tac-reports .tac-sortcaret.active[b-otwd65m56k] {
    color: var(--tac-acc);
}

.tac-reports .tac-table tbody td[b-otwd65m56k] {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-reports .tac-table tbody tr:last-child td[b-otwd65m56k] {
    border-bottom: 0;
}

.tac-reports .tac-table .tac-row:hover > td[b-otwd65m56k] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-reports .tac-table tbody td.indent[b-otwd65m56k] {
    padding-inline-start: 34px;
}

.tac-reports .tac-emptycell[b-otwd65m56k] {
    padding: 18px;
    text-align: center;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    color: var(--tac-ink3);
}

/* Status cells. `.pill` keeps its name — ReportsBuilderTests counts
   `preview-table tbody td .pill` — but it is a sharp mono badge now, matching the
   .sev chips in the artboard. */
.tac-reports .tac-table .pill[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-reports .tac-table .pill-good[b-otwd65m56k] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-reports .tac-table .pill-bad[b-otwd65m56k] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

/* group rows */

.tac-reports .tac-table .tac-grouprow > td[b-otwd65m56k] {
    padding: 8px 18px;
    background: var(--tac-acc-dim);
    border-top: 1px solid var(--tac-line);
    border-bottom: 1px solid var(--tac-line);
    cursor: pointer;
}

.tac-reports .tac-grouplabel[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tac-reports .tac-groupcaret[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    color: var(--tac-acc);
    transition: transform 0.12s ease;
}

.tac-reports .tac-groupcaret .tac-ico[b-otwd65m56k] {
    width: 11px;
    height: 11px;
    stroke-width: 2.2;
}

.tac-reports .tac-grouplabel.collapsed .tac-groupcaret[b-otwd65m56k] {
    transform: rotate(-90deg);
}

.tac-reports .tac-grouplabel-key[b-otwd65m56k] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-reports .tac-grouplabel-value[b-otwd65m56k] {
    font-weight: 600;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-reports .tac-groupcount[b-otwd65m56k] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border: 1px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-s1);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-acc);
}

/* -------------------------------------------------------------------- alerts */

.tac-reports .tac-alert[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-reports .tac-alert-error[b-otwd65m56k] {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
}

/* -------------------------------------------------------------------- modal */

.tac-reports .tac-modal-overlay[b-otwd65m56k] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(11, 18, 32, 0.45);
    backdrop-filter: none;
}

.tac-reports .tac-modal[b-otwd65m56k] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(460px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-reports .tac-modal[b-otwd65m56k]::before,
.tac-reports .tac-modal[b-otwd65m56k]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-reports .tac-modal[b-otwd65m56k]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-reports .tac-modal[b-otwd65m56k]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-reports .tac-modal-head[b-otwd65m56k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--tac-line);
}

.tac-reports .tac-modal-title[b-otwd65m56k] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-reports .tac-modal-close[b-otwd65m56k] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    cursor: pointer;
}

.tac-reports .tac-modal-close:hover[b-otwd65m56k] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-reports .tac-modal-body[b-otwd65m56k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px;
    min-width: 0;
}

.tac-reports .tac-modal-foot[b-otwd65m56k] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--tac-line);
}

/* --------------------------------------------------------------- responsive */

/* The two-pane picker is the first thing to give: below the shell's tablet
   breakpoint it stacks, and the transfer column turns into a horizontal strip. */
@media (max-width: 1023px) {
    .tac-reports .tac-pagetitle[b-otwd65m56k] {
        font-size: 20px;
    }

    .tac-reports .tac-actions[b-otwd65m56k] {
        margin-inline-start: 0;
    }

    .tac-reports .tac-configrow[b-otwd65m56k] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-reports .tac-picker[b-otwd65m56k] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-reports .tac-picker > .tac-pane:first-child[b-otwd65m56k] {
        border-inline-end: 0;
        border-bottom: 1px solid var(--tac-line);
    }

    .tac-reports .tac-picker-mid[b-otwd65m56k] {
        flex-direction: row;
        padding: 8px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--tac-line);
    }

    .tac-reports .tac-prevhead-controls[b-otwd65m56k] {
        margin-inline-start: 0;
    }
}

@media (max-width: 767px) {
    .tac-reports[b-otwd65m56k] {
        gap: 12px;
    }

    .tac-reports .tac-panel-head[b-otwd65m56k],
    .tac-reports .tac-panel-body[b-otwd65m56k],
    .tac-reports .tac-toolbar[b-otwd65m56k],
    .tac-reports .tac-grouppanel[b-otwd65m56k],
    .tac-reports .tac-panel-foot[b-otwd65m56k] {
        padding-inline: 14px;
    }

    .tac-reports .tac-panel-body-flush[b-otwd65m56k] {
        padding: 0;
    }

    .tac-reports .tac-cardgrid[b-otwd65m56k],
    .tac-reports .tac-chipbar[b-otwd65m56k],
    .tac-reports .tac-section-head[b-otwd65m56k] {
        padding-inline: 12px;
    }

    .tac-reports .tac-toolbar-controls[b-otwd65m56k],
    .tac-reports .tac-toolbar-controls .tac-searchbox[b-otwd65m56k] {
        width: 100%;
    }

    .tac-reports .tac-actions[b-otwd65m56k] {
        width: 100%;
    }

    .tac-reports .tac-actions .tac-btn[b-otwd65m56k] {
        flex: 1 1 auto;
    }

    .tac-reports .tac-filterrow .tac-combo[b-otwd65m56k],
    .tac-reports .tac-filterrow .tac-op[b-otwd65m56k],
    .tac-reports .tac-filterrow .tac-input.f-val[b-otwd65m56k] {
        flex: 1 1 100%;
    }

    .tac-reports .tac-prevhead-controls[b-otwd65m56k] {
        width: 100%;
    }

    .tac-reports .tac-dropdown-menu[b-otwd65m56k] {
        right: auto;
        left: 0;
    }

    .tac-reports .tac-table th:first-child[b-otwd65m56k],
    .tac-reports .tac-table td:first-child[b-otwd65m56k] {
        padding-inline-start: 14px;
    }

    .tac-reports .tac-table th:last-child[b-otwd65m56k],
    .tac-reports .tac-table td:last-child[b-otwd65m56k] {
        padding-inline-end: 14px;
    }
}

/* Honour reduced-motion: the only transitions here are hover/focus washes and the
   group caret, but kill them anyway so nothing animates for users who asked for
   stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-reports *[b-otwd65m56k],
    .tac-reports[b-otwd65m56k]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/ReportSettings.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops report-branding console — Pages/ReportSettings.razor.

   No artboard exists for this screen in Mock/tactical-ops/ (the folder holds
   login, dashboard, agents and report-builder only), so every value below is
   taken from the shipped reference implementations — Login.razor.css,
   Dashboard.razor.css, Agents.razor.css and ScheduleTask.razor.css — rather than
   invented. Consistency with what already ships beats novelty here.

   Scoped to ReportSettings.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   ── FOUR RULES THIS SHEET MUST NOT BREAK ──────────────────────────────────────

   1. NOTHING here may name a bare shared selector. .card, .card-body, .field,
      .btn / .btn-primary / .btn-secondary, .page-head and friends are shared
      with other screens; every element therefore carries a NEW .tac-* twin and
      every selector below hangs off one. The legacy classes stay on the markup
      so nothing that selects on them breaks.

   2. THE LIVE PREVIEW IS NOT CONVERTED. Everything under `.paper` is a fidelity
      mock of what Services/Reporting/ReportHtmlRenderer.cs emits — a Segoe UI
      body, a rounded gradient logo chip, an accent-filled thead, an italic
      disclaimer. Those rules deliberately keep the RENDERER's shapes and type,
      not the console's, because a preview that looks like the console instead of
      the PDF is a preview that lies. The `.pv-*` block below is therefore the
      one place in this sheet where rounded corners and a non-tac font stack are
      correct.

   3. InputFile is a CHILD COMPONENT, so its <input type="file"> never carries
      this component's scope attribute — it is reached with ::deep from a .tac-*
      ancestor that does, exactly as Login.razor.css does for input.form-control.
      SwitchRow is a child component too and owns its own scoped sheet.

   4. Nothing may make the document scroll sideways. The editor/preview split
      collapses to one column at 1199px, the header+footer pair is an auto-fit
      grid that collapses on its own container width, and the preview table gets
      its own horizontal overflow container.
   ============================================================================ */

.tac-reportsettings[b-x7i4lgev10] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
    padding: 0 0 40px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-lbl[b-x7i4lgev10],
.tac-eyebrow[b-x7i4lgev10] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-eyebrow[b-x7i4lgev10] {
    color: var(--tac-acc);
}

.tac-dot[b-x7i4lgev10] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

.tac-dot.ok[b-x7i4lgev10] { background: var(--tac-ok); }
.tac-dot.warn[b-x7i4lgev10] { background: var(--tac-warn); }
.tac-dot.crit[b-x7i4lgev10] { background: var(--tac-crit); }

.tac-note[b-x7i4lgev10] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* --------------------------------------------------------------- breadcrumbs */

.tac-crumbs[b-x7i4lgev10] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-crumb-sep[b-x7i4lgev10] {
    color: var(--tac-line2);
}

.tac-crumb-here[b-x7i4lgev10] {
    color: var(--tac-acc);
}

/* --------------------------------------------------------------- page header */

.tac-pagehead[b-x7i4lgev10] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-pagehead-text[b-x7i4lgev10] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Settings") from
   GetPageTitle(). */
.tac-pagetitle[b-x7i4lgev10] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-pagesub[b-x7i4lgev10] {
    margin: 0;
    max-width: 60ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* The save-state read-out mirrors the model-vs-original comparison, so the light
   can never disagree with what is actually pending. */
.tac-state[b-x7i4lgev10] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-line2);
    background: var(--tac-s2);
    white-space: nowrap;
}

.tac-state-value[b-x7i4lgev10] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ------------------------------------------------------------------- actions */

.tac-actions[b-x7i4lgev10] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tac-btn[b-x7i4lgev10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-btn:hover:not(:disabled)[b-x7i4lgev10] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-btn:focus-visible[b-x7i4lgev10] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-btn-primary[b-x7i4lgev10] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-btn-primary:hover:not(:disabled)[b-x7i4lgev10] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-btn:disabled[b-x7i4lgev10] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-btn-icon[b-x7i4lgev10] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -------------------------------------------------------------------- alerts */

.tac-alert[b-x7i4lgev10] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--tac-ink);
}

.tac-alert.info[b-x7i4lgev10] {
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
    color: var(--tac-ok);
}

.tac-alert.error[b-x7i4lgev10] {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
}

/* ---------------------------------------------------------------------- grid */

.tac-grid[b-x7i4lgev10] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    align-items: start;
    gap: 16px;
    min-width: 0;
}

.tac-col[b-x7i4lgev10] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* auto-fit, so the pair collapses on the CONTAINER's width rather than the
   viewport's — the shell rail makes those two very different numbers. */
.tac-2col[b-x7i4lgev10] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
    gap: 16px;
    min-width: 0;
}

/* -------------------------------------------------------------------- panels */

.tac-panel[b-x7i4lgev10] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    overflow: visible;
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-panel[b-x7i4lgev10]::before,
.tac-panel[b-x7i4lgev10]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-panel[b-x7i4lgev10]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-x7i4lgev10]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-x7i4lgev10] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-panel-head[b-x7i4lgev10] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
    margin: 0;
    padding: 14px 18px 12px;
    background: none;
    border: 0;
}

.tac-panel-head-ruled[b-x7i4lgev10] {
    border-bottom: 1px solid var(--tac-line);
}

/* The 01..04 build order replaces the old bold card headings' visual weight. */
.tac-panel-index[b-x7i4lgev10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    align-self: center;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-panel-title[b-x7i4lgev10] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-panel-hint[b-x7i4lgev10] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
    min-width: 0;
}

.tac-panel-body[b-x7i4lgev10] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 14px 18px 16px;
}

/* The switch stacks bring their own row rules, so the gap would double up. */
.tac-panel-body-switches[b-x7i4lgev10] {
    gap: 0;
}

.tac-switches[b-x7i4lgev10] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The preview paper carries its own margin box. */
.tac-panel-body-flush[b-x7i4lgev10] {
    gap: 0;
    padding: 0;
}

/* -------------------------------------------------------------------- fields */

.tac-field[b-x7i4lgev10] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.tac-label[b-x7i4lgev10] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-input[b-x7i4lgev10],
.tac-select[b-x7i4lgev10] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-textarea[b-x7i4lgev10] {
    height: auto;
    min-height: 66px;
    padding: 9px 12px;
    line-height: 1.5;
    resize: vertical;
}

.tac-input:hover[b-x7i4lgev10],
.tac-select:hover[b-x7i4lgev10] {
    background: var(--tac-s1);
}

.tac-input:focus[b-x7i4lgev10],
.tac-select:focus[b-x7i4lgev10] {
    outline: none;
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    /* site.css puts a 3px blue glow on any focused control; here it reads as a
       second border inside the field frame. The frame itself is the affordance. */
    box-shadow: none;
}

.tac-input:focus-visible[b-x7i4lgev10],
.tac-select:focus-visible[b-x7i4lgev10] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-input[b-x7i4lgev10]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

.tac-row[b-x7i4lgev10] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    min-width: 0;
}

/* The disclaimer editor is a consequence of the toggle above it, so it is set
   off by an accent tick rather than floated as a peer field. */
.tac-subeditor[b-x7i4lgev10] {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--tac-acc);
}

/* --------------------------------------------------------------- colour rows */

.tac-colorrow[b-x7i4lgev10] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* A flat, square swatch. The native control still opens the OS picker. */
.tac-color[b-x7i4lgev10] {
    width: 44px;
    height: 36px;
    flex: none;
    padding: 3px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    cursor: pointer;
}

.tac-color:hover[b-x7i4lgev10] {
    border-color: var(--tac-acc);
}

.tac-color:focus-visible[b-x7i4lgev10] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

/* Hex values are addresses, so they get the mono/tabular treatment every other
   identifier on a tactical-ops page gets. */
.tac-hex[b-x7i4lgev10] {
    width: 104px;
    flex: none;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tac-subsetting[b-x7i4lgev10] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 12px 0 0 12px;
    border-left: 2px solid var(--tac-acc);
}

/* ------------------------------------------------------------------ logo zone */

.tac-logo-zone[b-x7i4lgev10] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    min-width: 0;
}

.tac-logo-frame[b-x7i4lgev10] {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 6px;
    border: 1px dashed var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    text-align: center;
}

.tac-logo-frame img[b-x7i4lgev10] {
    max-width: 100%;
    max-height: 100%;
}

.tac-logo-empty[b-x7i4lgev10] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-logo-actions[b-x7i4lgev10] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tac-logo-btns[b-x7i4lgev10] {
    display: flex;
    gap: 8px;
}

.tac-icon-btn[b-x7i4lgev10] {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink3);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-icon-btn:hover[b-x7i4lgev10] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-icon-btn:focus-within[b-x7i4lgev10] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-icon-btn-danger:hover[b-x7i4lgev10] {
    border-color: var(--tac-crit);
    color: var(--tac-crit);
}

.tac-icon-btn svg[b-x7i4lgev10] {
    width: 17px;
    height: 17px;
}

/* InputFile is a CHILD COMPONENT — its <input type="file"> never carries this
   page's scope attribute, so it is reached with ::deep. It stays in the a11y
   tree (clipped, not display:none) so the label's `for` target is focusable. */
.tac-logo-btns[b-x7i4lgev10]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   LIVE PREVIEW — a fidelity mock of ReportHtmlRenderer's output.

   Everything from here down deliberately does NOT use the tactical palette or
   type. It mirrors Services/Reporting/ReportHtmlRenderer.cs so the preview shows
   what the EXPORT looks like. Changing these to JetBrains Mono / sharp corners
   would make the preview misrepresent the PDF.
   ============================================================================ */

.tac-preview-wrap[b-x7i4lgev10] {
    position: sticky;
    top: 16px;
    min-width: 0;
}

.tac-panel-preview[b-x7i4lgev10] {
    min-width: 0;
}

.paper[b-x7i4lgev10] {
    /* ReportHtmlRenderer's own body stack — NOT --tac-body. */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1f2937;
    background: #ffffff;
    margin: 16px;
    padding: 20px 20px 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    min-width: 0;
}

.pv-head[b-x7i4lgev10] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    /* Overridden inline from the model's accent — the renderer does the same. */
    border-bottom: 3px solid #2563eb;
}

.pv-brand[b-x7i4lgev10] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.pv-logo[b-x7i4lgev10] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.pv-logo img[b-x7i4lgev10] {
    max-width: 100%;
    max-height: 100%;
}

.pv-name[b-x7i4lgev10] {
    font-size: var(--tac-fs-body);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.pv-tag[b-x7i4lgev10] {
    font-size: var(--tac-fs-micro);
    color: #6b7280;
    overflow-wrap: anywhere;
}

.pv-issued[b-x7i4lgev10] {
    text-align: right;
    font-size: var(--tac-fs-micro);
    color: #6b7280;
    white-space: nowrap;
}

.pv-issued .v[b-x7i4lgev10] {
    color: #1f2937;
    font-weight: 600;
}

.pv-title[b-x7i4lgev10] {
    font-size: var(--tac-fs-label);
    font-weight: 800;
    margin: 14px 0 2px;
}

/* The paper lives in a 360px rail; the sample table is the one thing in it that
   can get wider than that, so it gets its own scroller. */
.pv-tablewrap[b-x7i4lgev10] {
    overflow-x: auto;
    margin-top: 12px;
}

.pv-table[b-x7i4lgev10] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tac-fs-micro);
}

.pv-table th[b-x7i4lgev10] {
    background: #1e3a8a;
    color: #ffffff;
    text-align: left;
    padding: 5px 7px;
    font-weight: 600;
    white-space: nowrap;
}

.pv-table td[b-x7i4lgev10] {
    padding: 5px 7px;
    border-bottom: 1px solid #eef1f5;
    white-space: nowrap;
}

.pv-foot[b-x7i4lgev10] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: var(--tac-fs-micro);
    color: #9ca3af;
    overflow-wrap: anywhere;
}

.pv-disc[b-x7i4lgev10] {
    font-size: var(--tac-fs-micro);
    color: #6b7280;
    margin-top: 8px;
    font-style: italic;
}

/* The one tactical element inside the preview column: the honesty caption that
   says the three machine rows are a layout sample, not live inventory. */
.pv-samplenote[b-x7i4lgev10] {
    margin: 0;
    padding: 10px 18px;
    border-top: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* --------------------------------------------------------------- responsive */

/* The editor/preview split has to collapse before the shell's own tablet
   breakpoint, otherwise the 360px rail squeezes the form column. */
@media (max-width: 1199px) {
    .tac-grid[b-x7i4lgev10] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-preview-wrap[b-x7i4lgev10] {
        position: static;
    }
}

@media (max-width: 1023px) {
    .tac-pagetitle[b-x7i4lgev10] {
        font-size: 20px;
    }

    .tac-state[b-x7i4lgev10] {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .tac-reportsettings[b-x7i4lgev10] {
        gap: 12px;
    }

    .tac-panel-head[b-x7i4lgev10] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-panel-body[b-x7i4lgev10] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-panel-body-flush[b-x7i4lgev10] {
        padding: 0;
    }

    .tac-actions[b-x7i4lgev10] {
        width: 100%;
    }

    .tac-actions .tac-btn[b-x7i4lgev10] {
        flex: 1 1 auto;
    }

    .paper[b-x7i4lgev10] {
        margin: 12px;
        padding: 16px 14px 14px;
    }

    .pv-head[b-x7i4lgev10] {
        flex-direction: column;
    }

    .pv-issued[b-x7i4lgev10] {
        text-align: left;
    }

    .pv-samplenote[b-x7i4lgev10] {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Honour reduced-motion: the only transitions here are hover/focus washes, but
   kill them anyway so nothing animates for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-reportsettings *[b-x7i4lgev10],
    .tac-reportsettings[b-x7i4lgev10]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/ReportViewer.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops read-only report viewer — Pages/ReportViewer.razor.

   No artboard exists for THIS screen in Mock/tactical-ops/ (the folder holds
   login, dashboard, agents and report-builder), so every value below is taken
   from the shipped reference implementations — Login.razor.css,
   Dashboard.razor.css, Agents.razor.css and ReportSettings.razor.css — plus the
   report-builder artboard's "03 PREVIEW" panel, which is the same result grid
   this page shows read-only. Consistency with what already ships beats novelty.

   Scoped to ReportViewer.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   ── THREE RULES THIS SHEET MUST NOT BREAK ────────────────────────────────────

   1. NOTHING here may name a bare shared selector. .card, .page-title,
      .page-sub, .head-actions, .btn / .btn-primary / .btn-secondary are shared
      with 15-41 other screens; every element therefore carries a NEW .tac-*
      twin and every selector below hangs off one. The legacy classes stay on
      the markup so site.css and responsive.css keep applying until the single
      final site.css sweep.

   2. ReportResultView is a CHILD COMPONENT with its own scoped sheet
      (Components/Reports/ReportResultView.razor.css) — Blazor scoped CSS does
      not cross component boundaries, so the grid is styled there, not with
      ::deep from here. It is this page's private child (one call site in the
      whole solution), which is why it was converted at the same time.

   3. Nothing may make the document scroll sideways. The read-out is an auto-fit
      grid that collapses on its own container width, the long report GUID wraps
      rather than pushing the panel, and the result grid owns its own
      overflow-x container inside the child component.
   ============================================================================ */

.tac-reportviewer[b-m8t80zab0q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
    padding: 0 0 40px;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-lbl[b-m8t80zab0q],
.tac-eyebrow[b-m8t80zab0q] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-eyebrow[b-m8t80zab0q] {
    color: var(--tac-acc);
}

/* Every id, count and timestamp on this page is mono and tabular so stacked
   digits line up vertically. */
.tac-num[b-m8t80zab0q] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-dot[b-m8t80zab0q] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

.tac-dot.ok[b-m8t80zab0q] { background: var(--tac-ok); }
.tac-dot.warn[b-m8t80zab0q] { background: var(--tac-warn); }
.tac-dot.crit[b-m8t80zab0q] { background: var(--tac-crit); }

/* --------------------------------------------------------------------- trail */

.tac-crumbs[b-m8t80zab0q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-crumb-sep[b-m8t80zab0q] {
    color: var(--tac-line2);
}

.tac-crumb-here[b-m8t80zab0q] {
    color: var(--tac-acc);
    /* A long report name must wrap inside the trail rather than widen the page. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The back control is a button (it drives a Blazor navigation), styled as the
   trail's leading link rather than as a .btn. */
.tac-crumbs .tac-back[b-m8t80zab0q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.tac-crumbs .tac-back:hover[b-m8t80zab0q] {
    color: var(--tac-acc);
    text-decoration: none;
}

.tac-crumbs .tac-back:focus-visible[b-m8t80zab0q] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-back-icon[b-m8t80zab0q] {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------- page header */

.tac-pagehead[b-m8t80zab0q] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-pagehead-text[b-m8t80zab0q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Reports") from
   GetPageTitle(). */
.tac-pagetitle[b-m8t80zab0q] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

.tac-pagesub[b-m8t80zab0q] {
    margin: 0;
    max-width: 70ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* The state read-out mirrors the page's own _loading / _error / loaded split,
   so the light can never disagree with what is on screen. */
.tac-state[b-m8t80zab0q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-line2);
    background: var(--tac-s2);
    white-space: nowrap;
}

.tac-state-value[b-m8t80zab0q] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ------------------------------------------------------------------- actions */

.tac-actions[b-m8t80zab0q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tac-actions .tac-btn[b-m8t80zab0q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-actions .tac-btn:hover:not(:disabled)[b-m8t80zab0q] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-actions .tac-btn:focus-visible[b-m8t80zab0q] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-actions .tac-btn:disabled[b-m8t80zab0q] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-btn-icon[b-m8t80zab0q] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -------------------------------------------------------------------- panels */

.tac-panel[b-m8t80zab0q] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-panel[b-m8t80zab0q]::before,
.tac-panel[b-m8t80zab0q]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-panel[b-m8t80zab0q]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-m8t80zab0q]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-m8t80zab0q] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-panel-head[b-m8t80zab0q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    min-width: 0;
    padding: 13px 18px;
    border-bottom: 1px solid var(--tac-line);
}

.tac-panel-title[b-m8t80zab0q] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-loading[b-m8t80zab0q] {
    padding: 40px 18px;
    text-align: center;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* --------------------------------------------------------- definition readout */

/* auto-fit, so the read-out collapses on the CONTAINER's width rather than the
   viewport's — the shell rail makes those two very different numbers. */
.tac-readout[b-m8t80zab0q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 18px;
    min-width: 0;
    margin: 0;
    padding: 16px 18px;
}

.tac-readout-item[b-m8t80zab0q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tac-readout-item dt[b-m8t80zab0q] {
    margin: 0;
}

.tac-readout-value[b-m8t80zab0q] {
    margin: 0;
    min-width: 0;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* The definition GUID is long; let it wrap inside its cell instead of forcing a
   horizontal scrollbar onto the document. */
.tac-readout-id[b-m8t80zab0q] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
}

/* Tags can be many — give the row the full width of the grid when there is room. */
.tac-readout-tags[b-m8t80zab0q] {
    grid-column: 1 / -1;
}

.tac-readout-tags dd[b-m8t80zab0q] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tac-tag[b-m8t80zab0q] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink2);
}

/* -------------------------------------------------------------------- alerts */

.tac-alert[b-m8t80zab0q] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--tac-ink);
}

.tac-alert.crit[b-m8t80zab0q] {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
}

.tac-alert-icon[b-m8t80zab0q] {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------- result panel */

/* The grid inside the child component runs edge to edge under its own header. */
.tac-resultpanel[b-m8t80zab0q] {
    overflow: hidden;
}

/* --------------------------------------------------------------- responsive */

/* Below the shell's tablet break the header stacks: title first, then the state
   read-out, then the action. Nothing is allowed to sit on one line and overflow. */
@media (max-width: 1023px) {
    .tac-pagehead[b-m8t80zab0q] {
        align-items: flex-start;
    }

    .tac-state[b-m8t80zab0q] {
        order: 3;
    }

    .tac-actions[b-m8t80zab0q] {
        order: 4;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .tac-reportviewer[b-m8t80zab0q] {
        gap: 12px;
    }

    .tac-pagetitle[b-m8t80zab0q] {
        font-size: 20px;
    }

    .tac-readout[b-m8t80zab0q] {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }

    .tac-panel-head[b-m8t80zab0q] {
        padding: 12px 14px;
    }

    .tac-actions .tac-btn[b-m8t80zab0q] {
        flex: 1 1 auto;
    }
}

/* Honour reduced-motion: the only transitions here are hover/focus washes, but
   kill them anyway so nothing animates for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-reportviewer *[b-m8t80zab0q] {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/ScheduledJobDetails.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops scheduled-job record — the /scheduler/{id} detail screen.

   Scoped to ScheduledJobDetails.razor. The design tokens (--tac-*) are NOT
   declared here — they live on :root in wwwroot/css/tactical-tokens.css, linked
   first in _Host, so every tactical-ops page shares one source of truth.

   There is no artboard for this screen in Mock/tactical-ops/. Every shape below
   is borrowed from a SHIPPED reference so the app reads as one system:
     * bracket-ticked panel + scan hairline ............ Login.razor.css
     * dot+label status, mono table, mono metrics ...... Agents.razor.css
     * breadcrumb, detail head, info grid, panel head .. CollectionDetails.razor.css

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with up
   to 41 other screens (.content-card, .card-title, .status, .info-grid,
   .stat-item, .stat-label, .stat-value, .btn*, .empty-state, .loading-state,
   .breadcrumb, .history-table, .task-type). Blazor scoping alone would stop a
   bare `.status { }` rule leaking to other pages, but it would still fight
   site.css on THIS page in ways invisible from the other forty. So the markup
   carries a NEW .tac-* class next to every legacy one, and every selector below
   hangs off a .tac-* name. The legacy classes stay on the elements untouched:
   responsive.css's `.info-grid` collapse and its `.job-stats-bar` / `.job-tabs`
   phone rules are inherited for free only while those classes survive.

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so
   an equal-specificity .tac-* rule wins on source order, and the scope attribute
   Blazor appends puts these one notch above the legacy selectors anyway.

   ActionButton is a child component: its DOM never carries this component's
   scope attribute, so those rules go through ::deep from .tac-actions.
   ============================================================================ */

.tac-jobdetail[b-eu95uqndw0] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The record must never be the reason the document scrolls sideways —
       Responsive/*BreakpointTests assert zero page overflow at 375/768/1280. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-jobdetail .tac-panel[b-eu95uqndw0] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    margin: 0;
    padding: 18px 20px 20px;
    min-width: 0;
}

.tac-jobdetail .tac-panel[b-eu95uqndw0]::before,
.tac-jobdetail .tac-panel[b-eu95uqndw0]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-jobdetail .tac-panel[b-eu95uqndw0]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-jobdetail .tac-panel[b-eu95uqndw0]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-jobdetail .tac-scan[b-eu95uqndw0] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-jobdetail .tac-eyebrow[b-eu95uqndw0] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* Every number, id and timestamp on this page is mono and tabular so columns of
   digits line up vertically. */
.tac-jobdetail .tac-num[b-eu95uqndw0] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-jobdetail .tac-dot[b-eu95uqndw0] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

/* h2, not h1 — MainLayout renders the route's only <h1> ("Scheduler") from
   GetPageTitle(). Same call CollectionDetails.razor.css documents. */
.tac-jobdetail .tac-pagetitle[b-eu95uqndw0] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- breadcrumb */

.tac-jobdetail .tac-breadcrumb[b-eu95uqndw0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-width: 0;
}

.tac-jobdetail .tac-breadcrumb .tac-crumb[b-eu95uqndw0] {
    color: var(--tac-ink3);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tac-jobdetail .tac-breadcrumb a.tac-crumb:hover[b-eu95uqndw0] {
    color: var(--tac-acc);
    text-decoration: none;
}

.tac-jobdetail .tac-breadcrumb a.tac-crumb:focus-visible[b-eu95uqndw0] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-jobdetail .tac-breadcrumb .tac-crumb-current[b-eu95uqndw0] {
    color: var(--tac-ink0);
}

.tac-jobdetail .tac-breadcrumb .tac-crumb-sep[b-eu95uqndw0] {
    color: var(--tac-line2);
}

/* ------------------------------------------------------------------ record head */

.tac-jobdetail .tac-detailhead[b-eu95uqndw0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    min-width: 0;
}

.tac-jobdetail .tac-detailhead-text[b-eu95uqndw0] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 260px;
    min-width: 0;
}

.tac-jobdetail .tac-detailhead-actions[b-eu95uqndw0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* The job description sits under the head as a lede rather than inside it — a
   two-line sentence next to a 24px display title makes both harder to read. */
.tac-jobdetail .tac-lede[b-eu95uqndw0] {
    margin: -6px 0 0;
    max-width: 78ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- buttons */

/* Flat, uppercase, square — the Login/Agents/CollectionDetails button vocabulary. */
.tac-jobdetail .tac-btn[b-eu95uqndw0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-jobdetail .tac-btn:hover:not(:disabled)[b-eu95uqndw0] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-jobdetail .tac-btn:focus-visible[b-eu95uqndw0] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-jobdetail .tac-btn.tac-btn-primary[b-eu95uqndw0] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-jobdetail .tac-btn.tac-btn-primary:hover:not(:disabled)[b-eu95uqndw0] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

/* ActionButton is a SHARED child component (Components/Shared/ActionButton.razor),
   so it is reached with ::deep and never edited. Square it off and calm the colour
   down to a hairline frame so the three head actions read as one instrument
   cluster rather than three competing pills; hover restores the semantic colour.
   Its glyphs are emoji — desaturate them here, exactly as Agents.razor.css does,
   rather than changing a component 30-odd other screens depend on. */
.tac-jobdetail[b-eu95uqndw0]  .tac-actions .btn.btn-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-jobdetail[b-eu95uqndw0]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-jobdetail[b-eu95uqndw0]  .tac-actions .btn.btn-warning:hover:not(:disabled) {
    border-color: var(--tac-warn);
}

.tac-jobdetail[b-eu95uqndw0]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-jobdetail[b-eu95uqndw0]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-jobdetail[b-eu95uqndw0]  .tac-actions .action-btn-icon {
    filter: grayscale(0.45);
}

/* ----------------------------------------------------------------- metric strip */

/* The old strip was four 48px coloured emoji circles. Here the numbers ARE the
   instrument: mono, tabular, with a semantic hairline down the leading edge. */
.tac-jobdetail .tac-metrics[b-eu95uqndw0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    min-width: 0;
}

.tac-jobdetail .tac-metrics .tac-metric[b-eu95uqndw0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-inline-start: 2px solid var(--tac-line2);
    border-radius: 0;
    box-shadow: none;
}

.tac-jobdetail .tac-metrics .tac-metric-ok[b-eu95uqndw0] {
    border-inline-start-color: var(--tac-ok);
}

.tac-jobdetail .tac-metrics .tac-metric-crit[b-eu95uqndw0] {
    border-inline-start-color: var(--tac-crit);
}

.tac-jobdetail .tac-metrics .tac-metric .tac-metric-label[b-eu95uqndw0] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tac-jobdetail .tac-metrics .tac-metric .tac-metric-value[b-eu95uqndw0] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-xl);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--tac-ink0);
}

.tac-jobdetail .tac-metrics .tac-metric-ok .tac-metric-value[b-eu95uqndw0] {
    color: var(--tac-ok);
}

.tac-jobdetail .tac-metrics .tac-metric-crit .tac-metric-value[b-eu95uqndw0] {
    color: var(--tac-crit);
}

/* --------------------------------------------------------------------- tabs */

.tac-jobdetail .tac-tabs[b-eu95uqndw0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-jobdetail .tac-tabs .tac-tab[b-eu95uqndw0] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 36px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tac-jobdetail .tac-tabs .tac-tab:hover[b-eu95uqndw0] {
    color: var(--tac-ink0);
    background: var(--tac-acc-dim);
}

.tac-jobdetail .tac-tabs .tac-tab.active[b-eu95uqndw0] {
    color: var(--tac-acc-deep);
    border-bottom-color: var(--tac-acc);
    background: none;
}

.tac-jobdetail .tac-tabs .tac-tab:focus-visible[b-eu95uqndw0] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-jobdetail .tac-tabbody[b-eu95uqndw0] {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    min-width: 0;
}

.tac-jobdetail .tac-tabbody .tac-stack[b-eu95uqndw0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    min-width: 0;
}

/* -------------------------------------------------------------------- panel head */

.tac-jobdetail .tac-panel-head[b-eu95uqndw0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
}

.tac-jobdetail .tac-panel-head-toolbar[b-eu95uqndw0] {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: -18px -20px 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tac-line);
}

.tac-jobdetail .tac-panel-title[b-eu95uqndw0] {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-jobdetail .tac-panel-count[b-eu95uqndw0] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

/* ---------------------------------------------------------------- information */

/* responsive.css collapses the bare .info-grid to 2 columns at 1023px and 1 at
   767px; the rules below only restyle the cells and the gap, never the track
   count, so that behaviour is inherited rather than fought. */
.tac-jobdetail .tac-infogrid[b-eu95uqndw0] {
    gap: 14px 20px;
    min-width: 0;
}

.tac-jobdetail .tac-infoitem[b-eu95uqndw0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.tac-jobdetail .tac-infolabel[b-eu95uqndw0] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-jobdetail .tac-infovalue[b-eu95uqndw0] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* The cron expression is the one value on the page that is a machine literal
   rather than a reading, so it gets the accent. */
.tac-jobdetail .tac-infovalue.tac-infovalue-accent[b-eu95uqndw0] {
    color: var(--tac-acc-deep);
}

.tac-jobdetail .tac-infovalue.tac-infovalue-warn[b-eu95uqndw0] {
    color: var(--tac-warn);
}

/* GetCronDescription returns a sentence ("every day at 03:00"), not a literal —
   prose reads badly in mono at 13px. */
.tac-jobdetail .tac-infovalue.tac-infovalue-prose[b-eu95uqndw0] {
    font-family: var(--tac-body);
    font-weight: 400;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
}

/* The command's own line label sits above the code block, outside the grid. */
.tac-jobdetail .tac-panel > .tac-infolabel[b-eu95uqndw0] {
    display: block;
    margin: 0 0 6px;
}

.tac-jobdetail .tac-errorlabel[b-eu95uqndw0] {
    display: block;
    margin: 16px 0 6px;
    color: var(--tac-crit);
}

/* --------------------------------------------------------- code / error blocks */

.tac-jobdetail .tac-code[b-eu95uqndw0],
.tac-jobdetail .tac-errorblock[b-eu95uqndw0] {
    display: block;
    margin: 0 0 16px;
    padding: 12px 14px;
    max-width: 100%;
    min-width: 0;
    /* A pasted one-liner can be arbitrarily long; scroll the BLOCK, never the page. */
    overflow-x: auto;
    border-radius: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tac-jobdetail .tac-code[b-eu95uqndw0] {
    border: 1px solid var(--tac-line);
    border-inline-start: 2px solid var(--tac-acc);
    background: var(--tac-s2);
    color: var(--tac-ink0);
}

.tac-jobdetail .tac-errorblock[b-eu95uqndw0] {
    margin-bottom: 0;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-inline-start: 2px solid var(--tac-crit);
    background: rgba(220, 38, 38, 0.06);
    color: var(--tac-crit);
}

.tac-jobdetail .tac-code code[b-eu95uqndw0],
.tac-jobdetail .tac-errorblock code[b-eu95uqndw0] {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
    border: 0;
}

.tac-jobdetail .tac-panel > .tac-code:last-child[b-eu95uqndw0],
.tac-jobdetail .tac-panel > .tac-infogrid + .tac-code[b-eu95uqndw0] {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------- no data */

.tac-jobdetail .tac-nodata[b-eu95uqndw0] {
    margin: 0;
    padding: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-jobdetail .tac-nodata-inset[b-eu95uqndw0] {
    padding: 28px 4px 4px;
}

/* ------------------------------------------------------------- loading / empty */

.tac-jobdetail .tac-state[b-eu95uqndw0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-jobdetail .tac-state h3[b-eu95uqndw0] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-jobdetail .tac-state p[b-eu95uqndw0] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-jobdetail .tac-state .tac-state-text[b-eu95uqndw0] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-jobdetail .tac-state .tac-state-eyebrow[b-eu95uqndw0] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-crit);
}

/* A line-art mark instead of the question-mark glyph. */
.tac-jobdetail .tac-state-mark[b-eu95uqndw0] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-crit);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}

.tac-jobdetail .tac-spinner[b-eu95uqndw0] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-eu95uqndw0 0.9s linear infinite;
}

@keyframes tac-spin-b-eu95uqndw0 {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ run log */

/* responsive.css has no rule for a bare .history-table, so overflow-x lives here
   at EVERY width — that is what keeps five columns from pushing the document
   sideways on a 375px phone. */
.tac-jobdetail .tac-tablewrap[b-eu95uqndw0] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0 -20px -20px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-jobdetail .tac-table[b-eu95uqndw0] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-jobdetail .tac-table .tac-th[b-eu95uqndw0] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-jobdetail .tac-table .tac-th-num[b-eu95uqndw0] {
    text-align: end;
}

.tac-jobdetail .tac-table .tac-row > td[b-eu95uqndw0] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
    white-space: nowrap;
}

.tac-jobdetail .tac-table .tac-row:last-child > td[b-eu95uqndw0] {
    border-bottom: 0;
}

.tac-jobdetail .tac-table .tac-row[b-eu95uqndw0] {
    background: none;
    transition: background 0.12s ease;
}

.tac-jobdetail .tac-table .tac-row:hover > td[b-eu95uqndw0] {
    background: rgba(3, 105, 161, 0.05);
}

/* A failed run is dimmed, not painted red — the crit colour is reserved for the
   result dot so that stays the only thing that pulls the eye. */
.tac-jobdetail .tac-table .tac-row-failed > td[b-eu95uqndw0] {
    color: var(--tac-ink2);
}

.tac-jobdetail .tac-table .tac-cell-num[b-eu95uqndw0] {
    text-align: end;
}

/* ------------------------------------------------------------ status dot+label */

/* The tactical status convention: a semantic dot next to an uppercase mono label.
   site.css draws .status as a rounded pill, so the pill is unwound here. */
.tac-jobdetail .tac-status[b-eu95uqndw0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-jobdetail .tac-status-active[b-eu95uqndw0],
.tac-jobdetail .tac-status-ok[b-eu95uqndw0],
.tac-jobdetail .tac-status-online[b-eu95uqndw0] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-jobdetail .tac-status-active .tac-dot[b-eu95uqndw0],
.tac-jobdetail .tac-status-ok .tac-dot[b-eu95uqndw0],
.tac-jobdetail .tac-status-online .tac-dot[b-eu95uqndw0] { background: var(--tac-ok); }

.tac-jobdetail .tac-status-paused[b-eu95uqndw0],
.tac-jobdetail .tac-status-warn[b-eu95uqndw0] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-jobdetail .tac-status-paused .tac-dot[b-eu95uqndw0],
.tac-jobdetail .tac-status-warn .tac-dot[b-eu95uqndw0] { background: var(--tac-warn); }

.tac-jobdetail .tac-status-failed[b-eu95uqndw0],
.tac-jobdetail .tac-status-disabled[b-eu95uqndw0] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-jobdetail .tac-status-failed .tac-dot[b-eu95uqndw0],
.tac-jobdetail .tac-status-disabled .tac-dot[b-eu95uqndw0] { background: var(--tac-crit); }

.tac-jobdetail .tac-status-offline[b-eu95uqndw0] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-jobdetail .tac-status-offline .tac-dot[b-eu95uqndw0] { background: var(--tac-ink3); }

.tac-jobdetail .tac-overdue[b-eu95uqndw0] {
    margin-top: 2px;
}

/* --------------------------------------------------------------- action type */

/* The task type as a dot+label chip — the same convention the status uses, so the
   page has ONE badge language. site.css paints .task-type as a coloured pill per
   type; that is unwound and replaced by a coloured dot on a flat frame. */
.tac-jobdetail .tac-typechip[b-eu95uqndw0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-jobdetail .tac-typechip-command .tac-dot[b-eu95uqndw0] { background: var(--tac-acc); }
.tac-jobdetail .tac-typechip-deployment .tac-dot[b-eu95uqndw0] { background: var(--tac-ok); }
.tac-jobdetail .tac-typechip-inventory .tac-dot[b-eu95uqndw0] { background: var(--tac-ink3); }
.tac-jobdetail .tac-typechip-update-scan .tac-dot[b-eu95uqndw0] { background: var(--tac-warn); }
.tac-jobdetail .tac-typechip-backup .tac-dot[b-eu95uqndw0] { background: var(--tac-acc-deep); }
.tac-jobdetail .tac-typechip-cleanup .tac-dot[b-eu95uqndw0] { background: var(--tac-ink2); }
.tac-jobdetail .tac-typechip-collection .tac-dot[b-eu95uqndw0] { background: var(--tac-acc); }

/* ------------------------------------------------------------------- targets */

.tac-jobdetail .tac-targetlist[b-eu95uqndw0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* The desktop-computer emoji is gone; a leading accent rule carries the same
   "this is one machine" beat without a glyph. */
.tac-jobdetail .tac-target[b-eu95uqndw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--tac-line);
    border-inline-start: 2px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    min-width: 0;
}

.tac-jobdetail .tac-target-name[b-eu95uqndw0] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
    min-width: 0;
}

.tac-jobdetail .tac-tags[b-eu95uqndw0] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.tac-jobdetail .tac-tag[b-eu95uqndw0] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    color: var(--tac-ink2);
    white-space: nowrap;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
    .tac-jobdetail .tac-pagetitle[b-eu95uqndw0] {
        font-size: 21px;
    }

    /* Four metric cards do not fit a tablet row once the labels are spelled out. */
    .tac-jobdetail .tac-metrics[b-eu95uqndw0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .tac-jobdetail[b-eu95uqndw0] {
        gap: 12px;
    }

    .tac-jobdetail .tac-panel[b-eu95uqndw0] {
        padding: 14px 14px 16px;
    }

    .tac-jobdetail .tac-panel-head-toolbar[b-eu95uqndw0] {
        margin: -14px -14px 0;
        padding: 10px 12px;
    }

    .tac-jobdetail .tac-tablewrap[b-eu95uqndw0] {
        margin: 0 -14px -16px;
    }

    .tac-jobdetail .tac-detailhead[b-eu95uqndw0] {
        align-items: flex-start;
    }

    .tac-jobdetail .tac-pagetitle[b-eu95uqndw0] {
        font-size: 19px;
    }

    /* One column below 768px — the counters stay legible instead of ellipsing. */
    .tac-jobdetail .tac-metrics[b-eu95uqndw0] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-jobdetail .tac-metrics .tac-metric[b-eu95uqndw0] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
    }

    .tac-jobdetail .tac-metrics .tac-metric .tac-metric-value[b-eu95uqndw0] {
        font-size: 18px;
    }

    /* The tab rail scrolls sideways in its own strip rather than wrapping onto a
       second row and shoving the panel down the page. */
    .tac-jobdetail .tac-tabs[b-eu95uqndw0] {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
    }

    .tac-jobdetail .tac-tabs .tac-tab[b-eu95uqndw0] {
        flex: none;
        padding: 0 12px;
        letter-spacing: 0.1em;
    }
}

/* Honour reduced-motion: the only animations here are the spinner and the hover
   washes, but kill them anyway so nothing moves for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-jobdetail *[b-eu95uqndw0],
    .tac-jobdetail *[b-eu95uqndw0]::before,
    .tac-jobdetail *[b-eu95uqndw0]::after,
    .tac-jobdetail[b-eu95uqndw0]  * {
        transition: none !important;
        animation: none !important;
    }
}

/* .tac-jobdetail .tac-status is worn by TWO different things on this page: the hero badge
   in the summary header, where the 16px label step is right, and a badge inside a
   table data cell, where the surrounding text is 12-13px and 16px towers over the
   row. Scoping to `td` retunes only the in-row instance and leaves the hero alone -
   which is why this is an override rather than an edit to the rule above. */
.tac-jobdetail td .tac-status[b-eu95uqndw0] {
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
}
/* _content/Athena.Server/Pages/Scheduler.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Scheduler — derived from the shipped Login / Dashboard / Agents
   conversions (there is no Mock/tactical-ops artboard for this screen).

   Scoped to Scheduler.razor. The design tokens (--tac-*) are NOT declared here —
   they live on :root in wwwroot/css/tactical-tokens.css, linked first in _Host,
   so every tactical-ops page shares one source of truth.

   WHY EVERY RULE IS PREFIXED WITH A .tac-* CLASS
   ----------------------------------------------
   This page is built almost entirely out of class names site.css shares with
   dozens of other screens (.stats-bar, .stat-item, .status, .btn, .pagination,
   .view-btn, .filter-select ...). Blazor scoping alone would keep a bare
   `.status { }` rule from leaking, but it would still fight site.css on THIS
   page in ways that are invisible from the other 40. So the markup carries a
   NEW .tac-* class next to every legacy one, and every selector below hangs off
   a .tac-* name. The legacy classes stay on the elements untouched because the
   Playwright suite, responsive.css's phone card layout and the bUnit tests all
   select on them (see the comment block at the top of Scheduler.razor).

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css,
   so an equal-specificity .tac-* rule wins on source order. Where site.css is
   more specific (e.g. `.scheduler-list .list-header`) the rule below is written
   long enough to outrank it.

   SearchBar and ActionButton are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does.
   ============================================================================ */

.tac-scheduler[b-bgy3x7to11] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The scheduler must never be the reason the document scrolls sideways —
       Responsive/*BreakpointTests assert zero page overflow at 375/768/1280/1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-scheduler .tac-panel[b-bgy3x7to11] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
    padding: 0;
    overflow: visible;
}

.tac-scheduler .tac-panel[b-bgy3x7to11]::before,
.tac-scheduler .tac-panel[b-bgy3x7to11]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-scheduler .tac-panel[b-bgy3x7to11]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-scheduler .tac-panel[b-bgy3x7to11]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scheduler .tac-scan[b-bgy3x7to11] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-scheduler .tac-eyebrow[b-bgy3x7to11] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* Every number, id and timestamp on this page is mono and tabular so columns of
   digits line up vertically. */
.tac-scheduler .tac-num[b-bgy3x7to11] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    white-space: nowrap;
}

.tac-scheduler .tac-dot[b-bgy3x7to11] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

/* ------------------------------------------------------------------ rotate hint */

/* responsive.css owns whether this is shown at all; only the dressing is ours. */
.tac-scheduler .tac-rotate[b-bgy3x7to11] {
    border-radius: 0;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
}

.tac-scheduler .tac-rotate-icon[b-bgy3x7to11] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-scheduler .tac-rotate-dismiss[b-bgy3x7to11] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink3);
    cursor: pointer;
}

.tac-scheduler .tac-rotate-dismiss svg[b-bgy3x7to11] {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ---------------------------------------------------------- KPI card stat bar */

/* ONE card treatment for the whole app.

   This is the Dashboard's KPI tile (Pages/Dashboard.razor.css - the reference, and
   NOT edited by this change) lifted across: the same 1px hairline on --tac-s1, the
   same 9px bracket ticks, the same head / figure / foot rhythm, and the same
   ok | warn | crit | info | off dot vocabulary. The compact chip bar that used to
   live here is gone; the app no longer has two card treatments.

   What the Dashboard rail does NOT have - because its tiles are passive read-outs -
   is a pressed state. These cards ARE the page's filter, so the affordance is
   carried over from the chip bar they replace: a left accent border plus an inset
   ring on .selected, an accent hairline and surface wash on hover, and
   role="button" + tabindex="0" in the markup so a card is reachable and operable
   from the keyboard. A card that looks passive but filters on click would be worse
   than the chip it replaced.

   EVERY font-size below comes from a token in wwwroot/css/tactical-tokens.css
   (--tac-label-size / --tac-label-size-sm / --tac-stat-value-size). Nine pages each
   deciding for themselves what a stat count is worth - 18px on /credentials, 14px on
   /agents - is exactly what this block exists to end.

   Nothing here restyles a bare shared selector: the stat-item / stat-icon /
   stat-content / stat-label / stats-bar names stay on the markup as the Playwright and
   bUnit hooks they are, and are only ever reached THROUGH a .tac-* class.

   The .tac-chip* names stay on the markup too, and nothing styles them any more: nine
   bUnit suites select .tac-chipbar / .tac-chip / .tac-chip-count / .tac-chip-label /
   .tac-chip-readout, so after the conversion they are selector hooks exactly like the
   site.css names beside them. */

.tac-scheduler .tac-kpibar[b-bgy3x7to11] {
    display: grid;
    /* min() so a track can never be wider than the bar itself. A bare 190px minimum
       pushes the DOCUMENT sideways at 375px, and AssertNoPageOverflow runs there. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-scheduler .tac-kpi[b-bgy3x7to11] {
    position: relative;
    /* LOAD-BEARING. shell.css:489 declares a bare stat-content as flex-direction:column,
       and site.css:368 makes a bare stat-item a centred flex ROW. A container that
       sets display:flex without saying which way it runs inherits whichever of those
       reaches it and stacks - or in-lines - its children by accident; that is the bug
       that put the dot on top of the Agents chip. Every flex container in this block
       states its direction explicitly. */
    /* TWO LINES, number on the right:
           row 1  label + dot ............ figure
           row 2  caption (spans both columns)
       A grid rather than the old three stacked rows, so the figure can sit beside
       the label instead of under it and the card loses a line without losing data. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head figure"
        "foot foot";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Bracket ticks - the signature of the tactical-ops panel, the same 9px corner pair
   the Dashboard tile draws. */
.tac-scheduler .tac-kpi[b-bgy3x7to11]::before,
.tac-scheduler .tac-kpi[b-bgy3x7to11]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-scheduler .tac-kpi[b-bgy3x7to11]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-scheduler .tac-kpi[b-bgy3x7to11]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

/* The filter states the Dashboard tile has no need for. */

.tac-scheduler .tac-kpi-filter[b-bgy3x7to11] {
    cursor: pointer;
}

.tac-scheduler .tac-kpi-filter:hover[b-bgy3x7to11] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    /* site.css:382 lifts a bare stat-item 2px on hover. A card bouncing under the
       pointer is noise, so the surface wash IS the hover. */
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-scheduler .tac-kpi-filter:focus-visible[b-bgy3x7to11] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The pressed state. Declared AFTER :hover on purpose - same specificity, so the
   later rule wins and a selected card keeps reading as selected under the pointer.
   padding-left gives back the 2px the border takes, so the label does not shift when
   a card is picked. */
.tac-scheduler .tac-kpi.selected[b-bgy3x7to11] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    border-left: 3px solid var(--tac-acc);
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

/* A read-out is not a filter and must not look like one. */
.tac-scheduler .tac-kpi-readout[b-bgy3x7to11] {
    cursor: default;
}

/* Head / figure / foot. */

.tac-scheduler .tac-kpi .tac-kpi-head[b-bgy3x7to11] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    /* site.css:444 gives a bare stat-content flex:1; inside a column card that would
       make the head eat the space the figure and foot need. */
    flex: none;
}

.tac-scheduler .tac-kpi .tac-lbl[b-bgy3x7to11] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    /* 0.14em is the mock's tracking; at 16px it widens a label like
       "MAINTENANCE MODE" far enough to force a second grid row on a laptop. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-scheduler .tac-kpi.selected .tac-lbl[b-bgy3x7to11] {
    color: var(--tac-ink);
}

.tac-scheduler .tac-kpi .tac-kpi-head .tac-dot[b-bgy3x7to11] {
    margin-left: auto;
    /* Never let a stray align-items:stretch pull the dot off the head's centre
       line - that is what read as "the dot is stuck on the top of the card". */
    align-self: center;
}

.tac-scheduler .tac-kpi .tac-kpi-figure[b-bgy3x7to11] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The count. site.css:392 paints a bare stat-icon as a 48-60px gradient circle; here
   it is a number, so the whole badge treatment is unwound. Four classes deep so it
   outranks the two-class site.css:6289 rule that paints the maintenance counter. */
.tac-scheduler .tac-kpibar .tac-kpi .tac-kpi-value[b-bgy3x7to11] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-stat-value-size);
    font-weight: 600;
    line-height: 1;
}

.tac-scheduler .tac-kpi .tac-kpi-foot[b-bgy3x7to11] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The dot vocabulary, verbatim from the Dashboard rail. */
.tac-scheduler .tac-kpi .tac-dot.ok[b-bgy3x7to11] { background: var(--tac-ok); }
.tac-scheduler .tac-kpi .tac-dot.warn[b-bgy3x7to11] { background: var(--tac-warn); }
.tac-scheduler .tac-kpi .tac-dot.crit[b-bgy3x7to11] { background: var(--tac-crit); }
.tac-scheduler .tac-kpi .tac-dot.info[b-bgy3x7to11] { background: var(--tac-acc); }
.tac-scheduler .tac-kpi .tac-dot.off[b-bgy3x7to11] { background: var(--tac-ink3); }

/* --------------------------------------------------------------------- ops bar */

.tac-scheduler .tac-opsbar[b-bgy3x7to11] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0;
    padding: 12px 16px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-scheduler .tac-opsbar-id[b-bgy3x7to11] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Segmented Calendar/List switch — the same instrument as the Agents roster's
   List/Grid switch. */
.tac-scheduler .tac-segment[b-bgy3x7to11] {
    display: flex;
    gap: 0;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    overflow: hidden;
}

.tac-scheduler .tac-segment .tac-segment-btn[b-bgy3x7to11] {
    height: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tac-scheduler .tac-segment .tac-segment-btn + .tac-segment-btn[b-bgy3x7to11] {
    border-inline-start: 1px solid var(--tac-line2);
}

.tac-scheduler .tac-segment .tac-segment-btn:hover[b-bgy3x7to11] {
    background: var(--tac-acc-dim);
    color: var(--tac-ink0);
}

.tac-scheduler .tac-segment .tac-segment-btn.active[b-bgy3x7to11] {
    background: var(--tac-acc);
    color: #ffffff;
    box-shadow: none;
}

.tac-scheduler .tac-segment .tac-segment-btn:focus-visible[b-bgy3x7to11] {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

/* -------------------------------------------------------------------- buttons */

/* Flat, uppercase, square — never a rounded pill. */
.tac-scheduler .tac-cta[b-bgy3x7to11],
.tac-scheduler .tac-refresh[b-bgy3x7to11] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-scheduler .tac-cta[b-bgy3x7to11] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-scheduler .tac-cta:hover:not(:disabled)[b-bgy3x7to11] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

.tac-scheduler .tac-refresh[b-bgy3x7to11] {
    height: 34px;
    padding: 0 12px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
}

.tac-scheduler .tac-refresh:hover:not(:disabled)[b-bgy3x7to11] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    background: var(--tac-s1);
    transform: none;
    box-shadow: none;
}

.tac-scheduler .tac-cta:focus-visible[b-bgy3x7to11],
.tac-scheduler .tac-refresh:focus-visible[b-bgy3x7to11] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-scheduler .tac-cta-icon[b-bgy3x7to11],
.tac-scheduler .tac-refresh-icon[b-bgy3x7to11],
.tac-scheduler .tac-navbtn-icon[b-bgy3x7to11] {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -------------------------------------------------------------------- toolbar */

/* Shared by the calendar header and the list header. site.css gives
   `.scheduler-list .list-header` a grey wash and 16/20 padding — outranked here. */
.tac-scheduler .tac-panel .tac-toolbar[b-bgy3x7to11] {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-scheduler .tac-panel .tac-toolbar-title[b-bgy3x7to11] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-scheduler .tac-toolbar-count[b-bgy3x7to11] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-scheduler .tac-toolbar-controls[b-bgy3x7to11] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

.tac-scheduler .tac-filters[b-bgy3x7to11] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-scheduler[b-bgy3x7to11]  .search-bar {
    height: 34px;
    width: 280px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-scheduler[b-bgy3x7to11]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-scheduler[b-bgy3x7to11]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-scheduler[b-bgy3x7to11]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-scheduler[b-bgy3x7to11]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-scheduler[b-bgy3x7to11]  .search-bar .clear-search,
.tac-scheduler[b-bgy3x7to11]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* Native <select> so the platform keyboard handling and mobile picker survive;
   only the frame is restyled. */
.tac-scheduler .tac-select[b-bgy3x7to11] {
    height: 34px;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-scheduler .tac-select:hover[b-bgy3x7to11] {
    border-color: var(--tac-acc);
}

.tac-scheduler .tac-select:focus[b-bgy3x7to11],
.tac-scheduler .tac-select:focus-visible[b-bgy3x7to11] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
    border-color: var(--tac-acc);
    box-shadow: none;
}

/* ------------------------------------------------------------ loading / empty */

.tac-scheduler .tac-state[b-bgy3x7to11] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-scheduler .tac-state h3[b-bgy3x7to11] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-scheduler .tac-state p[b-bgy3x7to11] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-scheduler .tac-state .tac-state-eyebrow[b-bgy3x7to11] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

.tac-scheduler .tac-state-mark[b-bgy3x7to11] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-scheduler .tac-spinner[b-bgy3x7to11] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-spin-b-bgy3x7to11 0.9s linear infinite;
}

@keyframes tac-spin-b-bgy3x7to11 {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* The overflow container sits between .scheduler-list and .scheduler-table.
   responsive.css and the breakpoint tests use a DESCENDANT selector, so the phone
   card layout still applies; the seven-column roster scrolls in HERE instead of
   pushing the document sideways. */
.tac-scheduler .tac-tablewrap[b-bgy3x7to11] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.tac-scheduler .tac-table[b-bgy3x7to11] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-scheduler .tac-table thead[b-bgy3x7to11] {
    background: none;
}

.tac-scheduler .tac-table .tac-th[b-bgy3x7to11] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-scheduler .tac-table .tac-th-actions[b-bgy3x7to11] {
    text-align: end;
}

.tac-scheduler .tac-table .tac-row > td[b-bgy3x7to11] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-scheduler .tac-table .tac-row:last-child > td[b-bgy3x7to11] {
    border-bottom: 0;
}

.tac-scheduler .tac-table .tac-row[b-bgy3x7to11] {
    cursor: pointer;
    background: none;
    transition: background 0.12s ease;
}

.tac-scheduler .tac-table .tac-row:hover > td[b-bgy3x7to11] {
    background: rgba(3, 105, 161, 0.05);
}

.tac-scheduler .tac-table .tac-cell-actions[b-bgy3x7to11] {
    text-align: end;
    white-space: nowrap;
}

/* ------------------------------------------------------------- name cell */

.tac-scheduler .tac-identity-text[b-bgy3x7to11] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-scheduler .tac-jobname[b-bgy3x7to11] {
    font-family: var(--tac-body);
    font-weight: 600;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
}

/* The description is context, not a column of its own — it rides under the name
   the way the Agents roster puts the certificate line under the hostname. */
.tac-scheduler .tac-jobdesc[b-bgy3x7to11] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- type chip */

/* site.css draws .task-type as a rounded pastel pill; unwound to the flat chip
   the rest of the language uses. */
.tac-scheduler .tac-type[b-bgy3x7to11] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-scheduler .tac-type-command[b-bgy3x7to11] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-scheduler .tac-type-deployment[b-bgy3x7to11] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

/* A server task runs on the server, not on a device — a distinct colour so the
   roster never reads as if a backup were being pushed to the fleet. */
.tac-scheduler .tac-type-server[b-bgy3x7to11] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-scheduler .tac-type-agent[b-bgy3x7to11] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

/* ------------------------------------------------------------ schedule cell */

.tac-scheduler .tac-schedule[b-bgy3x7to11] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
}

.tac-scheduler .tac-schedule-kind[b-bgy3x7to11] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-scheduler .tac-schedule-detail[b-bgy3x7to11] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-scheduler .tac-target[b-bgy3x7to11] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ status dot+label */

/* The house status convention: a semantic dot next to an uppercase mono label.
   site.css draws .status as a rounded pill, so the pill is unwound here. */
.tac-scheduler .tac-status[b-bgy3x7to11] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    /* MICRO, not label. This badge renders inside a table data cell, where the
       surrounding text is 12-13px. --tac-label-size is the 16px CARD-LABEL role;
       wearing it here made the badge tower over the row it belongs to. Same defect
       fixed on AuditLog - the redesign cloned one badge block onto every page and
       the wrong token came with it. */
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

/* "scheduled" is what GetStatusClass returns for an ACTIVE job — the job is armed
   and will fire, so it reads in the ok colour. */
.tac-scheduler .tac-status-scheduled[b-bgy3x7to11] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-scheduler .tac-status-scheduled .tac-dot[b-bgy3x7to11] { background: var(--tac-ok); }

.tac-scheduler .tac-status-paused[b-bgy3x7to11] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-scheduler .tac-status-paused .tac-dot[b-bgy3x7to11] { background: var(--tac-warn); }

.tac-scheduler .tac-status-completed[b-bgy3x7to11] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-scheduler .tac-status-completed .tac-dot[b-bgy3x7to11] { background: var(--tac-ink3); }

.tac-scheduler .tac-status-cancelled[b-bgy3x7to11] {
    color: var(--tac-crit);
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.07);
}

.tac-scheduler .tac-status-cancelled .tac-dot[b-bgy3x7to11] { background: var(--tac-crit); }

/* -------------------------------------------------------------- row action btns */

.tac-scheduler .tac-actions[b-bgy3x7to11] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of five actions reads as one instrument cluster rather
   than five competing pills. Hover restores the semantic colour. */
.tac-scheduler[b-bgy3x7to11]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-scheduler[b-bgy3x7to11]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-scheduler[b-bgy3x7to11]  .tac-actions .btn.btn-warning:hover:not(:disabled) {
    border-color: var(--tac-warn);
}

.tac-scheduler[b-bgy3x7to11]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-scheduler[b-bgy3x7to11]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-scheduler[b-bgy3x7to11]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* --------------------------------------------------------------- pagination */

.tac-scheduler .tac-pagination[b-bgy3x7to11] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-scheduler .tac-pagination-info[b-bgy3x7to11] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-scheduler .tac-pagination-controls[b-bgy3x7to11] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tac-scheduler .tac-pagebtn[b-bgy3x7to11] {
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
}

.tac-scheduler .tac-pagebtn:hover:not(:disabled)[b-bgy3x7to11] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
    transform: none;
}

.tac-scheduler .tac-pagebtn.active[b-bgy3x7to11] {
    border-color: var(--tac-acc);
    background: var(--tac-acc);
    color: #ffffff;
}

.tac-scheduler .tac-pagebtn:disabled[b-bgy3x7to11] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ calendar */

.tac-scheduler .tac-monthnav[b-bgy3x7to11] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-inline-start: auto;
    min-width: 0;
}

.tac-scheduler .tac-navbtn[b-bgy3x7to11] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tac-scheduler .tac-navbtn:hover[b-bgy3x7to11] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    color: var(--tac-ink0);
}

.tac-scheduler .tac-navbtn:focus-visible[b-bgy3x7to11] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-scheduler .tac-month[b-bgy3x7to11] {
    min-width: 13ch;
    text-align: center;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* Seven columns cannot be squeezed into 375px, and a week that is not seven
   columns is not a calendar — so the grid gets its own scroller. */
.tac-scheduler .tac-calendar-scroll[b-bgy3x7to11] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    padding: 16px;
}

.tac-scheduler .tac-grid[b-bgy3x7to11] {
    display: grid;
    grid-template-columns: repeat(7, minmax(96px, 1fr));
    gap: 1px;
    background: var(--tac-line);
    border: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-scheduler .tac-daylabel[b-bgy3x7to11] {
    padding: 7px 6px;
    text-align: center;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* 1px gaps over a --tac-line ground draw the hairline rules — no per-cell border,
   so no doubled lines and no rounded corners. */
.tac-scheduler .tac-day[b-bgy3x7to11] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 96px;
    min-width: 0;
    padding: 7px;
    border: 0;
    border-radius: 0;
    background: var(--tac-s1);
    cursor: pointer;
    transition: background 0.12s ease;
}

.tac-scheduler .tac-day:hover[b-bgy3x7to11] {
    background: rgba(3, 105, 161, 0.05);
    border: 0;
}

.tac-scheduler .tac-day.other-month[b-bgy3x7to11] {
    background: var(--tac-s2);
}

.tac-scheduler .tac-day.other-month .tac-daynum[b-bgy3x7to11] {
    color: var(--tac-ink3);
    opacity: 0.6;
}

/* Today is marked by an accent tick in the corner, not a 2px frame that shifts
   the whole grid by a pixel. */
.tac-scheduler .tac-day.today[b-bgy3x7to11] {
    background: var(--tac-acc-dim);
    border: 0;
}

.tac-scheduler .tac-day.today[b-bgy3x7to11]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--tac-acc);
    border-left: 2px solid var(--tac-acc);
    pointer-events: none;
}

.tac-scheduler .tac-daynum[b-bgy3x7to11] {
    margin: 0;
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-scheduler .tac-events[b-bgy3x7to11] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tac-scheduler .tac-event[b-bgy3x7to11] {
    display: block;
    padding: 2px 6px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--tac-ink2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.tac-scheduler .tac-event:hover[b-bgy3x7to11] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    transform: none;
    box-shadow: none;
}

.tac-scheduler .tac-event.tac-type-command[b-bgy3x7to11],
.tac-scheduler .tac-event.command[b-bgy3x7to11] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-scheduler .tac-event.tac-type-deployment[b-bgy3x7to11],
.tac-scheduler .tac-event.deployment[b-bgy3x7to11] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-scheduler .tac-event-more[b-bgy3x7to11] {
    border-style: dashed;
    background: none;
    color: var(--tac-ink3);
    font-style: normal;
    cursor: default;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the toolbars stop trying to fit on one line. */
@media (max-width: 1023px) {
    .tac-scheduler .tac-toolbar-controls[b-bgy3x7to11],
    .tac-scheduler .tac-monthnav[b-bgy3x7to11] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-scheduler[b-bgy3x7to11]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }

    .tac-scheduler .tac-filters[b-bgy3x7to11] {
        flex: 1 1 auto;
    }
}

/* Phone: responsive.css turns the table into stacked cards (thead offscreen,
   every td a flex row labelled from data-label). These rules dress THAT layout —
   they must not fight it, so nothing here touches display/position on the table. */
@media (max-width: 767px) {
    .tac-scheduler[b-bgy3x7to11] {
        gap: 12px;
    }

    .tac-scheduler .tac-kpibar[b-bgy3x7to11] {
        /* Two cards per row at phone. minmax(0, 1fr) cannot overflow, so a long
           label ellipsises inside its own card instead of widening the document -
           AssertNoPageOverflow runs at 375px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tac-scheduler .tac-kpi[b-bgy3x7to11] {
        padding: 12px 14px;
    }

    .tac-scheduler .tac-kpi.selected[b-bgy3x7to11] {
        padding-left: 12px;
    }

    .tac-scheduler .tac-opsbar[b-bgy3x7to11] {
        padding: 12px;
        align-items: stretch;
    }

    .tac-scheduler .tac-opsbar-id[b-bgy3x7to11],
    .tac-scheduler .tac-segment[b-bgy3x7to11] {
        width: 100%;
    }

    .tac-scheduler .tac-segment .tac-segment-btn[b-bgy3x7to11] {
        flex: 1 1 0;
        min-height: 44px;
    }

    .tac-scheduler .tac-cta[b-bgy3x7to11] {
        width: 100%;
        min-height: 44px;
    }

    .tac-scheduler .tac-panel .tac-toolbar[b-bgy3x7to11] {
        padding: 12px;
        gap: 10px;
    }

    .tac-scheduler .tac-select[b-bgy3x7to11],
    .tac-scheduler .tac-refresh[b-bgy3x7to11] {
        min-height: 44px;
    }

    /* The card rows come from responsive.css; square them off to match. */
    .tac-scheduler .tac-table .tac-row[b-bgy3x7to11] {
        border-radius: 0;
        border-color: var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-scheduler .tac-table .tac-row > td[b-bgy3x7to11] {
        border-bottom-color: var(--tac-line);
    }

    /* The data-label pseudo-element is the field name in card mode — make it read
       like every other label on the page. */
    .tac-scheduler .tac-table .tac-row > td[b-bgy3x7to11]::before {
        font-family: var(--tac-mono);
        font-size: var(--tac-label-size-sm);
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-scheduler .tac-calendar-scroll[b-bgy3x7to11] {
        padding: 12px;
    }

    .tac-scheduler .tac-grid[b-bgy3x7to11] {
        grid-template-columns: repeat(7, minmax(72px, 1fr));
    }

    .tac-scheduler .tac-day[b-bgy3x7to11] {
        min-height: 76px;
        padding: 5px;
    }

    .tac-scheduler .tac-pagination[b-bgy3x7to11] {
        padding: 10px 12px;
    }

    .tac-scheduler .tac-pagination-controls[b-bgy3x7to11] {
        margin-inline-start: 0;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including
   the loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-scheduler *[b-bgy3x7to11],
    .tac-scheduler[b-bgy3x7to11]  * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- two-line card: label+figure on one row, caption beneath ---------------- */
.tac-scheduler .tac-kpi .tac-kpi-head[b-bgy3x7to11] {
    grid-area: head;
}

.tac-scheduler .tac-kpi .tac-kpi-figure[b-bgy3x7to11] {
    grid-area: figure;
    justify-content: flex-end;
    justify-self: end;
    align-items: baseline;
}

.tac-scheduler .tac-kpi .tac-kpi-foot[b-bgy3x7to11] {
    grid-area: foot;
}

.tac-scheduler .tac-kpi .tac-kpi-value[b-bgy3x7to11] {
    /* The figure is the point of the card, so it leads. It was reading SMALLER than
       its own 16px label, which inverted the hierarchy. */
    font-size: var(--tac-stat-value-size);
    line-height: 1;
}
/* _content/Athena.Server/Pages/ScheduleTask.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops scheduling console — Pages/ScheduleTask.razor.

   No artboard exists for this screen in Mock/tactical-ops/ (the folder holds
   login, dashboard, agents and report-builder only), so every value below is
   taken from the shipped reference implementations — Login.razor.css,
   Dashboard.razor.css, Agents.razor.css and ExecuteCommand.razor.css — rather
   than invented. Consistency with what already ships beats novelty here.

   Scoped to ScheduleTask.razor. The design tokens (--tac-*) are NOT declared
   here — they live on :root in wwwroot/css/tactical-tokens.css, linked first in
   _Host, so every tactical-ops page shares one source of truth.

   ── THREE RULES THIS SHEET MUST NOT BREAK ─────────────────────────────────────

   1. NOTHING here may name a bare shared selector. .form-section,
      .section-header, .form-group, .form-input, .form-select, .btn /
      .btn-primary / .btn-secondary, .page-header and friends are shared with
      dozens of other pages and their rules stay in site.css as dead weight for
      the final sweep. Every element therefore carries a NEW .tac-* twin and
      every selector below hangs off one. The legacy classes stay on the markup
      because SchedulerPageTests and AgentSelectorComponentTests select on them
      (see the comment block in the .razor).

   2. AgentSelector and CronBuilder are SHARED CHILD COMPONENTS — AgentSelector
      is used by Alerts, DeployPackage, ExecuteCommand and three Settings
      sections; CronBuilder by the scheduler-history settings section. Their DOM
      never carries this component's scope attribute, so the handful of rules
      that stop their rounded, gradient chrome from fighting the tactical panel
      go through ::deep from a .tac-* ancestor that does — exactly as
      Login.razor.css does for input.form-control. Those rules are deliberately
      cosmetic-only and apply ONLY inside this page's scope.

   3. Nothing may make the document scroll sideways. The two-up grid collapses
      to one column at 1023px (before the shell's own tablet breakpoint), the
      card grids are auto-fit, and the cron builder gets its own horizontal
      overflow container so its wide control row cannot push the page.
   ============================================================================ */

.tac-schedule[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- shared type/atoms */

.tac-num[b-6x7sac7lez] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-lbl[b-6x7sac7lez],
.tac-eyebrow[b-6x7sac7lez] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-eyebrow[b-6x7sac7lez] {
    color: var(--tac-acc);
}

.tac-dot[b-6x7sac7lez] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--tac-ink3);
}

.tac-dot.ok[b-6x7sac7lez] { background: var(--tac-ok); }
.tac-dot.info[b-6x7sac7lez] { background: var(--tac-acc); }
.tac-dot.warn[b-6x7sac7lez] { background: var(--tac-warn); }
.tac-dot.off[b-6x7sac7lez] { background: var(--tac-ink3); }

.tac-note[b-6x7sac7lez] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-ink3);
}

/* The required marker is a mono tick of accent, not a red shout. */
.tac-req[b-6x7sac7lez] {
    font-family: var(--tac-mono);
    color: var(--tac-acc);
}

/* --------------------------------------------------------------- page header */

.tac-pagehead[b-6x7sac7lez] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-pagehead-id[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* A quiet, sharp-cornered back control — the rounded pill from site.css is unwound. */
.tac-back[b-6x7sac7lez] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tac-back:hover[b-6x7sac7lez] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
}

.tac-back:focus-visible[b-6x7sac7lez] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-back-icon[b-6x7sac7lez] {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-pagehead-text[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* h2, not h1 — MainLayout renders the page's only <h1> ("Scheduler") from
   GetPageTitle(). */
.tac-pagetitle[b-6x7sac7lez] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-pagesub[b-6x7sac7lez] {
    margin: 0;
    max-width: 60ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

/* The readiness read-out mirrors IsFormValid — the same expression that gates the
   Save button, so the light can never disagree with the control. */
.tac-readiness[b-6x7sac7lez] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-line2);
    background: var(--tac-s2);
    white-space: nowrap;
}

.tac-readiness-value[b-6x7sac7lez] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* ---------------------------------------------------------------------- form */

/* EditForm is a child component, so its <form> never carries this scope. */
.tac-schedule[b-6x7sac7lez]  form.tac-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    min-width: 0;
}

.tac-grid[b-6x7sac7lez] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tac-col[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* -------------------------------------------------------------------- panels */

.tac-panel[b-6x7sac7lez] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    overflow: visible;
}

/* Bracket ticks — the signature of a tactical-ops panel. */
.tac-panel[b-6x7sac7lez]::before,
.tac-panel[b-6x7sac7lez]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-panel[b-6x7sac7lez]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-panel[b-6x7sac7lez]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-6x7sac7lez] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

.tac-panel-head[b-6x7sac7lez] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 14px 18px 12px;
    min-width: 0;
    background: none;
    border: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.tac-panel-head-ruled[b-6x7sac7lez] {
    border-bottom: 1px solid var(--tac-line);
}

/* The 01..04 build order replaces the emoji that used to head each section. */
.tac-panel-index[b-6x7sac7lez] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid var(--tac-line2);
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

.tac-panel-title[b-6x7sac7lez] {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

/* The live count of chosen targets, trailing the panel title. */
.tac-panel-count[b-6x7sac7lez] {
    margin-left: auto;
    font-size: var(--tac-fs-label);
    font-weight: 600;
    color: var(--tac-ink0);
}

.tac-panel-body[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px 16px;
    min-width: 0;
}

/* The target panel hands its whole body to AgentSelector, which brings its own
   internal padding. */
.tac-panel-body-flush[b-6x7sac7lez] {
    padding: 0;
}

/* ----------------------------------------------------------- task categories */

.tac-group[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

/* The server-task block is set off by a rule, not by a second card. */
.tac-group + .tac-group[b-6x7sac7lez] {
    padding-top: 14px;
    border-top: 1px solid var(--tac-line);
}

.tac-group-head[b-6x7sac7lez] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
}

/* "Admin only" is a state flag, so it reads in mono like every other state label. */
.tac-flag[b-6x7sac7lez] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border: 1px solid rgba(3, 105, 161, 0.4);
    border-radius: 0;
    background: var(--tac-acc-dim);
    color: var(--tac-acc-deep);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------- cards */

.tac-cards[b-6x7sac7lez] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* The three schedule types are one compact row that wraps rather than a grid of
   equal blocks. */
.tac-cards-row[b-6x7sac7lez] {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.tac-card[b-6x7sac7lez] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.tac-card:hover[b-6x7sac7lez] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    transform: none;
    box-shadow: none;
}

.tac-card.selected[b-6x7sac7lez] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

.tac-card:focus-visible[b-6x7sac7lez] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-card .tac-dot[b-6x7sac7lez] {
    margin-top: 5px;
}

.tac-card-compact[b-6x7sac7lez] {
    align-items: center;
    justify-content: flex-start;
    padding: 9px 12px;
}

.tac-card-compact .tac-dot[b-6x7sac7lez] {
    margin-top: 0;
}

.tac-card-text[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-card-name[b-6x7sac7lez] {
    display: block;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

.tac-card.selected .tac-card-name[b-6x7sac7lez] {
    color: var(--tac-ink0);
}

.tac-card-hint[b-6x7sac7lez] {
    display: block;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    line-height: 1.4;
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------------- fields */

.tac-field[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.tac-label[b-6x7sac7lez] {
    display: block;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* InputText / InputTextArea / InputSelect / InputDate / InputNumber are child
   components, so their DOM never carries this scope — reach them with ::deep,
   exactly as Login.razor.css does for input.form-control. The bare <input
   type="time"> IS in scope, hence the duplicated non-::deep rules. */
.tac-schedule input.tac-input[b-6x7sac7lez],
.tac-schedule[b-6x7sac7lez]  input.tac-input,
.tac-schedule[b-6x7sac7lez]  textarea.tac-input,
.tac-schedule[b-6x7sac7lez]  select.tac-select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-schedule[b-6x7sac7lez]  textarea.tac-textarea {
    height: auto;
    min-height: 62px;
    padding: 9px 12px;
    line-height: 1.5;
    resize: vertical;
}

.tac-schedule input.tac-input:hover[b-6x7sac7lez],
.tac-schedule[b-6x7sac7lez]  input.tac-input:hover,
.tac-schedule[b-6x7sac7lez]  textarea.tac-input:hover,
.tac-schedule[b-6x7sac7lez]  select.tac-select:hover {
    background: var(--tac-s1);
}

.tac-schedule input.tac-input:focus[b-6x7sac7lez],
.tac-schedule[b-6x7sac7lez]  input.tac-input:focus,
.tac-schedule[b-6x7sac7lez]  textarea.tac-input:focus,
.tac-schedule[b-6x7sac7lez]  select.tac-select:focus {
    outline: none;
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    /* site.css puts a 3px blue glow on any focused control; here it reads as a
       second border inside the field frame. The frame itself is the affordance. */
    box-shadow: none;
}

.tac-schedule input.tac-input:focus-visible[b-6x7sac7lez],
.tac-schedule[b-6x7sac7lez]  input.tac-input:focus-visible,
.tac-schedule[b-6x7sac7lez]  textarea.tac-input:focus-visible,
.tac-schedule[b-6x7sac7lez]  select.tac-select:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-schedule input.tac-input[b-6x7sac7lez]::placeholder,
.tac-schedule[b-6x7sac7lez]  input.tac-input::placeholder,
.tac-schedule[b-6x7sac7lez]  textarea.tac-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

.tac-schedule[b-6x7sac7lez]  .validation-message {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    color: var(--tac-crit);
}

/* ------------------------------------------------------------ schedule options */

.tac-options[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--tac-line);
    background: none;
}

.tac-row[b-6x7sac7lez] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    min-width: 0;
    margin: 0;
}

/* CronBuilder is a SHARED component with its own wide control row; give it a
   private horizontal scroller so it can never widen the document. */
.tac-options-cron[b-6x7sac7lez] {
    overflow-x: auto;
}

/* -------------------------------------------------------------- server notice */

.tac-notice[b-6x7sac7lez] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid rgba(3, 105, 161, 0.35);
    border-radius: 0;
    background: var(--tac-acc-dim);
    min-width: 0;
}

.tac-notice-icon[b-6x7sac7lez] {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 1px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-notice-text[b-6x7sac7lez] {
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink2);
    min-width: 0;
}

/* -------------------------------------------------------------- summary rail */

/* Not a .form-section on purpose — SchedulerPageTests resolves `.form-section`
   filtered by the text "Target" under Playwright strict mode, and this rail
   names "Target Agents". */
.tac-panel-summary[b-6x7sac7lez] {
    min-width: 0;
}

.tac-summary-body[b-6x7sac7lez] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    align-items: start;
    gap: 16px;
    padding: 16px 18px;
    min-width: 0;
}

.tac-summary[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s2);
    min-width: 0;
}

.tac-summary-row[b-6x7sac7lez] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--tac-line);
    min-width: 0;
}

.tac-summary-row:last-child[b-6x7sac7lez] {
    border-bottom: 0;
}

.tac-summary-row dt[b-6x7sac7lez] {
    margin: 0;
}

.tac-summary-value[b-6x7sac7lez] {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tac-summary-value.tac-num[b-6x7sac7lez] {
    font-weight: 500;
}

.tac-summary-side[b-6x7sac7lez] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.tac-summary-side-label[b-6x7sac7lez] {
    display: block;
}

/* The blocker line states the FIRST unmet prerequisite — the same condition the
   disabled Save button is disabled for. */
.tac-blocker[b-6x7sac7lez] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.04em;
    text-align: left;
}

/* ------------------------------------------------------------------- actions */

.tac-actions[b-6x7sac7lez] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    min-width: 0;
    background: none;
    border: 0;
}

.tac-btn[b-6x7sac7lez] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tac-btn:hover:not(:disabled)[b-6x7sac7lez] {
    background: var(--tac-s1);
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-btn:focus-visible[b-6x7sac7lez] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-btn-primary[b-6x7sac7lez] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-btn-primary:hover:not(:disabled)[b-6x7sac7lez] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-btn:disabled[b-6x7sac7lez] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-btn-icon[b-6x7sac7lez] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -------------------------------------------------- child components (::deep) */

/* AgentSelector is SHARED (Alerts, DeployPackage, ExecuteCommand and three
   Settings sections), so it is not converted here. These rules only stop its
   rounded, blue-gradient chrome from fighting the tactical panel it now sits
   inside, and they apply ONLY within this page's scope. */
.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--tac-body);
}

.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-tab,
.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-search input,
.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-filter select,
.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-item,
.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-collection-item {
    border-radius: 0;
}

.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-tab {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-tab.active {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-ip,
.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-version,
.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-selected-count,
.tac-panel-body-flush[b-6x7sac7lez]  .agent-selector-collection-details {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

/* CronBuilder is SHARED with the scheduler-history settings section, so it is
   not converted either — only unrounded and re-typed inside this page. */
.tac-options-cron[b-6x7sac7lez]  .cron-builder,
.tac-options-cron[b-6x7sac7lez]  .cron-builder-toggle .toggle-btn,
.tac-options-cron[b-6x7sac7lez]  .cron-input,
.tac-options-cron[b-6x7sac7lez]  .cron-field select,
.tac-options-cron[b-6x7sac7lez]  .cron-field input,
.tac-options-cron[b-6x7sac7lez]  .cron-preview,
.tac-options-cron[b-6x7sac7lez]  .cron-example {
    border-radius: 0;
}

.tac-options-cron[b-6x7sac7lez]  .cron-builder-toggle .toggle-btn,
.tac-options-cron[b-6x7sac7lez]  .cron-field label {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-options-cron[b-6x7sac7lez]  .cron-input,
.tac-options-cron[b-6x7sac7lez]  .cron-expression-display {
    font-family: var(--tac-mono);
}

/* --------------------------------------------------------------- responsive */

/* The two-up grid has to collapse before the shell's own tablet breakpoint,
   otherwise the two form columns plus the sidebar overflow the viewport. */
@media (max-width: 1023px) {
    .tac-grid[b-6x7sac7lez] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-summary-body[b-6x7sac7lez] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-pagetitle[b-6x7sac7lez] {
        font-size: 20px;
    }

    .tac-readiness[b-6x7sac7lez] {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .tac-schedule[b-6x7sac7lez] {
        gap: 12px;
    }

    .tac-panel-head[b-6x7sac7lez] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-panel-body[b-6x7sac7lez] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tac-panel-body-flush[b-6x7sac7lez] {
        padding: 0;
    }

    .tac-summary-body[b-6x7sac7lez] {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* One card per row: two 210px columns plus the shell gutters do not fit a
       phone, and a squeezed grid is what makes a page scroll sideways. */
    .tac-cards[b-6x7sac7lez],
    .tac-cards-row[b-6x7sac7lez] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tac-actions .tac-btn[b-6x7sac7lez] {
        flex: 1 1 auto;
    }

    .tac-summary-row[b-6x7sac7lez] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .tac-summary-value[b-6x7sac7lez] {
        text-align: left;
    }
}

/* Honour reduced-motion: the only transitions here are hover/focus washes, but
   kill them anyway so nothing animates for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
    .tac-schedule *[b-6x7sac7lez],
    .tac-schedule[b-6x7sac7lez]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/Settings.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops configuration console — Pages/Settings.razor.

   Mock/tactical-ops/ has no settings artboard, so this sheet DERIVES the look
   from the shipped conversions (Login, Dashboard, Agents) rather than inventing
   a second dialect: mono eyebrow, Chakra Petch title, sharp corners, deep-blue
   #0369a1 accent, one bracket-ticked panel with a scan line.

   The design tokens (--tac-*) are NOT declared here — they live on :root in
   wwwroot/css/tactical-tokens.css, linked first in _Host. This sheet only
   consumes them.

   ── THREE RULES THIS SHEET MUST NOT BREAK ─────────────────────────────────────

   1. NOTHING here may name a bare shared selector. `.content-card`, `.card-title`,
      `.card-header`, `.status`, `.table`, `.data-table`, `.progress-bar`, `.btn`,
      `.form-control`, `.form-group`, `.modal` and friends are shared with up to
      41 other pages; site.css keeps them and a single later sweep removes this
      page's dead rules from site.css. Every rule below hangs off a `tac-*` name
      (or off `.settings-page` / `.settings-content` / `.settings-tabs`, which are
      THIS page's own names and only ever qualified by a tac-* ancestor).

   2. responsive.css owns the phone/tablet tab behaviour off bare `.settings-tabs`
      (flex-wrap: nowrap + overflow-x: auto at phone, 44px touch targets at
      tablet). A ::deep rule from this sheet carries the page's [b-xxxxx] scope
      attribute and would OUT-SPECIFY those. So `.tac-tabs` declares the same
      nowrap + overflow-x: auto at EVERY width — the strip is a horizontal
      scroller by design, which is also what keeps AssertNoPageOverflow happy
      with eight tabs at 400px.

   3. SettingsTabNavigation is a child component: its DOM never carries this
      component's scope attribute, so those rules go through ::deep from an
      ancestor that does — exactly as Login.razor.css does for input.form-control.
      The tab bodies (GeneralTab, SecurityTab, …) are child components too and are
      deliberately NOT reached into: they are converted on their own, not from here.
   ============================================================================ */

.tac-settings[b-sldeyg7dbf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;

    /* site.css gives .settings-page a second 24px gutter inside .main-content's
       30px one. One gutter is enough, and every other tactical-ops page has
       exactly one. max-width/margin stay as they were. */
    padding: 0;
}

/* --------------------------------------------------------------- page header */

.tac-settings .tac-pagehead[b-sldeyg7dbf] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 0;
    min-width: 0;
}

.tac-pagehead-id[b-sldeyg7dbf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tac-eyebrow[b-sldeyg7dbf] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* h2, not h1 — MainLayout renders the page's only <h1>. */
.tac-pagetitle[b-sldeyg7dbf] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

/* ------------------------------------------------------------ restart notice */

/* Amber-on-flat, sharp corners: site.css's rounded #fef3c7 pill reads as a
   different product next to the panel. */
.tac-settings .tac-restart[b-sldeyg7dbf] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(180, 83, 9, 0.4);
    border-radius: 0;
    background: rgba(180, 83, 9, 0.07);
    color: var(--tac-warn);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tac-restart-mark[b-sldeyg7dbf] {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------- note */

.tac-settings .tac-note[b-sldeyg7dbf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--tac-line);
    border-left: 2px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-acc-dim);
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
    line-height: 1.5;
}

.tac-note-mark[b-sldeyg7dbf] {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 2px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
}

/* ------------------------------------------------------------------ tab strip */

/* SettingsTabNavigation is a child component — reach it through ::deep. */
.tac-settings[b-sldeyg7dbf]  .tac-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 1px solid var(--tac-line);
}

.tac-settings[b-sldeyg7dbf]  .tac-tabs::-webkit-scrollbar {
    display: none;
}

.tac-settings[b-sldeyg7dbf]  .tac-tab {
    flex: none;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    background: none;
    color: var(--tac-ink3);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tac-settings[b-sldeyg7dbf]  .tac-tab:hover {
    color: var(--tac-ink0);
    background: var(--tac-s2);
}

.tac-settings[b-sldeyg7dbf]  .tac-tab:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: -2px;
}

.tac-settings[b-sldeyg7dbf]  .tac-tab.active {
    color: var(--tac-acc);
    border-bottom-color: var(--tac-acc);
    background: var(--tac-s1);
}

/* --------------------------------------------------------------------- panel */

/* The one bracket-ticked panel on the page. `.settings-content` keeps its name
   for the E2E hooks; every visual property is set from the tac-* twin. */
.tac-settings .tac-panel[b-sldeyg7dbf] {
    position: relative;
    min-width: 0;
    border: 1px solid var(--tac-line);
    border-radius: 0;
    background: var(--tac-s1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Bracket ticks — the signature of the tactical-ops panel. */
.tac-settings .tac-panel[b-sldeyg7dbf]::before,
.tac-settings .tac-panel[b-sldeyg7dbf]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-settings .tac-panel[b-sldeyg7dbf]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-settings .tac-panel[b-sldeyg7dbf]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-scan[b-sldeyg7dbf] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

/* --------------------------------------------------------------- loading state */

.tac-settings .tac-state[b-sldeyg7dbf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 20px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
}

.tac-settings .tac-spinner[b-sldeyg7dbf] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-settings-spin-b-sldeyg7dbf 0.8s linear infinite;
}

@keyframes tac-settings-spin-b-sldeyg7dbf {
    to { transform: rotate(360deg); }
}

.tac-state-text[b-sldeyg7dbf] {
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* --------------------------------------------------------------- responsive */

/* Below the tablet breakpoint the header stacks and the restart badge drops to
   its own row rather than squeezing the title. Nothing here touches a bare
   selector responsive.css owns. */
@media (max-width: 1023px) {
    .tac-settings[b-sldeyg7dbf] {
        gap: 14px;
    }

    .tac-settings .tac-pagehead[b-sldeyg7dbf] {
        align-items: flex-start;
    }

    .tac-settings .tac-restart[b-sldeyg7dbf] {
        margin-left: 0;
        white-space: normal;
    }
}

@media (max-width: 560px) {
    .tac-pagetitle[b-sldeyg7dbf] {
        font-size: 20px;
    }

    .tac-settings .tac-note[b-sldeyg7dbf] {
        padding: 9px 11px;
        font-size: 12px;
    }

    .tac-settings[b-sldeyg7dbf]  .tac-tab {
        padding: 10px 12px;
        letter-spacing: 0.1em;
    }
}

/* Honour reduced-motion — including the loading spinner, which is the only
   thing on this page that animates on its own. */
@media (prefers-reduced-motion: reduce) {
    .tac-settings *[b-sldeyg7dbf],
    .tac-settings[b-sldeyg7dbf]  * {
        transition: none !important;
        animation: none !important;
    }
}
/* _content/Athena.Server/Pages/Users.razor.rz.scp.css */
/* ============================================================================
   Tactical-ops Users roster.

   There is NO Mock/tactical-ops artboard for this screen (the folder ships login,
   dashboard, agents and report-builder only), so the language is DERIVED from the
   shipped conversions — Pages/Login.razor.css and Pages/Agents.razor.css. Same
   bracket-ticked panel, same mono chip bar, same dot+label status convention, same
   flat square controls. Consistency with those pages is the contract.

   Scoped to Users.razor. The design tokens (--tac-*) are NOT declared here — they
   live on :root in wwwroot/css/tactical-tokens.css, linked first in _Host, so every
   tactical-ops page shares one source of truth.

   WHY EVERY RULE HANGS OFF A .tac-* CLASS
   ---------------------------------------
   This page is built almost entirely out of class names site.css shares with up to
   41 other screens (.stats-bar, .stat-item, .status-badge, .btn, .form-control,
   .form-group, .modal-*, .table ...). Blazor scoping alone would stop a bare
   `.btn { }` rule leaking off this page, but it would still fight site.css ON this
   page in ways invisible from the other 40. So the markup carries a NEW .tac-* class
   next to every legacy one, and every selector below hangs off a .tac-* name. The
   legacy classes stay on the elements untouched because UsersPageTests (Playwright),
   UsersPageProviderTests (bUnit) and site.css all select on them — see the comment
   block at the top of Users.razor.

   Scoped stylesheets load from Athena.Server.styles.css, i.e. AFTER site.css, so an
   equal-specificity .tac-* rule wins on source order. Where site.css is more specific
   (e.g. `.stat-item.stat-item-offline .stat-icon`) the rule below is deliberately
   written long enough to outrank it.

   SearchBar and ActionButton are child components: their DOM never carries this
   component's scope attribute, so those rules go through ::deep from a .tac-*
   ancestor that does — exactly as Login.razor.css reaches `input.form-control`.
   ============================================================================ */

.tac-users[b-197iscqlrg] {
    font-family: var(--tac-body);
    color: var(--tac-ink);
    font-size: var(--tac-fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The roster must never be the reason the document scrolls sideways —
       Responsive/*BreakpointTests assert zero page overflow at 375/768/1280/1920. */
    min-width: 0;
    max-width: 100%;
}

/* ------------------------------------------------------------------ shared bits */

/* Bracket ticks: the signature of a tactical-ops panel. */
.tac-users .tac-panel[b-197iscqlrg] {
    position: relative;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tac-users .tac-panel[b-197iscqlrg]::before,
.tac-users .tac-panel[b-197iscqlrg]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.tac-users .tac-panel[b-197iscqlrg]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-users .tac-panel[b-197iscqlrg]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-users .tac-scan[b-197iscqlrg] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 105, 161, 0.45), transparent);
    pointer-events: none;
}

/* Every count, address and timestamp on this page is mono and tabular so columns of
   digits line up vertically. */
.tac-users .tac-num[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
}

.tac-users .tac-dot[b-197iscqlrg] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--tac-ink3);
}

/* ---------------------------------------------------------- KPI card stat bar */

/* ONE card treatment for the whole app.

   This is the Dashboard's KPI tile (Pages/Dashboard.razor.css - the reference, and
   NOT edited by this change) lifted across: the same 1px hairline on --tac-s1, the
   same 9px bracket ticks, the same head / figure / foot rhythm, and the same
   ok | warn | crit | info | off dot vocabulary. The compact chip bar that used to
   live here is gone; the app no longer has two card treatments.

   What the Dashboard rail does NOT have - because its tiles are passive read-outs -
   is a pressed state. These cards ARE the page's filter, so the affordance is
   carried over from the chip bar they replace: a left accent border plus an inset
   ring on .selected, an accent hairline and surface wash on hover, and
   role="button" + tabindex="0" in the markup so a card is reachable and operable
   from the keyboard. A card that looks passive but filters on click would be worse
   than the chip it replaced.

   EVERY font-size below comes from a token in wwwroot/css/tactical-tokens.css
   (--tac-label-size / --tac-label-size-sm / --tac-stat-value-size). Nine pages each
   deciding for themselves what a stat count is worth - 18px on /credentials, 14px on
   /agents - is exactly what this block exists to end.

   Nothing here restyles a bare shared selector: the stat-item / stat-icon /
   stat-content / stat-label / stats-bar names stay on the markup as the Playwright and
   bUnit hooks they are, and are only ever reached THROUGH a .tac-* class.

   The .tac-chip* names stay on the markup too, and nothing styles them any more: nine
   bUnit suites select .tac-chipbar / .tac-chip / .tac-chip-count / .tac-chip-label /
   .tac-chip-readout, so after the conversion they are selector hooks exactly like the
   site.css names beside them. */

.tac-users .tac-kpibar[b-197iscqlrg] {
    display: grid;
    /* min() so a track can never be wider than the bar itself. A bare 190px minimum
       pushes the DOCUMENT sideways at 375px, and AssertNoPageOverflow runs there. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.tac-users .tac-kpi[b-197iscqlrg] {
    position: relative;
    /* LOAD-BEARING. shell.css:489 declares a bare stat-content as flex-direction:column,
       and site.css:368 makes a bare stat-item a centred flex ROW. A container that
       sets display:flex without saying which way it runs inherits whichever of those
       reaches it and stacks - or in-lines - its children by accident; that is the bug
       that put the dot on top of the Agents chip. Every flex container in this block
       states its direction explicitly. */
    /* TWO LINES, number on the right:
           row 1  label + dot ............ figure
           row 2  caption (spans both columns)
       A grid rather than the old three stacked rows, so the figure can sit beside
       the label instead of under it and the card loses a line without losing data. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head figure"
        "foot foot";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Bracket ticks - the signature of the tactical-ops panel, the same 9px corner pair
   the Dashboard tile draws. */
.tac-users .tac-kpi[b-197iscqlrg]::before,
.tac-users .tac-kpi[b-197iscqlrg]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-users .tac-kpi[b-197iscqlrg]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-users .tac-kpi[b-197iscqlrg]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

/* The filter states the Dashboard tile has no need for. */

.tac-users .tac-kpi-filter[b-197iscqlrg] {
    cursor: pointer;
}

.tac-users .tac-kpi-filter:hover[b-197iscqlrg] {
    background: var(--tac-s2);
    border-color: var(--tac-acc);
    /* site.css:382 lifts a bare stat-item 2px on hover. A card bouncing under the
       pointer is noise, so the surface wash IS the hover. */
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.tac-users .tac-kpi-filter:focus-visible[b-197iscqlrg] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* The pressed state. Declared AFTER :hover on purpose - same specificity, so the
   later rule wins and a selected card keeps reading as selected under the pointer.
   padding-left gives back the 2px the border takes, so the label does not shift when
   a card is picked. */
.tac-users .tac-kpi.selected[b-197iscqlrg] {
    background: var(--tac-s1);
    border-color: var(--tac-line2);
    border-left: 3px solid var(--tac-acc);
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.12);
}

/* A read-out is not a filter and must not look like one. */
.tac-users .tac-kpi-readout[b-197iscqlrg] {
    cursor: default;
}

/* Head / figure / foot. */

.tac-users .tac-kpi .tac-kpi-head[b-197iscqlrg] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    /* site.css:444 gives a bare stat-content flex:1; inside a column card that would
       make the head eat the space the figure and foot need. */
    flex: none;
}

.tac-users .tac-kpi .tac-lbl[b-197iscqlrg] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    /* 0.14em is the mock's tracking; at 16px it widens a label like
       "MAINTENANCE MODE" far enough to force a second grid row on a laptop. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-users .tac-kpi.selected .tac-lbl[b-197iscqlrg] {
    color: var(--tac-ink);
}

.tac-users .tac-kpi .tac-kpi-head .tac-dot[b-197iscqlrg] {
    margin-left: auto;
    /* Never let a stray align-items:stretch pull the dot off the head's centre
       line - that is what read as "the dot is stuck on the top of the card". */
    align-self: center;
}

.tac-users .tac-kpi .tac-kpi-figure[b-197iscqlrg] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* The count. site.css:392 paints a bare stat-icon as a 48-60px gradient circle; here
   it is a number, so the whole badge treatment is unwound. Four classes deep so it
   outranks the two-class site.css:6289 rule that paints the maintenance counter. */
.tac-users .tac-kpibar .tac-kpi .tac-kpi-value[b-197iscqlrg] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tac-ink0);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-stat-value-size);
    font-weight: 600;
    line-height: 1;
}

.tac-users .tac-kpi .tac-kpi-foot[b-197iscqlrg] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* The dot vocabulary, verbatim from the Dashboard rail. */
.tac-users .tac-kpi .tac-dot.ok[b-197iscqlrg] { background: var(--tac-ok); }
.tac-users .tac-kpi .tac-dot.warn[b-197iscqlrg] { background: var(--tac-warn); }
.tac-users .tac-kpi .tac-dot.crit[b-197iscqlrg] { background: var(--tac-crit); }
.tac-users .tac-kpi .tac-dot.info[b-197iscqlrg] { background: var(--tac-acc); }
.tac-users .tac-kpi .tac-dot.off[b-197iscqlrg] { background: var(--tac-ink3); }

/* ------------------------------------------------------------------- container */

.tac-users .tac-roster[b-197iscqlrg] {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* --------------------------------------------------------------------- toolbar */

.tac-users .tac-toolbar[b-197iscqlrg] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-users .tac-toolbar-title[b-197iscqlrg] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-users .tac-toolbar-count[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tac-acc);
}

/* Only shown while a search narrows the roster: "of 42". */
.tac-users .tac-toolbar-of[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-users .tac-toolbar-controls[b-197iscqlrg] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* SearchBar is a child component. */
.tac-users[b-197iscqlrg]  .search-bar {
    height: 34px;
    width: 280px;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-users[b-197iscqlrg]  .search-bar:focus-within {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
}

.tac-users[b-197iscqlrg]  .search-bar .search-input {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-users[b-197iscqlrg]  .search-bar .search-input::placeholder {
    color: var(--tac-ink3);
    opacity: 0.8;
}

.tac-users[b-197iscqlrg]  .search-bar .search-icon {
    font-size: var(--tac-fs-micro);
    opacity: 0.7;
    filter: grayscale(1);
}

.tac-users[b-197iscqlrg]  .search-bar .clear-search,
.tac-users[b-197iscqlrg]  .search-bar .search-help-btn {
    border-radius: 0;
    font-family: var(--tac-mono);
}

/* The one primary action on the page. Kept as .btn.btn-primary WITHOUT .btn-icon —
   UsersPageProviderTests finds the per-row Edit action as `button.btn-icon.btn-primary`
   and that selector only stays unambiguous while this button has no .btn-icon. */
.tac-users .tac-newuser[b-197iscqlrg],
.tac-users .tac-statebtn[b-197iscqlrg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--tac-acc);
    border-radius: 0;
    background: var(--tac-acc);
    color: #ffffff;
    font-family: var(--tac-body);
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tac-users .tac-newuser:hover:not(:disabled)[b-197iscqlrg],
.tac-users .tac-statebtn:hover:not(:disabled)[b-197iscqlrg] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

.tac-users .tac-newuser:focus-visible[b-197iscqlrg],
.tac-users .tac-statebtn:focus-visible[b-197iscqlrg] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-users .tac-btn-icon[b-197iscqlrg] {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ------------------------------------------------------------ loading / empty */

.tac-users .tac-state[b-197iscqlrg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    text-align: center;
    background: none;
    border: 0;
}

.tac-users .tac-state h3[b-197iscqlrg] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
}

.tac-users .tac-state p[b-197iscqlrg] {
    margin: 0;
    max-width: 46ch;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-meta);
}

.tac-users .tac-state-eyebrow[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tac-acc);
}

/* A line-art mark instead of the 👥 emoji. */
.tac-users .tac-state-mark[b-197iscqlrg] {
    width: 46px;
    height: 46px;
    stroke: var(--tac-acc);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.tac-users .tac-spinner[b-197iscqlrg] {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tac-line2);
    border-top-color: var(--tac-acc);
    border-radius: 50%;
    animation: tac-users-spin-b-197iscqlrg 0.9s linear infinite;
}

@keyframes tac-users-spin-b-197iscqlrg {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------- table */

/* Eight columns. responsive.css ships a phone card layout for .agents-table and
   .audit-table but NOT for .users-table, so this page owns both halves: an
   overflow-x container at every width (belt and braces against a wide roster pushing
   the document sideways) and its own card restack below 767px, further down. */
.tac-users .tac-tablewrap[b-197iscqlrg] {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tac-users .tac-table[b-197iscqlrg] {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font-size: var(--tac-fs-meta);
}

.tac-users .tac-table .tac-th[b-197iscqlrg] {
    text-align: start;
    padding: 9px 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

.tac-users .tac-table .tac-th-actions[b-197iscqlrg] {
    text-align: end;
}

.tac-users .tac-table .tac-row > td[b-197iscqlrg] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tac-line);
    vertical-align: middle;
    color: var(--tac-ink);
}

.tac-users .tac-table .tac-row:last-child > td[b-197iscqlrg] {
    border-bottom: 0;
}

.tac-users .tac-table .tac-row[b-197iscqlrg] {
    background: none;
    transition: background 0.12s ease;
}

.tac-users .tac-table .tac-row:hover > td[b-197iscqlrg] {
    background: rgba(3, 105, 161, 0.05);
}

/* A disabled account is DIMMED, not painted red. The amber dot in its status cell is
   the only thing that should pull the eye. */
.tac-users .tac-table .tac-row-disabled > td[b-197iscqlrg] {
    color: var(--tac-ink3);
    background: none;
    opacity: 0.85;
}

.tac-users .tac-table .tac-row-disabled:hover > td[b-197iscqlrg] {
    background: rgba(3, 105, 161, 0.04);
    opacity: 1;
}

.tac-users .tac-table .tac-cell-actions[b-197iscqlrg] {
    text-align: end;
    white-space: nowrap;
}

/* ---------------------------------------------------------- identity cell */

.tac-users .tac-identity[b-197iscqlrg] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* site.css draws .user-avatar as a coloured circle; the tactical mark is a square
   hairline monogram in mono, so it reads as an identifier rather than a portrait —
   which is honest, because Athena stores no avatar image for an account. */
.tac-users .tac-monogram[b-197iscqlrg] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tac-users .tac-row-disabled .tac-monogram[b-197iscqlrg] {
    color: var(--tac-ink3);
    border-style: dashed;
}

.tac-users .tac-username[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-meta);
    font-weight: 500;
    color: var(--tac-ink0);
    overflow-wrap: anywhere;
    min-width: 0;
}

.tac-users .tac-row-disabled .tac-username[b-197iscqlrg] {
    color: var(--tac-ink2);
}

.tac-users .tac-email[b-197iscqlrg] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink2);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- provider + status dot chips */

/* The dot+label convention. site.css draws .status-badge as a rounded pill; the pill
   is unwound here so provider and status read as instruments, not tags. */
.tac-users .tac-provider[b-197iscqlrg],
.tac-users .tac-userstatus[b-197iscqlrg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-users .tac-provider-local[b-197iscqlrg] {
    color: var(--tac-ink2);
    border-color: var(--tac-line2);
    background: var(--tac-s2);
}

.tac-users .tac-provider-local .tac-dot[b-197iscqlrg] { background: var(--tac-ink3); }

/* An externally-owned account (LDAP / Keycloak) is accent-marked: it is the signal
   that this row's password and lifecycle live somewhere else. */
.tac-users .tac-provider-directory[b-197iscqlrg] {
    color: var(--tac-acc);
    border-color: rgba(3, 105, 161, 0.4);
    background: var(--tac-acc-dim);
}

.tac-users .tac-provider-directory .tac-dot[b-197iscqlrg] { background: var(--tac-acc); }

.tac-users .tac-userstatus-active[b-197iscqlrg] {
    color: var(--tac-ok);
    border-color: rgba(21, 128, 61, 0.4);
    background: rgba(21, 128, 61, 0.07);
}

.tac-users .tac-userstatus-active .tac-dot[b-197iscqlrg] { background: var(--tac-ok); }

.tac-users .tac-userstatus-disabled[b-197iscqlrg] {
    color: var(--tac-warn);
    border-color: rgba(180, 83, 9, 0.4);
    background: rgba(180, 83, 9, 0.07);
}

.tac-users .tac-userstatus-disabled .tac-dot[b-197iscqlrg] { background: var(--tac-warn); }

/* ------------------------------------------------------------------ role chip */

/* Role is the one thing on this row that is a RANK, so it gets a left rule in the
   rank's colour rather than a dot — the dot vocabulary is spoken for by status and
   provider, and three dots in one row would flatten all three. */
.tac-users .tac-role[b-197iscqlrg] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--tac-line2);
    border-left: 2px solid var(--tac-ink3);
    border-radius: 0;
    background: var(--tac-s2);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tac-ink2);
    white-space: nowrap;
}

.tac-users .tac-role-admin[b-197iscqlrg] {
    border-left-color: var(--tac-crit);
    color: var(--tac-ink0);
}

.tac-users .tac-role-operator[b-197iscqlrg] {
    border-left-color: var(--tac-acc);
    color: var(--tac-ink);
}

.tac-users .tac-role-helpdesk[b-197iscqlrg] {
    border-left-color: var(--tac-ok);
    color: var(--tac-ink);
}

.tac-users .tac-role-user[b-197iscqlrg] {
    border-left-color: var(--tac-line2);
}

/* --------------------------------------------------- two-line last-login cell */

.tac-users .tac-stack[b-197iscqlrg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tac-users .tac-stack .tac-num[b-197iscqlrg] {
    font-size: var(--tac-fs-micro);
}

.tac-users .tac-relative[b-197iscqlrg] {
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

/* "Never" is a fact we checked, so it is stated in the same mono voice as a date —
   just muted, so a real timestamp is what the eye lands on. */
.tac-users .tac-never[b-197iscqlrg] {
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

/* -------------------------------------------------------------- row actions */

.tac-users .tac-actions[b-197iscqlrg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* ActionButton is a child component: square it off and calm the colour down to a
   hairline frame, so a row of three actions reads as one instrument cluster rather
   than three competing pills. Hover restores the semantic colour. */
.tac-users[b-197iscqlrg]  .tac-actions .btn.btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink2);
    box-shadow: none;
    font-size: var(--tac-fs-micro);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tac-users[b-197iscqlrg]  .tac-actions .btn.btn-icon:hover:not(:disabled) {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    transform: none;
}

.tac-users[b-197iscqlrg]  .tac-actions .btn.btn-info:hover:not(:disabled) {
    border-color: var(--tac-warn);
}

.tac-users[b-197iscqlrg]  .tac-actions .btn.btn-danger:hover:not(:disabled) {
    border-color: var(--tac-crit);
}

.tac-users[b-197iscqlrg]  .tac-actions .btn.btn-icon:focus-visible {
    outline: 2px solid var(--tac-acc);
    outline-offset: 1px;
}

.tac-users[b-197iscqlrg]  .tac-actions .action-btn-icon {
    filter: grayscale(0.4);
}

/* ======================================================================= modals
   The four dialogs keep .modal-overlay > .modal and the header/body/footer chain —
   UsersPageTests drives all four through exactly those selectors. These rules are NOT
   nested under .tac-users because each modal is a sibling of that root.
   ========================================================================== */

.tac-modal-overlay[b-197iscqlrg] {
    backdrop-filter: none;
}

.tac-modal-overlay .tac-modal[b-197iscqlrg] {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--tac-line);
    background: var(--tac-s1);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.24);
    font-family: var(--tac-body);
    color: var(--tac-ink);
}

.tac-modal-overlay .tac-modal[b-197iscqlrg]::before,
.tac-modal-overlay .tac-modal[b-197iscqlrg]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    opacity: 0.7;
}

.tac-modal-overlay .tac-modal[b-197iscqlrg]::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--tac-acc);
    border-left: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal[b-197iscqlrg]::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--tac-acc);
    border-right: 1px solid var(--tac-acc);
}

.tac-modal-overlay .tac-modal-head[b-197iscqlrg] {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--tac-line);
    background: none;
}

.tac-modal-overlay .tac-modal-head h3[b-197iscqlrg] {
    margin: 0;
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: var(--tac-fs-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-modal-body[b-197iscqlrg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: none;
}

.tac-modal-overlay .tac-modal-foot[b-197iscqlrg] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--tac-line);
    background: none;
}

/* ------------------------------------------------------------- modal fields */

.tac-modal-overlay .tac-field[b-197iscqlrg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.tac-modal-overlay .tac-field label[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-field .form-control[b-197iscqlrg] {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    box-shadow: none;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink0);
}

.tac-modal-overlay .tac-field .form-control[b-197iscqlrg]::placeholder {
    color: var(--tac-ink3);
    opacity: 0.75;
}

.tac-modal-overlay .tac-field .form-control:focus[b-197iscqlrg] {
    border-color: var(--tac-acc);
    background: var(--tac-s1);
    box-shadow: none;
    outline: none;
}

.tac-modal-overlay .tac-field .form-control.input-error[b-197iscqlrg] {
    border-color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.05);
}

.tac-modal-overlay .tac-field .tac-readonly[b-197iscqlrg] {
    color: var(--tac-ink3);
    background: var(--tac-s2);
    border-style: dashed;
    cursor: default;
}

.tac-modal-overlay .tac-field .tac-select[b-197iscqlrg] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.tac-modal-overlay .tac-field .tac-select:disabled[b-197iscqlrg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-hint[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-fielderror[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.02em;
    color: var(--tac-crit);
}

/* --------------------------------------------------------------- the switch */

.tac-modal-overlay .tac-switchrow[b-197iscqlrg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* site.css draws .toggle-slider as a 24px-radius pill with a round knob. Squared off
   here so the one switch on the page speaks the same flat language as everything
   else; the checkbox itself is untouched, so the kill-switch stays operable. */
.tac-modal-overlay .tac-switch[b-197iscqlrg] {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 42px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

.tac-modal-overlay .tac-switch input[type="checkbox"][b-197iscqlrg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tac-modal-overlay .tac-switch .tac-switch-track[b-197iscqlrg] {
    position: absolute;
    inset: 0;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tac-modal-overlay .tac-switch .tac-switch-track[b-197iscqlrg]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 0;
    background: var(--tac-ink3);
    transition: transform 0.15s ease, background 0.15s ease;
}

.tac-modal-overlay .tac-switch input:checked + .tac-switch-track[b-197iscqlrg] {
    border-color: var(--tac-ok);
    background: rgba(21, 128, 61, 0.12);
}

.tac-modal-overlay .tac-switch input:checked + .tac-switch-track[b-197iscqlrg]::before {
    background: var(--tac-ok);
    transform: translateX(20px);
}

.tac-modal-overlay .tac-switch input:disabled + .tac-switch-track[b-197iscqlrg] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-switch input:focus-visible + .tac-switch-track[b-197iscqlrg] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

.tac-modal-overlay .tac-switch-label[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-size: var(--tac-label-size);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-ink2);
}

/* ------------------------------------------------------- warn / subject / error */

.tac-modal-overlay .tac-warnbox[b-197iscqlrg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 0;
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
    font-size: var(--tac-fs-micro);
    line-height: 1.5;
}

.tac-modal-overlay .tac-warnbox strong[b-197iscqlrg] {
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tac-modal-overlay .tac-confirm-mark[b-197iscqlrg] {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
    stroke: var(--tac-crit);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tac-modal-overlay .tac-confirm-question[b-197iscqlrg] {
    margin: 0;
    font-size: var(--tac-fs-meta);
    color: var(--tac-ink);
}

/* Read-only "what am I about to act on" block. */
.tac-modal-overlay .tac-subject[b-197iscqlrg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--tac-line);
    background: var(--tac-s2);
}

.tac-modal-overlay .tac-subject p[b-197iscqlrg] {
    display: flex;
    gap: 10px;
    margin: 0;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink);
    overflow-wrap: anywhere;
}

.tac-modal-overlay .tac-subject p strong[b-197iscqlrg] {
    flex: none;
    min-width: 13ch;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--tac-fs-micro);
    color: var(--tac-ink3);
}

.tac-modal-overlay .tac-error[b-197iscqlrg] {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 0;
    background: rgba(220, 38, 38, 0.07);
    color: var(--tac-crit);
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
}

/* ------------------------------------------------------------ modal buttons */

.tac-modal-overlay .tac-modal-foot .btn[b-197iscqlrg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--tac-line2);
    border-radius: 0;
    background: var(--tac-s2);
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn:hover:not(:disabled)[b-197iscqlrg] {
    border-color: var(--tac-acc);
    color: var(--tac-ink0);
    transform: none;
    box-shadow: none;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary[b-197iscqlrg] {
    background: var(--tac-acc);
    border-color: var(--tac-acc);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-primary:hover:not(:disabled)[b-197iscqlrg] {
    background: var(--tac-acc-deep);
    border-color: var(--tac-acc-deep);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger[b-197iscqlrg] {
    background: var(--tac-crit);
    border-color: var(--tac-crit);
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn.btn-danger:hover:not(:disabled)[b-197iscqlrg] {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.tac-modal-overlay .tac-modal-foot .btn:disabled[b-197iscqlrg] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tac-modal-overlay .tac-modal-foot .btn:focus-visible[b-197iscqlrg] {
    outline: 2px solid var(--tac-acc);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- responsive */

/* Tablet: the toolbar stops trying to fit on one line. */
@media (max-width: 1023px) {
    .tac-users .tac-toolbar-controls[b-197iscqlrg] {
        margin-inline-start: 0;
        width: 100%;
    }

    .tac-users[b-197iscqlrg]  .search-bar {
        flex: 1 1 200px;
        width: auto;
    }
}

/* Phone: responsive.css has no card layout for .users-table, so this page restacks
   its OWN rows as labelled cards from the data-label every <td> carries. */
@media (max-width: 767px) {
    .tac-users[b-197iscqlrg] {
        gap: 12px;
    }

    .tac-users .tac-kpibar[b-197iscqlrg] {
        /* Two cards per row at phone. minmax(0, 1fr) cannot overflow, so a long
           label ellipsises inside its own card instead of widening the document -
           AssertNoPageOverflow runs at 375px. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tac-users .tac-kpi[b-197iscqlrg] {
        padding: 12px 14px;
    }

    .tac-users .tac-kpi.selected[b-197iscqlrg] {
        padding-left: 12px;
    }

    .tac-users .tac-toolbar[b-197iscqlrg] {
        padding: 12px;
        gap: 10px;
    }

    .tac-users .tac-newuser[b-197iscqlrg] {
        flex: 1 1 auto;
    }

    .tac-users .tac-tablewrap[b-197iscqlrg] {
        overflow-x: hidden;
    }

    .tac-users .tac-table[b-197iscqlrg],
    .tac-users .tac-table tbody[b-197iscqlrg] {
        display: block;
    }

    .tac-users .tac-table thead[b-197iscqlrg] {
        position: absolute;
        left: -9999px;
    }

    .tac-users .tac-table .tac-row[b-197iscqlrg] {
        display: block;
        margin: 12px;
        padding: 10px 12px;
        border: 1px solid var(--tac-line);
        background: var(--tac-s1);
    }

    .tac-users .tac-table .tac-row-disabled[b-197iscqlrg] {
        border-color: var(--tac-line2);
        background: var(--tac-s2);
    }

    .tac-users .tac-table .tac-row > td[b-197iscqlrg] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid var(--tac-line);
        text-align: start;
    }

    .tac-users .tac-table .tac-row > td:last-child[b-197iscqlrg] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    /* The data-label pseudo-element is the field name in card mode — make it read like
       every other label on the page. */
    .tac-users .tac-table .tac-row > td[b-197iscqlrg]::before {
        content: attr(data-label);
        flex: none;
        font-family: var(--tac-mono);
        font-size: var(--tac-label-size-sm);
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tac-ink3);
    }

    .tac-users .tac-table .tac-stack[b-197iscqlrg] {
        align-items: flex-end;
    }

    .tac-users .tac-table .tac-cell-actions[b-197iscqlrg] {
        white-space: normal;
    }

    .tac-modal-overlay .tac-modal-body[b-197iscqlrg] {
        padding: 14px 16px;
    }

    .tac-modal-overlay .tac-modal-foot[b-197iscqlrg] {
        padding: 12px 16px 14px;
        flex-wrap: wrap;
    }

    .tac-modal-overlay .tac-subject p[b-197iscqlrg] {
        flex-direction: column;
        gap: 2px;
    }
}

/* Nothing on this page animates for a user who asked for stillness — including the
   loading spinner, which becomes a static ring. */
@media (prefers-reduced-motion: reduce) {
    .tac-users *[b-197iscqlrg],
    .tac-users[b-197iscqlrg]  *,
    .tac-modal-overlay *[b-197iscqlrg] {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- two-line card: label+figure on one row, caption beneath ---------------- */
.tac-users .tac-kpi .tac-kpi-head[b-197iscqlrg] {
    grid-area: head;
}

.tac-users .tac-kpi .tac-kpi-figure[b-197iscqlrg] {
    grid-area: figure;
    justify-content: flex-end;
    justify-self: end;
    align-items: baseline;
}

.tac-users .tac-kpi .tac-kpi-foot[b-197iscqlrg] {
    grid-area: foot;
}

.tac-users .tac-kpi .tac-kpi-value[b-197iscqlrg] {
    /* The figure is the point of the card, so it leads. It was reading SMALLER than
       its own 16px label, which inverted the hierarchy. */
    font-size: var(--tac-stat-value-size);
    line-height: 1;
}