/*
 * Styling for the four Ops pages.
 *
 * Hand-written rather than Tailwind utilities, deliberately. Filament 3
 * ships a *precompiled* Tailwind 3 build containing only the classes
 * Filament itself uses: `xl:grid-cols-6`, `lg:grid-cols-4`, `tabular-nums`
 * and friends simply do not exist in it, so writing them in a custom page
 * silently produces no rule at all — which is why every stat tile stacked
 * full-width instead of forming a grid. This app is also on Tailwind 4,
 * one major ahead of Filament, so compiling a custom theme would mean
 * reconciling two Tailwind versions for a handful of layout rules.
 *
 * Colours are taken from Filament's own --primary-* / --gray-* custom
 * properties, so these pages follow the panel's theme (including the amber
 * primary) rather than hardcoding a palette that drifts from it.
 */

.ops-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .ops-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ops-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .ops-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Two equal columns for paired tables; one column until there is room. */
.ops-split {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1280px) {
    .ops-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ops-split--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* --- Stat tile ---------------------------------------------------------- */

.ops-stat {
    display: block;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: rgb(255 255 255);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    outline: 1px solid rgb(0 0 0 / 0.05);
    outline-offset: -1px;
    text-decoration: none;
}

.dark .ops-stat {
    background: rgb(var(--gray-900));
    outline-color: rgb(255 255 255 / 0.1);
}

a.ops-stat:hover { outline-color: rgb(var(--primary-500) / 0.5); }

.ops-stat--alert { outline-color: rgb(var(--danger-500, 239 68 68) / 0.6); }

/* An empty queue should recede, not compete with the one that has items. */
.ops-stat--zero { opacity: 0.55; }

.ops-stat__label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.ops-stat__value {
    margin-top: 0.15rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--gray-950));
}

