/* Timeline Gantt layout — P3.1-003.
 *
 * Static layout only. Each bar's STAGE colour (background/border) and its
 * left/width-percent are dynamic and supplied server-side as an inline
 * `style` attribute (STAGE_STYLE_WEB is the single colour source-of-truth;
 * hard-coding 13 stage classes here would risk byte-drift). Consumes the
 * tokens.css custom properties. No remote font rules, no cross-file CSS
 * includes, no url() — the offline workstation (INV-4) fetches nothing.
 */

.gantt {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.gantt-window {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.gantt-row {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-1) 0;
}

.gantt-row .gantt-label {
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
}

.gantt-track {
  position: relative;
  height: 1.1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.gantt-bar {
  /* left + width + background + border-color arrive inline (dynamic stage
     colour + window position); only the static box model lives here. */
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.gantt-row .gantt-untimed {
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}

.gantt-empty {
  color: var(--muted);
}

/* --- Edge activity strip (P3.1-006) ------------------------------------ */
/* Column heights arrive inline (dynamic percent of the busiest slot);
   everything else — including the single accent colour — is static. */

.activity {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.activity-columns {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 8rem;
  padding: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.activity-slot {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.activity-col {
  width: 100%;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

.activity-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.activity-untimed,
.activity-empty {
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- View switcher link variant (P3.3-011 #5) -------------------------- */
/* console.css styles the segmented .view-switcher container + its button
   children; the timeline switcher is a set of server-side <a> tabs, so mirror
   the button look for links. Declared here (loads after console.css) so the
   link rules win without !important. */

.view-switcher {
  margin-bottom: var(--space-4);
}

.view-switcher a {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.view-switcher a:hover,
.view-switcher a:focus {
  color: var(--text);
}

.view-switcher a.active {
  color: var(--heading);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* Edge-mode route cell: keep the from→to addresses on one line, monospace. */
#timeline-edges .edge-route {
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* --- Group bar chart (P3.3 #4) ---------------------------------------- */
/* Horizontal bars of edge count per group (chain / cluster / attribution).
   Each fill width arrives inline (dynamic percent of the busiest group;
   STAGE/gantt precedent). label | track | value three-column grid. */
.group-bars {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.group-bar-row {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr minmax(2.5rem, max-content);
  align-items: center;
  gap: var(--space-3);
}

.group-bar-label {
  color: var(--text);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-bar-track {
  height: 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.group-bar-fill {
  /* width arrives inline (dynamic percent); only the static box model + colour
     live here. min-width keeps a non-empty group visible at a 1% floor. */
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.group-bar-value {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Stage x Time heatmap (P3.3-012 #3a) ------------------------------- */
/* Rows = stages, columns = time slots. Each cell's rgba tint of the stage
   colour arrives inline (dynamic); only the static box model + the plain
   empty-cell track live here. */
.heatmap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.heatmap-row {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  align-items: center;
  gap: var(--space-3);
}

.heatmap-label {
  color: var(--text);
  font-size: 0.82rem;
  white-space: nowrap;
  border-left: 3px solid var(--border);
  padding-left: var(--space-2);
}

.heatmap-cells {
  display: flex;
  gap: 2px;
  height: 1.15rem;
}

.heatmap-cell {
  /* An empty cell keeps the plain track so the time grid stays legible; a
     non-empty cell carries a VALUE-driven level class (heat-l{N}, P3.3-018-C)
     whose colour comes from the high-contrast ramp below. The stage hue no
     longer tints the cell — value does. */
  flex: 1 1 0;
  min-width: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
}

/* Value-driven sequential heat ramp (P3.3-018-C). Five perceptually-ordered,
   clearly distinguishable steps that read on the DARK default background
   (--bg:#0f1419). The intensity is the cell VALUE (level), NOT the stage hue
   (which stays on the row label). A class — not a server `rgba()` — is the only
   way to vary the ramp per theme, since the server is theme-blind.

   The SAME ramp paints both the heatmap CELLS and the legend SWATCHES, so the
   swatch legend (_fragments/heatmap_legend.html) renders the exact colours it
   labels low..high. Only the ramp colour is shared — each element keeps its own
   box model (the cell/swatch rules above own border-radius/size). The empty-cell
   contract is unchanged: an element without a `.heat-l{N}` class gets no ramp. */
/* P3.3-024: the single-hue ramp re-based onto the OFFICIAL KRDS (Korea Design
   System) INFORMATION (blue) scale — the gov design system for this KIDA tool
   (style_02 Information-5..90). One analogous blue family where the DEPTH of the
   colour, not the hue, encodes the count: 연한 blue = low, 진한 blue = high. The
   geometric Python ramp (_heat_level) is UNCHANGED — only these colour literals
   move. On the near-black DARK bg (var(--bg) #0f1419) the deep blues vanish, so
   the dark theme runs the LIGHTER Information window (10->50): every rung clears
   the WCAG 1.4.11 non-text 3:1 floor — l1 #d4e1ff ≈ 14:1 down to the deepest l5
   #2768ff (Information-50/Base) ≈ 3.98:1, the binding floor on this bg. Fills AND
   borders are EXACT KRDS Information tokens (border = the next-lighter token). */
.heatmap-cell.heat-l1,
.heatmap-swatch.heat-l1 {
  background: #d4e1ff;
  border-color: #e9f0ff;
}
.heatmap-cell.heat-l2,
.heatmap-swatch.heat-l2 {
  background: #a9c3ff;
  border-color: #d4e1ff;
}
.heatmap-cell.heat-l3,
.heatmap-swatch.heat-l3 {
  background: #7da4ff;
  border-color: #a9c3ff;
}
.heatmap-cell.heat-l4,
.heatmap-swatch.heat-l4 {
  background: #5286ff;
  border-color: #7da4ff;
}
.heatmap-cell.heat-l5,
.heatmap-swatch.heat-l5 {
  background: #2768ff;
  border-color: #5286ff;
}

/* Light-theme variant of the KRDS Information ramp (P3.3-024). On the light canvas
   (--bg:#f7f8fa) the pale Information blues (5..30) wash out, so the same blue
   family runs the DARKER Information window (40->80): l1 #5286ff (Information-40)
   ≈ 3.18:1 — the lowest rung still clears the WCAG 1.4.11 non-text 3:1 floor KRDS
   itself mandates — up to l5 #0c1f4d (Information-80) ≈ 15:1. Fills AND borders
   are EXACT KRDS Information tokens (border = the next-darker token). Cells and
   swatches share the override so the legend tracks the cells on both themes. */
:root[data-theme="light"] .heatmap-cell.heat-l1,
:root[data-theme="light"] .heatmap-swatch.heat-l1 {
  background: #5286ff;
  border-color: #2768ff;
}
:root[data-theme="light"] .heatmap-cell.heat-l2,
:root[data-theme="light"] .heatmap-swatch.heat-l2 {
  background: #2768ff;
  border-color: #1f53cc;
}
:root[data-theme="light"] .heatmap-cell.heat-l3,
:root[data-theme="light"] .heatmap-swatch.heat-l3 {
  background: #1f53cc;
  border-color: #173e99;
}
:root[data-theme="light"] .heatmap-cell.heat-l4,
:root[data-theme="light"] .heatmap-swatch.heat-l4 {
  background: #173e99;
  border-color: #0c1f4d;
}
:root[data-theme="light"] .heatmap-cell.heat-l5,
:root[data-theme="light"] .heatmap-swatch.heat-l5 {
  background: #0c1f4d;
  border-color: #040a1a;
}

/* Swatch legend (P3.3-018-C) — low..high meaning, mirroring .matrix-legend.
   The swatches reuse the .heat-l{N} ramp classes so the legend tracks the
   cells on both themes. */
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.8rem;
}

.heatmap-legend-label {
  white-space: nowrap;
}

.heatmap-swatch {
  width: 1.4rem;
  height: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 2px;
}

.heatmap-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* --- Cumulative fund-movement line chart (P3.3-012 #3b) ---------------- */
/* Inline-SVG polyline; preserveAspectRatio="none" stretches it to the box.
   The points are server-computed; colour + stroke are static. */
.flow-chart {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.flow-chart svg {
  display: block;
  width: 100%;
  height: 14rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.flow-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  /* keep the stroke crisp despite preserveAspectRatio="none" scaling. */
  vector-effect: non-scaling-stroke;
}

.flow-area {
  fill: var(--accent);
  opacity: 0.12;
  stroke: none;
}

.flow-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* --- Stage x Stage transition matrix (P3.3-012 #3c) ------------------- */
/* One CSS grid: a row-label column + N target columns (--matrix-cols arrives
   inline). Cell rgba tints arrive inline; the count text stays opaque. */
.matrix {
  display: grid;
  grid-template-columns: minmax(3rem, max-content) repeat(var(--matrix-cols), minmax(2rem, 1fr));
  gap: 2px;
  margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.matrix-corner,
.matrix-col-head,
.matrix-row-head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.matrix-corner {
  color: var(--muted);
  font-weight: 400;
}

.matrix-row-head {
  text-align: right;
  padding-right: var(--space-1);
}

.matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.matrix-legend {
  color: var(--muted);
  font-size: 0.8rem;
  margin: var(--space-2) 0 0;
}