/* =========================================================================
   styles.css — Summit's whole look in one file.

   DESIGN NOTES (Oct 21 2026, DECISIONS S110). John: "Look at the UI changes
   recently for the DMS and read the design notes there. Implement similar
   here." The DMS's new look (Oct 20 2026, owner pick "Direction 2", its
   frontend/src/styles.css and CLAUDE.md "the look is tokens in ONE file")
   is the model, carried over rule for rule:
     - every colour is a TOKEN on :root, with a second set under
       :root[data-theme="dark"]. A screen names a token, never a raw #hex,
       so dark mode re-points it;
     - dark mode FOLLOWS THE DEVICE's own light/dark setting, live; the
       switch in the sidebar foot keeps the other look for this browser
       (ui/lib.js theme, the one place);
     - a deep NAVY app frame (the sidebar; a top bar with a Menu button on a
       phone), the current page marked by a yellow edge;
     - Barlow for words, Barlow Condensed for headings and big numbers
       (ui/fonts.css, bundled); money in even-width figures so columns of
       dollars line up like a ledger;
     - the blue (#2456D6) is the ONE action colour; red only means a loss,
       a risk, a refusal or something destructive; green means good; a
       warning is the warning colour AND an icon or a word, never colour
       alone;
     - motion about 200 ms, and none under "reduce motion";
     - every wide table scrolls in its own box, so no screen scrolls
       sideways on a phone.
   Summit is its own product (not Drive360), so the wordmark is Summit's;
   the palette is the DMS's because John asked for "similar". Its token
   names are plain (--action, not the DMS's historical --amber).

   CHART COLOURS (the dataviz method, validated with its script on Oct 21
   2026, both modes): series 1 is the action blue, series 2 an orange,
   the first two slots of the reference categorical order. Dark mode's
   series 1 is #5B85F2: the frame's lifted blue (#6E95FF) is too light for
   a chart mark on the dark card (OKLCH L 0.69, the band is 0.48-0.67).
   ========================================================================= */

