/* Stint — worker-facing PWA. Stint Green brand, Cream ground, Ink text; Signal
   Yellow reserved for time/action only (the pass countdown). Tokens follow the
   Stint brand sheet (v1, 2026-09-15). Mobile-first; on desktop the app sits in a
   phone-width column. Light + dark.
   Note: legacy variable names (--navy, --accent, --navy-text) are kept as the
   internal wiring and re-pointed to Stint values so every existing rule maps to
   the new palette without a rename sweep. --navy = the green app chrome/header. */
:root{
  --navy:#1E7A4A; --navy-2:#17603a; --ground:#1C1A17;
  --accent:#1E7A4A; --accent-ink:#FBF7EE; --signal:#FFD23F;
  --bg:#FBF7EE; --card:#FFFFFF; --ink:#1C1A17; --ink-soft:#6B665D;
  --line:#E3DCCB; --line-2:#D6CCB6; --field:#FFFFFF;
  --ok:#1E7A4A; --warn:#8A6A1F; --danger:#B3261E; --navy-text:#1E7A4A;
  --sans:"Source Sans 3",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --slab:"Zilla Slab",Rockwell,Georgia,serif; --mono:var(--sans);
  --shadow:0 1px 2px rgba(28,26,23,.06),0 6px 20px rgba(28,26,23,.10);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#1E7A4A; --navy-2:#124E2E; --ground:#0F1113;
  --accent:#1E7A4A; --accent-ink:#FBF7EE; --signal:#FFD23F;
  --bg:#17191C; --card:#1F2226; --ink:#ECEBE5; --ink-soft:#A3A5AB;
  --line:#33363C; --line-2:#3F434A; --field:#15171A;
  --ok:#4FBF86; --warn:#E0A049; --danger:#F0685F; --navy-text:#4FBF86;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --navy:#1E7A4A; --navy-2:#124E2E; --ground:#0F1113;
  --accent:#1E7A4A; --accent-ink:#FBF7EE; --signal:#FFD23F;
  --bg:#17191C; --card:#1F2226; --ink:#ECEBE5; --ink-soft:#A3A5AB;
  --line:#33363C; --line-2:#3F434A; --field:#15171A;
  --ok:#4FBF86; --warn:#E0A049; --danger:#F0685F; --navy-text:#4FBF86;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans); color:var(--ink); line-height:1.5;
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
}
.device{
  max-width:440px; min-height:100vh; min-height:100dvh; margin:0 auto; background:var(--bg);
  display:flex; flex-direction:column; position:relative; overflow-x:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.35);
}
@media (min-width:480px){ .device{min-height:96vh; min-height:96dvh; margin:2vh auto; margin:2dvh auto; border-radius:22px; overflow:hidden} }

/* topbar — Stint Green header, cream wordmark (per brand sheet: reversed marks
   sit on Ink or Stint Green). Clear space around the wordmark comes from the
   topbar padding. */
