/* D.RB Hotline. Styles carried over from the approved design (docs/design-preview.html).
   One mobile-first screen that switches between idle / recording / review / sent. Single dark look by design. */
@font-face{font-family:'IBM Plex Mono'; font-weight:400; font-style:normal; font-display:swap; src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono'; font-weight:500; font-style:normal; font-display:swap; src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono'; font-weight:700; font-style:normal; font-display:swap; src:url(/fonts/ibm-plex-mono-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald'; font-weight:700; font-style:normal; font-display:swap; src:url(/fonts/oswald-latin-700-normal.woff2) format('woff2')}

:root{
  --bg:#000000; --fg:#ffffff; --muted:#b5b5b5; --dim:#9a9a9a; --soft:#cfcfcf; --rule:rgba(255,255,255,.55); --frame:#2a2a2a;
  --rec:#ff2a2a; --cyan:#00e5ff; --magenta:#ff00d4; --yellow:#ffe600;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --mark:'Oswald', 'Arial Narrow', Impact, sans-serif;
  color-scheme: dark;
}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--mono);
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-top:max(16px, env(safe-area-inset-top, 0px)); padding-bottom:max(24px, env(safe-area-inset-bottom, 0px))}
a{color:var(--fg)} a:hover{color:var(--cyan)}
:focus-visible{outline:2px dashed var(--cyan); outline-offset:3px}
[hidden]{display:none !important}

.phone{box-sizing:border-box; width:100%; max-width:430px; min-height:calc(100svh - 40px); margin:0 auto; padding:4px 4px 8px;
  background:var(--bg); display:flex; flex-direction:column}
.screen{display:flex; flex-direction:column; flex:1}