.dark .ops-stat__value { color: #fff; }

.ops-stat__sub {
    margin-top: 0.1rem;
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

/* --- Tables ------------------------------------------------------------- */

.ops-scroll { max-height: 24rem; overflow-y: auto; margin: -0.5rem -1rem 0; }

.ops-table { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.ops-table th,
.ops-table td { padding: 0.45rem 1rem; text-align: left; vertical-align: middle; }

.ops-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
    border-bottom: 1px solid rgb(var(--gray-200));
    white-space: nowrap;
}

.dark .ops-table thead th {
    background: rgb(var(--gray-900));
    border-bottom-color: rgb(255 255 255 / 0.1);
}

.ops-table tbody tr + tr td { border-top: 1px solid rgb(var(--gray-100)); }
.dark .ops-table tbody tr + tr td { border-top-color: rgb(255 255 255 / 0.05); }

.ops-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ops-table .muted { color: rgb(var(--gray-500)); }
.ops-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; }

.ops-record {
    font-weight: 500;
    text-decoration: none;
    color: rgb(var(--gray-950));
}

.dark .ops-record { color: #fff; }
.ops-record:hover { color: rgb(var(--primary-600)); }
.dark .ops-record:hover { color: rgb(var(--primary-400)); }

.ops-sub { font-size: 0.72rem; color: rgb(var(--gray-500)); }

.ops-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgb(var(--gray-500));
}

.ops-count {
    margin: 0.5rem -1rem -0.25rem;
    padding: 0.5rem 1rem 0;
    border-top: 1px solid rgb(var(--gray-200));
    font-size: 0.72rem;
    color: rgb(var(--gray-500));
}

.dark .ops-count { border-top-color: rgb(255 255 255 / 0.1); }

/* --- Health strip -------------------------------------------------------- */

.ops-health {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) { .ops-health { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ops-health { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ops-check { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; }

.ops-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.45rem;
    border-radius: 9999px;
}

.ops-dot--ok { background: rgb(34 197 94); }
.ops-dot--warn { background: rgb(245 158 11); }
.ops-dot--fail { background: rgb(239 68 68); }
.ops-dot--skip { background: rgb(var(--gray-400)); }

.ops-check__name { font-size: 0.875rem; font-weight: 500; color: rgb(var(--gray-950)); }
.dark .ops-check__name { color: #fff; }
.ops-check__latency { font-size: 0.7rem; color: rgb(var(--gray-500)); }
.ops-check__detail {
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-banner {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgb(239 68 68 / 0.1);
    outline: 1px solid rgb(239 68 68 / 0.3);
    outline-offset: -1px;
    font-size: 0.875rem;
}

.ops-kv { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 0.15rem 0; }
.ops-kv dt { color: rgb(var(--gray-500)); }
.ops-kv dd { margin: 0; font-variant-numeric: tabular-nums; color: rgb(var(--gray-950)); }
.dark .ops-kv dd { color: #fff; }

/* --- AI usage: sparkline bars and share meters --------------------------- */

.ops-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 6rem;
    padding-top: 0.5rem;
}

.ops-bars__bar {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 2px 2px 0 0;
    background: rgb(var(--primary-500));
    opacity: 0.85;
}

.ops-bars__bar:hover { opacity: 1; }
.ops-bars__bar--zero { background: rgb(var(--gray-300)); opacity: 0.5; min-height: 2px; }
.dark .ops-bars__bar--zero { background: rgb(255 255 255 / 0.12); }

.ops-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: rgb(var(--gray-500));
}

.ops-meter {
    height: 0.35rem;
    border-radius: 9999px;
    background: rgb(var(--gray-200));
    overflow: hidden;
}

.dark .ops-meter { background: rgb(255 255 255 / 0.08); }
.ops-meter__fill { height: 100%; background: rgb(var(--primary-500)); border-radius: 9999px; }

.ops-delta { font-size: 0.72rem; font-weight: 500; }
.ops-delta--up { color: rgb(239 68 68); }
.ops-delta--down { color: rgb(34 197 94); }
.ops-delta--flat { color: rgb(var(--gray-500)); }

.ops-window { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ops-window a {
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    text-decoration: none;
    color: rgb(var(--gray-500));
    outline: 1px solid rgb(var(--gray-300));
    outline-offset: -1px;
}
.dark .ops-window a { outline-color: rgb(255 255 255 / 0.12); }
.ops-window a:hover { color: rgb(var(--primary-600)); }
.ops-window a[aria-current="true"] {
    color: rgb(var(--primary-600));
    outline-color: rgb(var(--primary-500));
    font-weight: 600;
}
.dark .ops-window a[aria-current="true"] { color: rgb(var(--primary-400)); }

/* --- Health: per-check ping button, uptime line and latency sparkline ---- */

.ops-ping {
    padding: 0 .35rem;
    border: 0;
    border-radius: 0.35rem;
    background: rgb(var(--gray-200));
    color: rgb(var(--gray-600));
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.dark .ops-ping { background: rgb(255 255 255 / 0.08); color: rgb(var(--gray-400)); }
.ops-ping:hover { background: rgb(var(--primary-500)); color: #fff; }
.ops-ping[disabled] { opacity: 0.5; cursor: progress; }

.ops-check__history { margin-top: 0.15rem; font-size: 0.68rem; color: rgb(var(--gray-500)); }
.ops-check__history span + span { margin-left: 0.2rem; }

.ops-spark {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 1.1rem;
    margin-top: 0.3rem;
}

.ops-spark__bar {
    flex: 1 1 0;
    min-width: 1px;
    border-radius: 1px;
    background: rgb(var(--primary-500));
    opacity: 0.55;
}

/* --- Dashboard health strip ---------------------------------------------
   A compact one-line-per-system row for the dashboard widget, as distinct
   from the fuller .ops-health grid on the ops page, which also carries
   uptime and a sparkline. */

.ops-strip {
    display: grid;
    gap: .35rem 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) { .ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ops-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ops-strip__item {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    font-size: .8rem;
}

.ops-strip__name {
    color: rgb(var(--gray-950));
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .ops-strip__name { color: #fff; }

/* Pushed right so the numbers form a column the eye can scan down. */
.ops-strip__value {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: .72rem;
    color: rgb(var(--gray-500));
    white-space: nowrap;
}

.ops-strip__notes {
    margin-top: .85rem;
    padding-top: .65rem;
    border-top: 1px solid rgb(var(--gray-200));
    font-size: .75rem;
    color: rgb(var(--gray-500));
}

.dark .ops-strip__notes { border-top-color: rgb(255 255 255 / .1); }
.ops-strip__notes strong { color: rgb(var(--gray-950)); font-weight: 600; }
.dark .ops-strip__notes strong { color: #fff; }

/* The row count, carried by the section heading instead of a stat tile that
   would repeat it. */
.ops-count-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .4rem;
    border-radius: 9999px;
    background: rgb(var(--gray-200));
    color: rgb(var(--gray-600));
    font-size: .7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.dark .ops-count-badge { background: rgb(255 255 255 / .09); color: rgb(var(--gray-400)); }

/* A thread that has been running long enough to be worth looking at. */
.ops-slow { color: rgb(245 158 11); font-weight: 600; }

.ops-ping--danger { background: rgb(239 68 68 / .15); color: rgb(239 68 68); }
.ops-ping--danger:hover { background: rgb(239 68 68); color: #fff; }

/* A process list is stale the moment it is drawn; say when it was read. */
.ops-asof {
    margin-right: .5rem;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--gray-500));
}

/* --- Trade calibration -------------------------------------------------- */

/*
 * Score colour is a four-stop scale, not a gradient: below 50 is the gate's
 * own failure threshold (TradeStatusCommand), 50–69 is holding, 70–84 is
 * sound, 85+ is where a floor should end up. Reusing the gate's boundary
 * means the colour on the page and the state in the table can never tell
 * two different stories.
 */
.cal-bad   { color: rgb(220 38 38); }
.cal-warn  { color: rgb(217 119 6); }
.cal-ok    { color: rgb(37 99 235); }
.cal-good  { color: rgb(22 163 74); }
.dark .cal-bad  { color: rgb(248 113 113); }
.dark .cal-warn { color: rgb(251 191 36); }
.dark .cal-ok   { color: rgb(96 165 250); }
.dark .cal-good { color: rgb(74 222 128); }

/* Seven dimensions as one compact strip — the shape of a trade at a glance. */
.cal-dims { display: flex; gap: 2px; }

.cal-dim {
    flex: 1 1 0;
    min-width: 2.05rem;
    padding: 0.2rem 0.1rem 0.25rem;
    border-radius: 0.3rem;
    text-align: center;
    background: rgb(var(--gray-100));
    line-height: 1.15;
}

.dark .cal-dim { background: rgb(255 255 255 / 0.05); }

.cal-dim__k {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.cal-dim__v { display: block; font-size: 0.8rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* The floor is ringed because it is the number the programme tracks. */
.cal-dim--floor { outline: 1.5px solid rgb(var(--primary-500)); outline-offset: -1.5px; background: rgb(var(--primary-50)); }
.dark .cal-dim--floor { background: rgb(var(--primary-500) / 0.14); }

.cal-floor { display: flex; align-items: baseline; gap: 0.3rem; font-variant-numeric: tabular-nums; }
.cal-floor__n { font-size: 1.05rem; font-weight: 700; }
.cal-floor__d { font-size: 0.68rem; color: rgb(var(--gray-500)); text-transform: uppercase; letter-spacing: 0.03em; }

.cal-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.cal-badge--REMEDIATION { background: rgb(254 226 226); color: rgb(153 27 27); }
.cal-badge--PROVISIONAL { background: rgb(254 249 195); color: rgb(133 77 14); }
.cal-badge--UNMEASURED  { background: rgb(var(--gray-200)); color: rgb(var(--gray-600)); }
.dark .cal-badge--REMEDIATION { background: rgb(153 27 27 / 0.35); color: rgb(252 165 165); }
.dark .cal-badge--PROVISIONAL { background: rgb(133 77 14 / 0.35); color: rgb(253 224 71); }
.dark .cal-badge--UNMEASURED  { background: rgb(255 255 255 / 0.08); color: rgb(var(--gray-400)); }

/* THIN evidence is a caveat on the score, so it rides next to it, quietly. */
.cal-thin {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgb(217 119 6);
}
.dark .cal-thin { color: rgb(251 191 36); }

/*
 * Score deltas invert the ops-delta convention: there, up is spend and
 * therefore red. Here up is a better score and green, and criticals — where
 * fewer is better — are rendered with their sign already flipped by the
 * caller rather than by a second colour rule.
 */
.cal-delta { font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-delta--good { color: rgb(22 163 74); }
.cal-delta--bad  { color: rgb(220 38 38); }
.cal-delta--flat { color: rgb(var(--gray-400)); }
.dark .cal-delta--good { color: rgb(74 222 128); }
.dark .cal-delta--bad  { color: rgb(248 113 113); }

.cal-spark { display: flex; align-items: flex-end; gap: 1px; height: 1.4rem; }
.cal-spark__bar { width: 3px; background: rgb(var(--primary-400)); border-radius: 1px; min-height: 1px; }
.cal-spark__bar--last { background: rgb(var(--primary-600)); }

.cal-row { cursor: pointer; }
.cal-row:hover { background: rgb(var(--gray-50)); }
.dark .cal-row:hover { background: rgb(255 255 255 / 0.04); }
.cal-row--open { background: rgb(var(--primary-50)); }
.dark .cal-row--open { background: rgb(var(--primary-500) / 0.1); }

.cal-toolbar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.85rem; }

.cal-input {
    flex: 1 1 15rem;
    min-width: 0;
    padding: 0.4rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(var(--gray-300));
    background: #fff;
    font-size: 0.82rem;
    color: rgb(var(--gray-950));
}

.dark .cal-input { background: rgb(var(--gray-900)); border-color: rgb(255 255 255 / 0.12); color: #fff; }
.cal-input:focus { outline: 2px solid rgb(var(--primary-500)); outline-offset: -1px; border-color: transparent; }

/* Filter chips double as counts, so the filter row also reports the split. */
.cal-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.cal-chip {
    padding: 0.25rem 0.6rem;
    border-radius: 0.5rem;
    border: 0;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: rgb(var(--gray-500));
    outline: 1px solid rgb(var(--gray-300));
    outline-offset: -1px;
}

.dark .cal-chip { outline-color: rgb(255 255 255 / 0.12); }
.cal-chip:hover { color: rgb(var(--primary-600)); }
.cal-chip[aria-pressed="true"] {
    color: rgb(var(--primary-600));
    outline-color: rgb(var(--primary-500));
    font-weight: 650;
}
.dark .cal-chip[aria-pressed="true"] { color: rgb(var(--primary-400)); }

/* --- Drill-down: findings and scenarios --------------------------------- */

.cal-finding {
    padding: 0.6rem 0.75rem;
    border-radius: 0.55rem;
    background: rgb(var(--gray-50));
    border-left: 3px solid rgb(var(--gray-300));
}

.dark .cal-finding { background: rgb(255 255 255 / 0.04); border-left-color: rgb(255 255 255 / 0.15); }
.cal-finding + .cal-finding { margin-top: 0.5rem; }
.cal-finding--critical { border-left-color: rgb(220 38 38); }
.cal-finding--ambiguity { border-left-color: rgb(217 119 6); }
.cal-finding--missing_line { border-left-color: rgb(37 99 235); }
.cal-finding--line_verdict { border-left-color: rgb(139 92 246); }

.cal-finding__head { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.cal-finding__title { font-size: 0.82rem; font-weight: 600; color: rgb(var(--gray-950)); }
.dark .cal-finding__title { color: #fff; }
.cal-finding__tag {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

/* The judge's own words, labelled so why/fix stay distinguishable. */
.cal-finding__body { margin-top: 0.3rem; font-size: 0.78rem; color: rgb(var(--gray-600)); line-height: 1.45; }
.dark .cal-finding__body { color: rgb(var(--gray-400)); }
.cal-finding__body b { color: rgb(var(--gray-500)); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; }
.cal-finding__band { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cal-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.85rem; flex-wrap: wrap; }

.cal-runsel {
    max-height: 15rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-runsel__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    cursor: pointer;
    font-size: 0.75rem;
    text-align: left;
    color: rgb(var(--gray-600));
}

.dark .cal-runsel__item { color: rgb(var(--gray-400)); }
.cal-runsel__item:hover { background: rgb(var(--gray-100)); }
.dark .cal-runsel__item:hover { background: rgb(255 255 255 / 0.06); }
.cal-runsel__item[aria-current="true"] { background: rgb(var(--primary-50)); color: rgb(var(--primary-700)); font-weight: 600; }
.dark .cal-runsel__item[aria-current="true"] { background: rgb(var(--primary-500) / 0.15); color: rgb(var(--primary-300)); }
.cal-runsel__when { flex: 1 1 auto; font-variant-numeric: tabular-nums; }

.cal-scenario__req {
    font-size: 0.78rem;
    color: rgb(var(--gray-950));
    display: block;
    max-width: 46rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .cal-scenario__req { color: #fff; }

/* Per-class counts on a scenario row: zero recedes, non-zero carries its colour. */
.cal-pill {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.05rem 0.3rem;
    border-radius: 0.3rem;
    font-size: 0.68rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: rgb(var(--gray-100));
    color: rgb(var(--gray-500));
}

.dark .cal-pill { background: rgb(255 255 255 / 0.06); }
.cal-pill--zero { opacity: 0.35; }
.cal-pill--critical { background: rgb(254 226 226); color: rgb(153 27 27); }
.dark .cal-pill--critical { background: rgb(153 27 27 / 0.4); color: rgb(252 165 165); }

.cal-live { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: rgb(var(--gray-500)); }
.cal-live__dot { width: 6px; height: 6px; border-radius: 9999px; background: rgb(34 197 94); }
.cal-live__dot--off { background: rgb(var(--gray-400)); }

/*
 * The board is this page's primary artifact, not a side panel, so it gets a
 * taller window than the shared 24rem .ops-scroll cap — four visible rows
 * out of sixty-three reads as a broken table rather than a scrollable one.
 */
.cal-scroll { max-height: 44rem; }

/* Tighter cells: twelve columns only fit without a horizontal scroll if
   each one stops claiming a full 1rem of padding either side. */
.cal-table th,
.cal-table td { padding: 0.45rem 0.55rem; }
.cal-table td:first-child, .cal-table th:first-child { padding-left: 1rem; }
.cal-table td:last-child, .cal-table th:last-child { padding-right: 1rem; }

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgb(var(--gray-200));
    font-size: 0.72rem;
    color: rgb(var(--gray-500));
}

.dark .cal-legend { border-top-color: rgb(255 255 255 / 0.1); }
.cal-legend b { font-weight: 700; }

/* A run-over-run change that crosses evidence classes is real arithmetic but
   weak evidence, so it is shown and de-emphasised rather than hidden. */
.cal-delta--soft { opacity: 0.45; font-weight: 500; }
.cal-caveat { font-size: 0.62rem; color: rgb(var(--gray-500)); white-space: nowrap; }

/* Sortable column headers. A button rather than a click handler on the th so
   the sort is reachable by keyboard and announced by a screen reader. */
.cal-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.cal-sort:hover { color: rgb(var(--primary-600)); }
.dark .cal-sort:hover { color: rgb(var(--primary-400)); }
.cal-sort[data-active] { color: rgb(var(--primary-600)); }
.dark .cal-sort[data-active] { color: rgb(var(--primary-400)); }
.cal-sort__arrow { font-size: 0.6rem; }
.ops-table th.num .cal-sort { justify-content: flex-end; }

/* A row pinned to a historical run is marked on its left edge, so it reads as
   deliberately out of step with the rest of the board rather than stale. */
.cal-row--pinned > td:first-child { box-shadow: inset 3px 0 0 rgb(var(--primary-500)); }

.cal-pinned-tag {
    margin-top: 0.15rem;
    font-size: 0.62rem;
    font-weight: 650;
    color: rgb(var(--primary-600));
}

.dark .cal-pinned-tag { color: rgb(var(--primary-400)); }

/* --- Legend ------------------------------------------------------------- */

.cal-key { font-size: 0.78rem; }

/*
 * A column flow rather than a grid: the blocks are wildly different heights,
 * and grid rows align to the tallest cell in each row — which left a whole
 * band of whitespace beside the short ones. Columns pack them.
 */
.cal-key__cols {
    font-size: 0.78rem;
    column-gap: 2.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 900px)  { .cal-key__cols { column-count: 2; } }
@media (min-width: 1400px) { .cal-key__cols { column-count: 3; } }

/* Never split a block across a column boundary — half a legend entry at the
   foot of one column is worse than an uneven column. */
.cal-key__group {
    break-inside: avoid;
    page-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5rem;
}

.cal-key__title {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgb(var(--gray-200));
}

.dark .cal-key__title { border-bottom-color: rgb(255 255 255 / 0.1); }

.cal-key__lede {
    margin: 0 0 0.6rem;
    color: rgb(var(--gray-500));
    line-height: 1.5;
    max-width: 60ch;
}

/* Term and definition on one line, the term column-aligned so the block
   scans as a list rather than as prose. */
.cal-key__row {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-bottom: 0.4rem;
    line-height: 1.45;
    color: rgb(var(--gray-600));
}

.dark .cal-key__row { color: rgb(var(--gray-400)); }
.cal-key__row b { color: rgb(var(--gray-950)); font-weight: 650; }
.dark .cal-key__row b { color: #fff; }
.cal-key__row code {
    font-size: 0.72rem;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    background: rgb(var(--gray-100));
}
.dark .cal-key__row code { background: rgb(255 255 255 / 0.08); }

.cal-key__term {
    flex: 0 0 auto;
    min-width: 6.5rem;
    font-weight: 650;
    color: rgb(var(--gray-950));
}

.dark .cal-key__term { color: #fff; }
.cal-key__term--pinned { color: rgb(var(--primary-600)); box-shadow: inset 3px 0 0 rgb(var(--primary-500)); padding-left: 0.5rem; }
.dark .cal-key__term--pinned { color: rgb(var(--primary-400)); }

.cal-key__swatch { flex: 0 0 3.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-key__dim { flex: 0 0 auto; min-width: 2.7rem; }

/* Colour chip standing in for a finding card's left border. */
.cal-key__bar {
    flex: 0 0 auto;
    width: 3px;
    align-self: stretch;
    min-height: 1.1rem;
    border-radius: 2px;
    border-left-width: 3px;
    border-left-style: solid;
}

.cal-key .cal-badge { flex: 0 0 6.5rem; text-align: center; }