.topbar{display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--navy); color:var(--accent-ink)}
.wordmark{height:26px; width:auto; display:block}
.brandmark{font-family:var(--slab); font-size:12px; letter-spacing:.06em; color:#f2efe6}
.brandmark b{color:#fff}
.loc{margin-left:auto; font-size:12px; color:rgba(251,247,238,.82); display:flex; align-items:center; gap:8px}
.badge{font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px; border:1px solid rgba(251,247,238,.4); color:rgba(251,247,238,.9)}
.badge.ok{color:#fff; border-color:rgba(251,247,238,.65); background:rgba(251,247,238,.16)}
.kebab{background:none; border:none; color:rgba(251,247,238,.9); font-size:20px; cursor:pointer; padding:0 4px; line-height:1}
.menu{position:absolute; top:52px; right:12px; z-index:20; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden}
.menu button{background:none; border:none; text-align:left; padding:11px 16px; font-size:14px; color:var(--ink); cursor:pointer}
.menu button:hover{background:var(--bg)}
.ribbon{background:var(--warn); color:#fff; font-size:12px; padding:8px 16px; text-align:center}

/* screens */
.screen{flex:1; padding:22px 18px 30px; display:flex; flex-direction:column; gap:12px}
.screen.center{align-items:center; text-align:center; justify-content:center; gap:14px}
.screen.list{gap:9px}
h1{font-family:var(--slab); font-weight:700; font-size:26px; line-height:1.12; letter-spacing:-.01em; margin:2px 0; text-wrap:balance}
.sub{margin:0; color:var(--ink-soft); font-size:14px}
.markbig{width:64px; height:64px; border-radius:18px; background:var(--navy); color:var(--accent-ink); display:grid; place-items:center; font-size:34px}
.markimg{width:76px; height:76px; display:block; margin:2px auto}
.lbl{font-size:12px; font-weight:600; color:var(--ink-soft); margin:6px 0 -6px}
.hint{font-size:12px; color:var(--ink-soft); line-height:1.5; margin:2px 0}
.hint.center{text-align:center}
.err{color:var(--danger); font-size:13px; min-height:1.1em; margin:0}
.back{align-self:flex-start; background:none; border:none; color:var(--ink-soft); font-size:14px; cursor:pointer; padding:0; margin-bottom:2px}
.empty{color:var(--ink-soft); text-align:center; padding:30px 0}

/* inputs + buttons */
.field{width:100%; border:1.5px solid var(--line-2); border-radius:11px; background:var(--field); color:var(--ink); font:inherit; font-size:16px; padding:13px 14px}
.field::placeholder{color:var(--ink-soft)}
.field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,122,74,.22)}
.field.search{margin-bottom:2px}
.btn{width:100%; border:none; border-radius:11px; font:inherit; font-weight:600; font-size:15px; padding:14px; cursor:pointer; transition:transform .05s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-2)}
.btn.sm{width:auto; padding:9px 14px; font-size:13px}
.btn.big{padding:17px; font-size:17px}
.btn:disabled{opacity:.6}

/* toggles */
.togrow{display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:13px; padding:13px 14px; background:var(--card); cursor:pointer}
.togrow>span{flex:1; font-size:14px}
.tsub{color:var(--ink-soft); font-size:12.5px; font-weight:400}
.togrow input[type=checkbox]{appearance:none; width:44px; height:26px; border-radius:20px; background:var(--line-2); position:relative; cursor:pointer; flex:none; transition:background .15s}
.togrow input:checked{background:var(--accent)}
.togrow input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s}
.togrow input:checked::after{left:21px}

