static/style.css

:root{
  --ink:#1B2430; --ink-soft:#4A5568; --paper:#F4F6F8; --panel:#FFFFFF;
  --line:#D7DDE3; --teal:#0F9B8E; --teal-soft:#E4F5F3;
  --indigo:#3A4FC2; --indigo-soft:#EAEDFB; --amber:#B8720B; --amber-soft:#FBF0DE;
  --danger:#C0392B; --danger-soft:#FBE9E7;
  --radius:12px;
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif; line-height:1.55; font-size:17px;
}
.wrap{max-width:640px; margin:0 auto; padding:28px 20px 60px;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:600;}
h1{font-size:1.8rem; margin:0 0 6px;}
h2{font-size:1.3rem;}
.sub{color:var(--ink-soft); margin:0 0 24px; font-size:0.98rem;}

.badge{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:0.68rem;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--amber);
  background:var(--amber-soft); border:1px solid #ECD8AE; padding:4px 10px; border-radius:999px;
  margin-bottom:16px;
}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin-bottom:16px;}
.hidden{display:none !important;}

/* ---- Consent / demographics form ---- */
.field-label{display:block; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin:18px 0 8px;}
.field-input{width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:8px; font-family:'IBM Plex Sans',sans-serif; font-size:0.95rem; background:#fff; color:var(--ink);}
.field-input:focus-visible{outline:3px solid var(--indigo); outline-offset:2px;}
.radio-group{display:flex; flex-wrap:wrap; gap:8px;}
.radio-pill{position:relative;}
.radio-pill input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.radio-pill label{
  display:block; padding:9px 16px; border:1.5px solid var(--line); border-radius:999px;
  font-size:0.92rem; cursor:pointer; transition:all 0.15s ease; user-select:none;
}
.radio-pill input:checked + label{background:var(--ink); color:#fff; border-color:var(--ink);}
.radio-pill input:focus-visible + label{outline:3px solid var(--indigo); outline-offset:2px;}
.consent-list{color:var(--ink-soft); font-size:0.94rem; padding-left:20px; margin:0 0 6px;}
.consent-list li{margin-bottom:8px;}
.consent-list strong{color:var(--ink);}
.consent-check{display:flex; align-items:flex-start; gap:10px; font-size:0.92rem; margin:20px 0; cursor:pointer;}
.consent-check input{margin-top:3px; width:18px; height:18px; accent-color:var(--teal);}

.big-btn{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem;
  background:var(--ink); color:#fff; border:none; border-radius:10px;
  padding:16px 24px; cursor:pointer; width:100%; margin-top:8px;
}
.big-btn:hover{background:#000;}
.big-btn:disabled{opacity:0.5; cursor:not-allowed;}
.big-btn:focus-visible{outline:3px solid var(--indigo); outline-offset:3px;}

/* ---- Progress + prompt ---- */
.progress-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.progress-label{font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap;}
.progress-bar{height:4px; background:var(--line); border-radius:2px; overflow:hidden; flex:1; margin-left:16px;}
.progress-fill{height:100%; background:var(--teal); border-radius:2px; transition:width 0.4s ease;}
.prompt-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--teal); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;}
.prompt-text{font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:600; margin:0 0 26px; line-height:1.3;}

/* ---- Recording control -- a real custom control, not a framework's default ---- */
.rec-zone{display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 0;}
.rec-btn{
  width:84px; height:84px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); color:#fff; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.15s ease, background 0.2s ease;
}
.rec-btn:hover{transform:scale(1.05);}
.rec-btn:focus-visible{outline:3px solid var(--indigo); outline-offset:3px;}
.rec-btn.recording{background:var(--danger); animation:pulse 1.1s infinite;}
.rec-btn:disabled{opacity:0.5; cursor:not-allowed; transform:none;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,0.4);} 70%{box-shadow:0 0 0 14px rgba(192,57,43,0);} 100%{box-shadow:0 0 0 0 rgba(192,57,43,0);}}
.rec-hint{font-size:0.85rem; color:var(--ink-soft);}

.analyzing{display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:0.85rem; padding:24px 0;}
.spinner{width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--indigo); border-radius:50%; animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Prediction + legend ---- */
.prediction-box{background:var(--indigo-soft); border-radius:10px; padding:18px 20px; margin:18px 0; display:flex; flex-direction:column; gap:14px;}
.prediction-field{display:flex; flex-direction:column; gap:4px;}
.prediction-field + .prediction-field{border-top:1px solid rgba(58,79,194,0.15); padding-top:12px;}
.prediction-label{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--indigo);}
.prediction-value{font-family:'IBM Plex Mono',monospace; font-size:1.05rem; font-weight:600; color:var(--ink);}
.prediction-value.empty{color:var(--ink-soft); font-weight:400; font-style:italic;}
.timing-caption{color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:0.82rem; font-style:italic; margin:6px 0 0;}

.legend-box{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin:18px 0;}
.legend-title{font-weight:600; margin-bottom:10px;}
.legend-item{margin-bottom:8px; font-size:0.95rem;}
.legend-item:last-child{margin-bottom:0;}

/* ---- Judgement ---- */
.judgement-block{margin:20px 0;}
.judgement-question{font-weight:500; margin-bottom:10px;}

/* ---- UMUX / feedback ---- */
.umux-item{margin-bottom:22px;}
.umux-question{font-size:0.98rem; margin-bottom:10px;}
.umux-scale{display:flex; gap:6px; flex-wrap:wrap;}
.umux-scale .radio-pill label{padding:8px 14px; font-size:0.88rem;}
.umux-anchors{display:flex; justify-content:space-between; font-size:0.76rem; color:var(--ink-soft); margin-top:4px;}

.start-screen,.end-screen{text-align:center; padding:20px 0;}

.error-msg{
  background:var(--danger-soft); color:var(--danger); border:1px solid #F0C5BF;
  border-radius:8px; padding:12px 16px; font-size:0.9rem; margin-bottom:16px;
}