/* 6M Desk prototype for Thairapy. Tokens from DESIGN.md (6M Desk). Practice data only. */
@font-face { font-family: "Archivo"; src: url(fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url(fonts/atkinson-mono.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --ground: #E4E7E4; --surface: #FAFBF8; --rule: #C7CDC9; --text: #1C2427; --muted: #52615F;
  --primary: #1F4FD1; --primary-pressed: #1A43B3; --primary-shadow: #16378F; --on-primary: #FFFFFF;
  --success: #1E7F47; --warning: #8A5A00; --error: #B3261E; --selection: #C9D6FA;
  --slip: #FFFFFF; --slip-ink: #22292C; --slip-perf: #BFC5C1; --brand-6m: #FF5252;
  --accent: #C98F2E; /* Thairapy gold: plate stripe and logo tile only */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px;
  --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px;
  --sans: "Archivo", "Arial Narrow", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ground); color: var(--text); font: 400 17px/1.45 var(--sans); -webkit-text-size-adjust: 100%; }
::selection { background: var(--selection); color: var(--text); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
input { caret-color: var(--primary); }
button { font: inherit; color: inherit; }
.num { font-family: var(--mono); font-weight: 600; font-feature-settings: "tnum"; }

/* Phone column, centered on wide screens */
.app { max-width: 430px; min-height: 100dvh; margin: 0 auto; background: var(--surface); display: flex; flex-direction: column; position: relative; box-shadow: 0 0 0 1px var(--rule); }
.practice { background: var(--text); color: var(--surface); font-size: 13px; text-align: center; padding: 6px 12px calc(6px); }
.practice b { color: #F2C65B; font-weight: 700; }

/* The plate */
.plate { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px var(--s-md) 12px calc(var(--s-md) + 6px); background: var(--surface); border-bottom: 1px solid var(--rule); }
.plate::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.plate img { width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--rule); background: #fff; }
.plate-name { font-weight: 750; font-stretch: 112%; font-size: 19px; line-height: 1.1; }
.plate-town { font-size: 14px; color: var(--muted); }
.plate .acct { margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--r-md); cursor: pointer; font-size: 22px; color: var(--muted); }

/* Work area */
main { flex: 1; padding: var(--s-lg) var(--s-md) 200px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 0; background: none; padding: 0; color: var(--muted); font-size: 15px; font-weight: 600; cursor: pointer; margin: -8px 0 8px; }
.status { font-weight: 700; font-stretch: 115%; font-size: 28px; line-height: 1.05; margin: 0 0 var(--s-sm); }
.sub { color: var(--muted); margin: 0 0 var(--s-lg); font-size: 16px; }
.sub .num { font-size: 16px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.ok { background: var(--success); } .dot.look { background: var(--warning); } .dot.err { background: var(--error); }
.label { font-size: 14px; font-weight: 600; color: var(--muted); margin: var(--s-lg) 0 var(--s-sm); }

/* Ledger */
.ledger { border-top: 1.5px solid var(--text); margin: 0 0 var(--s-lg); }
.row { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 0; border-bottom: 1px solid var(--rule); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; }
.row:disabled { cursor: default; }
.row .l { flex: 1; min-width: 0; }
.row .l b { display: block; font-weight: 550; font-size: 17px; }
.row .l small { display: block; color: var(--muted); font-size: 14px; }
.row .r { font-family: var(--mono); font-weight: 600; font-size: 18px; font-feature-settings: "tnum"; white-space: nowrap; }
.row .chev { color: var(--muted); }
.pill { display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--text); color: var(--surface); font: 600 14px var(--mono); text-align: center; }

/* Buttons */
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border-radius: var(--r-md); border: 1.5px solid var(--text); background: transparent; font-weight: 700; font-size: 17px; cursor: pointer; padding: 8px 16px; text-align: center; }
.btn-key { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: 0 3px 0 var(--primary-shadow); }
.btn-key:active { background: var(--primary-pressed); box-shadow: none; transform: translateY(2px); }
.btn-key:disabled { background: var(--ground); color: var(--muted); border-color: var(--ground); box-shadow: none; transform: none; cursor: not-allowed; }
.btn-quiet { border: 0; min-height: 44px; font-weight: 600; color: var(--muted); }
.btns { display: grid; gap: 10px; }
.btns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .btn-key:active { transform: none; } }

