/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; touch-action: manipulation; }
input  { font: inherit; color: inherit; background: none; border: none; outline: none; width: 100%; }

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --bg:         #0B1414;
  --surface:    #0F1C1C;
  --surface-2:  #142626;
  --teal:       #3ECFBF;
  --teal-dim:   #2A9A8E;
  --teal-glow:  rgba(62,207,191,.18);
  --teal-faint: rgba(62,207,191,.07);
  --text:       #EAF2F1;
  --text-2:     #7BA8A4;
  --text-3:     #3E6360;
  --nominal:    #3ECFBF;
  --watch:      #EAAA43;
  --elevated:   #E05555;
  --border:     rgba(62,207,191,.14);
  --border-2:   rgba(62,207,191,.07);
  --display:    'DM Serif Display', serif;
  --mono:       'IBM Plex Mono', monospace;
  --body:       'DM Sans', sans-serif;
  --r:          12px;
  --r-sm:       8px;
}

/* ── Screen system ─────────────────────────────────────────── */
#app { width: 100%; height: 100%; position: relative; }
.screen {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 430px;
  margin: 0 auto;
  position: absolute;
  top: 0; left: 0; right: 0;
  overflow: hidden;
}
.screen.active { display: flex; }
.screen-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.screen-scroll::-webkit-scrollbar { display: none; }

/* ── Typography ────────────────────────────────────────────── */
.t-display { font-family: var(--display); }
.t-mono    { font-family: var(--mono); }
.t-body    { font-family: var(--body); }
.t-label   { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.t-title   { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

/* ── Logo ──────────────────────────────────────────────────── */
.logo { font-family: var(--display); font-size: 42px; color: var(--text); letter-spacing: -.01em; line-height: 1; }
.tagline {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: var(--teal); text-transform: uppercase; margin-top: 6px;
}

/* ── Header ────────────────────────────────────────────────── */
.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}
.header-logo { font-family: var(--display); font-size: 22px; color: var(--text); }
.header-action { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--teal); text-transform: uppercase; }
.btn-back { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.btn-back svg { width: 14px; height: 14px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  width: 100%; padding: 16px; border-radius: var(--r);
  background: var(--teal); color: var(--bg);
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .15s;
}
.btn-primary:active { opacity: .8; }
.btn-primary:disabled { opacity: .35; }
.btn-ghost {
  padding: 12px 20px; border: 1px solid var(--border);
  border-radius: var(--r); color: var(--teal);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .15s;
}
.btn-ghost:active { background: var(--teal-faint); }
.btn-text { color: var(--text-2); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }

/* ── Forms ─────────────────────────────────────────────────── */
.field {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 14px 16px;
}
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); display: block; margin-bottom: 6px; }
.field input { font-size: 15px; color: var(--text); }
.field input::placeholder { color: var(--text-3); }
.field:focus-within { border-color: var(--teal-dim); }
.field-input-row { display: flex; align-items: center; gap: 8px; }
.field-input-row input { flex: 1; }
.btn-pw-toggle {
  flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--text-3); transition: color .15s; padding: 0;
}
.btn-pw-toggle:active, .btn-pw-toggle:hover { color: var(--text-2); }
.btn-pw-toggle svg { width: 16px; height: 16px; }
.error-msg {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--elevated);
  background: rgba(224,85,85,.1);
  border: 1px solid rgba(224,85,85,.3);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  line-height: 1.5;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 16px;
}
.card-elevated {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}
.section-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 8px;
}

/* ── Pills ─────────────────────────────────────────────────── */
.pills { display: flex; gap: 8px; }
.pill {
  flex: 1; padding: 10px 4px; border-radius: var(--r-sm);
  border: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2);
  text-align: center; transition: all .15s;
}
.pill.active { background: var(--teal-glow); border-color: var(--teal); color: var(--teal); }

/* ── Status badge ──────────────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 20px;
}
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-badge.nominal { color: var(--nominal); background: rgba(62,207,191,.1); }
.status-badge.nominal::before { background: var(--nominal); }
.status-badge.watch    { color: var(--watch);   background: rgba(234,170,67,.1); }
.status-badge.watch::before    { background: var(--watch); }
.status-badge.elevated { color: var(--elevated); background: rgba(224,85,85,.1); }
.status-badge.elevated::before { background: var(--elevated); }

/* ── Dots (open items) ─────────────────────────────────────── */
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.dot.high { background: var(--elevated); }
.dot.medium { background: var(--watch); }
.dot.low { background: var(--text-3); }