:root {
  color-scheme: light;

  /* -- The app frame (the sidebar; a top bar on phones) ------------------ */
  --frame: #14254A;
  --frame-ink: #B7C3DA;
  --frame-ink-strong: #FFFFFF;
  --frame-hover: rgba(255, 255, 255, .07);
  --frame-active: #22386A;
  --frame-line: rgba(255, 255, 255, .12);
  --frame-title: #8495B5;
  --frame-accent: #8FB0FF;   /* the wordmark's peak on navy */

  /* -- Surfaces and ink -------------------------------------------------- */
  --ground: #EDF1F7;         /* page background                */
  --paper: #FFFFFF;          /* cards, tables, inputs          */
  --paper-2: #F4F7FB;        /* a recessed surface in a card   */
  --ink: #16243D;            /* text (15.5:1 on white)         */
  --ink-soft: #56657D;       /* secondary text (5.9:1)         */
  --ink-faint: #5F6E86;      /* captions (4.5:1 on the ground) */
  --line: #DDE3ED;
  --row-hover: #F3F6FC;
  --input-bg: #FFFFFF;

  /* -- Meaning ----------------------------------------------------------- */
  --action: #2456D6;         /* THE action colour (6.2:1 on white) */
  --action-ink: #FFFFFF;
  --action-dark: #1B44AD;
  --action-text: #1B44AD;    /* blue text on the light blue wash   */
  --action-wash: #E3EAFB;
  --yellow: #F2B01E;         /* the current page's edge            */
  --good: #0B7A54;
  --good-soft: #DDF1E8;
  --bad: #C0362C;
  --bad-soft: #F9E1DE;
  --warn-ink: #7A5200;
  --warn-soft: #FFF2D1;
  --warn-line: #E2B648;
  --neutral-soft: #E8EDF4;

  /* -- Charts ------------------------------------------------------------ */
  --series-1: #2456D6;
  --series-2: #EB6834;
  --chart-muted: #B6C2D6;
  --spark-fill: rgba(36, 86, 214, .12);
  --tip-bg: #16243D;
  --tip-ink: #FFFFFF;

  --shadow: 0 1px 2px rgba(20, 37, 74, .06);
  --shadow-hover: 0 10px 24px rgba(20, 37, 74, .13);

  /* -- Type, shape, motion ------------------------------------------------ */
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --radius: 10px;
  --radius-sm: 7px;
  --dur: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* DARK MODE: the same roles, re-pointed (the DMS's values). Set on <html>
   by ui/lib.js from the device's setting, or the sidebar switch. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --frame: #0A1120;
  --frame-ink: #8FA0BF;
  --frame-hover: rgba(255, 255, 255, .06);
  --frame-active: #1A2B52;
  --frame-line: rgba(255, 255, 255, .09);
  --frame-title: #7486A6;

  --ground: #0E1626;
  --paper: #152038;
  --paper-2: #1A2742;
  --ink: #E6ECF7;
  --ink-soft: #93A2BD;
  --ink-faint: #8494B0;
  --line: #23335A;
  --row-hover: #1A2742;
  --input-bg: #101A2E;

  --action: #6E95FF;
  --action-ink: #0A1120;
  --action-dark: #8FAEFF;
  --action-text: #A9C0FF;
  --action-wash: rgba(110, 149, 255, .16);
  --good: #3CCB8F;
  --good-soft: rgba(60, 203, 143, .14);
  --bad: #FF7B6E;
  --bad-soft: rgba(255, 123, 110, .14);
  --warn-ink: #F2C14E;
  --warn-soft: rgba(242, 176, 30, .15);
  --warn-line: rgba(242, 193, 78, .55);
  --neutral-soft: #22304E;

  --series-1: #5B85F2;
  --series-2: #D95926;
  --chart-muted: #3A4C74;
  --spark-fill: rgba(91, 133, 242, .18);
  --tip-bg: #E6ECF7;
  --tip-ink: #0E1626;

  --shadow: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-hover: 0 10px 26px rgba(0, 0, 0, .4);
}

/* ---- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body {
  font-family: var(--body); font-size: 15px; line-height: 1.4;
  color: var(--ink); background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .005em; margin: 0; }
h1 { font-size: 30px; line-height: 1.1; }
h2 { font-size: 20px; margin: 0 0 10px; }
h3 { font-size: 16px; margin: 0 0 8px; }
a { color: var(--action-text); }
ul { margin: 0 0 12px; padding-left: 20px; }
li { margin-bottom: 4px; }
code { font-size: 13px; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }
.loading { padding: 32px; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- The app shell: a navy sidebar and the workspace beside it -------------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 232px; flex-shrink: 0; background: var(--frame); color: var(--frame-ink); }
.sidebar-inner {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 18px 10px;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wordmark {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px 0;
  font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .01em;
  color: var(--frame-ink-strong); line-height: 1;
}
.wordmark .peak { width: 22px; height: 18px; color: var(--frame-accent); align-self: center; }
.wordmark .dot { color: var(--yellow); }
/* "Accounting" under "Summit" (S132): the full name in one line is wider than the sidebar. */
.wordmark .name { display: inline-flex; flex-direction: column; gap: 5px; }
.wordmark .sub {
  font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--frame-title); line-height: 1;
}
.menu-toggle { display: none; }
.book-pick { padding: 4px 10px 12px; border-bottom: 1px solid var(--frame-line); }
.book-pick label { color: var(--frame-title); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.book-pick select {
  margin-top: 4px; background: var(--frame-active); color: var(--frame-ink-strong);
  border-color: var(--frame-line); width: 100%;
}
.sidebar nav { display: flex; flex-direction: column; }
.sidebar nav button {
  display: flex; align-items: center; gap: 10px; position: relative; width: 100%;
  margin: 1px 0; padding: 9px 12px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-weight: 500; color: var(--frame-ink); text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar nav button svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.sidebar nav button:hover { background: var(--frame-hover); color: var(--frame-ink-strong); }
.sidebar nav button[aria-current="page"] { background: var(--frame-active); color: var(--frame-ink-strong); font-weight: 600; }
/* The current page's yellow edge, hung in the sidebar's padding. */
.sidebar nav button[aria-current="page"]::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0; background: var(--yellow);
}
.sidebar nav .count {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--frame);
  background: var(--yellow); border-radius: 9px; padding: 0 7px; line-height: 18px;
}
.sidebar .foot {
  margin-top: auto; padding: 14px 10px 4px; font-size: 13px; color: var(--frame-ink);
  border-top: 1px solid var(--frame-line); display: flex; flex-direction: column; gap: 8px;
}
.sidebar .foot strong { color: var(--frame-ink-strong); font-weight: 600; }
.sidebar .foot .foot-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar .foot button {
  background: none; border: 1px solid var(--frame-line); color: var(--frame-ink-strong);
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
}
.sidebar .foot button:hover { border-color: var(--frame-ink); background: var(--frame-hover); }
.sidebar .foot button svg { width: 14px; height: 14px; }
.workspace { flex: 1; min-width: 0; padding: 26px 32px 64px; }
.workspace-inner { max-width: 1240px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .muted { font-size: 14px; }

/* ---- Cards ---------------------------------------------------------------- */
/* A <section> is a card (the screens before Oct 21 2026 used plain sections). */
section, .card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); min-width: 0;
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-bottom: 16px; }
.card-grid > section, .card-grid > .card { margin-bottom: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.card.attention { border-color: var(--warn-line); background: var(--warn-soft); }
.card.attention h2 { color: var(--warn-ink); }

/* Section tabs inside a page (Setup's Company / Chart / ...), as the DMS's
   multi-section pages have them. */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tabs button {
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
  padding: 8px 12px; color: var(--ink-soft); font-weight: 600;
}
.tabs button:hover { color: var(--ink); border-color: var(--line); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--action); }

