/* ==========================================================================
   ArchiTask — Data visualisation
   Thin marks, hairline recessive grid, legend for >=2 series, table-view twin.
   Every chart card can flip to an accessible table, so no value is
   reachable only through a tooltip.
   ========================================================================== */

.viz {
  --surface-1: var(--surface);
  color: var(--text);
}

/* Chart card ---------------------------------------------------------------- */
.chart-card { display: flex; flex-direction: column; }
.chart-card .card-head { align-items: center; }
.chart-card .card-body { padding: var(--s4) var(--s5) var(--s5); }
.chart-toggle {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--surface-3); border-radius: var(--r-sm);
}
.chart-toggle button {
  padding: 3px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-11); font-weight: 600; color: var(--text-3);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chart-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

/* SVG chrome ---------------------------------------------------------------- */
.viz svg { width: 100%; height: auto; overflow: visible; display: block; }
.viz .grid-line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz .axis-line { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.viz .tick {
  fill: var(--viz-muted); font-size: 11px; font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
.viz .tick-y { text-anchor: end; }
.viz .tick-x { text-anchor: middle; }
.viz .cat-label { fill: var(--text-2); font-size: 12px; font-family: var(--font); }
.viz .val-label {
  fill: var(--text); font-size: 12px; font-weight: 620; font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
.viz .mark { transition: opacity var(--t-fast) var(--ease); }
.viz .mark-hit { fill: transparent; cursor: pointer; }
.viz.is-hovering .mark { opacity: .38; }
.viz.is-hovering .mark.is-hot { opacity: 1; }

/* Bars: <=24px thick, 4px rounded data-end, square at the baseline. */
.viz .bar { transition: opacity var(--t-fast) var(--ease); }

/* Lines: 2px, round joins. Area fill: series hue at ~10%. */
.viz .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .area { opacity: .10; }
.viz .dot { stroke: var(--surface); stroke-width: 2; }   /* 2px surface ring */
.viz .crosshair { stroke: var(--axis); stroke-width: 1; stroke-dasharray: none; }

/* Donut: 2px surface gap between arcs comes from the stroke gap, not a border. */
.viz .arc { transition: opacity var(--t-fast) var(--ease); cursor: pointer; }
.viz .donut-center-value {
  fill: var(--text); font-family: var(--font); font-weight: 660;
  text-anchor: middle; font-size: 26px;
}
.viz .donut-center-label {
  fill: var(--text-3); font-family: var(--font); font-size: 11px;
  text-anchor: middle; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}

/* Legend — always present for two or more series ---------------------------- */
.legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--border);
}
.legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-12); color: var(--text-2);
  cursor: default;
}
.legend-item .swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.legend-item .swatch.is-line { height: 3px; border-radius: 2px; width: 14px; flex-basis: 14px; }
.legend-item .val {
  color: var(--text); font-weight: 620; font-variant-numeric: tabular-nums;
}

/* Tooltip ------------------------------------------------------------------- */
.viz-tip {
  position: fixed; z-index: 140; pointer-events: none;
  padding: 8px 10px; min-width: 118px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-4);
  font-size: var(--fs-12); color: var(--text);
  opacity: 0; transform: translateY(3px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.viz-tip.is-on { opacity: 1; transform: none; }
.viz-tip .tip-title { font-weight: 620; margin-bottom: 5px; }
.viz-tip .tip-row { display: flex; align-items: center; gap: var(--s2); margin-top: 3px; }
.viz-tip .tip-row .swatch { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.viz-tip .tip-row .k { color: var(--text-2); }
.viz-tip .tip-row .v { margin-left: auto; font-weight: 620; font-variant-numeric: tabular-nums; }

/* Table view twin ----------------------------------------------------------- */
.viz-table { font-size: var(--fs-12); }
.viz-table th, .viz-table td { padding: 7px var(--s3); border-bottom: 1px solid var(--border); text-align: left; }
.viz-table th { color: var(--text-3); font-weight: 620; font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .05em; }
.viz-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.viz-table tr:last-child td { border-bottom: none; }
.viz-table .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; }

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */
.stat {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5);
  position: relative; overflow: hidden;
}
.stat .stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.stat .stat-label { font-size: var(--fs-12); font-weight: 560; color: var(--text-2); }
.stat .stat-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
}
.stat .stat-ico svg { width: 17px; height: 17px; }
.stat .stat-ico.is-good     { background: var(--good-soft);     color: var(--good-ink); }
.stat .stat-ico.is-warning  { background: var(--warning-soft);  color: var(--warning-ink); }
.stat .stat-ico.is-critical { background: var(--critical-soft); color: var(--critical-ink); }
.stat .stat-value {
  font-size: var(--fs-30); font-weight: 660; letter-spacing: -.025em; line-height: 1.05;
  /* proportional figures — tabular would look loose at this size */
}
.stat .stat-foot { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-12); }
.stat .delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 620; }
.stat .delta svg { width: 13px; height: 13px; }
.stat .delta.is-up   { color: var(--good-ink); }
.stat .delta.is-down { color: var(--critical-ink); }
.stat .delta.is-flat { color: var(--text-3); }
.stat .stat-note { color: var(--text-3); }
.stat .spark { margin-top: auto; }