/* ── Signal bar ────────────────────────────────────────────── */
.signal-bar-wrap { display: flex; flex-direction: column; gap: 4px; }
.signal-bar-row { display: flex; align-items: center; gap: 10px; }
.signal-bar-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); width: 120px; flex-shrink: 0; }
.signal-bar-track { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.signal-bar-fill  { height: 100%; border-radius: 2px; transition: width .6s ease; }
.signal-bar-fill.low      { background: var(--nominal); }
.signal-bar-fill.moderate { background: var(--watch); }
.signal-bar-fill.elevated { background: var(--elevated); }
.signal-bar-score { font-family: var(--mono); font-size: 11px; color: var(--text-2); width: 24px; text-align: right; }
.signal-note { font-size: 12px; color: var(--text-2); line-height: 1.5; padding: 8px 0 4px; }

/* ── 3-signal grid ─────────────────────────────────────────── */
.signal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.signal-cell {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 12px 8px; text-align: center;
}
.signal-cell.elevated { border-color: rgba(224,85,85,.3); }
.signal-cell.moderate { border-color: rgba(234,170,67,.25); }
.signal-cell.low      { border-color: var(--border-2); }
.signal-cell-score { font-family: var(--display); font-size: 28px; line-height: 1; }
.signal-cell-score.elevated { color: var(--elevated); }
.signal-cell-score.moderate { color: var(--watch); }
.signal-cell-score.low      { color: var(--nominal); }
.signal-cell-name { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-top: 4px; }

/* ── 4-stat grid ───────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-cell {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 14px 12px;
}
.stat-value { font-family: var(--display); font-size: 32px; line-height: 1; color: var(--text); }
.stat-label { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-top: 4px; }
.stat-delta { font-family: var(--mono); font-size: 10px; margin-top: 6px; }
.stat-delta.up   { color: var(--nominal); }
.stat-delta.down { color: var(--elevated); }
.stat-delta.flat { color: var(--text-3); }

/* ── Tabs ──────────────────────────────────────────────────── */
.tab-bar {
  display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0; scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab {
  padding: 12px 16px; flex-shrink: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Toggle ────────────────────────────────────────────────── */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-2); }
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: 14px; }
.toggle-sublabel { font-family: var(--mono); font-size: 10px; color: var(--text-2); margin-top: 2px; }
.toggle {
  position: relative; width: 40px; height: 22px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background .2s, border-color .2s; flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-3); transition: transform .2s, background .2s;
}
.toggle input:checked ~ .toggle-knob { transform: translateX(18px); background: var(--teal); }
.toggle:has(input:checked) { background: var(--teal-glow); border-color: var(--teal-dim); }

/* ── Load profile ──────────────────────────────────────────── */
.load-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.load-name { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); flex: 1; }
.load-pills { display: flex; gap: 4px; }
.load-pill {
  padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border);
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); transition: all .12s;
}
.load-pill.active-light  { background: var(--teal-faint); border-color: var(--teal-dim); color: var(--teal); }
.load-pill.active-moderate { background: rgba(234,170,67,.12); border-color: rgba(234,170,67,.4); color: var(--watch); }
.load-pill.active-heavy  { background: rgba(224,85,85,.12); border-color: rgba(224,85,85,.4); color: var(--elevated); }

/* ── Warning card ──────────────────────────────────────────── */
.warning-card {
  border: 1px solid rgba(234,170,67,.35);
  background: rgba(234,170,67,.07);
  border-radius: var(--r); padding: 14px;
}
.warning-card.elevated-card {
  border-color: rgba(224,85,85,.35);
  background: rgba(224,85,85,.07);
}
.warning-icon { font-size: 14px; margin-bottom: 6px; font-family: var(--mono); color: var(--watch); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.warning-card.elevated-card .warning-icon { color: var(--elevated); }

/* ── ─────────────────────────────────────────────────────────
   AUTH SCREEN
   ──────────────────────────────────────────────────────────── */
#screen-auth {
  justify-content: center;
  padding: 40px 28px;
  gap: 0;
}
.auth-logo-wrap { margin-bottom: 40px; }
.auth-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.auth-footer { text-align: center; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hipaa-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.hipaa-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; margin-top: 1px; cursor: pointer; display: grid; place-items: center; transition: all .12s; }
.hipaa-checkbox.checked { background: var(--teal); border-color: var(--teal); }
.hipaa-checkbox.checked::after { content: '✓'; color: var(--bg); font-size: 11px; font-weight: 700; }
.hipaa-text { font-size: 12px; color: var(--text-2); line-height: 1.5; }

/* ── ─────────────────────────────────────────────────────────
   ONBOARDING
   ──────────────────────────────────────────────────────────── */
#screen-onboarding { padding: 0; }
/* min-height:0 is required on flex children that contain scrollable content;
   without it flex items won't shrink below content size, pushing footers off-screen */
.ob-step { display: none; flex-direction: column; flex: 1; min-height: 0; }
.ob-step.active { display: flex; }
.ob-content { flex: 1; min-height: 0; padding: 36px 24px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ob-footer { padding: 20px 24px; border-top: 1px solid var(--border-2); flex-shrink: 0; }
.ob-progress { display: flex; gap: 6px; margin-bottom: 32px; }
.ob-dot { height: 3px; flex: 1; border-radius: 2px; background: var(--surface-2); transition: background .3s; }
.ob-dot.done { background: var(--teal); }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.timeline-item { display: flex; gap: 16px; padding-bottom: 24px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-left { display: flex; flex-direction: column; align-items: center; }
.timeline-node { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; flex-shrink: 0; font-family: var(--mono); font-size: 10px; color: var(--text-2); }
.timeline-node.active { border-color: var(--teal); color: var(--teal); background: var(--teal-faint); }
.timeline-line { flex: 1; width: 1px; background: var(--border-2); margin-top: 4px; }
.timeline-item:last-child .timeline-line { display: none; }
.timeline-body { padding-top: 4px; }
.timeline-sessions { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--teal); text-transform: uppercase; margin-bottom: 4px; }
.timeline-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ── ─────────────────────────────────────────────────────────
   SHIFT BRIEF
   ──────────────────────────────────────────────────────────── */
#screen-shift-brief .header { background: var(--bg); }
.brief-content { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* ── ─────────────────────────────────────────────────────────
   RECORD SCREEN
   ──────────────────────────────────────────────────────────── */
#screen-record { background: var(--bg); }
.record-content { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.entry-card {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: 20px; text-align: center;
}
.entry-prompt { font-family: var(--display); font-size: 22px; color: var(--text); line-height: 1.3; }
.entry-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; margin-top: 8px; }

/* Mic button */
.mic-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0; }
.mic-btn {
  position: relative; width: 88px; height: 88px; border-radius: 50%;
  background: var(--teal-glow); border: 2px solid var(--teal-dim);
  display: grid; place-items: center; transition: all .2s;
  flex-shrink: 0;
}
.mic-btn:active { transform: scale(.96); }
.mic-btn.recording { background: rgba(224,85,85,.15); border-color: var(--elevated); }
.mic-btn svg { width: 32px; height: 32px; }
.mic-ring {
  position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--teal-dim); opacity: 0;
}
.mic-btn.recording .mic-ring {
  animation: pulse-ring 1.8s ease-out infinite;
}
.mic-ring-2 {
  position: absolute; inset: -24px; border-radius: 50%;
  border: 1px solid var(--teal-dim); opacity: 0;
}
.mic-btn.recording .mic-ring-2 { animation: pulse-ring 1.8s ease-out .6s infinite; }
@keyframes pulse-ring {
  0%   { opacity: .6; transform: scale(.9); }
  100% { opacity: 0;  transform: scale(1.1); }
}

/* Timer */
.rec-timer { font-family: var(--display); font-size: 48px; color: var(--text); letter-spacing: -.02em; line-height: 1; }
.rec-timer.running { color: var(--teal); }

/* Waveform */
.waveform { display: flex; align-items: center; gap: 3px; height: 40px; }
.wave-bar {
  width: 3px; border-radius: 2px; background: var(--teal-dim); opacity: .35;
  transition: height .1s;
}
.waveform.active .wave-bar { opacity: .8; }
@keyframes wb1  { 0%,100%{height:4px}  50%{height:20px} }
@keyframes wb2  { 0%,100%{height:8px}  50%{height:32px} }
@keyframes wb3  { 0%,100%{height:12px} 50%{height:38px} }
@keyframes wb4  { 0%,100%{height:16px} 50%{height:28px} }
@keyframes wb5  { 0%,100%{height:6px}  50%{height:24px} }
.waveform.active .wave-bar:nth-child(1)  { animation: wb1 .9s ease-in-out infinite; }
.waveform.active .wave-bar:nth-child(2)  { animation: wb3 .7s ease-in-out .1s infinite; }
.waveform.active .wave-bar:nth-child(3)  { animation: wb2 .8s ease-in-out .2s infinite; }
.waveform.active .wave-bar:nth-child(4)  { animation: wb4 1.0s ease-in-out .05s infinite; }
.waveform.active .wave-bar:nth-child(5)  { animation: wb3 .75s ease-in-out .3s infinite; }
.waveform.active .wave-bar:nth-child(6)  { animation: wb2 .85s ease-in-out .15s infinite; }
.waveform.active .wave-bar:nth-child(7)  { animation: wb5 .95s ease-in-out .25s infinite; }
.waveform.active .wave-bar:nth-child(8)  { animation: wb1 1.1s ease-in-out .35s infinite; }
.waveform.active .wave-bar:nth-child(9)  { animation: wb4 .8s ease-in-out .1s infinite; }
.waveform.active .wave-bar:nth-child(10) { animation: wb3 .7s ease-in-out .4s infinite; }
.waveform.active .wave-bar:nth-child(11) { animation: wb2 .9s ease-in-out .2s infinite; }
.waveform.active .wave-bar:nth-child(12) { animation: wb5 .75s ease-in-out .3s infinite; }
.waveform.active .wave-bar:nth-child(13) { animation: wb1 .85s ease-in-out .05s infinite; }
.waveform.active .wave-bar:nth-child(14) { animation: wb3 1.0s ease-in-out .45s infinite; }
.waveform.active .wave-bar:nth-child(15) { animation: wb4 .8s ease-in-out .15s infinite; }
.waveform.active .wave-bar:nth-child(16) { animation: wb2 .7s ease-in-out .35s infinite; }
.waveform.active .wave-bar:nth-child(17) { animation: wb5 .95s ease-in-out .1s infinite; }
.waveform.active .wave-bar:nth-child(18) { animation: wb1 .85s ease-in-out .25s infinite; }
.waveform.active .wave-bar:nth-child(19) { animation: wb3 .9s ease-in-out .4s infinite; }
.waveform.active .wave-bar:nth-child(20) { animation: wb2 .75s ease-in-out .2s infinite; }

.record-footer { padding: 16px 20px 32px; flex-shrink: 0; }

/* ── ─────────────────────────────────────────────────────────
   PROCESSING SCREEN
   ──────────────────────────────────────────────────────────── */
#screen-processing { justify-content: center; align-items: center; gap: 32px; padding: 40px; }
.spinner {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--surface-2);
  border-top-color: var(--teal);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.processing-labels { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.proc-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); transition: color .3s;
}
.proc-label.active { color: var(--teal); }
.proc-label.done   { color: var(--text-2); }

/* ── ─────────────────────────────────────────────────────────
   RESULTS SCREEN
   ──────────────────────────────────────────────────────────── */
#screen-results { background: var(--bg); }
.results-header { padding: 16px 20px 12px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; }
.results-meta { display: flex; flex-direction: column; gap: 6px; }
.results-meta-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--text-2); text-transform: uppercase; margin-top: 4px; }
.results-actions { display: flex; gap: 8px; align-items: center; }
.btn-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-2); display: grid; place-items: center; }
.btn-icon svg { width: 16px; height: 16px; color: var(--text-2); }

.tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* Tab panels */
.tab-panel-content { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 16px; }
.panel-section { display: flex; flex-direction: column; gap: 8px; }
.panel-text { font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* Open items */
.open-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border-2); }
.open-item:last-child { border-bottom: none; }
.open-item-cat { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 1px; }
.open-item-text { font-size: 13px; line-height: 1.5; color: var(--text); }

