/* Figures: the almanac table (stat() rows inside .stat-grid) — 2 px ink rule on top, one row per number:
   kicker · dotted leader · figure, caption beneath, optional bar under the row. Never 2×2 tiles, never a box.
   Desktop: two columns (:not(.stack)); .stack = one column with larger figures (dashboard).
   Also: progress bar, ring, bar chart. */
@layer components {
  .stat-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 3px solid var(--accent); margin: 4px 0 18px; }
  .stat-grid > .stat {
    display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 10px; min-width: 0;
    padding: 10px 0 9px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; color: inherit;
  }
  .stat-grid > .stat:first-child { border-top: 0; }
  .stat-grid > .stat::after { content: ""; grid-area: 1 / 2; align-self: end; min-width: 16px; margin-bottom: 7px; border-bottom: 2px dotted var(--rule-2); }
  .stat-label { grid-area: 1 / 1; font-size: var(--fs-kicker); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; }
  .stat-value {
    grid-area: 1 / 3; text-align: right; white-space: nowrap; line-height: 1;
    font-family: var(--font-display); font-weight: var(--w-display); font-size: 26px; letter-spacing: var(--ls-fig);
    font-variant-numeric: tabular-nums lining-nums; font-variation-settings: var(--fvs-fig);
  }
  .stat-value small { font-size: .5em; font-weight: 500; letter-spacing: 0; }
  .stat-value.good { color: var(--good); } .stat-value.danger { color: var(--danger); } .stat-value.warn { color: var(--warn); } .stat-value.accent { color: var(--accent); }
  .stat-sub { display: block; grid-area: 2 / 1 / 2 / -1; margin-top: 1px; font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.35; }
  .stat > .progress { grid-area: 3 / 1 / 3 / -1; margin-top: 8px; }
  .stat-grid.stack > .stat .stat-value { font-size: 30px; }

  /* progress: thin rule with accent fill (--p 0…1 set inline by progress()) */
  .progress { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: var(--rule); }
  .progress > span { position: absolute; inset: 0; border-radius: 3px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 700ms var(--ease-out); }
  .progress-good > span { background: var(--good); }
  .progress-warn > span { background: var(--warn); }
  .progress-danger > span { background: var(--danger); }

  /* ring (ringChart) */
  /* size: --ring (inline, from the helper's size option); a view overrides it with --ring-size on an ancestor */
  .ring { position: relative; flex: none; width: var(--ring-size, var(--ring, 132px)); aspect-ratio: 1; }
  .ring svg { display: block; width: 100%; height: 100%; }
  .ring-ink .ring-fg { stroke: var(--ink); }
  .ring-bg { stroke: var(--rule); }
  .ring-fg { stroke: var(--accent); stroke-linecap: butt; transition: stroke-dashoffset .8s var(--ease-out); }
  .ring-warn .ring-fg { stroke: var(--warn); } .ring-danger .ring-fg { stroke: var(--danger); } .ring-good .ring-fg { stroke: var(--good); }
  .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ring-label { font-family: var(--font-display); font-weight: var(--w-display); font-size: 26px; letter-spacing: var(--ls-fig); font-variant-numeric: tabular-nums; font-variation-settings: var(--fvs-fig); }
  .ring-sub { font-size: var(--fs-kicker); color: var(--ink-3); }

  /* bar chart (barChart): ink / accent bars, no gradients */
  .chart { width: 100%; height: auto; overflow: visible; }
  .ch-grid { stroke: var(--rule); stroke-width: 1; }
  .ch-bar { fill: var(--rule-2); }
  .ch-bar-hi { fill: var(--accent); }
  .ch-bar2 { fill: var(--good); }
  .ch-label { fill: var(--ink-3); font-size: 11.5px; font-family: var(--font-text); }
  .ch-goal { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 5; }
  .ch-goal-label { fill: var(--warn); font-size: 11px; font-family: var(--font-text); font-weight: 600; }
  .chart-wrap { padding: 4px 0; }
  .chart-foot { display: flex; flex-wrap: wrap; gap: 12px 48px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--rule); }
  .chart-foot > span { display: flex; flex-direction: column; font-size: var(--fs-caption); color: var(--ink-2); }
  .chart-foot b { font-size: var(--fs-lead); color: var(--ink); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  /* variant "ink": accrued = faint ink, paid = ink, the latest paid bar = accent */
  .chart-ink .ch-bar, .chart-ink .ch-bar-hi { fill: var(--ink); opacity: .32; }
  .chart-ink .ch-bar2 { fill: var(--ink); }
  .chart-ink g:last-of-type .ch-bar2 { fill: var(--accent); }

  /* legend (chartLegend()) */
  .legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-caption); color: var(--ink-2); }
  .legend > span { display: inline-flex; align-items: center; }
  .lg { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; }
  .lg-bar { background: var(--accent); } .lg-bar2 { background: var(--good); }
  .legend-ink .lg-bar { background: var(--ink); opacity: .32; }
  .legend-ink .lg-bar2 { background: var(--ink); }

  @media (min-width: 761px) {
    .stat-grid:not(.stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
    .stat-grid:not(.stack) > .stat:nth-child(2) { border-top: 0; }
    .stat-label { white-space: nowrap; }
    .stat-value { font-size: 28px; }
    .stat-grid.stack > .stat .stat-value { font-size: 32px; }
  }
  @media (min-width: 1100px) {
    .stat-value { font-size: 30px; }
    .stat-grid.stack > .stat .stat-value { font-size: 34px; }
  }
  @media (max-width: 380px) { .stat-value { font-size: 24px; } }
}