/* accounts.css — the Account Book (/accounts/ and its pages).
   The pages are generated: see scripts/build-accounts.js.

   THE LOOK. A ledger, made new: warm paper and dark ink by day, deep green-black and
   cream by night. Words are set in IBM Plex Sans; titles, and every figure that matters,
   in Source Serif 4 — the face of a printed statement. One colour, a banker's green,
   marks where you are and what is money coming in; a button that does the main thing is
   plain ink. Nothing glows, nothing is rounded into a pill that does not need to be.

   THE LAYOUT. On a wide screen the app is two columns: a sidebar to move about in —
   whose book it is, "New entry", the five parts — and a stage where the work is done.
   A report is drawn on a sheet of paper, headed and ruled as it will print. On a phone
   the sidebar becomes a bar of five along the top of the website, and along the foot of
   the installed app, with a round "new entry" button above it.

   Amounts are set in figures of one width and to the right, so a column of them can be
   read down. Green is money in or owed to the business, red is a loss or a shortfall;
   neither is used for anything else. Things for a finger are larger than things for a
   mouse: --h is 40px with a mouse and 48px on a touch screen. */
:root{
  color-scheme:light dark;
  --bg:#efece4; --stage:#f6f4ee; --side:#e8e4da; --panel:#fffefa; --raised:#ffffff;
  --ink:#171a1b; --ink2:#5a6061; --ink3:#8e9392;
  --line:rgba(23,26,27,.10); --line2:rgba(23,26,27,.18);
  --fill:rgba(23,26,27,.045); --fill2:rgba(23,26,27,.09);
  --accent:#0b6b55; --accent-soft:rgba(11,107,85,.10); --ring:rgba(11,107,85,.30);
  --primary:#171a1b; --on-primary:#faf8f2;
  --pos:#0b6b55; --neg:#b3261e; --neg-soft:rgba(179,38,30,.09); --warn:#8f5200; --warn-soft:rgba(196,124,0,.14);
  --switch:#0b8f6f;
  --shadow:0 1px 2px rgba(23,26,27,.05), 0 8px 24px -16px rgba(23,26,27,.18);
  --lift:0 1px 2px rgba(23,26,27,.10), 0 0 0 1px var(--line);
  /* the two colours of the chart: income and expenses, apart for colour-blind readers too */
  --s1:#0b6b55; --s2:#cf7a2b; --rule:rgba(23,26,27,.09);
  --ui:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:"Source Serif 4","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --h:40px; --r:10px; --r-card:16px;
  /* the names the shared guide and related-tools styles look for */
  --cream:var(--bg); --paper:var(--panel); --inksoft:var(--ink2); --maroon:var(--accent); --gold:var(--accent); --golddeep:var(--ink2); --radius:var(--r-card);
  /* the names kept from the first design, for anything that still asks for them */
  --card:var(--panel); --label:var(--ink); --label2:var(--ink2); --label3:var(--ink3); --sep:var(--line); --tint:var(--accent); --tint-soft:var(--accent-soft); --tint-ring:var(--ring); --green:var(--pos); --red:var(--neg); --red-soft:var(--neg-soft); --orange:var(--warn); --orange-soft:var(--warn-soft);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#090c0b; --stage:#0f1413; --side:#0b0f0e; --panel:#151b19; --raised:#1c2321;
    --ink:#eeeae0; --ink2:#a2a8a3; --ink3:#6d746f;
    --line:rgba(238,234,224,.09); --line2:rgba(238,234,224,.17);
    --fill:rgba(238,234,224,.05); --fill2:rgba(238,234,224,.10);
    --accent:#5ad4ad; --accent-soft:rgba(90,212,173,.12); --ring:rgba(90,212,173,.32);
    --primary:#eeeae0; --on-primary:#0f1413;
    --pos:#5ad4ad; --neg:#ff8d7e; --neg-soft:rgba(255,141,126,.12); --warn:#f0b65a; --warn-soft:rgba(240,182,90,.13);
    --switch:#2fae8a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.6);
    --lift:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--line2);
    --s1:#5ad4ad; --s2:#f0a35e; --rule:rgba(238,234,224,.09);
  }
}
@media (pointer:coarse){ :root{ --h:48px; } }

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; scroll-padding-top:74px; -webkit-text-size-adjust:100%; }
[hidden]{ display:none !important; }
body{ font-family:var(--ui); font-size:15px; line-height:1.45; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; min-height:100%; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button, input, select, textarea{ font:inherit; letter-spacing:inherit; color:inherit; }
button{ touch-action:manipulation; cursor:pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible, .rtbl tr:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
svg{ display:block; }
::selection{ background:var(--accent-soft); }

/* ---------- the website's own bar, above the app ---------- */
header.site{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:8px 24px; border-bottom:1px solid var(--line); }
header.site .brand{ font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap; }
header.site .brand img{ width:24px; height:24px; margin-right:8px; vertical-align:-6px; display:inline-block; border-radius:6px; }
header.site .brand span{ color:var(--ink2); }
header.site .back{ font-size:14px; color:var(--ink2); text-decoration:none; text-align:right; }
header.site .back:hover{ color:var(--ink); }
.hdr-right{ display:flex; align-items:center; gap:16px; min-width:0; }
.hdr-install{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px 0 11px; border:none; border-radius:10px; background:var(--primary); color:var(--on-primary); font-size:14px; font-weight:600; }
.hdr-install svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hdr-install:hover{ opacity:.88; }

main{ width:100%; max-width:1320px; margin:0 auto; padding:20px 24px calc(48px + env(safe-area-inset-bottom)); }
h1.title{ font-family:var(--serif); font-size:44px; line-height:1.08; font-weight:600; letter-spacing:-.02em; margin:14px 2px 6px; }
.sub{ color:var(--ink2); font-size:16px; margin:0 2px 22px; max-width:68ch; }

/* the invitation to install: the app's icon, a line about it, and one button */
.installcard{ display:flex; align-items:center; gap:14px; padding:12px 14px; margin-bottom:8px; border-radius:14px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); animation:rise .4s cubic-bezier(.2,.7,.2,1) both; }
.installcard img{ flex:none; width:48px; height:48px; border-radius:11px; }
.ic-text{ flex:1 1 auto; min-width:0; }
.ic-text b{ display:block; font-size:16px; font-weight:600; }
.ic-text span{ display:block; font-size:14px; color:var(--ink2); }
.installcard .btn{ flex:none; min-width:104px; }
.is-app .installcard, .is-app .hdr-install{ display:none; }

/* ============ the app: a sidebar and a stage ============ */
.shell{ position:relative; border:1px solid var(--line); border-radius:20px; background:var(--stage); box-shadow:var(--shadow); }
.stage{ min-width:0; padding:16px 16px 28px; }
.stage > .tabpane, .stage > .stagebar, .stage > .setupbar, .stage > .updatebar, .stage > .warn{ max-width:1120px; }
.stagebar{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:6px 2px 18px; }
.stagebar h2{ font-family:var(--serif); font-size:30px; line-height:1.1; font-weight:600; letter-spacing:-.018em; }
.stagebar span{ font-size:14px; color:var(--ink2); }

.side-top{ display:flex; align-items:center; gap:11px; min-width:0; }
.side-top img{ flex:none; width:36px; height:36px; border-radius:9px; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.side-id{ min-width:0; }
.side-id b{ display:block; font-size:15px; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-id span{ display:block; font-size:12.5px; color:var(--ink2); }
.newbtn{ display:flex; align-items:center; gap:9px; width:100%; min-height:42px; padding:0 10px 0 12px; border:none; border-radius:10px; background:var(--primary); color:var(--on-primary); font-size:15px; font-weight:600; transition:opacity .15s, transform .1s; }
.newbtn:hover{ opacity:.9; }
.newbtn:active{ transform:translateY(1px); }
.newbtn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.newbtn span{ flex:1 1 auto; text-align:left; }
.newbtn kbd{ font:500 11px/1 var(--ui); padding:4px 6px; border-radius:5px; background:color-mix(in srgb, var(--on-primary) 16%, transparent); }
.tabs button{ font-weight:500; border:none; background:none; color:var(--ink2); transition:background .15s, color .15s; }
.tabs svg{ flex:none; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tabs button[aria-selected="true"]{ color:var(--ink); }
.side-foot{ font-size:12px; color:var(--ink3); line-height:1.5; }
.side-foot span{ display:block; }
.fab{ display:none; }

/* a wide screen: the two columns */
@media(min-width:920px){
  .shell{ display:grid; grid-template-columns:236px minmax(0,1fr); background:linear-gradient(to right, var(--side) 236px, var(--stage) 236px); overflow:clip; }
  .shell::after{ content:""; position:absolute; left:236px; top:0; bottom:0; width:1px; background:var(--line); }
  .side{ position:sticky; top:0; align-self:start; display:flex; flex-direction:column; gap:14px; max-height:100dvh; padding:18px 12px 16px; overflow:auto; }
  .side-top{ padding:0 6px 4px; }
  .tabs{ display:flex; flex-direction:column; gap:2px; margin-top:4px; }
  .tabs button{ position:relative; display:flex; align-items:center; gap:11px; min-height:38px; padding:0 12px; border-radius:9px; font-size:14.5px; text-align:left; }
  .tabs button:hover{ background:var(--fill); color:var(--ink); }
  .tabs button[aria-selected="true"]{ background:var(--raised); box-shadow:var(--lift); font-weight:600; }
  .tabs button[aria-selected="true"]::before{ content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
  .tabs button[aria-selected="true"] svg{ color:var(--accent); }
  .side-foot{ margin-top:auto; padding:14px 8px 0; border-top:1px solid var(--line); }
  .stage{ padding:26px 34px 40px; background:radial-gradient(900px 320px at 88% -80px, var(--accent-soft), transparent 70%); }
}
/* a narrow one: the five parts as one bar that stays in reach */
@media(max-width:919px){
  .side{ display:contents; }
  .side-top, .newbtn, .side-foot{ display:none; }
  .tabs{ position:sticky; top:8px; z-index:12; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:3px; margin:10px 10px 0; border-radius:12px; background:color-mix(in srgb, var(--side) 86%, transparent); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); box-shadow:0 0 0 1px var(--line); }
  .tabs button{ min-height:42px; border-radius:9px; font-size:13.5px; padding:4px 2px; }
  .tabs svg{ display:none; }
  .tabs button[aria-selected="true"]{ background:var(--raised); box-shadow:var(--lift); font-weight:600; }
  .stagebar{ margin:10px 2px 14px; }
  .stagebar h2{ font-size:26px; }
}

/* ---------- as an app ----------
   Opened from the home screen or the desktop, the page is only the book: the site's bar,
   the heading, the guide, the questions and the links to other tools are put away, and
   the shell fills the window. (shell.js sets .is-app.) */
.is-app header.site, .is-app h1.title, .is-app .sub, .is-app .web-only, .is-app .mh-related, .is-app footer.site{ display:none; }
.is-app.show-guide .web-only{ display:block; max-width:1120px; margin:0 auto 16px; }
.is-app{ background:var(--stage); overscroll-behavior-y:none; -webkit-touch-callout:none; }
.is-app main{ max-width:none; padding:0; }
.is-app .shell{ border:none; border-radius:0; box-shadow:none; min-height:100dvh; }
.is-app .step-label, .is-app .stat, .is-app .side{ -webkit-user-select:none; user-select:none; }
@media(min-width:920px){
  .is-app .side{ height:100dvh; padding-top:calc(18px + env(safe-area-inset-top)); }
  .is-app .stage{ padding:30px 40px 48px; }
  .is-app.show-guide .web-only{ margin-left:276px; margin-right:40px; }
}
@media(max-width:919px){
  /* whose book it is, at the head; the five parts along the foot; "new entry" above them */
  .is-app .side-top{ display:flex; padding:calc(14px + env(safe-area-inset-top)) 18px 0; }
  .is-app .tabs{ position:fixed; top:auto; left:0; right:0; bottom:0; margin:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); border-radius:0; gap:0; background:color-mix(in srgb, var(--side) 88%, transparent); box-shadow:0 -1px 0 var(--line); z-index:14; }
  .is-app .tabs button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:50px; font-size:11.5px; font-weight:500; border-radius:10px; }
  .is-app .tabs svg{ display:block; width:22px; height:22px; }
  .is-app .tabs button[aria-selected="true"]{ background:none; box-shadow:none; color:var(--accent); font-weight:600; }
  .is-app .stage{ padding-bottom:calc(132px + env(safe-area-inset-bottom)); }
  .is-app .fab{ position:fixed; right:18px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:13; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border:none; border-radius:50%; background:var(--primary); color:var(--on-primary); box-shadow:0 10px 26px -6px rgba(0,0,0,.45); transition:transform .12s; }
  .is-app .fab:active{ transform:scale(.93); }
  .fab svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
  .is-app .toast{ bottom:calc(84px + env(safe-area-inset-bottom)); }
  .is-app.show-guide .web-only{ margin:0 16px 16px; }
}

/* a new version is ready; the book is not set up; there are entries in no export */
.updatebar, .setupbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 10px 10px 16px; margin-bottom:14px; border-radius:12px; animation:rise .3s cubic-bezier(.2,.7,.2,1) both; }
.updatebar{ position:sticky; top:8px; z-index:13; background:var(--primary); color:var(--on-primary); box-shadow:0 12px 30px -10px rgba(0,0,0,.35); }
.updatebar span, .setupbar span{ flex:1 1 220px; min-width:0; font-size:14.5px; }
.updatebar .btn{ background:var(--on-primary); color:var(--primary); border-color:transparent; }
.updatebar .xbtn{ background:color-mix(in srgb, var(--on-primary) 18%, transparent); color:inherit; }
.setupbar{ background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--ring); }
.setupbar b{ font-weight:600; }
.setupbar .btn, .updatebar .btn{ flex:none; }
body.on-home #setupBar{ display:none; }
.rel{ padding:12px 0; border-top:1px solid var(--line); }
.rel:first-child{ border-top:none; }
.rel b{ font-size:15px; font-weight:600; }
.rel span{ font-size:13px; color:var(--ink2); margin-left:8px; }
.rel ul{ margin:6px 0 0 20px; font-size:14px; color:var(--ink2); }