/* Targeted actions */
.action-item { padding: 12px; background: var(--surface); border-radius: var(--r-sm); border-left: 2px solid var(--teal-dim); }
.action-signal { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-dim); margin-bottom: 4px; }
.action-text { font-size: 13px; line-height: 1.5; color: var(--text); margin-bottom: 4px; }
.action-rationale { font-size: 12px; line-height: 1.5; color: var(--text-2); }

/* CME card */
.cme-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; display: flex; align-items: center; gap: 12px; }
.cme-credit { font-family: var(--display); font-size: 28px; color: var(--teal); }
.cme-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.cme-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* Burnout/depression cards */
.screen-card { border-radius: var(--r); padding: 14px; }
.screen-card.clear  { background: var(--teal-faint); border: 1px solid rgba(62,207,191,.2); }
.screen-card.watch  { background: rgba(234,170,67,.07); border: 1px solid rgba(234,170,67,.25); }
.screen-card.elevated { background: rgba(224,85,85,.07); border: 1px solid rgba(224,85,85,.25); }
.screen-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.screen-card-status { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.screen-card.clear .screen-card-status    { color: var(--nominal); }
.screen-card.watch .screen-card-status    { color: var(--watch); }
.screen-card.elevated .screen-card-status { color: var(--elevated); }
.screen-card-title { font-size: 14px; font-weight: 500; }
.screen-card-note  { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.marker-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.marker { font-size: 12px; color: var(--text-2); padding-left: 12px; position: relative; line-height: 1.4; }
.marker::before { content: '–'; position: absolute; left: 0; color: var(--text-3); }

/* Tone bars */
.tone-bar-wrap { display: flex; flex-direction: column; gap: 10px; }
.tone-bar-row  { display: flex; flex-direction: column; gap: 4px; }
.tone-bar-top  { display: flex; justify-content: space-between; }
.tone-bar-name { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.tone-bar-val  { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.tone-track { height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.tone-fill  { height: 100%; border-radius: 2px; background: var(--teal-dim); transition: width .6s ease; }

/* Peer comparison bars */
.peer-bar-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.peer-bar-label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.peer-track { height: 8px; background: var(--surface-2); border-radius: 4px; position: relative; overflow: visible; }
.peer-fill { height: 100%; border-radius: 4px; background: var(--teal-dim); transition: width .6s ease; }
.peer-marker { position: absolute; top: -3px; height: 14px; width: 2px; background: var(--text-3); }

/* ── ─────────────────────────────────────────────────────────
   PATTERNS — SVG chart
   ──────────────────────────────────────────────────────────── */
.chart-wrap { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); padding: 16px 16px 12px; overflow: hidden; }
.chart-svg { width: 100%; }
.pattern-list { display: flex; flex-direction: column; gap: 8px; }
.pattern-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-sm); }
.pattern-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }

/* ── ─────────────────────────────────────────────────────────
   SHIFT LOG
   ──────────────────────────────────────────────────────────── */
#screen-shift-log { }
.log-list { padding: 12px 20px 32px; display: flex; flex-direction: column; gap: 8px; }
.log-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: 14px; cursor: pointer; transition: border-color .15s;
}
.log-item:active { border-color: var(--border); }
.log-date { flex: 1; }
.log-date-main { font-family: var(--mono); font-size: 12px; color: var(--text); letter-spacing: .04em; }
.log-date-sub  { font-family: var(--mono); font-size: 10px; color: var(--text-2); margin-top: 2px; letter-spacing: .06em; text-transform: uppercase; }
.log-chevron { color: var(--text-3); }

/* ── Escalation note ───────────────────────────────────────── */
.escalation-note {
  background: rgba(224,85,85,.08); border: 1px solid rgba(224,85,85,.3);
  border-radius: var(--r); padding: 14px;
}
.escalation-title { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--elevated); margin-bottom: 6px; }
.escalation-text  { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ── Empty states ──────────────────────────────────────────── */
.empty { padding: 40px 20px; text-align: center; }
.empty-label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* ── Divider ───────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border-2); margin: 4px 0; }

/* ── Safe area ─────────────────────────────────────────────── */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 16px); }