/* Dark, crisp and quiet (user's pick, 2026-11-02): near-black surfaces with hairline borders, Inter, tabular figures,
one warm accent from the FWC mark used sparingly. Chart colors are the validated dark steps. */
:root {
color-scheme: dark;
--viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-5: #d55181;
--viz-pos: #3987e5; --viz-neg: #e66767; --viz-prev: #5d5f66; --viz-grid: #1f2228; --viz-base: #33363d; --viz-axis: #7d828c;
--bg: #0a0b0d;
--panel: #111215;
--raised: #17181c;
--field: #0d0e11;
--ink: #e8e9ec;
--muted: #8b9099;
--faint: #5c616b;
--line: rgb(255 255 255 / .07);
--line-strong: rgb(255 255 255 / .12);
--hover: rgb(255 255 255 / .035);
--accent: #e8743f;
--accent-ink: #ffffff;
--ring: 0 0 0 3px rgb(232 116 63 / .28);
--navy: #8fa3c2;
--good: #46c08a;
--warn: #eba34a;
--bad: #f2716b;
--chip: rgb(255 255 255 / .06);
--radius: 10px;
--shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 8px 24px rgb(0 0 0 / .35);
--edge: rgb(255 255 255 / .18);
--inset: rgb(255 255 255 / .03);
--btn-top: rgb(255 255 255 / .06); --btn-bottom: rgb(255 255 255 / .03); --btn-hover: rgb(255 255 255 / .09);
--primary-top: #ef8150; --primary-edge: #f08a5c; --primary-hover-top: #f38d5e; --primary-hover-bottom: #ec7a45;
--header: rgb(10 11 13 / .72);
--pop: 0 24px 70px rgb(0 0 0 / .6), 0 0 0 1px rgb(0 0 0 / .4);
--glow-a: rgb(232 116 63 / .07); --glow-b: rgb(57 135 229 / .05);
--date-icon: invert(.7);
}
/* Light: the same layout on warm off-white, with the darker accent and the validated light chart steps. */
:root[data-theme="light"] {
color-scheme: light;
--viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-5: #e87ba4;
--viz-pos: #2a78d6; --viz-neg: #e34948; --viz-prev: #a3a19a; --viz-grid: #e8e7e1; --viz-base: #c3c2b7; --viz-axis: #76746e;
--bg: #f5f5f3;
--panel: #ffffff;
--raised: #fbfbfa;
--field: #ffffff;
--ink: #1b1d21;
--muted: #5d636d;
--faint: #6f747e;
--line: rgb(20 22 28 / .09);
--line-strong: rgb(20 22 28 / .16);
--hover: rgb(20 22 28 / .035);
--accent: #c8592b;
--ring: 0 0 0 3px rgb(200 89 43 / .22);
--navy: #4f5f78;
--good: #1f7a4d;
--warn: #a15c00;
--bad: #b42318;
--chip: rgb(20 22 28 / .055);
--shadow: 0 1px 2px rgb(20 22 28 / .06), 0 8px 24px rgb(20 22 28 / .1);
--edge: rgb(20 22 28 / .28);
--inset: rgb(255 255 255 / .6);
--btn-top: #ffffff; --btn-bottom: #f6f6f4; --btn-hover: #f1f1ee;
--primary-top: #d4663a; --primary-edge: #bb5126; --primary-hover-top: #cb5e32; --primary-hover-bottom: #b94f24;
--header: rgb(245 245 243 / .8);
--pop: 0 24px 70px rgb(20 22 28 / .22), 0 0 0 1px rgb(20 22 28 / .06);
--glow-a: rgb(200 89 43 / .05); --glow-b: rgb(42 120 214 / .04);
--date-icon: none;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
font: 13.5px/1.5 Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-feature-settings: 'cv11', 'ss01', 'tnum' 0;
background: radial-gradient(1200px 500px at 15% -10%, var(--glow-a), transparent 60%), radial-gradient(900px 400px at 100% 0%, var(--glow-b), transparent 60%), var(--bg); background-attachment: fixed; }
::selection { background: rgb(232 116 63 / .35); }
header { display: flex; align-items: center; gap: 20px; padding: 0 24px; height: 52px; position: sticky; top: 0; z-index: 5; flex-wrap: wrap;
background: var(--header); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.brand { font-weight: 600; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: center; gap: 10px; font-size: 14px; }
.brand img { width: 24px; height: 24px; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-strong); }
nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: none; border: 0; padding: 5px 11px; border-radius: 7px; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer; transition: color .12s, background .12s; }
nav a:hover { background: var(--hover); color: var(--ink); }
nav a.active { background: var(--chip); color: var(--ink); box-shadow: 0 0 0 1px var(--line) inset; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.year { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
a { color: inherit; }
main { padding: 28px 28px 40px; max-width: 2400px; margin: 0 auto; }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 16px; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: -.005em; margin: 0 0 12px; color: var(--ink); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.row .spacer { flex: 1; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 18px; overflow-x: auto;
box-shadow: 0 1px 0 var(--inset) inset; }
/* One card split into cells by hairlines (each cell draws its right and bottom line; the card clips the outer ones). */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 18px; background: var(--panel);
border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tile { padding: 14px 16px 15px; min-width: 0; margin: 0 -1px -1px 0; box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.tile .label { color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.tile .value { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .sub { color: var(--faint); font-size: 12px; margin-top: 3px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 18px; }
.grid2 > * { min-width: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { font-size: 13px; }
th { color: var(--faint); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-top: 6px; padding-bottom: 8px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; }
table.fixed { table-layout: fixed; min-width: var(--minw, 760px); }
table.fixed td, table.fixed th { overflow: hidden; text-overflow: ellipsis; }
table.fixed .badge { max-width: 100%; }
/* Bulk editing. The bar keeps its height when nothing is selected, so the list doesn't move. */
.bulk-bar { position: sticky; top: 60px; z-index: 5; display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 7px 12px;
min-height: 44px; box-sizing: border-box; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow); }
.bulk-bar.idle { position: static; background: none; border: 1px dashed var(--line); box-shadow: none; font-size: 12px; color: var(--faint); }
.bulk-bar.idle span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input.pick, input.pick-all { width: 15px; height: 15px; cursor: pointer; vertical-align: middle; accent-color: var(--accent); }
/* Column resizing: a grab strip on the right edge of each sizable header cell. */
table.fixed th { position: relative; }
.col-grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.col-grip::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 1px; background: var(--line); }
.col-grip:hover::after, .col-grip.active::after { background: var(--accent); width: 2px; left: 3px; top: 0; bottom: 0; }
.rec { color: var(--faint); font-size: 12px; margin-left: 4px; }
tr.click { cursor: pointer; }
tr.click td { transition: background .08s; }
tr.click:hover td { background: var(--hover); }
tr.selected td { background: var(--chip); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--line-strong); }
.muted { color: var(--muted); }
.empty { color: var(--faint); padding: 14px 0; }
.neg { color: var(--bad); }
.pos { color: var(--good); }
.chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; background: var(--chip); font-size: 11.5px; font-weight: 500; box-shadow: 0 0 0 1px var(--line) inset; }
.chip.good { color: var(--good); }
.chip.warn { color: var(--warn); }
.chip.bad { color: var(--bad); }
.btn, select, input, textarea { font: inherit; color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; cursor: pointer;
font-weight: 500; background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); border: 1px solid var(--line-strong);
box-shadow: 0 1px 0 var(--inset) inset; transition: background .12s, border-color .12s, transform .05s; white-space: nowrap; }
.btn:hover { background: var(--btn-hover); border-color: var(--edge); }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible, nav a:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.primary { background: linear-gradient(180deg, var(--primary-top), var(--accent)); border-color: var(--primary-edge); color: var(--accent-ink);
box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 4px 14px rgb(232 116 63 / .25); }
.btn.primary:hover { background: linear-gradient(180deg, var(--primary-hover-top), var(--primary-hover-bottom)); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: rgb(242 113 107 / .45); background: rgb(242 113 107 / .08); }
.btn.small { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
select, input, textarea { background: var(--field); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 9px; transition: border-color .12s, box-shadow .12s; }
select:hover, input:hover, textarea:hover { border-color: var(--edge); }
select:focus, input:focus, textarea:focus { outline: none; border-color: rgb(232 116 63 / .7); box-shadow: var(--ring); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--date-icon); }
dialog { border: 1px solid var(--line-strong); border-radius: 14px; padding: 0; background: var(--raised); color: var(--ink); width: min(520px, calc(100vw - 32px));
box-shadow: var(--pop); }
dialog[open] { animation: pop .14s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.985); } }
dialog h2 { font-size: 15px; }
dialog.wide { width: min(680px, calc(100vw - 32px)); }
dialog.import { width: min(1000px, calc(100vw - 32px)); }
dialog .import-cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
dialog .import-cols > span { display: contents; }
dialog .import-cols > span[hidden] { display: none; }
.import-preview { max-height: 50vh; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; }
.import-preview table { margin: 0; }
.import-preview thead th { position: sticky; top: 0; background: var(--panel); }
.import-preview td input:not([type]) { width: 100%; }
.import-preview tr.muted td { color: var(--muted); }
dialog::backdrop { background: rgb(0 0 0 / .55); backdrop-filter: blur(3px); }
dialog form { padding: 22px; }
dialog .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
dialog label.full { grid-column: 1 / -1; }
dialog label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
dialog label.check input { width: 18px; height: 18px; }
dialog label[hidden] { display: none; }
dialog label { min-width: 0; }
dialog label > input, dialog label > select, dialog label > textarea { width: 100%; min-width: 0; }
/* Money fields: a $ in front, amounts right-aligned with tabular figures. */
.money-in { position: relative; display: block; width: 100%; }
.money-in > span { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.money-in > span { z-index: 1; }
.pct-in { position: relative; display: block; width: 100%; }
.pct-in > input { width: 100%; min-width: 0; padding-right: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.pct-in > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.money-in > input { width: 100%; min-width: 0; padding-left: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.money-in > .math-preview { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none;
color: var(--good); font-size: 12px; font-variant-numeric: tabular-nums; max-width: 50%; overflow: hidden; white-space: nowrap; }
dialog .actions { display: flex; gap: 8px; }
dialog .actions .spacer { flex: 1; }
.tree { list-style: none; padding-left: 0; margin: 0; }
.tree ul { list-style: none; padding-left: 22px; border-left: 1px dashed var(--line); margin: 4px 0 4px 8px; }
.tree li { margin: 4px 0; }
.ent { display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.ent:hover { background: var(--hover); }
.ent b { font-weight: 600; }
.grp-title { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--raised); color: var(--ink); padding: 8px 14px; border-radius: 9px;
border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-weight: 500; z-index: 60; }
#toast::before { content: '✓'; color: var(--good); margin-right: 8px; }
/* Entity logos, tabs and banners (colors come from each entity's brand in app.js). */
.logo { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; overflow: hidden; font-weight: 700; letter-spacing: .02em; }
.logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.badge:hover { text-decoration: underline; }
.etabs { display: flex; gap: 4px; align-items: center; overflow-x: auto; margin: -8px 0 18px; padding: 4px 2px 8px; scrollbar-width: thin; }
.etab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 10px 5px 5px; border-radius: 99px; border: 1px solid var(--line-strong);
background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.etab:first-child { padding-left: 12px; }
.etab:hover { border-color: var(--brand); }
.etab.active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.etab-sep { flex: none; width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.banner { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border-radius: 14px; margin-bottom: 16px; color: var(--ink);
background: radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 70%), var(--panel);
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); }
.banner h1 { margin: 2px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.banner a { color: inherit; }
.banner-text { flex: 1; min-width: 0; }
.banner-sub { color: var(--muted); margin-top: -2px; }
.tile-note { font-size: 13px; font-weight: 400; white-space: pre-line; }
.banner-kind { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.banner-role { opacity: .9; }
.banner-cash { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.banner-amount { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hint { background: rgb(235 163 74 / .07); border: 1px solid rgb(235 163 74 / .2); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; color: var(--muted); }
/* Ledger: account tree beside the selected company or asset. */
.ledger-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.tree { position: sticky; top: 72px; max-height: calc(100vh - 92px); overflow: auto; padding: 10px 8px; scrollbar-width: thin; }
.tree summary { font-weight: 600; padding: 4px 8px 8px; cursor: pointer; list-style: none; }
.tree summary::-webkit-details-marker { display: none; }
.tnode, .tleaf { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px calc(4px + var(--d) * 16px); border-radius: 7px; font-size: 13px; }
.tnode:hover, .tleaf:hover { background: var(--hover); }
.tnode.sel, .tleaf.sel { background: var(--chip); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.tleaf { text-decoration: none; color: var(--ink); padding-left: calc(34px + var(--d) * 16px); }
.ttoggle { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; padding: 0; font-size: 17px; line-height: 1; }
.ttoggle:hover { background: var(--hover); color: var(--ink); }
.ttoggle svg { transition: transform .15s; }
.ttoggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.tlink { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; text-decoration: none; color: var(--ink); }
.tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.tno { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tamt { color: var(--faint); font-variant-numeric: tabular-nums; flex: none; font-size: 12px; }
.ticon { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--chip); color: var(--good); display: inline-flex;
align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.tree-projects { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
.tree-projects summary, .tree-accts summary { display: flex; align-items: center; justify-content: space-between; }
.tree .tleaf.done { opacity: .6; }
.tree-tools { display: inline-flex; gap: 4px; }
.tree-tools .btn.icon { padding: 2px 5px; display: inline-flex; align-items: center; color: var(--muted); }
.tree-tools .btn.icon:hover { color: var(--ink); }
.tgroup .tlink { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tgroup .tamt { color: var(--muted); }
.flow { list-style: none; margin: 12px 0 0; padding: 0; }
.flow-step { display: grid; grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1.4fr) 110px minmax(0, 1.2fr); gap: 12px; align-items: center;
padding: 10px 4px; border-bottom: 1px solid var(--line); }
.flow-step:last-child { border-bottom: 0; }
.flow-n { width: 24px; height: 24px; border-radius: 50%; background: var(--chip); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.flow-step.done .flow-n { background: var(--good); color: var(--panel); }
.flow-step.part .flow-n { background: var(--warn); color: var(--panel); }
.flow-what .muted { font-size: 12px; }
.flow-amt { font-variant-numeric: tabular-nums; font-size: 13px; }
.flow-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .flow-step { grid-template-columns: 28px 1fr; } .flow-step > :nth-child(n+3) { grid-column: 2; } .flow-act { justify-content: flex-start; } }
.amort { margin-top: 12px; }
.amort summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.amort-scroll { max-height: 420px; overflow: auto; }
/* Insights */
#f-scope { max-width: 260px; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--field); }
.seg button { background: none; border: 0; padding: 4px 12px; border-radius: 7px; color: var(--muted); cursor: pointer; font: inherit; font-weight: 500; }
.seg button.on { background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong) inset, 0 1px 2px rgb(0 0 0 / .4); }
.ins-bars { display: grid; gap: 2px; }
.ins-row { display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(80px, 2fr) 120px 52px; gap: 12px; align-items: center; padding: 7px 8px;
background: none; border: 0; border-radius: 6px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ins-row:hover { background: var(--hover); }
.ins-row.sel { background: var(--chip); box-shadow: inset 3px 0 0 var(--accent); }
.ins-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-track { height: 10px; border-radius: 0 4px 4px 0; overflow: hidden; }
.ins-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.ins-row b { font-variant-numeric: tabular-nums; text-align: right; }
.ins-row .muted { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
@media (max-width: 600px) {
.ins-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'name amt pct' 'track track track'; row-gap: 6px; }
.ins-row .ins-name { grid-area: name; } .ins-row b { grid-area: amt; } .ins-row .muted { grid-area: pct; } .ins-row .ins-track { grid-area: track; }
}
@media (min-width: 1200px) and (max-width: 2199px) { .ins-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .ins-split .uw-col { display: block; min-width: 0; } }
/* Dashboard charts */
.viz-grid-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.viz-grid-row .panel { margin: 0; }
.viz-full { grid-column: 1 / -1; }
.viz-grid-row .row { flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.viz-grid-row .row .muted { font-size: 12px; }
svg.viz { width: 100%; height: auto; display: block; overflow: visible; }
.viz text { font: 11px Inter, system-ui, -apple-system, sans-serif; }
.viz-axis { fill: var(--viz-axis); font-variant-numeric: tabular-nums; }
.viz-axis.viz-sel, .viz-label.viz-sel { fill: var(--ink); font-weight: 700; }
.viz-label { fill: var(--muted); font-size: 12px !important; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-base { stroke: var(--viz-base); stroke-width: 1; }
.viz-pos { fill: var(--viz-pos); } .viz-neg { fill: var(--viz-neg); }
.viz-dim { opacity: .55; }
.viz-hit:hover .viz-dim { opacity: 1; }
.viz [data-year] { cursor: pointer; }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.viz-cur { stroke: var(--viz-1); } .viz-line.viz-prev { stroke: var(--viz-prev); }
.viz-wash { fill: var(--viz-1); opacity: .1; }
.viz-dot { fill: var(--viz-1); stroke: var(--panel); stroke-width: 2; }
.viz-cross { stroke: var(--viz-base); stroke-width: 1; opacity: 0; }
.viz-col:hover .viz-cross { opacity: 1; }
.viz-slice { stroke: var(--panel); stroke-width: 2; }
.viz-slice:hover { opacity: .85; }
.viz-center { fill: var(--ink); font: 600 18px Inter, system-ui, -apple-system, sans-serif; letter-spacing: -.02em; }
.viz-donut { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.viz-donut svg { width: 180px; height: 180px; }
.viz-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; font-size: 13px; }
.viz-legend li { display: grid; grid-template-columns: 12px 1fr auto 40px; gap: 8px; align-items: center; }
.viz-legend li b { font-variant-numeric: tabular-nums; } .viz-legend li .muted { text-align: right; font-variant-numeric: tabular-nums; }
.viz-key { width: 12px; height: 12px; border-radius: 3px; }
.viz-legend-inline { display: inline-flex; gap: 12px; font-size: 12px; color: var(--muted); }
.viz-legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
.viz-swatch { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.viz-swatch.viz-cur { background: var(--viz-1); } .viz-swatch.viz-prev { background: var(--viz-prev); }
.viz-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--raised); color: var(--ink); border: 1px solid var(--line);
border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.5; box-shadow: 0 6px 18px rgb(0 0 0 / .18); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .viz-grid-row { grid-template-columns: minmax(0, 1fr); } }
/* Ultrawide (2200px and up): side-by-side sections instead of one long column. Below that, the wrappers vanish. */
.uw-split, .uw-col { display: contents; }
@media (min-width: 2200px) {
.uw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.uw-col { display: block; min-width: 0; }
.uw-split .panel { margin-top: 0; }
/* All four charts on one row: P&L, net worth, this year's revenue, then allocation. */
.viz-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.8fr); }
.viz-grid-row > .viz-wide { order: 1; } .viz-grid-row > .viz-nw { order: 2; } .viz-grid-row > .viz-full { grid-column: auto; }
.viz-grid-row > .viz-full:not(.viz-nw) { order: 3; } .viz-grid-row > :not(.viz-wide):not(.viz-full) { order: 4; }
.ledger-layout { grid-template-columns: 340px minmax(0, 1fr); }
.viz-donut svg { width: 200px; height: 200px; }
}
/* Dashboard action items: alerts beside what's coming up; each list scrolls when it's long. */
.act-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 24px; }
.act-grid h3 { margin: 8px 0 4px; }
.act-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.act-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 4px; border-top: 1px solid var(--line); font-size: 13px; }
.act-list li:first-child { border-top: 0; }
.act-list li.click { cursor: pointer; border-radius: 6px; } .act-list li.click:hover { background: var(--hover); }
.act-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.act-what { min-width: 0; } .act-what .badge { vertical-align: middle; }
.act-accts { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-amt { font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 900px) { .act-grid { grid-template-columns: minmax(0, 1fr); } }
.crumbs { color: var(--muted); margin-bottom: 10px; font-size: 13px; }
.crumbs a { color: var(--muted); }
.crumbs b { color: var(--ink); }
h3 { font-size: 11px; color: var(--faint); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 1279px) {
.ledger-layout { grid-template-columns: minmax(0, 1fr); }
.tree { position: static; max-height: none; }
}
.ledger-main { min-width: 0; }
.ledger-main .row { flex-wrap: wrap; }
/* Keep content clear of the iPhone notch and home bar when opened from the home screen. */
header { padding-top: env(safe-area-inset-top); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
main { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
header { gap: 10px; height: auto; padding: max(10px, env(safe-area-inset-top)) 16px 0; }
.brand { flex: 1; }
.header-right { margin-left: 0; }
/* Tabs become a single swipeable row under the title. */
nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 12px 8px; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav a { flex: none; padding: 8px 12px; }
main { padding: 16px 16px max(24px, env(safe-area-inset-bottom)); }
.tiles { grid-template-columns: 1fr 1fr; }
.tile { padding: 10px 12px; }
.tile .value { font-size: 18px; }
.panel { padding: 14px; border-radius: 12px; }
th, td { padding: 8px; }
.btn { height: 36px; padding: 0 14px; }
.btn.small { height: 30px; padding: 0 10px; }
/* 16px inputs stop iPhone Safari from zooming in when a field is tapped. */
select, input, textarea { font-size: 16px; }
dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
dialog form { padding: 16px 16px max(16px, env(safe-area-inset-bottom)); }
dialog .fields { grid-template-columns: 1fr; }
.grid2 { grid-template-columns: 1fr; }
.etabs { margin: -4px -16px 14px; padding: 4px 16px 8px; }
.banner { flex-wrap: wrap; gap: 14px; padding: 16px; }
.banner .logo { width: 60px !important; height: 60px !important; }
.banner h1 { font-size: 20px; }
.banner-cash { flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
.banner-amount { font-size: 22px; }
}
.ledger-search { width: 220px; max-width: 45vw; margin-right: 8px; }
.tree-search { width: calc(100% - 8px); margin: 0 4px 8px; }
/* Balance sheet: assets beside liabilities and equity once there's room, each kept to a readable width. */
.bs-top { margin-top: 16px; }
.bs-grid { display: grid; gap: 16px; align-items: start; max-width: 960px; }
.bs-grid .panel { margin: 0; }
.bs-grid tbody tr:hover td { background: var(--hover); } /* keeps your place across to the numbers */
.bs-note { margin-top: 12px; max-width: 960px; }
@media (min-width: 1500px) {
.bs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1560px; }
.bs-note { max-width: 1560px; }
}
/* Up and down buttons that reorder bank accounts and companies. */
.movers { display: inline-flex; gap: 4px; }
.movers .btn[disabled] { opacity: .35; cursor: default; }
/* Split transactions: each line in its own box. */
.split-line { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); padding: 10px 12px; margin: 10px 0; }
.split-line .fields { margin: 8px 0 0; }
.split-head { display: flex; align-items: center; gap: 10px; }
.split-head select { flex: 1; min-width: 0; }
.split-sum { font-size: 13px; color: var(--muted); }
.split-sum b { color: var(--ink); }
/* Editing in the register (bank account pages): the line being edited, its split lines and its buttons. */
tr.tx-hidden { display: none; }
tr.tx-sel td { background: var(--chip); }
tr.tx-edit td { background: color-mix(in srgb, var(--accent) 6%, var(--raised)); padding: 4px 5px; border-bottom: 0; overflow: visible; }
tr.tx-edit.tx-main td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
tr.tx-edit.tx-main td { padding-top: 8px; }
tr.tx-foot td { padding: 6px 10px 10px; border-bottom: 1px solid var(--line); }
.tx-in { width: 100%; min-width: 0; font: inherit; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--field); color: var(--ink); }
.tx-in::placeholder { color: var(--faint); }
.tx-in.num { text-align: right; font-variant-numeric: tabular-nums; }
.tx-in[readonly] { color: var(--muted); }
.tx-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tx-bar select { font: inherit; padding: 4px 6px; }
.tx-drop { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--chip); color: var(--muted); cursor: pointer; line-height: 1; }
.tx-drop:hover { color: var(--bad); border-color: rgb(242 113 107 / .5); }
/* Quick switcher (⌘K): a floating search over everything. */
kbd { font: 500 11px Inter, system-ui, sans-serif; color: var(--muted); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--chip); }
.pal-btn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 10px; border-radius: 8px; border: 1px solid var(--line-strong);
background: var(--field); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; min-width: 190px; }
.pal-btn kbd { margin-left: auto; }
.pal-btn:hover { color: var(--ink); border-color: var(--edge); }
#palette { position: fixed; inset: 0; z-index: 80; background: rgb(0 0 0 / .5); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.pal-card { width: min(640px, calc(100vw - 24px)); background: var(--raised); border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden;
box-shadow: var(--pop); animation: pop .12s ease-out; }
.pal-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.pal-search input { flex: 1; border: 0; background: none; padding: 4px 0; font-size: 15px; box-shadow: none; }
.pal-search input:focus { box-shadow: none; }
.pal-list { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.pal-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.pal-item.on { background: var(--chip); box-shadow: inset 2px 0 0 var(--accent); }
.pal-dot { width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--chip); box-shadow: 0 0 0 1px var(--line) inset; }
.pal-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-sub { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pal-none { padding: 18px 12px; color: var(--faint); }
.pal-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11.5px; }
.pal-foot kbd { margin-right: 3px; }
@media (max-width: 640px) { .pal-btn { min-width: 0; } .pal-btn kbd, .pal-btn { font-size: 0; gap: 0; } .pal-btn svg { width: 16px; height: 16px; } #palette { padding-top: 8vh; } .pal-foot { display: none; } }
/* Dashboard: today's entries beside the projects under way (stacked on narrower screens). */
.dash-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; }
@media (min-width: 1280px) { .dash-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.dash-scroll { max-height: 620px; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.proj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.proj { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); cursor: pointer; transition: border-color .12s, background .12s; }
.proj:hover { border-color: var(--line-strong); background: var(--hover); }
.proj-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.proj-head .spacer { flex: 1; }
.proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-head > .muted { font-size: 12px; white-space: nowrap; }
.proj-stages { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.proj-stages li { display: flex; flex-direction: column; gap: 5px; font-size: 10.5px; color: var(--faint); min-width: 0; }
.proj-stages li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-stages i { display: block; height: 4px; border-radius: 2px; background: var(--chip); }
.proj-stages li.done i { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.proj-stages li.now i { background: var(--accent); box-shadow: 0 0 10px rgb(232 116 63 / .5); }
.proj-stages li.now span { color: var(--ink); font-weight: 500; }
.proj-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.proj-nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proj-nums span { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-nums b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.proj-nums em { font-style: normal; color: var(--faint); font-weight: 500; font-size: 12px; }
.proj-bar { height: 3px; border-radius: 2px; background: var(--chip); overflow: hidden; margin-top: 4px; }
.proj-bar i { display: block; height: 100%; background: var(--viz-1); border-radius: 2px; }
.proj-bar.over i { background: var(--bad); }
.proj-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; }
@media (max-width: 640px) { .proj-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proj-stages li span { display: none; } .proj-stages li.now span { display: block; } }
/* Dashboard: company scorecard and capital pool. */
.dash-note { margin-top: 10px; font-size: 12px; color: var(--faint); }
svg.spark { display: block; overflow: visible; }
svg.spark polyline { fill: none; stroke: var(--viz-1); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
svg.spark circle { fill: var(--viz-1); }
svg.spark .spark-zero { stroke: var(--viz-base); stroke-width: 1; stroke-dasharray: 2 3; }
.cap-head { margin: 4px 0 14px; }
.cap-head > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cap-head span { color: var(--muted); font-size: 12px; }
.cap-head b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cap-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--chip); gap: 2px; }
.cap-bar i { display: block; height: 100%; }
.cap-cash { background: var(--viz-3); } .cap-out { background: var(--viz-1); } .cap-need { background: var(--warn); }
.cap-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); }
.cap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cap-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.cap-list { margin: 0 0 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.cap-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; min-width: 0; }
.cap-list dt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-list dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
@media (max-width: 640px) { .cap-list { grid-template-columns: minmax(0, 1fr); } }
.dash-col { min-width: 0; }
/* Dashboard panes: one column, then two equal halves once the window is wide (a MacBook Air at 2048 and up from
about 1500px). Each row is as tall as its taller pane. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-grid > .panel { margin: 0; }
@media (min-width: 1500px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Account picture picker (Edit company / bank account / asset). */
.pic-pick { display: flex; gap: 16px; align-items: flex-start; margin: 16px 0 4px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 12px; transition: border-color .12s, background .12s; }
.pic-pick.drop { border-color: var(--accent); background: rgb(232 116 63 / .06); }
.pic-preview { flex: none; }
.pic-controls { flex: 1; min-width: 0; display: grid; gap: 8px; }
.pic-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pic-color { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 12px; }
.pic-color input { width: 30px !important; height: 26px; padding: 2px; border-radius: 7px; cursor: pointer; }
.pic-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.pic-icon { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); font-size: 16px; cursor: pointer; line-height: 1; padding: 0; }
.pic-icon:hover { border-color: var(--line-strong); }
.pic-icon.on { border-color: var(--accent); box-shadow: var(--ring); }
.pic-own { width: 70px; height: 30px; font-size: 13px; }
.pic-help { font-size: 11.5px; }
.logo.mono { line-height: 1; }
/* Photo circle editor. */
.crop { display: flex; gap: 16px; align-items: center; width: 100%; flex-wrap: wrap; }
.crop-stage { position: relative; flex: none; overflow: hidden; border-radius: 12px; background: var(--field); cursor: grab; touch-action: none; user-select: none; }
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / .58); outline: 2px solid rgb(255 255 255 / .85); outline-offset: -2px; pointer-events: none; }
.crop-side { flex: 1; min-width: 180px; display: grid; gap: 10px; }
.crop-zoom { display: grid !important; gap: 6px; }
.crop-zoom input { accent-color: var(--accent); width: 100%; padding: 0; }
.pic-row .spacer { flex: 1; }
.logo.glyph svg { display: block; }
/* Scheduled entries (dated later than today) and the toast's Undo. */
.sched { color: var(--faint); font-style: italic; }
.banner-sched { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
#toast button { margin-left: 8px; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
#toast button:hover { text-decoration: underline; }
.theme-btn { width: 30px; padding: 0; font-size: 14px; }
.backup-list { list-style: none; margin: 12px 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.backup-list li { display: flex; align-items: center; gap: 12px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.backup-list li .muted { flex: 1; font-size: 12px; }
/* Phone header: logo and name, then search, theme and year on one row (Export is in ⌘K's list as Download a backup). */
@media (max-width: 640px) {
.pal-btn kbd { display: none; }
.pal-btn { width: 32px; height: 32px; padding: 0; justify-content: center; }
.theme-btn { width: 32px; height: 32px !important; }
.year { font-size: 0; gap: 0; }
.year select { font-size: 14px; padding: 4px 6px; }
.header-right { gap: 6px; }
.header-right a.btn { display: none; }
.brand { font-size: 13px; line-height: 1.2; min-width: 0; }
}
/* Insights reports. */
.ins-tabs { display: flex; gap: 2px; margin: -8px 0 20px; padding-bottom: 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ins-tabs button { flex: none; background: none; border: 0; padding: 6px 12px; border-radius: 7px; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer; }
.ins-tabs button:hover { background: var(--hover); color: var(--ink); }
.ins-tabs button.on { background: var(--chip); color: var(--ink); box-shadow: 0 0 0 1px var(--line) inset; }
.pnl-wrap { overflow-x: auto; }
table.pnl { min-width: 960px; }
table.pnl td:first-child { min-width: 170px; }
.pnl-sec td { padding-top: 14px; font-size: 11px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.pnl-tot td { border-top: 1px solid var(--line-strong); font-weight: 600; }
.pnl-net td { border-top: 2px solid var(--line-strong); font-weight: 600; }
.flip-reads { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; }
.cl-bar { display: block; height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.cl-bar i { display: block; height: 100%; border-radius: 4px; }
.bud-tiles { margin: 4px 0 14px; }
.bud-in { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.bud-in::placeholder { color: var(--faint); font-style: italic; }
/* Reconciling and the accuracy checks. */
.clr { width: 22px; height: 22px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--faint); font-size: 13px; line-height: 1; }
.clr:hover { background: var(--chip); color: var(--ink); }
.clr-1 { color: var(--good); font-weight: 700; }
.clr-2 { font-size: 11px; }
.rec-fields { margin-bottom: 10px; }
.rec-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.rec-sum > div { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: inset -1px 0 0 var(--line); }
.rec-sum span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rec-sum b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-ok b { color: var(--good); } .rec-off b { color: var(--bad); }
.rec-tools { margin-bottom: 6px; }
.rec-list { max-height: 42vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 2px 8px; }
.rec-who { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.rec-say { margin: -4px 0 12px; }
.rec-match { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--good) 12%, transparent); font-weight: 500; }
.rec-match .ic { width: 18px; height: 18px; color: var(--good); flex: none; }
.rec-match span { flex: 1; }
.rec-miss { padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--bad) 10%, transparent); }
.rec-hint { font-size: 12px; margin-left: 8px; }
.rec-list tr.rec-changed td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.rec-list tr.rec-new td { background: color-mix(in srgb, var(--good) 8%, transparent); }
.rec-add { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.rec-pending { font-size: 12px; }
.rec-fields, .rec-sum, .rec-say, .rec-work > * { flex-shrink: 0; } /* the dialog is a column that scrolls; these keep their height */
.chk { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; }
.chk-ok { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.chk-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }
.chk-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.chk-row { border-bottom: 1px solid var(--line); padding: 8px 0; }
.chk-row summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.chk-row summary::-webkit-details-marker { display: none; }
.chk-row summary span:nth-child(2) { flex: 1; }
.chk-row ul { margin: 8px 0 4px 28px; padding: 0; font-size: 12.5px; color: var(--muted); display: grid; gap: 3px; }
.chk-passed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 8px 18px; }
.chk-passed li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.btn[hidden] { display: none; }
/* Copying transactions to other accounts. */
.copy-tools { margin-bottom: 6px; }
.copy-list { max-height: 44vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px 8px; }
.copy-co { margin-top: 8px; padding: 2px 0; font-size: 11px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
dialog label.copy-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 130px; align-items: center; gap: 10px; min-height: 34px; padding: 2px 0; flex-direction: row; font-size: 13px; color: var(--ink); cursor: pointer; }
.copy-row > span:nth-child(2) { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.copy-row input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.copy-row input:disabled + span { opacity: .4; }
.copy-amt[hidden] { display: none; }
.copy-sum { min-height: 20px; margin: 10px 0 0; font-size: 12.5px; }
/* Line icons (Lucide), sized to the text around them. */
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .ic { width: 15px; height: 15px; margin-left: -2px; }
.btn.small .ic { width: 13px; height: 13px; }
nav a .ic { color: var(--faint); }
nav a.active .ic, nav a:hover .ic { color: var(--ink); }
nav a.active .ic { color: var(--accent); }
/* Wide screens: navigation is a slim sidebar on the left (name and search at the top, theme, year and export at the
bottom); narrower ones keep the bar across the top. */
@media (min-width: 901px) {
header { position: fixed; inset: 0 auto 0 0; width: 220px; height: 100vh; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px;
padding: 18px 12px 14px; border-bottom: 0; border-right: 1px solid var(--line); }
.brand { padding: 0 6px 10px; }
header nav { flex-direction: column; gap: 2px; order: 2; }
/* The nav fills the sidebar, so Garden (the household's, not the business's) sits at the bottom, above the theme. */
header nav { flex: 1; flex-wrap: nowrap; }
header nav a[data-view="garden"] { margin-top: auto; margin-bottom: 8px; }
header nav a { padding: 7px 10px; border-radius: 8px; }
.header-right { order: 1; margin: 0 0 10px; display: contents; }
.pal-btn { order: 1; min-width: 0; width: 100%; margin-bottom: 10px; }
.theme-btn, .year, .export-btn { order: 3; }
.theme-btn { margin-top: auto; align-self: flex-start; }
.year { padding: 0 4px; }
.year select { flex: 1; }
.export-btn { justify-content: flex-start; }
main { margin-left: 220px; max-width: calc(2400px + 220px); }
.bulk-bar { top: 12px; }
.tree { top: 16px; max-height: calc(100vh - 32px); }
}
/* Edit forms open as a panel from the right, with the page still in view; on a phone they're a full-height sheet. */
@media (min-width: 641px) {
dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(520px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw;
border-radius: 16px 0 0 16px; border-right: 0; }
dialog.wide { width: min(680px, 100vw); }
dialog.import { width: min(1000px, 94vw); }
dialog[open] { animation: slide-in .2s cubic-bezier(.2, .8, .2, 1); }
dialog form { height: 100%; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 0; }
dialog .actions { position: sticky; bottom: 0; margin-top: auto; padding: 14px 0 18px; background: var(--raised); border-top: 1px solid var(--line); }
}
@keyframes slide-in { from { transform: translateX(32px); opacity: 0; } }
dialog::backdrop { background: rgb(0 0 0 / .28); backdrop-filter: none; }
@media (max-width: 640px) {
dialog { max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
dialog form { min-height: 100%; display: flex; flex-direction: column; }
dialog .actions { position: sticky; bottom: 0; margin-top: auto; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: var(--raised); border-top: 1px solid var(--line); }
}
/* Empty states get a quiet icon; the first load shows placeholders instead of a blank page. */
.empty { display: flex; align-items: center; gap: 10px; }
.empty::before { content: ''; flex: none; width: 18px; height: 18px; background: currentColor; opacity: .7;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; }
.skeleton { display: grid; gap: 18px; }
.skeleton i { display: block; border-radius: 12px; background: linear-gradient(90deg, var(--chip) 0%, var(--hover) 50%, var(--chip) 100%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk-title { width: 220px; height: 26px; }
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.sk-tiles i { height: 86px; }
.sk-panel { height: 260px; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton i, dialog[open] { animation: none; } }
/* Hide reconciled, and dragging accounts into order in the sidebar. */
.hide-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.hide-rec input { accent-color: var(--accent); width: 15px; height: 15px; }
[draggable="true"] { cursor: grab; }
.dragging { opacity: .45; }
.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
/* ---------- Folding the sidebar ---------- */
.nav-fold { display: none; margin-left: auto; background: none; border: 0; padding: 4px; border-radius: 6px; color: var(--faint); cursor: pointer; }
.nav-fold:hover { color: var(--ink); background: var(--hover); }
@media (min-width: 901px) {
.nav-fold { display: inline-flex; }
header, main { transition: width .2s ease, margin-left .2s ease, padding .2s ease; }
.nav-folded header { width: 60px; padding-left: 10px; padding-right: 10px; }
.nav-folded main { margin-left: 60px; }
.nav-folded .brand { flex-direction: column; gap: 8px; padding: 0 0 10px; }
.nav-folded .brand > span, .nav-folded header nav a span, .nav-folded .pal-btn kbd, .nav-folded .year, .nav-folded .export-btn { display: none; }
.nav-folded .nav-fold { margin: 0; transform: scaleX(-1); }
.nav-folded .pal-btn { font-size: 0; gap: 0; padding: 0; justify-content: center; height: 32px; }
.nav-folded header nav a { justify-content: center; padding: 8px 0; }
.nav-folded .theme-btn { align-self: center; }
}
/* ---------- Motion ---------- */
#view { view-transition-name: page; }
::view-transition-old(page) { animation: page-out .12s ease-in both; }
::view-transition-new(page) { animation: page-in .2s ease-out both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
tr.flash td { animation: flash 1.4s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } }
tr.leaving { transition: opacity .18s ease, transform .18s ease; opacity: 0; transform: translateX(-12px); }
.tile, .panel, .proj, .btn, .tleaf, .tnode, nav a { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(page), ::view-transition-new(page), tr.flash td { animation: none; }
tr.leaving, header, main { transition: none; }
}
/* ---------- Projects: calendar and timeline ---------- */
.cal-tools { gap: 10px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { min-width: 150px; text-align: center; font-size: 14px; }
#f-pv-pick { max-width: 280px; }
.cal { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--raised); border-bottom: 1px solid var(--line); }
.cal-head span { padding: 6px 8px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; min-height: 96px; padding-bottom: 6px; border-bottom: 1px solid var(--line); position: relative; }
.cal-week:last-child { border-bottom: 0; }
.cal-day { border-right: 1px solid var(--line); padding: 4px 8px; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.out { background: color-mix(in srgb, var(--chip) 50%, transparent); }
.cal-day.out .cal-num { color: var(--faint); opacity: .6; }
.cal-num { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-day.today .cal-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; }
.cal-bar { position: relative; z-index: 1; display: flex; align-items: center; height: 20px; margin: 0 2px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.cal-bar:hover { background: color-mix(in srgb, var(--c) 45%, transparent); }
.cal-bar.cont { border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; margin-left: 0; }
.cal-bar.more { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.cal-bar.expected { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent) 0 6px, color-mix(in srgb, var(--c) 14%, transparent) 6px 12px); }
.cal-evs { z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 2px 6px 0; min-width: 0; }
.cal-ev { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--ink); }
.cal-ev.start, .cal-ev.end { background: color-mix(in srgb, var(--c) 22%, transparent); font-weight: 600; }
.cal-ev.expected { border-style: dashed; }
.cal-more { font-size: 10.5px; color: var(--faint); padding: 0 6px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.cal-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.tl { border: 1px solid var(--line); border-radius: 10px; padding: 6px 0; }
.tl-head, .tl-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; }
.tl-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tl-months span { font-size: 11px; color: var(--faint); padding: 4px 0 6px; border-left: 1px solid var(--line); padding-left: 6px; }
.tl-row { min-height: 30px; }
.tl-name { padding: 0 12px; font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-track { position: relative; height: 30px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), var(--line) calc(100% / 12 - 1px) calc(100% / 12)); }
.tl-bar { position: absolute; top: 7px; height: 16px; border-radius: 5px; background: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.tl-bar.sold { background: color-mix(in srgb, var(--c) 35%, transparent); }
.tl-bar.expected { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, transparent) 0 6px, color-mix(in srgb, var(--c) 25%, transparent) 6px 12px); }
.tl-bar.open { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: .8; }
@media (max-width: 640px) {
.cal-week { min-height: 70px; } .cal-day { padding: 2px 4px; } .cal-ev, .cal-more { display: none; } .cal-bar { font-size: 10px; padding: 0 4px; }
.tl-head, .tl-row { grid-template-columns: 110px minmax(0, 1fr); } .tl-months span:nth-child(even) { color: transparent; }
}
/* ---------- Phone layout ---------- */
@media (max-width: 640px) {
/* Pages in a tab bar along the bottom, clear of the home bar; the top keeps the name, search, theme and year. */
header nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; order: 0; margin: 0; padding: 6px 4px max(6px, env(safe-area-inset-bottom));
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; background: var(--header); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
border-top: 1px solid var(--line); overflow: visible; }
header nav a { flex-direction: column; gap: 3px; padding: 6px 0; font-size: 9.5px; min-width: 0; border-radius: 10px; justify-content: center; }
header nav a .ic { width: 21px; height: 21px; }
header nav a.active { background: none; box-shadow: none; color: var(--ink); }
/* A blurred header would hold the fixed tab bar inside it, so on a phone the header is plain. */
header { padding-bottom: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
#toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
/* Register lines as cards: payee and amount on top, date, category and balance below; swipe left for actions. */
.reg-inline table.fixed { min-width: 0; table-layout: auto; }
.reg-inline thead, .reg-inline colgroup { display: none; }
.reg-inline tbody tr[data-edit] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 30px; grid-template-areas: "payee payee amt clr" "date cat bal clr"; column-gap: 8px;
padding: 9px 2px; border-bottom: 1px solid var(--line); touch-action: pan-y; transition: transform .15s ease; background: var(--panel); }
.reg-inline tbody tr[data-edit] td { border: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-inline td[data-k="pick"], .reg-inline td[data-k="memo"] { display: none; }
.reg-inline td[data-k="payee"] { grid-area: payee; font-weight: 500; }
.reg-inline td[data-k="out"], .reg-inline td[data-k="in"] { grid-area: amt; text-align: right; font-weight: 600; }
.reg-inline td[data-k="out"]:empty, .reg-inline td[data-k="in"]:empty { display: none; }
.reg-inline td[data-k="out"]:not(:empty)::before { content: '−'; }
.reg-inline td[data-k="date"] { grid-area: date; font-size: 12px; color: var(--muted); }
.reg-inline td[data-k="category"] { grid-area: cat; font-size: 12px; color: var(--muted); }
.reg-inline td[data-k="category"]::before { content: '· '; }
.reg-inline td[data-k="balance"] { grid-area: bal; font-size: 12px; text-align: right; color: var(--muted); }
.reg-inline td[data-k="clr"] { grid-area: clr; align-self: center; text-align: center; }
.reg-inline tr.tx-edit { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px; }
.reg-inline tr.tx-edit td { display: block; padding: 0; }
.reg-inline tr.tx-edit td:empty { display: none; }
.reg-inline tr.tx-edit td:first-child { box-shadow: none; }
.bulk-bar.idle { display: none; }
.sheet-actions { display: grid; gap: 8px; }
.sheet-actions .btn { height: 46px; justify-content: flex-start; font-size: 15px; }
}
.sheet-actions { display: grid; gap: 8px; }
@media (max-width: 640px) {
/* The account header's figures wrap instead of pushing the page wider than the screen. */
.banner { overflow: hidden; }
.banner-cash { flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.banner-cash .banner-amount { flex: 1 0 auto; }
.banner-cash .banner-sched { flex-basis: 100%; }
.reg-inline table, .reg-inline tbody { display: block; width: 100%; }
}
/* People */
span.mono { font-variant-numeric: tabular-nums; color: var(--muted); }
/* Projects: pipeline board. */
.cal-nav[hidden], #f-pv-pick[hidden], .dash-note[hidden] { display: none !important; }
.pboard { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.pb-col { flex: 1 1 230px; min-width: 210px; }
.pb-col.pb-none { flex: 0 1 130px; min-width: 110px; }
.pb-col { background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 160px; transition: border-color .12s, background .12s; }
.pb-col.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--field)); }
.pb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px 10px; font-size: 12.5px; }
.pb-head b { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pb-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-card { background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: grab; display: grid; gap: 6px; font-size: 12.5px; transition: border-color .12s, transform .12s, opacity .12s; }
.pb-card:hover { border-color: var(--line-strong); }
.pb-card.dragging { opacity: .5; transform: scale(.98); }
.pb-top { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; }
.pb-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* The rating sits at the right end of the name line */
.pb-top .pb-rate { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.pb-rate .rt-down { margin: 0; }
.pb-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.pb-nums { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.pb-budget { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; }
.pb-flags { display: flex; gap: 4px; flex-wrap: wrap; }
.pb-next { font-size: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
.pb-empty { padding: 10px 4px; font-size: 12px; }
/* Projects: one project. */
.pj-banner { align-items: flex-start; }
.pj-stepper { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 720px; }
.pj-stepper li { display: grid; gap: 3px; font-size: 11.5px; color: var(--faint); min-width: 0; }
.pj-stepper i { height: 4px; border-radius: 2px; background: var(--chip); }
.pj-stepper li.done i { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.pj-stepper li.now i { background: var(--accent); box-shadow: 0 0 10px rgb(232 116 63 / .45); }
.pj-stepper li.now b, .pj-stepper li.done b { color: var(--ink); }
.pj-stepper b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-stepper span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pj-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.pj-grid > .panel, .pj-grid .dash-col > .panel { margin: 0 0 18px; }
.pj-grid > .panel { margin: 0; }
@media (min-width: 1200px) { .pj-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .pj-wide { grid-column: 1 / -1; } }
/* Ultra-wide: three columns. The deal over cost over time, the rating and next step, and the activity side by side.
Charts stop growing past a readable height. */
@media (min-width: 2200px) {
.pj-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.pj-grid > .pj-deal { grid-column: 1; grid-row: 1; }
.pj-grid > .dash-col { grid-column: 2; grid-row: 1 / span 2; }
.pj-grid > .pj-cost { grid-column: 1; grid-row: 2; }
.pj-grid > .pj-activity { grid-column: 3; grid-row: 1 / span 2; }
.pj-grid > .pj-activity .dash-scroll { max-height: 820px; }
.pj-grid svg.viz { max-height: 330px; }
}
.pj-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pj-kpis > div { display: grid; gap: 1px; }
.pj-kpis span { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.pj-kpis b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pj-kpis em { font-style: normal; font-size: 11.5px; color: var(--faint); }
.wf-cost { fill: var(--viz-2); } .wf-total { fill: var(--viz-base); } .wf-sale { fill: var(--viz-1); } .wf-pos { fill: var(--viz-3); } .wf-neg { fill: var(--viz-neg); }
.wf-plan { stroke: var(--viz-4); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pj-progress { height: 4px; border-radius: 2px; background: var(--chip); overflow: hidden; margin: 2px 0 14px; }
.pj-progress i { display: block; height: 100%; background: var(--good); }
.pj-next-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.pj-next-step .muted { font-size: 12.5px; margin-top: 2px; }
.pj-next-amt { margin-top: 6px; font-variant-numeric: tabular-nums; font-size: 13px; }
.pj-next-act { margin: 12px 0 0 40px; justify-content: flex-start; }
.pj-more { display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--accent); text-decoration: none; }
.pj-money { grid-template-columns: minmax(0, 1fr); }
.pj-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.pj-legend i { width: 10px; height: 6px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.bl-table { min-width: 720px; }
.bl-table td { vertical-align: middle; }
.bl-in, .bl-new { width: 100%; min-width: 0; padding: 4px 7px; }
.bl-in.num, .bl-new.num { text-align: right; font-variant-numeric: tabular-nums; max-width: 130px; margin-left: auto; display: block; }
.bl-bar { display: flex; height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; min-width: 60px; }
.bl-bar i { display: block; height: 100%; }
.bl-spent { background: var(--viz-1); } .bl-com { background: color-mix(in srgb, var(--viz-1) 40%, transparent); }
.bl-bar.over .bl-spent { background: var(--bad); }
.bl-none td { color: var(--muted); font-style: italic; }
.bl-add td { border-bottom: 0; padding-top: 10px; }
.pj-assign { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pj-assign summary { cursor: pointer; font-weight: 500; display: flex; gap: 10px; align-items: baseline; }
.pj-assign table { margin-top: 8px; }
.pj-assign select { max-width: 200px; }
.pj-who { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pj-hold { margin-top: 10px; font-size: 13px; color: var(--muted); }
.pj-hold b { color: var(--ink); font-variant-numeric: tabular-nums; }
.closeout { margin-top: 18px; }
.closeout > summary { display: flex; gap: 12px; align-items: baseline; cursor: pointer; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); list-style: none; }
.closeout > summary::-webkit-details-marker { display: none; }
.closeout > summary::before { content: '›'; color: var(--muted); transition: transform .15s; display: inline-block; }
.closeout[open] > summary::before { transform: rotate(90deg); }
.closeout[open] > summary { border-radius: 12px 12px 0 0; border-bottom: 0; }
.closeout > .panel { border-radius: 0 0 12px 12px; }
@media (max-width: 640px) { .pj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pj-stepper span { display: none; }
.pboard { flex-direction: column; } .pb-col { flex: none; min-width: 0; min-height: 0; } .pb-col.pb-none { display: none; } }
.bl-pos { font-size: 12px; line-height: 1.9; }
.bl-pos a { font-weight: 600; }
.doc-desc { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Prospect worksheet. */
.ws-inputs h2 { margin: 14px 0 8px; } .ws-inputs h2:first-child { margin-top: 0; }
.ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.ws-field { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.ws-in { position: relative; display: flex; align-items: center; gap: 6px; }
.ws-in input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.ws-in.money-in > span { left: 9px; }
.ws-in.money-in input { padding-left: 20px; }
.ws-in em { font-style: normal; color: var(--faint); font-size: 12px; white-space: nowrap; }
.ws-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--ink); }
.ws-sum .ws-total, .ws-trades .ws-total td { font-weight: 600; }
.ws-sum .ws-total dt { color: var(--ink); }
.ws-offer { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--chip); font-size: 13px; }
.ws-trades { max-width: 560px; }
.ws-trades td:first-child { width: 60%; }
.ws-trades .money-in input { max-width: 150px; margin-left: auto; display: block; padding-left: 20px; text-align: right; }
.ws-trades tfoot td { font-weight: 500; }
.tl-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.tl-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.cap-list.ws-sum { grid-template-columns: minmax(0, 1fr); }
.ws-sum dt { white-space: normal; }
/* Prospect worksheet: the estimate from past flips, and the flips it's based on */
.ws-est { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.ws-est b { color: var(--ink); font-weight: 600; }
.ws-comps { margin-top: 6px; }
.ws-comps summary { cursor: pointer; color: var(--accent); width: max-content; max-width: 100%; }
.ws-comps-t { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 12px; }
.ws-comps-t th, .ws-comps-t td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ws-comps-t .num { text-align: right; font-variant-numeric: tabular-nums; }
.ws-comps-t th { color: var(--faint); font-weight: 500; }
.ws-trades input::placeholder { color: var(--faint); font-style: italic; }
@media (max-width: 700px) { .ws-comps-t { display: block; overflow-x: auto; } .ws-trades td:first-child { width: auto; } .ws-trades .money-in input { width: 130px; } }
/* Ratings: the score circle, its parts, and the pill. Each grade has its own solid color with white text, in both
themes (every one is dark enough for white text to read). */
:root { --grade-A: #15803d; --grade-B: #2563eb; --grade-C: #64748b; --grade-D: #c2410c; --grade-F: #b91c1c; }
.rt-A { --rt: var(--grade-A); } .rt-B { --rt: var(--grade-B); } .rt-C { --rt: var(--grade-C); } .rt-D { --rt: var(--grade-D); } .rt-F { --rt: var(--grade-F); }
.rt-wrap { display: flex; gap: 20px; align-items: flex-start; margin-top: 10px; }
.rt-score { flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--rt); color: #fff; }
.rt-score b { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.rt-score span { font-size: 13px; color: #fff; font-weight: 600; margin-top: 2px; opacity: .9; }
.rt-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 999px; background: var(--rt); color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rt-mini { font-size: 11px; padding: 3px 7px; margin-right: 2px; }
.rt-down { font-size: 11px; font-weight: 600; margin-left: 4px; }
.rt-then { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.rt-parts { flex: 1; min-width: 0; width: 100%; border-collapse: collapse; font-size: 13px; }
.rt-parts th, .rt-parts td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rt-parts th { color: var(--faint); font-weight: 500; font-size: 12px; }
.rt-parts .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-parts td .muted { font-size: 11px; }
.rt-parts td:nth-child(4) { white-space: nowrap; }
.rt-bar { display: inline-block; vertical-align: middle; width: 56px; height: 6px; border-radius: 3px; background: var(--line-strong); overflow: hidden; }
.rt-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
/* The rating panel lays itself out by its own width (it can sit in a narrow column of a project page). */
.panel:has(> .rt-wrap) { container-type: inline-size; }
@container (max-width: 760px) { .rt-parts td:first-child .muted { display: none; } }
@container (max-width: 600px) { .rt-wrap { flex-direction: column; align-items: center; } .rt-parts { width: 100%; font-size: 12px; } .rt-bar { width: 36px; }
.rt-parts th, .rt-parts td { padding: 6px 4px; } .rt-parts th:nth-child(5), .rt-parts td:nth-child(5) { display: none; } .rt-parts td:nth-child(4) .muted { display: none; } }
@media (max-width: 700px) { .rt-wrap { flex-direction: column; align-items: center; } .rt-parts { width: 100%; } .rt-parts td:first-child .muted { display: none; } .rt-bar { width: 36px; } .rt-parts { font-size: 12px; } .rt-parts th, .rt-parts td { padding: 6px 4px; } .rt-parts th:nth-child(5), .rt-parts td:nth-child(5) { display: none; } .rt-parts td:nth-child(4) .muted { display: none; } }
/* ---------- Screens: iPad (status bar), ultra-wide ---------- */
/* Installed on an iPad or iPhone home screen, the page runs under the status bar, which iPadOS blurs along with a
band below it. A strip of the page's own color sits there, and the sidebar and page start below it. Elsewhere
the inset is 0, so nothing changes. */
:root { --top-safe: calc(env(safe-area-inset-top, 0px) * 1.6); }
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--top-safe); background: var(--bg); z-index: 40; pointer-events: none; }
@media (min-width: 901px) {
header { padding-top: calc(18px + var(--top-safe)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
main { padding-top: calc(28px + var(--top-safe)); }
.tree { top: calc(16px + var(--top-safe)); max-height: calc(100vh - 32px - var(--top-safe)); }
.bulk-bar { top: calc(12px + var(--top-safe)); }
}
/* Fingers instead of a mouse (the iPad): bigger targets for rows, buttons and the register. */
@media (pointer: coarse) {
.btn, nav a, select, input:not([type="checkbox"]):not([type="radio"]) { min-height: 36px; }
.btn.small { min-height: 32px; }
td, th { padding-top: 9px; padding-bottom: 9px; }
.col-grip { width: 14px; }
}
/* Ultra-wide: use the whole width. The dashboard takes three columns; a company's page in the
Ledger puts its sections side by side (an account's register stays full width). */
@media (min-width: 2560px) {
main { max-width: none; }
.dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ledger-main:not(:has([data-inline])) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.ledger-main:not(:has([data-inline])) > :is(.crumbs, .banner, .row, .hint, .bulk-bar) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
/* The bar wraps onto a second row (iPad portrait); it grows with it instead of covering the page. */
header { padding-top: calc(8px + var(--top-safe)); padding-bottom: 8px; height: auto; min-height: calc(52px + var(--top-safe)); row-gap: 6px; }
.tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
header { height: auto; padding-top: calc(10px + var(--top-safe)); }
}
.person-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.person-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Form fields line up: every one-line field in an edit panel is the same height, and date fields (which Safari
draws its own way: taller, narrower, the date centered) fill their width with the date on the left. */
dialog label > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]), select) { height: 34px; }
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; line-height: 1.4; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.4em; }
input[type="date"]::-webkit-datetime-edit { padding: 0; }
@media (pointer: coarse) { dialog label > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]), select) { height: 40px; } }
/* ---------- Garden (public/garden.js) ---------- */
.g-head .seg { margin-left: 8px; }
.g-note { margin: -6px 0 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--chip); font-size: 13px; color: var(--muted); }
.g-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1100px) { .g-wrap { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); } }
@media (min-width: 2200px) { .g-wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); max-width: 2600px; } }
.g-wrap > .panel { margin: 0; }
.g-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g-map { display: block; width: 100%; min-width: 560px; max-height: 78vh; user-select: none; -webkit-user-select: none; }
.g-yard { fill: color-mix(in srgb, var(--viz-3) 6%, var(--panel)); }
.g-map line, .g-tick, .g-bed-name, .g-pl, .g-sq { pointer-events: none; }
.g-g1 { stroke: var(--line); stroke-width: .6; opacity: .55; }
.g-g5 { stroke: var(--line-strong); stroke-width: .8; opacity: .7; }
.g-tick { font: 10px Inter, system-ui, sans-serif; fill: var(--faint); }
.g-bed { cursor: pointer; }
.g-map.arranging .g-bed { cursor: grab; touch-action: none; }
.g-bed-r { fill: color-mix(in srgb, var(--c) 20%, var(--panel)); stroke: var(--c); stroke-width: 1.5; }
.g-bed:hover .g-bed-r { fill: color-mix(in srgb, var(--c) 30%, var(--panel)); }
.g-bed.on .g-bed-r { stroke: var(--ink); stroke-width: 3; }
.g-k0 { --c: var(--viz-2); } .g-k1 { --c: #8a6a3a; } .g-k2 { --c: var(--viz-4); } .g-k3 { --c: var(--viz-3); }
.g-k4 { --c: var(--faint); } .g-k4 .g-bed-r { stroke-dasharray: 4 3; } .g-k5 { --c: var(--muted); }
.g-k6 { --c: var(--viz-4); } .g-k6 .g-bed-r { fill: color-mix(in srgb, var(--viz-4) 12%, var(--panel)); stroke-dasharray: 2 3; }
.g-sq line { stroke: var(--c); stroke-width: .6; opacity: .45; }
.g-pl rect { fill: color-mix(in srgb, var(--viz-3) 22%, var(--panel)); }
.g-bed-name { font: 600 11px Inter, system-ui, sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.g-handle { fill: var(--accent); stroke: var(--panel); stroke-width: 2; cursor: nwse-resize; touch-action: none; }
.g-hint { font-size: 12.5px; margin-top: 8px; }
.g-side h2 { margin-top: 0; }
.g-beds { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.g-bedcard { display: grid; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--ink); font: inherit; cursor: pointer; }
.g-bedcard:hover { background: var(--hover); }
.g-bedcard .muted { font-size: 12px; } .g-icons { font-size: 18px; letter-spacing: 2px; }
.g-bedhead { margin-bottom: 8px; } .g-notes { margin: 0 0 10px; font-size: 13px; }
.g-pal { display: flex; flex-wrap: wrap; gap: 6px; max-height: 148px; overflow-y: auto; padding: 2px; margin-bottom: 6px; }
.g-chip { border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.g-chip:hover { background: var(--hover); }
.g-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.g-erase { color: var(--bad); }
.g-grid { display: grid; gap: 3px; margin: 10px 0 12px; max-width: 520px; }
.g-cell { aspect-ratio: 1; min-width: 0; border: 1px dashed var(--line-strong); border-radius: 6px; background: color-mix(in srgb, #8a6a3a 10%, var(--panel)); cursor: pointer; padding: 0; position: relative; font: inherit; color: var(--ink); }
.g-cell:hover { background: var(--hover); }
.g-full { border-style: solid; border-color: color-mix(in srgb, var(--viz-3) 45%, transparent); background: color-mix(in srgb, var(--viz-3) 14%, var(--panel)); display: grid; place-items: center; container-type: size; }
.g-full.g-s0 { background: color-mix(in srgb, var(--viz-3) 6%, var(--panel)); border-style: dashed; }
.g-full.g-s4 { opacity: .5; }
.g-ci { font-size: clamp(14px, 55cqmin, 64px); line-height: 1; }
.g-cn { position: absolute; right: 4px; bottom: 2px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-copy { margin-bottom: 10px; }
.g-list { width: 100%; border-collapse: collapse; font-size: 13.5px; } .g-list th { text-align: left; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; padding: 4px 6px; }
.g-list td { padding: 7px 6px; border-top: 1px solid var(--line); } .g-list .num { text-align: right; font-variant-numeric: tabular-nums; }
.g-tasks ul { list-style: none; margin: 0; padding: 0; } .g-tasks li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.g-tasks li:first-child { border-top: 0; } .g-tasks li > span:nth-child(2) { flex: 1; }
.g-when { width: 92px; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; } .g-when.late { color: var(--warn); }
.gc { display: grid; gap: 2px; }
.gc-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 30px; }
.gc-name { display: grid; font-size: 13.5px; line-height: 1.25; min-width: 0; } .gc-name span, .gc-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gc-name small { font-size: 11.5px; }
.gc-track { position: relative; height: 22px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 12)); }
.gc-row:not(.gc-months):hover .gc-track { background-color: var(--hover); }
.gc-months .gc-track { background: none; height: 18px; } .gc-months span { position: absolute; font-size: 11px; color: var(--faint); padding-left: 3px; }
.gc-track > i { position: absolute; top: 4px; height: 14px; border-radius: 4px; }
.gc-in { background: var(--viz-4); } .gc-grow { background: color-mix(in srgb, var(--viz-3) 45%, transparent); } .gc-har { background: var(--viz-3); }
.gc-track > i + i { margin-left: 1px; }
.gc-frost { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1.5px dashed var(--viz-1); opacity: .8; }
.gc-today { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--bad); border-radius: 1px; }
.gc-legend { flex-wrap: wrap; margin-top: 12px; }
.gc-key-frost { display: inline-block; width: 0; height: 12px; border-left: 1.5px dashed var(--viz-1); } .gc-key-today { display: inline-block; width: 2px; height: 12px; background: var(--bad); }
@media (max-width: 700px) { .gc-row { grid-template-columns: 96px minmax(0, 1fr); gap: 6px; } .gc-name small { display: none; } .gc-months span { font-size: 9.5px; padding-left: 1px; } .g-when { width: 70px; } .g-tasks li { flex-wrap: wrap; } }
.g-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.g-bars { display: grid; gap: 8px; } .g-barrow { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 13.5px; }
.g-barrow b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.g-bar { height: 10px; border-radius: 0 4px 4px 0; background: var(--line); overflow: hidden; } .g-bar i { display: block; height: 100%; background: var(--viz-3); border-radius: 0 4px 4px 0; }
.g-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.g-entry { display: flex; gap: 12px; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; cursor: pointer; align-items: flex-start; }
.g-entry:hover { background: var(--hover); }
.g-entry img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; flex: none; }
.g-entry-t { display: grid; gap: 4px; min-width: 0; font-size: 13.5px; } .g-entry-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g-entry-n { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g-photo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .g-photo img { width: 120px; max-height: 120px; object-fit: cover; border-radius: 8px; display: block; }
.g-photo label.btn { cursor: pointer; }
/* Ledger: the total of the ticked entries beside the heading, and the date range picker. */
.pick-sum { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.pick-sum:empty { display: none; }
.pick-sum b { color: var(--ink); font-weight: 600; }
.when-range { display: inline-flex; align-items: center; gap: 6px; }
.when-range input { width: 9.5em; }
/* Insights › Tax estimate */
table.pnl.tax-build { min-width: 0; width: 100%; }
.tax-build td:first-child { min-width: 0; }
.tax-build td.num, .tax-build th.num { width: 130px; }
.tax-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.tax-grid .dash-col > .panel { margin: 0 0 16px; }
.tax-due { max-height: none; } .tax-due li { display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); } .tax-due li:first-child { border-top: 0; }
.tax-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tax-fields label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { .tax-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .tax-fields { grid-template-columns: minmax(0, 1fr); } }
/* A chicken run around the garden: a band along its edge; clicks inside it go to the yard or the beds. */
.g-ring { fill: none; stroke: color-mix(in srgb, var(--viz-4) 22%, var(--panel)); pointer-events: stroke; }
.g-bed .g-ring-edge, .g-bed:hover .g-ring-edge { fill: none; stroke-dasharray: 2 3; pointer-events: none; }
.g-bed.on .g-ring + .g-ring-edge { stroke: var(--ink); stroke-dasharray: none; }
/* Garden quads: sections that take turns resting; the resting one is hatched (the chickens' turn). */
.g-k7 { --c: var(--muted); } .g-k7 .g-bed-r { fill: transparent; stroke-dasharray: 6 4; stroke-width: 1.2; }
.g-k7:hover .g-bed-r { fill: color-mix(in srgb, var(--muted) 6%, transparent); }
.g-bed.g-rest .g-bed-r { fill: url(#g-hatch); stroke: var(--viz-4); }
.g-hatch-bg { fill: color-mix(in srgb, var(--viz-4) 8%, var(--panel)); } .g-hatch-line { stroke: color-mix(in srgb, var(--viz-4) 35%, transparent); stroke-width: 3; }
.g-quad-name { font-size: 13px; fill: var(--muted); stroke-width: 4px; }
.g-rest .g-quad-name { fill: var(--ink); }
.g-north path { fill: var(--muted); } .g-north text { font: 600 11px Inter, system-ui, sans-serif; fill: var(--muted); }
.g-sub { font-size: 13px; color: var(--muted); font-weight: 600; margin: 16px 0 8px; }
.g-quadstate p { margin: 0 0 10px; }
.g-rest-note { margin: 0 0 10px; color: var(--ink); border-color: color-mix(in srgb, var(--viz-4) 45%, var(--line)); }
/* Map labels grow with the yard (--gk), since a bigger yard is drawn at a smaller scale. */
.g-map .g-tick { font-size: calc(10px * var(--gk, 1)); }
.g-map .g-bed-name { font-size: calc(11px * var(--gk, 1)); stroke-width: calc(3px * var(--gk, 1)); }
.g-map .g-quad-name { font-size: calc(13px * var(--gk, 1)); }
/* Garden planting plan: every square foot is a cell to select; plants and raised beds are drawn over their squares. */
.g-plan-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.g-plan { display: grid; gap: 2px; position: relative; user-select: none; -webkit-user-select: none; touch-action: none; }
.g-c { aspect-ratio: 1; min-width: 0; border-radius: 3px; background: color-mix(in srgb, #8a6a3a 16%, var(--panel)); cursor: pointer; }
.g-plan.big .g-c { border-radius: 2px; }
.g-c:hover { background: color-mix(in srgb, #8a6a3a 28%, var(--panel)); }
.g-c.raised { background: color-mix(in srgb, var(--viz-2) 20%, var(--panel)); }
.g-c.blocked { background: var(--chip); cursor: default; }
.g-c.sel { background: color-mix(in srgb, var(--accent) 55%, var(--panel)); }
.g-plan.adding .g-c.pv { background: color-mix(in srgb, var(--accent) 40%, var(--panel)); }
.g-plan.removing .g-c.pv.sel { background: color-mix(in srgb, #8a6a3a 20%, var(--panel)); }
.g-bedbox { pointer-events: none; z-index: 1; border: 2px solid color-mix(in srgb, var(--viz-2) 80%, transparent); border-radius: 4px; margin: -2px; position: relative; }
.g-bedbox span { position: absolute; left: 3px; top: -1.35em; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.g-bedbox.blocked { border-color: var(--line-strong); border-style: dashed; }
.g-pl2 { pointer-events: none; z-index: 2; display: grid; place-items: center; position: relative; container-type: size; border-radius: 3px; background: color-mix(in srgb, var(--viz-3) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--viz-3) 45%, transparent); }
.g-pl2.g-s0 { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--viz-3) 30%, transparent); }
.g-pl2.g-s4 { opacity: .45; }
.g-pl2 .g-ci { font-size: clamp(9px, 62cqmin, 64px); line-height: 1; }
.g-pl2 .g-cn { position: absolute; right: 2px; bottom: 0; font-size: clamp(7px, 26cqmin, 11px); color: var(--muted); }
.g-selbar { position: sticky; top: 0; z-index: 5; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.g-selbar.idle { box-shadow: none; border-style: dashed; font-size: 13px; }
.g-selbar .g-pal { margin-top: 8px; max-height: 158px; }
.g-chip i { font-style: normal; font-weight: 700; margin-right: 4px; }
.g-chip.good { border-color: color-mix(in srgb, var(--good) 60%, var(--line-strong)); } .g-chip.good i { color: var(--good); }
.g-chip.rot { border-color: color-mix(in srgb, var(--warn) 60%, var(--line-strong)); } .g-chip.rot i { color: var(--warn); }
.g-chip.bad { opacity: .75; border-color: color-mix(in srgb, var(--bad) 55%, var(--line-strong)); } .g-chip.bad i { color: var(--bad); }
.g-key { margin-left: 10px; white-space: nowrap; } .g-key.good { color: var(--good); } .g-key.rot { color: var(--warn); } .g-key.bad { color: var(--bad); }
.g-planbtns { margin: 0 0 10px; }
.g-planpage { margin-bottom: 18px; }
.g-plan-below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.g-plan-below > .panel { margin: 0; }
@media (max-width: 900px) { .g-plan-below { grid-template-columns: minmax(0, 1fr); } }
.g-advice { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.g-advice li { padding: 6px 10px; border-radius: 7px; border-left: 3px solid var(--line-strong); background: var(--field); }
.g-advice li.bad { border-left-color: var(--bad); } .g-advice li.rot { border-left-color: var(--warn); } .g-advice li.good { border-left-color: var(--good); }
/* Garden plan: suggestions grouped in words, undo, and per-line take-out. */
.g-sug { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.g-sug-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; margin-bottom: 2px; }
.g-sug-h .muted { font-size: 12px; }
.g-sug.good .g-sug-h b { color: var(--good); } .g-sug.bad .g-sug-h b { color: var(--bad); }
.g-sug .g-pal { margin-top: 4px; max-height: none; }
.g-sug.good .g-chip { border-color: color-mix(in srgb, var(--good) 55%, var(--line-strong)); }
.g-sug.bad .g-chip { border-color: color-mix(in srgb, var(--bad) 45%, var(--line-strong)); opacity: .85; }
.g-chip2 { display: inline-grid; gap: 1px; border-radius: 12px; text-align: left; white-space: normal; max-width: 240px; padding: 5px 11px; }
.g-chip2 small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.g-undo span { color: var(--muted); font-weight: 400; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
@media (max-width: 700px) { .g-undo span { display: none; } }
.g-list td.g-x { width: 1%; white-space: nowrap; text-align: right; }
.g-bedlist { list-style: none; margin: 0; padding: 0; } .g-bedlist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.g-selbar .g-sug .g-pal { max-height: 180px; overflow-y: auto; }
.g-selbar:not(.idle) { max-height: 46vh; overflow-y: auto; }
/* Garden › Season plan */
.g-season { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.g-season > .panel, .g-season .dash-col > .panel { margin: 0 0 18px; }
@media (max-width: 1000px) { .g-season { grid-template-columns: minmax(0, 1fr); } }
.g-kinds { display: flex; gap: 2px; height: 28px; border-radius: 6px; overflow: hidden; margin: 6px 0 8px; }
.g-kind { display: flex; align-items: center; padding: 0 8px; font-size: 11.5px; color: #fff; white-space: nowrap; overflow: hidden; min-width: 4px; }
.g-kind-0 { background: var(--viz-2); } .g-kind-1 { background: var(--viz-3); } .g-kind-2 { background: #8a6a3a; } .g-kind-3 { background: var(--viz-5); }
.g-kind-4 { background: var(--viz-1); } .g-kind-5 { background: color-mix(in srgb, var(--viz-3) 60%, #222); } .g-kind-6 { background: var(--viz-4); } .g-kind-7 { background: var(--muted); }
.g-kind-legend { flex-wrap: wrap; margin-bottom: 4px; }
.g-amts { list-style: none; margin: 0; padding: 0; } .g-amts li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 70px auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.g-amts li:first-child { border-top: 0; } .g-amts .num { text-align: right; font-variant-numeric: tabular-nums; }
.g-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.g-morecard { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); font-size: 13px; }
.g-morecard .btn { justify-self: start; }
.g-dragsize { position: fixed; z-index: 60; pointer-events: none; background: var(--raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; padding: 3px 8px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 4px 12px rgb(0 0 0 / .25); }
/* Garden plan: what's in the selected squares, letters for plants sharing an icon, and the key. */
.g-insel { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 8px; font-size: 13.5px; }
.g-inselitem .muted { font-size: 12px; }
.g-tag { position: absolute; left: 1px; top: 0; font-size: clamp(7px, 30cqmin, 12px); font-weight: 700; line-height: 1; color: var(--ink); background: color-mix(in srgb, var(--panel) 75%, transparent); border-radius: 3px; padding: 1px 2px; }
.g-keyrow { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 13px; margin: 2px 0 6px; }
.g-keyitem sup { font-size: 10px; font-weight: 700; margin-left: 1px; }
/* The quad plan's panels below the grid: the whole garden's plan, this quad's plants, suggestions. */
.g-plan-below { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.g-wholeplan .g-sug:first-of-type { border-top: 0; }
/* Garden › Plan it for me */
.g-wiz { max-width: 1400px; }
.gw-table { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.gw-table td, .gw-table th { padding: 5px 8px; border-top: 1px solid var(--line); } .gw-table th { text-align: left; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.gw-table .num { text-align: right; } .gw-kind td { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding-top: 14px; border-top: 0; }
.gw-count { width: 76px; text-align: right; }
.gw-total { font-size: 13px; }
.gw-quads { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.gw-quad { display: grid; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--ink); font: inherit; cursor: pointer; }
.gw-quad.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.gw-quadgrids { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.gw-q b { display: block; margin-bottom: 4px; font-size: 13px; }
.gw-grid { display: grid; gap: 1px; aspect-ratio: 1; }
.gw-grid i { background: color-mix(in srgb, #8a6a3a 18%, var(--panel)); border-radius: 1px; }
.gw-grid i.p { background: var(--panel); } .gw-grid i.r { background: color-mix(in srgb, var(--viz-2) 22%, var(--panel)); } .gw-grid i.b { background: var(--chip); }
.gw-pl { display: grid; place-items: center; font-size: clamp(7px, 1.1vw, 15px); line-height: 1; background: color-mix(in srgb, var(--viz-3) 22%, var(--panel)); border-radius: 2px; z-index: 1; overflow: hidden; }
.gw-pl.kept { opacity: .45; background: none; }
/* Garden: paths in a plan, and the water layer. */
.g-c.blocked.path { background: color-mix(in srgb, var(--muted) 18%, var(--panel)); cursor: pointer; }
.g-c.blocked.path.sel { background: color-mix(in srgb, var(--accent) 45%, var(--panel)); }
.g-map.watering .g-bed { pointer-events: none; opacity: .75; }
.g-map.drawing { cursor: crosshair; }
.g-water .g-wl { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g-water .g-whit { fill: none; stroke: transparent; cursor: pointer; }
.g-wr { cursor: pointer; } .g-map.drawing .g-wr { pointer-events: none; }
.g-wr.on .g-wl { filter: drop-shadow(0 0 3px var(--ink)); }
.g-spray { fill: color-mix(in srgb, var(--wc) 14%, transparent); stroke: color-mix(in srgb, var(--wc) 55%, transparent); stroke-width: 1; stroke-dasharray: 4 3; }
.g-wr.on .g-spray { fill: color-mix(in srgb, var(--wc) 24%, transparent); }
.g-wpt { stroke: var(--panel); stroke-width: 1.5; }
.g-wdraft { fill: none; stroke-dasharray: 5 4; stroke-linecap: round; pointer-events: none; }
.g-wdot { fill: var(--ink); pointer-events: none; }
.g-wkey { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.g-wsel { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--field); display: grid; gap: 6px; font-size: 13.5px; }
.g-wtot { font-size: 13px; margin: 10px 0; }
.g-wzone { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .g-wzone .muted { font-size: 12px; }
.g-wruns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .g-wruns .g-chip { font-size: 12px; padding: 3px 9px; }
.g-plan-water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.gw-grid { position: relative; }
.gw-drip { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.gw-drip polyline { fill: none; stroke: #3987e5; stroke-width: .18; stroke-linecap: round; }
.gw-opts { display: grid; gap: 6px; margin-top: 10px; }
.gw-opt { text-align: left; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; padding: 2px 0; }
/* Garden water: the parts list */
.g-partsbox { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.g-parts { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.g-parts th { text-align: left; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; padding: 4px 6px; }
.g-parts td { padding: 6px; border-top: 1px solid var(--line); vertical-align: top; } .g-parts .num { text-align: right; white-space: nowrap; }
.g-parts td .muted { font-size: 11.5px; } .g-parts td:last-child { min-width: 90px; }
.g-partzones { margin-top: 10px; font-size: 13px; } .g-partzones summary { cursor: pointer; } .g-partzones h4 { margin: 12px 0 0; font-size: 13px; }
.g-parts { table-layout: fixed; } .g-parts th:nth-child(2) { width: 62px; } .g-parts th:nth-child(3) { width: 34%; } .g-parts td { overflow-wrap: anywhere; } .g-parts td:last-child { min-width: 0; }
.g-parts td, .g-parts th { white-space: normal; overflow: visible; text-overflow: clip; }
.gw-dims { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; }
.gw-dims label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.gw-dims label > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.gw-dim { width: 60px; text-align: right; }
/* Garden water: sprinkler controls and the watering wizard */
.g-wctl { display: grid; gap: 8px; }
.g-wctl .seg button { padding: 3px 10px; }
.g-wrad { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.g-wrad input[type=range] { width: 100%; accent-color: #3987e5; }
.g-wwiz .gw-quads { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.g-wwiz .seg { flex-wrap: wrap; }
.g-wwiz .gw-dims label > span { white-space: nowrap; }
.gw-need { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13.5px; }
.gw-need .muted { font-size: 12px; }
/* Water over a plan: a dark outline under a bright line so it shows on soil and plants; emitters as dots. */
.g-plan-water { --wline: #5fb6ff; --wsoak: #ff8fc8; --wsup: #9fc3e6; }
:root[data-theme="light"] .g-plan-water { --wline: #0b6fd6; --wsoak: #c0307a; --wsup: #3d6a96; }
.g-pw, .g-pw-halo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g-pw-halo { stroke: rgb(0 0 0 / .7); stroke-width: 7; } :root[data-theme="light"] .g-pw-halo { stroke: rgb(255 255 255 / .9); }
.g-pw { stroke: var(--wline); stroke-width: 3.5; } .g-pw.soak { stroke: var(--wsoak); stroke-dasharray: 8 5; } .g-pw.sup { stroke: var(--wsup); stroke-width: 5; }
.g-pw-halo.sup { stroke-width: 9; }
.g-pw-emit { fill: #fff; stroke: var(--wline); stroke-width: .06; } :root[data-theme="light"] .g-pw-emit { fill: var(--wline); stroke: #fff; }
.g-pw-spray { fill: color-mix(in srgb, var(--wline) 16%, transparent); stroke: var(--wline); stroke-width: 2; stroke-dasharray: 6 4; }
.g-pw-halo-pt { fill: rgb(0 0 0 / .7); } .g-pw-pt.spr { fill: var(--wline); } .g-pw-pt.src { fill: #f0b400; }
/* Water on the map: the same colors as on a plan; beds and plants fade back while the layer is on. */
.g-water { --wline: #5fb6ff; --wsoak: #ff8fc8; --wsup: #9fc3e6; }
:root[data-theme="light"] .g-water { --wline: #0b6fd6; --wsoak: #c0307a; --wsup: #3d6a96; }
.g-water .g-pw, .g-water .g-pw-halo { stroke-width: inherit; }
.g-water .g-pw-emit { stroke-width: .6; }
.g-map.watering .g-bed { opacity: .55; }
.g-water .g-spray { fill: color-mix(in srgb, var(--wline) 14%, transparent); stroke: var(--wline); stroke-width: 1.5; }
.g-wr.on .g-pw { filter: drop-shadow(0 0 4px var(--wline)); }