/* app.css
 *
 * Two people who read this app are in their seventies and use it a few times a
 * month, on a Mac and on a phone. So: generous type, nothing under 13px, every
 * target big enough to hit without aiming - but quiet. One strong button per
 * screen, thin lines, and as few boxes-inside-boxes as possible. The printed
 * page is at the bottom of the file and is the only place that thinks in
 * millimetres.
 */

:root{
  --bg:#efebe3;
  --panel:#f8f6f1;
  --surface:#ffffff;
  --line:#cfc8b7;
  --line-soft:#e4dfd3;
  --ink:#191811;
  --ink-2:#33301f;
  --dim:#57533f;
  --dim-2:#6b6656;
  --accent:#7d5405;
  --accent-2:#e0aa3c;
  --accent-2h:#d59a26;
  --accent-line:#b58c2a;
  --accent-wash:rgba(224,170,60,.22);
  --ok:#2c6b39;
  --ok-bg:#e7f1e6;
  --danger:#992c22;
  --danger-bg:#fbf0ef;
  --paper:#ffffff;
  --paper-edge:#e2ddd0;
  --doc-ink:#16150f;
  --doc-dim:#6d6a5e;
  --doc-rule:#cfcabd;
  --font-doc:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-display:'Fraunces','Iowan Old Style',Palatino,Georgia,serif;
  --radius:9px;
  --tap:46px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100%;
  font-family:var(--font-doc);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.55;
}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--accent-line);outline-offset:2px}
h1,h2,h3,p{margin:0}

/* ---------- lock screen ---------- */
.gate{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--bg);
}
.gatecard{
  width:100%;max-width:390px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:30px;box-shadow:0 18px 44px -18px rgba(40,35,20,.28);
}
.gatecard h1{margin:0 0 8px;font-family:var(--font-display);font-weight:600;font-size:24px}
.gatecard h1 em{font-style:normal;color:var(--accent)}
.gatecard p{margin:0 0 20px;font-size:15px;color:var(--dim)}
.gatecard input{margin-bottom:14px;font-size:22px;letter-spacing:.18em;text-align:center}
.gatemsg{margin:0 0 14px !important;font-size:15px;min-height:1.3em}
.gatemsg.bad{color:var(--danger);font-weight:600}
.gatemsg.busy{color:var(--dim)}
body.locked .appbar,body.locked .screen{display:none !important}
/* Until the server has said whether you are signed in, show nothing rather
   than a lock screen that disappears a moment later. */
body.booting > *{visibility:hidden}

/* ---------- the bar at the top ----------
   The same on every screen: where you are on the left, what you can do from
   anywhere on the right. */
.appbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;padding-top:max(9px, env(safe-area-inset-top));
  background:var(--panel);border-bottom:1px solid var(--line-soft);
}
.appbrand{
  font-family:var(--font-display);font-weight:600;font-size:19px;white-space:nowrap;
  background:none;border:none;padding:6px 4px;cursor:pointer;color:var(--ink);
}
.appbrand em{font-style:normal;color:var(--accent)}
.appwhere{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.appwhere:empty{display:none}
.appbar .spacer{flex:1 1 auto}
.backbtn{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  font-size:15px;font-weight:600;padding:8px 14px;border-radius:var(--radius);
  cursor:pointer;min-height:42px;white-space:nowrap;max-width:46vw;
  overflow:hidden;text-overflow:ellipsis;
}
.backbtn:hover{border-color:var(--accent-line);color:var(--accent)}
.barnew{min-height:42px;padding:8px 16px;font-size:15px}
.barbtn{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid transparent;border-radius:var(--radius);
  padding:8px 11px;min-height:42px;cursor:pointer;
  font-size:15px;font-weight:600;color:var(--dim);white-space:nowrap;
}
.barbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.barbtn:hover{background:var(--surface);border-color:var(--line-soft);color:var(--ink)}
.barbtn[aria-current]{background:var(--surface);border-color:var(--line);color:var(--ink)}

/* On anything narrower than a desktop the brand gives way to the name of the
   screen once you are inside something, and New invoice lives on home only. */
@media (max-width:959px){
  body:not([data-screen="list"]) .appbrand{display:none}
  body:not([data-screen="list"]) .barnew{display:none}
  /* home and the full list share one scroll here; no gap between them */
  #scHome .column{padding-bottom:4px}
}

/* ---------- the screens ---------- */
.screen{display:none}
.screen[data-on]{display:block}
.workbench{min-height:0}
.column{max-width:720px;margin:0 auto;padding:26px 20px 80px}
#scList .column{padding-top:0}
.screen-h{font-family:var(--font-display);font-size:30px;font-weight:600;margin:0 0 18px;line-height:1.15}
.screen-h:focus{outline:none}
.blockhead{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin:32px 0 10px;
}
.listhead{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin:8px 0 12px;
}
.lead{margin:0 0 14px;font-size:15px;color:var(--dim)}
.listlead{margin:0 0 12px;font-size:14.5px;color:var(--dim)}
.hint{margin:10px 0 0;font-size:14px;color:var(--dim-2)}
.fieldnote{margin:-8px 0 16px;font-size:14px;color:var(--dim-2)}
.errline{
  margin:12px 0 0;padding:11px 13px;font-size:14.5px;
  background:var(--danger-bg);border:1px solid #dfb9b4;border-radius:var(--radius);color:#7d251d;
}
/* the same line, when what it has to say is good news */
.errline.good{background:var(--ok-bg);border-color:#9ec19c;color:#24522e}

/* ---------- home ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 6px}
.metric{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px}
.metric-label{font-size:13.5px;color:var(--dim)}
.metric-val{
  font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.25;
  font-variant-numeric:tabular-nums;margin-top:4px;
}
.metric-sub{font-size:13.5px;color:var(--dim-2);margin-top:2px}
.metric.alert{border-color:#e6c3be;background:var(--danger-bg)}
.metric.alert .metric-val{color:var(--danger)}
.todo-row{
  display:flex;align-items:center;gap:14px;padding:13px 15px;
  border-bottom:1px solid var(--line-soft);
}
.todo-row:last-child{border-bottom:none}
.todo-what{flex:1 1 auto;min-width:0}
.todo-what b{display:block;font-weight:600}
.todo-what span{display:block;font-size:14px;color:var(--dim)}
.todo-row .btn{flex:0 0 auto}
.resume{
  background:#fff8ea;border:1px solid #e4cf9c;border-radius:12px;padding:16px;margin-bottom:22px;
}
.resume-lead{font-size:14.5px;color:#6b4704;margin:0 0 4px}
.resume-what{font-size:17px;color:var(--ink);margin:0 0 14px}
.resume-what b{font-variant-numeric:tabular-nums}
.empty{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:24px;
}
.empty h2{font-family:var(--font-display);font-size:22px;font-weight:600;margin-bottom:6px}
.empty p{color:var(--dim);margin-bottom:16px}

/* ---------- forms ---------- */
label{display:block;margin-bottom:16px}
label > span.f,span.f{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
input,textarea,select{
  width:100%;font-family:var(--font-doc);font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;min-height:var(--tap);transition:border-color .15s ease, box-shadow .15s ease;
}
/* four lines of address without a scrollbar - that is what one is here */
textarea{resize:vertical;min-height:132px;line-height:1.6}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 4px var(--accent-wash)}
input::placeholder,textarea::placeholder{color:#a49e8c}
input:disabled,select:disabled{background:#eeebe2;color:var(--dim-2);cursor:not-allowed;border-style:dashed}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > label{flex:1 1 150px}
.date-line{max-width:230px}

/* an amount, with the currency shown rather than asked for */
.withcur{display:flex;align-items:stretch;max-width:260px}
.withcur .cur{
  display:flex;align-items:center;padding:0 13px;font-weight:700;color:var(--dim);
  background:#f3f0e8;border:1px solid var(--line);border-right:none;
  border-radius:var(--radius) 0 0 var(--radius);
}
.withcur input{border-radius:0 var(--radius) var(--radius) 0;font-variant-numeric:tabular-nums}
.withcur .cur:empty{display:none}
.withcur .cur:empty + input{border-radius:var(--radius)}

/* a value you normally only read, with a way in when you mean it */
.fieldline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:16px;padding:12px 14px;min-height:var(--tap);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.fieldline > span.f{margin:0;flex:0 0 auto}
.fieldline > b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.linkbtn{
  background:none;border:none;padding:6px 2px;cursor:pointer;
  font-size:14.5px;font-weight:600;color:var(--accent);
  text-decoration:underline;text-underline-offset:4px;
}
.fieldline .linkbtn{margin-left:auto}
.linkbtn:hover{color:var(--ink)}

.note{font-size:14.5px;color:var(--dim);margin:-8px 0 18px}
.note b{color:var(--accent);font-weight:700}

/* who the invoice is made out to, said in full rather than by short name */
.wholine{
  margin:-8px 0 18px;padding:12px 14px;font-size:14.5px;color:var(--dim);
  background:var(--panel);border-left:3px solid var(--line);border-radius:0;
}
.wholine b{display:block;font-size:16px;color:var(--ink);font-weight:600;margin-bottom:2px}
.wholine span{display:block}
.wholine em{display:block;margin-top:6px;font-style:normal;font-size:14px;color:var(--dim-2)}
.wholine.missing{border-left-color:var(--accent-line);background:#fff6e3}
.wholine:empty{display:none}

/* set once, then left alone for years */
.tucked{margin:6px 0 4px;border-top:1px solid var(--line-soft);padding-top:6px}
.tucked > summary{
  cursor:pointer;padding:12px 2px;min-height:var(--tap);display:flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;color:var(--dim);list-style:none;
}
.tucked > summary::-webkit-details-marker{display:none}
.tucked > summary::before{content:'›';font-size:19px;line-height:1;transition:transform .15s ease}
.tucked[open] > summary::before{transform:rotate(90deg)}
.tucked > summary:hover{color:var(--accent)}
.tucked[open] > summary{margin-bottom:10px}

/* ---------- buttons ----------
   Flat. The yellow is kept for the one thing a screen is for. */
.btn{
  font-size:15.5px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  padding:11px 16px;border-radius:var(--radius);cursor:pointer;min-height:var(--tap);transition:.15s;
}
.btn:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-full{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn{flex:1 1 160px}
.btn-key{background:var(--accent-2);color:#241a03;border-color:var(--accent-2);font-weight:700}
.btn-key:hover:not(:disabled){background:var(--accent-2h);border-color:var(--accent-2h);color:#241a03}
.btn-full.btn-key{font-size:17px;min-height:52px}
.btn-danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger);background:var(--danger-bg)}

.actions{margin:22px 0 4px}
.actions .btn-full + .btn-full{margin-top:10px}
/* While writing, Save stays in reach at the foot of the screen instead of a
   long scroll below the lines - it was a thousand pixels down on a laptop. */
#invEdit .actions,#rcptEdit .actions{
  position:sticky;bottom:0;z-index:5;
  margin:22px -20px 0;padding:12px 20px 14px;
  background:var(--bg);border-top:1px solid var(--line-soft);
}
#invEdit .actions .hint,#rcptEdit .actions .hint{margin-top:8px;font-size:13.5px}
/* With the page docked beside the form, "see how it will print" is already
   on screen. */
@media (min-width:1280px){
  #scInvoice[data-mode="write"] #paperActions,
  #scReceipt[data-mode="write"] #rcptPaperActions{display:none}
}
.paper-actions{margin:20px 0 4px}
.quiet-zone{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:10px;
}
.quiet-zone .btn{flex:1 1 180px;font-size:14.5px}
.quiet-zone .hint{flex:1 1 100%;margin-top:2px}

/* ---------- a document screen ----------
   Status, then the number and amount, then what you can do with it, then the
   details. While writing, the print buttons move below the form: there is
   nothing to print until it is saved. */
#scInvoice .column,#scReceipt .column{display:flex;flex-direction:column}
#scInvoice[data-mode="write"] #paperActions,
#scReceipt[data-mode="write"] #rcptPaperActions{order:1}
#scInvoice[data-mode="write"] #payBlock,
#scInvoice[data-mode="write"] #invQuiet,
#scInvoice[data-mode="write"] #discardWrap,
#scReceipt[data-mode="write"] #rcptQuiet{order:2}

/* ---------- the status pill ---------- */
.status{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;max-width:100%;
  border:1px solid var(--line);border-radius:18px;
  padding:6px 14px 6px 12px;margin-bottom:16px;background:var(--surface);
}
.status:focus{outline:none}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--dim-2);flex:0 0 auto}
.status .txt{font-size:14.5px;color:var(--dim);min-width:0}
.status.good{border-color:#b7d3b4;background:var(--ok-bg)}
.status.good .dot{background:var(--ok)}
.status.good .txt{color:#24522e;font-weight:600}
.status.pending{border-color:#e4cf9c;background:#fff6e3}
.status.pending .dot{background:var(--accent-2)}
.status.pending .txt{color:#6b4704;font-weight:600}
/* Late rent is not an error and not a cancellation, so it gets its own look:
   noticeable enough to act on, calm enough to live with for a week. */
.status.late{border-color:#e6c3be;background:var(--danger-bg)}
.status.late .dot{background:var(--danger)}
.status.late .txt{color:#7d251d;font-weight:600}
.status.void{border-color:#d8c4c1;background:#f7efee}
.status.void .dot{background:var(--danger)}
.status.void .txt{color:var(--danger);font-weight:600}

.checks{
  margin:18px 0 0;padding:12px 14px;background:#fff5e2;border:1px solid #e3cd9c;border-radius:var(--radius);
  color:#6b4704;font-size:14.5px;
}
.checks b{font-weight:700}

/* ---------- a record, read as a document ---------- */
.docline{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.docline-id{flex:1 1 220px;min-width:0}
.doc-no{
  font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.doc-no:focus{outline:none}
.doc-sub{margin-top:6px;font-size:15px;color:var(--dim)}
.nw{white-space:nowrap}
.doc-amt{
  font-family:var(--font-display);font-size:28px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:3px;
}
.party{
  font-size:16px;line-height:1.6;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:14px 16px;
}
.party-strong{font-weight:600}
.charges{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.charge{
  display:flex;align-items:baseline;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
}
.charge:last-child{border-bottom:none}
.charge-what{flex:1 1 auto;min-width:0;font-size:16px}
.charge-sub{display:block;font-size:14px;color:var(--dim)}
.charge-amt{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:16px;white-space:nowrap;
  margin-left:auto;
}
.charge-amt.plain{font-weight:500;color:var(--ink-2)}

/* ---------- line items ---------- */
.items.many .item{
  border:1px solid var(--line);border-radius:var(--radius);padding:14px;
  margin-bottom:12px;background:var(--surface);
}
.item-head{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.item-no{font-size:14px;font-weight:700;color:var(--ink-2)}
.iconbtn{
  background:var(--surface);border:1px solid var(--line);color:var(--dim);cursor:pointer;
  width:42px;height:42px;border-radius:7px;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.item-head .iconbtn:first-of-type{margin-left:auto}
.iconbtn:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent)}
.iconbtn:disabled{opacity:.35;cursor:not-allowed}
.iconbtn.del:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-bg)}
.amt-preview{font-size:14.5px;font-weight:700;color:var(--accent);text-align:right;margin-top:-6px}
.itemtools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
.itemtools .btn{flex:0 1 auto}
.runningtotal{margin:16px 0 6px;text-align:right;font-size:15px;color:var(--dim)}
.runningtotal b{
  font-family:var(--font-display);font-size:22px;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-left:8px;
}

/* ---------- lists of invoices, receipts and names ---------- */
.ledger{border:1px solid var(--line-soft);border-radius:12px;background:var(--surface);overflow:hidden;margin-bottom:14px}
.ledger-empty{padding:20px;font-size:15px;color:var(--dim-2);text-align:center}
.led-row{
  display:grid;grid-template-columns:auto 1fr auto 16px;
  grid-template-areas:"no meta amt chev";
  align-items:center;gap:3px 14px;width:100%;text-align:left;
  padding:14px 15px;background:var(--surface);border:none;
  border-bottom:1px solid var(--line-soft);cursor:pointer;font:inherit;color:inherit;
  min-height:var(--tap);
}
.led-row:last-child{border-bottom:none}
.led-row:hover{background:#fffaf0}
.led-row:focus-visible{outline-offset:-3px}
.led-no{grid-area:no;font-size:16.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.led-meta{grid-area:meta;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.led-when,.led-who{color:var(--dim);font-size:14px}
.led-sub{flex:1 1 100%;color:var(--dim-2);font-size:14px}
.led-amt{grid-area:amt;font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:15.5px;font-weight:700;white-space:nowrap}
.chev{grid-area:chev;color:var(--dim-2);font-size:22px;line-height:1;text-align:right}
.tag{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
/* How late, beside what it is. Kept out of the status pill deliberately: the
   pill says whether the money arrived, this says whether it arrived on time. */
.late-mark{font-size:14px;color:var(--dim-2);white-space:nowrap}
.late-mark.late{color:var(--danger);font-weight:700}
.listlead b.late{color:var(--danger);font-weight:700}
.tag.paid{background:var(--ok-bg);color:var(--ok)}
.tag.due{background:#fbeee0;color:#7d4d0a}
.tag.void{background:#f0e6e5;color:var(--danger)}
.led-row[aria-current]{background:#fff6e3;box-shadow:inset 3px 0 0 var(--accent-2)}
.led-row[aria-current] .led-no{color:var(--accent)}

/* ---------- whose invoices ---------- */
.whose{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.whose:empty{display:none}
.chip{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  font-size:14.5px;font-weight:600;padding:8px 16px;border-radius:24px;cursor:pointer;min-height:42px;
}
.chip:hover{border-color:var(--accent-line);color:var(--accent)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fdfbf5}

/* ---------- the currency ---------- */
.curform{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.cur-line{margin-bottom:0;max-width:230px;flex:1 1 150px}
.curform .btn{flex:0 0 auto}

/* ---------- the name and address editor ---------- */
.modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(30,27,18,.45);overflow-y:auto;
}
.modalcard{
  width:100%;max-width:460px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:24px;box-shadow:0 20px 50px -16px rgba(40,35,20,.45);
  max-height:100%;overflow-y:auto;
}
.modalcard h2{margin:0 0 18px;font-family:var(--font-display);font-size:23px;font-weight:600}
.modalcard .btn-row{margin-top:20px}
.modalcard hr{border:none;border-top:1px solid var(--line-soft);margin:22px 0 16px}

/* ================================================================= the page
   Summoned: full window, as large as it will go, with the print button on it.
   On a very wide screen it is docked instead - see the bottom of the file. */
.paperview{position:fixed;inset:0;z-index:80;display:none;flex-direction:column}
body.paper-open{overflow:hidden}
body.paper-open .paperview{display:flex}
.paperbackdrop{position:absolute;inset:0;background:rgba(30,27,18,.55)}
.paperbar{
  position:relative;z-index:1;flex:0 0 auto;
  display:flex;align-items:center;gap:12px;
  padding:9px 18px;padding-top:max(9px, env(safe-area-inset-top));
  background:var(--panel);border-bottom:1px solid var(--line-soft);
}
.papertitle{
  flex:1 1 auto;text-align:center;min-width:0;
  font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.canvas{
  position:relative;z-index:1;flex:1 1 auto;min-height:0;
  overflow:auto;padding:16px;
  background-color:#e7e2d7;
}
.canvas::-webkit-scrollbar{width:12px;height:12px}
.canvas::-webkit-scrollbar-thumb{background:#cbc4b2;border-radius:10px;border:4px solid #e7e2d7}
.fitbox{margin:0 auto}

/* ---------- sheet ---------- */
.sheet{
  width:210mm;min-width:210mm;min-height:297mm;background:var(--paper);color:var(--doc-ink);
  padding:20mm 18mm;box-shadow:0 12px 34px -16px rgba(40,35,20,.35), 0 0 0 1px var(--paper-edge);
  display:none;transform-origin:top left;transform:scale(var(--sheet-scale,1));
}
.sheet.active{display:block}

.doc{font-size:11pt;line-height:1.5}
.letterhead{font-size:10.5pt;line-height:1.6}
.letterhead .lh-name{font-weight:600}
.letterhead.right{text-align:right}
.rule{height:1px;background:var(--doc-rule);margin:14mm 0 0}

.doctitle{font-family:var(--font-display);font-size:22pt;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:11mm 0 10mm}
.doctitle.center{text-align:center}
.doctitle.flush{margin:0}

.meta{display:flex;justify-content:space-between;gap:16mm;align-items:flex-start}
.meta.receipt-head{margin-top:11mm;align-items:center}
.meta-block{font-size:10.5pt;line-height:1.62;max-width:95mm}
.meta-label{font-size:8pt;letter-spacing:.13em;text-transform:uppercase;color:var(--doc-dim);margin-bottom:2.5mm;font-weight:600}
.party-name{font-weight:600}
.kv{display:grid;grid-template-columns:auto auto;gap:1.6mm 9mm;font-size:10.5pt;text-align:right;white-space:nowrap;margin:0}
.kv dt{color:var(--doc-dim)}
.kv dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}

.sheet table{width:100%;border-collapse:collapse;margin-top:11mm;font-size:10.5pt}
.sheet thead th{font-size:8pt;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--doc-dim);text-align:left;padding:0 0 2.6mm;border-bottom:1px solid var(--doc-rule)}
.sheet thead th.n{text-align:right}
.sheet tbody td{padding:4.2mm 0;border-bottom:1px solid #eae6da;vertical-align:top}
.sheet tbody td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.li-name{font-weight:500}
.li-sub{color:var(--doc-dim);font-size:9.5pt;margin-top:1mm}
.col-no{width:8mm;color:var(--doc-dim)}
.col-qty{width:22mm}
.col-rate{width:28mm}
.col-amt{width:32mm}

.totals{display:flex;justify-content:flex-end;margin-top:7mm}
.totals-inner{min-width:78mm}
.total-row{display:flex;justify-content:space-between;align-items:baseline;padding-top:4mm;margin-top:1mm;border-top:1.6px solid var(--doc-ink)}
.total-label{font-size:9pt;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.total-val{font-family:var(--font-display);font-size:15pt;font-weight:600;font-variant-numeric:tabular-nums}

.received{border:1.6px solid var(--doc-ink);border-radius:2px;padding:5mm 8mm;text-align:right;min-width:62mm}
.received .meta-label{margin-bottom:1.5mm}
.received .amt{font-family:var(--font-display);font-size:17pt;font-weight:600;font-variant-numeric:tabular-nums}

.field-grid{display:grid;grid-template-columns:38mm 1fr;gap:5mm 6mm;margin-top:10mm;font-size:10.5pt;align-items:baseline}
.field-grid.tight{margin-top:5mm}
.field-grid .k{color:var(--doc-dim)}
.field-grid .v{font-weight:500}
.section-head{font-size:8pt;letter-spacing:.13em;text-transform:uppercase;color:var(--doc-dim);margin:12mm 0 0;padding-bottom:2mm;border-bottom:1px solid var(--doc-rule);font-weight:600}
.r-to{margin-top:14mm}

.i-note{
  margin-top:12mm;padding-top:4mm;border-top:1px solid var(--doc-rule);
  font-size:10pt;line-height:1.65;max-width:120mm;
}
.note-label{
  font-size:8pt;letter-spacing:.13em;text-transform:uppercase;color:var(--doc-dim);
  font-weight:600;margin-bottom:2.5mm;
}
/* ================================================== desktop: one shell

   The invoice list is down the left of every screen and never moves; only the
   right-hand side changes as you go from home to an invoice to a receipt. The
   window is the frame and each side scrolls on its own. */
@media (min-width:960px){
  body:not(.locked){display:flex;flex-direction:column;height:100dvh;overflow:hidden}
  .appbar{position:static;flex:0 0 auto;padding-left:18px;padding-right:14px}
  .appwhere{display:none}
  /* Back is only for a receipt, which belongs to an invoice. Home is the brand. */
  body:not([data-screen="receipt"]) .backbtn{display:none}
  .workbench{flex:1 1 auto;min-height:0;display:flex;align-items:stretch}
  .screen{min-width:0;overflow-y:auto;overscroll-behavior:contain}
  .screen[data-on]{flex:1 1 auto}

  #scList{
    display:block;order:-1;flex:0 0 clamp(290px, 24vw, 360px);
    background:var(--panel);border-right:1px solid var(--line-soft);
  }
  #scList .column{max-width:none;padding:14px 14px 40px}
  #scList .listhead{margin-top:6px}
  #scList .chip{padding:6px 12px;font-size:14px;min-height:36px}
  #scList .ledger{border-radius:10px}
  #scList .led-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"no amt" "meta meta";
    gap:3px 10px;padding:12px 13px;
  }
  #scList .chev{display:none}
  .column{padding-top:30px}
}

/* ================================================== very wide: the page, docked

   With room to spare the printed page sits beside the document as a third
   column, so the details are read off the page itself and are not repeated
   beside it. Below this width the page is summoned instead - squeezed into
   less it would be too small to read. */
@media (min-width:1280px){
  body[data-screen="invoice"]:not(.locked):not(.paper-open),
  body[data-screen="receipt"]:not(.locked):not(.paper-open){
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(520px, 40vw, 880px);
    grid-template-rows:auto minmax(0,1fr);
  }
  body[data-screen="invoice"]:not(.paper-open) .appbar,
  body[data-screen="receipt"]:not(.paper-open) .appbar{grid-column:1 / -1}
  body[data-screen="invoice"]:not(.paper-open) .paperview,
  body[data-screen="receipt"]:not(.paper-open) .paperview{
    display:flex;position:static;inset:auto;z-index:auto;min-height:0;
    border-left:1px solid var(--line-soft);
  }
  body:not(.paper-open) .paperbackdrop,
  body:not(.paper-open) .paperbar{display:none}
  /* Docked, the page is a preview; clicking it opens it full size. */
  body:not(.paper-open) .fitbox{cursor:zoom-in}
  /* The page beside it already says who and what. */
  body[data-screen="invoice"]:not(.paper-open) #invRead,
  body[data-screen="receipt"]:not(.paper-open) #rcptRead{display:none !important}
}

/* ---------- narrow screens ---------- */
@media (max-width:620px){
  body{font-size:16px}
  .appbar{gap:6px;padding:7px 10px;padding-top:max(7px, env(safe-area-inset-top))}
  .appbrand{font-size:17px}
  .barlabel{display:none}
  .barbtn{padding:8px 9px}
  .barnew{padding:8px 13px}
  .column{padding:20px 15px 70px}
  #scList .column{padding-top:0}
  #invEdit .actions,#rcptEdit .actions{margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px}
  /* one figure per row, label on the left and amount on the right, so an
     amount never breaks across lines in a half-width card */
  .metrics{grid-template-columns:1fr;gap:8px}
  .metric{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 12px;padding:12px 14px}
  .metric-label{grid-column:1;font-weight:600;color:var(--ink-2)}
  .metric-val{grid-column:2;grid-row:1 / span 2;font-size:21px;margin:0;align-self:center;white-space:nowrap}
  .metric-sub{grid-column:1;margin:0}
  .screen-h{font-size:26px}
  .doc-no{font-size:28px}
  .doc-amt{font-size:24px}
  .row > label{flex:1 1 100%}
  .btn-row .btn{flex:1 1 100%}
  .quiet-zone .btn{flex:1 1 100%}
  .chip{padding:8px 14px;font-size:14.5px}
  .date-line,.withcur{max-width:none}
  .todo-row{flex-wrap:wrap}
  .todo-row .btn{flex:1 1 100%}

  /* two tidy rows rather than a ragged wrap */
  .led-row{
    grid-template-columns:1fr auto 16px;
    grid-template-areas:
      "no   amt  chev"
      "meta meta chev";
    gap:4px 12px;
  }
  .canvas{padding:10px}
  .paperbar{padding:7px 13px;padding-top:max(7px, env(safe-area-inset-top))}
  .paperbar .btn{font-size:14px;padding:10px 12px}
}

/* ---------- print ---------- */
@page{size:A4;margin:0}
@media print{
  /* The desktop layout makes the window a frame with panes scrolling inside
     it. Paper has no window and does not scroll, so that comes off first. */
  html,body{display:block;height:auto;overflow:visible;background:#fff}
  .workbench{display:block}
  /* Only the paper prints. A stray Ctrl-P anywhere else must not put a stale
     document on the printer, so everything else is taken out. */
  .appbar,.screen,.gate,.modal,.paperbar,.paperbackdrop{display:none !important}
  .paperview{display:none !important}
  body[data-screen="invoice"] .paperview,
  body[data-screen="receipt"] .paperview{display:block !important;position:static;inset:auto}
  .canvas{overflow:visible;padding:0;background:#fff;display:block}
  .fitbox{display:block;width:auto !important;height:auto !important;margin:0}
  .sheet{box-shadow:none;margin:0;width:210mm;min-height:297mm;background:#fff;transform:none !important}
  .sheet:not(.active){display:none !important}
}