/* ══════════════════════════════════════════════════════════════════════════
   canon-overview.css — the Overview board and Today, on canon v5.

   A PORT OF THE MARKUP WE HAVE. Production's Overview is the customisable
   widget board (feature_books_widgets) on a desktop and Today on a phone. The
   board's cards are overview-page.js's canon cards (.grid/.card/.kpi/.chart/
   .donut/.age/.tbl-inv/.crow …), mounted by js/dashboard/widget-host.js, whose
   Customize / Add widget / Settings chrome is its own markup. All of it keeps
   that markup and is drawn here. The one new card, the headline, is canon
   markup already.

   books-canon.css drew these cards from tokens that tokens.css defines only
   under html.books-v4 (--card, --muted, --num, --t-fig, --c-inv, --age-0 …).
   Under the canon that class is not guaranteed, so the names are bridged onto
   the canon's own --c-* tokens below, scoped to the three places this markup
   lives. The rules themselves follow books-canon.css value for value.

   widget-host.js injects an UNLAYERED stylesheet, which would outrank every
   layered rule here; under the canon it now skips that (the money sub-nav's
   trap), so the host chrome it used to style is drawn here too.

   Loaded only while feature_canon_v5 is on. books.css, ui.css and
   books-canon.css are switched off by the same gate. today.css stays: it is
   media-scoped and reads the global --app-* tokens.
   ══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── The token bridge ─────────────────────────────────────────────────── */
  :root.canon-v5 :is(#ovGrid, .tip, .wgt-fallback-modal) {
    --r-2xs: 2px; --r-xs: 3px; --r-sm: 4px; --r: 6px; --r-lg: 10px; --r-pill: 999px;
    --face: "Sora", system-ui, -apple-system, sans-serif;
    --num: "Inter", system-ui, sans-serif;
    --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-base: 13px;
    --t-md: 14px; --t-lg: 15px; --t-xl: 17px; --t-2xl: 20px; --t-fig: 26px; --t-fig-lg: 32px;
    --icon-lg: 30px;
    --bg: var(--c-bg); --surface: var(--c-surface);
    --card: var(--c-card); --card-2: var(--c-card-2); --sunken: var(--c-sunken);
    --border: var(--c-border); --border-2: var(--c-border-2);
    --text: var(--c-text); --text-2: var(--c-text-2); --muted: var(--c-cap);
    --accent: var(--c-accent); --accent-h: var(--c-accent-h); --accent-fg: var(--c-accent-fg);
    --accent-soft: var(--c-accent-soft); --accent-edge: var(--c-accent-edge);
    --ok: var(--c-ok); --warn: var(--c-warn); --danger: var(--c-danger);
    --danger-soft: var(--c-danger-soft); --danger-fg: var(--c-cta-fg);
    --shadow: var(--lift), var(--lift-edge);
    --placeholder: var(--c-cap);
    --grid: var(--c-grid); --axis: var(--c-axis);
    --c-inv: var(--c-in); --c-coll: var(--c-out);
    --c-paid: var(--c-out); --c-await: var(--c-in); --c-over: var(--c-danger); --c-draft: var(--c-bar);
    --age-0: var(--c-age-0); --age-1: var(--c-age-1); --age-2: var(--c-age-2); --age-3: var(--c-age-3);
  }

  /* ── The shell ────────────────────────────────────────────────────────── */
  :root.canon-v5 #ovGrid a { color: inherit; text-decoration: none; }
  :root.canon-v5 #ovGrid :is(h1, h2, h3) { margin: 0; font-weight: 600; letter-spacing: -.01em; }
  :root.canon-v5 #ovGrid .num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  /* Components built on a <button> own their look; the UA's grey box must not
     show through. */
  :root.canon-v5 #ovGrid :is(.crow, .age-r, .dl-i, .tab) { background: none; border-style: none; font: inherit; color: inherit; cursor: pointer; }
  :root.canon-v5 #ovGrid button.card { font: inherit; color: inherit; text-align: left; cursor: pointer; }

  /* ── Cards and the grid ───────────────────────────────────────────────── */
  :root.canon-v5 #ovGrid .grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(12, 1fr); }
  :root.canon-v5 #ovGrid .grid + .grid { margin-top: var(--sp-4); }
  :root.canon-v5 #ovGrid .c3 { grid-column: span 3; }
  :root.canon-v5 #ovGrid .c4 { grid-column: span 4; }
  :root.canon-v5 #ovGrid .c6 { grid-column: span 6; }
  :root.canon-v5 #ovGrid .c8 { grid-column: span 8; }
  :root.canon-v5 #ovGrid .c12 { grid-column: span 12; }
  :root.canon-v5 #ovGrid .card {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow);
  }
  :root.canon-v5 #ovGrid .card-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) 0; }
  :root.canon-v5 #ovGrid .card-h h2 { flex: 0 0 auto; font-size: var(--t-md); font-weight: 600; letter-spacing: -.005em; }
  :root.canon-v5 #ovGrid .card-h p { margin: 0; font-size: var(--t-sm); color: var(--muted); }
  :root.canon-v5 #ovGrid .card-h .sp { margin-left: auto; }
  :root.canon-v5 #ovGrid .card-b { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  :root.canon-v5 #ovGrid .card-b.fill { flex: 1; display: flex; flex-direction: column; }
  :root.canon-v5 #ovGrid .card-b.fill .age-foot { margin-top: auto; }
  :root.canon-v5 #ovGrid .card-b.cn-rows { padding: 0; }

  /* The canon buttons the cards use: a ghost, beside the canon .btn. */
  :root.canon-v5 #ovGrid .btn.gh { background: transparent; border-color: transparent; color: var(--text-2); }
  :root.canon-v5 #ovGrid .btn.gh:hover { background: var(--card-2); color: var(--text); }

  /* ── KPI tiles ────────────────────────────────────────────────────────── */
  :root.canon-v5 #ovGrid .kpi { display: block; width: 100%; padding: var(--sp-4) var(--sp-5); text-align: left; }
  :root.canon-v5 #ovGrid .kpi:hover { border-color: var(--border-2); }
  :root.canon-v5 #ovGrid .kpi-l { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 500; color: var(--text-2); }
  :root.canon-v5 #ovGrid .kpi-l i { font-size: var(--t-lg); color: var(--muted); }
  :root.canon-v5 #ovGrid .kpi-v {
    display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-3) 0 0;
    font-family: var(--num); font-size: var(--t-fig); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  }
  :root.canon-v5 #ovGrid .kpi-v small { font-family: var(--face); font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; color: var(--muted); }
  :root.canon-v5 #ovGrid .kpi-v.bad { color: var(--c-on-wash-danger); }
  :root.canon-v5 #ovGrid .kpi-f { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); min-height: 22px; margin-top: var(--sp-3); }
  :root.canon-v5 #ovGrid .kpi-f > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--muted); }
  :root.canon-v5 #ovGrid .delta {
    display: inline-flex; flex: none; align-items: center; gap: 3px; padding: 2px 6px; border-radius: var(--r-sm);
    font-family: var(--num); font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  }
  :root.canon-v5 #ovGrid .delta i { font-size: 13px; }
  :root.canon-v5 #ovGrid .kpi-f > span.delta { overflow: visible; }
  :root.canon-v5 #ovGrid .delta.up { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--c-on-wash-ok); }
  :root.canon-v5 #ovGrid .delta.dn { background: var(--danger-soft); color: var(--c-on-wash-danger); }
  :root.canon-v5 #ovGrid .delta.flat { background: var(--card-2); color: var(--text-2); }
  :root.canon-v5 #ovGrid .spark { display: block; flex: none; margin-left: auto; }

  /* ── Charts ───────────────────────────────────────────────────────────── */
  :root.canon-v5 #ovGrid .chart-box { position: relative; flex: 1; min-height: 250px; }
  :root.canon-v5 #ovGrid .chart { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
  :root.canon-v5 #ovGrid .chart text { font-family: var(--num); font-size: 10.5px; font-variant-numeric: tabular-nums; fill: var(--muted); }
  :root.canon-v5 #ovGrid .chart .gl { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
  :root.canon-v5 #ovGrid .chart .ax { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
  :root.canon-v5 #ovGrid .bar { transition: opacity var(--dur) var(--ease); }
  :root.canon-v5 #ovGrid .chart.dim .bar:not(.hi) { opacity: .35; }
  :root.canon-v5 #ovGrid .hitbox { fill: transparent; cursor: pointer; }
  :root.canon-v5 #ovGrid .lgd { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); }
  :root.canon-v5 #ovGrid .lgd-i { display: flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--text-2); }
  :root.canon-v5 #ovGrid .sw { flex: none; width: 9px; height: 9px; border-radius: var(--r-2xs); }
  :root.canon-v5 #ovGrid .sw.hatch {
    background: repeating-linear-gradient(45deg, var(--c-draft) 0 2px, color-mix(in srgb, var(--c-draft) 35%, transparent) 2px 4px);
  }
  :root.canon-v5 #ovGrid .dl { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-3); }
  :root.canon-v5 #ovGrid .dl-i {
    display: grid; grid-template-columns: 9px 1fr auto auto; align-items: center; gap: var(--sp-3);
    width: 100%; padding: 7px var(--sp-2); border-radius: var(--r); text-align: left; font-size: var(--t-sm);
    transition: background var(--dur) var(--ease);
  }
  :root.canon-v5 #ovGrid .dl-i:hover,
  :root.canon-v5 #ovGrid .dl-i.hi { background: var(--card-2); }
  :root.canon-v5 #ovGrid .dl-i .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
  :root.canon-v5 #ovGrid .dl-i .ct { font-family: var(--num); font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--muted); }
  :root.canon-v5 #ovGrid .dl-i .vl { font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
  :root.canon-v5 #ovGrid .note { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--t-xs); line-height: 1.5; color: var(--muted); }
  :root.canon-v5 #ovGrid .note b { font-weight: 600; color: var(--text-2); }
  :root.canon-v5 #ovGrid .donut-wrap { position: relative; display: grid; place-items: center; }
  :root.canon-v5 #ovGrid .donut-c { position: absolute; text-align: center; pointer-events: none; }
  :root.canon-v5 #ovGrid .donut-c b { display: block; font-family: var(--num); font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  :root.canon-v5 #ovGrid .donut-c span { font-size: var(--t-xs); color: var(--muted); }
  /* The donut's arcs are .seg, which is also the canon's segmented control.
     An SVG circle ignores the control's box, but not its transition. */
  :root.canon-v5 #ovGrid .donut .seg { transition: opacity var(--dur) var(--ease); cursor: pointer; }
  :root.canon-v5 #ovGrid .donut.dim .seg:not(.hi) { opacity: .3; }

  /* ── Money by age (and the quotes and landing cards, same row shape) ──── */
  :root.canon-v5 #ovGrid .age { display: flex; flex-direction: column; gap: var(--sp-3); }
  :root.canon-v5 #ovGrid .card-b.fill .age { flex: 1; justify-content: space-evenly; }
  :root.canon-v5 #ovGrid .age-r { display: grid; grid-template-columns: 88px 1fr 92px; align-items: center; gap: var(--sp-3); width: 100%; padding: 0; text-align: left; }
  :root.canon-v5 #ovGrid .age-l { font-size: var(--t-sm); color: var(--text-2); }
  :root.canon-v5 #ovGrid .age-t { display: block; height: 10px; overflow: hidden; border-radius: var(--r-xs); background: var(--sunken); }
  :root.canon-v5 #ovGrid .age-f { display: block; height: 100%; border-radius: var(--r-xs); transition: filter var(--dur) var(--ease); }
  :root.canon-v5 #ovGrid .age-r:hover .age-f { filter: brightness(1.12); }
  :root.canon-v5 #ovGrid .age-v { text-align: right; font-family: var(--num); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
  :root.canon-v5 #ovGrid .age-foot {
    display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--sp-4); padding-top: var(--sp-3);
    border-top: 1px solid var(--border); font-size: var(--t-sm); color: var(--muted);
  }
  :root.canon-v5 #ovGrid .age-foot b { font-family: var(--num); font-size: var(--t-md); font-variant-numeric: tabular-nums; color: var(--text); }
  :root.canon-v5 #ovGrid .prog { display: block; height: 10px; overflow: hidden; border-radius: var(--r-xs); background: var(--sunken); }
  :root.canon-v5 #ovGrid .prog i { display: block; height: 100%; border-radius: var(--r-xs); background: var(--accent); }
  :root.canon-v5 #ovGrid .prog i.short { background: var(--warn); }

  /* ── Tables ───────────────────────────────────────────────────────────── */
  :root.canon-v5 #ovGrid .tbl-wrap { overflow-x: auto; }
  :root.canon-v5 #ovGrid table { width: 100%; border-collapse: collapse; }
  :root.canon-v5 #ovGrid th {
    position: sticky; top: 0; z-index: 1; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border);
    background: var(--card); text-align: left; white-space: nowrap;
    font-size: var(--t-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  :root.canon-v5 #ovGrid :is(th, td).r { text-align: right; }
  :root.canon-v5 #ovGrid td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--t-md); vertical-align: middle; }
  :root.canon-v5 #ovGrid tbody tr { transition: background var(--dur) var(--ease); }
  :root.canon-v5 #ovGrid tbody tr:hover { background: var(--card-2); }
  :root.canon-v5 #ovGrid tbody tr:last-child td { border-bottom: 0; }
  :root.canon-v5 #ovGrid :is(th, td).num { font-family: var(--num); font-variant-numeric: tabular-nums; }
  :root.canon-v5 #ovGrid .cust { font-weight: 500; }
  :root.canon-v5 #ovGrid .sub { display: block; font-size: var(--t-sm); font-weight: 400; color: var(--muted); }
  :root.canon-v5 #ovGrid .docn { font-family: var(--num); font-size: var(--t-sm); white-space: nowrap; color: var(--text-2); }
  /* Needs-attention rows open their invoice (overview-page.js, cnRowLinks). The
     number is the real link; the rest of the row follows it on click. */
  :root.canon-v5 #ovGrid tr.ov-att-row { cursor: pointer; }
  :root.canon-v5 #ovGrid a.docn { text-decoration: none; }
  :root.canon-v5 #ovGrid tr.ov-att-row:hover a.docn,
  :root.canon-v5 #ovGrid a.docn:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
  :root.canon-v5 #ovGrid .amt { font-weight: 600; white-space: nowrap; }
  :root.canon-v5 #ovGrid .amt small { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--muted); }
  :root.canon-v5 #ovGrid .tabs { display: flex; gap: 2px; margin-bottom: var(--sp-4); overflow-x: auto; border-bottom: 1px solid var(--border); }
  :root.canon-v5 #ovGrid .tab {
    margin-bottom: -1px; padding: var(--sp-2) var(--sp-3) 10px; border-bottom: 2px solid transparent;
    font-size: var(--t-md); white-space: nowrap; color: var(--muted); transition: color var(--dur) var(--ease);
  }
  :root.canon-v5 #ovGrid .tab:hover { color: var(--text-2); }
  :root.canon-v5 #ovGrid .tab.on { border-bottom: 2px solid var(--accent); font-weight: 500; color: var(--text); }

  /* ── Rows of people and things ────────────────────────────────────────── */
  :root.canon-v5 #ovGrid .crow {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
    width: 100%; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border); border-left: 2px solid transparent;
    text-align: left; transition: background var(--dur) var(--ease);
  }
  :root.canon-v5 #ovGrid .crow:last-child { border-bottom: 0; }
  :root.canon-v5 #ovGrid .crow:hover { background: var(--card-2); }
  :root.canon-v5 #ovGrid .crow .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-md); font-weight: 500; }
  :root.canon-v5 #ovGrid .crow .ct { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); color: var(--muted); }
  :root.canon-v5 #ovGrid .crow .rt { text-align: right; }
  :root.canon-v5 #ovGrid .crow .owe { display: block; font-family: var(--num); font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; }
  :root.canon-v5 #ovGrid .crow .owe.bad { color: var(--c-on-wash-danger); }
  :root.canon-v5 #ovGrid .crow .paid { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--c-on-wash-ok); }
  :root.canon-v5 #ovGrid .crow .ago { display: block; margin-top: 2px; font-size: var(--t-2xs); color: var(--muted); }
  :root.canon-v5 #ovGrid .avatar {
    display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: var(--r-lg);
    font-size: var(--t-base); font-weight: 700; letter-spacing: .01em;
  }
  :root.canon-v5 #ovGrid .cn-ico {
    display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--accent-edge); border-radius: var(--r-sm);
    background: var(--accent-soft); color: var(--accent); font-size: var(--t-lg);
  }

  /* ── Timeline, notes, the AI card ─────────────────────────────────────── */
  :root.canon-v5 #ovGrid .tl { display: flex; flex-direction: column; }
  :root.canon-v5 #ovGrid .tl-i { position: relative; display: grid; grid-template-columns: 15px 1fr; gap: var(--sp-3); padding-bottom: var(--sp-4); }
  :root.canon-v5 #ovGrid .tl-i:last-child { padding-bottom: 0; }
  :root.canon-v5 #ovGrid .tl-i::before { content: ""; position: absolute; left: 7px; top: 15px; bottom: 0; width: 1px; background: var(--border); }
  :root.canon-v5 #ovGrid .tl-i:last-child::before { display: none; }
  :root.canon-v5 #ovGrid .tl-d { position: relative; z-index: 1; width: 9px; height: 9px; margin: var(--sp-1) 0 0 3px; border-radius: 50%; background: var(--border-2); box-shadow: 0 0 0 3px var(--card); }
  :root.canon-v5 #ovGrid .tl-d.on { background: var(--accent); }
  :root.canon-v5 #ovGrid .tl-d.bad { background: var(--danger); }
  :root.canon-v5 #ovGrid .tl-t { font-size: var(--t-sm); line-height: 1.4; }
  :root.canon-v5 #ovGrid .tl-t b { font-weight: 500; }
  :root.canon-v5 #ovGrid .tl-t span { display: block; margin-top: 1px; font-size: var(--t-xs); color: var(--muted); }
  :root.canon-v5 #ovGrid .tl-t a { border-bottom: 1px solid var(--accent-edge); }
  :root.canon-v5 #ovGrid .tl-t a:hover { border-bottom-color: var(--accent); color: var(--accent); }
  :root.canon-v5 #ovGrid .tl-i.is-done .tl-t b { font-weight: 400; color: var(--muted); }
  :root.canon-v5 #ovGrid .tl-i.is-done .tl-t span { color: var(--muted); opacity: .7; }
  :root.canon-v5 #ovGrid .advice {
    display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--accent-edge); border-radius: var(--r); background: var(--accent-soft);
    font-size: var(--t-sm); line-height: 1.5;
  }
  :root.canon-v5 #ovGrid .advice i { flex: none; margin-top: 1px; font-size: var(--t-lg); color: var(--accent); }
  :root.canon-v5 #ovGrid .advice b { font-family: var(--num); font-weight: 600; }
  :root.canon-v5 #ovGrid .advice.adv-warn { border-color: color-mix(in srgb, var(--warn) 34%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
  :root.canon-v5 #ovGrid .advice.adv-warn i { color: var(--warn); }
  :root.canon-v5 #ovGrid .advice.adv-good { border-color: color-mix(in srgb, var(--ok) 34%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
  :root.canon-v5 #ovGrid .advice.adv-good i { color: var(--ok); }
  :root.canon-v5 #ovGrid .advice .btn { border-color: var(--border-2); background: var(--card); }
  :root.canon-v5 #ovGrid .card-b > .advice:first-child { margin-top: 0; }
  :root.canon-v5 #ovGrid .ai-sk { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-2) 0; }
  :root.canon-v5 #ovGrid .ai-sk .sk { height: 11px; }
  :root.canon-v5 #ovGrid .gst-fig { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
  :root.canon-v5 #ovGrid .gst-fig b { font-family: var(--num); font-size: var(--t-fig-lg); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  :root.canon-v5 #ovGrid .gst-fig span { font-size: var(--t-md); color: var(--muted); }
  :root.canon-v5 #ovGrid .gst-legend { display: flex; justify-content: space-between; margin-top: var(--sp-2); font-size: var(--t-sm); color: var(--muted); }
  :root.canon-v5 #ovGrid .gst-legend b { font-family: var(--num); font-weight: 600; color: var(--text-2); }

  /* Money in and out (feature_books_cashflow). books.css drew these. */
  :root.canon-v5 #ovGrid .cf-key { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--t-sm); color: var(--muted); }
  :root.canon-v5 #ovGrid .cf-key span { display: inline-flex; align-items: center; gap: var(--sp-1); }
  :root.canon-v5 #ovGrid .cf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
  :root.canon-v5 #ovGrid .cf-dot.in,
  :root.canon-v5 #ovGrid .cf-bar.in span { background: var(--accent); }
  :root.canon-v5 #ovGrid .cf-dot.out,
  :root.canon-v5 #ovGrid .cf-bar.out span { background: var(--c-bar); }
  :root.canon-v5 #ovGrid .cf-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  :root.canon-v5 #ovGrid .cf-when { flex: 0 0 84px; font-size: var(--t-sm); color: var(--muted); }
  :root.canon-v5 #ovGrid .cf-bars { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
  :root.canon-v5 #ovGrid .cf-bar { height: 8px; overflow: hidden; border-radius: 2px; background: var(--sunken); }
  :root.canon-v5 #ovGrid .cf-bar span { display: block; height: 100%; border-radius: 2px; }
  :root.canon-v5 #ovGrid .cf-net { flex: 0 0 auto; font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  :root.canon-v5 #ovGrid .cf-net.bad { color: var(--c-on-wash-danger); }
  :root.canon-v5 #ovGrid .cf-note { margin: var(--sp-2) 0 0; font-size: var(--t-xs); color: var(--muted); }

  /* ── Empty, loading, and the page that could not load ─────────────────── */
  :root.canon-v5 #ovGrid .empty { padding: var(--sp-10) var(--sp-5); text-align: center; }
  :root.canon-v5 #ovGrid .empty i { font-size: var(--icon-lg); color: var(--border-2); }
  :root.canon-v5 #ovGrid .empty h3 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--t-lg); }
  :root.canon-v5 #ovGrid .empty p { max-width: 42ch; margin: 0 auto var(--sp-4); font-size: var(--t-md); color: var(--muted); }
  :root.canon-v5 #ovGrid .sk { border-radius: var(--r-sm); background: var(--card-2); animation: ov-canon-pulse 1.4s var(--ease) infinite; }
  :root.canon-v5 #ovGrid .card.kpi .sk:nth-child(2) { animation-delay: .12s; }
  :root.canon-v5 #ovGrid .card.kpi .sk:nth-child(3) { animation-delay: .24s; }

  :root.canon-v5 #ovGrid .cust-empty { padding: 40px 16px; text-align: center; font-size: 13px; color: var(--text-2); }
  :root.canon-v5 #ovGrid .ov-card {
    padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow);
  }
  :root.canon-v5 #ovGrid .ov-empty { font-size: 13px; color: var(--text-2); }

  /* ── The headline card ────────────────────────────────────────────────── */
  :root.canon-v5 #ovGrid .ov-hero { overflow: hidden; }

  /* ══ THE BOARD (widget-host.js) ════════════════════════════════════════
     The canon card is the visible surface; the host's tile is a transparent
     positioning box, and its header — Gridstack's drag handle — appears only
     while customising. Values follow books-canon.css's board section. */
  :root.canon-v5 #booksWidgetHost { margin-bottom: 28px; }
  :root.canon-v5 #booksWidgetHost.wgt-editing { padding-bottom: 160px; }
  :root.canon-v5 .wgt-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
  :root.canon-v5 .wgt-sync { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; font-size: 12px; color: var(--c-cap); opacity: 0; transition: opacity .25s; }
  :root.canon-v5 .wgt-sync.show { opacity: 1; }
  :root.canon-v5 .wgt-sync i { font-size: 14px; }
  :root.canon-v5 .wgt-sync i.ti-cloud-check { color: var(--c-ok); }
  :root.canon-v5 .wgt-edit-actions { display: inline-flex; gap: 8px; }
  :root.canon-v5 .wgt-toolbar .btn.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
  :root.canon-v5 .wgt-touch-note { display: none; align-items: center; gap: 6px; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .wgt-touch-note i { font-size: 15px; color: var(--c-accent); }
  @media (max-width: 768px), (pointer: coarse) {
    :root.canon-v5 :is(#wgtEditBtn, .wgt-edit-actions) { display: none; }
    :root.canon-v5 .wgt-touch-note { display: inline-flex; }
  }
  :root.canon-v5 .wgt-intro {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px;
    border: 1px solid var(--c-accent-edge); border-radius: 10px; background: var(--c-accent-soft);
  }
  /* The wash the intro sits on is the accent at 12%, and the raw accent on it is
     2.75:1 — under the 3:1 a non-text glyph needs. The on-wash ink is the same
     hue, measured for exactly this ground. */
  :root.canon-v5 .wgt-intro-icon,
  :root.canon-v5 .wgt-intro-text i { flex-shrink: 0; color: var(--c-on-wash-accent); }
  :root.canon-v5 .wgt-intro-icon { font-size: 20px; }
  :root.canon-v5 .wgt-intro-text { flex: 1; font-size: 13px; line-height: 1.45; color: var(--c-text); }
  :root.canon-v5 .wgt-intro .btn { flex-shrink: 0; }
  :root.canon-v5 .wgt-pulse { position: relative; }
  :root.canon-v5 .wgt-pulse::after {
    content: ""; position: absolute; inset: -3px; border: 2px solid var(--c-accent); border-radius: 9px;
    pointer-events: none; animation: ov-canon-ring 1.8s ease-out infinite;
  }

  :root.canon-v5 .wgt-grid-plain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 900px) {
    :root.canon-v5 .wgt-grid-plain { grid-template-columns: repeat(2, 1fr); }
    :root.canon-v5 .wgt-grid-plain .wgt-tile { grid-column: span 2 !important; }
  }
  @media (max-width: 560px) {
    :root.canon-v5 .wgt-grid-plain { grid-template-columns: 1fr; }
    :root.canon-v5 .wgt-grid-plain .wgt-tile { grid-column: span 1 !important; }
  }
  :root.canon-v5 #booksWidgetHost .wgt-tile {
    display: flex; flex-direction: column; min-height: 80px; padding: 0; overflow: hidden;
    border: 0; border-radius: 10px; background: none; box-shadow: none; contain: layout paint;
  }
  :root.canon-v5 #booksWidgetHost .grid-stack-item-content.wgt-tile { inset: 0; }
  :root.canon-v5 #booksWidgetHost .wgt-body { flex: 1; height: 100%; padding: 0; }
  :root.canon-v5 #booksWidgetHost .wgt-body > .card { height: 100%; background: var(--wgt-bg, var(--card)); }
  :root.canon-v5 #booksWidgetHost .wgt-head { display: none; }
  :root.canon-v5 #booksWidgetHost.wgt-editing .wgt-tile:not(.grid-stack-item-content) { position: relative; }
  :root.canon-v5 #booksWidgetHost.wgt-editing .wgt-head {
    position: absolute; inset: 0 0 auto; z-index: 2;
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px;
    border: 1px solid var(--c-accent-edge); border-radius: 10px 10px 0 0;
    background: color-mix(in srgb, var(--c-accent) 16%, var(--c-card)); font-size: 11px; cursor: grab;
  }
  :root.canon-v5 #booksWidgetHost.wgt-editing .wgt-head:active { cursor: grabbing; }
  :root.canon-v5 #booksWidgetHost.wgt-editing .wgt-body > .card { border-style: dashed; border-color: var(--c-accent-edge); }
  :root.canon-v5 .wgt-title { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .wgt-title i { margin-right: 5px; vertical-align: -.09em; color: var(--c-accent); }
  :root.canon-v5 .wgt-ctrls { display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 2px; }
  :root.canon-v5 .wgt-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border: 0; border-radius: 6px; background: none; color: var(--c-cap); cursor: pointer;
  }
  :root.canon-v5 .wgt-icon-btn:hover:not(:disabled) { background: var(--c-card-2); color: var(--c-text); }
  :root.canon-v5 .wgt-icon-btn:disabled { opacity: .35; cursor: default; }
  :root.canon-v5 .wgt-editing .ui-resizable-handle { opacity: 0; transition: opacity .15s; }
  :root.canon-v5 .wgt-editing .grid-stack-item:hover .ui-resizable-handle { opacity: 1; }
  :root.canon-v5 .wgt-editing .ui-resizable-s { bottom: 0; height: 16px; cursor: s-resize; }
  :root.canon-v5 .wgt-editing .ui-resizable-e { right: 0; width: 16px; cursor: e-resize; }
  :root.canon-v5 .wgt-editing .ui-resizable-se { right: 0; bottom: 0; width: 20px; height: 20px; cursor: se-resize; }
  :root.canon-v5 .wgt-editing .ui-resizable-se::after {
    content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px;
    border-right: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); border-bottom-right-radius: 2px;
  }
  :root.canon-v5 .wgt-editing .ui-resizable-s::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 28px; height: 3px;
    border-radius: 3px; background: var(--c-accent); opacity: .5; transform: translateX(-50%);
  }
  :root.canon-v5 :is(.wgt-empty, .wgt-error) { padding: 18px 8px; text-align: center; font-size: 13px; color: var(--c-cap); }
  :root.canon-v5 .wgt-empty i { display: block; margin-bottom: 8px; font-size: 30px; color: var(--c-accent); opacity: .5; }
  :root.canon-v5 .wgt-empty p { margin: 0 0 12px; }
  :root.canon-v5 .wgt-spin { animation: ov-canon-spin .8s linear infinite; }
  @media (max-width: 768px) {
    :root.canon-v5 .wgt-icon-btn { width: 40px; height: 40px; }
  }

  /* The add-widget panel and a widget's settings. books.html has no drawer
     module, so both open in the host's fallback dialog. */
  :root.canon-v5 .wgt-fallback-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
  :root.canon-v5 .wgt-fallback-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-ink-deep) 58%, transparent); }
  :root.canon-v5 .wgt-fallback-panel {
    position: relative; width: min(560px, 92vw); max-height: 80vh; overflow: auto; padding: 0;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); color: var(--c-text); box-shadow: var(--float);
  }
  :root.canon-v5 .wgt-fallback-head {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--c-border);
    font-family: "Sora", system-ui, sans-serif; font-size: 15px; font-weight: 600;
  }
  :root.canon-v5 .wgt-fallback-head button {
    display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px;
    background: none; color: var(--c-cap); cursor: pointer;
  }
  :root.canon-v5 .wgt-fallback-head button:hover { background: var(--c-card-2); color: var(--c-text); }
  :root.canon-v5 .wgt-fallback-body { padding: 18px; }
  :root.canon-v5 .wgt-add-search { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 8px 0 10px; background: var(--c-card); }
  :root.canon-v5 .wgt-add-search i { flex-shrink: 0; color: var(--c-cap); }
  :root.canon-v5 .wgt-add-search input {
    flex: 1; min-width: 0; height: 34px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text); font: inherit; font-size: 13px;
  }
  :root.canon-v5 .wgt-add-search input:focus { border-color: var(--c-accent-edge); box-shadow: 0 0 0 3px var(--c-accent-soft); outline: none; }
  :root.canon-v5 .wgt-add-cat {
    display: flex; align-items: center; gap: 8px; margin: 18px 2px 8px;
    font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap);
  }
  :root.canon-v5 .wgt-add-cat:first-child { margin-top: 2px; }
  :root.canon-v5 .wgt-add-cat::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
  :root.canon-v5 .wgt-add-shelf { margin: 16px 2px 8px; font-size: 12px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .wgt-add-shelf:first-child { margin-top: 2px; }
  :root.canon-v5 .wgt-add-note { margin: -2px 2px 8px; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .wgt-add-gated { padding: 10px 12px; border: 1px dashed var(--c-border); border-radius: 6px; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .wgt-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 480px) {
    :root.canon-v5 .wgt-add-grid { grid-template-columns: 1fr; }
  }
  :root.canon-v5 .wgt-add-card {
    display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: left;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); color: var(--c-text);
    font: inherit; cursor: pointer; transition: border-color var(--dur) var(--ease);
  }
  :root.canon-v5 .wgt-add-card:hover:not(:disabled) { border-color: var(--c-accent-edge); }
  :root.canon-v5 .wgt-add-card:disabled { opacity: .5; cursor: default; }
  :root.canon-v5 .wgt-add-card > i { font-size: 20px; color: var(--c-accent); }
  :root.canon-v5 .wgt-add-title { font-size: 13px; font-weight: 600; }
  :root.canon-v5 .wgt-add-title em { font-style: normal; font-weight: 500; color: var(--c-cap); }
  :root.canon-v5 .wgt-add-desc { font-size: 12px; line-height: 1.4; color: var(--c-cap); }
  :root.canon-v5 .wgt-settings-group { margin: 6px 0 10px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap); }
  :root.canon-v5 .wgt-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13px; color: var(--c-text); }
  :root.canon-v5 .wgt-field em { font-style: normal; font-weight: 600; color: var(--c-cap); }
  :root.canon-v5 :is(.wgt-field input:not([type="checkbox"], [type="range"], [type="color"]), .wgt-field select) {
    height: 34px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text); font: inherit; font-size: 13px;
  }
  :root.canon-v5 .wgt-field input[type="range"] { width: 100%; accent-color: var(--c-accent); }
  :root.canon-v5 .wgt-field-check { flex-direction: row; align-items: center; gap: 8px; }
  :root.canon-v5 .wgt-field-check input { width: auto; accent-color: var(--c-accent); }
  :root.canon-v5 .wgt-color-row { display: flex; align-items: center; gap: 10px; }
  :root.canon-v5 .wgt-color-row input[type="color"] { width: 42px; height: 28px; padding: 0; border: 1px solid var(--c-border); border-radius: 6px; background: none; cursor: pointer; }
  :root.canon-v5 .wgt-reset-link { padding: 0; border: 0; background: none; color: var(--c-accent); font-size: 12px; font-weight: 600; cursor: pointer; }
  @media (max-width: 768px) {
    :root.canon-v5 :is(.wgt-add-search input, .wgt-field input, .wgt-field select) { font-size: 16px; }
  }

  /* ── The chart readout, which lives on <body> ─────────────────────────── */
  :root.canon-v5 .tip {
    position: fixed; z-index: 90; min-width: 132px; padding: 9px 11px; pointer-events: none; opacity: 0;
    border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--c-float, var(--float));
    transform: translate(-50%, -100%) translateY(-9px); transition: opacity .12s var(--ease);
  }
  :root.canon-v5 .tip.on { opacity: 1; }
  :root.canon-v5 .tip b { display: block; margin-bottom: 5px; font-size: var(--t-sm); font-weight: 600; color: var(--text); }
  :root.canon-v5 .tip-r { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: var(--t-sm); color: var(--text-2); }
  :root.canon-v5 .tip-r .vl { margin-left: auto; font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

  /* ── Responsive: the layout folds; it never reflows a money column ────── */
  @media (max-width: 1320px) {
    :root.canon-v5 #ovGrid .c3 { grid-column: span 6; }
    :root.canon-v5 #ovGrid :is(.c4, .c6, .c8) { grid-column: span 12; }
  }
  @media (max-width: 900px) {
    :root.canon-v5 #ovGrid :is(.c3, .c4, .c6, .c8) { grid-column: span 6; }
    :root.canon-v5 #ovGrid .c12 { grid-column: span 12; }
    :root.canon-v5 #ovGrid .kpi-v { font-size: var(--t-2xl); }
    :root.canon-v5 #ovGrid .kpi-v small,
    :root.canon-v5 #ovGrid .spark { display: none; }
  }
  @media (max-width: 640px) {
    :root.canon-v5 #ovGrid .grid:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
    :root.canon-v5 #ovGrid .grid > .kpi { grid-column: auto; min-width: 0; padding: var(--sp-3); }
    :root.canon-v5 #ovGrid .kpi-l { gap: 5px; font-size: var(--t-xs); }
    :root.canon-v5 #ovGrid .kpi-v { margin-top: 6px; }
    :root.canon-v5 #ovGrid .kpi-f { min-height: 0; margin-top: 6px; }
    :root.canon-v5 #ovGrid .kpi-f > span:not(.delta) { display: none; }
    :root.canon-v5 #ovGrid .card-h p { width: 100%; }
    :root.canon-v5 #ovGrid .tbl-inv thead { display: none; }
    :root.canon-v5 #ovGrid :is(.tbl-inv, .tbl-inv tbody, .tbl-inv tr, .tbl-inv td) { display: block; }
    :root.canon-v5 #ovGrid .tbl-inv tr {
      display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-1) 10px;
      padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
    }
    :root.canon-v5 #ovGrid .tbl-inv td { padding: 0; border: 0; }
    :root.canon-v5 #ovGrid .tbl-inv .t-cust { grid-area: 1 / 1 / 2 / 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-md); }
    :root.canon-v5 #ovGrid .tbl-inv .t-amt { grid-area: 1 / 3; text-align: right; white-space: nowrap; }
    :root.canon-v5 #ovGrid .tbl-inv .t-no { grid-area: 2 / 1; }
    :root.canon-v5 #ovGrid .tbl-inv .t-due { grid-area: 2 / 2; text-align: left; }
    :root.canon-v5 #ovGrid .tbl-inv .t-st { grid-area: 2 / 3; justify-self: end; }
  }
  @media (max-width: 560px) {
    :root.canon-v5 #ovGrid :is(.c3, .c4, .c6, .c8) { grid-column: span 12; }
    :root.canon-v5 #ovGrid .age-r { grid-template-columns: 74px 1fr 78px; }
    :root.canon-v5 #ovGrid :is(td, th) { padding-right: var(--sp-2); padding-left: var(--sp-2); }
  }

  /* ── The redesign's hero (feature_polish_overview, .ov-hero.is-polish) ──
     The figure with its cents stepped back, the overdue line in red, the ageing bar
     and its key on one row, as on Invoices. */
  :root.canon-v5 #ovGrid .ov-hero.is-polish .ov-hero-fig {
    margin: var(--sp-1) 0 var(--sp-0_5); font-size: 46px; font-weight: 600; line-height: 1.08; letter-spacing: -.034em;
    font-variant-numeric: tabular-nums; color: var(--c-text);
  }
  :root.canon-v5 #ovGrid .ov-hero.is-polish .ov-hero-fig .cents { font-size: .52em; font-weight: 500; letter-spacing: -.02em; color: var(--c-muted); }
  :root.canon-v5 #ovGrid .ov-hero.is-polish .ov-hero-sub { margin: 0; font-size: 15px; color: var(--c-text-2); }
  :root.canon-v5 #ovGrid .ov-hero.is-polish .ov-hero-sub b { font-weight: 600; }
  :root.canon-v5 #ovGrid .ov-hero.is-polish .ov-hero-track { margin-top: var(--sp-3); }
  :root.canon-v5 #ovGrid .ov-hero.is-polish .ov-hero-key { display: flex; flex-wrap: wrap; gap: var(--sp-1_5) var(--sp-5); margin-top: var(--sp-2); font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 #ovGrid .ov-hero.is-polish .ov-hero-k { display: inline-flex; align-items: center; gap: var(--sp-1_5); white-space: nowrap; }
  :root.canon-v5 #ovGrid .ov-hero.is-polish .ov-hero-k b { font-weight: 600; color: var(--c-text); }
  :root.canon-v5 #ovGrid .ov-hero.is-polish .ov-hero-k b.ink-danger { color: var(--c-danger); }
  /* Customize pinned in the header row: the toolbar row it leaves behind closes up. */
  :root.canon-v5 #ovCanonRoot.ov-tb-pinned #booksWidgetHost { margin-top: calc(var(--sp-3) * -1); }
}

@keyframes ov-canon-pulse { 50% { opacity: .45; } }
@keyframes ov-canon-spin { to { transform: rotate(360deg); } }
@keyframes ov-canon-ring { 0% { opacity: .7; transform: scale(1); } 70% { opacity: 0; transform: scale(1.12); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root.canon-v5 #ovGrid .sk,
  :root.canon-v5.mk-on #ovGrid .sk,
  :root.canon-v5 .wgt-spin { animation: none; }
  :root.canon-v5 .wgt-pulse::after { animation: none; opacity: .5; }
}