/* Dovetail field app. Green is the banner and identity only, never data. */
:root{
  --brand:#46BEA1; --brand-ink:#1E6B59; --mint:#EAF8F3;
  --sheet:#F7FAF9; --surface:#FFFFFF; --soft:#F1F6F4;
  --ink:#1B2A26; --ink-2:#5C6F69; --ink-3:#93A39D;
  --line:#E2EAE7; --line-2:#EDF2F0;
  --sky:#4A7FA8; --sky-p:#EDF4FB;
  --coral:#A8503A; --coral-p:#FDF0EB;
  --amber:#8A6A22; --amber-p:#FDF6E6;
  --tap:48px;
}
@media (prefers-color-scheme:dark){
  :root{
    --brand:#46BEA1; --brand-ink:#7FDCC4; --mint:#122C26;
    --sheet:#0B1512; --surface:#13211D; --soft:#192C26;
    --ink:#E8F1EE; --ink-2:#9DB2AB; --ink-3:#748A83;
    --line:#26382F; --line-2:#1D2E28;
    --sky:#8CBBDD; --sky-p:#152430;
    --coral:#E8A08C; --coral-p:#2E1913;
    --amber:#DCBB6C; --amber-p:#2B2312;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--sheet);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}

/* banner */
.top{background:var(--brand);color:#fff;padding:12px 16px;position:sticky;top:0;z-index:10}
.top.warn{background:var(--amber)}
.top .t{font-size:1.05rem;font-weight:600;line-height:1.2}
.top .s{font-size:.78rem;opacity:.9;margin-top:2px}
.top .back{background:none;border:0;color:#fff;font-size:.85rem;padding:0 0 4px;cursor:pointer}
.lang{position:absolute;right:12px;top:10px;display:flex;gap:2px;background:rgba(255,255,255,.18);border-radius:7px;padding:2px}
.lang button{background:none;border:0;color:#fff;font-size:.7rem;font-weight:600;padding:5px 10px;border-radius:5px;cursor:pointer}
.lang button.on{background:#fff;color:var(--brand-ink)}

.scr{padding:14px 16px 24px;flex:1}
.lbl{font-size:.72rem;color:var(--ink-3);margin-bottom:4px;display:block}
.hint{font-size:.78rem;color:var(--ink-3);margin-top:8px;line-height:1.4}

/* choices */
.opt{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;margin-bottom:7px;font:inherit;font-size:.95rem;color:var(--ink);
  min-height:var(--tap);cursor:pointer}
.opt small{display:block;font-size:.76rem;color:var(--ink-3);margin-top:1px}
.opt.on{border-color:var(--brand);background:var(--mint);color:var(--brand-ink);font-weight:600}
.opt.on small{color:var(--brand-ink);opacity:.8}
.opt.hot{border-color:var(--coral);background:var(--coral-p);color:var(--coral)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.grid2 .opt,.grid3 .opt{margin-bottom:0;padding:11px 10px;font-size:.86rem}

/* fields */
input[type=text],input[type=email],input[type=number],textarea,select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:12px 13px;min-height:var(--tap)}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}

/* buttons */
.btn{display:block;width:100%;border:1px solid var(--line);border-radius:10px;padding:15px;
  text-align:center;font:inherit;font-size:1rem;font-weight:600;background:var(--soft);color:var(--ink);
  min-height:56px;cursor:pointer;margin-top:10px}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost{background:none;font-weight:400;color:var(--ink-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* cards */
.card{border-radius:10px;padding:11px 13px;margin-bottom:9px;font-size:.86rem}
.card.mint{background:var(--mint);color:var(--brand-ink)}
.card.coral{background:var(--coral-p);color:var(--coral)}
.card.amber{background:var(--amber-p);color:var(--amber)}
.card.sky{background:var(--sky-p);color:var(--sky)}
.card b{font-weight:600}
.kv{display:flex;justify-content:space-between;gap:10px;padding:2px 0;font-size:.85rem}
.kv .v{font-variant-numeric:tabular-nums}

/* crew rows */
.person{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;margin-bottom:6px;min-height:var(--tap);cursor:pointer;width:100%;font:inherit;text-align:left}
.person .nm{flex:1;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile{font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:600;border-radius:7px;padding:6px 10px;
  background:var(--soft);color:var(--ink);white-space:nowrap}
.tile.empty{background:var(--coral-p);color:var(--coral);font-weight:600}
.sheet{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--soft);margin:4px 0 10px}
.stepper{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.stepper .k{width:74px;font-size:.82rem;color:var(--ink-2);flex:none}
.stepper button{width:46px;height:46px;flex:none;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font-size:1.3rem;cursor:pointer}
.stepper input{flex:1;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;min-width:0}

/* photos */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shot{position:relative;aspect-ratio:4/3;border:1px dashed var(--line);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--surface);color:var(--ink-3);font-size:.78rem;cursor:pointer;overflow:hidden}
.shot.done{border-style:solid;border-color:var(--brand);color:var(--brand-ink);background:var(--mint)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:.68rem;padding:3px 6px}
.cam{position:fixed;inset:0;background:#000;z-index:50;display:flex;flex-direction:column}
.cam video{flex:1;width:100%;object-fit:cover;background:#000}
.cam .bar{padding:16px;display:flex;align-items:center;justify-content:space-between;background:#000}
.cam .shutter{width:66px;height:66px;border-radius:50%;background:#fff;border:4px solid #999;cursor:pointer}
.cam .x{background:none;border:0;color:#fff;font-size:1rem;padding:10px;cursor:pointer}

/* queue banner */
.queue{position:sticky;bottom:0;background:var(--amber-p);color:var(--amber);
  border-top:1px solid var(--amber);padding:10px 16px;font-size:.85rem;display:flex;align-items:center;gap:10px;z-index:9}
.queue button{margin-left:auto;border:1px solid var(--amber);background:none;color:var(--amber);
  border-radius:8px;padding:9px 14px;font:inherit;font-weight:600;font-size:.82rem;cursor:pointer;min-height:44px}
.queue.ok{background:var(--mint);color:var(--brand-ink);border-color:var(--brand)}

.prog{display:flex;gap:3px;padding:0 16px 10px}
.prog i{flex:1;height:3px;border-radius:2px;background:var(--line);display:block}
.prog i.on{background:var(--brand)}
.err{color:var(--coral);font-size:.85rem;margin-top:7px}
.ok-big{text-align:center;padding:26px 8px}
.ok-big .ring{width:64px;height:64px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;margin:0 auto 12px;font-size:1.9rem}
.ok-big h2{margin:0 0 4px;font-size:1.15rem}
.ok-big p{margin:0;color:var(--ink-2);font-size:.88rem}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:4px 9px;margin:0 5px 5px 0;font-size:.76rem}
.chip.s{background:var(--mint);color:var(--brand-ink)}
.chip.q{background:var(--amber-p);color:var(--amber)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* A ticket with no number yet must not look like a ticket with a number. Same slot,
   deliberately quieter type, so the eye does not read it as a receipt. */
.ok-big h2.pendingno {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6357);
}