/* ---------- cards ---------- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; margin-bottom:16px; }
.tabpane > *{ animation:rise .42s cubic-bezier(.2,.7,.2,1) both; }
.tabpane > :nth-child(2){ animation-delay:.04s; } .tabpane > :nth-child(3){ animation-delay:.08s; } .tabpane > :nth-child(4){ animation-delay:.12s; } .tabpane > :nth-child(n+5){ animation-delay:.16s; }
@keyframes rise{ from{ opacity:0; transform:translateY(8px); } }
.step-label{ font-family:var(--serif); font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-.01em; margin:0 0 14px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.step-label.gap{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.step-label .cnt{ font-family:var(--ui); font-size:13.5px; font-weight:400; letter-spacing:0; color:var(--ink2); text-align:right; }

/* ---------- typing ---------- */
input, select, textarea{ font-size:15px; height:var(--h); padding:0 12px; border:1px solid var(--line2); border-radius:var(--r); background-color:var(--raised); color:var(--ink); width:100%; min-width:0; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
input::placeholder, textarea::placeholder{ color:var(--ink3); }
textarea{ height:auto; min-height:72px; padding:10px 12px; resize:vertical; line-height:1.4; }
select{ -webkit-appearance:none; appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238e9392' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:11px 8px; text-overflow:ellipsis; }
input[type="search"]{ padding-left:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238e9392' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.8'/%3E%3Cpath d='m13 13 4.6 4.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:12px center; background-size:16px 16px; }
input.amt{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
@media (pointer:coarse){ input, select, textarea{ font-size:16px; } }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:500; color:var(--ink2); margin:0 1px 6px; }
.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.micfield{ max-width:360px; }
.note{ font-size:13.5px; line-height:1.5; color:var(--ink2); margin:0 1px 12px; max-width:78ch; }
.note:last-child{ margin-bottom:0; }
.note.center{ text-align:center; }
.note.gapnote{ margin-top:12px; }
.note a, .more a{ color:var(--accent); text-decoration:none; font-weight:500; }
.note b{ color:var(--ink); font-weight:600; }
.warn{ font-size:14px; line-height:1.45; color:var(--warn); background:var(--warn-soft); border-radius:var(--r); padding:11px 14px; margin:0 0 14px; }
.empty{ color:var(--ink2); font-size:14.5px; padding:26px 4px; text-align:center; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:500; min-height:var(--h); padding:0 16px; border:1px solid var(--line2); border-radius:var(--r); background:var(--raised); color:var(--ink); text-decoration:none; text-align:center; white-space:nowrap; user-select:none; -webkit-user-select:none; transition:background .15s, opacity .15s, transform .1s; }
.btn:hover{ background:color-mix(in srgb, var(--raised) 92%, var(--ink)); }
.btn:active{ transform:translateY(1px); }
.btn.solid{ background:var(--primary); color:var(--on-primary); border-color:transparent; font-weight:600; }
.btn.solid:hover{ background:var(--primary); opacity:.88; }
.btn.wa{ background:#1a8f4c; color:#fff; border-color:transparent; }
.btn.del{ background:var(--neg-soft); color:var(--neg); border-color:transparent; }
.btn.in{ background:var(--accent-soft); color:var(--pos); border-color:transparent; font-weight:600; }
.btn.out{ background:var(--warn-soft); color:var(--warn); border-color:transparent; font-weight:600; }
.btn.sm{ font-size:13.5px; min-height:34px; padding:0 12px; border-radius:8px; }
.btn.big{ min-height:calc(var(--h) + 6px); padding:0 20px; font-size:15.5px; }
.btn.grow{ flex:1 1 auto; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.4; pointer-events:none; }
.btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.btnrow.top{ margin:0 0 14px; }
.filebtn{ position:relative; overflow:hidden; cursor:pointer; }
.filebtn input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; padding:0; }
.filebtn:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.xbtn{ flex:none; width:34px; height:34px; border-radius:50%; border:none; background:var(--fill2); font-size:13px; font-weight:700; color:var(--ink2); line-height:1; }
.xbtn:hover{ color:var(--ink); }

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-size:13.5px; font-weight:500; min-height:calc(var(--h) - 6px); padding:0 13px; border-radius:999px; border:1px solid var(--line2); background:transparent; color:var(--ink2); white-space:nowrap; user-select:none; -webkit-user-select:none; transition:background .15s, color .15s, border-color .15s; }
.chip:hover{ color:var(--ink); background:var(--fill); }
.chip[aria-checked="true"], .chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--stage); }