/* ---- Tables ----------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
section > .table-wrap:last-child, .card > .table-wrap:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; background: var(--paper); font-variant-numeric: tabular-nums; }
th {
  font-family: var(--display); font-weight: 600; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft); text-align: left; padding: 8px 10px;
  border-bottom: 2px solid var(--line); white-space: nowrap;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover td { background: var(--row-hover); }
td.date { white-space: nowrap; }
/* Money and counts: right-aligned, even-width figures, never broken. */
td.money, th.money, td.num, th.num { text-align: right; white-space: nowrap; }
td.money, td.num { font-weight: 500; }
td.money.negative { color: var(--bad); }
tr.total td { font-weight: 700; border-top: 2px solid var(--line); }
tr.open td { background: var(--paper-2); }
tr.editor td { padding: 12px 14px; }
tr.heading th { padding-top: 14px; font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: .02em; }
tr.inactive td { color: var(--ink-faint); }
/* A statement reads down one column of money: its box is no wider than it needs. */
.table-wrap.narrow { max-width: 46rem; }
table.statement td:first-child { padding-left: 16px; }
.sub-line { font-size: 13px; color: var(--ink-soft); }

/* ---- Buttons and fields ------------------------------------------------------ */
/* Four weights, each meaning one thing (the DMS's vocabulary): primary is
   the one action a form is for; a plain button is a neutral action; quiet
   is an action inside a row; danger destroys, voids or reverses. */
button {
  font-family: var(--body); font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); padding: 7px 14px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
button:hover { border-color: var(--ink-soft); }
button:disabled { opacity: .55; cursor: default; }
button.primary, .btn-primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
button.primary:hover { background: var(--action-dark); border-color: var(--action-dark); }
button.quiet { border: none; background: none; padding: 4px 6px; color: var(--action-text); }
button.quiet:hover { background: var(--action-wash); }
button.danger { color: var(--bad); border-color: var(--bad); }
button.danger:hover { background: var(--bad-soft); }
button.link { border: none; background: none; padding: 0; color: var(--action-text); text-decoration: underline; font-weight: 500; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--action); outline-offset: 2px;
}
input, select, textarea {
  font-family: var(--body); font-size: 15px; color: var(--ink); background: var(--input-bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 9px; max-width: 100%;
  transition: border-color var(--dur) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--chart-muted); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--action); }
