/* ==========================================================================
   02 · VOICEQUOTE — soul
   Rugged, fast, utilitarian. Warm paper with a hair more contrast than the
   rest of the set — this gets read on a phone, outdoors, in sun.
   Motion budget: the source-link, and the total's spring. Once per quote.

   AMBER NOTE: the brief gives VoiceQuote a hi-vis amber accent, which sits very
   close to the spine's low-confidence amber. That is accepted here because
   amber genuinely is this trade's colour — but it means hue alone cannot carry
   the safety signal on this product. So on VoiceQuote every low-confidence state
   is *also* a word: NO RATE, MENTIONED, CHECK. Amber is never alone.
   ========================================================================== */
:root{
  --accent:#C9821A;
  --accent-rgb:201,130,26;
  --paper:#F5F2EC;          /* warm, slightly grittier */
  --paper-rgb:245,242,236;
  --card:#FFFDF8;
  --line:color-mix(in oklab, var(--ink) 16%, var(--paper));   /* a touch more contrast */
}

/* ---------- the memo + waveform ------------------------------------------ */
.sw-memo{display:grid;gap:.85rem;padding:1rem 1.1rem;}
.sw-memo__top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.sw-memo__file{font-family:var(--font-mono);font-size:var(--t-small);font-weight:500;}
.sw-memo__time{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);margin-left:auto;}

.sw-wave:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.sw-wave{
  position:relative;height:74px;cursor:pointer;user-select:none;
  border-radius:var(--radius-sm);background:var(--surface);
  padding:0 2px;overflow:hidden;
}
.sw-wave__row{
  position:absolute;inset:0;display:flex;align-items:center;gap:1px;padding:0 2px;
  pointer-events:none;
}
.sw-wave__row i{flex:1 1 0;display:block;border-radius:1px;background:var(--line);min-width:1px;}
.sw-wave__row--played i{background:var(--accent);}
.sw-wave__row--played{clip-path:inset(0 100% 0 0);}
.sw-wave__head{
  position:absolute;top:0;bottom:0;width:1px;background:var(--ink);left:0;
  pointer-events:none;opacity:.55;
}
.sw-transport{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.sw-transport .label{margin-left:auto;}

/* ---------- transcript ---------------------------------------------------- */
.sw-script{
  list-style:none;margin:0;padding:0;overflow:auto;
  max-height:var(--script-h,20rem);
}
.sw-script li{
  display:grid;grid-template-columns:3.6rem 1fr;gap:.7rem;
  padding:.5rem .8rem;border-bottom:1px solid var(--line-soft);
  font-size:var(--t-small);line-height:1.6;color:var(--faint);
  cursor:pointer;outline-offset:-2px;
  /* background only — never move a transcript line, the eye is reading it */
  transition:background-color 140ms var(--ease-out),color 140ms var(--ease-out);
}
.sw-script li:last-child{border-bottom:0;}
.sw-script li[data-said="1"]{color:var(--ink);}
.sw-script li.is-now{background:rgba(var(--accent-rgb),.10);}
.sw-script li.is-linked{background:rgba(var(--accent-rgb),.16);}
.sw-script time{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);padding-top:.15rem;}
.sw-script__yield{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:.35rem;
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);
}
@media (hover:hover) and (pointer:fine){ .sw-script li:hover{background:var(--surface);} }

/* ---------- quote table --------------------------------------------------- */
.sw-quote td{transition:background-color 140ms var(--ease-out);}
.sw-quote tr{cursor:pointer;}
.sw-quote tr.is-linked{background:rgba(var(--accent-rgb),.16);}
.sw-quote__code{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);display:block;}
/* Line items land — once, on arrival. After that the table is inert. */
.sw-row-in{animation:sw-drop 260ms var(--ease-out) both;}
@keyframes sw-drop{from{opacity:0;transform:translateY(-6px) scale(.99);}to{opacity:1;transform:none;}}

.sw-total{
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  padding:.9rem 1rem;border-top:1px solid var(--line);background:var(--surface);
}
.sw-total__k{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.sw-total__v{font-family:var(--font-mono);font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem);font-weight:500;font-variant-numeric:tabular-nums;margin-left:auto;}
.sw-total__sub{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);width:100%;display:flex;gap:1rem;justify-content:flex-end;}

/* ---------- rate card ----------------------------------------------------- */
.sw-rates td:first-child{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--accent);white-space:nowrap;}
.sw-empty{padding:2.5rem 1rem;text-align:center;color:var(--faint);font-size:var(--t-small);}

/* ---------- tool: the editable quote -------------------------------------- */
.sw-qty{
  width:4.2rem;text-align:right;font-family:var(--font-mono);font-size:var(--t-small);
  font-variant-numeric:tabular-nums;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:4px;padding:.18rem .35rem;
}
.sw-qty:focus{outline:2px solid var(--accent);outline-offset:1px;}
.sw-qty[data-edited="1"]{border-color:var(--accent);background:rgba(var(--accent-rgb),.06);}
.sw-del{
  appearance:none;background:none;border:0;cursor:pointer;padding:.1rem .3rem;
  color:var(--faint);font-family:var(--font-mono);font-size:var(--t-small);line-height:1;
}
@media (hover:hover) and (pointer:fine){ .sw-del:hover{color:var(--red);} }
.sw-del:active{transform:scale(.9);}
.sw-out{
  width:100%;min-height:15rem;resize:vertical;white-space:pre;overflow-x:auto;
  font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.7;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.8rem;
}

/* ---------- scrubbing ------------------------------------------------------
   touch-action:none is what lets a finger drag the playhead instead of
   scrolling the page. The transform transition is the rubber-band springing
   back on release; during the drag walk.js writes transform every frame, so
   the transition has to be off or it would lag the finger. */
.sw-wave{touch-action:none;cursor:grab;transition:transform 320ms var(--ease-out);}
.sw-wave.is-scrubbing{transition:none;cursor:grabbing;}
.sw-wave.is-scrubbing .sw-wave__head{opacity:1;width:2px;}
@media (prefers-reduced-motion:reduce){ .sw-wave{transition:none;} }

/* ---------- hero: the small caption beside the primary actions ------------ */
.sw-hero__tag{margin:.6rem 0 0;}

/* ---------- how it works --------------------------------------------------
   Five real steps, each its own card. The sixth thing below them is not a
   step — it does not exist yet — so it is never allowed to look like one. */
.howsteps{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.85rem;}
.howstep{
  display:grid;gap:.4rem;padding:1rem 1.1rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
.howstep__head{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin:0;}
.howstep__no{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}
.howstep__name{
  font-family:var(--font-mono);font-size:var(--t-small);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.howstep__tag{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}
.howstep__body{margin:0;}

/* A planned feature is not a step in the flow above — dashed, muted, and
   labelled as a note rather than numbered alongside Collect…Export. */
.howstep--planned{
  margin-top:.15rem;padding:.85rem 1.1rem;
  display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;
  background:transparent;border:1px dashed var(--line);border-radius:var(--radius);
}
.howstep--planned .howstep__name{color:var(--faint);}
.howstep--planned p{margin:0;font-size:var(--t-small);color:var(--faint);}

/* ---------- tool: the job header ------------------------------------------ */
.wb__job{
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);
  padding:.15rem 0;
}
.wb__job b{color:var(--ink);font-weight:500;}