/* one of a few, chosen */
.seg{ display:inline-flex; background:var(--fill2); border-radius:var(--r); padding:3px; gap:2px; max-width:100%; }
.seg button{ font-size:14px; font-weight:500; min-height:calc(var(--h) - 6px); padding:0 16px; border:none; border-radius:7px; background:none; color:var(--ink2); transition:background .18s, box-shadow .18s, color .18s; }
.seg button[aria-checked="true"]{ background:var(--raised); color:var(--ink); font-weight:600; box-shadow:var(--lift); }
#tab-parties .seg, .seg.paid{ display:grid; grid-template-columns:1fr 1fr; width:100%; }
#tab-parties .seg{ max-width:360px; }
.seg.paid{ margin:8px 0 14px; }

/* a switch */
.check{ display:flex; flex-direction:row-reverse; justify-content:space-between; gap:16px; align-items:center; min-height:54px; padding:10px 1px; border-top:1px solid var(--line); font-size:15px; cursor:pointer; }
.check.first{ border-top:none; }
.check > span{ flex:1 1 auto; min-width:0; font-weight:500; }
.check small{ display:block; font-size:13px; font-weight:400; line-height:1.45; color:var(--ink2); margin-top:2px; }
.check input, input.sw{ -webkit-appearance:none; appearance:none; flex:none; width:42px; height:24px; min-height:0; padding:0; border:none; border-radius:12px; background:var(--fill2); background-image:none; position:relative; cursor:pointer; transition:background .2s; box-shadow:inset 0 0 0 1px var(--line2); }
.check input::after, input.sw::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .2s cubic-bezier(.3,.7,.2,1); }
.check input:checked, input.sw:checked{ background:var(--switch); box-shadow:none; }
.check input:checked::after, input.sw:checked::after{ transform:translateX(18px); }
.check input:focus, input.sw:focus{ box-shadow:0 0 0 3px var(--ring); }

