/* Patriot camera guide: dark shop sheet, one red, radius 0, big targets */
:root{
  --bg:#141415;--bg-alt:#1d1e20;--ink:#f3f3f5;--muted:#a9abaf;--line:rgba(255,255,255,.12);
  --red:#ec5541;--red-ink:#141415;--ok:#3ddc84;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.45 var(--body);
  padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img,video{display:block;max-width:100%}

.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:12px;min-height:56px}
.top .back{flex:none;display:flex;align-items:center;gap:6px;height:52px;padding:0 16px 0 10px;margin-left:-4px;background:var(--bg-alt);border:2px solid var(--ink);color:var(--ink);font:600 15px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;-webkit-tap-highlight-color:transparent}
.top .back svg{width:22px;height:22px}
.top .back:active{background:var(--ink);color:var(--bg)}
.top .ttl{font-weight:600;font-size:19px;flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.15}
.top .ttl small{display:block;font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plate{font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plate::before{content:"";display:inline-block;width:24px;height:2px;background:var(--red);vertical-align:middle;margin-right:8px}
.wrap{padding:16px;max-width:720px;margin:0 auto}
.h1{font:800 clamp(26px,7vw,34px)/1.05 var(--body);text-transform:uppercase;letter-spacing:-.01em;margin:6px 0 4px}
.sub{color:var(--muted);margin:0 0 16px}
.msg{background:var(--bg-alt);border-left:3px solid var(--red);padding:10px 12px;margin:0 0 12px}

/* job cards */
.top .count{font:800 22px/1 var(--mono);color:var(--muted);flex:none}
.top .count b{color:var(--ink)}
.cards{display:grid;gap:10px;margin:0 0 28px}
.card{display:flex;align-items:stretch;background:var(--bg-alt);border:1px solid var(--line);position:relative;min-height:84px}
.card .fig{flex:none;width:92px;display:flex;align-items:baseline;justify-content:center;gap:3px;background:var(--bg);border-right:1px solid var(--line);padding-top:26px}
.card .fig b{font:800 34px/1 var(--mono);color:var(--red)}
.card .fig span{font:600 13px/1 var(--mono);color:var(--muted)}
.card .body{flex:1;min-width:0;padding:14px 44px 14px 14px}
.card .cl{font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.card .t{font-weight:600;font-size:20px;line-height:1.2}
.bar{height:5px;background:var(--line);position:relative;margin-top:12px}
.bar i{position:absolute;inset:0;right:auto;background:var(--red)}
.card.done{opacity:.6;min-height:64px}
.card.done .fig{padding-top:0;align-items:center}
.card.done .fig b{color:var(--ok);font-size:26px}
.card .chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:26px}

/* shot list: open shots big, taken shots collapsed */
.list{display:grid;gap:12px;padding-bottom:90px}
.big{display:block;background:var(--bg-alt);border:1px solid var(--line)}
.big .ph{display:block;position:relative;aspect-ratio:16/10;background:#0d0d0e;overflow:hidden}
.big .ph img{width:100%;height:100%;object-fit:cover}
.big .ph .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font:600 14px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.big .num{position:absolute;top:0;left:0;background:var(--bg);color:var(--ink);font:800 16px/1 var(--mono);padding:10px 12px;letter-spacing:.08em}
.big .st{position:absolute;top:0;right:0;font:600 12px/1 var(--mono);padding:10px 12px;letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:#fff}
.big .st.vid{background:var(--ink);color:var(--bg)}
.big.retake{border-color:var(--red)}
.big .txt{display:block;padding:14px 16px 6px;font-weight:600;font-size:21px;line-height:1.2}
.big .txt small{display:block;color:var(--muted);font-weight:400;font-size:16px;line-height:1.4;margin-top:4px}
.big .go{display:block;padding:10px 16px 16px;color:var(--red);font:600 14px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.row{display:flex;align-items:center;gap:12px;background:var(--bg-alt);border:1px solid var(--line);min-height:68px;padding-right:14px;opacity:.75}
.row .num{flex:none;width:40px;text-align:center;font:800 14px/1 var(--mono);color:var(--muted)}
.row .thumb{flex:none;width:76px;height:56px;background:#0d0d0e;display:flex;align-items:center;justify-content:center;color:var(--muted);font-style:normal;overflow:hidden}
.row .thumb img{width:100%;height:100%;object-fit:cover}
.row .txt{flex:1;min-width:0;font-weight:600;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .txt small{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.row.skip .txt small{color:var(--muted)}
.row .mark{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--ok);color:#06220f;font-weight:800}
.row.skip .mark{background:var(--line);color:var(--muted)}
.fab{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:10;display:flex;align-items:center;justify-content:center;min-height:62px;padding:14px 18px;
  background:var(--red);color:#fff;font:600 16px/1.15 var(--body);text-transform:uppercase;letter-spacing:.06em;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.6)}
@media (min-width:640px){.list{grid-template-columns:1fr 1fr}.row{grid-column:1/-1}.fab{left:auto;right:24px;max-width:420px}}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;padding:14px 18px;
  background:var(--red);color:#fff;font:600 16px/1.1 var(--body);text-transform:uppercase;letter-spacing:.08em;
  border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:active{filter:brightness(.9)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.quiet{background:var(--bg-alt);color:var(--muted);border:1px solid var(--line);min-height:52px;font-size:14px}
.btn.ok{background:var(--ok);color:#06220f}
.btn svg{width:22px;height:22px;flex:none}
.stack{display:grid;gap:10px;margin:14px 0}
.btn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;font-size:0}
.btn{position:relative;overflow:hidden}

/* slot page */
.example{background:#0d0d0e;border:1px solid var(--line)}
.example img{width:100%;max-height:62vh;object-fit:contain;margin:0 auto}
.example .noimg{padding:40px 16px;text-align:center;color:var(--muted);font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.example .cap{font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-top:1px solid var(--line)}
.hint{font-size:20px;line-height:1.4;margin:14px 0 6px}
.retake{background:var(--red);color:#fff;padding:12px 14px;font-weight:600;margin:12px 0}
.taken{margin:18px 0 0}
.taken .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.taken .shot{position:relative;background:#0d0d0e;border:1px solid var(--ok)}
.taken .shot img,.taken .shot video{width:100%;aspect-ratio:4/3;object-fit:cover}
.taken .shot form{position:absolute;right:0;top:0}
.taken .shot button{background:rgba(20,20,21,.85);color:#fff;border:0;padding:8px 10px;font:600 12px var(--mono);letter-spacing:.08em;cursor:pointer}
.nav{display:flex;justify-content:space-between;gap:10px;margin:20px 0 30px}
.nav a{flex:1;text-align:center;padding:14px 10px;border:1px solid var(--line);color:var(--muted);font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.nav a.on{color:var(--ink)}
.busy{position:fixed;inset:0;background:rgba(20,20,21,.85);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:20;font:600 14px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.busy.show{display:flex}
.spin{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--red);animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* login */
.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px;max-width:420px;margin:0 auto}
.pin{width:100%;font:800 42px/1 var(--mono);letter-spacing:.35em;text-align:center;background:var(--bg-alt);color:var(--ink);border:1px solid var(--line);padding:18px 0 18px .35em;margin:18px 0 12px}
.foot{color:var(--muted);font-size:13px;text-align:center;margin-top:30px}
.foot a{text-decoration:underline}