/* RECEIPTS - the look.
   The subject is a thermal till receipt: cold white paper, grey dot print that
   fades, a serrated torn edge, TOTAL in double width. The register is Off-White's,
   because he asked for it: black and white, labels quoted flatly in caps, and one
   colour per business - each business's own colour, never an invented one.
   The LOG screen stays plain and fast. The boldness is spent ONCE: the totals
   receipt printing over the monument plate. */

@font-face{font-family:'Switzer';src:url('fonts/Switzer-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/IBMPlexMono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#F1F1EE; --ink:#0B0B0B; --mid:#5C5C58; --dim:#95958F; --line:rgba(11,11,11,.16);
  --night:#0B0B0B; --calm:#60A5FA;
  --biz:#B4560E;
  --disp:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
  --nav:calc(62px + var(--safe-b));
  /* the motif: a till receipt's serrated tear, as paper-coloured teeth */
  --tear-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M0 0H14V1L7 10L0 1Z' fill='%23F1F1EE'/%3E%3C/svg%3E");
  --tear-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M0 10H14V9L7 0L0 9Z' fill='%23F1F1EE'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.4 var(--disp);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;border-radius:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--biz);outline-offset:2px}

/* Grain: thermal paper, not a screen. Decorative, so it never takes a tap. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.08;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

.screen{position:relative;z-index:1;width:min(560px,100%);margin-inline:auto;padding:12px 16px calc(var(--nav) + 30px)}

/* ── masthead + the business switch ───────────────────────────────────── */
.mast{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;margin:0 0 8px}
.mark{font:800 16px/1 var(--disp);letter-spacing:.005em;margin:0}
.meta{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.biz{display:grid;grid-template-columns:1fr 1fr;border:2px solid currentColor;margin:0 0 18px}
.biz button{min-height:60px;padding:9px 10px;font:800 14px/1.02 var(--disp);text-transform:uppercase;letter-spacing:.01em;
  text-align:left;display:flex;align-items:flex-end;overflow-wrap:anywhere}
.biz button+button{border-left:2px solid currentColor}
.biz button[aria-pressed="true"]{background:var(--c);color:#fff}
.mode{display:flex;gap:18px;margin:-6px 0 14px}
.mode button{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);min-height:40px}
.mode button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* ── labels and fields ────────────────────────────────────────────────── */
.lbl{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin:0 0 6px}
.f{margin:0 0 16px}
.in{display:block;width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;padding:6px 0 8px;
  font:500 19px/1.25 var(--disp);border-radius:0;-webkit-appearance:none;appearance:none}
.in:focus{outline:0;border-bottom-color:var(--biz)}
.in::placeholder{color:var(--dim);opacity:1}
textarea.in{resize:vertical;min-height:84px;font-size:16px;line-height:1.45;border:2px solid var(--ink);padding:10px 12px}
textarea.in:focus{border-color:var(--biz)}
.amt{display:flex;align-items:baseline;gap:4px;border-bottom:3px solid var(--ink)}
.amt:focus-within{border-bottom-color:var(--biz)}
.amt b{font:800 32px/1 var(--disp)}
.amt input{flex:1;min-width:0;border:0;background:transparent;padding:2px 0 6px;font:800 54px/1.05 var(--disp);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;border-radius:0}
.amt input:focus{outline:0}
.amt input::placeholder{color:#CFCFCA}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── the camera ───────────────────────────────────────────────────────── */
.snap{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.snap label{position:relative;min-height:66px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;
  gap:10px;font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;user-select:none}
.snap label:active{background:var(--ink);color:var(--paper)}
.snap input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.snap svg{width:22px;height:22px;flex:0 0 auto}
.shots{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.shot{position:relative;width:78px;height:100px;border:1.5px solid var(--ink);background:#fff;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .pdf{height:100%;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--mono);letter-spacing:.1em}
.shot button{position:absolute;top:0;right:0;width:40px;height:40px;display:flex;align-items:flex-start;justify-content:flex-end}
.shot button span{width:24px;height:24px;background:var(--ink);color:var(--paper);font:700 13px/24px var(--mono);text-align:center}

/* ── chips ────────────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{min-height:44px;padding:0 13px;border:1.5px solid var(--ink);font:500 12px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;background:transparent;position:relative}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chip.hot{border-color:var(--biz);color:var(--biz);font-weight:700}
.chip input[type="date"]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

/* ── the one button ───────────────────────────────────────────────────── */
.go{width:100%;min-height:66px;background:var(--biz);color:#fff;font:800 17px/1.1 var(--disp);text-transform:uppercase;
  letter-spacing:.01em;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;margin:6px 0 4px;text-align:left}
.go small{font:500 11px/1.2 var(--mono);letter-spacing:.06em;opacity:.9;text-align:right}
.go:active{filter:brightness(.88)}
.msg{font:500 13px/1.35 var(--mono);color:var(--biz);min-height:18px;margin:6px 0 0}
.quiet{font:500 12px/1.4 var(--mono);color:var(--mid);letter-spacing:.02em}
.link{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mid);min-height:44px;
  display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.line-btn{min-height:52px;border:2px solid currentColor;padding:0 16px;font:700 12px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}

/* ── nav and the undo strip ───────────────────────────────────────────── */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--night);display:grid;grid-template-columns:repeat(4,1fr);
  padding:0 env(safe-area-inset-right,0px) var(--safe-b) env(safe-area-inset-left,0px)}
.tabs a{min-height:62px;display:flex;align-items:center;justify-content:center;font:500 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:#8D8D88;text-decoration:none;position:relative}
.tabs a[aria-current="page"]{color:#fff}
.tabs a[aria-current="page"]::before{content:'';position:absolute;top:0;left:22%;right:22%;height:3px;background:var(--biz)}
body.typing .tabs{display:none}
.strip{position:fixed;left:12px;right:12px;bottom:calc(var(--nav) + 10px);z-index:30;max-width:536px;margin-inline:auto;
  background:var(--ink);color:var(--paper);display:flex;align-items:center;min-height:54px;padding-left:14px;
  font:500 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;box-shadow:0 16px 34px -14px rgba(0,0,0,.55)}
.strip span{flex:1;padding:8px 0}
.strip button{min-height:54px;padding:0 16px;color:var(--paper);font:700 12px/1 var(--mono);letter-spacing:.1em;
  border-left:1px solid rgba(255,255,255,.22)}
body.typing .strip{bottom:10px}

/* ── the list ─────────────────────────────────────────────────────────── */
.find{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--ink);margin:0 0 12px}
.find input{flex:1;border:0;background:transparent;padding:10px 0;font:500 17px/1.2 var(--disp);min-width:0}
.find input:focus{outline:0}
.month{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:22px 0 2px;padding:0 0 7px;
  border-bottom:2px solid var(--ink);font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.row{display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:start;padding:12px 0;border-bottom:1px dashed var(--line);
  text-decoration:none;color:inherit;min-height:58px}
.row .d{font:500 12px/1.3 var(--mono);color:var(--mid);text-transform:uppercase;padding-top:2px}
.row .w{font:600 16px/1.25 var(--disp);overflow-wrap:anywhere;min-width:0}
.row .p{display:block;font:400 14px/1.35 var(--disp);color:var(--mid);margin-top:2px}
.row .a{font:700 15px/1.3 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:1px}
.row.void .w,.row.void .a{text-decoration:line-through;color:var(--dim)}
.tag{display:inline-block;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 5px;
  border:1px solid currentColor;margin:5px 5px 0 0;color:var(--mid)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--calm);vertical-align:middle;margin-left:6px}
.empty{padding:40px 0;text-align:center}
.empty img{width:min(260px,70%);margin:0 auto 18px;filter:grayscale(1) contrast(1.05)}

/* ── one entry ────────────────────────────────────────────────────────── */
.photos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}
.photo{position:relative;border:1.5px solid var(--ink);background:#fff;aspect-ratio:3/4;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo a{display:block;height:100%}
.photo .pdf{height:100%;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--mono);letter-spacing:.1em;text-decoration:none}
.photo button{position:absolute;right:0;bottom:0;min-height:40px;padding:0 10px;background:var(--ink);color:var(--paper);
  font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hist{margin:10px 0 0;padding:0;list-style:none;font:400 12px/1.5 var(--mono);color:var(--mid)}
.hist li{padding:8px 0;border-top:1px dashed var(--line)}
.hist b{color:var(--ink);font-weight:500}
.voided{border:2px solid var(--ink);padding:12px 14px;margin:0 0 16px;font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* ── the category sheet ───────────────────────────────────────────────── */
.backdrop{position:fixed;inset:0;z-index:39;background:rgba(11,11,11,.5)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-top:3px solid var(--ink);
  padding:16px 16px calc(18px + var(--safe-b));max-width:560px;margin-inline:auto}
.sheet .chips{margin-bottom:12px}

/* ── the night: totals ────────────────────────────────────────────────── */
body.night{background:var(--night);color:#fff}
body.night::before{mix-blend-mode:screen;opacity:.05}
.plate{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--night);pointer-events:none}
.plate img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:grayscale(1) contrast(1.06) brightness(.82)}
.plate::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.15) 0%,rgba(11,11,11,0) 30%,rgba(11,11,11,.55) 100%)}
.night .meta{color:#B9B9B4}
.night .biz{color:#fff}
.hero{min-height:58svh;display:flex;flex-direction:column;justify-content:flex-start;padding:10px 0 34px}
.giant{font:900 clamp(62px,21vw,150px)/.86 var(--disp);letter-spacing:-.05em;margin:10px 0 12px;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 30px rgba(0,0,0,.5);overflow-wrap:anywhere}
.giant sup{font-size:.36em;letter-spacing:-.02em;vertical-align:.95em;margin-left:.04em}
.giant .cur{font-size:.42em;vertical-align:.9em;margin-right:.04em;letter-spacing:0}
.years{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.years .chip{border-color:rgba(255,255,255,.6);color:#fff}
.years .chip[aria-pressed="true"]{background:#fff;color:var(--ink)}
.receipt{position:relative;background:var(--paper);color:var(--ink);font:500 13px/1.6 var(--mono);padding:24px 18px 28px;
  margin:12px 4px 0;box-shadow:0 34px 70px -30px rgba(0,0,0,.9)}
.receipt::before,.receipt::after{content:'';position:absolute;left:0;right:0;height:10px;background-repeat:repeat-x;background-size:14px 10px}
.receipt::before{top:-10px;background-image:var(--tear-up)}
.receipt::after{bottom:-10px;background-image:var(--tear-down)}
.receipt.feed{animation:feed 1.15s steps(20,end) both}
@keyframes feed{from{clip-path:inset(-12px 0 100% 0)}to{clip-path:inset(-12px 0 -12px 0)}}
.rh{text-align:center;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0}
.rs{text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin:2px 0 0}
.rsep{border:0;border-top:1.5px dashed var(--ink);margin:14px 0}
.rl{display:flex;align-items:baseline;gap:6px;text-transform:uppercase;font-size:12.5px}
.rl .k{min-width:0;overflow-wrap:anywhere}
.rl .fill{flex:1 1 12px;border-bottom:1.5px dotted currentColor;transform:translateY(-4px);min-width:12px}
.rl .v{white-space:nowrap;font-variant-numeric:tabular-nums}
.rl.dim{color:var(--mid)}
.rtotal{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:900 clamp(34px,11vw,52px)/1 var(--disp);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin:4px 0}
.rtotal span:first-child{font:700 14px/1 var(--mono);letter-spacing:.14em}
.rbar{height:38px;margin:16px auto 6px;width:78%;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,
  var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 17px)}
.rfoot{text-align:center;font-size:11px;letter-spacing:.03em;text-transform:uppercase;margin:0}
/* A to-do line is still a receipt line: it keeps .rl's flex so the dotted leader
   sits between the words and the count. (display:block here once swallowed it.) */
.todo{text-decoration:none;color:inherit}
a.todo:not(.rl){display:block}
.todo .dot{margin:0 8px 0 0}
.exports{display:grid;gap:8px;margin:30px 4px 0}
.exports .line-btn{color:#fff;justify-content:space-between;min-height:58px}

/* ── notes ────────────────────────────────────────────────────────────── */
.sec{margin:26px 0 0}
.sec>h2{font:800 22px/1.1 var(--disp);letter-spacing:-.01em;margin:0 0 12px;text-transform:uppercase}
.when{margin:0;padding:0;list-style:none;font:500 13px/1.5 var(--mono);text-transform:uppercase}
.when li{display:flex;align-items:baseline;gap:6px;padding:9px 0;border-bottom:1px dashed var(--line)}
.when li .fill{flex:1;border-bottom:1.5px dotted currentColor;transform:translateY(-4px)}
.when li.past{color:var(--dim);text-decoration:line-through}
.when li.next{font-weight:700;color:var(--ink)}
.when li.next .k::before{content:'→ '}
.warn{font:500 12px/1.4 var(--mono);color:var(--biz);margin:6px 0 0}

/* ── the lock ─────────────────────────────────────────────────────────── */
.lock{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding:28px 20px calc(26px + var(--safe-b));color:#fff;background:var(--night)}
.lock .plate img{object-position:50% 50%;filter:grayscale(1) brightness(.62)}
/* Everything but the plate sits above it. (".lock>*" alone also caught the plate
   and pulled it out of its fixed full-screen spot into a box at the top.) */
.lock>:not(.plate){position:relative;z-index:1}
.lock h1{font:900 clamp(50px,16vw,104px)/.88 var(--disp);letter-spacing:-.045em;margin:0}
.lock form{width:min(380px,100%);margin:0 auto}
.pin{display:block;width:100%;font:700 34px/1 var(--mono);letter-spacing:.45em;text-align:center;padding:16px 0 16px .45em;
  background:var(--paper);color:var(--ink);border:0;border-radius:0}
.pin:focus{outline:3px solid #fff;outline-offset:2px}
.lock .go{background:#fff;color:var(--ink);margin-top:10px;justify-content:center}
.lock .msg{color:#fff;text-align:center}

/* ── the binder: what prints ──────────────────────────────────────────── */
.binder{background:#fff;color:#000;min-height:100svh}
.binder .screen{width:min(820px,100%);padding-bottom:60px}
.bcover{border-bottom:3px solid #000;padding:10px 0 18px;margin:0 0 18px}
.bcover h1{font:900 clamp(40px,9vw,72px)/.9 var(--disp);letter-spacing:-.04em;margin:8px 0}
.bentry{border-bottom:1.5px dashed #000;padding:14px 0;break-inside:avoid}
.bentry .top{display:flex;justify-content:space-between;gap:12px;font:700 14px/1.3 var(--mono)}
.bentry dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;margin:8px 0 0;font:400 13px/1.4 var(--mono)}
.bentry dt{color:#555;text-transform:uppercase;font-size:11px;letter-spacing:.06em;padding-top:1px}
.bentry dd{margin:0}
.bphotos{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.bphotos img{max-height:5.2in;max-width:100%;width:auto;border:1px solid #000}
.bphotos a{font:500 12px/1 var(--mono)}

/* ── bigger screens: the same things, more room ───────────────────────── */
@media (min-width:700px){
  .screen{width:min(620px,100%)}
  .plate img{object-position:74% 50%}
  .hero{min-height:52svh}
}
@media (hover:hover){
  .chip:hover,.snap label:hover{background:rgba(11,11,11,.06)}
  .chip[aria-pressed="true"]:hover{background:var(--ink)}
  .row:hover .w{text-decoration:underline;text-underline-offset:3px}
}
@media (prefers-reduced-motion:reduce){.receipt.feed{animation:none}}
@media print{
  body::before,.tabs,.strip,.noprint{display:none!important}
  body,.binder{background:#fff}
  .binder .screen{width:100%;padding:0}
  @page{margin:.5in}
}