/*
 * web/app.css — UnderCurrent Solo, web beta. v0.1.0, 2026-10-08 (P3b/P3c).
 *
 * Taken from the Oded-approved mock-up (odedb-ops/solo-web-mockup v0.4.2, app/app.css), whose tokens come
 * from UnderCurrentSolo/docs/BRANDING.md (the product's dark "Undertow" look). Removed: the mock-only chrome
 * (ribbon, simulated permission prompt, mock panel, toast). Added: the camera card on the sign-in screen,
 * the face-health chip, the live-detail readouts (.qa, hidden unless "Show live detail"), the compact strip
 * rules for a 350×560 Picture-in-Picture window (the Mac laptop screen shrank 420×700 to 357×562), and the
 * fallback-window note.
 *
 * ONE external stylesheet, no inline styles: the strip is re-styled inside the Picture-in-Picture window by a
 * <link> to this file, which lets the CSP drop 'unsafe-inline' from style-src (spike report, section 5).
 * JavaScript still sets widths and lefts through the CSSOM, which the CSP allows.
 */
:root {
  --bg:#12212c; --bg2:#16262f; --surface:#213542; --surface2:#2b4152;
  --ink:#eaf3f8; --dim:#a6bfcd; --faint:#8aa4b5; --line:rgba(130,180,205,.2);
  --blue:#3d8bf0; --teal:#26d3bd; --green:#48ce8f; --gold:#e6ac44; --coral:#f3837a; --violet:#8ea9f2;
  --wm-blue:#0E62C4; --wm-teal:#0D9E8F;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Cascadia Mono',Consolas,ui-monospace,monospace;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 18px/1.55 var(--font); -webkit-font-smoothing:antialiased; }
a { color:var(--teal); }
button { font-family:inherit; }
:focus-visible { outline:3px solid var(--teal); outline-offset:2px; border-radius:6px; }
.view { display:none; }
[hidden] { display:none !important; }
.vh { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- gate layout (before a session) ---------- */
.gate { display:none; min-height:100%; padding:72px 16px 120px; align-items:flex-start; justify-content:center;
  background:linear-gradient(160deg,var(--wm-blue),var(--wm-teal)); }
body.is-gate .gate { display:flex; }
body.is-gate .shell { display:none; }
.gcard { width:100%; max-width:600px; background:var(--bg); border-radius:22px; padding:32px 34px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55); }
.brand { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:22px; }
.brand svg { width:36px; height:36px; flex:none; }
.brand .wm { font-weight:800; font-size:20px; letter-spacing:-.01em; white-space:nowrap; }
.chip { display:inline-flex; align-items:center; gap:6px; font:600 13px/1.2 var(--mono); padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--dim); white-space:nowrap; }
.chip.beta { color:var(--teal); border-color:rgba(38,211,189,.45); background:rgba(38,211,189,.1); }
.chip.warn { color:var(--gold); border-color:rgba(230,172,68,.45); background:rgba(230,172,68,.1); }
.chip.late { color:var(--coral); border-color:rgba(243,131,122,.5); background:rgba(243,131,122,.1); }
.chip.bad { color:var(--coral); border-color:rgba(243,131,122,.5); background:rgba(243,131,122,.1); }
.chip.ok { color:var(--green); border-color:rgba(72,206,143,.45); background:rgba(72,206,143,.1); }
.chip.audio { color:var(--gold); border-color:rgba(230,172,68,.4); background:rgba(230,172,68,.1); }
.chip.test, .chip.demo { color:var(--violet); border-color:rgba(142,169,242,.5); background:rgba(142,169,242,.12); }
.chip.stub { color:#3B2A00; background:#FFF8E6; border:1.5px dashed #C98A12; }
.agree { border:0; margin:18px 0 0; padding:0; min-width:0; }
.card.testers { border-color:rgba(142,169,242,.45); }
/* the "join your call first" popup: nothing on it but the line and the button */
body[data-view="ready"] .gcard { max-width:460px; text-align:center; margin-top:10vh; }
body[data-view="ready"] .gcard .brand { justify-content:center; }
.readytx { font-size:27px; font-weight:800; line-height:1.3; margin:10px 0 24px; text-wrap:balance; }
.btn.readybtn { font-size:21px; padding:17px 40px; }
h1 { font-size:34px; line-height:1.15; letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance; }
h2 { font-size:24px; margin:30px 0 10px; }
h3, .card h2 { font-size:20px; margin:0 0 6px; }
.sub { color:var(--dim); font-size:19px; margin:0 0 20px; }
.small { font-size:15.5px; color:var(--dim); }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px; }
.btn { border:0; border-radius:12px; padding:14px 22px; font-weight:800; font-size:17px; cursor:pointer; }
.btn.primary { background:linear-gradient(90deg,var(--blue),var(--teal)); color:#08161d; }
.btn.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.btn.stop { background:var(--coral); color:#2a0f0c; }
a.btn { display:inline-flex; align-items:center; text-decoration:none; }
.btn.link { background:none; color:var(--teal); padding:6px 0; font-weight:700; text-decoration:underline; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn.sm { font-size:15px; padding:10px 16px; }
.btn.wide { display:block; width:100%; margin-top:18px; font-size:19px; padding:17px 22px; } /* QA 2: "Send me a code" below the terms box, the entire width */
.field { display:flex; flex-direction:column; gap:6px; margin:14px 0; }
.field label { font-size:15.5px; color:var(--dim); font-weight:600; }
input[type=email], input[type=text], select, input[type=number] { background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:13px 14px; font:inherit; font-size:18px; width:100%; }
input.code { font:600 30px/1 var(--mono); letter-spacing:.35em; text-align:center; padding:16px 10px; }
.err { display:none; color:var(--coral); font-size:15.5px; margin:6px 0 0; }
.err.show { display:block; }
.note { border-top:1px solid var(--line); padding:14px 0 0; font-size:15.5px; color:var(--dim); margin:24px 0 0; }
.note b { color:var(--ink); }
.check { display:flex; gap:12px; align-items:flex-start; font-size:16.5px; color:var(--ink); margin:12px 0; }
.check input { width:22px; height:22px; margin-top:2px; flex:none; accent-color:var(--teal); }
.toggle { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; border-top:1px solid var(--line); padding:14px 0 0; margin-top:12px; }
.toggle .tx { min-width:0; }
.switch { position:relative; width:52px; height:30px; flex:none; }
.switch input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.switch span { position:absolute; inset:0; border-radius:999px; background:var(--surface2); border:1px solid var(--line); transition:background .15s; pointer-events:none; }
.switch span::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--dim); transition:transform .15s, background .15s; }
.switch input:checked + span { background:rgba(38,211,189,.35); }
.switch input:checked + span::after { transform:translateX(22px); background:var(--teal); }
.switch input:disabled + span { opacity:.45; }
details.what { margin-top:10px; font-size:15.5px; color:var(--dim); }
details.what summary { cursor:pointer; color:var(--teal); font-weight:600; }
details.what code { font-family:var(--mono); font-size:14px; color:var(--ink); }
.stubnote { margin-top:14px; padding:10px 12px; border:1.5px dashed #C98A12; border-radius:10px; background:#FFF8E6; color:#3B2A00; font-size:14px; line-height:1.4; }

/* ---------- the camera card (sign-in: "ask for the camera at sign-in, before 'I'm ready'") ---------- */
.camcard { margin-top:22px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--bg2); }
.camcard h2 { font-size:19px; margin:0 0 4px; }
.camcard .small { margin:0 0 10px; }
.camwrap { position:relative; display:none; aspect-ratio:16/9; background:#0b141b; border-radius:12px; overflow:hidden; margin-top:12px; }
.camwrap.show { display:block; }
video.preview { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); background:#0b141b; display:block; }
.camstatus { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px; font-size:16px; }
.camstatus .ok { color:var(--green); font-weight:700; }
.camstatus .bad { color:var(--coral); font-weight:700; }
.meter { position:relative; width:140px; height:12px; border-radius:6px; background:var(--surface2); overflow:hidden; }
.meter .lvl { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,var(--green),var(--teal)); transition:width .08s linear; }
.pickers { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.pickers .field { flex:1 1 200px; margin:0; }
.guide { margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line); font-size:15.5px; color:var(--dim); white-space:pre-line; }
.guide b { color:var(--ink); }

/* ---------- shell (after sign-in) ---------- */
.shell { display:flex; min-height:100%; }
.rail { flex:0 0 240px; background:linear-gradient(180deg,#0C58B0,#08756A); color:#eaf7ff; display:flex; flex-direction:column; padding:22px 16px; gap:16px; position:sticky; top:0; height:100vh; }
.rail .brand { margin:0; }
.rail .brand svg { filter:brightness(0) invert(1); }
.rail .chip.beta { background:rgba(4,16,26,.2); color:#fff; border-color:rgba(255,255,255,.45); align-self:flex-start; }
.rail nav { display:flex; flex-direction:column; gap:4px; }
.rail nav button { text-align:left; background:transparent; border:0; color:#eaf7ff; font-size:16px; padding:10px 12px; border-radius:10px; cursor:pointer; }
.rail nav button:hover { background:rgba(4,16,26,.16); }
.rail nav button.on { background:rgba(4,16,26,.26); font-weight:700; }
.rail .allow { background:rgba(4,16,26,.2); border-radius:12px; padding:10px 12px; font-size:14.5px; line-height:1.4; }
.rail .allow b { display:block; font-size:15.5px; }
.rail .spacer { flex:1; }
.rail .safe { font-size:14px; line-height:1.4; opacity:.95; }
.rail .ver { font:400 13px/1.3 var(--mono); opacity:.9; }
.content { flex:1 1 auto; min-width:0; padding:40px 44px 140px; max-width:1180px; }
.card { background:var(--bg2); border:1px solid var(--line); border-radius:18px; padding:22px; }
.card + .card, .card.mt { margin-top:16px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin:16px 0; }
.row { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.row .field { margin:0; min-width:180px; flex:1; }
.timebig { font:700 46px/1 var(--mono); letter-spacing:-.02em; }
.status { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.status h1 { margin:0; }
.status .right { margin-left:auto; }
.banner { display:none; background:rgba(230,172,68,.1); border:1px solid rgba(230,172,68,.42); border-radius:12px; padding:12px 16px; margin:14px 0; font-size:16.5px; white-space:pre-line; }
.banner.show { display:flex; gap:12px; align-items:flex-start; }
.banner .tx { flex:1; }
.banner .x { display:none; flex:none; background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:16px; }
.banner.sticky .x { display:inline-flex; align-items:center; justify-content:center; }
.banner.info { background:rgba(38,211,189,.08); border-color:rgba(38,211,189,.38); }
.banner.err { background:rgba(243,131,122,.1); border-color:rgba(243,131,122,.5); }
.callgrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,420px); gap:22px; align-items:start; margin-top:16px; }
.floating { display:none; text-align:center; padding:36px 20px; border:2px dashed var(--line); border-radius:16px; color:var(--dim); }
.floating.show { display:block; }
.remedy { margin-top:16px; }
.detailrow { display:flex; align-items:center; gap:10px; margin-top:14px; font-size:15.5px; color:var(--dim); }
.detailrow input { width:20px; height:20px; accent-color:var(--teal); }

/* ---------- live meters (the strip) ---------- */
.meters { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-top:0; }
.speak { display:flex; align-items:center; gap:8px; font-size:16px; color:var(--faint); }
.speak .dot { width:14px; height:14px; border-radius:50%; background:var(--surface2); transition:background .1s, box-shadow .1s; }
.speak.on .dot { background:var(--green); box-shadow:0 0 0 5px rgba(72,206,143,.22); }
.speak.on { color:var(--green); }
.airtime .lab { display:flex; justify-content:space-between; font-size:15.5px; color:var(--dim); margin-bottom:6px; }
.airtime .lab b { color:var(--ink); }
.bar { position:relative; height:12px; border-radius:7px; background:var(--surface2); }
.bar .fill { position:absolute; left:0; top:0; bottom:0; border-radius:7px; background:linear-gradient(90deg,var(--gold),var(--coral)); width:0; }
.bar .tick { position:absolute; top:-4px; bottom:-4px; width:3px; background:var(--teal); left:33%; }
.fair { font-size:14px; color:var(--faint); margin-top:8px; }
.nudge { display:flex; gap:12px; align-items:flex-start; margin-top:14px; background:rgba(230,172,68,.12); border:1px solid rgba(230,172,68,.34); border-radius:12px; padding:12px 14px; min-height:56px; }
.nudge.empty { background:var(--surface); border-color:var(--line); color:var(--faint); align-items:center; }
.nudge.sys { background:rgba(38,211,189,.1); border-color:rgba(38,211,189,.4); }
.nudge .ic { flex:none; width:30px; height:30px; border-radius:50%; background:var(--gold); color:#20323f; font-weight:800; display:grid; place-items:center; }
.nudge.sys .ic { background:var(--teal); }
.nudge.empty .ic { display:none; }
.nudge .tx { font-size:17px; line-height:1.35; }
/* Oded, 2026-10-08 (QA round 2): "Do options 1 and 3" — option 3, an attention cue when a nudge lands: a short pulse of
   the card, no sound. Three beats, under three seconds, then still; none under prefers-reduced-motion. */
.nudge { --land: rgba(230,172,68,.8); }
.nudge.sys { --land: rgba(38,211,189,.8); }
.nudge.land { animation: nudgeLand .9s ease-out 3; }
@keyframes nudgeLand {
  0% { box-shadow: 0 0 0 0 var(--land); transform: scale(1); }
  45% { box-shadow: 0 0 0 12px transparent; transform: scale(1.025); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}
.marklbl { font:500 13px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin:16px 0 8px; }
.marks { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.mk { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px; border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--dim); cursor:pointer; font-size:13.5px; font-weight:700; user-select:none; font-family:inherit; }
.mk .emo { font-size:24px; line-height:1; }
.mk:hover { border-color:var(--teal); }
.mk.on { color:var(--ink); border-color:var(--teal); background:rgba(38,211,189,.16); }
/* NUMERIC QA READOUTS (the desktop's .qa): hidden unless "Show live detail". The face-health chip is
   never .qa: a broken face channel is visible whether the numbers are up or not. */
.strip:not(.detail) .qa { display:none !important; }
.readouts { display:flex; flex-wrap:wrap; gap:4px 12px; font:400 12.5px/1.4 var(--mono); color:var(--dim); }
.readouts b { color:var(--ink); font-weight:600; }

/* ---------- the in-call strip (in-page, or floated in a Picture-in-Picture window) ---------- */
.strip { width:100%; max-width:420px; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; color:var(--ink); font:400 18px/1.55 var(--font); }
.strip .sh { display:flex; align-items:center; gap:8px; }
.strip .sh svg { width:24px; height:24px; }
.strip .sh .t { font-weight:800; font-size:18px; }
.strip .sh .chip { margin-left:auto; }
.strip .sel { display:flex; gap:8px; }
.strip .sel select { padding:8px 10px; font-size:15px; }
.strip .sel input { width:70px; padding:8px 10px; font-size:15px; }
.strip .stopbar { display:flex; margin-top:4px; }
.strip .stopbar .btn { flex:1; }
.strip .foot { font:400 12.5px/1.3 var(--mono); color:var(--faint); text-align:center; }
.strip .fallbacknote { display:none; font-size:13.5px; color:var(--gold); text-align:center; }
.strip.fallback .fallbacknote { display:block; }
body.pipbody { margin:0; padding:10px; background:var(--bg); min-height:100vh; }
body.pipbody .strip { max-width:none; border:0; padding:6px; }
/* The Mac laptop screen gives the floating window about 350×560 CSS px: the strip must still read. */
@media (max-width:380px) {
  body.pipbody { padding:6px; }
  .strip { gap:7px; }
  .strip .sh .t { font-size:16px; }
  .strip .sel select, .strip .sel input { padding:6px 8px; font-size:14px; }
  .speak { font-size:14.5px; }
  .airtime .lab { font-size:14px; }
  .nudge { padding:10px 12px; min-height:50px; } .nudge .tx { font-size:15.5px; }
  .btn.stop { padding:12px 16px; font-size:16px; }
}

/* ---------- review ---------- */
.playwrap { background:#0b141b; border-radius:16px; overflow:hidden; }
.playwrap video { display:block; width:100%; max-height:420px; background:#0b141b; }
.noplay { aspect-ratio:16/8; display:grid; place-items:center; text-align:center; color:var(--faint); padding:20px; font-size:16px; }
.tl-track { position:relative; height:24px; border-radius:12px; background:var(--surface2); margin:18px 0 10px; }
.tl-m { position:absolute; top:50%; transform:translate(-50%,-50%); min-width:32px; height:32px; padding:0 4px; border-radius:16px; background:var(--surface); border:2.5px solid var(--line); display:grid; place-items:center; font-size:17px; box-shadow:0 1px 5px rgba(0,0,0,.35); }
.tl-m.playback { border-style:dashed; }
.tl-m.m-strong{border-color:var(--green)} .tl-m.m-off{border-color:var(--coral)} .tl-m.m-redo{border-color:var(--gold)} .tl-m.m-crucial{border-color:var(--violet)} .tl-m.m-lost_focus{border-color:var(--teal)} .tl-m.m-flag{border-color:var(--blue)}
.tl-end { position:absolute; right:0; top:-22px; font:500 12.5px/1 var(--mono); color:var(--faint); }
.tl-leg { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14.5px; color:var(--dim); }
.insight { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:12px; }
.insight .tt { font-size:18px; font-weight:700; }
.insight p { font-size:16.5px; color:var(--dim); margin:6px 0 10px; }
.acc { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.acc .q { font-size:15px; color:var(--dim); }
.acc button { font-size:15px; background:var(--surface2); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:7px 14px; cursor:pointer; }
.acc button.on-yes { border-color:var(--green); color:var(--green); } .acc button.on-no { border-color:var(--coral); color:var(--coral); }
.week { background:var(--surface); border:1px solid rgba(38,211,189,.38); border-radius:14px; padding:16px 18px; margin-top:16px; }
.week .lbl { font:500 12.5px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--teal); }
.week .lt { font-size:20px; font-weight:800; margin:6px 0 4px; } .week .lw { font-size:16px; color:var(--dim); }
.endpanel { margin-top:22px; border:1.5px solid rgba(38,211,189,.45); background:rgba(38,211,189,.07); border-radius:16px; padding:20px 22px; }
.rmarks { margin-top:14px; }
.rmarks .marks { max-width:520px; }

@media (max-width:860px) {
  .shell { flex-direction:column; }
  .rail { position:static; height:auto; flex:none; width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .rail nav { flex-direction:row; }
  .rail .spacer, .rail .safe { display:none; }
  .content { padding:24px 16px 160px; }
  .callgrid { grid-template-columns:1fr; }
  .gcard { padding:24px 20px; }
  h1 { font-size:28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } .nudge.land { animation:none; } }