/* ---------- figures at a glance ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; }
.stat{ display:block; width:100%; text-align:left; border:1px solid var(--line); border-radius:12px; background:var(--raised); padding:14px 16px; min-width:0; }
.stat dt, .stat > b{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.stat dd, .stat > span{ display:block; font-family:var(--serif); font-size:26px; line-height:1.2; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums lining-nums; margin-top:6px; }
.stat small{ display:block; font-size:12.5px; margin-top:4px; opacity:.72; }
button.stat{ font:inherit; color:inherit; cursor:pointer; transition:border-color .15s, transform .12s, box-shadow .15s; }
button.stat:hover{ border-color:var(--line2); box-shadow:var(--shadow); transform:translateY(-1px); }
.stat.main{ grid-column:span 2; background:var(--primary); color:var(--on-primary); border-color:transparent; position:relative; overflow:hidden; }
.stat.main::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--on-primary) 7%, transparent) 27px 28px); pointer-events:none; }
.stat.main dt{ color:inherit; opacity:.72; }
.stat.main dd{ font-size:42px; letter-spacing:-.02em; }
.stat.good dd, .stat.good > span{ color:var(--pos); }
.stat.bad dd, .stat.bad > span{ color:var(--neg); }
.stat.main.bad dd{ color:#ff9d8f; }
#partyStats{ margin:16px 0; }
.quickadd{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.quickadd .btn{ flex:1 1 150px; }

/* ---------- lists ---------- */
.rows{ list-style:none; }
.row{ border-top:1px solid var(--line); }
.rows > .row:first-child{ border-top:none; }
.rowmain{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 14px; align-items:center; text-align:left; border:none; background:none; width:100%; min-height:56px; padding:9px 10px; margin:0 -10px; width:calc(100% + 20px); border-radius:9px; transition:background .12s; }
button.rowmain:hover{ background:var(--fill); }
.rowmain .rw{ font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowmain .rw small{ font-size:12.5px; font-weight:400; color:var(--ink2); margin-left:6px; }
.rowmain .rt{ font-size:15px; font-weight:500; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.rowmain .rn{ grid-column:1 / -1; font-size:13px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rt.in{ color:var(--pos); }
.rt.owes{ color:var(--neg); font-weight:600; }
.row.void .lw b, .row.void .rt, .row.void .rw{ text-decoration:line-through; color:var(--ink3); }
.row.off .rw{ color:var(--ink2); }
.rows.small{ max-height:34dvh; overflow:auto; margin-bottom:10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:2px 14px; }
.rows.small.tall{ max-height:42dvh; }
.rows.small .empty{ padding:18px 0; }
/* an entry, set out as a line of a ledger */
.led-head, .rowmain.led{ display:grid; grid-template-columns:104px minmax(0,1fr) 172px 140px; gap:0 16px; align-items:center; }
.led-head{ padding:0 0 8px; border-bottom:1px solid var(--line2); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.led-head span:last-child{ text-align:right; }
.led .ld{ font-size:13.5px; color:var(--ink2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.led .ld i{ font-style:normal; color:var(--ink3); }
.led .lw{ min-width:0; }
.led .lw b{ display:block; font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.led .lw small{ display:block; font-size:13px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.led .lk{ font-size:13.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.led .lk small{ font-size:12px; color:var(--ink3); font-variant-numeric:tabular-nums; }
.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; vertical-align:1px; background:var(--ink3); }
.dot.k-in, .dot.k-sale{ background:var(--pos); }
.dot.k-out, .dot.k-pur{ background:var(--s2); }
/* money that moved is a full dot; a sale or a purchase, which may still be owed, a ring */
.dot.k-sale{ background:none; box-shadow:inset 0 0 0 2px var(--pos); }
.dot.k-pur{ background:none; box-shadow:inset 0 0 0 2px var(--s2); }
/* in a narrow place a ledger line folds onto two */
#homeLatest .led-head{ display:none; }
#homeLatest .rowmain.led, .rows.small .rowmain.led{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"w w a" "d k a"; gap:2px 10px; }
#homeLatest .led .lw, .rows.small .led .lw{ grid-area:w; } #homeLatest .led .ld, .rows.small .led .ld{ grid-area:d; } #homeLatest .led .lk, .rows.small .led .lk{ grid-area:k; } #homeLatest .led .rt, .rows.small .led .rt{ grid-area:a; }
@media(max-width:760px){
  .led-head{ display:none; }
  .rowmain.led{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"w w a" "d k a"; gap:2px 10px; }
  .led .lw{ grid-area:w; } .led .ld{ grid-area:d; } .led .lk{ grid-area:k; } .led .rt{ grid-area:a; }
}
.agroup h3{ font-size:11.5px; font-weight:600; color:var(--ink2); text-transform:uppercase; letter-spacing:.06em; margin:20px 0 4px; padding-bottom:6px; border-bottom:1px solid var(--line2); }
.agroup:first-child h3{ margin-top:6px; }

/* the bar of choices above a list */
.toolbar .tool-top{ display:flex; gap:10px; margin-bottom:14px; }
.toolbar .tool-top input{ flex:1 1 auto; }
.toolbar .tool-top .btn{ flex:none; }
.rep-filter{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; }
.rep-filter .chips{ flex:1 1 auto; }
.rep-filter.inpanel{ margin-top:12px; }
.rep-dates{ display:flex; align-items:center; gap:8px; color:var(--ink2); font-size:13.5px; }
.rep-dates input{ width:auto; min-width:0; font-size:14px; font-variant-numeric:tabular-nums; }
#partyFind{ max-width:420px; }

/* ---------- tables ---------- */
.scrollx{ overflow-x:auto; }
.tbl, .rtbl{ width:100%; border-collapse:collapse; font-size:14.5px; }
.tbl th, .tbl td{ padding:9px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tbl th:first-child, .tbl td:first-child{ text-align:left; white-space:normal; padding-left:0; }
.tbl th:last-child, .tbl td:last-child{ padding-right:0; }
.tbl th{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.tbl tr.sum td{ font-weight:700; border-bottom:none; }

/* ---------- the chart, and where the money went ---------- */
.chart{ position:relative; min-height:210px; }
.chart svg{ display:block; overflow:visible; touch-action:pan-y; }
.chart .grid{ stroke:var(--rule); stroke-width:1; }
.chart .axis{ stroke:var(--line2); stroke-width:1; }
.chart .tick{ fill:var(--ink2); font-size:11px; font-family:var(--ui); font-variant-numeric:tabular-nums; }
.chart .bar{ transition:opacity .12s; }
.chart .bar.a{ fill:var(--s1); }
.chart .bar.b{ fill:var(--s2); }
.chart.hot .bar{ opacity:.35; }
.chart.hot .bar.on{ opacity:1; }
.chart .hit{ fill:transparent; cursor:pointer; outline:none; }
.chart .hit:focus-visible{ fill:var(--accent-soft); }
.tip{ position:absolute; top:-6px; left:50%; transform:translate(-50%,-100%) scale(.96); padding:7px 12px; border-radius:9px; background:var(--primary); color:var(--on-primary); text-align:center; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s, transform .12s; box-shadow:0 8px 20px rgba(0,0,0,.22); z-index:2; }
.tip.on{ opacity:1; transform:translate(-50%,-100%) scale(1); }
.tip b{ display:block; font-size:14px; font-weight:600; }
.tip span{ display:block; font-size:12px; opacity:.75; }
.chartkey{ display:flex; gap:18px; font-size:13px; color:var(--ink2); margin-top:10px; }
.chartkey i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; }
.s1{ background:var(--s1); } .s2{ background:var(--s2); }
.rep-table{ margin-top:12px; border-top:1px solid var(--line); }
.rep-table summary{ list-style:none; cursor:pointer; min-height:40px; display:flex; align-items:center; gap:6px; color:var(--accent); font-size:13.5px; font-weight:500; }
.rep-table summary::-webkit-details-marker{ display:none; }
.rep-table summary::before{ content:"+"; font-weight:400; font-size:16px; width:12px; }
.rep-table[open] summary::before{ content:"−"; }
.rep-table .scrollx{ max-height:320px; overflow:auto; }
.hbar{ padding:10px 0; border-top:1px solid var(--line); }
.hbar:first-child{ border-top:none; padding-top:0; }
.hb-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14.5px; }
.hb-top span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-top b{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hb-track{ height:6px; margin:7px 0 5px; border-radius:3px; background:var(--fill); overflow:hidden; }
.hb-track i{ display:block; height:100%; min-width:3px; background:var(--s2); border-radius:3px; }
.hbar small{ font-size:12.5px; color:var(--ink2); }
@media(min-width:1000px){ .rep-two{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:0 16px; align-items:start; } }

/* ============ reports: the list at the side, the report on a sheet of paper ============ */
.rep-layout{ display:grid; gap:18px; }
.replist{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:2px 16px; }
.replist::-webkit-scrollbar{ display:none; }
.repitem{ flex:none; border:1px solid var(--line2); background:transparent; border-radius:999px; min-height:calc(var(--h) - 4px); padding:0 14px; color:var(--ink2); text-align:left; transition:background .15s, color .15s; }
.repitem b{ font-size:14px; font-weight:500; white-space:nowrap; }
.repitem span{ display:none; }
.repitem[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--stage); }
.rep-bank{ border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--panel); }
.rep-bank b{ display:block; font-family:var(--serif); font-size:17px; font-weight:600; margin-bottom:4px; }
.rep-bank .btn{ width:100%; white-space:normal; }
.rep-main{ min-width:0; }
.rep-tools{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }
.rep-acts{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.rep-acts .field{ margin:0; min-width:200px; }
.paper{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:36px 22px 28px; box-shadow:0 1px 0 var(--line), 0 30px 60px -36px rgba(0,0,0,.4); max-width:900px; position:relative; }
.paper::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:6px 6px 0 0; background:var(--accent); }
.paper-head{ text-align:center; padding-bottom:20px; margin-bottom:8px; border-bottom:1px solid var(--line2); }
.paper-biz{ display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); min-height:1em; }
.paper-head h3{ font-family:var(--serif); font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-.015em; margin:8px 0 4px; }
.paper-when{ font-size:14px; color:var(--ink2); }
.paper-say{ font-size:13px; color:var(--ink3); margin-top:6px; font-style:italic; }
.rtbl th, .rtbl td{ padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.rtbl th:first-child, .rtbl td:first-child{ padding-left:2px; }
.rtbl th:last-child, .rtbl td:last-child{ padding-right:2px; }
.rtbl .n{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rtbl .d{ white-space:nowrap; color:var(--ink2); font-variant-numeric:tabular-nums; }
.rtbl th{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); border-bottom-color:var(--line2); }
.rtbl tr.head td{ font-family:var(--serif); font-size:17px; font-weight:600; padding-top:22px; border-bottom:none; }
.rtbl tbody tr.head:first-child td{ padding-top:10px; }
.rtbl tr.open td{ color:var(--ink2); font-style:italic; }
.rtbl tr.sub td{ font-weight:600; background:var(--fill); }
.rtbl tr.sum td{ font-weight:600; border-top:1px solid var(--line2); }
.rtbl tr.grand td{ font-family:var(--serif); font-size:19px; font-weight:600; border-top:1.5px solid var(--ink); border-bottom:3px double var(--ink); }
.rtbl tr.tap{ cursor:pointer; }
.rtbl tr.tap:hover td, .rtbl tr.tap:focus-visible td{ background:var(--fill); }
.rtbl small{ font-size:11px; color:var(--ink2); margin-left:4px; }
.rtbl-title{ font-family:var(--serif); font-size:18px; font-weight:600; margin:22px 0 2px; }
.rep-note{ font-size:13px; line-height:1.5; color:var(--ink2); margin:14px 2px 0; }
@media(min-width:760px){ .paper{ padding:48px 52px 40px; } }
@media(min-width:1100px){
  .rep-layout{ grid-template-columns:252px minmax(0,1fr); align-items:start; }
  .rep-nav{ position:sticky; top:20px; display:flex; flex-direction:column; gap:14px; }
  .replist{ flex-direction:column; gap:2px; overflow:visible; margin:0; padding:0; }
  .repitem{ border:none; border-radius:10px; padding:9px 12px; min-height:0; }
  .repitem b{ display:block; font-size:14.5px; color:var(--ink); }
  .repitem span{ display:block; font-size:12.5px; line-height:1.35; color:var(--ink2); margin-top:1px; white-space:normal; }
  .repitem:hover{ background:var(--fill); }
  .repitem[aria-pressed="true"]{ background:var(--raised); box-shadow:var(--lift); color:var(--ink); }
  .repitem[aria-pressed="true"] b{ color:var(--accent); font-weight:600; }
}
@media(max-width:1099px){ .rep-nav{ display:contents; } .rep-bank{ order:3; } }

/* ---------- sheets: an entry, a customer, an account, the opening balances ----------
   A sheet rises from the foot of a phone's screen and sits in the middle of a wide one. */
dialog.sheet{ border:1px solid var(--line); padding:22px; width:min(calc(100vw - 32px), 480px); max-width:100vw; max-height:92dvh; margin:auto; border-radius:18px; background:var(--stage); color:var(--ink); overflow:auto; box-shadow:0 40px 90px -20px rgba(0,0,0,.5); }
dialog.sheet.wide{ width:min(calc(100vw - 32px), 580px); }
dialog.sheet::backdrop, dialog.setup::backdrop{ background:rgba(10,14,13,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
dialog.sheet[open]{ animation:sheetIn .26s cubic-bezier(.2,.8,.2,1); }
dialog.sheet[open]::backdrop, dialog.setup[open]::backdrop{ animation:dim .25s ease-out; }
@keyframes sheetUp{ from{ transform:translateY(100%); } }
@keyframes sheetIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } }
@keyframes dim{ from{ opacity:0; } }
@media(max-width:640px){
  dialog.sheet, dialog.sheet.wide{ width:100vw; margin:auto auto 0; border-radius:20px 20px 0 0; border-bottom:none; padding:10px 16px calc(18px + env(safe-area-inset-bottom)); max-height:94dvh; }
  dialog.sheet::before{ content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--line2); margin:0 auto 12px; }
  dialog.sheet[open]{ animation:sheetUp .4s cubic-bezier(.32,.72,0,1); }
}
.sheet-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin:0 0 16px; }
.sheet-head b{ display:block; font-family:var(--serif); font-size:24px; line-height:1.15; font-weight:600; letter-spacing:-.015em; overflow-wrap:anywhere; }
.sheet-head span{ display:block; font-size:13.5px; color:var(--ink2); margin-top:3px; }
.sheet-foot{ display:flex; gap:10px; margin-top:16px; }
.sheet-foot.wrap{ flex-wrap:wrap; }
.sheet-foot.wrap .btn{ flex:1 1 46%; white-space:normal; }
.sheet-foot.wrap .btn.del{ flex-basis:100%; }
dialog.sheet .check{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.sharenote{ margin:12px 2px 0; }
.isteps{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.isteps b{ font-size:15px; font-weight:600; }
.isteps ol{ margin:8px 0 0 20px; font-size:14.5px; line-height:1.5; color:var(--ink2); }
.isteps.mine{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.isteps.mine ol{ color:var(--ink); }
#installReady .note{ margin:6px 0 12px; }
#installReady .btn{ width:100%; }
#installWait{ margin:0 2px 12px; font-size:14px; }
.sumbox{ margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; font-size:14.5px; }
.sumbox:empty{ display:none; }
.sumbox dt{ color:var(--ink2); }
.sumbox dd{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sumbox .big{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); padding-top:8px; border-top:1px solid var(--line2); }
.sumbox .bad{ color:var(--neg); font-weight:600; }
.sumbox .good{ color:var(--pos); font-weight:600; }
.sumbox.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 12px; }

/* an entry being made */
.types{ margin-bottom:16px; }
.erows{ margin-bottom:4px; }
/* what · how much · the rate · take the line away */
.erow, .erow-head{ display:grid; grid-template-columns:minmax(0,1fr) 126px 80px var(--h); gap:8px; align-items:center; }
.erow{ margin-bottom:8px; }
.erow.notax, .erow-head.notax{ grid-template-columns:minmax(0,1fr) 126px var(--h); }
/* the account · debit · credit · take the line away, and whose balance it is on the line below */
.erow.j, .erow-head.j{ grid-template-columns:minmax(0,1fr) 108px 108px var(--h); }
.erow .who{ grid-column:1 / -1; }
.ib{ display:inline-flex; align-items:center; justify-content:center; width:var(--h); height:var(--h); border-radius:var(--r); border:1px solid var(--line2); background:var(--raised); color:var(--ink2); font-size:13px; font-weight:700; }
.ib.del{ color:var(--neg); border-color:transparent; background:var(--neg-soft); }
.ib:disabled{ opacity:.3; }
.erow .pct{ position:relative; }
.erow .pct input{ padding:0 24px 0 8px; text-align:right; }
.erow .pct input::-webkit-calendar-picker-indicator{ display:none !important; }
.erow .pct::after{ content:"%"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--ink2); font-size:13.5px; pointer-events:none; }
.erow-head{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); margin:0 1px 6px; }
.erow-head span:not(:first-child){ text-align:right; }
#enAddRow, #enAddJ{ margin-bottom:8px; }
.notefield{ margin-top:14px; }
#enLinesBox{ margin-top:4px; }
#enWhy{ margin:12px 0 0; }
@media(max-width:520px){
  .erow{ grid-template-columns:minmax(0,1fr) 88px var(--h); }
  .erow.notax{ grid-template-columns:minmax(0,1fr) var(--h); }
  .erow.j{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--h); }
  .erow > select:first-child{ grid-column:1 / -1; }
  .erow-head{ display:none; }
}
/* the opening balances */
.orow{ display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:10px; align-items:center; min-height:calc(var(--h) + 12px); padding:6px 0; border-top:1px solid var(--line); }
.ogroup{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:2px 14px; margin-bottom:12px; }
.ogroup .orow:first-of-type{ border-top:none; }
.ogroup h3{ font-size:11.5px; font-weight:600; color:var(--ink2); text-transform:uppercase; letter-spacing:.06em; padding:14px 0 4px; }
.ogroup .note{ padding-bottom:10px; }
.orow label{ font-size:14.5px; min-width:0; overflow-wrap:anywhere; }
.orow label small{ display:block; font-size:12.5px; color:var(--ink2); }
#opSum{ margin-bottom:6px; }
/* checking the bank */
.rcrow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; min-height:54px; padding:6px 0; border-bottom:1px solid var(--line); cursor:pointer; }
li:last-child > .rcrow{ border-bottom:none; }
.rcrow span{ min-width:0; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rcrow span small{ display:block; font-size:12.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; }
.rcrow b{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rcrow b.in{ color:var(--pos); }
dialog.sheet #rcHideRow{ margin:0 0 10px; }
/* a file from another device, beside what is here */
.imptable{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:2px 14px; margin-bottom:12px; }
.imptable .tbl th, .imptable .tbl td{ text-align:left; white-space:normal; font-size:14px; }
.imptable .tbl tbody th{ font-size:11.5px; width:30%; }
.imptable .tbl tbody tr:last-child th, .imptable .tbl tbody tr:last-child td{ border-bottom:none; }
.imptable .tbl td{ font-weight:500; overflow-wrap:anywhere; }
#movePanel .btn.big{ flex:1 1 220px; }

/* ---------- setting up, one question at a time ----------
   The whole screen on a phone, a tall card on a wide screen: a thin bar of progress, one
   question in large type, and one large button at the foot. */
dialog.setup{ border:none; padding:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; background:var(--stage); color:var(--ink); overflow:hidden; }
dialog.setup[open]{ display:flex; flex-direction:column; animation:sheetUp .45s cubic-bezier(.32,.72,0,1); }
@media(min-width:700px){
  dialog.setup{ width:560px; height:min(760px, 92dvh); margin:auto; border-radius:22px; border:1px solid var(--line); box-shadow:0 40px 100px -20px rgba(0,0,0,.55); }
  dialog.setup[open]{ animation:sheetIn .3s cubic-bezier(.2,.8,.2,1); }
}
.su-top{ flex:none; display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 18px 6px; }
.su-back{ flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line2); background:var(--raised); color:var(--ink); font-size:22px; line-height:1; padding-bottom:3px; }
.su-skip{ flex:none; min-height:38px; padding:0 6px; border:none; background:none; color:var(--ink2); font-size:14.5px; font-weight:500; }
.su-skip:hover{ color:var(--ink); }
.su-progress{ flex:1 1 auto; height:4px; border-radius:2px; background:var(--fill2); overflow:hidden; }
.su-progress i{ display:block; height:100%; width:0; border-radius:2px; background:var(--accent); transition:width .35s cubic-bezier(.2,.8,.2,1); }
.su-body{ flex:1 1 auto; overflow:auto; padding:14px 24px 22px; }
.su-step{ font-size:11.5px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.su-body h2{ font-family:var(--serif); font-size:32px; line-height:1.12; font-weight:600; letter-spacing:-.02em; margin-bottom:8px; }
.su-sub{ font-size:15px; line-height:1.5; color:var(--ink2); margin-bottom:20px; }
.su-body section{ animation:rise .3s cubic-bezier(.2,.7,.2,1); }
.su-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.su-cards.one{ grid-template-columns:minmax(0,1fr); }
.su-card{ display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 16px; text-align:left; border:1px solid var(--line); border-radius:14px; background:var(--panel); transition:transform .12s, border-color .15s, box-shadow .15s; }
.su-card:hover{ border-color:var(--line2); box-shadow:var(--shadow); transform:translateY(-1px); }
.su-card .su-pic{ flex:none; font-size:28px; line-height:1; }
.su-card b{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:600; line-height:1.25; }
.su-card b small{ display:block; font-size:13.5px; font-weight:400; color:var(--ink2); margin-top:2px; }
.su-card[aria-checked="true"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.su-card[aria-checked="true"]::after{ content:"✓"; flex:none; color:var(--accent); font-size:18px; font-weight:700; }
.su-list{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:0 16px; margin-bottom:14px; }
.su-list .check:first-child{ border-top:none; }
.su-sum{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:0 16px; margin-bottom:12px; }
.su-sum div{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:15px; }
.su-sum div:first-child{ border-top:none; }
.su-sum dt{ color:var(--ink2); flex:none; }
.su-sum dd{ text-align:right; font-weight:500; overflow-wrap:anywhere; }
#suInstall{ width:100%; margin-top:6px; }
.su-link{ display:block; margin:14px auto 0; min-height:44px; padding:0 12px; border:none; background:none; color:var(--accent); font-size:15px; font-weight:500; }
label.su-link{ display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer; min-height:48px; padding:6px 12px; line-height:1.3; }
.su-foot{ flex:none; padding:12px 24px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--stage); }
.su-foot .btn{ width:100%; min-height:52px; font-size:16px; }

/* ---------- the reading part of the website ---------- */
.web-only{ margin-top:16px; }
body .mh-guide{ color:var(--ink); line-height:1.6; }
body .mh-guide h2{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.012em; color:var(--ink); margin-top:30px; }
body .mh-guide p, body .mh-guide li, body .mh-guide td, body .mh-guide th{ font-size:15.5px; }
body .mh-guide a{ color:var(--accent); font-weight:500; text-decoration:none; }
body .mh-guide b{ font-weight:600; }
body .mh-guide th{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink2); }
body .mh-guide th, body .mh-guide td{ border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
body .mh-guide .mh-note{ font-size:14.5px; color:var(--ink2); border-left:3px solid var(--accent); padding:2px 0 2px 14px; }
details.faq{ border-top:1px solid var(--line); }
details.faq:first-of-type{ border-top:none; }
details.faq summary{ list-style:none; cursor:pointer; font-size:16px; font-weight:500; padding:15px 28px 15px 0; position:relative; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; position:absolute; right:4px; top:12px; font-size:20px; font-weight:300; color:var(--ink2); }
details.faq[open] summary::after{ content:"−"; }
details.faq p{ color:var(--ink2); font-size:15px; line-height:1.55; padding:0 0 16px; max-width:76ch; }
.occasions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.occasions a{ font-size:14.5px; font-weight:500; padding:9px 15px; border-radius:999px; border:1px solid var(--line2); color:var(--ink); text-decoration:none; transition:background .15s; }
.occasions a:hover{ background:var(--fill); }
.more{ font-size:14px; color:var(--ink2); line-height:1.7; }
footer.site{ text-align:center; color:var(--ink2); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer.site a{ color:var(--ink); text-decoration:none; }
/* the related-tools strip, in this page's clothes */
body .mh-related{ font-family:var(--ui); color:var(--ink); }
body .mh-related-head h2{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.012em; color:var(--ink); }
body .mh-related-head a{ color:var(--accent); font-size:14px; font-weight:500; }
body .mh-related li a{ background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:none; }
body .mh-related li a:hover, body .mh-related li a:focus-visible{ border-color:var(--line2); box-shadow:var(--shadow); }
body .mh-tx b{ color:var(--ink); font-weight:600; }
body .mh-tx span{ color:var(--ink2); }

/* a short message */
.toast{ position:fixed; top:auto; right:auto; margin:0; border:none; overflow:visible; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translate(-50%,14px) scale(.97); background:var(--primary); color:var(--on-primary); font-size:14.5px; font-weight:500; line-height:1.35; padding:12px 16px; border-radius:12px; box-shadow:0 14px 34px -8px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s, transform .28s cubic-bezier(.2,.9,.3,1.2); display:flex; gap:16px; align-items:center; max-width:calc(100vw - 32px); z-index:2147483647; }
.toast.on{ opacity:1; transform:translate(-50%,0) scale(1); pointer-events:auto; }
.toast button{ border:none; background:none; color:inherit; font-weight:700; font-size:14.5px; padding:4px 0; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }

#printArea{ display:none; }

@media(max-width:640px){
  main{ padding:12px 12px calc(40px + env(safe-area-inset-bottom)); }
  h1.title{ font-size:34px; }
  .sub{ font-size:15px; margin-bottom:16px; }
  .panel{ padding:16px; }
  .installcard{ flex-wrap:wrap; }
  .installcard .ic-text{ flex-basis:calc(100% - 110px); }
  .installcard .btn{ flex:1 1 100%; order:5; }
  header.site{ padding:8px 16px; }
  .back{ display:none; }
  .stat.main dd{ font-size:36px; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat dd, .stat > span{ font-size:22px; }
  .rep-dates{ flex:1 1 100%; }
  .rep-dates input{ flex:1 1 0; }
  .rep-filter .chips, .chips#entKinds{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:2px 16px; scrollbar-width:none; }
  .rep-filter .chips::-webkit-scrollbar, .chips#entKinds::-webkit-scrollbar{ display:none; }
  .rep-acts{ width:100%; }
  .rep-acts .btn{ flex:1 1 0; }
  .rep-acts .field{ flex:1 1 100%; }
  .paper-head h3{ font-size:25px; }
  .rtbl{ font-size:13.5px; }
  .toolbar .tool-top{ flex-wrap:wrap; }
  .toolbar .tool-top .btn{ flex:1 1 100%; }
}
@media(max-width:420px){
  .two{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- a report on paper ---------- */
@media print{
  @page{ margin:12mm; }
  body > *:not(#printArea){ display:none !important; }
  html,body{ height:auto; background:#fff; display:block; min-height:0; }
  #printArea{ display:block; font:12px/1.4 "IBM Plex Sans","Segoe UI",system-ui,sans-serif; color:#000; }
  #printArea h1{ font:600 20px/1.2 "Source Serif 4",Georgia,serif; margin:0 0 2px; }
  #printArea .pa-biz{ font-size:13px; font-weight:600; }
  #printArea .pa-small{ font-size:11px; color:#333; white-space:pre-line; }
  #printArea .pa-when{ font-size:12px; margin:6px 0 10px; }
  #printArea h2{ font:600 14px/1.2 "Source Serif 4",Georgia,serif; margin:12px 0 2px; }
  #printArea table{ width:100%; border-collapse:collapse; margin-bottom:12px; font-size:12px; }
  #printArea th, #printArea td{ padding:4px 6px; border-bottom:.5pt solid #999; text-align:left; vertical-align:top; background:none; font-family:inherit; }
  #printArea th{ font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-bottom:1pt solid #000; color:#000; }
  #printArea .n{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
  #printArea .d{ white-space:nowrap; color:#000; }
  #printArea tr.head td{ font-weight:700; font-size:12.5px; padding-top:10px; border-bottom:none; }
  #printArea tr.sub td{ font-weight:600; }
  #printArea tr.sum td{ font-weight:700; border-top:.5pt solid #000; }
  #printArea tr.grand td{ font-weight:700; font-size:13px; border-top:1pt solid #000; border-bottom:2.5pt double #000; }
  #printArea tr{ break-inside:avoid; }
  #printArea small{ font-size:9.5px; margin-left:2px; color:#000; }
  #printArea .pa-note{ font-size:10.5px; color:#333; margin-top:4px; }
}

/* ---------- the first screen's figures ----------
   "Money you have" stands at the left, as tall as the tiles beside it, which sit two to
   a row; the tax figure, when the book keeps one, runs under them. */
@media(min-width:641px){
  #homeStats{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); }
  #homeStats .stat.main{ grid-column:auto; grid-row:span 2; display:flex; flex-direction:column; justify-content:center; padding:20px 22px; }
  #homeStats .stat.main:nth-last-child(6){ grid-row:span 3; }
  #homeStats .stat:nth-child(6):last-child{ grid-column:span 2; }
  #homeStats .stat.main dd{ font-size:46px; }
}
.rep-acts{ margin-left:auto; }
/* a form reads best in a column that is not too wide */
#tab-books .panel{ max-width:860px; }

/* ---------- on a phone, nothing is wider than the screen ---------- */
.rep-layout{ grid-template-columns:minmax(0,1fr); }
@media(min-width:1100px){ .rep-layout{ grid-template-columns:252px minmax(0,1fr); } }
#homeStats .stat:nth-child(6):last-child{ grid-column:span 2; }
@media(max-width:640px){
  .rep-dates{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .rep-dates input{ width:100%; padding:0 8px; }
  .rep-dates input[hidden] + span{ grid-column:1; }
}
/* the first screen has its own buttons for a new entry, so the round one stays away */
body.on-home .fab{ display:none !important; }
.rep-filter, .rep-filter .chips{ min-width:0; }
@media(max-width:640px){
  .rep-tools > .rep-filter{ flex:1 1 100%; max-width:100%; }
  .rep-filter .chips{ flex:1 1 100%; max-width:calc(100% + 32px); }
}