td input, td select { width: 100%; min-width: 7rem; }
td.money input { text-align: right; }
textarea { width: 100%; min-height: 4rem; }
label {
  display: inline-flex; flex-direction: column; gap: 3px; margin-right: 12px; max-width: 100%;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
label.check { flex-direction: row; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; font-size: 14px; }
.row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.form-grid label { margin: 0; }
.form-grid label input, .form-grid label select { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.choices { margin: 0 0 12px; }
.attachments { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.hint { font-size: 13px; color: var(--ink-soft); font-weight: 400; }

/* ---- Notices and badges --------------------------------------------------------- */
.notice { padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom: 14px; font-weight: 500; border: 1px solid transparent; }
.notice.saved { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.notice.error { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.notice.warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }
.notice.sticky { position: sticky; top: 10px; z-index: 3; box-shadow: var(--shadow-hover); }
.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--neutral-soft); color: var(--ink-soft);
}
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--action-wash); color: var(--action-text); }
.badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge svg, .notice svg, .attention-list svg { width: 14px; height: 14px; vertical-align: -2px; }

/* ---- Sign-in ------------------------------------------------------------------- */
.signin-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--frame); }
.signin { width: min(100%, 24rem); margin: 0; padding: 26px 24px; }
.signin .wordmark { color: var(--ink); padding: 0 0 12px; font-size: 34px; }
.signin .wordmark .peak { color: var(--action); }
.signin .wordmark .sub { color: var(--ink-soft); font-size: 11.5px; }
.signin label { display: flex; margin: 0 0 12px; }
.signin input { width: 100%; }
.signin button.primary { width: 100%; padding: 10px; font-size: 15px; }

