/* The shop's own tokens (tih-tokens.css): mint accent, charcoal ground, square
   corners, tracked uppercase labels. One theme on purpose: this is used under
   shop light with one hand, and it should look the same on every phone. */
:root{
  --mint:#31FDB7; --mint-press:#16E39D; --mint-ink:#05301F;
  --charcoal:#3D3D3D; --ink:#141A17; --ink-soft:#4A544F; --ink-mute:#6B756F;
  --rule:#E4E8E6; --surface:#FFFFFF; --surface-alt:#F6F8F7; --stop:#A63428;
  --track:.14em; color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:17px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column}
.bar{background:var(--charcoal);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 20px 12px}
.mark{font-weight:700;font-size:13px;letter-spacing:var(--track);text-transform:uppercase}
.who{font-size:13px;color:#C9D1CD;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main{flex:1;display:flex;flex-direction:column;gap:14px;padding:26px 20px calc(28px + env(safe-area-inset-bottom));
  width:100%;max-width:520px;margin:0 auto}
main[hidden]{display:none}
h1{margin:0;font-size:30px;line-height:1.1;letter-spacing:-.02em}
.lead{margin:0 0 6px;color:var(--ink-soft)}
.btn{display:flex;align-items:center;justify-content:center;min-height:60px;padding:14px 18px;border:1px solid transparent;
  font:inherit;font-weight:700;font-size:14px;letter-spacing:var(--track);text-transform:uppercase;text-align:center;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:0;width:100%}
.btn.primary{background:var(--mint);color:var(--mint-ink)}
.btn.primary:active{background:var(--mint-press)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);min-height:52px}
.btn[disabled],.btn.busy{opacity:.55;pointer-events:none}
.btn:focus-within,.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pages:empty{display:none}
.pages li{position:relative;background:var(--surface-alt);border:1px solid var(--rule);aspect-ratio:210/297;overflow:hidden}
.pages img{width:100%;height:100%;object-fit:cover;display:block}
.pages .pdf{display:grid;place-items:center;height:100%;font-weight:700;letter-spacing:var(--track);color:var(--ink-mute);font-size:13px}
.pages .n{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;
  font-variant-numeric:tabular-nums}
.pages .rm{position:absolute;right:0;top:0;width:40px;height:40px;border:0;background:rgba(20,26,23,.78);color:#fff;
  font-size:22px;line-height:1;cursor:pointer}
.pages .state{position:absolute;inset:auto 0 0 auto;background:var(--mint);color:var(--mint-ink);font-size:11px;font-weight:700;
  padding:3px 7px;letter-spacing:.06em;text-transform:uppercase}
.extra{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:18px;border-top:1px solid var(--rule)}
.extra[hidden]{display:none}
label[for]{font-size:12px;font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-mute);margin-top:8px}
label small{font-weight:400;letter-spacing:0;text-transform:none;font-size:12px}
input[type=text],input[type=password],textarea{font:inherit;font-size:17px;padding:13px 12px;border:1px solid #C9D1CD;border-radius:0;background:#fff;
  color:var(--ink);width:100%;-webkit-appearance:none;appearance:none}
input[type=text]:focus,input[type=password]:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.extra .btn{margin-top:16px}
.error{margin:0;padding:12px 14px;background:#FBEDEB;color:var(--stop);border-left:3px solid var(--stop);font-size:15px}
.error[hidden]{display:none}
.tick{width:64px;height:64px;background:var(--mint);position:relative;margin-bottom:6px}
.tick::after{content:"";position:absolute;left:22px;top:12px;width:16px;height:30px;border:solid var(--mint-ink);
  border-width:0 5px 5px 0;transform:rotate(45deg)}
.lone{justify-content:center}
@media (prefers-reduced-motion:no-preference){.btn{transition:background-color .12s ease}}
.form{display:flex;flex-direction:column;gap:6px}
.form .btn{margin-top:16px;width:100%;font:inherit;font-weight:700;cursor:pointer}
.form input[hidden]{display:none}
.hint{margin:0;font-size:14px;color:var(--ink-mute)}
button.who,a.who{background:none;border:0;font:inherit;font-size:13px;color:#C9D1CD;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.menu{background:var(--charcoal);display:flex;flex-direction:column;align-items:flex-end;padding:0 20px 12px;gap:2px}
.menu[hidden],.menu a[hidden]{display:none}
.menu a,.menu button{background:none;border:0;font:inherit;font-size:15px;color:#fff;padding:10px 0;text-decoration:none;cursor:pointer}
h2{margin:0 0 4px;font-size:19px;letter-spacing:-.01em}
.accounts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.accounts li{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-bottom:1px solid var(--rule)}
.accounts li.off strong{color:var(--ink-mute);text-decoration:line-through}
.accounts .meta{font-size:14px;color:var(--ink-mute)}
.accounts .row{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:4px}
.link{background:none;border:0;padding:8px 0;font:inherit;font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link.stop{color:var(--stop)}
.check{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:16px}
.check input{width:22px;height:22px;accent-color:var(--ink)}
.invite{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--surface-alt);border-left:3px solid var(--mint)}
.invite[hidden]{display:none}
.invite p{margin:0;font-size:15px;color:var(--ink-soft)}
.invite input{font-size:13px}
.pages li.blurry{outline:3px solid var(--stop);outline-offset:-3px}
.pages .warn{position:absolute;left:0;top:0;background:var(--stop);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;letter-spacing:var(--track);text-transform:uppercase}
.lead.alert{color:var(--stop);font-weight:700}