/* Spectrum CrossCheck · the chart kit's look, v2.1 (u3-foundation; MASTER-PLAN §3.10). The geometry is core/charts.py's;
   the markup is ui/c/chart_*.html ({% load ui_kit %}). Dataviz rules: thin marks, 4 px rounded data ends on a square
   baseline, hairline grid, one axis, text in ink tokens (never the series colour), colour only where money needs a person. */
@layer components {
  .chart, .wbars, .twoev { display: block; width: 100%; height: auto; overflow: visible; }
  .chart text, .twoev text { font-family: var(--font); }

  /* ---- the cells: one square per payment line ---- */
  .cells { display: grid; grid-template-columns: repeat(var(--cols, 32), minmax(0, 1fr)); gap: 3px; }
  .cells i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--cell-ok); transition: transform var(--dur-1) var(--ease-out); }
  .cells i.c-check { background: var(--check-fill); }
  .cells i.c-hold { background: var(--hold-fill); }
  .cells i[tabindex] { animation: cellpop 520ms var(--ease-spring) both; animation-delay: calc(400ms + var(--ci, 0) * 60ms); }
  .cells i:hover, .cells i:focus-visible { transform: scale(1.35); }
  .cells i:focus-visible { outline-offset: 1px; }
  @keyframes cellpop { from { transform: scale(.2); opacity: 0; } }
  .cleg { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--ink-3); }
  .cleg .cl { display: inline-flex; align-items: flex-start; gap: 8px; }
  .cleg .cl > i { width: 10px; height: 10px; border-radius: 2.5px; margin-top: 5px; flex: none; background: var(--cell-ok); }
  .cleg .cl > i.c-check { background: var(--check-fill); } .cleg .cl > i.c-hold { background: var(--hold-fill); }
  .cleg .cl b { display: block; font-size: 14px; font-weight: 620; color: var(--ink); }
  .cleg .cl > span { font-variant-numeric: proportional-nums; }
  .cleg .cl-total { margin-left: auto; text-align: right; }

  /* ---- weekly columns ---- */
  .wbars .grid { stroke: var(--line); stroke-width: 1; }
  .wbars .grid0 { stroke: var(--line-2); stroke-width: 1; }
  .wbars .wb-y, .wbars .wb-x, .wbars .wb-note { font-size: 11px; fill: var(--ink-3); }
  .wbars .wb-val { font-size: 11px; font-weight: 600; fill: var(--ink-2); }
  .wbars .wb-bar { fill: var(--series); transition: opacity var(--dur-1) linear; }
  .wbars .wb-bar.is-history { fill: var(--ink-5); }
  .wbars .wb-bar.is-partial { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
  .wbars .wb-bar:hover, .wbars .wb-bar:focus-visible { opacity: .82; }
  .wbars .wb-bar:focus-visible, .wbars .wb-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .wbars .wb-gap { stroke: var(--ink-4); stroke-width: 2; stroke-dasharray: 2 3; }
  .wbars .wb-hit { fill: transparent; }
  .wbars .hatch { opacity: .55; }
  .wbars .hatch-bg { fill: var(--paper-3); } .wbars .hatch-line { fill: var(--line-3); }
  .wb-single { font-size: var(--t-small); color: var(--ink-2); }

  /* ---- last night: one diverging row per outlet ---- */
  .cashrows { display: grid; gap: 4px; }
  .cr { display: grid; grid-template-columns: 116px 1fr 76px; gap: 12px; align-items: center; min-height: 30px; font-size: 14px; }
  .cr-n { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cr-bar { position: relative; height: 22px; }
  .cr-band { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--paper-3); }
  .cr-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-3); }
  .cr-v { position: absolute; top: 6px; height: 10px; border-radius: 3px; background: var(--ink-4); }
  .cr-v.neg { border-radius: 4px 0 0 4px; } .cr-v.pos { border-radius: 0 4px 4px 0; }
  .cr-v.beyond { background: var(--check-fill); }
  .cr-a { text-align: right; font-variant-numeric: proportional-nums; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
  .cr-a.is-gap { font-weight: 500; color: var(--ink-3); font-size: 13px; }

  /* ---- horizontal bars (one hue) ---- */
  .hbars { display: grid; gap: 10px; }
  .hb { display: grid; grid-template-columns: minmax(0, 1fr) 120px 92px; gap: 12px; align-items: center; font-size: 14px; }
  .hb-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hb-n small { color: var(--ink-3); margin-left: 6px; font-size: 12.5px; }
  .hb-t { height: 8px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
  .hb-t i { display: block; height: 100%; border-radius: 4px; background: var(--series); animation: grow 900ms var(--ease-out) 200ms both; transform-origin: left; }
  @keyframes grow { from { transform: scaleX(0); } }
  .hb-a { text-align: right; }

  /* ---- the proof as a labelled sum ---- */
  .psum2 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; }
  .psum2 .pt { display: flex; flex-direction: column; gap: 1px; }
  .psum2 .pt .amt { font-size: 19px; font-weight: 640; letter-spacing: -.01em; }
  .psum2 .pt small { font-size: 12px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
  .psum2 .pt.hold .amt, .psum2 .pt.less .amt, .psum2 .pt.res.hold .amt { color: var(--hold); }
  .psum2 .pt.check .amt { color: var(--check); }
  .psum2 .op { font-size: 18px; color: var(--ink-4); padding-top: 1px; }
  .pnote { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }

  /* ---- the two moments ---- */
  .twoev { margin-top: 14px; max-width: 420px; }
  .twoev .te-line { stroke: var(--line-3); stroke-width: 1.5; }
  .twoev .te-dot { stroke-width: 2; }
  .twoev .te-dot.is-ok { fill: var(--ok-tint); stroke: var(--lit); }
  .twoev .te-dot.is-hold { fill: var(--hold-tint); stroke: var(--hold-fill); }
  .twoev .te-dot.is-check { fill: var(--check-tint); stroke: var(--check-fill); }
  .twoev .te-tick { fill: none; stroke: var(--lit-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .twoev .te-bang { stroke-width: 2.2; stroke-linecap: round; stroke: var(--hold-fill); }
  .twoev .te-bang.is-check { stroke: var(--check); }
  .twoev .te-bang-dot { fill: var(--hold-fill); } .twoev .te-bang-dot.is-check { fill: var(--check); }
  .twoev .te-t { font-size: 12.5px; font-weight: 640; fill: var(--ink); }
  .twoev .te-t.is-hold { fill: var(--hold); } .twoev .te-t.is-check { fill: var(--check); }
  .twoev .te-s { font-size: 12px; fill: var(--ink-3); }
  .twoev .te-mid { font-size: 11px; fill: var(--ink-3); paint-order: stroke; stroke: var(--paper); stroke-width: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .cells i[tabindex] { animation: fade 300ms ease both !important; }
    .hb-t i { animation: fade 300ms ease both; }
  }
}
@media print {
  @layer components {
    .cells i.c-check, .cleg .cl > i.c-check { background: #fff; box-shadow: inset 0 0 0 1.5px #000; }
    .cells i.c-hold, .cleg .cl > i.c-hold { background: #000; }
    .wbars .wb-bar { fill: #555; } .cr-v.beyond { background: #000; } .hb-t i { background: #444; }
  }
}