/* ---- Home: the dashboard -------------------------------------------------------- */
.dash-section { margin-bottom: 22px; }
.dash-label {
  margin: 0 0 10px; font-family: var(--body); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.stat-grid.hero-row { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; display: flex; flex-direction: column; gap: 6px;
  container-type: inline-size;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
button.stat { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--chart-muted); }
.stat .label { font-size: 13px; font-weight: 600; color: var(--ink-soft); line-height: 1.25; }
.stat .label svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.stat .value {
  font-family: var(--display); font-weight: 600; line-height: 1.05; white-space: nowrap;
  font-size: clamp(22px, 14cqi, 34px); font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat .value .cents { font-size: .6em; opacity: .7; margin-left: 1px; }
.stat .value.negative { color: var(--bad); }
.stat .sub { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.stat.hero .value { font-size: clamp(30px, 11cqi, 46px); }
.delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta svg { width: 12px; height: 12px; flex: none; }
.delta.good { color: var(--good); }
.delta.bad { color: var(--bad); }
.delta.flat { color: var(--ink-faint); }
.delta .delta-label { font-weight: 500; color: var(--ink-faint); }
.checklist { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.checklist li { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.checklist .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--neutral-soft); color: var(--ink-faint); }
.checklist .tick.done { background: var(--good-soft); color: var(--good); }
.checklist .tick svg { width: 14px; height: 14px; }
.checklist .what { flex: 1; min-width: 12rem; }
.attention-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.attention-list li { display: flex; gap: 8px; align-items: baseline; margin: 0; color: var(--warn-ink); font-weight: 500; flex-wrap: wrap; }

/* ---- Charts (ui/charts.js) ---------------------------------------------------------
   Hand-drawn in SVG and HTML; Summit carries no chart library. Every chart
   states its numbers in text too (the tooltip, a legend, a table view), so
   nothing is told by length or colour alone. */
.chart { position: relative; }
/* On a phone the twelve months keep a readable size and scroll sideways
   inside their card, instead of shrinking until the labels cannot be read
   (seen in the Oct 21 2026 screenshots). */
.chart.scroll { overflow-x: auto; }
.chart.scroll svg { min-width: 560px; }
.chart svg { display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis-label { fill: var(--ink-faint); font-size: 12px; font-family: var(--body); }
.chart .bar-1 { fill: var(--series-1); }
.chart .bar-2 { fill: var(--series-2); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit:hover, .chart .hit:focus { fill: var(--row-hover); outline: none; }
.chart-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-soft); margin: 2px 0 8px; }
.chart-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart-key .s1 { background: var(--series-1); }
.chart-key .s2 { background: var(--series-2); }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 8px));
  background: var(--tip-bg); color: var(--tip-ink); font-size: 13px; line-height: 1.35; font-weight: 500;
  font-variant-numeric: tabular-nums; padding: 6px 9px; border-radius: 7px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.chart-tip b { font-weight: 700; }
.spark { margin-top: 4px; }
.spark .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { fill: var(--spark-fill); }
.spark .zero { stroke: var(--line); stroke-width: 1; }
.spark .dot { fill: var(--series-1); stroke: var(--paper); stroke-width: 2; }
.barlist { display: grid; gap: 9px; margin: 4px 0 2px; }
.barlist-row { display: grid; grid-template-columns: minmax(80px, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.barlist-row .bl-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.barlist-row .bl-value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bar-track { height: 10px; background: var(--paper-2); border-radius: 5px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--series-1); transform-origin: left center; animation: bar-grow 700ms var(--ease) both; }
.view-toggle { font-size: 13px; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes col-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.chart .col { transform-box: fill-box; transform-origin: bottom center; animation: col-grow 600ms var(--ease) both; }

/* ---- Loading placeholders ------------------------------------------------------------ */
.skel {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--paper-2) 30%, var(--neutral-soft) 50%, var(--paper-2) 70%);
  background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.skel-tile { min-height: 112px; }
.skel-card { min-height: 220px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---- Phones and tablets ----------------------------------------------------------------
   Under 900 px the headline row wraps; under 760 px the sidebar becomes a
   top bar with a Menu button, and the menu opens below it. */
@media (max-width: 900px) {
  .stat-grid.hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid.hero-row > .stat:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidebar { width: auto; }
  .sidebar-inner { position: static; height: auto; padding: 10px 16px; gap: 8px; }
  .wordmark { font-size: 24px; padding: 0; }
  .wordmark .name { gap: 4px; }
  .wordmark .sub { font-size: 9.5px; }
  .menu-toggle { display: inline-flex; background: none; color: var(--frame-ink-strong); border-color: var(--frame-line); }
  .sidebar:not(.open) nav, .sidebar:not(.open) .foot, .sidebar:not(.open) .book-pick { display: none; }
  .book-pick { padding: 4px 0 10px; }
  .workspace { padding: 16px 16px 48px; }
  section, .card { padding: 14px; }
  .wide { display: none; }
  .row label:not(.check) { width: 100%; margin-right: 0; }
  .row input:not([type=checkbox]), .row select { width: 100%; }
  th, td { padding: 7px 6px; }
  .stat-grid.hero-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- The Journal and Setup's details (Oct 21 2026) --------------------------------- */
.row label.grow { flex: 1; min-width: min(100%, 16rem); }
.row label.grow input { width: 100%; }
table.entry-lines td { padding: 6px 6px; vertical-align: middle; }
table.entry-lines td select { min-width: 9rem; }
table.entry-lines td.money input { min-width: 6.5rem; }
tr.heading-row td { font-weight: 600; background: var(--paper-2); }
.sub-account { padding-left: 4px; }
.card-head .row { margin: 0; }

/* ---- Step 1 (Oct 21 2026, DECISIONS S111-S116) ---------------------------------------
   John: "yes, build step 1". The pieces the new screens add: a figure that
   is also a link, Home's period menu, the reconciliation worksheet, the
   QuickBooks matching table, statements with many columns, and printing. */

/* A name or a figure that opens its report: reads as text, acts as a link. */
button.link.plain { color: inherit; text-decoration: none; font: inherit; text-align: left; }
button.link.plain:hover, button.link.plain:focus-visible { color: var(--action-text); text-decoration: underline; }
td.money button.link.plain { text-align: right; font: inherit; }

/* Home: the period's heading and its menu on one line. */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-head .dash-label { margin: 0; }
.dash-head label.period { margin: 0; }
/* An expense bar that opens its account's ledger. */
.barlist-row.pick {
  width: 100%; border: 0; background: none; padding: 2px 0; text-align: left; font: inherit; color: inherit;
  border-radius: var(--radius-sm);
}
.barlist-row.pick:hover { background: var(--row-hover); }
.barlist-row.pick:hover .bl-label { color: var(--action-text); text-decoration: underline; }

/* The reconciliation worksheet: the four figures, and the lines to tick. */
.rec-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; margin: 6px 0 10px; }
.rec-figures > div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--paper-2); }
.rec-figures dt { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.rec-figures dd { margin: 4px 0 0; font-family: var(--display); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-figures .difference { border-color: var(--warn-line); background: var(--warn-soft); }
.rec-figures .difference.good { border-color: var(--good); background: var(--good-soft); }
.rec-figures dd .badge { font-family: var(--body); font-size: 12px; vertical-align: 3px; }
table.reconcile .tick-col { width: 2.5rem; text-align: center; }
table.reconcile .tick-col input { width: 18px; height: 18px; min-width: 0; }
table.reconcile tr.cleared td { color: var(--ink-soft); }

/* The QuickBooks matching table: an account not matched yet stands out. */
tr.needs td { background: var(--warn-soft); }

/* A statement with a column per property or month scrolls sideways on a
   phone; its account names stay readable. */
table.statement.grid td:first-child, table.statement.grid th:first-child { min-width: 12rem; }

/* ---- Step 2 — Rentals, the queue's loan and deposit choices, Home (Oct 22 2026) ----- */
/* The rent roll: a heading row per property, a subtotal, and owed money
   standing out (paid ahead is good news, so it is quiet). */
table.rent-roll tr.group th { text-align: left; font-family: var(--display); font-size: 14px; letter-spacing: .04em;
  color: var(--ink-soft); background: var(--paper-2); padding-top: 10px; }
table.rent-roll tr.subtotal td { font-weight: 600; color: var(--ink-soft); }
.owed { color: var(--bad); font-weight: 600; }
.ahead { color: var(--good); }
/* A lease's facts: label over value, as many across as fit. */
dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px 16px; margin: 4px 0 8px; }
dl.facts dt { font-size: 13px; color: var(--ink-soft); }
dl.facts dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
ul.plain-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
/* A voided record (Loans' rule, below, strikes its amounts); its reason
   sits on its own line under what it was. */
tr.voided td .sub-line { display: block; }
/* Home's property filter sits at the head's right. */
.page-head label.period { margin: 0 0 0 auto; }

/* ---- Printing (S115): the report and nothing else ---------------------------------
   The browser's Print (and "Save as PDF") gets the page's content on white,
   without the sidebar, the menus, the forms or the buttons. */
@media print {
  :root, :root[data-theme="dark"] {
    --paper: #FFFFFF; --paper-2: #F4F6FA; --ground: #FFFFFF; --ink: #000000; --ink-soft: #333333; --ink-faint: #444444;
    --line: #BBBBBB; --row-hover: transparent; --bad: #000000; --good: #000000; --good-soft: #FFFFFF; --warn-soft: #FFFFFF;
  }
  body { background: #FFFFFF; color: #000000; font-size: 12px; }
  .sidebar, .no-print, .notice.sticky, .tabs { display: none !important; }
  .shell { display: block; }
  .workspace { padding: 0; }
  .workspace-inner { max-width: none; }
  section, .card { box-shadow: none; border: 0; padding: 0; margin-bottom: 14px; }
  .table-wrap { border: 0; overflow: visible; }
  .table-wrap.narrow { max-width: none; }
  tr { break-inside: avoid; }
  button.link { color: inherit; text-decoration: none; }
  .badge { border: 1px solid #999999; }
}

/* ---- Step 2 — Loans (Oct 22 2026, DECISIONS S117-S118) --------------------------------
   John: "yes, build step 2". The loans page reuses the worksheet's figures
   (.rec-figures), the forms' grid and the badges; it adds a little air
   between a long form's groups, and the look of a voided record: kept on
   the page with its reason, its amounts struck through. */
.loan-form h3 { margin: 14px 0 6px; font-size: 15px; }
/* A loan's six figures: one row on a wide screen, two to a row on a phone
   (the worksheet's four are wider). */
.rec-figures.loan-figures { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.rec-figures.loan-figures dd { font-size: 20px; }
tr.voided td { color: var(--ink-soft); }
tr.voided td.money { text-decoration: line-through; }