/* White client dashboards: same look as white.mt */
:root {
  --navy: #0b1f3a; --navy-2: #12294a; --gold: #c9a227; --gold-dark: #b08d1f;
  --bg: #f8fafc; --surface: #ffffff; --ink: #0f172a; --ink-2: #334155; --muted: #64748b;
  --line: #e2e8f0; --line-2: #cbd5e1; --on-navy: #cbd5e1;
  --bar: #2b6cb0;
  --ok: #166534; --ok-bg: #dcfce7; --warn: #92400e; --warn-bg: #fef3c7; --bad: #991b1b; --bad-bg: #fee2e2;
  --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
a { color: inherit; }
.wrap { margin: 0 auto; padding: 0 24px; width: 100%; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Header and footer */
.site-header { background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.25); }
.site-header .wrap { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font-family: "Josefin Sans", var(--sans); font-weight: 300; font-size: 30px; letter-spacing: .75px; color: #fff; text-decoration: none; line-height: 1; }
.site-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; color: var(--on-navy); }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav a:hover, .link-button:hover { color: #fff; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--on-navy); cursor: pointer; }
.site-footer { background: var(--navy); color: var(--on-navy); margin-top: 48px; padding: 20px 0; font-size: 13px; }

/* Page band */
.hero { background: var(--navy) radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 22px 22px; color: #fff; padding: 32px 0 28px; }
.hero h1 { font-size: 32px; letter-spacing: -.5px; line-height: 1.2; }
.hero .rule { width: 50px; height: 1px; background: var(--gold); margin: 14px 0; }
.hero p { margin: 0; color: var(--on-navy); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* Controls */
.btn { display: inline-block; background: var(--gold); color: var(--navy); border: 1px solid var(--gold); border-radius: 6px; padding: 9px 18px; font: 600 14px var(--sans); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn.secondary { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); font-weight: 500; }
.btn.secondary:hover { background: #f1f5f9; }
.btn.danger { background: var(--surface); border-color: #fca5a5; color: var(--bad); font-weight: 500; }
.btn.small-btn { padding: 5px 10px; font-size: 13px; }
.btn.full { width: 100%; text-align: center; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select {
  font: 14px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 10px; max-width: 100%;
}
input:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
label { font-size: 13px; font-weight: 500; color: var(--ink-2); display: block; margin-bottom: 4px; }
.field { margin-bottom: 14px; }
.field input { width: 100%; }
.segmented { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: var(--surface); }
.segmented a { padding: 7px 13px; font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink-2); border-left: 1px solid var(--line-2); }
.segmented a:first-child { border-left: 0; }
.segmented a.on { background: var(--navy); color: #fff; }
.hero .segmented { border-color: rgba(255,255,255,.3); background: transparent; }
.hero .segmented a { color: var(--on-navy); border-color: rgba(255,255,255,.3); }
.hero .segmented a.on { background: var(--gold); color: var(--navy); }

/* Cards and layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-top: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Status */
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.none { background: #f1f5f9; color: var(--ink-2); }
.flash { border-radius: 6px; padding: 10px 14px; margin-top: 16px; font-size: 14px; }
.flash.error { background: var(--bad-bg); color: var(--bad); }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.notice { background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 10px 14px; font-size: 14px; margin-top: 16px; }
.link-box { background: #fffbeb; border: 1px solid var(--gold); border-radius: 8px; padding: 14px 16px; margin-top: 16px; }
.link-box code { display: block; word-break: break-all; font-size: 13px; margin: 8px 0; }

/* Chart */

/* Tables */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line-2); padding: 8px 10px; white-space: nowrap; }
th.num { text-align: right; }
td { border-bottom: 1px solid var(--line); padding: 9px 10px; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 600; border-top: 1px solid var(--line-2); border-bottom: 0; }
.caret { display: inline-block; width: 14px; color: var(--muted); transition: transform .12s; font-size: 11px; }
tr.open > td .caret { transform: rotate(90deg); }
.share { width: 150px; }
.share-track { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; margin-top: 7px; }
.share-fill { height: 100%; width: 0; background: var(--bar); border-radius: 0 4px 4px 0; }
.sticky-first th:first-child, .sticky-first td:first-child { position: sticky; left: 0; background: var(--surface); }
.code { color: var(--muted); font-size: 12.5px; margin-right: 6px; }
.tag { font-size: 11.5px; color: var(--warn); background: var(--warn-bg); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }

/* Admin */
.check-row { display: grid; grid-template-columns: 26px minmax(200px, 1.3fr) minmax(280px, 2fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.check-row:first-of-type { border-top: 0; }
.tick-box { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; border: 1px solid var(--line-2); color: transparent; }
.tick-box.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.inline-form { display: inline; }
.upload-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.upload-form input[type=file] { font-size: 13px; max-width: 230px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.auth-card { max-width: 400px; margin: 48px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 28px; }
.auth-card h1 { font-size: 24px; margin-bottom: 6px; }
.or { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0; }

@media (max-width: 820px) {
  .wrap { padding: 0 16px; }
  .share { display: none; }
  .check-row { grid-template-columns: 26px 1fr; }
  .check-row > :last-child { grid-column: 2; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 26px; }
}
.card .link-button { color: var(--muted); text-decoration: underline; }
.card .link-button:hover { color: var(--ink); }
.field select { width: auto; }
.field input[type=checkbox] { width: auto; }

/* Expense table levels: group > account > counterparty */
.row-hidden { display: none; }
tr.collapsible { cursor: pointer; }
tr.lvl-1 td:first-child { padding-left: 28px; }
tr.lvl-2 td:first-child { padding-left: 50px; }
.group-name { font-family: var(--serif); font-weight: 600; font-size: 16px; min-width: 260px; }

/* Account groups board */
.hero-compact { padding: 16px 0; }
.hero-compact h1 { font-size: 24px; }
.hero-compact p { font-size: 13px; margin-top: 2px; }
.board-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.board-tools p { margin: 0; }
.board-tools input[type=text] { padding: 5px 9px; font-size: 13px; }
.legend-skip { color: var(--bad); font-weight: 600; }
.board { column-width: 340px; column-gap: 12px; }
.gcard { break-inside: avoid; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--g, var(--line-2)); border-radius: 6px; margin: 0 0 12px; overflow: hidden; transition: box-shadow .1s; }
.gcard.drop-target { box-shadow: 0 0 0 2px var(--g, var(--navy)); }
.ghead { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--g-bg, #f1f5f9); }
.gtitle { font-size: 13px; flex: 1; font-family: var(--sans); }
.rename-form { flex: 1; min-width: 0; }
.gname { width: 100%; border: 1px solid transparent !important; background: transparent !important; font: 600 13px var(--sans) !important; color: var(--g-ink, var(--ink)) !important; padding: 2px 4px !important; text-overflow: ellipsis; }
.gname:hover, .gname:focus { border-color: var(--line-2) !important; background: #fff !important; }
.gsum { font-size: 12px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.icon-btn { background: none; border: 0; padding: 1px 3px; font-size: 11.5px; color: var(--muted); cursor: pointer; white-space: nowrap; border-radius: 3px; }
.icon-btn:hover { color: var(--ink); background: rgba(0,0,0,.06); }
.acc-list { list-style: none; margin: 0; padding: 0; min-height: 6px; }
.gempty { display: none; margin: 0; padding: 8px; }
.gcard.is-empty .gempty { display: block; }
.acc { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-top: 1px solid var(--line); font-size: 12.5px; cursor: grab; background: #fff; }
.acc:hover { background: var(--g-bg, #f8fafc); }
.acc.dragging { opacity: .4; }
.grip { color: var(--line-2); font-size: 12px; line-height: 1; }
.acc:hover .grip { color: var(--g, var(--muted)); }
.acc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc .code { font-size: 11px; margin-right: 4px; }
.acc-amount { color: var(--ink-2); font-size: 12px; }
.skip-btn { background: none; border: 0; padding: 0 2px; font-size: 13px; line-height: 1; color: var(--line-2); cursor: pointer; }
.skip-btn:hover { color: var(--muted); }
.acc.no-cp .skip-btn { color: var(--bad); font-weight: 700; }
.acc.no-cp .acc-name { color: var(--ink-2); font-style: italic; }
.move-form { width: 16px; overflow: hidden; }
.move-form select { width: 16px; padding: 0; border: 0; background: none; font-size: 11px; color: var(--muted); cursor: pointer; opacity: 0; }
.acc:hover .move-form select, .move-form select:focus { opacity: 1; }
.tag-new { display: inline-block; font-size: 10.5px; font-style: normal; font-weight: 600; color: #fff; background: var(--gold-dark); border-radius: 3px; padding: 0 4px; line-height: 1.4; }
.c-none { --g: #64748b; --g-bg: #f1f5f9; --g-ink: #334155; }
.c0 { --g: #2563eb; --g-bg: #eff6ff; --g-ink: #1e3a8a; }
.c1 { --g: #c9a227; --g-bg: #fdf8e7; --g-ink: #78590b; }
.c2 { --g: #0d9488; --g-bg: #ecfdf8; --g-ink: #115e59; }
.c3 { --g: #db2777; --g-bg: #fdf2f8; --g-ink: #9d174d; }
.c4 { --g: #7c3aed; --g-bg: #f5f3ff; --g-ink: #5b21b6; }
.c5 { --g: #16a34a; --g-bg: #f0fdf4; --g-ink: #166534; }
.c6 { --g: #ea580c; --g-bg: #fff7ed; --g-ink: #9a3412; }
.c7 { --g: #0891b2; --g-bg: #ecfeff; --g-ink: #155e75; }
@media (hover: none), (max-width: 820px) {
  .move-form { width: 96px; }
  .move-form select { width: 96px; opacity: 1; border: 1px solid var(--line-2); border-radius: 4px; padding: 2px; }
  .acc { flex-wrap: wrap; padding: 6px 8px; }
  .acc-name { flex-basis: 60%; }
}

/* Client admin page */
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.admin-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.panel h2 { font-size: 15px; }
.panel-note { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.panel-foot { padding-top: 8px; border-top: 1px solid var(--line); }
.panel input[type=text], .panel input[type=email], .panel input[type=date], .panel select { padding: 4px 8px; font-size: 13px; }
.panel input[type=file] { font-size: 12.5px; max-width: 200px; }
.panel summary { cursor: pointer; font: 600 14px var(--serif); }
.panel details[open] summary, details.panel[open] summary { margin-bottom: 6px; }
.doc-row { display: grid; grid-template-columns: 20px minmax(170px, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.doc-title { min-width: 0; }
.doc-title strong { font-weight: 500; display: block; }
.doc-meta { display: block; font-size: 11.5px; color: var(--muted); }
.doc-meta .link-button { font-size: 11.5px; }
.doc-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.doc-actions input[type=text] { width: 90px; }
.upload-form { gap: 5px; }
.small-tick { width: 18px; height: 18px; font-size: 11px; }
.check-label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; }
.recon-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.settings-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.settings-form label:not(.check-label) { font-size: 12px; margin-bottom: 2px; }
.settings-form .check-label { padding-bottom: 5px; }
table.tight { font-size: 12.5px; }
table.tight th { padding: 4px 6px; font-size: 12px; }
table.tight td { padding: 4px 6px; vertical-align: middle; }
.hero .btn.secondary { padding: 5px 10px; }
.panel .flash { margin-top: 8px; padding: 6px 10px; font-size: 13px; }
@media (max-width: 1100px) { .admin-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .doc-row { grid-template-columns: 20px 1fr; } .doc-actions { grid-column: 2; justify-content: flex-start; } }
.panel .link-button { color: var(--muted); text-decoration: underline; }
.panel .link-button:hover { color: var(--ink); }
table.searching tr.row-hidden:not([hidden]) { display: table-row; }

/* Compact expense table */
#expense-table { font-size: 13.5px; line-height: 1.4; }
#expense-table th { font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }
#expense-table td { padding-top: 5px; padding-bottom: 5px; }
#expense-table .code { font-size: 12px; }
#expense-table .share-track { height: 7px; margin-top: 6px; }

/* Merging counterparties */
.tag-merged { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
tr[data-party] { cursor: grab; }
.party-grip { color: transparent; font-size: 12px; margin-right: 4px; }
tr[data-party]:hover .party-grip { color: var(--muted); }
tr.merge-dragging td { opacity: .4; }
#expense-table.merge-active tr[data-party]:not(.merge-dragging) .party-grip { color: var(--line-2); }
tr.merge-target td { background: #fdf8e7 !important; box-shadow: inset 0 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
.merge-dialog { border: 0; border-radius: 8px; padding: 22px 24px; width: min(460px, calc(100% - 32px)); box-shadow: 0 12px 40px rgba(11,31,58,.35); color: var(--ink); }
.merge-dialog::backdrop { background: rgba(11,31,58,.45); }
.merge-dialog h2 { font-size: 19px; margin-bottom: 8px; }
.merge-names { margin: 0 0 14px; }
.merge-dialog .small { margin: 0 0 16px; }
.merge-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Profit and loss sections */
#expense-table tfoot td { background: #fdf8e7; border-top: 2px solid var(--gold); }
.hero .tools .btn.secondary { background: transparent; border-color: rgba(255,255,255,.3); color: var(--on-navy); }
.hero .tools .btn.secondary:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Pinned, compact header */
.site-header { position: sticky; top: 0; z-index: 30; }
.site-header .wrap { height: 44px; }
.site-header .wordmark { font-size: 24px; }
.hero-pinned { position: sticky; top: 44px; z-index: 29; padding: 7px 0; background-image: none; border-bottom: 1px solid rgba(255,255,255,.15); }
.hero-pinned .hero-row { align-items: center; }
.hero-pinned h1 { font-size: 20px; letter-spacing: -.2px; line-height: 1.2; }
.hero-pinned .segmented a { padding: 4px 10px; font-size: 12.5px; }
.hero-pinned .btn.small-btn { padding: 4px 10px; font-size: 12.5px; }

/* P&L rows: one colour rhythm, with weight showing the level */
#expense-table tbody td { background: #fff; }
#expense-table tbody tr.alt td { background: #f4f6fa; }
#expense-table tbody tr.collapsible:hover td, #expense-table tbody tr[data-party]:hover td { background: #e9eef6; }
#expense-table tbody tr.merge-target td { background: #fdf8e7; }
tr.kind-group td, tr.lvl-0.kind-account.collapsible td { font-weight: 500; }
#expense-table tbody tr.section-row td { font: 600 12.5px var(--sans); letter-spacing: .02em; background: #dfe6f0; color: var(--navy); padding-top: 5px; padding-bottom: 5px; }
#expense-table tbody tr.subtotal-row td { font-weight: 600; border-top: 1px solid var(--line-2); background: #fff; }
#expense-table tbody tr.profit-row td { font-weight: 600; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); background: #f1f5fb; }
#expense-table tfoot td { background: #fdf8e7; }

/* Arrange page sections */
.board-help { margin: 10px 0; }
.legend-grip { color: var(--muted); }
.zone { margin-top: 12px; padding: 10px 12px 2px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; transition: box-shadow .1s; }
.zone-target { box-shadow: 0 0 0 2px var(--gold); }
.zone-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.zone-head h2 { font-size: 15px; }
.zone-head input[type=text] { padding: 4px 8px; font-size: 13px; }
.zname { font: 600 15px var(--serif) !important; border: 1px solid transparent !important; background: transparent !important; min-width: 260px; }
.zname:hover, .zname:focus { border-color: var(--line-2) !important; background: #fff !important; }
.zone-empty { display: none; margin: 0 0 10px; padding: 10px; border: 1px dashed var(--line-2); border-radius: 6px; text-align: center; }
.zone.is-empty .zone-empty { display: block; }
.zone-divider { margin: 14px 0 0; text-align: center; font-weight: 600; font-size: 13px; color: var(--navy); }
.add-category { margin-top: 12px; }
.add-category input[type=text] { min-width: 280px; padding: 5px 9px; font-size: 13px; }
.ggrip { color: var(--g, var(--muted)); cursor: grab; font-size: 13px; line-height: 1; }
.gcard.dragging { opacity: .4; }
.category-form { width: 16px; overflow: hidden; }
.category-form select { width: 16px; padding: 0; border: 0; background: none; font-size: 11px; cursor: pointer; opacity: .6; }
.boards.is-dragging .gcard { background: var(--g-bg, #f8fafc); }

/* Currency under the column heading */
.col-ccy { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
/* While searching, the fixed subtotals and shares don't apply */
table.searching tr.subtotal-row, table.searching tr.profit-row { display: none; }
table.searching.bs tfoot { display: none; }  /* the balance sheet's total line isn't meaningful while filtering */
table.searching td.pct, table.searching td.share > * { visibility: hidden; }

/* Centred, narrower page */
.wrap { max-width: 1280px; }
section.card[aria-labelledby="table-title"] { padding: 12px 14px; margin-top: 12px; }
section.card[aria-labelledby="table-title"] .card-head { margin-bottom: 8px; }
#expense-table th, #expense-table td { padding-left: 6px; padding-right: 6px; }
#expense-table tr.lvl-1 td:first-child { padding-left: 24px; }
#expense-table tr.lvl-2 td:first-child { padding-left: 42px; }
main > .wrap > .notice { margin-top: 10px; padding: 6px 12px; font-size: 13px; }
#expense-table tbody tr[data-name] td:first-child { white-space: nowrap; max-width: 235px; overflow: hidden; text-overflow: ellipsis; }

/* Readable P&L: levels by indent and weight, colour only where it means something */
#expense-table { font-size: 13.5px; color: var(--ink); }
#expense-table thead th { color: var(--navy); font-weight: 600; border-bottom: 2px solid var(--navy); padding-bottom: 5px; vertical-align: bottom; }
#expense-table td { border-bottom-color: #edf0f5; }
#expense-table .col-ccy { color: var(--muted); font-weight: 400; }

/* Section headings */
#expense-table tbody tr.section-row td { font: 700 12px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--navy); background: #eef2f8; border-top: 10px solid #fff; border-bottom: 1px solid #c9d4e5; padding: 5px 8px; }
#expense-table tbody tr.section-row:first-child td { border-top: 0; }

/* Indents: top-level lines line up whether or not they have an arrow */
#expense-table tbody tr[data-level="0"][data-name] td:first-child { padding-left: 32px; }
#expense-table tbody tr[data-level="0"].collapsible td:first-child { padding-left: 18px; }
#expense-table tbody tr[data-level="1"][data-name] td:first-child { padding-left: 50px; color: var(--ink-2); font-size: 13px; }
#expense-table tbody tr[data-level="1"][data-name] td.num { color: var(--ink-2); font-size: 13px; }
#expense-table .caret { width: 14px; color: var(--muted); }
#expense-table tr.collapsible:hover .caret { color: var(--navy); }
#expense-table tbody tr.subtotal-row td:first-child, #expense-table tbody tr.profit-row td:first-child, #expense-table tfoot td:first-child { padding-left: 8px; }

/* Rows */
#expense-table tbody tr.alt td { background: #f8fafc; }
#expense-table tbody tr.collapsible:hover td, #expense-table tbody tr[data-party]:hover td { background: #eaf0f8; }
#expense-table tr.collapsible.open td { font-weight: 600; color: var(--navy); }
tr.kind-group td, tr.lvl-0.kind-account.collapsible td { font-weight: 400; }

/* Figures: negatives stand out, dashes step back, the Total column is set apart */
#expense-table td.neg { color: #b42318; }
#expense-table td.zero { color: #b6bfcc; }
#expense-table.sticky-first td:last-child, #expense-table.sticky-first th:last-child { border-left: 1px solid #d8dfea; font-weight: 600; }
#expense-table.sticky-first tbody tr[data-level="1"][data-name] td:last-child { font-weight: 400; }

/* Subtotals and results */
#expense-table tbody tr.subtotal-row td { font-weight: 600; background: #fff; border-top: 1px solid #8a99b0; border-bottom: 0; color: var(--ink); padding-top: 6px; padding-bottom: 6px; }
#expense-table tbody tr.subtotal-row td.neg { color: #b42318; }
#expense-table tbody tr.profit-row td { font-size: 15px; font-weight: 700; color: var(--navy); background: #e6edf7; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); padding-top: 8px; padding-bottom: 8px; }
#expense-table tbody tr.profit-row td.neg { color: #b42318; }
#expense-table tfoot td { font-size: 15.5px; font-weight: 700; color: var(--navy); background: #fdf6dd; border-top: 2px solid var(--gold); border-bottom: 3px double var(--gold); padding-top: 9px; padding-bottom: 9px; }
#expense-table tfoot td.neg { color: #b42318; }
#expense-table tbody tr[data-level="1"][data-name] td.num.neg { color: #b42318; }
#expense-table tbody tr[data-level="1"][data-name] td.num.zero { color: #b6bfcc; }
#expense-table tbody tr[data-name] td:first-child { max-width: 225px; }

/* Dashboard: side panel beside the table */
body:has(.pl-layout) .wrap { max-width: 1520px; }
.pl-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.pl-side { position: sticky; top: 100px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.side-block { display: flex; flex-direction: column; gap: 5px; }
.side-label { font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 0; }
.side-seg { display: flex; }
.side-seg a { flex: 1; text-align: center; padding: 5px 4px; font-size: 12.5px; }
.pl-side input[type=search] { width: 100%; padding: 5px 8px; font-size: 13px; }
.pl-side .btn.full { width: 100%; text-align: center; }
.side-admin { border-top: 1px solid var(--line); padding-top: 10px; }
.side-admin p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.side-admin a:not(.btn) { font-size: 12px; color: var(--ink-2); }
.pl-main > .card { margin-top: 0; }

/* Dashboard: the table scrolls under its pinned month headings */
.pl-scroll { max-height: calc(100vh - 168px); overflow: auto; }
#expense-table { border-collapse: separate; border-spacing: 0; }
#expense-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); }
#expense-table.sticky-first thead th:first-child { left: 0; z-index: 4; }
#expense-table.sticky-first tbody td:first-child, #expense-table.sticky-first tfoot td:first-child { z-index: 1; }

@media (max-width: 900px) {
  .pl-layout { grid-template-columns: minmax(0, 1fr); }
  .pl-side { position: static; }
  .pl-scroll { max-height: none; }
  #expense-table thead th { position: static; }
}
.side-seg a { flex: 1 1 auto; white-space: nowrap; padding: 5px 3px; font-size: 12px; }

/* Side panel on the right, in lighter colours */
.pl-layout { grid-template-columns: minmax(0, 1fr) 196px; }
.pl-side { order: 2; background: #fbfcfe; border-color: #e8edf4; }
.side-label { color: #7b8798; font-weight: 500; }
.pl-side .segmented { border-color: #dfe6f0; background: #fff; }
.pl-side .segmented a { color: #52607a; border-color: #dfe6f0; }
.pl-side .segmented a.on { background: #e6edf7; color: var(--navy); font-weight: 600; }
.pl-side input[type=search] { border-color: #dfe6f0; }
.pl-side .btn.secondary { background: #fff; border-color: #dfe6f0; color: #52607a; }
.pl-side .btn.secondary:hover { background: #f1f5fb; }
.side-admin { border-top-color: #e8edf4; }
@media (max-width: 900px) {
  .pl-layout { grid-template-columns: minmax(0, 1fr); }
  .pl-side { order: 0; }
}

/* Arrange page: the switch for showing accounts */
.zone-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-switch { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 2px 10px; font: 12px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.section-switch:hover { border-color: var(--navy); color: var(--navy); }
.section-switch.on { background: #e6edf7; border-color: #c9d4e5; color: var(--navy); font-weight: 600; }

/* Dashboard on a desktop: the page itself doesn't scroll, only the table, so the months stay in view */
@media (min-width: 901px) and (min-height: 520px) {
  body:has(.pl-layout) { height: 100vh; min-height: 0; overflow: hidden; }
  body:has(.pl-layout) main { min-height: 0; display: flex; flex-direction: column; }
  body:has(.pl-layout) main > .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body:has(.pl-layout) .site-footer { margin-top: 0; padding: 3px 0; font-size: 11.5px; }
  .pl-layout { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; margin: 10px 0; }
  .pl-side { position: static; align-self: start; max-height: 100%; overflow-y: auto; }
  .pl-main { min-height: 0; display: flex; flex-direction: column; }
  .pl-main > .card { min-height: 0; display: flex; flex-direction: column; padding: 12px 16px; }
  .pl-main > .card .card-head { flex: none; margin-bottom: 6px; }
  .pl-main > .card > .pl-foot { flex: none; }
  .pl-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
}

/* Admin: tracking filter */
.track-category { margin-bottom: 14px; }
.track-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.track-head h3 { font: 600 13.5px var(--sans); color: var(--navy); margin: 0; }
.track-table { width: 100%; }
.track-table tr.track-out td:not(:last-child) { color: var(--muted); text-decoration: line-through; }
.include-switch { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.include-switch button { background: #fff; border: 0; padding: 3px 9px; font: 12px var(--sans); color: var(--muted); cursor: pointer; }
.include-switch button + button { border-left: 1px solid var(--line-2); }
.include-switch button:hover { color: var(--navy); background: #f1f5fb; }
.include-switch button.on-in { background: #e3f4e8; color: #17663a; font-weight: 600; }
.include-switch button.on-out { background: #fdeaea; color: #b42318; font-weight: 600; }
.include-switch button.on-memo { background: #fdf6dd; color: #8a6d1a; font-weight: 600; }

/* Admin: chart of accounts */
.chart-tools { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.chart-section { margin-bottom: 14px; }
.chart-table { width: 100%; }
.chart-table tr.chart-moved td { background: #fdf6dd; }
.chart-table tr:target td { box-shadow: inset 0 -2px 0 var(--gold); }

/* Arrange page: dragging a section */
.zgrip { color: var(--muted); cursor: grab; font-size: 14px; line-height: 1; }
.zone.dragging { opacity: .5; }
.cat-slot { display: none; margin: 12px 0 0; padding: 8px; border: 1px dashed var(--line-2); border-radius: 6px; text-align: center; font-size: 12.5px; color: var(--muted); }
.boards.is-dragging-zone .cat-slot, .boards.is-dragging-group .cat-list[data-place="above"] .cat-slot { display: block; }
.zone-before { box-shadow: 0 -3px 0 var(--gold); }
.cat-list.list-end { box-shadow: 0 3px 0 var(--gold); }
.cat-list[data-place="within"] .zone { margin-left: 24px; border-left: 3px solid var(--navy); }

/* P&L: a section within operating expenses */
#expense-table tbody tr.section-row.sub-section td { font: 600 12.5px var(--sans); letter-spacing: 0; text-transform: none; background: #f5f7fb; border-top: 4px solid #fff; border-bottom: 1px solid #e3e8f0; padding-left: 18px; }
#expense-table tbody tr.subtotal-row.sub-subtotal td { font-weight: 500; border-top: 1px solid #d8dfea; padding-top: 4px; padding-bottom: 4px; }
#expense-table tbody tr.subtotal-row.sub-subtotal td:first-child { padding-left: 18px; }

/* P&L footer: the note on the left, the download on the right */
.pl-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 8px; position: sticky; left: 0; }
.pl-foot p { margin: 0; }
.pl-foot .btn { flex: none; }

/* Side panel: only admins see this block, so it looks different from the client's controls */
.pl-side .side-admin { margin: 2px -4px -4px; padding: 9px; background: #fdf8e8; border: 1px solid #f0e2b0; border-radius: 6px; gap: 6px; }
.pl-side .side-admin .side-label { color: #8a6d1a; font-weight: 600; }
.pl-side .side-admin p { color: #7a6a3a; }
.pl-side .side-admin .btn.secondary { border-color: #e6d699; color: #6b5512; }
.pl-side .side-admin .btn.secondary:hover { background: #fbf1cf; }

/* P&L: the table still scrolls up and down, without a scrollbar beside it. A narrow window keeps the sideways one. */
.pl-scroll::-webkit-scrollbar { width: 0; height: 8px; }
.pl-scroll::-webkit-scrollbar-thumb { background: #c9d4e5; border-radius: 4px; }

/* Arrange page: a section's own Add group, beside Delete category */
.zone-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Costs are in brackets as a matter of course, so they aren't red: red stays for a loss or negative revenue */
#expense-table tbody tr[data-side="expense"][data-level="0"] td.num.neg { color: var(--ink); }
#expense-table tbody tr[data-side="expense"][data-level="1"][data-name] td.num.neg { color: var(--ink-2); }
#expense-table tbody tr.subtotal-row.cost-total td.num.neg { color: var(--ink); }

/* P&L: a third level, group > account > counterparty */
#expense-table tbody tr[data-level="2"][data-name] td:first-child { padding-left: 68px; color: var(--ink-2); font-size: 12.5px; }
#expense-table tbody tr[data-level="2"][data-name] td.num { color: var(--ink-2); font-size: 12.5px; }
#expense-table tbody tr[data-side="expense"][data-level="2"][data-name] td.num.neg { color: var(--ink-2); }

/* Balance sheet: brackets are normal here (accumulated amortisation, losses in equity), so they aren't red */
#expense-table.bs tbody td.num.neg, #expense-table.bs tfoot td.num.neg { color: var(--ink); }
#expense-table.bs tbody tr[data-level="1"][data-name] td.num.neg { color: var(--ink-2); }
.pl-side .side-seg a { white-space: nowrap; padding: 6px 8px; font-size: 12.5px; }
.pl-side .side-seg .seg-off { flex: 1 1 auto; text-align: center; white-space: nowrap; padding: 6px 8px; font-size: 12.5px; font-weight: 500; color: #b6bfcc; background: #f5f7fb; border-left: 1px solid #dfe6f0; cursor: not-allowed; }
/* Longer labels sit one above the other, so each has the panel's full width */
.pl-side .side-stack { flex-direction: column; }
.pl-side .side-stack a { border-left: 0; border-top: 1px solid #dfe6f0; }
.pl-side .side-stack a:first-child { border-top: 0; }

/* A memorandum item: below the bottom line and outside it, so it doesn't read as a total */
#expense-table tfoot tr.memo-row td, #expense-table tfoot tr.memo-row td.neg { font-size: 13px; font-weight: 500; font-style: italic; color: var(--ink-2); background: #fff; border-top: 0; border-bottom: 1px solid var(--line); padding-top: 20px; padding-bottom: 12px; }

/* Xero login pages */
.connect-card { max-width: 620px; margin: 24px auto; }
.connect-card .tools { margin: 12px 0; }

/* Balance sheet: one column, so the figure stays close to its name */
#expense-table.bs { max-width: 560px; margin-left: auto; margin-right: auto; }
.pl-foot.bs-foot { max-width: 560px; margin-left: auto; margin-right: auto; }
.card:has(#expense-table.bs) .card-head { justify-content: center; text-align: center; }

/* Balance sheet groups: an account moved out of Xero's section */
.tag-moved { font-size: 10.5px; padding: 0 5px; border-radius: 3px; background: #fdf6dd; color: #8a6d1a; white-space: nowrap; }

/* Terms of use and privacy notice, accepted once by each client user */
.agreements-card { max-width: 760px; }
.agreement-text { max-height: 55vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 18px 14px; margin: 14px 0 16px; background: #fbfcfe; font-size: 14px; line-height: 1.55; }
.agreement-text h2 { font-size: 19px; margin: 18px 0 2px; }
.agreement-text h3 { font-size: 14.5px; margin: 14px 0 4px; }
.agreement-text p, .agreement-text ul { margin: 0 0 8px; }
.agreement-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* The director who signs the client's documents */
.director-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.director-form .director-label { font-size: 13px; font-weight: 600; color: var(--navy); margin-right: 4px; }
.director-form input { width: 190px; }
.sign-notice { margin: -2px 0 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; background: #eef4fb; border: 1px solid #d6e3f3; color: var(--ink-2); }
.sign-notice.done { background: #e3f4e8; border-color: #bfe3cb; color: #17663a; }
.sign-notice.late { background: #fdf6dd; border-color: #f0e2b0; color: #7a5b0e; }
.sign-card .agreement-text { max-height: 46vh; }
.sign-form .field input[type=text] { max-width: 320px; }
.signed-box { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid #bfe3cb; background: #f1faf4; border-radius: 6px; font-size: 13px; }
.signed-box > strong { display: block; color: #17663a; margin-bottom: 6px; }
.signed-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #d7eedf; }
.signed-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Journal narrations: each opens to its lines, with a link to Xero */
.narration-item { position: relative; border-top: 1px solid var(--line); padding: 7px 0; }
.narration-item:first-child { border-top: 0; }
.narration-lines > summary { cursor: pointer; display: flex; align-items: center; gap: 12px; padding-right: 140px; min-height: 28px; font-size: 13px; }
.narration-lines > summary .narration-name { flex: 1; color: var(--navy); }
.narration-lines > summary:hover .narration-name { text-decoration: underline; }
.narration-lines > summary .narration-count { color: var(--ink-2); white-space: nowrap; }
.narration-lines[open] > summary .narration-name { font-weight: 600; }
.narration-item, .narration-lines { min-width: 0; }
.narration-lines table { width: 100%; font-size: 12.5px; background: #fbfcfe; margin-top: 6px; table-layout: auto; }
.narration-lines td, .narration-lines th { white-space: nowrap; }
.narration-lines td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; word-break: break-word; min-width: 0; width: 100%; }
.narration-tag { position: absolute; right: 0; top: 7px; }
.tag-all { margin: 12px 0 4px; }
.tagged-exceptions { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.tagged-exceptions > summary { cursor: pointer; margin-bottom: 6px; }

/* Admin links in the client's name bar, on the P&L and balance sheet */
.hero-admin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-admin .hero-note { font-size: 12.5px; color: var(--on-navy); opacity: .85; margin-right: 4px; }

/* Balance sheet groups: the switch that opens an account to its counterparties */
.cp-btn { background: none; border: 0; padding: 0 2px; font-size: 12px; line-height: 1; color: var(--line-2); cursor: pointer; }
.cp-btn:hover { color: var(--muted); }
.acc.with-cp .cp-btn { color: var(--navy); font-weight: 700; }
.legend-cp { color: var(--navy); font-weight: 700; }

/* The client's logo: on its dashboard, and on the admin page */
.client-title { display: flex; align-items: center; gap: 12px; }
.client-logo { height: 30px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.client-logo.on-white { height: 34px; background: #fff; border-radius: 6px; padding: 4px 8px; }
.logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.logo-row .upload-form { display: flex; align-items: center; gap: 8px; }
.logo-preview { height: 40px; max-width: 160px; object-fit: contain; border-radius: 6px; padding: 5px 8px; background: var(--navy); }
.logo-preview.on-white { background: #fff; border: 1px solid var(--line); }
.sync-from { display: inline-flex; align-items: center; gap: 6px; }
.sync-from input { padding: 4px 6px; font-size: 13px; }
.gcp-btn { color: var(--line-2); }
.gcp-btn.on { color: var(--navy); font-weight: 700; }
.recon-differences { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.recon-differences > summary { cursor: pointer; font-weight: 600; font-size: 13px; margin-bottom: 6px; }

/* A short tip under a button, narrower than the browser's own */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; pointer-events: none;
  width: max-content; max-width: 190px; white-space: normal; text-align: left;
  background: var(--navy); color: #fff; font: 400 12px/1.35 var(--sans); padding: 6px 8px; border-radius: 6px; box-shadow: 0 4px 12px rgba(11,31,58,.18);
}

/* The bar at the top of a client's admin page while a sync runs, and when it has just finished */
.sync-bar { position: relative; margin: 12px 0 0; padding: 9px 40px 9px 14px; border-radius: 8px; font-size: 13.5px; overflow: hidden; }
.sync-bar.running { background: #eef4fb; border: 1px solid #d6e3f3; color: var(--navy); padding-bottom: 13px; }
.sync-bar.done { background: #e3f4e8; border: 1px solid #bfe3cb; color: #17663a; }
.sync-bar.failed { background: #fdeaea; border: 1px solid #f3c6c6; color: #b42318; }
.sync-bar-close { position: absolute; right: 10px; top: 7px; background: none; border: 0; font-size: 13px; color: inherit; cursor: pointer; opacity: .7; }
.sync-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--navy), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: sync-slide 1.4s linear infinite; }
@keyframes sync-slide { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .sync-progress { animation: none; background: var(--navy); opacity: .3; } }

/* Month-end workings */
.month-pick { display: flex; align-items: center; gap: 6px; color: var(--on-navy); }
.month-pick select { padding: 4px 6px; font-size: 13px; }
.workings { margin-top: 14px; }
.account-choice { margin: 6px 0 14px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.account-choice > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; margin: 10px 0 12px; }
.account-grid .code { color: var(--muted); font-size: 11px; }
.workings-account { font-size: 15px; margin: 18px 0 6px; color: var(--navy); }
.workings-table td { vertical-align: top; }
.checked-suppliers { margin-top: 18px; }
.checked-suppliers > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.month-pick label { color: var(--on-navy); margin: 0; }
.account-groups { columns: 4 240px; column-gap: 18px; margin: 10px 0 12px; }
.account-group { break-inside: avoid; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 8px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 3px; }
.account-group legend { padding: 0 4px; font-weight: 600; color: var(--navy); }
.account-group .code { color: var(--muted); font-size: 11px; }
.small-pill { font-size: 10.5px; padding: 1px 6px; margin-top: 3px; display: inline-block; white-space: nowrap; }

/* Month-end: the page uses the full width, and the accrual and comment can be edited in place */
body:has(.workings) .wrap { max-width: none; }
.workings-table .bill-description { min-width: 180px; max-width: 300px; overflow-wrap: anywhere; color: var(--ink-2); }
.accrual-input { width: 100px; text-align: right; padding: 3px 6px; font-size: 13px; }
.accrual-input.edited { border-color: var(--gold); background: #fdf8e7; font-weight: 600; }
.comment-input { width: 100%; min-width: 200px; padding: 3px 6px; font: 13px/1.4 var(--sans); resize: none; overflow: hidden; field-sizing: content; }
.review-form { display: flex; flex-direction: column; gap: 2px; }
.saved-note { font-size: 11px; color: #17663a; min-height: 13px; }
.covered-input { padding: 3px 6px; font-size: 13px; }
.accrual-input.invalid { border-color: var(--bad); background: #fdeaea; }
.workings-table th.center, .workings-table td.center, .checked-table th.center, .checked-table td.center { text-align: center; }
.skip-form { display: inline; }
.checked-table td { vertical-align: top; }
.checked-review { display: inline; }
.hero .tools form { margin: 0; }
.je-row { display: flex; justify-content: center; margin: 14px 0 4px; }
.kind-input { padding: 3px 4px; font-size: 12.5px; }
.workings-table th { vertical-align: bottom; line-height: 1.25; }

/* Balance sheet: a figure downloads the ledger lines behind it */
#expense-table a.drill { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-2); }
#expense-table a.drill:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* Every line lights up under the mouse, whether or not it opens */
#expense-table tbody tr[data-name]:hover td { background: #eaf0f8; }

/* Month-end: one tab per working */
.month-end-tabs { margin-top: 14px; }
.month-end-tabs a.on { background: var(--navy); color: #fff; }
.month-end-tabs + .panel { margin-top: 10px; }

/* Crypto revaluation */
.crypto-table { max-width: 900px; }
.crypto-table tr.coin-head { cursor: pointer; }
.crypto-table tr.coin-head td { font-weight: 600; border-top: 1px solid var(--line-2); }
.crypto-table tr.coin-head:hover td, .crypto-table tr.coin-line:hover td { background: #eaf0f8; }
.crypto-table tr.coin-head .caret { display: inline-block; width: 14px; color: var(--muted); transition: transform .15s; }
.crypto-table tr.coin-head.open .caret { transform: rotate(90deg); color: var(--navy); }
.crypto-table tr.coin-line td:first-child { padding-left: 28px; color: var(--ink-2); }

.crypto-table { max-width: none; }
.crypto-table .price-input { width: 96px; text-align: right; padding: 3px 6px; font-size: 13px; }
.crypto-table .price-input.edited { background: #fdf6dd; border-color: var(--gold); }
.crypto-table .coin-id-input { width: 220px; padding: 2px 6px; font-size: 12.5px; margin-left: 8px; }
.crypto-table tfoot td { font-weight: 700; border-top: 2px solid var(--navy); }

/* Month-end: journals generated */
.checked-table .danger-link { color: #b42318; text-decoration: underline; }
.checked-table tr.this-month td { background: #fdf6dd; }
/* A dash (nil) stays clickable but isn't underlined: a row of them is just clutter */
#expense-table td.zero a.drill { border-bottom: 0; }

/* The public demo's message, quiet, above the footer */
.demo-banner { background: #e6edf7; border-top: 3px solid var(--gold); color: var(--navy); margin-top: 18px; }
.demo-banner .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.demo-banner p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.demo-banner strong { color: var(--navy); font-weight: 700; }
.demo-banner .btn { flex: none; }
@media (max-width: 700px) { .demo-banner .wrap { flex-direction: column; align-items: flex-start; } }

/* Contact page */
.contact-hero .eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.contact-wrap { max-width: 640px; margin: 28px auto 40px; }
.contact-card { padding: 28px; }
.contact-form label { display: block; margin: 14px 0 6px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 15px; border: 1px solid var(--line-2); border-radius: 6px; }
.contact-form .cf-turnstile { margin-top: 16px; }
.contact-send { width: 100%; margin-top: 20px; padding-top: 11px; padding-bottom: 11px; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-text { white-space: pre-wrap; max-width: 520px; }

/* P&L overview: headline figures and charts above the table */
.pl-main > .pl-charts { flex: none; margin-top: 12px; padding: 12px 16px; }
.pl-overview > summary { cursor: pointer; font: 600 15px var(--serif, Georgia, serif); color: var(--navy); }
.pl-overview > summary .muted { font: 400 12.5px var(--sans); margin-left: 6px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.kpi { border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 21px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.kpi-value.neg { color: #b42318; }
.kpi-change { font-size: 12px; font-weight: 600; }
.kpi-change.up { color: #17663a; }
.kpi-change.down { color: #b42318; }
.kpi-change .muted { font-weight: 400; }
.charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.charts.two { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.chart-box { margin: 0; }
.chart-box figcaption { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.legend { font-weight: 400; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 6px; }
.legend .key.rev { background: #0b1f3a; }
.legend .key.cost { background: #b9c4d6; }
.legend .key.profit { background: #c9a227; height: 3px; border-radius: 0; }
.chart { width: 100%; height: auto; display: block; font-family: var(--sans); }
.chart .grid { stroke: #e3e8ef; stroke-width: 1; }
.chart .grid.zero { stroke: #8a99b0; }
.chart .axis { font-size: 11px; fill: #6b7a90; }
.chart .bar.rev { fill: #0b1f3a; }
.chart .bar.cost { fill: #b9c4d6; }
.chart .bar:hover, .chart .wf:hover { opacity: .8; }
.chart .profit-line { fill: none; stroke: #c9a227; stroke-width: 2.5; }
.chart .profit-dot { fill: #c9a227; stroke: #fff; stroke-width: 1.5; }
.chart .profit-dot.loss { fill: #b42318; }
.chart .wf.total { fill: #0b1f3a; }
.chart .wf.down { fill: #d9a3a0; }
.chart .wf.up { fill: #9fcfb1; }
.chart .wf-link { stroke: #8a99b0; stroke-dasharray: 2 2; }
.chart .wf-label { font-size: 12px; fill: #34445c; }
.chart .wf-value { font-size: 12px; fill: #34445c; font-variant-numeric: tabular-nums; }
.chart .strong { font-weight: 700; fill: #0b1f3a; }
.chart .wf-value.neg { fill: #b42318; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .charts.two { grid-template-columns: minmax(0, 1fr); } }

/* Two-step sign-in */
.two-factor .card { max-width: 440px; }
.two-factor .steps { padding-left: 18px; }
.two-factor .steps li { margin-bottom: 12px; }
.two-factor .qr { margin: 10px 0 6px; }
.two-factor .qr svg { display: block; }
.two-factor .secret { font-size: 13px; letter-spacing: .06em; word-break: break-all; }
.two-factor #code { font-size: 22px; letter-spacing: .3em; text-align: center; }
.two-factor .check-label { margin: 12px 0; }

/* The right-hand panel: a box of buttons, then a box of charts, both growing with the screen */
body:has(.pl-layout.with-charts) .wrap { max-width: min(1900px, 96vw); }
.pl-layout.with-charts { grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 560px); }
.pl-layout.with-charts .pl-side { background: none; border: 0; padding: 0; gap: 12px; max-height: calc(100vh - 120px); overflow-y: auto; }
.pl-layout.with-charts .side-box { background: #fbfcfe; border: 1px solid #e8edf4; border-radius: 8px; padding: 12px; }
.pl-layout.with-charts .filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 14px; align-items: start; }
.filters-col { display: flex; flex-direction: column; gap: 12px; }
.pl-layout.with-charts .search-block { margin-top: 12px; }
.pl-layout.with-charts .search-block input[type=search] { width: 100%; box-sizing: border-box; }
.pl-layout.with-charts .report-box { padding: 8px; }
.report-switch { display: flex; width: 100%; border-color: #c9d4e5 !important; }
.report-switch a { flex: 1; text-align: center; padding-top: 8px; padding-bottom: 8px; font-size: 13.5px; background: #fff; }
.report-switch a.on { background: var(--navy) !important; color: #fff !important; font-weight: 600; }
.report-switch a:not(.on):hover { background: #eef2f8; }
.box-title { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.side-charts { display: flex; flex-direction: column; gap: 34px; }
.side-charts .chart-box figcaption { font-size: 12.5px; margin-bottom: 2px; }
.side-charts .legend { font-size: 11.5px; margin-bottom: 4px; }
.side-charts .legend .key { margin-left: 0; }
.side-charts .chart .axis, .side-charts .chart .wf-label, .side-charts .chart .wf-value { font-size: 12px; }
.side-charts .chart-title { font-size: 16px; font-weight: 600; color: var(--navy); }
@media (max-width: 900px) {
  .pl-layout.with-charts { grid-template-columns: minmax(0, 1fr); }
  .pl-layout.with-charts .pl-side { max-height: none; }
}

/* Filters: one row each, the label in line with its buttons */
.pl-layout.with-charts .filters-grid { display: flex; flex-direction: column; gap: 10px; }
.pl-layout.with-charts .filters-col { gap: 10px; }
.pl-layout.with-charts .filters-box .side-block { display: grid; grid-template-columns: 64px auto; align-items: center; gap: 10px; justify-content: start; }
.pl-layout.with-charts .filters-box .side-block .side-label { margin: 0; }
.pl-layout.with-charts .filters-box .side-seg a, .pl-layout.with-charts .filters-box .side-seg .seg-off { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
.pl-layout.with-charts .filters-box .search-block { margin-top: 10px; grid-template-columns: 64px minmax(0, 1fr); justify-content: stretch; }

/* Narrow screens: the report switch and filters above the table, the charts below it */
@media (max-width: 900px) {
  .pl-layout.with-charts .pl-side { display: contents; }
  .pl-layout.with-charts .report-box { order: -2; }
  .pl-layout.with-charts .filters-box { order: -1; }
  .pl-layout.with-charts .pl-main { order: 0; }
  .pl-layout.with-charts .side-charts { order: 1; }
}

/* ============================================================
   Warm "paper" restyle — toward a clean, editorial look
   (grouped at the end so it's easy to tune or revert)
   ============================================================ */
:root {
  --bg: #f6f4ee;            /* warm cream paper */
  --surface: #ffffff;
  --line: #e7e3d8;          /* soft warm hairline */
  --line-2: #d8d3c4;
}
body { color: #26303a; }

/* Report cards: softer, roomier, gentle shadow instead of a hard border */
.pl-main > .card,
.pl-main > .pl-charts,
section.card[aria-labelledby="table-title"] {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(31,41,55,.04), 0 8px 24px -16px rgba(31,41,55,.12);
  padding: 22px 26px;
}

/* The report title: bigger, editorial serif */
#table-title {
  font-size: 25px;
  letter-spacing: -.3px;
  color: #1c2a3a;
}
.card-head { margin-bottom: 16px; }

/* Side panel boxes: warm, soft, generous */
.pl-layout.with-charts .side-box {
  background: #fbfaf6;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.pl-layout.with-charts .report-box { padding: 6px; }
.report-switch { border-color: var(--line-2) !important; border-radius: 9px; overflow: hidden; }
.report-switch a { border-radius: 0; }
.box-title { color: #6b6456; letter-spacing: .08em; }
.side-label { color: #8a8372; }

/* Segmented controls as soft pills */
.pl-side .segmented { border-radius: 9px; overflow: hidden; border-color: var(--line-2); }

/* Tables: a touch more air and warmer rules */
#expense-table td, #expense-table th { padding-top: 7px; padding-bottom: 7px; }
#expense-table tbody td { background: transparent; }
#expense-table tbody tr.alt td { background: #faf8f3; }
#expense-table td { border-bottom-color: #efece3; }

/* The pinned hero (client name bar) a shade softer */
.hero-pinned { background-color: var(--navy); }

/* Header + client-name bar: a warm dark charcoal that sits with the cream paper, not corporate navy */
:root { --header: #26241f; }
.site-header { background: var(--header); border-bottom: 1px solid rgba(255,255,255,.14); }
.hero, .hero-pinned { background: var(--header); background-image: none; }
.hero-pinned { border-bottom: 1px solid rgba(255,255,255,.12); }
.site-footer { background: var(--header); }
.hero .rule { background: var(--gold); }