/* Flatpay Pitch Trainer — mobile first */
:root{
  --ink:#000; --paper:#fff; --grey:#f1f2f1; --line:#e4e6e4;
  --muted:#6e6e6e; --faint:#9a9a9a;
  --mint:#92f8c2; --mint-soft:#dbf9eb;
  --peach:#f8b185; --pink:#f8b5d3; --cyan:#9beef8; --peri:#afbdfc;
  --good:#1d7a4a; --warn:#c2382f; --amber:#a35a1c;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:Calibri,"Segoe UI",-apple-system,system-ui,sans-serif;
  background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{font-family:"Arial Black","Arial Bold",Arial,sans-serif;letter-spacing:-.01em;margin:0}
button,input,select{font-family:inherit;font-size:16px}
button{cursor:pointer}

.screen{max-width:760px;margin:0 auto;padding:16px}
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center}
.logo{display:inline-block;width:118px;color:inherit}
.logo svg{width:100%;height:auto;display:block}

/* ------------------------------------------------------------- sign in */
#signin{background:var(--ink);color:var(--paper);max-width:none}
.signin-card{width:100%;max-width:420px;padding:24px}
.brand{display:flex;align-items:center;margin-bottom:30px;color:var(--paper)}
.brand.sm{margin:0;color:var(--ink)}
.brand.sm .logo{width:96px}
#signin h1{font-size:32px;line-height:1.05;margin-bottom:10px}
#signin .sub{color:#bebebe;font-size:15px;line-height:1.45;margin:0 0 24px}
#signin label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mint);margin-bottom:8px}
#signin input{width:100%;padding:15px 16px;border-radius:12px;border:1px solid #333;
  background:#151515;color:var(--paper)}
#signin input:focus{outline:2px solid var(--mint);border-color:transparent}
#signin .primary{background:var(--mint);color:var(--ink);width:100%;margin-top:18px}
.legal{color:#8b8b8b;font-size:12px;line-height:1.5;margin-top:22px}

/* ------------------------------------------------------------- chrome */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 0 14px}
.who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.tabs{display:flex;gap:6px;background:var(--grey);padding:4px;border-radius:12px;margin-bottom:18px}
.tab{flex:1;border:0;background:transparent;padding:10px 6px;border-radius:9px;
  font-weight:700;color:var(--muted);font-size:14px}
.tab.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
h2{font-size:24px;margin-bottom:14px}
.sub-h{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
.lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 8px}
.hint{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.5}
.err{color:var(--warn);font-size:14px;margin:12px 0 0}

/* ------------------------------------------------------------- buttons */
.primary{background:var(--ink);color:var(--paper);border:0;border-radius:12px;
  padding:15px 18px;font-weight:700}
.primary:active{transform:translateY(1px)}
.ghost{background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;font-weight:600;color:var(--muted)}
.wide{width:100%;margin-top:18px}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg.col{grid-template-columns:1fr}
.seg button{text-align:left;border:1px solid var(--line);background:var(--paper);
  border-radius:var(--r);padding:13px 14px;font-weight:700;font-size:15px}