/* Hero figure — exactly one per view, same sans as everything else. */
.hero-figure {
  font-size: var(--fs-38); font-weight: 680; letter-spacing: -.03em; line-height: 1;
}

/* --------------------------------------------------------------------------
   Progress ring
   -------------------------------------------------------------------------- */
.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { transform: rotate(-90deg); }
.ring .track { fill: none; stroke: var(--ord-track); }
.ring .value { fill: none; stroke: var(--series-1); stroke-linecap: round; transition: stroke-dashoffset var(--t-slow) var(--ease-out); }
.ring .ring-text {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.ring .ring-text b { font-size: var(--fs-18); font-weight: 660; line-height: 1; }
.ring .ring-text span { font-size: var(--fs-11); color: var(--text-3); font-weight: 600; }

/* --------------------------------------------------------------------------
   Timeline / milestones
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: var(--s6); }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border); border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: var(--s5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: calc(var(--s6) * -1 + 4px); top: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong);
  box-shadow: 0 0 0 3px var(--surface);
}
.tl-item.is-done::before    { background: var(--good);     border-color: var(--good); }
.tl-item.is-active::before  { background: var(--series-1); border-color: var(--series-1); }
.tl-item.is-late::before    { background: var(--critical); border-color: var(--critical); }
.tl-item .tl-title { font-size: var(--fs-14); font-weight: 600; }
.tl-item .tl-meta { font-size: var(--fs-12); color: var(--text-3); margin-top: 2px; }
.tl-item .tl-note { font-size: var(--fs-13); color: var(--text-2); margin-top: var(--s2); }

/* Programme strip ----------------------------------------------------------
   One track from project start to target completion, with a marker at each
   milestone. Driven by milestone dates, which genuinely span the programme.
   -------------------------------------------------------------------------- */
.pstrip { padding-top: var(--s5); }
.pstrip-track {
  position: relative; height: 10px; border-radius: var(--r-full);
  background: var(--ord-track);
}
.pstrip-elapsed {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--r-full);
  background: var(--series-1); opacity: .3;
}
.pstrip-mark {
  position: absolute; top: 50%; width: 14px; height: 14px;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 3px solid var(--border-strong); background: var(--surface);
  box-shadow: 0 0 0 2px var(--surface);   /* 2px surface ring, as on chart dots */
  cursor: help;
  transition: transform var(--t-fast) var(--ease);
}
.pstrip-mark:hover { transform: translate(-50%, -50%) scale(1.3); }
.pstrip-mark.done    { border-color: var(--good);     background: var(--good); }
.pstrip-mark.active  { border-color: var(--series-1); background: var(--series-1); }
.pstrip-mark.late    { border-color: var(--critical); background: var(--critical); }
.pstrip-mark.planned { border-color: var(--border-strong); background: var(--surface); }
.pstrip-today {
  position: absolute; top: -8px; bottom: -8px; width: 2px;
  background: var(--critical); border-radius: 1px;
}
.pstrip-scale {
  display: flex; justify-content: space-between;
  margin-top: var(--s4); font-size: var(--fs-11); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pstrip-key {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--border-strong); background: var(--surface); flex: 0 0 auto;
}
.pstrip-key.is-done   { border-color: var(--good);     background: var(--good); }
.pstrip-key.is-active { border-color: var(--series-1); background: var(--series-1); }
.pstrip-key.is-late   { border-color: var(--critical); background: var(--critical); }
.pstrip-key.is-today  { width: 2px; height: 12px; border-radius: 1px; border: none;
                        background: var(--critical); }