/* Wave 3B — watchlist, seat plans and the operator dashboard.
   Loaded after the base rules in index.html and reusing its tokens
   (--ink, --ink2, --line, --card, --bg, --navy, --accent, --ok, --bad).

   Nothing here is a chart. Every chart in this console is a standalone SVG
   DOCUMENT rendered by the hub and embedded with <img> (W-10), so there is no
   chart CSS, no chart library and no client-side drawing surface at all. */

/* ------------------------------------------------------------- watchlist */
/* The front page, and deliberately so. AD-86 removed customer self-service and
   left access requests with no notification transport at all — "someone must
   watch the list" was the recorded consequence. These worklists ARE that
   transport, so they are not a tab you remember to open. */
.wl { display: grid; gap: 12px; }
.wl .card { margin: 0; padding: 0; overflow: hidden; }
.wl .hd { display: flex; align-items: baseline; gap: 10px;
          padding: 11px 16px; border-bottom: 1px solid var(--line);
          background: var(--tsnz-surface); }
.wl .hd h3 { margin: 0; font-size: 13.5px; color: var(--navy); font-weight: 650; }
.wl .hd .n { font-size: 12px; font-weight: 700; padding: 1px 9px;
             border-radius: 99px; background: var(--tsnz-surface-sunken); color: var(--ink2); }
.wl .hd .n.hot { background: var(--tsnz-warning-bg); color: var(--tsnz-warning-fg); }
.wl .hd .why { font-size: 12px; color: var(--ink2); margin-left: auto;
               text-align: right; max-width: 46ch; }
.wl table { border: 0; border-radius: 0; }
.wl .empty { padding: 14px 16px; color: var(--ink2); font-size: 13px; }

/* A zero-state that says what it means. "0 open requests" and "the platform has
   not answered" must never look the same on an operator's only alerting
   surface. */
.wl .card.quiet .hd { background: var(--card); }
.wl .card.stale { border-color: var(--tsnz-warning-border); }
.wl .card.stale .hd { background: var(--tsnz-warning-bg); }

/* --------------------------------------------------------------- metrics */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

.kpi { display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0 10px; }
.kpi .k { min-width: 92px; }
.kpi .k .v { font-size: 22px; font-weight: 700; color: var(--navy);
             line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .k .l { font-size: 11.5px; color: var(--ink2); text-transform: uppercase;
             letter-spacing: .04em; }
.kpi .k.warn .v { color: var(--accent); }

/* Counts, never rates. AN-12: no percentage below a denominator of 20 — and
   this console renders no percentage at ANY denominator, because a threshold
   the renderer owns is a threshold someone helpful lowers in one line. */
.count { font-variant-numeric: tabular-nums; }

.funnel { list-style: none; padding: 0; margin: 6px 0 0; }
.funnel li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0;
             border-bottom: 1px dashed var(--line); }
.funnel li:last-child { border-bottom: 0; }
.funnel .v { font-size: 17px; font-weight: 700; color: var(--navy);
             min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.funnel .l { font-size: 13px; }
.funnel .d { font-size: 12px; color: var(--ink2); margin-left: auto; }

/* The chart is never the only representation of a number: every one of these
   sits beside the table it was drawn from. */
img.chart { display: block; max-width: 100%; height: auto; margin: 10px 0 2px;
            border: 1px solid var(--line); border-radius: 8px; background: var(--tsnz-surface); }
.charterr { font-size: 12px; color: var(--ink2); margin: 8px 0; }

/* ------------------------------------------------------------ seat pools */
.pool { display: flex; height: 12px; border-radius: 99px; overflow: hidden;
        background: var(--tsnz-surface-sunken); border: 1px solid var(--line); min-width: 160px; }
.pool i { display: block; height: 100%; }
.pool .assigned { background: var(--tsnz-action); }
.pool .pending { background: var(--tsnz-warning-border); }
.poolkey { font-size: 11.5px; color: var(--ink2); }
.poolkey b { color: var(--ink); font-weight: 600; }

.plan-window { font-size: 12.5px; color: var(--ink2); white-space: nowrap; }
.pill.grace { background: var(--tsnz-warning-bg); color: var(--tsnz-warning-fg); }
.pill.future { background: var(--tsnz-info-bg); color: var(--tsnz-info-fg); }
.pill.rev { background: var(--tsnz-surface-sunken); color: var(--ink2); }

/* An amendment is a revoke + a create, chained by supersedes_id — never an
   UPDATE of seats or dates. The UI says so where the operator makes the choice,
   because "how many seats did WEL hold on 12 March" has to stay answerable. */
.warnbox { border: 1px solid var(--tsnz-warning-border); background: var(--tsnz-warning-bg);
           border-radius: var(--tsnz-radius);
           padding: 10px 12px; font-size: var(--tsnz-fs-body-small);
           color: var(--tsnz-warning-fg); margin: 8px 0; }
.warnbox b { color: var(--tsnz-warning-fg); }

.chain { font-size: 12px; color: var(--ink2); }
.chain code { font-size: 11.5px; }

/* --------------------------------------------------------------- tables */
tr.released td { opacity: .55; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.suppressed { color: var(--ink2); font-style: italic; }
.tierb { font-size: 11.5px; color: var(--ink2); }