/* services/call-coach/public/app.css — Apple-like; see docs/superpowers/specs/2026-10-01-call-coach-mockups/ */
:root{--bg:#F5F5F7;--card:#FFFFFF;--ink:#1D1D1F;--dim:#86868B;--soft:#6E6E73;--line:#E5E5EA;--fill:#F2F2F7;
  --accent:#0071E3;--accent-bg:#E6F0FD;--warn:#FF9500;--warn-ink:#B25E00;--warn-bg:#FFF8EC;--good:#34C759;--good-ink:#1A7F37;--good-bg:#E8F7EE;
  --r:18px;--shadow:0 4px 24px rgba(0,0,0,.06);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#000;--card:#1C1C1E;--ink:#F5F5F7;--dim:#98989D;--soft:#AEAEB2;--line:#38383A;--fill:#2C2C2E;
  --accent:#0A84FF;--accent-bg:#0A2A4A;--warn-bg:#33240A;--warn-ink:#FFB340;--good-bg:#0F2E18;--good-ink:#30D158;--shadow:none}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.num,time{font-variant-numeric:tabular-nums}
.shell{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;padding:22px 14px;display:flex;flex-direction:column;gap:4px;
  background:color-mix(in srgb,var(--card) 60%,transparent);backdrop-filter:blur(20px);border-right:1px solid var(--line)}
.rail .brand{font-weight:700;font-size:16px;letter-spacing:-.01em;padding:0 10px 16px}
.rail a{padding:8px 10px;border-radius:10px;color:var(--ink)}.rail a.on{background:var(--card);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.rail .who{margin-top:auto;font-size:12px;color:var(--dim);padding:0 10px;display:grid;gap:6px}
.rail .who button{all:unset;color:var(--accent);cursor:pointer}
main{padding:28px 32px;display:grid;gap:22px;align-content:start;max-width:1500px}
main.solo{min-height:100vh;place-content:center}
h1{font-size:30px;font-weight:600;letter-spacing:-.025em;margin:0}h2{font-size:17px;font-weight:600;margin:0}
.eyebrow{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px}
.glass{background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.08);padding:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;background:var(--fill);color:var(--soft)}
.pill.good{background:var(--good-bg);color:var(--good-ink)}.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}.pill.blue{background:var(--accent-bg);color:var(--accent)}
button,.btn{font:inherit;border:0;border-radius:999px;padding:7px 14px;background:var(--fill);color:var(--ink);cursor:pointer}
button.primary,.btn.primary{background:var(--accent);color:#fff}
input,textarea,select{font:inherit;color:var(--ink);background:var(--fill);border:1px solid transparent;border-radius:12px;padding:9px 12px;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);background:var(--card)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.login{width:360px;display:grid;gap:10px}.login h1{font-size:26px;margin-bottom:8px}.login .err{color:var(--warn-ink)}.login .hint{font-size:12px;color:var(--dim)}
.rows{display:grid}.rows>.row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--fill)}
.rows>.row:last-child{border-bottom:0}
/* call page */
.callpage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,1fr);gap:20px;align-items:start}
.side{position:sticky;top:20px;display:grid;gap:12px}
.player{display:flex;align-items:center;gap:14px}.player .play{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-size:16px;flex:none}
.player audio{width:100%}
.moments{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.turn{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:8px 18px;cursor:pointer}
.turn:hover{background:var(--fill)}.turn.now{background:var(--accent-bg)}
.turn .ts{font-size:11px;color:var(--dim);padding-top:3px}.turn b{font-weight:600}.turn.cust b{color:var(--soft)}
.turn.bad{background:var(--warn-bg);box-shadow:inset 3px 0 var(--warn)}.turn .why{margin-top:5px;font-size:13px;color:var(--warn-ink)}
.step{margin-top:16px}.step .eyebrow{margin-bottom:6px}
.focus{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--fill);border-radius:12px;padding:9px 12px}
.seg{display:inline-flex;background:var(--fill);border-radius:9px;padding:2px;font-size:12px}.seg a{padding:4px 10px;border-radius:7px;color:var(--ink)}
.seg a.on{background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.1);font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tile{background:var(--fill);border-radius:12px;padding:10px}
.tile b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}.tile span{font-size:11px;color:var(--dim)}
.bar{height:6px;background:var(--fill);border-radius:3px;position:relative;margin-top:4px}
.bar i{position:absolute;left:0;top:0;height:6px;border-radius:3px;background:var(--line)}.bar i.over{background:var(--warn)}
.bar s{position:absolute;top:-3px;width:2px;height:12px;background:var(--ink)}
table.list{width:100%;border-collapse:collapse}table.list th,table.list td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--fill);font-size:14px}
table.list th{font-size:12px;color:var(--dim);font-weight:500}
@media (max-width:900px){.shell{grid-template-columns:1fr}.rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap}.callpage{grid-template-columns:1fr}.side{position:static}main{padding:18px 16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}