/* Uncle Scam (/scam): a counter at night and the receipt it prints. Colours follow the site's slate and brass;
   the two receipts continue the same paper treatment. */
:root {
  color-scheme: dark;
  --ground: #0F161D; --surface: #17212B; --raised: #1E2934;
  --ink: #E6E1D4; --ink-2: #B5BCC0; --ink-3: #8C959B; --rule: rgba(230, 225, 212, .22);
  --brass: #C9A260; --brass-ink: #D9B978; --on-brass: #17130A;
  --paper: #F4F0E4; --paper-ink: #1B1D21; --paper-dim: #5A5D63; --stamp: #B3261E;
  --display: 'Marcellus', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
a { color: var(--brass-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 2px; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 2; padding: 8px 12px; background: var(--brass); color: var(--on-brass); }

.top { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; font-size: .9rem; }
.top a { text-decoration: none; }
.wrap { max-width: 560px; margin: 0 auto; padding: 8px 16px 64px; }

.hero { text-align: center; }
.seal { width: 168px; height: 168px; display: block; margin: 0 auto 12px; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; margin: 0; letter-spacing: -.01em; }
.ask { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); margin: 10px 0 0; }
.lede { color: var(--ink-2); margin: 14px auto 0; max-width: 44ch; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; padding: 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.status, #state-field, .form button, .private { grid-column: 1 / -1; }
input[type="text"], select { width: 100%; min-height: 46px; padding: 10px 12px; font: 500 1.05rem var(--mono); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: 4px; }
.money { position: relative; }
.money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--mono); color: var(--ink-3); }
.money input { padding-left: 28px; }
input::placeholder { color: var(--ink-3); opacity: .7; }
.err { margin: 6px 0 0; font-size: .82rem; color: #F0848F; min-height: 0; }
.err:empty { display: none; }
fieldset.status { display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.status legend { float: left; width: 100%; }
fieldset.status label { margin: 0; flex: 1 1 auto; }
fieldset.status input { position: absolute; opacity: 0; }
fieldset.status span { display: block; text-align: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink-2); cursor: pointer; font-size: .92rem; }
fieldset.status input:checked + span { background: var(--raised); border-color: var(--brass); color: var(--ink); }
fieldset.status input:focus-visible + span { outline: 3px solid var(--brass-ink); outline-offset: 2px; }
button { font: 600 1rem var(--sans); min-height: 48px; padding: 12px 18px; border: 0; border-radius: 4px; background: var(--brass); color: var(--on-brass); cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.private { margin: 0; font-size: .82rem; color: var(--ink-3); text-align: center; }
p.status { margin: 14px 0 0; font-size: .88rem; color: var(--ink-3); text-align: center; min-height: 1.4em; }

.result { margin-top: 26px; }
.receipt { --tooth: 9px; max-width: 400px; margin: 0 auto; padding: 30px 22px 34px; background: var(--paper); color: var(--paper-ink);
  font: 400 .78rem/1.55 var(--mono); font-stretch: 87.5%;
  clip-path: polygon(0 var(--tooth), 2.5% 0, 5% var(--tooth), 7.5% 0, 10% var(--tooth), 12.5% 0, 15% var(--tooth), 17.5% 0, 20% var(--tooth), 22.5% 0, 25% var(--tooth), 27.5% 0, 30% var(--tooth), 32.5% 0, 35% var(--tooth), 37.5% 0, 40% var(--tooth), 42.5% 0, 45% var(--tooth), 47.5% 0, 50% var(--tooth), 52.5% 0, 55% var(--tooth), 57.5% 0, 60% var(--tooth), 62.5% 0, 65% var(--tooth), 67.5% 0, 70% var(--tooth), 72.5% 0, 75% var(--tooth), 77.5% 0, 80% var(--tooth), 82.5% 0, 85% var(--tooth), 87.5% 0, 90% var(--tooth), 92.5% 0, 95% var(--tooth), 97.5% 0, 100% var(--tooth),
    100% calc(100% - var(--tooth)), 97.5% 100%, 95% calc(100% - var(--tooth)), 92.5% 100%, 90% calc(100% - var(--tooth)), 87.5% 100%, 85% calc(100% - var(--tooth)), 82.5% 100%, 80% calc(100% - var(--tooth)), 77.5% 100%, 75% calc(100% - var(--tooth)), 72.5% 100%, 70% calc(100% - var(--tooth)), 67.5% 100%, 65% calc(100% - var(--tooth)), 62.5% 100%, 60% calc(100% - var(--tooth)), 57.5% 100%, 55% calc(100% - var(--tooth)), 52.5% 100%, 50% calc(100% - var(--tooth)), 47.5% 100%, 45% calc(100% - var(--tooth)), 42.5% 100%, 40% calc(100% - var(--tooth)), 37.5% 100%, 35% calc(100% - var(--tooth)), 32.5% 100%, 30% calc(100% - var(--tooth)), 27.5% 100%, 25% calc(100% - var(--tooth)), 22.5% 100%, 20% calc(100% - var(--tooth)), 17.5% 100%, 15% calc(100% - var(--tooth)), 12.5% 100%, 10% calc(100% - var(--tooth)), 7.5% 100%, 5% calc(100% - var(--tooth)), 2.5% 100%, 0 calc(100% - var(--tooth))); }
.receipt.printing { animation: print .9s cubic-bezier(.2, .7, .2, 1) both; transform-origin: top; }
@keyframes print { from { opacity: 0; transform: translateY(-18px) scaleY(.96); } to { opacity: 1; transform: none; } }
.r-center { text-align: center; }
.r-title { font: 400 1.25rem/1.2 var(--display); letter-spacing: .02em; margin-bottom: 2px; }
.r-small { font-size: .8125rem; color: var(--paper-dim); }
.r-rule { border: 0; border-top: 1px dashed var(--paper-ink); margin: 10px 0; opacity: .55; }
.r-head { font-weight: 700; letter-spacing: .08em; margin: 2px 0 4px; }
.r-row { display: flex; justify-content: space-between; gap: 12px; }
.r-row span:first-child { min-width: 0; }
.r-row span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-total { font-weight: 800; font-size: .95rem; margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--paper-ink); }
.r-note { font-size: .8125rem; color: var(--paper-dim); margin: 6px 0 0; }
.r-red { color: var(--stamp); font-weight: 700; }
.r-stamp { display: inline-block; margin: 8px auto 2px; padding: 4px 10px; border: 2px solid var(--stamp); color: var(--stamp); font-weight: 800; letter-spacing: .12em; transform: rotate(-4deg); }
.r-barcode { height: 38px; margin: 12px auto 6px; width: 78%;
  background: repeating-linear-gradient(90deg, var(--paper-ink) 0 2px, transparent 2px 4px, var(--paper-ink) 4px 5px, transparent 5px 9px, var(--paper-ink) 9px 12px, transparent 12px 14px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-2); min-height: 44px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--brass); }

