/* Tyn Studio — finance. Calm minimalism: off-white ground, hairline rules,
   Gelasio for identity moments, Arimo for working text and numbers. */

@font-face {
  font-family: "Arimo";
  src: url("../fonts/arimo.d116de091179.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url("../fonts/arimo-italic.045156402351.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gelasio";
  src: url("../fonts/gelasio.3aefdd71198b.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f8f6f3;
  --surface: #fffefb;
  --ink: #1c1b18;
  --muted: #6f6a61;
  --faint: #b3ada2;
  --line: #e6e1d7;
  --line-strong: #cfc8ba;
  --blue: #1f3b70;
  --slate: #587fbc;
  --orange: #d3542a;
  --sand: #efe9dd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Arimo", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2 {
  font-family: "Gelasio", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 19px; margin: 0 0 12px; }

/* ---- chrome ---- */

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 40px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40; /* above the forecast's sticky columns (z-index 2) */
  background: var(--bg);
}
.wordmark { display: flex; align-items: baseline; gap: 10px; }
.wordmark img { height: 26px; width: auto; transform: translateY(3px); }
.wordmark span {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.wordmark:hover { text-decoration: none; }

.topbar nav { display: flex; gap: 18px; align-items: center; }
.topbar nav a { color: var(--ink); font-size: 14px; }
.topbar nav a.active {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Grouped nav: Work / Books open as dropdown menus so the bar stays compact. */
.nav-menu { position: relative; }
.nav-trigger { background: none; border: none; font-family: inherit; font-size: 14px;
  color: var(--ink); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.nav-trigger .caret { font-size: 9px; color: var(--muted); transition: transform .12s; }
.nav-trigger.active { color: var(--blue); }
.nav-menu:hover .caret, .nav-menu:focus-within .caret { transform: translateY(1px); color: var(--blue); }
.nav-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 10px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 6px; min-width: 148px; display: none; flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 50; }
.nav-menu:hover .nav-panel, .nav-menu:focus-within .nav-panel { display: flex; }
.nav-panel a { padding: 7px 12px; border-radius: 4px; font-size: 13.5px; white-space: nowrap; }
.nav-panel a:hover { background: var(--sand, #faf8f3); text-decoration: none; }
.nav-panel a.active { text-decoration: none; background: var(--sand, #faf8f3); }
/* A hover bridge so the menu doesn't close in the gap between trigger and panel. */
.nav-menu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }

/* .btn and .btn-ghost share one set of control metrics so <a> and <button>
   render identically — the colors are the only difference between them. */
.btn, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 3px;
  font-size: 13.5px;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.btn {
  background: var(--blue);
  color: #fff !important;
  border: 1px solid var(--blue);
}
.btn:hover { background: #17305d; text-decoration: none !important; }
.btn-ghost {
  background: transparent;
  color: var(--blue) !important;
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--sand); border-color: var(--blue); text-decoration: none; }

/* Date-range filter: from → to and its action composed as one control,
   sized to match the buttons. */
.range-form {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.range-form .iso-date {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  width: 7em;
  text-align: center;
  padding: 7px 2px;
}
.range-form .iso-date:focus { outline: none; background: var(--sand); }
.range-sep { color: var(--muted); font-size: 12px; user-select: none; }
.range-apply {
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-radius: 0 2px 2px 0;
  background: none;
  color: var(--blue);
  font-family: inherit;
  font-size: 13px;
  align-self: stretch;
  padding: 0 12px;
  cursor: pointer;
}
.range-apply:hover { background: var(--sand); }
/* Groups a range filter with neighbouring actions in a page head. */
.head-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-quiet {
  background: none; border: none; color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 0; font-family: inherit;
}
.btn-quiet:hover { color: var(--orange); }

main { padding: 30px 40px 80px; }

.logout-form { display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; }
.user-chip { color: var(--muted); font-size: 12.5px; }

.demo-banner {
  background: var(--sand);
  color: var(--blue);
  font-size: 13px;
  text-align: center;
  padding: 7px 16px;
  border-bottom: 1px solid var(--line-strong);
}

.auth-card { max-width: 380px; margin: 60px auto 0; }
.auth-card .sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }

.messages { padding: 14px 40px 0; display: flex; flex-direction: column; gap: 8px; }
.message {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14px; color: var(--ink);
  background: #eef1f7; border-left: 3px solid var(--blue);
  padding: 10px 14px; border-radius: 6px;
  box-shadow: 0 1px 4px rgba(31, 59, 112, 0.08);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.message.fading { opacity: 0; transform: translateY(-4px); }
.message.error, .message.warning { background: #faf0ec; border-left-color: var(--orange); }
.msg-icon { font-weight: 700; color: var(--blue); }
.message.error .msg-icon, .message.warning .msg-icon { color: var(--orange); }
.msg-text { flex: 1; }
.msg-close {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.msg-close:hover { color: var(--ink); background: rgba(31, 59, 112, 0.08); }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 22px;
  gap: 20px;
}
.page-head .sub { color: var(--muted); font-size: 13.5px; }

/* ---- overview table ---- */

.window-nav { display: flex; align-items: center; gap: 8px; }
.window-nav a {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink);
  font-size: 13px;
}
.window-nav a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }

.table-scroll { overflow-x: auto; border-top: 1px solid var(--line-strong); }

table.grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grid th {
  font-weight: 400;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  text-align: left;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--line);
}
.grid td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.grid th.num, .grid td.num { text-align: right; }
.grid td.line-no { color: var(--faint); font-size: 11.5px; }
.grid td.code { color: var(--muted); font-size: 12px; }
.grid td.name a { color: var(--ink); }
.grid td.name a:hover { color: var(--blue); }

.grid th.month-now, .grid td.month-now { background: var(--sand); }
.grid th.month-now { color: var(--blue); }

.grid td.cell { color: var(--muted); }
.grid td.cell.paid { color: var(--ink); }
.grid td.cell.paid::after {
  content: "●";
  font-size: 6px;
  color: var(--slate);
  vertical-align: 2px;
  margin-left: 5px;
}
.grid td.cell.partial::after {
  content: "◐";
  font-size: 8px;
  color: var(--slate);
  margin-left: 5px;
}
.grid tr.excluded td { opacity: 0.6; }

.grid tr.section td {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  padding-top: 22px;
  border-bottom: 1px solid var(--line-strong);
  position: static !important; /* section label spans the sticky column too */
}

/* Keep the Total € column visible while the months scroll underneath it. */
.grid th:last-child, .grid td:last-child {
  position: sticky;
  right: 0;
  background: var(--bg);
  border-left: 1px solid var(--line-strong);
  z-index: 2;
}

/* Frozen detail pane: the identity columns stay put, only months scroll.
   Widths must be fixed so each column's `left` offset lines up. */
.frozen .c1, .frozen .c2, .frozen .c3, .frozen .c4,
.frozen .c5, .frozen .c6, .frozen .c7, .frozen .c8 {
  position: sticky;
  background: var(--bg);
  z-index: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frozen .c1 { left: 0;     width: 30px;  min-width: 30px;  max-width: 30px; }
.frozen .c2 { left: 30px;  width: 104px; min-width: 104px; max-width: 104px; }
.frozen .c3 { left: 134px; width: 122px; min-width: 122px; max-width: 122px; }
.frozen .c4 { left: 256px; width: 152px; min-width: 152px; max-width: 152px; }
.frozen .c5 { left: 408px; width: 184px; min-width: 184px; max-width: 184px; }
.frozen .c6 { left: 592px; width: 104px; min-width: 104px; max-width: 104px; }
.frozen .c7 { left: 696px; width: 38px;  min-width: 38px;  max-width: 38px; }
.frozen .c8 { left: 734px; width: 122px; min-width: 122px; max-width: 122px;
  border-right: 1px solid var(--line-strong); }
.frozen .section-label { position: sticky; left: 0; z-index: 2; background: var(--bg); }

/* Partner payout sub-rows: money going out, orange. */
tr.partner-row td { border-bottom: 1px solid var(--line); }
tr.partner-row .sub-name { font-size: 12.5px; color: var(--muted); }
tr.partner-row .sub-name a { color: var(--orange); }
.grid td.cell.out { color: #dd9070; }
.grid td.cell.out.paid-out { color: var(--orange); }
.grid td.cell.out.paid-out::after {
  content: "●";
  font-size: 6px;
  color: var(--orange);
  vertical-align: 2px;
  margin-left: 5px;
}
.grid td.out { color: var(--orange); }
.grid tfoot tr.partner-total td { color: var(--orange); }
.grid tfoot tr.net td { border-top: 1px solid var(--line); }

.grid tfoot td {
  border-bottom: none;
  padding-top: 12px;
  font-weight: 700;
}
.grid tfoot tr.totals td { border-top: 1px solid var(--line-strong); }
.grid tfoot tr.weighted td {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  padding-top: 2px;
}
.grid tfoot .foot-label { font-weight: 400; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.09em; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}
.status.st-figuring_out::before { background: var(--faint); }
.status.st-not_now::before { background: var(--orange); }
.status.st-awaiting::before { background: var(--sand); border: 1px solid var(--slate); }
.status.st-proposal_wip::before { background: var(--slate); opacity: 0.5; }
.status.st-proposal_submitted::before { background: var(--slate); }
.status.st-ongoing::before { background: var(--blue); }
.status.st-closed::before { background: var(--ink); }
.status .pct { color: var(--muted); font-size: 11px; }

/* Inline status editing in the overview table */
.status-form { display: inline-flex; align-items: center; gap: 6px; }
.status-form .pct { color: var(--muted); font-size: 11px; }
.status-select {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.status-select:hover, .status-select:focus {
  border-color: var(--line-strong);
  background: var(--surface);
  outline: none;
}

/* ---- dashboard ---- */

.dash-wrap { max-width: 1420px; }
.dash-main {
  display: flex;
  gap: 16px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.chart-panel { flex: 1 1 560px; margin-bottom: 0; }
.side-panel {
  flex: 0 0 360px;
  margin-bottom: 0;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
}
.side-panel .facts { border-top: none; }
.side-panel .facts div { font-size: 13.5px; padding: 8px 0; }
.side-link { margin-top: auto; padding-top: 14px; font-size: 13.5px; }

/* Category spending mini-bars in the runway card */
/* Cash-flow projection. */
.cf-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  max-width: 800px; margin-bottom: 26px; }
.cf-stat { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.cf-stat.cf-warn { border-left-color: var(--orange); }
.cf-stat .cf-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cf-stat .cf-val { font-size: 20px; font-variant-numeric: tabular-nums; }
.cf-stat.cf-warn .cf-val { color: var(--orange); }
.cf-host { position: relative; }
/* Native 1100-wide viewBox: the panel/legend are capped so the chart fills its
   card at ~1:1 and stays crisp instead of upscaling across a wide monitor. */
.cf-legend, .cf-panel, .cf-summary { max-width: 1140px; }
.cfchart .axis-now { fill: var(--blue); }
.cfchart .cf-inc-conf { fill: #5b8a9e; opacity: .72; }
.cfchart .cf-inc-pipe { fill: #5b8a9e; opacity: .34; }
.cfchart .cf-zero { stroke: var(--line-strong); stroke-width: 1; }
.cfchart .cf-line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.cfchart .cf-line-s { stroke: var(--slate); }
.cfchart .cf-line-w { stroke: #c68a3e; stroke-dasharray: 5 4; }
.cfchart .cf-dot { stroke: var(--surface); stroke-width: 1; }
.cfchart .cf-dot-s { fill: var(--slate); }
.cfchart .cf-dot-s.is-now { fill: var(--blue); r: 3.5; }
.cfchart .cf-dot-s.neg { fill: var(--orange); }
.cfchart .cf-dot-w { fill: #c68a3e; }
.cfchart .cf-mark { stroke-width: 1; stroke-dasharray: 4 4; }
.cfchart .cf-mark-out { stroke: var(--orange); }
.cfchart .cf-mark-income { stroke: var(--muted); }
.cfchart .cf-mark-label { font-size: 9px; font-family: inherit; text-transform: uppercase;
  letter-spacing: .04em; fill: var(--muted); }
.cfchart .cf-mark-label.out { fill: var(--orange); }
.cfchart .bar-hit { fill: transparent; cursor: default; }
/* .lk::before below resets border-color via its shorthand, so raise specificity. */
.chart-legend .lk.cf-lk-s::before { border-color: var(--slate); }
.chart-legend .lk.cf-lk-w::before { border-color: #c68a3e; border-top-style: dashed; }

/* Cash-flow tooltip (matches the other chart tooltips). */
.cf-tip { position: absolute; top: 6px; transform: translateX(-50%); pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 9px 12px; font-size: 12px;
  width: max-content; box-shadow: 0 6px 20px rgba(0,0,0,.22); z-index: 6; }
.cf-tip .cf-tip-month { font-weight: 600; margin-bottom: 6px; white-space: nowrap; }
.cf-tip .tip-row { display: flex; justify-content: space-between; gap: 22px; line-height: 1.7; }
.cf-tip .tip-row[hidden] { display: none; }
.cf-tip .tip-k { color: rgba(255,255,255,.72); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cf-tip .tip-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-tip .tip-v.neg { color: #ffb4a0; }
.cf-tip .cf-tip-brow { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.18); font-weight: 600; }
.cf-tip .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.cf-tip .sw-conf { background: #5b8a9e; }
.cf-tip .sw-pipe { background: #5b8a9e; opacity: .4; }
.chart-legend .lk.cf-lk-pipe::before { width: 11px; height: 11px; border: none; background: #5b8a9e; opacity: .4; border-radius: 2px; }

.cf-table { max-width: 760px; }
.cf-table .cf-row-out td { background: rgba(211,84,42,.06); }
.cf-table .cf-row-lastinc td { border-top: 1.5px solid var(--line-strong); }

/* GitHub-style hours heatmap: months as cells, colour + fill-size = busyness. */
.hours-legend { display: flex; gap: 8px; align-items: center; }
.hk-scale { display: inline-flex; gap: 3px; }
.hk-scale .hk-cell { width: 13px; height: 13px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.hk-cell.l-empty { background: var(--surface); }
.hk-cell.l-under { background: #e2d8bf; }
.hk-cell.l-ok { background: #9db487; }
.hk-cell.l-ok.f9 { background: #6f8f5e; }
.hk-cell.l-over { background: #cf7b63; }
.hk-labels { font-size: 11px; color: var(--muted); }

.gh-hours { display: inline-block; margin: 4px 0 8px; }
.gh-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.gh-ylabel { width: 3rem; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.gh-mlabel { width: 34px; text-align: center; font-size: 10px; color: var(--faint); text-transform: uppercase; }
.gh-head { margin-bottom: 3px; }
.gh-cell { width: 34px; height: 34px; border-radius: 5px; background: var(--surface);
  border: 1px solid var(--line); position: relative; display: inline-flex;
  align-items: center; justify-content: center; }
/* The inner fill grows with hours (size encoding); colour comes from the level. */
.gh-cell .gh-fill { width: calc(30% + var(--f) * 70%); height: calc(30% + var(--f) * 70%);
  border-radius: 3px; display: block; }
.gh-cell.l-under .gh-fill { background: #d9cba8; }
.gh-cell.l-ok .gh-fill { background: color-mix(in srgb, #6f8f5e calc(50% + var(--f) * 50%), #b9c9a8); }
.gh-cell.l-over .gh-fill { background: #cf7b63; width: 88%; height: 88%; }
.gh-cell.is-now { border-color: var(--ink); border-width: 1.5px; }
.gh-cell.is-future { opacity: .55; }
/* Planned (not yet logged): filled, but lighter than logged hours. */
.gh-cell.is-planned .gh-fill { opacity: .5; }
/* Holiday: diagonal stripes across the cell. */
.gh-cell.is-holiday { border-color: #c19a4e; border-style: dashed; }
.gh-cell.is-holiday::after { content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(193,154,78,.4) 3px 5px);
  pointer-events: none; }
.gh-total { width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }

/* Hours cell tooltip. */
.gh-hours { position: relative; }
.gh-tip { position: absolute; transform: translate(-50%, -100%); pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 9px 12px; z-index: 6;
  min-width: 130px; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.gh-tip .gt-month { display: block; font-weight: 600; font-size: 12px; margin-bottom: 4px; }
.gh-tip .gt-total { display: block; font-size: 15px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.gh-tip .gt-total.over { color: #ffb4a0; }
.gh-tip .gt-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.6); margin-left: 4px; }
.gh-tip .gt-line { display: flex; justify-content: space-between; gap: 16px; font-size: 12px;
  line-height: 1.6; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }

.holiday-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; max-width: 720px; }
.holiday-form .fld { display: flex; flex-direction: column; gap: 5px; }
.holiday-form .fld input { padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 4px;
  font-size: 14px; font-family: inherit; }
@media (max-width: 640px) { .gh-mlabel, .gh-cell { width: 26px; } .gh-cell { height: 26px; } }

/* Project allocation editor. */
.alloc-grid { display: flex; flex-wrap: wrap; gap: 20px; margin: 10px 0 4px; }
.alloc-fld { display: flex; flex-direction: column; gap: 5px; }
.alloc-name { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.alloc-in { display: inline-flex; align-items: center; gap: 4px; }
.alloc-in input { width: 78px; text-align: right; padding: 6px 8px; border: 1px solid var(--line-strong);
  border-radius: 4px; font-size: 14px; font-family: inherit; }
.alloc-pct { color: var(--muted); }
.alloc-hint { font-size: 10.5px; color: var(--faint); }
.alloc-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }

/* Per-payment allocation overrides. */
.pp-alloc { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
#pp-alloc-toggle { padding-left: 0; }
.pp-table { max-width: 640px; }
.pp-table th.num-col, .pp-table td.num-col { text-align: right; }
.pp-in { width: 62px; text-align: right; padding: 5px 7px; border: 1px solid var(--line-strong);
  border-radius: 6px; background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-in:focus { outline: none; border-color: var(--slate); }

/* Dashboard envelope strip. */
.env-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -14px 0 30px;
  text-decoration: none; }
.env-strip:hover { text-decoration: none; }
.env-chip { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong); border-radius: 5px; padding: 7px 12px; background: var(--surface); }
.env-chip.env-backup { border-left-color: #5b8a9e; }
.env-chip.env-salary { border-left-color: #6f8f5e; }
.env-chip.env-reinvest { border-left-color: #c19a4e; }
.env-chip.env-tax { border-left-color: #cf7b63; }
.env-chip-name { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.env-chip-val { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
.env-chip-val.out { color: var(--orange); }
.env-chip-link { font-size: 12px; color: var(--blue); }

/* Envelope accounts. */
.env-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; max-width: 1120px; margin-bottom: 26px; }
.env-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 6px; padding: 15px 16px 12px; }
.env-card.env-backup { border-left-color: #5b8a9e; }
.env-card.env-salary { border-left-color: #6f8f5e; }
.env-card.env-reinvest { border-left-color: #c19a4e; }
.env-card.env-tax { border-left-color: #cf7b63; }
.env-name { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.env-balance { font-size: 24px; font-variant-numeric: tabular-nums; margin: 6px 0 8px; }
.env-flows { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.env-flows .in { color: #3f7a5a; }
.env-flows .out { color: var(--orange); }
.env-card-actions { display: flex; gap: 10px; margin-top: 10px; }
.env-card-actions .btn-quiet { font-size: 12px; }
.env-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.env-panel { max-width: 760px; }
.amt-in .amt-cur { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line-strong);
  border-left: none; border-radius: 0 5px 5px 0; background: var(--sand, #faf8f3); color: var(--muted);
  font-size: 14px; }
.amt-in input { border-radius: 5px 0 0 5px !important; }

/* Click-through month detail below the chart. */
.month-detail { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.md-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.md-month { font-size: 15px; font-weight: 600; margin: 0; }
.md-hint { font-size: 11px; color: var(--faint); }
.md-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.md-col-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line);
  padding-bottom: 6px; margin-bottom: 6px; }
.md-col-head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.md-total { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.md-list { list-style: none; margin: 0; padding: 0; }
.md-list li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
  font-size: 12.5px; }
.md-list li span:first-child { color: var(--ink); }
.md-list li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-list .md-empty { color: var(--faint); font-style: italic; }
.md-net { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px;
  border-top: 1.5px solid var(--ink); font-weight: 700; font-size: 14px; }
.md-net .md-net-total { font-variant-numeric: tabular-nums; }
.md-net .md-net-total.neg { color: var(--orange); }
.md-sw { }
.month-detail .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.month-detail .sw-in { background: #5b8a9e; }
.month-detail .sw-exp { background: #cf7b63; }
.barchart .bar-g.selected .bar-inc { stroke: var(--ink); stroke-width: 1.2; }
.barchart .bar-g.selected .bar-exp { stroke: var(--ink); stroke-width: 1.2; }
@media (max-width: 640px) { .md-cols { grid-template-columns: 1fr; gap: 16px; } }
.dash-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 620px));
  gap: 20px 48px;
}

.tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px 12px;
}
.tile small {
  color: var(--muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.07em; display: block; margin-bottom: 6px; white-space: nowrap;
}
.tile-value {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tile-value.tile-out { color: var(--orange); }
.tile-sub { color: var(--faint); font-size: 11.5px; margin-top: 3px; }
.tile-alert { border-color: var(--orange); }
.tile-alert .tile-value { color: var(--orange); }
.tile-link { display: block; text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
.tile-link:hover { border-color: var(--blue); background: var(--sand, #faf8f3); text-decoration: none; }
.tile-link .tile-sub { color: var(--blue); }

/* Dashboard: organised as position → needs attention → this quarter → trend. */
.dash-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px; }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 18px 20px; display: flex; flex-direction: column; }
.hero-card .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hero-card .val { font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 8px 0 5px; }
.hero-card .val.out { color: var(--orange); }
.hero-card .sub { font-size: 12px; color: var(--faint); }
.hero-card.hero-warn { border-left: 3px solid var(--orange); }
.hero-card.hero-warn .val { color: var(--orange); }
.runway-grid { display: grid; grid-template-columns: 4.8rem auto 1.4rem auto;
  column-gap: 12px; row-gap: 3px; align-items: baseline; margin: 8px 0 6px; }
.runway-grid .rg-head { font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--faint); }
.runway-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.runway-cash, .runway-fc { font-size: 21px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.runway-cash { color: var(--orange); }
.runway-arrow { color: var(--muted); font-size: 15px; text-align: center; }
.runway-fc { color: var(--ink); font-weight: 600; }
.hero-card.hero-warn .runway-fc { color: var(--ink); }
.hero-link { text-decoration: none; color: inherit; transition: border-color .12s; }
.hero-link:hover { border-color: var(--blue); text-decoration: none; }
.hero-link .sub { color: var(--blue); }

.dash-section { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 8px; margin: 4px 0 16px; font-weight: 600; }

.dash-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px; }
.action-card { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 6px; padding: 16px 18px; transition: border-color .12s; min-height: 96px; }
.action-card:hover { border-color: var(--blue); border-left-color: var(--blue); text-decoration: none; }
.action-card .q { font-size: 13px; font-weight: 600; color: var(--ink); }
.action-card .val { font-size: 24px; font-variant-numeric: tabular-nums; margin: 10px 0 3px; }
.action-card .val.out { color: var(--orange); }
.action-card .st { font-size: 12px; color: var(--muted); }
.action-card .clear { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.action-card.is-urgent { border-left-color: var(--orange); }
.action-card.is-urgent .val { color: var(--orange); }
.action-card.is-due { border-left-color: var(--blue); }

.list-head { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
@media (max-width: 820px) { .dash-hero, .dash-actions { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 22px 12px;
  margin-bottom: 30px;
}
.panel h2 { font-size: 16px; margin-bottom: 6px; }

.revchart { width: 100%; height: auto; display: block; }
.revchart .grid { stroke: var(--line); stroke-width: 0.75; }
.revchart .baseline { stroke: var(--line-strong); stroke-width: 0.75; }
.revchart .axis { fill: var(--faint); font-size: 9.5px; font-family: inherit; font-variant-numeric: tabular-nums; }
.revchart .axis-year { fill: var(--muted); }
.revchart .trend { stroke: var(--slate); stroke-width: 1.75; fill: none;
  stroke-linejoin: round; stroke-linecap: round; }
.revchart .trend.proj { stroke-dasharray: 4 5; opacity: 0.55; }
.revchart .pt { fill: var(--slate); }
.revchart .pt.proj { fill: var(--surface); stroke: var(--slate); stroke-width: 1.5; }
.revchart .pt-hit { fill: transparent; }
.revchart .trend-out { stroke: var(--orange); stroke-width: 1.25; fill: none; opacity: 0.75; }
.revchart .trend-out.proj { stroke-dasharray: 4 5; opacity: 0.45; }
.revchart .pt-out { fill: var(--orange); opacity: 0.75; }
.revchart .pt-out.proj { fill: var(--surface); stroke: var(--orange); stroke-width: 1.2; opacity: 0.6; }
.revchart .reflabel.outlabel { fill: var(--orange); opacity: 0.85; }
.revchart .refline { stroke-width: 1; stroke-dasharray: 5 4; fill: none; }
.revchart .refline.survival { stroke: #c68a3e; }
.revchart .refline.whole { stroke: var(--line-strong); }

/* Monthly income (up) / expenses (down) / net (tick + label). Muted, on-brand:
   steel-blue income, terracotta expenses, old-burgundy net, with sage/amber
   plan lines — drawn from the Tyn Studio palette. */
.chart-host { position: relative; }
.barchart { --inc: #5b8a9e; --exp: #cf7b63; --netc: #472d30; }
.barchart .grid { stroke: var(--line); stroke-width: 0.5; }
.barchart .baseline { stroke: var(--line-strong); stroke-width: 0.8; }
.barchart .bar-inc { fill: var(--inc); }
.barchart .bar-exp { fill: var(--exp); }
.barchart .bar-inc.proj, .barchart .bar-exp.proj { opacity: 0.42; }
.barchart .net-tick { stroke: var(--netc); stroke-width: 2; }
.barchart .net-label { fill: var(--netc); font-size: 8.5px; font-weight: 600;
  font-family: inherit; font-variant-numeric: tabular-nums; }
.barchart .net-label.neg { fill: var(--exp); }
.barchart .bar-hit { fill: transparent; }
.barchart .clamp-label { fill: var(--inc); font-size: 9.5px; font-weight: 700; font-family: inherit; }
.barchart .axis-now { fill: var(--netc); font-weight: 700; }
.barchart .bar-g { transition: opacity .12s; }
.barchart .bar-g.hot .bar-inc { fill: #4a7686; }
.barchart .bar-g.hot .bar-exp { fill: #bd6a52; }
.barchart .refline.survival { stroke: #c19a4e; }
.barchart .refline.whole { stroke: #b6b89a; }

/* Formatted hover tooltip. */
.chart-tip { position: absolute; transform: translate(-50%, -100%); pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 9px 12px; font-size: 12px;
  width: max-content; max-width: 260px; box-shadow: 0 6px 20px rgba(0,0,0,.22); z-index: 5; }
.chart-tip .tip-month { font-weight: 600; margin-bottom: 6px; font-size: 12px; white-space: nowrap; }
.chart-tip .tip-row { display: flex; justify-content: space-between; gap: 24px; line-height: 1.7; }
.chart-tip .tip-k { color: rgba(255,255,255,.72); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart-tip .tip-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-tip .tip-net-row { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.18); font-weight: 600; }
.chart-tip .tip-net.neg { color: #ffb4a0; }
.chart-tip .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.chart-tip .sw-in { background: #5b8a9e; }
.chart-tip .sw-exp { background: #cf7b63; }
.revchart .reflabel { font-size: 9.5px; font-family: inherit; letter-spacing: 0.02em; }
.revchart .reflabel.survival { fill: var(--orange); }
.revchart .reflabel.whole { fill: var(--muted); }
.ref-key.survival { color: var(--orange); }
.ref-key.whole { color: var(--faint); }
.chart-note { font-size: 12px; color: var(--faint); }

.revchart .year-break { stroke: var(--line-strong); stroke-width: 0.75; stroke-dasharray: 2 4; }
.chart-scroll { overflow: visible; }

/* Filled area under the settled net line, a subtle gradient down to the axis. */
.revchart .netarea { fill: url(#netfill); stroke: none; }
.revchart .netfill-top { stop-color: var(--slate); stop-opacity: 0.16; }
.revchart .netfill-bot { stop-color: var(--slate); stop-opacity: 0.01; }
.revchart .trend { stroke-width: 2; }
.revchart .clamp-label { fill: var(--slate); font-size: 9px; font-weight: 600; font-family: inherit; }

/* Legend replaces the cramped right-edge labels. */
.dash-section-legend { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.chart-legend { display: inline-flex; gap: 14px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; font-weight: 400; }
.chart-legend .lk { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart-legend .lk::before { content: ""; width: 15px; border-top: 2px solid; display: inline-block; }
.chart-legend .lk-inc::before { width: 11px; height: 11px; border: none; background: #5b8a9e; border-radius: 2px; }
.chart-legend .lk-exp::before { width: 11px; height: 11px; border: none; background: #cf7b63; border-radius: 2px; }
.chart-legend .lk-net::before { width: 14px; border-top: 2.5px solid #472d30; }
.chart-legend .lk-survival::before { border-color: #c19a4e; border-top-style: dashed; }
.chart-legend .lk-whole::before { border-color: #b6b89a; border-top-style: dashed; }

/* Chart month navigation. */
.chart-head { display: inline-flex; align-items: baseline; gap: 12px; }
.chart-nav { display: inline-flex; align-items: center; gap: 8px; text-transform: none;
  letter-spacing: 0; font-weight: 400; }
.chart-nav a { color: var(--muted); text-decoration: none; }
.chart-nav a:hover { color: var(--blue); }
.chart-nav > a:first-of-type, .chart-nav > a:nth-of-type(2) { font-size: 17px; line-height: 1;
  padding: 0 3px; }
.chart-range { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 118px; text-align: center; }
.chart-today { font-size: 11px; border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 1px 7px; }
.chart-today:hover { border-color: var(--blue); }

/* Expenses */
.expense-add {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 28px;
}
.expense-add input, .expense-add select {
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 7px 9px;
}
.expense-add input[name="description"] { flex: 1 1 220px; }
.expense-add input[name="amount"] { width: 110px; text-align: right; }
.expense-add input[name="date"] { width: 118px; }
.expense-add .check-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); white-space: nowrap;
}
.chip {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--slate);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 0 5px;
  vertical-align: 1px;
  margin-left: 4px;
}
.link-line { font-size: 12px; margin-top: 1px; }
.expense-month { margin-bottom: 26px; }
.expense-month-head { display: flex; align-items: baseline; gap: 14px; }
.expense-month-head h2 { font-size: 16px; margin-bottom: 4px; }
.expense-table { width: 100%; max-width: 860px; }
.expense-table .date-col { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* One ledger table: months are banded subtotal rows inside a single grid, so
   columns line up across every month and the header shows once. Kept narrow
   and dense — a scannable overview, not a sparse spreadsheet. */
/* Add toolbar + form panels: the page stays clean; adding a cost or movement
   opens one tidy, labelled panel. */
.add-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.add-toolbar .add-import-form { margin: 0; }
.add-panel { border: 1px solid var(--line-strong); border-radius: 8px; padding: 18px 20px 20px;
  margin-bottom: 18px; max-width: 1120px; background: var(--sand, #faf8f3); }
.add-panel .add-hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.add-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 18px; align-items: start; }
.add-grid .fld { display: flex; flex-direction: column; gap: 6px; }
.add-grid .fld-2 { grid-column: span 2; }
/* One-line labels of a fixed height keep every input on the same baseline. */
.add-grid .fld-lab { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; line-height: 16px; height: 16px; white-space: nowrap; overflow: hidden; }
.add-grid .fld input, .add-grid .fld select { font-size: 14px; color: var(--ink);
  height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 5px; width: 100%;
  box-sizing: border-box; font-family: inherit; background: #fff; }
.add-grid .fld select { padding-right: 6px; }
.add-grid .fld input:focus, .add-grid .fld select:focus { outline: none; border-color: var(--blue); }
.add-grid .amt-in { display: flex; gap: 8px; }
.add-grid .amt-in input { flex: 1; min-width: 0; }
.add-grid .amt-in select { width: auto; flex: 0 0 auto; }
.add-grid .opt { text-transform: none; color: var(--muted); font-weight: 400; font-size: 10.5px; }
.fld-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); margin-top: 16px; }
.fld-check input { width: auto; margin: 0; }
.add-actions { margin-top: 18px; display: flex; gap: 14px; align-items: center; }
@media (max-width: 900px) { .add-grid { grid-template-columns: repeat(2, 1fr); } }

.ledger-table { width: 100%; max-width: 1320px; }
.ledger-table .date-col { width: 5rem; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: 12.5px; vertical-align: top; padding-top: 8px; }
.ledger-table .what-col { width: 40%; }
.ledger-table .kind-col { width: 10rem; vertical-align: top; padding-top: 7px; }
.ledger-table .gl-col { width: 22%; }
.ledger-table .amt-col { width: 9rem; white-space: nowrap; vertical-align: top; padding-top: 8px; }
.ledger-table .act-col { width: 4rem; }
.ledger-table .receipt-col { width: 4.5rem; text-align: center; }
.ledger-table .receipt-link { text-decoration: none; }

/* Kind badges: each entry type reads at a glance by colour. */
.kind-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; font-weight: 600; white-space: nowrap; }
.kind-badge.k-client-payment   { background: rgba(31,122,68,.13);  color: #1f7a44; }
.kind-badge.k-product-revenue  { background: rgba(31,90,122,.13);  color: #1f5a7a; }
.kind-badge.k-expense          { background: rgba(197,90,17,.13);  color: #b4530f; }
.kind-badge.k-partner-payout   { background: rgba(150,86,28,.14);  color: #8a521c; }
.kind-badge.k-internal-transfer{ background: rgba(111,106,97,.15); color: #6f6a61; }
.kind-badge.k-stripe-payout    { background: rgba(98,86,150,.14);  color: #5a508c; }
.kind-badge.k-transaction      { background: rgba(60,70,96,.11);   color: #47506a; }

/* Edit mode: entry controls stay hidden until editing is explicitly enabled. */
.ledger-edit-bar { margin-bottom: 12px; }
.ledger-table .act-col a, .ledger-table .act-col .inline-form { display: none; }
.ledger-table.editing .act-col a { display: inline; }
.ledger-table.editing .act-col .inline-form { display: inline; }
.ledger-table .ledger-band td { padding: 18px 0 7px; border-top: 2px solid var(--line-strong); }
.ledger-table tbody tr:first-child .ledger-band td { border-top: none; padding-top: 4px; }
.ledger-month { font-size: 14px; font-weight: 700; }
.ledger-totals { color: var(--muted); font-size: 12.5px; margin-left: 16px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-totals .in { margin-right: 8px; }
.ledger-net-cell { font-weight: 700; color: var(--ink); font-size: 12.5px; }
.ledger-net-cell.out { color: var(--orange); }
.ledger-table tr.is-transfer .date-col,
.ledger-table tr.is-transfer .what-col,
.ledger-table tr.is-transfer .gl-col { color: var(--muted); }
.gl-col { white-space: nowrap; }
.gl-col .gl-code { font-variant-numeric: tabular-nums; color: var(--ink); }
.what-col .what-desc { }
.what-col .row-kind { color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; margin-left: 8px; white-space: nowrap; }
/* Amounts read in two colours: money in (black), money out (orange). */
.amt-col.in { color: var(--ink); }
.amt-col.out { color: var(--orange); }
.amt-col .eur-eq { display: block; color: inherit; opacity: .75; font-size: 11.5px; font-weight: 400; }
.ledger-add { margin-bottom: 14px; }
.ledger-add-label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }

/* Profit & loss: revenue/costs sections with two basis columns. */
.pnl-table { width: 100%; max-width: 640px; }
.pnl-table .pnl-section td { padding-top: 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-top: none; }
.pnl-table .pnl-subtotal td { font-weight: 600; border-top: 1px solid var(--line-strong); }
.pnl-table .pnl-net td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--ink); padding-top: 10px; }
.pnl-table .pnl-subhead td { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border: none; padding-bottom: 2px; }
.pnl-table .gl-code { color: var(--muted); }
.pnl-table .bal-diff td { color: var(--orange); border-top: 1px dashed var(--line-strong); padding-top: 8px; }

/* Reconcile queue: one card per imported bank line with clear actions. */
.recon-card { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; margin-bottom: 12px; max-width: 780px; background: var(--sand, #faf8f3); }
.recon-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.recon-date { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 8px; }
.recon-desc { font-weight: 600; }
.recon-amount { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; white-space: nowrap; }
.recon-amount.in { color: var(--ink); }
.recon-amount.out { color: var(--orange); }
.recon-warn { color: var(--orange); font-weight: 600; font-size: 13px; }
.recon-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.recon-label { font-size: 12px; color: var(--muted); width: 100%; }
.recon-expense select { margin-right: 4px; }

.import-detected { background: var(--sand, #faf8f3); border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; max-width: 780px; font-size: 14px; }
.row-actions { display: flex; gap: 12px; align-items: baseline; font-size: 13px; }
.row-actions a, .row-actions .btn-quiet { color: var(--muted); font-size: 13px; text-decoration: none; }
.row-actions a:hover, .row-actions .btn-quiet:hover { color: var(--blue); text-decoration: none; }
.inline-form { display: inline; }

.warn-date { color: var(--orange); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sched th.num-col, .sched td.num-col { text-align: right; font-variant-numeric: tabular-nums; }
.fin-edit { margin-top: 22px; }
.fin-edit summary { color: var(--blue); font-size: 13.5px; cursor: pointer; }
.fin-edit form { margin-top: 14px; }

/* ---- cards ---- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
a.card:hover { border-color: var(--slate); text-decoration: none; }
.card h3 {
  font-family: "Gelasio", Georgia, serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 6px;
}
/* Title zone always reserves two lines so every card starts identically. */
.card h3.clamp-2 {
  min-height: calc(19px * 1.25 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .meta { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
/* Fixed-rhythm meta rows: exactly one line each, ellipsized, never collapsing. */
.card .meta.one-line {
  margin-bottom: 6px;
  min-height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card .figure {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card .figures {
  display: flex;
  gap: 22px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: auto; /* pin to the card bottom */
}
/* Aligned columns: labels and values at identical x-positions on every card. */
.card .figures.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.card .meta .status { font-size: 12.5px; }
a.card-muted { opacity: 0.7; }
a.card-muted:hover { opacity: 1; }

/* Payment progress: one segment per payment, filled = received. */
.progress {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 4px 0 14px;
}
.progress .seg {
  flex: 1;
  max-width: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.progress .seg.on { background: var(--slate); }
.progress .bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.progress .bar i { display: block; height: 100%; background: var(--slate); }
.progress-label {
  color: var(--faint);
  font-size: 10.5px;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* History / audit trail */
.history { margin-top: 36px; }
.hist {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
  max-width: 760px;
  font-variant-numeric: tabular-nums;
}
.hist td { padding: 7px 16px 7px 0; border-top: 1px solid var(--line); vertical-align: baseline; }
.hist .when { color: var(--muted); white-space: nowrap; }
.hist .who { color: var(--slate); font-size: 12px; }
.hist .what {
  color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.card .figure small {
  color: var(--muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.07em; display: block; white-space: nowrap;
}

/* ---- detail & forms ---- */

.detail-grid { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 44px; align-items: start; }
/* Project detail is an app-style fixed layout: header, page title, and the
   facts column never move — only the work pane (hours, schedule, partners,
   history) scrolls, and each section's heading pins while it passes. */
@media (min-width: 901px) {
  body:has(main.detail-fixed) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  body:has(main.detail-fixed) .topbar,
  body:has(main.detail-fixed) .messages,
  body:has(main.detail-fixed) .demo-banner { flex-shrink: 0; }
  main.detail-fixed { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
  main.detail-fixed .detail-grid { flex: 1; min-height: 0; }
  main.detail-fixed .detail-grid > div:first-child {
    max-height: 100%; overflow-y: auto; scrollbar-width: thin;
  }
  main.detail-fixed .detail-grid > div:last-child {
    overflow-y: auto; max-height: 100%; min-height: 0;
    padding-bottom: 60px; padding-right: 6px; scrollbar-width: thin;
  }
  main.detail-fixed .detail-section > h2 {
    position: sticky; top: 0; z-index: 3;
    background: var(--bg); padding: 8px 0; margin-top: 0;
  }
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}

.facts { border-top: 1px solid var(--line-strong); }
.facts div {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.facts dt, .facts .k {
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  padding-top: 3px;
}
.facts .v { text-align: right; font-variant-numeric: tabular-nums; }

form.stack { max-width: 560px; }
form.stack p { margin: 0 0 16px; display: flex; flex-direction: column; gap: 5px; }
form.stack label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
form.stack input, form.stack select, form.stack textarea,
.sched input, .sched select {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 8px 10px;
}
form.stack input:focus, form.stack select:focus, form.stack textarea:focus,
.sched input:focus { outline: none; border-color: var(--blue); }
form.stack .helptext { font-size: 12px; color: var(--faint); }
form.stack .errorlist { color: var(--orange); font-size: 13px; margin: 0; padding: 0; list-style: none; }
.form-actions { display: flex; gap: 14px; align-items: center; margin-top: 24px; }

.payment-dates { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 16px; }
.payment-dates label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.payment-dates .date-row { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-dates input { width: 130px; }

table.sched { border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sched th {
  font-weight: 400; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); text-align: left; padding: 8px 12px 6px 0;
}
.sched td { padding: 5px 12px 5px 0; border-top: 1px solid var(--line); }
.sched input[type="number"], .sched input[type="text"] { width: 120px; text-align: right; }
/* flatpickr, dressed in the house style. */
.flatpickr-calendar { font-family: "Arimo", system-ui, sans-serif; border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(31, 59, 112, 0.14); border-radius: 6px; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--blue); border-color: var(--blue); }
.flatpickr-day.today { border-color: var(--orange); }
.flatpickr-day.today:hover { background: var(--sand); color: var(--ink); }
.flatpickr-day:hover { background: var(--sand); border-color: var(--sand); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { font-weight: 600; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-family: inherit; }

/* Formset row removal: hidden checkbox, visible × / undo. */
.row-del { cursor: pointer; }
.row-del input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.row-del .x { display: inline-block; padding: 2px 8px; border-radius: 4px; color: var(--muted); font-size: 15px; line-height: 1; user-select: none; }
.row-del .x:hover { color: var(--orange); background: var(--sand); }
tr.pending-remove td { opacity: 0.45; }
tr.pending-remove td:not(:last-child) { text-decoration: line-through; }
.sched td.sched-derived { white-space: nowrap; }
.sched input[name$="-due"] { width: 130px; text-align: left; }
.sched .locked { color: var(--muted); font-size: 12px; }

.note { color: var(--muted); font-size: 13px; }
.note.warn { color: var(--orange); }

/* Inline technical names (env vars, files) — brand type, quiet chip. */
code {
  font-family: "Arimo", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.92em;
  background: var(--sand);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--ink);
}

/* Partners */
.partners-section { margin-top: 36px; }
.partner-block { margin-bottom: 18px; }
.partner-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.partner-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.partner-add select, .partner-add input {
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 7px 9px;
}
.partner-add input[name="percent"], .partner-add input[name="fixed_amount"] { width: 110px; }
.out { color: var(--orange); }
.out-figure { color: var(--orange); }
.sched td.out { text-align: right; padding-right: 12px; font-variant-numeric: tabular-nums; }

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  padding: 44px;
  text-align: center;
  color: var(--muted);
}


/* ---- small screens ---- */

@media (max-width: 1000px) {
  /* The frozen forecast pane would swallow a narrow viewport — let the whole
     table scroll instead. */
  .frozen .c1, .frozen .c2, .frozen .c3, .frozen .c4,
  .frozen .c5, .frozen .c6, .frozen .c7, .frozen .c8,
  .grid th:last-child, .grid td:last-child,
  .frozen .section-label {
    position: static;
  }
  .side-panel { flex: 1 1 300px; max-width: none; }
}

@media (max-width: 720px) {
  body { overflow-x: hidden; }
  /* Wide tables scroll within themselves instead of being clipped. */
  .sched { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topbar { padding: 16px 18px 14px; flex-wrap: wrap; gap: 8px 16px; }
  .topbar nav { gap: 8px 14px; flex-wrap: wrap; }
  main { padding: 20px 18px 60px; }
  .tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 12px 13px 10px; }
  .tile small { white-space: normal; }
  .tile-sub { white-space: normal; }
  .dash-main { display: block; }
  .chart-panel { margin-bottom: 16px; }
  .facts div { flex-wrap: wrap; }
  .card .figures.cols-3 { gap: 6px; }
  .card .figure { font-size: 12.5px; }
  .messages { padding: 10px 18px 0; }
  .demo-banner { font-size: 12px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  h1 { font-size: 22px; }
  .tile-value { font-size: 19px; }
  .dash-lists { grid-template-columns: 1fr; }
  .detail-grid { gap: 26px; }
  table.sched, table.hist { display: block; overflow-x: auto; }
  .chart-scroll { overflow-x: auto; }
  .chart-scroll .revchart { min-width: 640px; }
  .card-grid { grid-template-columns: 1fr; }
  .partner-add { flex-direction: column; align-items: stretch; }
  .auth-card { margin-top: 24px; }
}

/* ---- Hourly projects: hours log + derived schedule ---- */
.sched input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.sched input[type="number"]::-webkit-inner-spin-button,
.sched input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Derived cells read as values, not editable fields. */
.sched input[readonly] {
  border-color: transparent; background: transparent; color: var(--ink); cursor: default;
}
.sched input[readonly]:focus { border-color: transparent; }
.hours-log td { padding: 4px 14px 4px 0; }
.hours-log .month-col { min-width: 130px; color: var(--ink); }
.hours-log input[type="number"] { width: 72px; }
.hours-log td.derived {
  text-align: right; min-width: 96px; color: var(--muted);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.hours-log td.derived.assumed { color: var(--faint); font-style: italic; }
.hours-note { margin: 10px 0 0; }
form + h2, .hours-block + h2 { margin-top: 36px; }

/* ---- Project detail: money story + section rhythm ---- */
.money-story { border-top: 1px solid var(--line-strong); padding: 16px 0 20px; }
.money-story .eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.money-story .big {
  font-family: "Gelasio", Georgia, serif; font-size: 31px; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin: 4px 0 14px; color: var(--ink);
}
.paybar { height: 5px; background: var(--sand); }
.paybar span { display: block; height: 100%; background: var(--blue); }
.paybar-legend {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 7px;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.paybar-legend .got { color: var(--ink); }
.detail-section { margin-top: 40px; border-top: 1px solid var(--line-strong); padding-top: 14px; }
.detail-grid > div > .detail-section:first-child { margin-top: 0; }
.detail-section > h2 { margin-bottom: 14px; }
.detail-section .partner-add { margin-top: 16px; }
.regen { margin-top: 14px; text-align: right; }
.facts .v .sub-line { display: block; font-size: 12px; color: var(--muted); }
.detail-section .history { margin-top: 0; }


/* ---- UX pass: errors, focus, feedback, tables (2026-09) ---- */

/* Field errors: message in orange, offending control outlined. */
ul.errorlist { list-style: none; margin: 0 0 4px; padding: 0; color: var(--orange); font-size: 13px; }
ul.errorlist + p input, ul.errorlist + p select, ul.errorlist + p textarea { border-color: var(--orange) !important; }
td:has(> ul.errorlist) input, td:has(ul.errorlist) input { border-color: var(--orange) !important; }

/* One consistent focus ring, keyboard only. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .row-del input:focus-visible + .x {
  outline: 2px solid var(--slate); outline-offset: 2px; border-radius: 3px;
}

/* Screen-reader-only text (e.g. inside icon-only controls). */
.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; }

/* Submit feedback: dirty forms ring their Save button; submitting dims it. */
button.attention { box-shadow: 0 0 0 3px rgba(211, 84, 42, 0.28); }
button.is-loading { opacity: 0.55; pointer-events: none; }

/* Dense tables: row hover + edge shadows hinting at horizontal scroll. */
.grid tbody tr:hover td { background: rgba(31, 59, 112, 0.045); }
.sched tbody tr:hover td { background: rgba(31, 59, 112, 0.03); }
.table-scroll {
  background:
    radial-gradient(farthest-side at 0 50%, rgba(26, 26, 26, 0.16), transparent) left / 14px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(26, 26, 26, 0.16), transparent) right / 14px 100%;
  background-repeat: no-repeat;
}

/* Touch targets on small screens. */
@media (max-width: 720px) {
  .topbar nav a { padding: 8px 2px; }
  .row-del .x { padding: 10px 14px; font-size: 17px; }
  .msg-close { padding: 8px 12px; }
  input[type="checkbox"] { width: 18px; height: 18px; }
  .nav-group { padding-left: 12px; }
}


/* Sectioned forms (project form): quiet eyebrow legends. */
fieldset.form-section { border: 0; padding: 18px 0 0; margin: 10px 0 0; border-top: 1px solid var(--line-strong); }
fieldset.form-section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
fieldset.form-section legend { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 0 4px; }

/* Auth pages: a proper card. */
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 28px 30px 32px; box-shadow: 0 4px 20px rgba(31, 59, 112, 0.07); }
.auth-card h1 { margin-bottom: 4px; }

/* Primary dashboard tiles: cash + received lead the page. */
.tile-row.primary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
.tile-row.primary .tile { padding: 18px 20px 16px; }
.tile-row.primary .tile-value { font-size: 34px; }
@media (max-width: 720px) {
  .tile-row.primary { grid-template-columns: 1fr; }
  .tile-row.primary .tile-value { font-size: 28px; }
}

/* Receipts (the advisor's inbox) */
.receipts-table .doc-col a { color: var(--ink); }
.receipts-table .doc-col a:hover { color: var(--blue); }
.receipts-table td { padding-top: 7px; padding-bottom: 7px; }
.receipt-status { white-space: nowrap; }
.receipt-status .book-btn { min-width: 64px; }
.ok-mark { color: #1f7a44; }
.muted-row td, .muted-row .chip { color: var(--muted); }
.inline-form { display: inline; }
.quiet-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 12px; text-decoration: underline;
  text-underline-offset: 2px;
}
.quiet-link:hover { color: var(--blue); }
.book-row td {
  border-top: none; background: rgba(230, 225, 215, 0.25);
  padding: 12px 14px 16px; border-radius: 6px;
}
.review-split { display: flex; gap: 26px; align-items: flex-start; }
.receipt-preview {
  /* Half the panel; height follows width so a full A4 page (plus the
     viewer toolbar) fits with no dead space below. */
  /* 0.74 ≈ viewer toolbar + A4 page incl. the viewer's side margins. */
  flex: 0 0 50%; width: 50%; height: auto; aspect-ratio: 0.74;
  border: 1px solid var(--line-strong); border-radius: 4px; background: #fff;
}
.review-form { flex: 1; min-width: 0; }
.review-read { font-size: 13px; color: var(--muted); margin: 2px 0 14px; }
.review-read strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.review-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.review-grid .rv-full { grid-column: 1 / -1; }
.review-grid .fld { display: flex; flex-direction: column; gap: 4px; }
.review-grid input[type="text"], .review-grid select { width: 100%; }
.review-grid input[type="text"] { text-align: left; }
.review-grid input[type="number"] { width: 100%; }
.review-grid input, .review-grid select { font-size: 14px; padding: 7px 9px; }
.review-grid .amt-in { display: flex; gap: 8px; }
.review-grid .amt-in input { flex: 1 1 auto; min-width: 0; text-align: right; }
.review-grid .amt-in select { width: auto; flex: 0 0 5.5em; }
.review-actions { margin: 16px 0 10px; }
.review-actions .btn { padding: 8px 26px; }
.review-secondary {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px;
}
.btn-danger {
  background: none; cursor: pointer; font-size: 12.5px;
  color: #a33a2a; border: 1px solid rgba(163, 58, 42, 0.45);
  border-radius: 4px; padding: 3px 12px;
}
.btn-danger:hover { background: rgba(163, 58, 42, 0.07); border-color: #a33a2a; }
@media (max-width: 900px) {
  .review-split { flex-direction: column; }
  .receipt-preview { flex-basis: auto; width: 100%; height: 480px; }
  .review-grid { grid-template-columns: 1fr; }
}

/* Cash-flow navigation + actual-history region */
.cf-nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  max-width: 1140px; margin: 0 0 12px; }
.cf-nav-group { display: inline-flex; align-items: center; gap: 6px; }
.cf-nav-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-right: 2px; }
.cf-nav-btn { font-size: 12px; padding: 2px 9px; border: 1px solid var(--line-strong);
  border-radius: 4px; color: var(--slate); background: var(--surface); }
.cf-nav-btn:hover { border-color: var(--blue); color: var(--blue); }
.cf-nav-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cfchart .cf-hist-band { fill: rgba(111, 106, 97, 0.06); }
.cfchart .cf-now-divider { stroke: var(--slate); stroke-width: 1; stroke-dasharray: 2 3; }
.cfchart .cf-inc-actual { fill: var(--slate); opacity: .4; }
.cf-row-actual td { color: var(--muted); }
.cf-row-actual .date-col { font-style: italic; }

/* Cash-flow pan controls */
.cf-nav-range { font-size: 12.5px; color: var(--slate); font-variant-numeric: tabular-nums; }
.cf-nav-size { margin-left: auto; }
.cf-nav-arrow { font-size: 11px; line-height: 1; padding: 4px 11px; }
.cf-nav-btn.off { opacity: .35; pointer-events: none; }

/* Company details card (dashboard) */
.co-panel { max-width: 760px; padding: 18px 20px; }
.co-head { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 14px; }
.co-note { font-size: 12.5px; color: var(--muted); }
.co-actions { display: flex; gap: 8px; flex-shrink: 0; }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin: 0; }
.co-item { display: flex; flex-direction: column; gap: 1px; }
.co-item dt { font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); }
.co-item dd { margin: 0; font-size: 14px; color: var(--ink); cursor: pointer;
  font-variant-numeric: tabular-nums; border-radius: 3px; padding: 1px 3px;
  margin-left: -3px; transition: background .12s; }
.co-item dd:hover { background: rgba(31, 59, 112, 0.06); }
.co-item dd.co-copied { background: rgba(31, 122, 68, 0.15); }
@media (max-width: 560px) { .co-grid { grid-template-columns: 1fr; } }

.co-bank { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.co-bank-note { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }