/* ============================================================
   CampaignOS Gather — field app screen (phone-framed)
   layered on styles.css tokens
   ============================================================ */

.gback{ position:fixed; top:18px; left:18px; z-index:5; font-family:var(--mono); font-size:12.5px; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:7px 13px; background:rgba(6,8,11,.6); backdrop-filter:blur(8px); transition:color .2s,border-color .2s; }
.gback:hover{ color:var(--paper); border-color:var(--mint); }

.stage{ position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; gap:16px; padding:44px 16px; }
.stage__cap{ font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.02em; }
.stage__cap b{ color:var(--mint); }

/* device frame */
.phone{ width:392px; max-width:100%; height:min(848px,92vh); background:#04060a; border:11px solid #161d29; border-radius:48px; overflow:hidden; position:relative; box-shadow:0 60px 130px -45px #000, inset 0 0 0 1px rgba(255,255,255,.05); }
.phone::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:130px; height:26px; background:#161d29; border-radius:0 0 16px 16px; z-index:6; } /* notch */
.screen{ height:100%; display:flex; flex-direction:column; background:radial-gradient(120% 60% at 50% 0%, #0a121a, var(--ink)); color:var(--paper); }

.statusbar{ display:flex; justify-content:space-between; align-items:center; padding:11px 24px 4px; font-family:var(--mono); font-size:12px; color:var(--paper-soft); }
.statusbar .sb-r{ letter-spacing:1px; color:var(--muted); font-size:10px; }

.gtop{ display:flex; justify-content:space-between; align-items:center; padding:10px 18px; }
.gbrand{ font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.gdot{ width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px -1px var(--mint); }
.gscore{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.gscore b{ color:var(--mint); }

.gctx{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 18px 12px; border-bottom:1px solid var(--line); }
.gpick{ font-size:13px; color:var(--muted); }
.gpick select{ font-family:var(--disp); font-size:14px; font-weight:600; color:var(--paper); background:transparent; border:0; border-bottom:1px dashed var(--line-2); padding:2px 2px; outline:none; cursor:pointer; }
.gpick select option{ background:var(--ink-2); color:var(--paper); }
.gmode{ display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; }
.gseg{ font-family:var(--mono); font-size:11px; color:var(--muted); background:transparent; border:0; padding:6px 11px; cursor:pointer; transition:all .2s; }
.gseg+.gseg{ border-left:1px solid var(--line); }
.gseg[aria-selected="true"]{ background:var(--mint); color:#022; font-weight:600; }

.gmain{ flex:1; overflow-y:auto; padding:14px 16px 16px; display:flex; flex-direction:column; gap:12px; }

/* nudge banner */
.gnudge{ font-size:12.5px; line-height:1.45; color:var(--paper-soft); background:rgba(255,178,77,.08); border:1px solid rgba(255,178,77,.3); border-radius:11px; padding:10px 13px; }
.gnudge b{ color:var(--amber); }

/* the move card — the hero */
.move{ border:1px solid rgba(54,242,192,.32); border-radius:18px; padding:17px 17px 15px; background:linear-gradient(165deg, rgba(54,242,192,.09), var(--ink-2) 70%); box-shadow:0 24px 56px -34px rgba(54,242,192,.55); }
.move--low{ border-color:var(--line-2); background:linear-gradient(165deg, rgba(255,255,255,.03), var(--ink-2)); box-shadow:none; }
.move__klabel{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--mint); }
.move--low .move__klabel{ color:var(--muted); }
.move__opp{ font-family:var(--disp); font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1.12; margin:8px 0 6px; }
.move__yield{ font-size:14px; color:var(--paper-soft); }
.move__yield b{ font-family:var(--mono); font-size:26px; color:var(--mint); letter-spacing:-.01em; }
.move--low .move__yield b{ color:var(--paper); }

.move__toward{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:13px 0; padding:10px 12px; background:rgba(255,255,255,.025); border-radius:10px; font-size:13px; }
.move__toward .arrow{ color:var(--faint); }
.move__toward .st{ font-weight:700; }
.tbadge{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:999px; margin-left:auto; }
.t-critical{ color:var(--rose); background:rgba(255,107,129,.13); border:1px solid rgba(255,107,129,.34); }
.t-behind{ color:var(--amber); background:rgba(255,178,77,.12); border:1px solid rgba(255,178,77,.34); }
.t-ontrack,.t-done{ color:var(--mint); background:rgba(54,242,192,.12); border:1px solid rgba(54,242,192,.32); }

.move__meta{ display:flex; flex-direction:column; gap:7px; margin:0 0 14px; }
.move__meta div{ display:flex; gap:10px; font-size:12.5px; }
.move__meta .mk{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); min-width:64px; flex:none; padding-top:1px; }
.move__meta .mv{ color:var(--paper-soft); }
.move__meta .mv b{ color:var(--paper); }
.pay-ok{ color:var(--mint)!important; } .pay-no{ color:var(--amber)!important; }

.move__links{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.chiplink{ font-family:var(--mono); font-size:11px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px; padding:6px 10px; cursor:pointer; transition:all .2s; }
.chiplink:hover{ color:var(--paper); border-color:var(--line-2); }

.accept{ width:100%; font-family:var(--mono); font-size:14px; font-weight:600; color:#022; background:var(--mint); border:0; border-radius:12px; padding:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; transition:transform .2s, box-shadow .2s; }
.accept:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -10px rgba(54,242,192,.6); }
.accept span{ transition:transform .2s; } .accept:hover span{ transform:translateX(4px); }
.accept.done{ background:transparent; color:var(--mint); border:1px solid var(--mint); cursor:default; }
.accept.done:hover{ transform:none; box-shadow:none; }

/* impact + drive */
.impact{ border:1px solid var(--line); border-radius:13px; padding:13px; background:var(--ink-1); display:flex; flex-direction:column; gap:11px; }
.impact__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--faint); font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; }
.impact__row b{ color:var(--paper); font-family:var(--disp); font-size:14px; text-transform:none; letter-spacing:0; }
.drive__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--faint); font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; }
.drive__row b{ color:var(--paper-soft); }
.drive__bar{ height:7px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.drive__bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--mint),var(--mint-deep)); border-radius:999px; }

