/* dashboard-ui.css -- the Command Centre's design tokens and stat tile, shared.
 *
 * #1094 (Ian, 9 Oct): the customer home becomes an executive dashboard in the
 * Command Centre's visual language. These rules were lifted out of status.html,
 * not copied: status.html links this file and no longer defines them, so the two
 * pages cannot drift apart. Every value comes from Ian's approved v9 canvas
 * (artifact R4kYvt52vVKv8xwEzn6eFt), as status.html's comment always said.
 *
 * Contents: the --v9-* tokens, the status dot, the card, and the stat tile
 * (.ops-tiles / .ops-tile / -label / -fig / -sub, with GREEN, AMBER, RED and
 * PENDING states). Nothing page-specific belongs here.
 */
:root{
    --v9-font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --v9-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --v9-bg:#E7EAE5; --v9-ink:#14202B; --v9-sub:#3F4A55; --v9-card:#FFFFFF; --v9-line:#D3D9D1;
    --v9-accent:#0B6B5C; --v9-accent-dk:#074D42;
    --v9-green-bg:#E3F5EF;  --v9-green-tint:#F0FAF6;  --v9-green-ln:#A9DCCD; --v9-green-fg:#0B4A40; --v9-green-dot:#12A386;
    --v9-amber-bg:#FFF4E5;  --v9-amber-ln:#F2D3A6; --v9-amber-fg:#6B3604; --v9-amber-dot:#D97706;
    --v9-red-bg:#FDECEA;    --v9-red-ln:#F3C4BE;   --v9-red-fg:#8F1C13;  --v9-red-dot:#D93025;
    --v9-grey-bg:#EEF0F2;   --v9-grey-ln:#D3D9D1;  --v9-grey-fg:#2F3A44; --v9-grey-dot:#6B7580;
    --v9-track-bg:#F3F5F2; --v9-faint:#5E6873; --v9-track-ln:#C9D0C6; --v9-line-soft:#E3E7E1; --v9-card-soft:#FBFCFA;
    --v9-stage-introducer:#B9C4C9; --v9-stage-identified:#D9CBAE; --v9-stage-contacted:#9FC6DA;
    --v9-stage-walkthrough:#F2C675; --v9-stage-proposal:#E68A5C; --v9-stage-committed:#7FB8A4;
}

.v9-dot{width:8px;height:8px;border-radius:50%;flex:none}

.v9-card{background:var(--v9-card);border:1px solid var(--v9-line);
  border-radius:14px;padding:14px 20px;min-width:0}

.ops-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.ops-tiles .ops-tile{background:var(--v9-card);border:1px solid var(--v9-line);
  border-radius:14px;padding:12px 16px}
.ops-tile{min-width:0}
.ops-tile-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--v9-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-tile-fig{font-family:var(--v9-font-mono);font-size:24px;font-weight:600;line-height:1.25}
.ops-tile-sub{font-size:11.5px;color:var(--v9-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-tile.GREEN .v9-dot{background:var(--v9-green-dot)}
.ops-tile.AMBER .v9-dot{background:var(--v9-amber-dot)}
.ops-tile.RED .v9-dot{background:var(--v9-red-dot)}
.ops-tile.RED .ops-tile-fig{color:var(--v9-red-fg)}
.ops-tile.ACCENT .v9-dot{background:var(--v9-accent)}
.ops-tile.ACCENT .ops-tile-fig{color:var(--v9-accent-dk)}
.ops-tile.AMBER .ops-tile-fig{color:var(--v9-amber-fg)}
.ops-tile.PENDING .ops-tile-fig{color:var(--v9-grey-fg)}
/* A tile with no reading to colour shows no dot, rather than a blank gap where
   one would be (#1094 slice 5); status.html already renders none for these. */
.ops-tile.PENDING .v9-dot,.ops-tile.NONE .v9-dot{display:none}

/* The legend (lifted from status.html, #1094 slice 2): a key swatch and a label
   per series, the same under every chart. */
.v9-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--v9-grey-fg)}
.v9-legend-item{display:inline-flex;align-items:center;gap:6px}
.v9-legend-aside{color:var(--v9-sub);font-style:italic}
.v9-legend-key{width:10px;height:10px;border-radius:3px;display:inline-block}
.v9-legend-key.round{border-radius:50%}

/* Stacked columns (#1094 slice 2): the stage bar's segments, stood up -- one
   column per bin, its height the bin's total against the tallest, split into
   its series with the stage bar's 2px gaps. Heights are set by the caller in
   pixels against .v9-cols-plot's height; the count sits above, the label below. */
.v9-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;align-items:end}
.v9-col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;min-width:0}
.v9-col-n{font-family:var(--v9-font-mono);font-size:11px;color:var(--v9-sub);text-align:center;margin-bottom:3px;min-height:14px}
.v9-col-stack{display:flex;flex-direction:column-reverse;gap:2px;border-radius:4px 4px 0 0;overflow:hidden}
.v9-col-seg{display:block;min-height:3px}
.v9-col-x{font-size:10.5px;color:var(--v9-sub);text-align:center;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid var(--v9-line);padding-top:4px}
.v9-col.v9-col-aside .v9-col-x{font-style:italic}
.v9-seg-red{background:var(--v9-red-dot)}
.v9-seg-accent{background:var(--v9-accent)}
.v9-seg-amber{background:var(--v9-amber-dot)}
.v9-seg-grey{background:var(--v9-grey-dot)}

/* Timeline (#1094 slice 4): dated points on an axis -- numbered markers on
   lanes above a line, month ticks and labels below. Positions are set by the
   caller as left:% along the axis and top:px per lane. */
.v9-tl{position:relative}
.v9-tl-axis{position:absolute;left:0;right:0;height:2px;background:var(--v9-line);border-radius:1px}
.v9-tl-tick{position:absolute;width:1px;height:8px;background:var(--v9-track-ln)}
.v9-tl-tick-l{position:absolute;font-size:10.5px;color:var(--v9-sub);transform:translateX(-50%);white-space:nowrap}
.v9-tl-start{position:absolute;left:0;font-size:10.5px;color:var(--v9-sub);white-space:nowrap}
.v9-tl-pt{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;
  background:var(--v9-accent);color:#fff;font:600 10.5px var(--v9-font-mono);display:flex;
  align-items:center;justify-content:center;border:2px solid var(--v9-card);box-sizing:border-box}
.v9-tl-stem{position:absolute;width:1px;background:var(--v9-accent);opacity:.35}