.mark{font-family:var(--mark); font-weight:700; line-height:1; text-decoration:none; color:var(--fg)}
.rainbow{font-weight:700; letter-spacing:.3em}
.c1{color:#ff2a2a}.c2{color:#ff8000}.c3{color:#ffd500}.c4{color:#55ff00}.c5{color:#00ffaa}.c6{color:#00ccff}.c7{color:#b05cff}
.glitch{font-weight:500; text-shadow:-3px 0 #ff1f4b, 3px 0 var(--cyan), 0 3px var(--yellow)}

.logo{display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:16px}
.logo .mark{font-size:40px}
.logo .rainbow{font-size:12px}
.headline{margin:32px 0 0; font-size:36px; line-height:1.05; text-align:center; transform:rotate(-2deg)}

.calls{margin-top:30px; display:flex; flex-direction:column; gap:10px}
.label{font-size:11px; letter-spacing:.14em; color:var(--dim)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:36px; padding:0 12px; border:1px dashed rgba(255,255,255,.7); background:transparent; color:var(--fg);
  font:12px var(--mono); cursor:pointer; border-radius:0}
.chip[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-style:solid; font-weight:700}
.prompt{border:1px dashed var(--rule); padding:14px; display:flex; flex-direction:column; gap:8px}
.prompt .when{font-size:11px; color:var(--dim); letter-spacing:.06em}
.prompt .q{font-size:15px; line-height:1.45}

.rec-wrap{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:28px}
.rec{width:124px; height:124px; border-radius:50%; border:none; cursor:pointer; color:var(--fg);
  font:700 15px/1 var(--mono); letter-spacing:.2em; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 38% 34%, #ff6a6a 0%, var(--rec) 45%, #b30000 100%);
  box-shadow:-7px 0 0 var(--cyan), 7px 0 0 var(--magenta); animation:pulse 2.4s ease-in-out infinite}
.rec[disabled]{opacity:.5; animation:none; cursor:default}
@keyframes pulse{0%,100%{box-shadow:-7px 0 0 var(--cyan),7px 0 0 var(--magenta),0 0 0 0 rgba(255,42,42,.5)}50%{box-shadow:-7px 0 0 var(--cyan),7px 0 0 var(--magenta),0 0 0 18px rgba(255,42,42,0)}}
.small{font-size:12px; color:var(--soft)}

.leaders{display:flex; flex-direction:column; gap:12px; margin-top:24px; font-size:12px}
.leaders div{display:flex; align-items:baseline; gap:6px}
.leaders i{flex:1; border-bottom:1px dashed var(--rule)}

.fine{margin:auto 0 0; padding-top:28px; font-size:11px; line-height:1.5; color:var(--muted)}

/* notices: mic denied, in-app browser, upload errors */
.notice{margin-top:20px; border:1px dashed var(--yellow); padding:14px; font-size:12px; line-height:1.55; display:flex; flex-direction:column; gap:8px}
.notice strong{color:var(--yellow); letter-spacing:.08em; font-size:11px}
.notice p{margin:0}
.notice ol{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
.notice .secondary{height:40px; margin-top:4px}

/* shared header for recording / review / sent */
.top{display:flex; justify-content:space-between; align-items:center}
.top .mark{font-size:24px}
.top .rainbow{font-size:11px}
.h2{margin:36px 0 0; font-size:28px; line-height:1.1; font-weight:500; text-shadow:-2px 0 #ff1f4b, 2px 0 var(--cyan), 0 2px var(--yellow)}
.re{align-self:flex-start; margin-top:12px; padding:6px 10px; border:1px dashed var(--rule); font-size:12px}

/* recording */
.live{display:inline-flex; align-items:center; gap:8px; margin-top:36px; font-size:11px; letter-spacing:.14em; color:var(--rec)}
.live::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--rec); animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.countdown{margin:18px 0 0; font-family:var(--mark); font-size:120px; line-height:.9; letter-spacing:-.02em; text-align:center;
  font-variant-numeric:tabular-nums; text-shadow:-4px 0 #ff1f4b, 4px 0 var(--cyan), 0 4px var(--yellow)}
.countdown.low{color:var(--rec)}
.left{text-align:center; font-size:11px; letter-spacing:.14em; color:var(--dim); margin-top:10px}
.livewave{margin-top:28px; height:96px; border-top:1px dashed var(--rule); border-bottom:1px dashed var(--rule)}
.stop-wrap{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:32px}
.stop{width:124px; height:124px; border-radius:50%; border:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 38% 34%, #ff6a6a 0%, var(--rec) 45%, #b30000 100%);
  box-shadow:-7px 0 0 var(--cyan), 7px 0 0 var(--magenta); display:flex; align-items:center; justify-content:center}
.stop span{display:block; width:36px; height:36px; background:var(--fg)}

/* review */
.player{margin-top:24px; display:flex; align-items:center; gap:14px}
.play{flex:none; width:52px; height:52px; border-radius:50%; border:1.5px solid var(--fg); background:transparent; color:var(--fg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
.wave{flex:1; min-width:0; height:64px}
.times{display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.fields{display:flex; flex-direction:column; gap:16px; margin-top:28px}
.fields label{display:flex; flex-direction:column; gap:6px; font-size:12px}
.fields em{font-style:normal; color:var(--dim)}
.fields input{height:44px; box-sizing:border-box; padding:0 12px; background:transparent; border:1px dashed rgba(255,255,255,.6);
  color:var(--fg); font:16px var(--mono); border-radius:0; -webkit-appearance:none; appearance:none}
.fields input::placeholder{color:#8f8f8f}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:22px; font-size:12px; line-height:1.5; color:#e6e6e6}
.consent input{flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--rec)}
.actions{display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:28px}
.primary{height:54px; border:none; background:var(--fg); color:var(--bg); font:700 15px var(--mono); letter-spacing:.08em; cursor:pointer; border-radius:0}
.primary[disabled]{background:#3a3a3a; color:#8f8f8f; cursor:not-allowed}
.secondary{height:48px; border:1px dashed rgba(255,255,255,.7); background:transparent; color:var(--fg); font:13px var(--mono); cursor:pointer; border-radius:0}

/* sent */
.thanks{margin:56px 0 0; font-size:44px; line-height:1.02; text-align:center; transform:rotate(-2deg)}
.sent-copy{margin:28px 0 0; font-size:14px; line-height:1.6; color:var(--soft); text-align:center}

/* "how we use recordings" page */
.doc{max-width:620px; margin:0 auto; padding:8px 4px 24px}
.doc h1{margin:28px 0 0; font-size:30px; line-height:1.1; font-weight:500; text-shadow:-2px 0 #ff1f4b, 2px 0 var(--cyan), 0 2px var(--yellow)}
.doc h2{margin:30px 0 8px; font-size:12px; letter-spacing:.14em; color:var(--dim); font-weight:700}
.doc p, .doc li{font-size:13px; line-height:1.65; color:#e6e6e6; max-width:65ch}
.doc ul{padding-left:18px}
.doc .back{display:inline-block; margin-top:28px; font-size:12px}
.doc .stamp{font-size:11px; color:var(--dim); margin-top:32px}

@media (prefers-reduced-motion: reduce){ .rec,.live::before{animation:none} }
@media (min-width:600px){ .phone{border:1px solid var(--frame); border-radius:28px; padding:20px 22px 24px; margin-top:16px; min-height:844px} }

a.secondary{display:flex; align-items:center; justify-content:center; text-decoration:none; box-sizing:border-box}