/* Shelf + module bar */
.shelf { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--surface); border-top: 1px solid var(--rule); padding: 12px var(--s-md) calc(8px + env(safe-area-inset-bottom)); z-index: 6; }
.shelf .acts { display: grid; gap: 10px; margin-bottom: 10px; }
.modbar { display: flex; justify-content: space-between; }
.modbar a { flex: 1; text-align: center; padding: 10px 2px 6px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; border-top: 3px solid transparent; min-height: 44px; }
.modbar a[aria-current="page"] { color: var(--text); border-top-color: var(--text); }
.made { text-align: center; font-size: 12px; color: var(--muted); margin-top: 4px; }
.made b { color: var(--brand-6m); }

/* Receipt preview (stacked, D14) */
.preview { border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff; padding: 16px; font: 14px/1.5 var(--mono); color: var(--slip-ink); max-height: 240px; overflow: hidden; position: relative; cursor: zoom-in; margin-bottom: var(--s-md); }
.preview { padding-top: 40px; }
.preview::after { content: "Tap to see it bigger"; position: absolute; right: 8px; top: 8px; font: 600 12px var(--sans); background: var(--surface); padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--rule); }
.preview.photo { background: repeating-linear-gradient(170deg, #fff 0 22px, #f5f3ee 22px 23px); transform: rotate(-.6deg); }
.preview .hd { text-align: center; font-weight: 700; margin-bottom: 6px; }
.preview .ln { display: flex; justify-content: space-between; }
.preview .tot { border-top: 1px dashed var(--slip-perf); margin-top: 6px; padding-top: 6px; font-weight: 700; }
.zoom { position: fixed; inset: 0; background: rgba(28,36,39,.92); z-index: 20; display: grid; place-items: center; padding: 20px; }
.zoom .preview { max-height: none; transform: scale(1.12); cursor: zoom-out; width: min(360px, 90vw); }
.zoom .preview::after { content: "Tap to go back"; }

/* Fields */
.field { margin: 0 0 var(--s-md); }
.field label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field input { width: 100%; min-height: 54px; border: 1.5px solid var(--muted); border-radius: var(--r-md); background: var(--surface); padding: 0 14px; font: 600 18px var(--mono); color: var(--text); }
.field input.txt { font: 400 17px var(--sans); }
.field input:focus { border-color: var(--text); outline: none; box-shadow: 0 0 0 3px var(--selection); }
.field .hint { font-size: 14px; color: var(--warning); margin-top: 6px; }

/* Sheets */
.sheet-bg { position: fixed; inset: 0; background: rgba(28,36,39,.45); z-index: 10; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 430px; background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; border-top: 2px solid var(--text); box-shadow: 0 -8px 24px rgba(28,36,39,.18); padding: var(--s-lg) var(--s-md) calc(var(--s-md) + env(safe-area-inset-bottom)); max-height: 90dvh; overflow: auto; }
.sheet h2 { font-weight: 700; font-stretch: 115%; font-size: 24px; margin: 0 0 var(--s-sm); }
.counter { font: 600 18px var(--mono); margin: var(--s-md) 0; padding: 12px; border-radius: var(--r-md); background: var(--ground); text-align: center; }
.counter.done { background: #E3F1E8; color: var(--success); }
.piece { display: grid; grid-template-columns: 1fr 120px; gap: 10px; margin-bottom: 10px; }
.piece select, .piece input { min-height: 54px; border: 1.5px solid var(--muted); border-radius: var(--r-md); background: var(--surface); padding: 0 10px; font: 400 16px var(--sans); color: var(--text); }
.piece input { font: 600 18px var(--mono); text-align: right; }

/* Steps (month close) */
.steps { display: flex; gap: 6px; margin: 0 0 var(--s-sm); }
.steps span { flex: 1; height: 6px; border-radius: 3px; background: var(--rule); }
.steps span.on { background: var(--text); }
.stepname { font-size: 14px; color: var(--muted); font-weight: 600; margin: 0 0 var(--s-lg); }
.bankpic { border: 1px dashed var(--muted); border-radius: var(--r-md); padding: 14px; font-size: 15px; color: var(--muted); margin-bottom: var(--s-md); background: #fff; }
.bankpic .fake { display: inline-block; margin-top: 8px; padding: 6px 12px; border: 2px solid var(--primary); border-radius: 6px; color: var(--primary); font-weight: 700; }
.check { font-size: 19px; line-height: 1.5; padding: var(--s-md); border-top: 1.5px solid var(--text); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-lg); }

/* Suggestion rows */
.sugg { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.sugg .q { display: flex; justify-content: space-between; gap: 10px; }
.sugg .q b { font-weight: 550; }
.sugg .why { font-size: 14px; color: var(--muted); margin: 4px 0 10px; }
.sugg .acts3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sugg .acts3 .btn { min-height: 48px; font-size: 15px; }
.sugg.done { opacity: .55; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); top: 112px; white-space: nowrap; background: var(--text); color: var(--surface); padding: 12px 16px; border-radius: var(--r-md); font-weight: 600; z-index: 15; display: flex; gap: 14px; align-items: center; max-width: 400px; }
.toast button { background: none; border: 0; color: #F2C65B; font-weight: 700; cursor: pointer; min-height: 32px; }

/* Receipt slip (the signature moment) */
.slipwrap { position: fixed; inset: 0; z-index: 25; background: rgba(28,36,39,.55); display: grid; place-items: center; padding: 20px; }
.slip { width: min(340px, 92vw); background: var(--slip); color: var(--slip-ink); font: 14px/1.6 var(--mono); padding: 22px 20px 30px; box-shadow: 0 4px 10px rgba(0,0,0,.25); position: relative;
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) bottom/16px 100% repeat-x; mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0/16px 100%; }
.slip h3 { font: 700 22px var(--sans); font-stretch: 115%; margin: 0 0 10px; }
.slip .ln { display: flex; justify-content: space-between; }
.slip hr { border: 0; border-top: 1px dashed var(--slip-perf); margin: 10px 0; }
.slip .btn { font-family: var(--sans); }
.stamp { position: absolute; right: 18px; top: 16px; transform: rotate(-12deg); border: 3px solid var(--success); color: var(--success); font: 800 18px var(--sans); font-stretch: 115%; padding: 4px 10px; border-radius: var(--r-sm); letter-spacing: .04em; }
.slip .btn { margin-top: 14px; }

/* Camera */
.cam { background: #111; border-radius: var(--r-md); aspect-ratio: 3/4; display: grid; place-items: center; color: #ccc; font-size: 15px; margin-bottom: var(--s-md); position: relative; overflow: hidden; }
.cam .frame { width: 70%; height: 78%; border: 2px dashed rgba(255,255,255,.5); border-radius: 8px; display: grid; place-items: center; text-align: center; padding: 10px; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-md); }
.thumb { width: 78px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; padding: 6px; font-size: 12px; text-align: center; }
.thumb i { display: block; height: 50px; background: repeating-linear-gradient(0deg, #eee 0 6px, #fff 6px 9px); margin-bottom: 4px; border-radius: 2px; }
.thumb.saved { color: var(--success); font-weight: 700; }

.tally { font-size: 15px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px; }
.tally .num { color: var(--text); font-size: 15px; }
.empty { text-align: center; padding: var(--s-xl) 0; color: var(--muted); }
.notice { border: 1px solid var(--rule); border-left: 0; border-right: 0; padding: 12px 0; margin-bottom: var(--s-lg); }
.notice b { display: block; font-weight: 600; }

/* Inline styles moved here so the page runs under style-src 'self' */
.sub.blk { display:block; margin:4px 0 10px; }
.ledger.thick { border-top-width:1.5px; }
.row.tick { cursor:pointer; }
.row.tick input { width:24px; height:24px; }
.gone { text-decoration:line-through; color:var(--muted); }
.sub.reading { margin:8px 0; text-align:center; }
.btns.mt8 { margin-top:8px; }
.okmark { color:var(--success); }