/* the two panels under the receipt: who signs off, what landed near you */
.panel { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 18px; }
.panel h2 { font: 400 1.25rem/1.2 var(--display); margin: 0; }
.panel h3 { font: 400 1.05rem/1.3 var(--sans); color: var(--ink-2); margin: 18px 0 6px; }
.panel-intro { color: var(--ink-2); margin: 6px 0 14px; }
.panel-intro:empty { display: none; }
.panel-note { color: var(--ink-3); font-size: .88rem; margin: 14px 0 0; }
.panel .private { text-align: left; margin-top: 8px; }
.people { list-style: none; margin: 0; padding: 0; }
.person { padding: 14px 0; border-top: 1px solid var(--rule); }
.person:first-child { border-top: 0; padding-top: 4px; }
.person p { margin: 0; }
.person-name { font-size: 1.15rem; font-weight: 600; }
.person-role { color: var(--ink-2); }
.person-term { color: var(--ink-3); font-size: .92rem; margin-top: 4px !important; }
.person-debt { margin-top: 6px !important; }
.person-debt strong, .headline strong, .ranked .amount { font-family: var(--mono); font-weight: 500; font-size: .86em; font-stretch: 87.5%; }
.person-debt .added { color: var(--brass-ink); white-space: nowrap; }
.headline { font-size: 1.1rem; margin: 4px 0 0; }
.headline:empty { display: none; }
.ranked { margin: 0; padding: 0 0 0 1.4em; }
.ranked li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.ranked li span:first-child { display: inline-block; max-width: 100%; }
.ranked .amount { float: right; color: var(--ink-2); margin-left: 12px; }

.fine { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 14px; color: var(--ink-2); font-size: .88rem; }
.fine summary { cursor: pointer; color: var(--ink); font-weight: 600; min-height: 32px; }
.fine ul { padding-left: 18px; margin: 10px 0; }
.fine li { margin: 6px 0; }
.sources { color: var(--ink-3); font-size: .82rem; margin: 8px 0 0; }

@media (max-width: 420px) { .form { grid-template-columns: 1fr; } .seal { width: 136px; height: 136px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* A second tear-off, with one device-local housing choice at its start. */
.rest-bill{margin:28px auto 0;max-width:400px}
.housing-choice{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;padding:16px 0 0;border:0;border-top:1px dashed var(--rule)}
.housing-choice legend{padding:0 10px 0 0;font:500 .75rem/1.5 var(--mono);letter-spacing:.03em;color:var(--brass-ink)}
.housing-choice label{flex:1;position:relative;cursor:pointer}
.housing-choice input{position:absolute;opacity:0}
.housing-choice span{display:block;text-align:center;border:1px solid var(--rule);border-radius:3px;min-height:46px;padding:10px 14px;color:var(--ink-2);font-size:.95rem}
.housing-choice input:checked+span{border-color:var(--brass);color:var(--ink);background:var(--raised)}
.housing-choice input:focus-visible+span{outline:3px solid var(--brass-ink);outline-offset:3px}
.housing-choice input:disabled+span{opacity:.6;cursor:default}
.housing-note{font-size:.8rem;line-height:1.55;color:var(--ink-2);margin:8px 0 18px}
.rest-status{font-size:.9rem;line-height:1.65;color:var(--ink-2);margin:16px 0;padding-left:12px;border-left:2px solid var(--brass)}
.rest-retry{margin-bottom:14px;font-size:.9rem}
.rest-context{font-size:.85rem;line-height:1.65;color:var(--ink-2);margin-top:18px}
.rest-context p{margin:10px 0}.rest-coverage{color:var(--ink);border-left:2px solid var(--brass);padding-left:12px}
.rest-warnings p{color:var(--brass-ink)}.rest-context a{overflow-wrap:anywhere}
#save-scope{margin:10px auto 0;max-width:400px;font-size:.8rem;color:var(--ink-2)}
[hidden]{display:none!important}