/* Owner's month: the ledger page. Screen prefix py-db-. Charts follow the dataviz method:
   sequential ramp validated (light + dark, flipped), payment-mix trio validated (contrast WARN on
   cash green → direct labels + table view), bars ≤24px with 4px data-ends, hairline axes. */
.py-screen.py-db {
  --py-seq-1: light-dark(#86b6ef, #2f6fc4);
  --py-seq-2: light-dark(#5598e7, #5598e7);
  --py-seq-3: light-dark(#256abf, #86b6ef);
  --py-seq-4: light-dark(#104281, #c7dbf4);
  --py-seq-ink-1: light-dark(oklch(0.22 0.04 262), oklch(0.97 0.01 250));
  --py-seq-ink-2: light-dark(oklch(0.18 0.04 262), oklch(0.16 0.03 262));
  --py-seq-ink-3: light-dark(oklch(0.99 0 0), oklch(0.16 0.03 262));
  --py-seq-ink-4: light-dark(oklch(0.99 0 0), oklch(0.16 0.03 262));
  --py-cat-cash: light-dark(#1baf7a, #199e70);
  --py-cat-transfer: light-dark(#2a78d6, #3987e5);
  --py-cat-owed: light-dark(#eb6834, #d95926);
  --py-grid-line: light-dark(oklch(0.90 0.01 250), oklch(0.33 0.02 255));
  --py-deemph: light-dark(oklch(0.80 0.015 250), oklch(0.42 0.02 255));
}
.py-screen.py-db .py-db-filters { display: flex; flex-wrap: wrap; gap: var(--py-2) var(--py-3); align-items: center; }
.py-screen.py-db .py-db-filters .py-input { min-height: 2.5rem; inline-size: auto; padding-inline: var(--py-2) var(--py-6); }
.py-screen.py-db .py-db-month { display: inline-flex; align-items: center; gap: var(--py-2); }
.py-screen.py-db .py-db-month h1 { font-family: var(--py-f-display); font-stretch: 112%; font-weight: 750; font-size: var(--py-s-3); letter-spacing: -0.01em; }

/* KPI row: the totals line of the ledger, with the accountant's double rule */
.py-screen.py-db .py-db-kpis { display: grid; grid-template-columns: minmax(16rem, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--py-ink); border-bottom: 1px solid var(--py-rule); }
.py-screen.py-db .py-db-kpi { padding: var(--py-4) var(--py-4) var(--py-4) 0; display: grid; gap: var(--py-1); align-content: start; border-inline-end: 1px solid var(--py-ruling); }
.py-screen.py-db .py-db-kpi + .py-db-kpi { padding-inline-start: var(--py-4); }
.py-screen.py-db .py-db-kpi:last-child { border-inline-end: 0; }
.py-screen.py-db .py-db-kpi dt { font-size: var(--py-s--1); font-weight: 600; color: var(--py-print); }
.py-screen.py-db .py-db-kpi dd { margin: 0; }
.py-screen.py-db .py-db-val { font-family: var(--py-f-display); font-stretch: 72%; font-weight: 750; font-size: var(--py-s-3); line-height: 1; }
.py-screen.py-db .py-db-hero .py-db-val { font-size: clamp(3rem, 5vw, 4.2rem); justify-self: start; padding-bottom: 4px; border-bottom: 5px double var(--py-ink); margin-bottom: var(--py-1); font-variant-numeric: proportional-nums; }
.py-screen.py-db .py-db-delta { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-db .py-db-delta b { font-weight: 700; }
.py-screen.py-db .py-db-up { color: var(--py-ok); }
.py-screen.py-db .py-db-down { color: var(--py-danger); }

.py-screen.py-db .py-db-row { display: grid; gap: var(--py-6); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.py-screen.py-db .py-db-panel { display: grid; gap: var(--py-3); align-content: start; min-width: 0; }
.py-screen.py-db .py-db-panel h2 { font-size: var(--py-s-1); font-weight: 720; }
.py-screen.py-db .py-db-panel > p.py-hint { margin-top: -0.25rem; }

/* Calendar: each day a cell; hit areas touch, the visible square is drawn 1px inside (UI-258) */
.py-screen.py-db .py-cal-head, .py-screen.py-db .py-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.py-screen.py-db .py-cal-head span { font-size: var(--py-s--1); color: var(--py-ink-soft); padding: 0 var(--py-2) var(--py-1); }
.py-screen.py-db .py-cal-day, .py-screen.py-db .py-cal-blank { aspect-ratio: 1.25; min-width: 0; }
.py-screen.py-db .py-cal-day {
  position: relative; display: grid; align-content: space-between; padding: var(--py-2);
  text-decoration: none; background: var(--py-paper-2); color: var(--py-ink);
  box-shadow: inset 0 0 0 1px var(--py-paper);
  border-radius: 4px;
}
.py-screen.py-db .py-cal-day b { font-weight: 700; font-size: var(--py-s--1); }
.py-screen.py-db .py-cal-day span { font-size: var(--py-s--1); font-weight: 650; justify-self: end; }
.py-screen.py-db .py-cal-b1 { background: var(--py-seq-1); color: var(--py-seq-ink-1); }
.py-screen.py-db .py-cal-b2 { background: var(--py-seq-2); color: var(--py-seq-ink-2); }
.py-screen.py-db .py-cal-b3 { background: var(--py-seq-3); color: var(--py-seq-ink-3); }
.py-screen.py-db .py-cal-b4 { background: var(--py-seq-4); color: var(--py-seq-ink-4); }
.py-screen.py-db .py-cal-closed { color: var(--py-ink-faint); background: repeating-linear-gradient(135deg, var(--py-paper-2) 0 6px, var(--py-paper) 6px 9px); }
.py-screen.py-db .py-cal-closed span { font-weight: 500; }
.py-screen.py-db a.py-cal-day:hover { box-shadow: inset 0 0 0 1px var(--py-paper), inset 0 0 0 3px var(--py-ink); }
.py-screen.py-db .py-cal-best::after { content: "★"; position: absolute; inset: var(--py-1) var(--py-2) auto auto; font-size: var(--py-s--1); }
.py-screen.py-db .py-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-2) var(--py-3); font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-db .py-cal-legend i { display: inline-block; width: 1.4rem; height: 0.85rem; border-radius: 3px; vertical-align: -0.1em; margin-inline-end: 0.3em; }
.py-screen.py-db .py-cal-legend .py-cal-k1 { background: var(--py-seq-1); } .py-screen.py-db .py-cal-legend .py-cal-k2 { background: var(--py-seq-2); } .py-screen.py-db .py-cal-legend .py-cal-k3 { background: var(--py-seq-3); } .py-screen.py-db .py-cal-legend .py-cal-k4 { background: var(--py-seq-4); }

/* CSS-only tooltip (CSP-safe): the value also lives in the cell text and the table view */
.py-screen.py-db [data-tip] { position: relative; }
.py-screen.py-db [data-tip]:hover::before, .py-screen.py-db [data-tip]:focus-visible::before {
  content: attr(data-tip); position: absolute; z-index: 20; inset: auto auto calc(100% + 6px) 50%; translate: -50% 0;
  white-space: nowrap; padding: 0.35em 0.65em; border-radius: var(--py-r-ctl);
  background: var(--py-ink); color: var(--py-paper); font-size: var(--py-s--1); font-weight: 650; pointer-events: none;
}

/* Column and bar charts in SVG: no viewBox, percentage x, px heights (UI-161) */
.py-screen.py-db .py-db-chart { width: 100%; height: 13.5rem; overflow: visible; }
.py-screen.py-db .py-db-chart .py-db-grid { stroke: var(--py-grid-line); stroke-width: 1; }
.py-screen.py-db .py-db-chart .py-db-col { fill: var(--py-deemph); }
.py-screen.py-db .py-db-chart .py-db-col-now { fill: var(--py-seq-3); }
.py-screen.py-db .py-db-chart .py-db-lab { fill: var(--py-ink-soft); font-size: 12.8px; text-anchor: middle; }
.py-screen.py-db .py-db-chart .py-db-chart-val { fill: var(--py-ink); font-size: 12.8px; font-weight: 700; text-anchor: middle; }
.py-screen.py-db .py-db-chart .py-db-hit { fill: transparent; }
.py-screen.py-db .py-db-chart a:hover .py-db-col, .py-screen.py-db .py-db-chart a:focus-visible .py-db-col { fill: color-mix(in oklch, var(--py-deemph) 70%, var(--py-ink)); }

.py-screen.py-db .py-db-mix { width: 100%; height: 2.25rem; display: block; }
.py-screen.py-db .py-db-mix .py-db-cash { fill: var(--py-cat-cash); } .py-screen.py-db .py-db-mix .py-db-transfer { fill: var(--py-cat-transfer); } .py-screen.py-db .py-db-mix .py-db-owed { fill: var(--py-cat-owed); }
.py-screen.py-db .py-db-mix .py-db-gap { fill: var(--py-paper); }
.py-screen.py-db .py-db-mixkey { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2); }
.py-screen.py-db .py-db-mixkey li { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto auto; gap: var(--py-3); align-items: baseline; }
.py-screen.py-db .py-db-mixkey i { width: 1rem; height: 0.75rem; border-radius: 3px; display: block; align-self: center; }
.py-screen.py-db .py-db-mixkey .py-db-cash { background: var(--py-cat-cash); } .py-screen.py-db .py-db-mixkey .py-db-transfer { background: var(--py-cat-transfer); } .py-screen.py-db .py-db-mixkey .py-db-owed { background: var(--py-cat-owed); }
.py-screen.py-db .py-db-mixkey .py-num { text-align: end; font-weight: 650; }
.py-screen.py-db .py-db-mixkey .py-db-pct { color: var(--py-ink-soft); min-width: 3rem; text-align: end; }

.py-screen.py-db .py-db-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2); }
.py-screen.py-db .py-db-bars li { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 6.5rem; gap: var(--py-3); align-items: center; min-height: 2rem; }
.py-screen.py-db .py-db-bars .py-db-name { font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py-screen.py-db .py-db-bars .py-db-name small { display: block; font-weight: 450; color: var(--py-ink-soft); font-size: var(--py-s--1); }
.py-screen.py-db .py-db-bars svg { width: 100%; height: 18px; display: block; }
.py-screen.py-db .py-db-bars .py-db-bar { fill: var(--py-seq-3); }
.py-screen.py-db .py-db-bars .py-num { text-align: end; font-weight: 650; }
.py-screen.py-db .py-db-insight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--py-3); align-items: center; padding: var(--py-3) var(--py-4); border-radius: var(--py-r-ctl); background: var(--py-canary); color: var(--py-ink); }
.py-screen.py-db .py-db-insight b { font-family: var(--py-f-display); font-stretch: 72%; font-size: var(--py-s-3); font-weight: 750; line-height: 1; }

.py-screen.py-db .py-db-table summary { cursor: pointer; font-size: var(--py-s--1); font-weight: 650; color: var(--py-ink-soft); }
.py-screen.py-db .py-db-table table { margin-top: var(--py-2); }

@media (max-width: 72rem) {
  .py-screen.py-db .py-db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .py-screen.py-db .py-db-hero { grid-column: 1 / -1; border-inline-end: 0; border-bottom: 1px solid var(--py-ruling); }
  .py-screen.py-db .py-db-kpi + .py-db-kpi { padding-inline-start: 0; }
  .py-screen.py-db .py-db-kpi:nth-child(odd):not(.py-db-hero) { padding-inline-start: var(--py-4); }
  .py-screen.py-db .py-db-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  .py-screen.py-db .py-cal-day { padding: 3px 4px; aspect-ratio: 0.9; }
  .py-screen.py-db .py-cal-day span { font-size: var(--py-s--2); }
  .py-screen.py-db .py-cal-head span { padding-inline: 2px; font-size: var(--py-s--2); }
  .py-screen.py-db .py-db-bars li { grid-template-columns: minmax(0, 1fr) 6rem; }
  .py-screen.py-db .py-db-bars svg { grid-column: 1 / -1; grid-row: 2; }
  .py-screen.py-db [data-tip]:hover::before, .py-screen.py-db [data-tip]:focus-visible::before { display: none; }
}

.py-screen.py-db .py-db-stack { display: grid; gap: var(--py-6); align-content: start; min-width: 0; }

/* ---------- What the product draws beyond the design ---------- */

/* In the ledger's language: seven tiles in the totals line, each a
   term with one value (its figure, then its comparison); the card payments, a fourth
   series beside the design's three (not yet through the dataviz validator); the mix's key
   as terms; each item's share of revenue beside its amount; the six months' gridlines
   labelled at their left. */
.py-screen.py-db { --py-cat-card: light-dark(#8a63d2, #9d7ae6); }
.py-screen.py-db .py-db-kpis { grid-template-columns: minmax(16rem, max-content) repeat(6, minmax(0, 1fr)); }
.py-screen.py-db .py-db-kpi dd { display: grid; gap: var(--py-1); align-content: start; }
.py-screen.py-db .py-db-kpi .py-db-delta { display: block; }
.py-screen.py-db .py-db-mix .py-db-card, .py-screen.py-db .py-db-mixkey .py-db-card { fill: var(--py-cat-card); background: var(--py-cat-card); }
.py-screen.py-db .py-db-mixkey { margin: 0; }
.py-screen.py-db .py-db-mixkey > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--py-3); align-items: baseline; }
.py-screen.py-db .py-db-mixkey dt { display: flex; align-items: center; gap: var(--py-3); min-width: 0; }
.py-screen.py-db .py-db-mixkey dd { display: contents; }
.py-screen.py-db .py-db-bars.py-db-shares li { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 6.5rem 3rem; }
.py-screen.py-db .py-db-bars .py-db-pct { color: var(--py-ink-soft); text-align: end; }
.py-screen.py-db .py-db-chart .py-db-axis { text-anchor: start; }

/* A figure's orders (docs/specs/dashboard.md, *How it was paid*): its name opens them,
   a `<details>` without scripts, a button and a popover anchored under it with them
   (UI-318). The popover enters by sliding, never by fading, so it is read at its own
   contrast as it opens (UI-425), and leaves the same way, its behaviours listed again with
   its properties so `display` and `overlay` keep `allow-discrete` (UI-443). Its list is
   drawn from its opening until its exit ends, never before: the script moves the list out
   of its `<details>` as the page loads, and an element just inserted starts no transition.
   With no anchoring it falls back to a centered sheet. */
.py-screen.py-db .py-db-opens > summary, .py-screen.py-db .py-db-opener {
  display: inline-flex; align-items: center; gap: var(--py-3); min-block-size: 1.5rem; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 0.2em;
}
.py-screen.py-db .py-db-opens > summary::-webkit-details-marker { display: none; }
.py-screen.py-db .py-db-opens > summary::after, .py-screen.py-db .py-db-opener::after { content: "▾"; content: "▾" / ""; color: var(--py-ink-faint); }
.py-screen.py-db .py-db-opens[open] > summary::after { content: "▴"; content: "▴" / ""; }
.py-screen.py-db .py-db-opens { min-width: 0; }
.py-screen.py-db .py-db-opener { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; }
.py-screen.py-db .py-db-opener:focus-visible { outline: 2px solid var(--py-ink); outline-offset: 2px; border-radius: 2px; }
.py-screen.py-db .py-db-pop { padding: var(--py-3) var(--py-4); inline-size: max-content; max-inline-size: min(26rem, calc(100vw - 2rem)); transition-property: translate, display, overlay; transition-behavior: normal, allow-discrete, allow-discrete; }
.py-screen.py-db .py-db-opens > .py-db-pop { inline-size: auto; }
@supports not (position-area: block-end) { .py-screen.py-db .py-db-pop[popover] { margin: auto; } }
.py-screen.py-db .py-db-orders { list-style: none; margin: 0; padding: 0; display: grid; max-block-size: min(20rem, 60vh); overflow-y: auto; font-size: var(--py-s--1); font-weight: 500; color: var(--py-ink); }
.py-screen.py-db .py-db-orders li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--py-3); align-items: center; min-block-size: 2.75rem; border-bottom: 1px solid var(--py-ruling); }
.py-screen.py-db .py-db-orders li:last-child { border-bottom: 0; }
.py-screen.py-db .py-db-orders a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 650; }
.py-screen.py-db .py-db-orders .py-db-client { overflow-wrap: anywhere; }
.py-screen.py-db .py-db-orders .py-num { text-align: end; font-weight: 650; }
@media (max-width: 72rem) { .py-screen.py-db .py-db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .py-screen.py-db .py-db-bars.py-db-shares li { grid-template-columns: minmax(0, 1fr) 6rem 3rem; } }