.seg button small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
.seg button.on{background:var(--mint-soft);border-color:transparent;box-shadow:inset 0 0 0 2px var(--mint)}
select,.row input,.stack input{padding:13px 14px;border-radius:12px;border:1px solid var(--line);width:100%}
.row{display:flex;gap:8px;margin-top:10px}
.stack{display:grid;gap:8px;margin-top:10px}
.block{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.block summary{font-weight:700;cursor:pointer}

/* ------------------------------------------------------------- live */
.live{min-height:100dvh;display:flex;flex-direction:column;background:var(--ink);color:var(--paper)}
.live-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.live .eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mint);margin:0 0 4px}
.live h2{font-size:22px}
.live .sub{color:#a8a8a8;font-size:14px;margin:4px 0 0}
.timer{font-family:"Arial Black",Arial,sans-serif;font-size:20px;color:#d8d8d8;white-space:nowrap}
.orb-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 0}
.orb{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2b2b2b,#101010);
  display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:13px;
  box-shadow:0 0 0 1px #262626; transition:transform .12s ease, box-shadow .2s ease}
.orb.speaking{box-shadow:0 0 0 3px var(--mint),0 0 60px rgba(146,248,194,.35)}
.orb.listening{box-shadow:0 0 0 3px #3a3a3a}
.caption{min-height:96px;padding:0 4px}
.caption p{margin:0 0 8px;font-size:16px;line-height:1.45}
.caption .muted{color:#8b8b8b}
.caption .me{color:var(--mint)}
.live-actions{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.live .ghost{border-color:#3a3a3a;color:#d8d8d8}

/* ------------------------------------------------------------- results */
.score-hero{background:var(--ink);color:var(--paper);border-radius:18px;padding:22px;text-align:center}
.score-hero .n{font-family:"Arial Black",Arial,sans-serif;font-size:64px;line-height:1}
.score-hero .of{color:#9a9a9a;font-size:13px}
.score-hero .verdict{margin:12px 0 0;font-size:15px;line-height:1.5;color:#e2e2e2}
.badge{display:inline-block;margin-top:12px;background:var(--mint);color:var(--ink);
  font-family:"Arial Black",Arial,sans-serif;font-size:11px;letter-spacing:.06em;
  padding:6px 12px;border-radius:20px}
.badge.no{background:#3a3a3a;color:#d8d8d8}

.phase{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-top:9px}
.phase .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.phase .nm{font-family:"Arial Black",Arial,sans-serif;font-size:15px}
.phase .pts{font-family:"Arial Black",Arial,sans-serif;font-size:16px}
.phase .why{font-size:14px;color:var(--muted);margin-top:5px;line-height:1.45}
.bar-track{height:7px;border-radius:6px;background:var(--grey);margin-top:9px;overflow:hidden}
.bar-fill{height:100%;background:var(--mint);border-radius:6px}
.bar-fill.mid{background:var(--peach)} .bar-fill.low{background:#f6a9a2}
.capped{font-size:12px;color:var(--warn);margin-top:6px}

.checks{display:grid;gap:6px;margin-top:10px}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4}
.chk .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:5px}
.chk.y .dot{background:var(--good)} .chk.n .dot{background:var(--warn)}
.chk.n{color:var(--warn)}

.notes{margin-top:18px}
.notes ul{margin:6px 0 0;padding-left:20px}
.notes li{font-size:14.5px;line-height:1.55;margin-bottom:6px}

.list{display:grid;gap:9px}
.item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;
  background:var(--paper);text-align:left}
.item b{font-size:15px} .item .meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.pill{font-family:"Arial Black",Arial,sans-serif;font-size:13px;padding:5px 10px;
  border-radius:20px;background:var(--mint);color:var(--ink);white-space:nowrap}
.pill.mid{background:#fdebda;color:var(--amber)} .pill.low{background:#fbeaea;color:var(--warn)}
.empty{color:var(--muted);font-size:14px;background:var(--grey);padding:14px;border-radius:12px}
.spend{background:var(--grey);border-radius:12px;padding:14px;font-size:14px;line-height:1.6}

.transcript{margin-top:20px}
.t-turn{font-size:14.5px;line-height:1.5;margin-bottom:9px}
.t-turn .who{font-family:"Arial Black",Arial,sans-serif;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);display:block}
.t-turn.rep .who{color:var(--good)}
.t-turn .cut{color:var(--faint);font-style:italic}

@media(min-width:620px){
  .screen{padding:26px}
  h2{font-size:28px}
}

/* ------------------------------------------------------- approval call */
.mgr{background:var(--mint);color:var(--ink);margin-bottom:10px}
.orb.oncall{box-shadow:0 0 0 3px var(--peri),0 0 60px rgba(175,189,252,.35)}
body.on-call .live{background:#0a0d1a}
body.on-call .live .eyebrow{color:var(--peri)}