/* live capture → validation engine (real on-device verdicts) */
.cap{ border:1px solid var(--line); border-radius:13px; padding:13px; background:var(--ink-1); display:flex; flex-direction:column; gap:10px; }
.cap__head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.cap__klabel{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--mint); }
.cap__rate{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.cap__form{ display:flex; flex-wrap:wrap; gap:7px; }
.cap__in{ flex:1 1 100%; min-width:0; font-family:var(--mono); font-size:12.5px; color:var(--paper); background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:9px; padding:9px 11px; outline:none; transition:border-color .2s; }
.cap__in::placeholder{ color:var(--faint); }
.cap__in:focus{ border-color:var(--mint); }
.cap__go{ flex:1 1 100%; font-family:var(--mono); font-size:13px; font-weight:600; color:#022; background:var(--mint); border:0; border-radius:9px; padding:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:transform .2s, box-shadow .2s; }
.cap__go:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -12px rgba(54,242,192,.6); }
.cap__go span{ transition:transform .2s; } .cap__go:hover span{ transform:translateX(3px); }

.cap__verdict{ border-radius:10px; padding:11px 12px; border:1px solid var(--line-2); background:rgba(255,255,255,.025); }
.cap__verdict.v-ok{ border-color:rgba(54,242,192,.4); background:rgba(54,242,192,.08); }
.cap__verdict.v-rev{ border-color:rgba(255,178,77,.4); background:rgba(255,178,77,.08); }
.cap__verdict.v-no{ border-color:rgba(255,107,129,.4); background:rgba(255,107,129,.08); }
.vrow{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.vbadge{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.04em; }
.v-ok .vbadge{ color:var(--mint); } .v-rev .vbadge{ color:var(--amber); } .v-no .vbadge{ color:var(--rose); }
.vsub{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.vwhy{ margin:6px 0 0; font-size:12px; line-height:1.4; color:var(--paper-soft); }

.cap__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.capchip{ font-family:var(--mono); font-size:10.5px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:7px; padding:5px 8px; cursor:pointer; transition:color .2s, border-color .2s; }
.capchip:hover{ color:var(--paper); border-color:var(--mint); }

.cap__tally{ display:flex; flex-wrap:wrap; gap:9px 14px; align-items:baseline; font-family:var(--mono); font-size:11px; color:var(--faint); padding-top:9px; border-top:1px solid var(--line); }
.cv b{ font-size:13px; }
.cv--ok b{ color:var(--mint); } .cv--rev b{ color:var(--amber); } .cv--no b{ color:var(--rose); }
.cap__safe{ margin-left:auto; color:var(--muted); } .cap__safe b{ color:var(--mint); font-size:13px; }

@keyframes capflash{ from{ opacity:.3; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
.cap__verdict.flash{ animation:capflash .28s ease-out; }

.gtabs{ display:flex; justify-content:space-around; padding:10px 6px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(6,8,11,.6); }
.gtab{ font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:.02em; }
.gtab--on{ color:var(--mint); }

@media (max-width:480px){
  .stage{ padding:0; gap:0; }
  .stage__cap, .gback{ display:none; }
  .phone{ width:100%; max-width:none; height:100vh; height:100dvh; border:0; border-radius:0; box-shadow:none; }
  .phone::before{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .accept,.cap__go,.cap__in,.cap__go span{ transition:none; } .cap__verdict.flash{ animation:none; } }