/* dear diary, shared component styles (DESIGN_SPEC.md section 3).
   Sections are banded so each build agent appends its own components below;
   keep every hover transform and animation gated by prefers-reduced-motion
   with the spec's static fallback. Chrome (bar/tabs/ledger) lives in base.css.

   Sections in this file so far (journal-views agent):
   buttons | entry card | day headers | streak blocks | heatmap | empty states
   toasts | dialogs | tag chip input | playback bar | search bits | entry view */

/* the hidden attribute always wins, even over display:flex/grid components */
[hidden]{ display:none !important; }

/* ---------------- buttons (t1 vocabulary) ---------------- */

.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  border-radius:var(--r-md); padding:14px 20px; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  border:1px solid transparent; background:none; color:var(--chalk);
  min-height:44px;
  transition:transform var(--dur-fast), background var(--dur), border-color var(--dur);
}
.btn-primary{ background:var(--accent); color:#151208; font-weight:600; }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line); color:var(--chalk); }
.btn-ghost:hover{ border-color:var(--chalk-faint); background:var(--slate-3); }
.btn-danger{ border-color:var(--danger); color:var(--danger); }
.btn-danger:hover{ background:var(--danger-glow); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn:disabled:hover{ transform:none; background:none; }
.btn-danger:disabled:hover{ background:none; }
:root[data-theme="light"] .btn-primary{ color:#f2f0e4; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .btn-primary{ color:#f2f0e4; }
}
@media (prefers-reduced-motion: reduce){
  .btn-primary:hover{ transform:none; }
}

/* ---------------- entry card (3.3) ---------------- */

.entry-card{
  display:block;
  background:var(--slate-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4) 20px;
  text-decoration:none; color:var(--chalk);
  transition:border-color var(--dur), transform var(--dur);
  position:relative;
}
.entry-card:hover{ border-color:var(--accent-dim); transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .entry-card:hover{ transform:none; }
}
.entry-card + .entry-card{ margin-top:var(--sp-3); }
.entry-card .when{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.entry-card .when .dur{ color:var(--chalk-faint); }
.entry-card .card-title{
  display:block; font-family:var(--serif); font-weight:var(--fw-head);
  font-size:var(--fs-entry); color:var(--chalk); margin-top:var(--sp-2);
}
.entry-card .text{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
  font-family:var(--serif); font-size:var(--fs-entry); color:var(--chalk);
  margin-top:var(--sp-2); line-height:1.5;
}
.entry-card .tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.entry-card .tag-pill{
  font-family:var(--mono); font-size:10.5px; color:var(--chalk-dim);
  border:1px solid var(--line); padding:2px 8px; border-radius:var(--r-pill);
}
/* playing from the timeline: thin accent left edge (3.3) */
.entry-card[data-playing="true"]::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:2px; background:var(--accent);
}
/* search matches: accent underline, not highlight-block (2.6) */
mark{
  background:transparent; color:inherit;
  text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:2px; text-underline-offset:3px;
}

/* ---------------- journal day headers (2.4) ---------------- */

.day-group + .day-group{ margin-top:var(--sp-5); }
.day-head{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint); font-weight:var(--fw-mono-strong);
  margin:0 0 var(--sp-3);
}
.day-head:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* ---------------- streak blocks (2.4, from t1) ---------------- */

.streak-row{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.streak-block{
  display:flex; align-items:center; gap:16px;
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:16px; padding:16px 22px;
}
.streak-block .big{
  font-family:var(--mono); font-size:44px; font-weight:var(--fw-mono-strong);
  color:var(--accent); line-height:1;
}
.streak-block .big.chalk{ color:var(--chalk); }
.streak-block .lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--chalk-dim); line-height:1.5;
}
.streak-block .lbl b{ display:block; color:var(--chalk); font-size:13px; }

/* ---------------- heatmap (3.4, from t1) ---------------- */

.heat-card{
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:26px;
}
.heat-card .ht{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint); margin-bottom:var(--sp-4);
  display:flex; justify-content:space-between;
}
.heatmap{
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,auto);
  gap:5px; overflow-x:auto; padding-bottom:6px;
}
.cell{
  width:15px; height:15px; border-radius:var(--r-xs);
  background:var(--cell-0); border:1px solid rgba(255,255,255,.02);
  padding:0; flex:none; position:relative;
}
button.cell{ cursor:pointer; }
/* sized-up hit area on touch without changing the 15px visual (spec 7) */
button.cell::after{ content:""; position:absolute; inset:-5px; }
.cell.l1{ background:var(--cell-1); }
.cell.l2{ background:var(--cell-2); }
.cell.l3{ background:var(--cell-3); }
.cell.l4{ background:var(--cell-4); }
.cell.streak{ background:var(--accent); box-shadow:0 0 6px var(--accent-glow); }
.cell.future{ background:transparent; border-color:transparent; }
button.cell:hover{ outline:1px solid var(--accent-dim); outline-offset:1px; }
/* fill-in cascade (spec 5): ~15ms per cell stagger, .3s fade each */
.heat-anim .cell{ opacity:0; animation:cellIn .3s ease forwards; animation-delay:var(--d, 0ms); }
@keyframes cellIn{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .heat-anim .cell{ animation:none; opacity:1; }
}
.legend{
  display:flex; align-items:center; gap:7px; margin-top:16px;
  font-family:var(--mono); font-size:11px; color:var(--chalk-faint);
}
.legend .cell{ width:12px; height:12px; }

/* ---------------- empty states (3.8) ---------------- */

.empty-state{
  text-align:center; padding:var(--sp-8) var(--sp-4);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
}
.empty-glyph{ width:44px; height:44px; color:var(--chalk-faint); }
.empty-line{
  font-family:var(--serif); font-size:var(--fs-live);
  color:var(--chalk); margin:0; line-height:var(--lh-entry);
}

/* ---------------- toasts (3.6) ---------------- */

.toast-region{
  position:fixed; z-index:40;
  left:50%; transform:translateX(-50%);
  bottom:calc(72px + env(safe-area-inset-bottom, 0px) + var(--sp-3));
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
  width:max-content; max-width:calc(100vw - 2 * var(--wrap-pad-mobile));
}
@media (min-width:901px){
  .toast-region{
    left:auto; right:var(--wrap-pad); transform:none;
    bottom:var(--wrap-pad); align-items:flex-end;
  }
}
.toast{
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk);
  background:var(--slate-3); border:1px solid var(--line);
  border-radius:var(--r-md); padding:10px var(--sp-4);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.in{ opacity:1; transform:translateY(0); }
.toast.out{ opacity:0; }
.toast[data-variant="accent"]{ color:var(--accent); border-color:var(--accent-dim); }
.toast[data-variant="danger"]{ color:var(--danger); border-color:var(--danger); }
@media (prefers-reduced-motion: reduce){
  .toast{ transform:none; transition:opacity var(--dur); }
  .toast.in{ transform:none; }
}

/* ---------------- dialogs (3.7 / 3.9) ---------------- */

.dialog-scrim{
  position:fixed; inset:0; z-index:50;
  background:var(--scrim);
  display:flex; align-items:center; justify-content:center;
  padding:var(--wrap-pad-mobile);
  opacity:0; transition:opacity .2s;
}
.dialog-scrim.in{ opacity:1; }
.dialog{
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:var(--r-2xl); box-shadow:var(--sh-dialog);
  padding:var(--sp-6); width:min(440px, 100%);
  transform:translateY(10px); transition:transform var(--dur) var(--ease);
}
.dialog-scrim.in .dialog{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .dialog{ transform:none; transition:none; }
}
.dialog-title{
  font-family:var(--sans); font-size:var(--fs-h3); font-weight:var(--fw-head);
  line-height:var(--lh-head); letter-spacing:var(--ls-head);
  margin:0 0 var(--sp-3); color:var(--chalk);
}
.dialog-body{
  font-family:var(--sans); font-size:var(--fs-body); color:var(--chalk-dim);
  margin:0 0 var(--sp-5); line-height:var(--lh-body);
}
.dialog-input{
  font-family:var(--mono); font-size:var(--fs-body); color:var(--chalk);
  background:var(--slate-4); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px var(--sp-3);
  width:100%; margin-bottom:var(--sp-5);
}
.dialog-input::placeholder{ color:var(--chalk-faint); }
.dialog-actions{ display:flex; justify-content:flex-end; gap:var(--sp-3); flex-wrap:wrap; }

/* ---------------- tag chip input (3.12) ---------------- */

.tag-input{ display:flex; flex-direction:column; gap:var(--sp-2); }
.tag-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.tag-chips:empty{ display:none; }
.tag-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk-dim);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:4px 6px 4px 12px; background:var(--slate-3);
}
.tag-chip.pulse{ animation:chipPulse .5s var(--ease); }
@keyframes chipPulse{
  0%,100%{ border-color:var(--line); }
  40%{ border-color:var(--accent); color:var(--accent); }
}
@media (prefers-reduced-motion: reduce){
  .tag-chip.pulse{ animation:none; }
}
.tag-remove{
  font-family:var(--mono); font-size:14px; line-height:1;
  color:var(--chalk-faint); background:none; border:0; cursor:pointer;
  border-radius:50%; width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
}
.tag-remove:hover{ color:var(--danger); background:var(--slate-4); }
.tag-field{
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk);
  background:var(--slate-3); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px var(--sp-3);
  min-height:44px; width:100%; max-width:280px;
}
.tag-field::placeholder{ color:var(--chalk-faint); }
.tag-field:disabled{ opacity:.6; }
.tag-limit-note{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint);
}

/* ---------------- playback bar (3.13) ---------------- */

.playback{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-4);
}
.play-btn{
  width:44px; height:44px; flex:none; border-radius:50%;
  border:1px solid var(--line); background:var(--slate-3);
  color:var(--chalk); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.play-btn svg{ width:20px; height:20px; }
.play-btn:hover{ border-color:var(--accent-dim); color:var(--accent); }
.playback[data-state="playing"] .play-btn{ color:var(--accent); border-color:var(--accent-dim); }
.scrub{
  flex:1; appearance:none; -webkit-appearance:none; height:22px;
  background:transparent; cursor:pointer; min-width:0;
}
.scrub::-webkit-slider-runnable-track{
  height:3px; border-radius:2px; background:var(--slate-4);
}
.scrub::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); margin-top:-5.5px; border:0;
}
.scrub::-moz-range-track{ height:3px; border-radius:2px; background:var(--slate-4); }
.scrub::-moz-range-progress{ height:3px; border-radius:2px; background:var(--accent); }
.scrub::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--accent); border:0; }
.play-time{
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk-faint);
  flex:none; white-space:nowrap;
}
.playback-error{
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--danger);
  border:1px solid var(--danger); border-radius:var(--r-md);
  background:var(--danger-glow); padding:var(--sp-3) var(--sp-4); margin:0;
}

/* ---------------- search bits (2.6) ---------------- */

.search-input{
  font-family:var(--mono); font-size:var(--fs-body); color:var(--chalk);
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px var(--sp-4);
  width:100%; min-height:48px;
}
.search-input::placeholder{ color:var(--chalk-faint); }
.search-reassure{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint); margin:var(--sp-2) 0 0;
}
.result-count{
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk-dim);
  margin:var(--sp-4) 0 0;
}
.quick-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:var(--sp-4); }
.quick-tags:empty{ display:none; }
.quick-tag{
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk-dim);
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--slate-3); padding:8px 14px; min-height:38px; cursor:pointer;
}
.quick-tag:hover{ border-color:var(--accent-dim); color:var(--accent); }
.search-results{ margin-top:var(--sp-4); }

/* ---------------- entry view bits (2.5 / 4.7) ---------------- */

.entry-back{
  display:inline-block;
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk-dim);
  text-decoration:none; padding:var(--sp-2) 0; margin-bottom:var(--sp-2);
}
.entry-back:hover{ color:var(--accent); }
.entry-meta{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk-dim);
  margin-bottom:var(--sp-4);
}
.entry-meta .dur{ color:var(--chalk-faint); }
.entry-title{
  font-family:var(--serif); font-size:var(--fs-h3); font-weight:var(--fw-head);
  color:var(--chalk); background:transparent; border:0;
  border-bottom:1px dashed transparent; border-radius:0;
  padding:var(--sp-2) 0; width:100%; margin-top:var(--sp-4);
}
.entry-title::placeholder{ color:var(--chalk-faint); font-weight:var(--fw-body); }
.entry-title:hover, .entry-title:focus{ border-bottom-color:var(--line); }
.edit-hint{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint); margin:var(--sp-3) 0 var(--sp-1);
}
.entry-transcript{
  font-family:var(--serif); font-size:var(--fs-entry); color:var(--chalk);
  line-height:var(--lh-entry);
  background:transparent; border:0; border-top:1px dashed var(--line);
  border-radius:0; padding:var(--sp-3) 0; width:100%;
  resize:none; overflow:hidden; display:block;
}
.entry-transcript:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.entry-tags{ margin-top:var(--sp-4); }
.entry-actions{
  display:flex; gap:var(--sp-3); flex-wrap:wrap;
  margin-top:var(--sp-6); padding-top:var(--sp-4);
  border-top:1px dashed var(--line);
}

/* ---------------- nag banners (3.10, settings-onboarding agent) ---------------- */

#nag-region:empty{ display:none; }
.nag{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  background:var(--slate-3); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5);
}
.nag-danger{ border-left-color:var(--danger); background:var(--danger-glow); }
.nag-text{
  flex:1 1 240px; margin:0;
  font-family:var(--mono); font-size:var(--fs-meta);
  color:var(--chalk-dim); line-height:1.6;
}
.nag-danger .nag-text{ color:var(--chalk); }
.nag-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.btn-sm{ padding:6px 14px; font-size:12px; }

/* ---------------- smaller shared bits (settings + onboarding) ---------------- */

/* segmented control (theme toggle, 2.7) */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.seg-opt{ position:relative; display:inline-flex; }
.seg-opt input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.seg-opt span{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--sp-4);
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk-dim);
  border-left:1px solid var(--line);
}
.seg-opt:first-child span{ border-left:0; }
.seg-opt input:checked + span{ background:var(--slate-4); color:var(--accent); font-weight:var(--fw-mono-strong); }
.seg-opt input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:-3px; border-radius:3px; }

/* iOS manual install steps (3.11, onboarding step 4 + settings install card) */
.ios-steps{
  margin:var(--sp-4) 0 0; padding-left:1.4em;
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk-dim);
}
.ios-steps li{ margin-bottom:var(--sp-2); line-height:1.7; }
.ios-steps svg{ width:15px; height:15px; vertical-align:-2px; color:var(--accent); }

/* ---------------- onboarding overlay (2.2) ---------------- */

.onboard-scrim{
  position:fixed; inset:0; z-index:60;
  background:var(--slate);
  display:flex; align-items:center; justify-content:center;
  padding:var(--wrap-pad-mobile); overflow-y:auto;
}
.onboard{
  width:min(520px, 100%);
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:var(--r-2xl); box-shadow:var(--sh-dialog);
  padding:var(--sp-6);
  margin:auto 0;
}
.onboard-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--sp-6);
}
.onboard-dots{ display:flex; gap:8px; }
.onboard-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--slate-4); border:1px solid var(--line);
}
.onboard-dot.on{ background:var(--accent); border-color:var(--accent-dim); }
.onboard-skip{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint); background:none; border:0; cursor:pointer;
  min-height:44px; padding:0 var(--sp-2);
}
.onboard-skip:hover{ color:var(--accent); }
.onboard-brand{
  font-family:var(--serif); font-size:var(--fs-body-lg); color:var(--chalk);
  margin:0 0 var(--sp-4);
}
.onboard-brand .brand-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:var(--sp-2); vertical-align:2px;
}
.onboard-title{
  font-family:var(--sans); font-size:var(--fs-h3); font-weight:var(--fw-head);
  line-height:1.25; letter-spacing:var(--ls-head);
  color:var(--chalk); margin:0 0 var(--sp-4);
}
.onboard-title:focus{ outline:none; }
.onboard-body{
  font-family:var(--sans); font-size:var(--fs-body); color:var(--chalk-dim);
  line-height:var(--lh-body); margin:0 0 var(--sp-4);
}
.onboard-conn{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint); margin:0 0 var(--sp-2);
}
.onboard-conn[data-state="offline"]{ color:var(--accent); }
.onboard-why{ margin:0 0 var(--sp-2); }
.onboard-why summary{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint); cursor:pointer;
  padding:var(--sp-2) 0; min-height:32px;
}
.onboard-why summary:hover{ color:var(--accent); }
.onboard-why p{
  font-family:var(--sans); font-size:var(--fs-body); color:var(--chalk-dim);
  line-height:var(--lh-body); margin:var(--sp-2) 0 0;
}
.onboard-denied{
  border:1px solid var(--danger); background:var(--danger-glow);
  border-radius:var(--r-md); padding:var(--sp-4); margin:0 0 var(--sp-4);
}
.onboard-denied p{
  font-family:var(--sans); font-size:14px; color:var(--chalk);
  line-height:var(--lh-body); margin:0 0 var(--sp-2);
}
.onboard-denied p:last-child{ margin-bottom:0; }
.onboard-actions{
  display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6);
}

/* ================ record screen (record-asr agent) ================
   recorder stage | record button 3.1 (all states) | waveform | timer
   transcript panel 3.2 | save panel 3.14 | reflection card 2.8
   danger notes | denied-mic help */

/* ---------------- recorder stage (2.3) ---------------- */

.recorder-stage{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
  padding:var(--sp-6) 0 var(--sp-4);
}

.rec-btn{
  position:relative; width:132px; height:132px; border-radius:50%;
  background:transparent; border:none; cursor:pointer; padding:0;
  display:grid; place-items:center;
}
.rec-btn:disabled{ cursor:default; }
.rec-btn:focus-visible{ outline:none; }
.rec-btn:focus-visible .rec-core{ outline:2px solid var(--accent); outline-offset:6px; }

.rec-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--chalk-faint); opacity:.55;
}
.rec-btn .r2{ animation:ringPulse 3s ease-out infinite; }
.rec-btn .r3{ animation:ringPulse 3s ease-out infinite 1.5s; }
@keyframes ringPulse{
  0%{ transform:scale(1); opacity:.5; border-color:var(--accent); }
  100%{ transform:scale(1.65); opacity:0; border-color:var(--accent); }
}
/* paused: rings freeze (3.1) */
.rec-btn[data-state="paused"] .r2,
.rec-btn[data-state="paused"] .r3{ animation:none; opacity:.35; }
/* transcribing + denied: quiet rings */
.rec-btn[data-state="transcribing"] .r2,
.rec-btn[data-state="transcribing"] .r3,
.rec-btn[data-state="denied-mic"] .r2,
.rec-btn[data-state="denied-mic"] .r3{ animation:none; opacity:.25; }
@media (prefers-reduced-motion: reduce){
  .rec-btn .r2, .rec-btn .r3{ animation:none; opacity:.25; }
}

/* indeterminate chalk-dust shimmer while transcribing (3.1) */
.rec-shimmer{
  position:absolute; inset:-7px; border-radius:50%;
  border:1.5px dashed var(--accent-dim); opacity:0;
  pointer-events:none;
}
.rec-btn[data-state="transcribing"] .rec-shimmer{
  opacity:.9; animation:shimmerSpin 1.6s linear infinite;
}
@keyframes shimmerSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .rec-btn[data-state="transcribing"] .rec-shimmer{ animation:none; opacity:.6; }
}

.rec-core{
  width:88px; height:88px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--slate-4), var(--slate-2));
  border:1px solid var(--line);
  display:grid; place-items:center;
  box-shadow:var(--sh-core);
  transition:box-shadow .3s;
}
.rec-btn[data-state="recording"] .rec-core{ box-shadow:var(--sh-core-rec); }
/* paused: core keeps a dim glow (3.1) */
.rec-btn[data-state="paused"] .rec-core{
  box-shadow:inset 0 2px 10px rgba(0,0,0,.6), 0 0 18px var(--accent-glow), 0 0 0 6px rgba(230,205,134,.08);
}
/* error: danger border + short shake (3.1) */
.rec-btn[data-state="error"] .rec-core{ border-color:var(--danger); animation:recShake .4s ease; }
@keyframes recShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  50%{ transform:translateX(4px); }
  75%{ transform:translateX(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .rec-btn[data-state="error"] .rec-core{ animation:none; }
}
.rec-btn[data-state="denied-mic"] .rec-core{ border-color:var(--danger); }

.mic{ width:34px; height:48px; }
.mic rect, .mic path{ stroke:var(--chalk); }
.mic .mic-slash{ display:none; }
/* denied-mic: struck-through mic in danger (3.1) */
.rec-btn[data-state="denied-mic"] .mic rect,
.rec-btn[data-state="denied-mic"] .mic path{ stroke:var(--danger); }
.rec-btn[data-state="denied-mic"] .mic .mic-slash{ display:block; }

.rec-caption{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--chalk-dim); margin:0;
  text-align:center;
}
.recorder-stage[data-state="recording"] .rec-caption{ color:var(--accent); }
.recorder-stage[data-state="error"] .rec-caption,
.recorder-stage[data-state="denied-mic"] .rec-caption{ color:var(--danger); }

.rec-meter{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}
.rec-timer{
  font-family:var(--mono); font-size:clamp(28px,6vw,40px);
  font-weight:var(--fw-mono-strong); letter-spacing:.06em; color:var(--chalk);
  font-variant-numeric:tabular-nums;
}

/* waveform: 11 bars, heights set from the live AnalyserNode level (2.3);
   reduced motion holds them at a fixed mid height from JS, no CSS motion */
.wave{ display:flex; align-items:center; gap:4px; height:30px; }
.wave span{
  width:3px; height:8px; border-radius:2px; background:var(--chalk-faint);
  transition:background .3s;
}
.recorder-stage[data-state="recording"] .wave span{ background:var(--chalk-dim); }

.rec-controls{ display:flex; gap:var(--sp-3); }

.denied-help{
  max-width:44ch; text-align:center;
}
.denied-help p{
  font-family:var(--sans); font-size:var(--fs-meta); color:var(--chalk-dim);
  margin:0 0 var(--sp-2); line-height:var(--lh-body);
}
.denied-help p:first-child{ color:var(--danger); }

/* ---------------- transcript panel (3.2, t1 vocabulary) ---------------- */

.transcript{
  border-top:1px dashed var(--line);
  padding-top:var(--sp-4);
  min-height:104px;
  margin-top:var(--sp-4);
}
.transcript .meta{
  font-family:var(--mono); font-size:11px; letter-spacing:var(--ls-caption);
  text-transform:uppercase; color:var(--chalk-faint);
  margin-bottom:10px; display:flex; gap:8px; align-items:center;
}
.transcript .meta i{ font-style:normal; }
.live-text{
  font-family:var(--serif);
  font-size:var(--fs-live);
  line-height:var(--lh-entry);
  color:var(--chalk);
  min-height:1.4em;
  overflow-wrap:anywhere;
}
.live-text .ltr{
  display:inline-block;
  white-space:pre;
  animation:land .34s var(--ease-land) forwards;
  text-shadow:0 0 .6px rgba(236,239,230,.5), 0 1px 2px rgba(236,239,230,.06);
}
@keyframes land{
  0%{ opacity:0; filter:blur(4px); transform:translateY(3px) scale(1.05); }
  55%{ opacity:1; }
  100%{ opacity:1; filter:blur(.25px); transform:none; }
}
.live-text.wipe .ltr{ animation:dust .62s ease forwards; }
@keyframes dust{
  0%{ opacity:1; filter:blur(.25px); transform:none; }
  100%{ opacity:0; filter:blur(7px); transform:translateY(-5px) scale(1.04); }
}
.caret{
  display:inline-block; width:9px; height:1.05em; vertical-align:-.18em;
  background:var(--accent); margin-left:3px; opacity:.85;
  animation:caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{ 0%,50%{ opacity:.85; } 51%,100%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){
  .live-text .ltr{ animation:none; }
  .live-text.wipe .ltr{ animation:none; }
  .caret{ animation:none; }
}

/* ---------------- danger note + failed-transcription strip ---------------- */

.danger-note{
  font-family:var(--sans); font-size:var(--fs-meta); color:var(--danger);
  border:1px solid var(--danger); border-radius:var(--r-md);
  background:var(--danger-glow); padding:var(--sp-3) var(--sp-4);
  margin:0; line-height:var(--lh-body);
}
.asr-fail{ margin-top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
.asr-fail-actions{ display:flex; justify-content:flex-end; gap:var(--sp-3); flex-wrap:wrap; }

/* ---------------- save panel (3.14) ---------------- */

.save-panel{
  margin-top:var(--sp-4);
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.save-fields{ border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.save-title{
  font-family:var(--serif); font-size:var(--fs-entry); color:var(--chalk);
  background:transparent; border:0; border-bottom:1px dashed var(--line);
  border-radius:0; padding:var(--sp-2) 0; width:100%; min-height:44px;
}
.save-title::placeholder{ color:var(--chalk-faint); }
.save-panel[data-state="saving"] .save-fields{ opacity:.6; }
.save-actions{ display:flex; justify-content:flex-end; gap:var(--sp-3); flex-wrap:wrap; }

/* ---------------- reflection lite card (2.8) ---------------- */

.reflection-card{
  position:fixed; z-index:30;
  left:50%; transform:translate(-50%, 12px);
  bottom:calc(72px + env(safe-area-inset-bottom, 0px) + var(--sp-3));
  width:min(560px, calc(100vw - 2 * var(--wrap-pad-mobile)));
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-dialog);
  padding:var(--sp-5);
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reflection-card.in{ opacity:1; transform:translate(-50%, 0); }
.reflection-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (min-width:901px){
  .reflection-card{ bottom:var(--wrap-pad); }
}
@media (prefers-reduced-motion: reduce){
  /* appears static in place (spec 5) */
  .reflection-card{ transform:translate(-50%, 0); transition:none; }
}
.reflection-prompt{
  font-family:var(--serif); font-size:var(--fs-live); line-height:var(--lh-entry);
  color:var(--chalk); margin:0 0 var(--sp-3);
}
.reflection-foot{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint); margin:0 0 var(--sp-4);
}
.reflection-actions{ display:flex; justify-content:flex-end; gap:var(--sp-3); flex-wrap:wrap; }