/* chips */
.chips{display:flex; gap:7px; flex-wrap:wrap; margin:2px 0}
.chip{border:1.5px solid var(--line-2); background:var(--card); color:var(--ink-soft); font:inherit; font-size:12.5px; padding:6px 12px; border-radius:20px; cursor:pointer}
.chip.sel{background:var(--navy); color:#fff; border-color:var(--navy)}

/* cards / list */
.grouphdr{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:12px 2px 2px}
.card{display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font:inherit; border-radius:13px; padding:13px 14px; cursor:pointer; box-shadow:var(--shadow)}
.card.locked{opacity:.92}
.ct{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mname{font-weight:600; font-size:15px}
.offtag{font-family:var(--slab); font-weight:700; font-size:13px; color:var(--accent-ink); background:var(--accent); padding:3px 9px; border-radius:7px; white-space:nowrap}
.card.locked .offtag{background:var(--line); color:var(--ink-soft)}
.crow{display:flex; align-items:center; justify-content:space-between; gap:8px}
.muted{color:var(--ink-soft); font-size:12.5px}
.join{font-size:12px; font-weight:600; color:var(--navy-text); border:1.5px solid var(--navy-text); border-radius:7px; padding:3px 9px}

/* offer detail */
.ohead{display:flex; align-items:center; justify-content:space-between; gap:10px}
.pill{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink-soft); border:1.5px solid var(--line-2); border-radius:20px; padding:3px 9px; white-space:nowrap}
.pill.blue{color:var(--navy-text); border-color:var(--navy-text)}
.offerbox{border:1.5px solid var(--accent); border-radius:15px; padding:16px; background:var(--card); display:flex; flex-direction:column; gap:6px; margin:4px 0}
.bigoff{font-family:var(--slab); font-weight:700; font-size:24px; color:var(--navy-text)}
.odesc{font-size:14px}
.ocond{font-size:12px; color:var(--ink-soft)}
.inline{display:flex; align-items:flex-start; gap:9px; border-radius:11px; padding:11px 12px; font-size:13px; margin-top:4px}
.inline.warn{background:rgba(178,106,0,.12); color:var(--warn); border:1.5px solid var(--warn)}
.inline.info{background:rgba(30,122,74,.10); color:var(--ink); border:1.5px solid var(--accent)}
.inline .btn{margin-top:7px}

/* pass — a Stint Green field. The reversed hex-ticket mark sits above the
   merchant name; the countdown ring is the one place Signal Yellow lives. */
.passwrap{justify-content:center; gap:18px}
.pass{border:none; background:var(--accent); color:var(--accent-ink); border-radius:20px; padding:24px 20px 26px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:13px; box-shadow:var(--shadow)}
.passmark{width:54px; height:54px; display:block; margin-bottom:-2px}
.pmerchant{font-family:var(--slab); font-weight:700; font-size:22px; color:var(--accent-ink)}
.poff{font-family:var(--slab); font-weight:700; font-size:20px; color:var(--accent); background:var(--accent-ink); padding:5px 12px; border-radius:9px}
.ring{width:150px; height:150px; border-radius:50%; background:conic-gradient(var(--signal) 360deg,rgba(251,247,238,.28) 0); display:grid; place-items:center; padding:11px}
.ring::before{content:""; position:absolute; width:126px; height:126px; border-radius:50%; background:var(--accent)}
.ring .cd{position:relative; font-family:var(--slab); font-weight:700; font-size:30px; color:var(--accent-ink); font-variant-numeric:tabular-nums}
.ring.dead{background:rgba(251,247,238,.28)!important}
.ring.dead .cd{color:rgba(251,247,238,.7); font-size:20px}
.show{font-weight:600; color:var(--accent-ink)}
.pass .pill{color:#fff; border-color:rgba(251,247,238,.6)}
.synced .chip{display:inline-block; font-family:var(--sans); font-weight:600; font-size:11px; padding:4px 10px; border-radius:20px; border:1.5px solid}
.pass .synced .chip{color:#fff; border-color:rgba(251,247,238,.6)}
.chip.ok{color:var(--ok); border-color:var(--ok)}
.chip.warn{color:var(--warn); border-color:var(--warn)}

/* roster */
.addrow{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; margin:4px 0}
.addrow .field{font-size:14px; padding:11px}
.rrow{display:flex; align-items:center; gap:11px; border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; background:var(--card)}
.rmeta{flex:1; display:flex; flex-direction:column}
.rmeta b{font-size:14px}
.srctag{font-family:var(--mono); font-size:10px; color:var(--ink-soft); border:1px solid var(--line-2); border-radius:5px; padding:2px 7px}
.switch{position:relative; width:44px; height:26px; flex:none}
.switch input{appearance:none; width:44px; height:26px; border-radius:20px; background:var(--line-2); cursor:pointer; margin:0}
.switch input:checked{background:var(--ok)}
.switch span{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; pointer-events:none; transition:left .15s}
.switch input:checked+span{left:21px}

/* report */
.bignum{font-family:var(--mono); font-weight:600; font-size:52px; line-height:1; font-variant-numeric:tabular-nums}
.rp-label{color:var(--ink-soft); font-size:13px; margin-top:-4px}
.bchart{display:flex; align-items:flex-end; gap:9px; height:110px; border-bottom:1.5px solid var(--line-2); margin-top:12px}
.bchart .b{flex:1; background:var(--line-2); border-radius:4px 4px 0 0; min-height:6px}
.bchart .b.hi{background:var(--accent)}
.rp-weeks{font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:6px}

/* bottom nav */
.bnav{display:flex; justify-content:space-around; background:var(--card); border-top:1px solid var(--line); padding:8px 0 calc(8px + env(safe-area-inset-bottom)); position:sticky; bottom:0}
.ni{display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; font:inherit; font-size:11px; color:var(--ink-soft); cursor:pointer}
.ni .gi{width:20px; height:20px; border:1.6px solid currentColor; border-radius:6px}
.ni.sel{color:var(--navy-text)}

/* dev panel */
.dev{position:fixed; left:50%; transform:translateX(-50%); bottom:12px; z-index:50; width:min(420px,92vw); display:flex; flex-direction:column; align-items:flex-start}
.devtoggle{font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.1em; background:var(--navy); color:var(--accent-ink); border:none; border-radius:8px 8px 0 0; padding:5px 12px; cursor:pointer}
.devbody{width:100%; background:var(--navy); color:#fff; border-radius:0 12px 12px 12px; padding:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px}
.devrow{display:flex; align-items:center; gap:10px; font-size:12px; color:#cdd6e6}
.devrow>span{width:64px}
.seg{display:flex; gap:5px; flex-wrap:wrap}
.devbody button{font:inherit; font-size:11px; background:var(--navy-2); color:#cdd6e6; border:1px solid #33456b; border-radius:7px; padding:6px 10px; cursor:pointer}
.devbody button.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600}
.devbody button.danger.on{background:var(--danger); color:#fff; border-color:var(--danger)}
.devbody .reset{width:100%; background:transparent; border:1px dashed #4a5a7d; color:#aeb9cf}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== rollout audit additions ===== */
.boot{flex:1;display:grid;place-items:center;color:var(--ink-soft);font-size:14px;min-height:60vh}
/* pinned bottom nav (constrained to the device column) + room for it on list screens */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;z-index:40}
.screen.list{padding-bottom:96px}
/* active pass banner */
.apbanner{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1.5px solid var(--accent);background:rgba(30,122,74,.10);border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.apdot{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 4px rgba(47,125,84,.18)}
.aptxt{flex:1;font-size:13px;line-height:1.35}
.apgo{font-weight:700;color:var(--navy-text);font-size:13px;white-space:nowrap}
/* add-to-home-screen hint */
.a2hs{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:11px 12px;font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.a2hs b{color:var(--ink)} .a2hs .ico{font-weight:700;color:var(--navy-text)}
.a2hs button{background:none;border:none;color:var(--ink-soft);font-size:16px;cursor:pointer;padding:0 2px;line-height:1}
/* offer quick actions */
.qrow{display:flex;gap:8px;margin:2px 0 4px}
.qbtn{flex:1;text-align:center;padding:10px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--card);color:var(--navy-text);font-weight:600;font-size:13px;text-decoration:none}
/* pass extras */
.ptime{font-size:12px;color:rgba(251,247,238,.78);margin-top:-4px}
/* my passes */
.passcard{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--card);border-radius:13px;padding:13px 14px;cursor:default;font:inherit;color:var(--ink);opacity:.82}
.passcard.active{border-color:var(--accent);opacity:1;cursor:pointer;box-shadow:var(--shadow)}
.passcard .chip{cursor:default;font-family:var(--mono);font-size:11px;padding:3px 9px;background:transparent}
/* admin pin */
.field.pin{text-align:center;font-family:var(--mono);font-size:24px;letter-spacing:.35em;max-width:220px}
/* skeleton + errors + empty */
.skel{height:52px;border-radius:12px;background:linear-gradient(90deg,var(--line) 25%,var(--sheet-2,var(--card)) 50%,var(--line) 75%);background-size:200% 100%;animation:sk 1.1s infinite;margin-bottom:8px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.inline.err{background:rgba(179,38,30,.10);color:var(--danger);border:1.5px solid var(--danger);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.btn.sm.ghost{width:auto;padding:7px 12px;font-size:12.5px}
.empty.big{text-align:center;padding:40px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink)}
.empty.big h2{margin:6px 0 0;font-size:20px}
.empty.big .markbig{opacity:.9}
.devbody .reset{width:auto;flex:1}
.devrow:last-child{gap:8px}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}