/* ─── HAND-MAINTAINED as of the Phase 3 CSS refactor (see docs/css-refactor-plan.md).
   This file was originally machine-generated, but chrome/annotation/badge type and
   color values below (divider headings, screen-id/desc, badges, component-spec,
   annotations, and Halyard's dialog transcript) were hand-edited to hold their
   correct final values directly, replacing screens-type.css's !important overrides
   (deleted; its job is done). If this file is ever regenerated, those hand-edited
   declarations must be re-applied — grep this repo's docs/css-refactor-plan.md
   Phase 3 for the full rule-by-rule mapping. ───────────────────────────────────── */


.wf-embed{
  --slate:#1A2831; --steel:#243442;
  --copper:#B4643A; --hiviz:#E8A317;
  --signal:#2E7D5B; --alarm:#C0392B; --sky:#4A90A4;
  --ink:#111C26; --graphite:#5A6B78; --ash:#B2BEC8;
  --rule:#D4DCE2; --paper:#FAFBFC; --white:#FFFFFF;
  --cond:'Barlow Condensed',sans-serif;
  --sans:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  font-family:var(--sans);
}

/* ─── ENCAPSULATION — the whole mockup ruleset below is scoped to .wf-embed so
   its generic class names (.ss, .turn, .badge, .spec…) and resets can't leak
   onto the paper site. Brought to parity with folio/meridian/relay-mockup.css,
   whose @scope opens right after the unscoped token block. Do NOT move the
   token block above inside this scope: like the other three, it must stay
   unscoped so screens.css's later `.wf-embed{background}` reset wins by plain
   source order (see the header comment in screens.css). ─── */
@scope (.wf-embed){

/* SCREEN SECTION */
.ss:nth-child(even){background:var(--site-paper)}

/* LAYOUT: device + dialog side by side. The base grid below is always
   overridden to flex by screens.css's scoped .split rule (scope proximity
   beats source order), which has no media query and applies at every
   viewport — so a grid-collapse breakpoint here would never fire. Removed
   2026-09-07 as verified-dead CSS (confirmed live: .split computed display
   is "flex" at 375px, never "grid"). See docs/decisions.md. */
.split{display:grid;grid-template-columns:340px 1fr;gap:36px;align-items:start}

/* DEVICE — ruggedized handheld. Deliberately not registered with
   js/screens-scale.js's .wf-frame/.wf scale-down system — it's already
   a narrow (340px) fixed-size element, not a wide desktop frame, so it
   behaves like Folio's .phone-frame-wrap: the grid collapse at 1100px
   is its whole responsive strategy. */
.device-wrap{position:relative;max-width:340px;margin:0 auto}
.device{background:#1A1614;border-radius:28px;padding:11px;border:1px solid #2A2422;position:relative}
.device::before,.device::after{content:'';position:absolute;width:26px;height:26px;background:var(--hiviz);opacity:.85;border-radius:6px;z-index:0}
.device::before{top:-3px;left:-3px;clip-path:polygon(0 0,100% 0,0 100%)}
.device::after{bottom:-3px;right:-3px;clip-path:polygon(100% 100%,100% 0,0 100%)}
.screen{background:#0A0F14;border-radius:18px;overflow:hidden;min-height:520px;display:flex;flex-direction:column;position:relative;z-index:1;border:1px solid #000}

/* Status strip */
.statusbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 7px;background:#0A0F14;border-bottom:1px solid rgba(255,255,255,.06)}
.sb-left{display:flex;align-items:center;gap:7px}
.sb-time{font-family:var(--mono);font-size:11px;color:#C4D0D8;font-weight:500}
.sb-off{font-family:var(--mono);font-size:8px;padding:2px 5px;border-radius:2px;background:rgba(154,168,178,.14);color:#AEBAC4;letter-spacing:.06em;border:1px solid rgba(154,168,178,.3)}
.sb-right{display:flex;align-items:center;gap:6px}
.sb-batt{width:22px;height:10px;border:1.5px solid #7A8894;border-radius:2px;position:relative}
.sb-batt::after{content:'';position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:65%;background:var(--signal);border-radius:1px}
.sb-icon{font-size:10px;color:#7A8894}

/* Voice state banner — the primary UI element */
.voice-state{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:12px}
.vs-listening{background:linear-gradient(180deg,rgba(74,144,164,.16),rgba(74,144,164,.05))}
.vs-speaking{background:linear-gradient(180deg,rgba(46,125,91,.16),rgba(46,125,91,.05))}
.vs-safety{background:linear-gradient(180deg,rgba(192,57,43,.2),rgba(192,57,43,.06))}
.vs-repair{background:linear-gradient(180deg,rgba(232,163,23,.18),rgba(232,163,23,.05))}
.vs-idle{background:rgba(255,255,255,.02)}
.vs-orb{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}
.vs-orb::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid;opacity:.35}
.orb-listen{background:rgba(74,144,164,.2)}
.orb-listen::before{border-color:var(--sky);animation:pulse-ring 2s ease-out infinite}
.orb-speak{background:rgba(46,125,91,.2)}
.orb-speak::before{border-color:var(--signal)}
.orb-safety{background:rgba(192,57,43,.25)}
.orb-safety::before{border-color:var(--alarm);animation:pulse-ring 1.2s ease-out infinite}
.orb-repair{background:rgba(232,163,23,.2)}
.orb-repair::before{border-color:var(--hiviz)}
.orb-idle{background:rgba(255,255,255,.05)}
.orb-idle::before{border-color:rgba(255,255,255,.15)}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}}
.wave{display:flex;align-items:center;gap:2px;height:16px}
.wave span{width:2px;background:currentColor;border-radius:1px;animation:wv 1.1s ease-in-out infinite}
.wave span:nth-child(1){height:6px;animation-delay:0s}
.wave span:nth-child(2){height:13px;animation-delay:.12s}
.wave span:nth-child(3){height:9px;animation-delay:.24s}
.wave span:nth-child(4){height:15px;animation-delay:.36s}
.wave span:nth-child(5){height:7px;animation-delay:.48s}
@keyframes wv{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.vs-text{flex:1;min-width:0}
.vs-label{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.vsl-listen{color:var(--sky)}
.vsl-speak{color:var(--signal)}
.vsl-safety{color:#E8776B}
.vsl-repair{color:var(--hiviz)}
.vsl-idle{color:var(--ash)}
.vs-detail{font-size:11px;color:#C4D0D8;line-height:1.4}

/* Content region */
.scr-body{flex:1;padding:14px;overflow:hidden;display:flex;flex-direction:column;gap:10px}

/* Context card — always present */
.ctx-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:11px 12px}
.ctx-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.ctx-row:last-child{margin-bottom:0}
.ctx-k{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);flex-shrink:0}
.ctx-v{font-size:11px;color:#DCE4EA;font-weight:500;text-align:right}
.ctx-v.hl{color:var(--hiviz)}

/* Step display */
.step-card{background:rgba(140,156,168,.06);border:1px solid rgba(140,156,168,.34);border-radius:8px;padding:12px}
.step-card.safety{border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.11)}
.step-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.step-n{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#93A3AE}
.step-card.safety .step-n{color:#E8776B}
.step-prog{font-family:var(--mono);font-size:9px;color:var(--ash)}
.step-txt{font-size:13px;color:#E4EAEE;line-height:1.5;font-weight:400}
.step-req{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--mono);font-size:9px;color:var(--ash);display:flex;align-items:center;gap:6px}
.step-req strong{color:#E8776B;letter-spacing:.06em}

/* Value readout */
.val-card{background:rgba(46,125,91,.1);border:1px solid rgba(46,125,91,.3);border-radius:8px;padding:13px;text-align:center}
.val-lbl{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:5px}
.val-num{font-family:var(--cond);font-size:34px;font-weight:600;color:#F2F5F7;line-height:1;letter-spacing:.01em}
.val-unit{font-size:12px;color:#A8B6C0;margin-top:3px}
.val-src{font-family:var(--mono);font-size:8px;color:var(--ash);margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.07)}

/* Progress rail */
.prog-rail{display:flex;gap:2px;margin-top:2px}
.prog-seg{flex:1;height:3px;border-radius:1px;background:rgba(255,255,255,.1)}
.prog-seg.done{background:var(--signal)}
.prog-seg.now{background:var(--hiviz)}
.prog-seg.safety{background:var(--alarm)}

/* Capture log */
.cap-list{display:flex;flex-direction:column;gap:5px}
.cap-item{display:flex;align-items:center;gap:8px;padding:7px 9px;background:rgba(255,255,255,.03);border-radius:6px;border:1px solid rgba(255,255,255,.06)}
.cap-tick{width:14px;height:14px;border-radius:50%;background:rgba(46,125,91,.25);color:var(--signal);display:flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0}
.cap-txt{flex:1;font-size:10px;color:#C4D0D8;min-width:0}
.cap-time{font-family:var(--mono);font-size:8px;color:var(--ash);flex-shrink:0}

/* Diagram placeholder */
.diagram{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px;flex:1;display:flex;flex-direction:column;min-height:0}
.diagram-hd{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.diagram-canvas{flex:1;background:#0D161D;border-radius:5px;position:relative;overflow:hidden;min-height:130px;border:1px solid rgba(255,255,255,.06)}

/* Bottom action strip */
.act-strip{display:flex;gap:1px;background:rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.08)}
.act-btn{flex:1;padding:11px 6px;background:#0E1720;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.act-btn.primary{background:rgba(192,57,43,.2)}
.act-ico{font-size:14px;line-height:1}
.act-lbl{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--ash);text-transform:uppercase}
.act-btn.primary .act-lbl{color:#E8776B}

/* ── DIALOG PANEL — the transcript is Halyard's product surface just as
   much as the device screen is; see docs/dual-page-build-process.md §8
   for why .turn-spk/.turn-txt are treated as product while .turn-note/
   .modality/.anno (the explanatory layer) are treated as annotation. ── */
.dialog-panel{min-width:0}
.dp-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.dp-title{font-family:var(--site-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid)}
.dp-meta{font-family:var(--site-mono);font-size:9px;color:var(--mid)}

.turn{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.turn:last-child{border-bottom:none}
.turn-spk{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.spk-tech{color:var(--copper)}
.spk-hal{color:var(--sky)}
.spk-sys{color:var(--graphite)}
.spk-earcon{color:var(--hiviz)}
.turn-body{min-width:0}
.turn-txt{font-family:var(--mono);font-size:12px;color:#D8E1E7;line-height:1.6}
.turn-txt.sys{color:var(--mid) !important;font-style:italic;font-size:11px}
.turn-txt.earcon{color:var(--mid) !important;font-size:11px}
.turn-note{font-family:var(--anno-type);font-size:10px;color:var(--mid);line-height:1.55;margin-top:5px;padding-left:11px;border-left:2px solid var(--line)}
.turn-note strong{color:var(--ink)}

/* Inline chips */
.chip{display:inline-block;font-family:var(--anno-type);font-size:9px;padding:1px 5px;border-radius:2px;letter-spacing:.04em;vertical-align:baseline}
.chip-intent{background:var(--site-paper);color:var(--mid);border:1px solid var(--line)}
.chip-state{background:var(--site-paper);color:var(--mid);border:1px solid var(--line)}
.chip-conf{background:var(--site-paper);color:var(--mid);border:1px solid var(--line)}
.chip-safe{background:var(--site-paper);color:var(--ink);border:1px solid var(--ink)}

/* Modality split table */
.modality{margin-top:20px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mod-hd{background:var(--site-paper);padding:8px 12px;font-family:var(--site-mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--mid);border-bottom:1px solid var(--line)}
.mod-grid{display:grid;grid-template-columns:1fr 1fr 1fr}
.mod-col{padding:12px;border-right:1px solid var(--line)}
.mod-col:last-child{border-right:none}
.mod-col-t{font-family:var(--site-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--mid);margin-bottom:8px}
.mct-voice{color:var(--mid)}
.mct-screen{color:var(--mid)}
.mct-neither{color:var(--mid)}
.mod-col li{font-family:var(--anno-type);font-size:10px;color:var(--mid);line-height:1.65;list-style:none;margin-bottom:4px}
.mod-col li::before{content:'· ';color:var(--ash)}

/* Annotations */
.anno{font-family:var(--anno-type);margin-top:20px;background:var(--paper-2);border-radius:0 6px 6px 0;padding:14px 18px}
.anno h4{font-family:var(--anno-type);font-size:9px;text-transform:uppercase;margin-bottom:12px}
.alist{display:flex;flex-direction:column;gap:9px}
.aitem{display:flex;gap:9px;align-items:flex-start}
.anum{min-width:17px;height:17px;border-radius:50%;font-family:var(--anno-type);font-size:8px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.atxt{font-size:11px;color:var(--ink);line-height:1.7}
.atxt strong{color:var(--ink);font-weight:600}
.ref{display:inline-block;font-family:var(--anno-type);font-size:9px;padding:1px 5px;border-radius:2px;background:var(--site-paper);color:var(--mid);border:1px solid var(--line);letter-spacing:.03em}

/* Spec table */
.spec{margin-top:18px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.spec-hd{background:var(--site-paper);padding:7px 12px;font-family:var(--site-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);border-bottom:1px solid var(--line)}
.spec-row{display:flex;border-bottom:1px solid var(--line)}
.spec-row:last-child{border-bottom:none}
.spec-k{width:160px;padding:8px 12px;font-family:var(--site-mono);font-size:10px;font-weight:500;color:var(--mid);background:var(--site-paper);border-right:1px solid var(--line);flex-shrink:0}
.spec-v{padding:8px 12px;font-size:11px;color:var(--ink);line-height:1.55}
.spec-v code{font-family:var(--site-mono);font-size:10px;background:var(--site-paper);color:var(--mid);border:1px solid var(--line);padding:1px 4px;border-radius:2px}
}
/* ─── end @scope — the whole mockup ruleset above is isolated to .wf-embed ─── */

/* ─── PER-PROJECT OVERRIDE TIER — `body.proj-halyard .wf-embed`, matching
   meridian/relay/folio-mockup.css. This is the reserved home for Halyard's
   hand-owned look overrides; it sits OUTSIDE @scope so its higher specificity
   (body.proj-halyard .wf-embed …) out-weighs the scoped generated rules above,
   the same tier the other three projects use to re-skin their mockups.
   Migrated here from revamp.css (Phase 4 completion, after Phase 5's
   hashed-class retirement) AND from the former standalone
   `@scope (.wf-embed){…!important}` block: the body.proj-halyard prefix now
   wins on specificity, so the !important flags are retained only to match the
   convention of relay/folio's override tier and to hold values against the
   scoped base rules. Hand-owned; see the Phase 3 header note. ─── */

/* HALYARD — the transcript is the product, so typeset it as a designed
   artifact: hairlines, no rounded panel, speaker in mono caps, safety
   confirmations set apart. */
body.proj-halyard .wf-embed .dialog-panel {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 18px 0 0 !important;
}
body.proj-halyard .wf-embed .turn { display: grid; grid-template-columns: 68px 1fr; gap: 6px 18px; padding: 14px 0; }
body.proj-halyard .wf-embed .turn-spk {
  font-family: var(--site-mono) !important;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mid) !important;
}
body.proj-halyard .wf-embed .turn-txt {
  font-family: var(--display) !important;
  font-size: 18px !important; line-height: 1.45 !important;
  color: var(--ink) !important;
}
/* .sys/.earcon out-specify the .turn-txt override above by their extra class
   (two classes vs one) within this same tier — no proximity trick needed. The
   `color:var(--mid)` is re-asserted here because the elevated body.proj-halyard
   .turn-txt (ink) would otherwise out-specify the scoped base .turn-txt.sys
   (mid); keeping mid preserves the pre-migration render. */
body.proj-halyard .wf-embed .turn-txt.sys,
body.proj-halyard .wf-embed .turn-txt.earcon {
  font-family: var(--site-mono) !important;
  font-size: 12.5px !important; letter-spacing: .02em;
  color: var(--mid) !important;
}
body.proj-halyard .wf-embed .turn-note { grid-column: 2; font-size: 13px; }
body.proj-halyard .wf-embed .chip-safe { border-color: var(--ink) !important; color: var(--ink) !important; }

/* ─── DE-SLOP 2026-08-07 — the status strip's signal indicator was Unicode
   blocks (▮▮▯) and the Halt/Edit action icons were Unicode glyphs (■ / ✎).
   Replaced with drawn SVGs in the device's own currentColor: level-encoded
   square signal bars (sharp rects, in keeping with the rugged handheld), an
   octagon E-stop for Halt (machinery-safety idiom, not a generic square), and
   a pencil for Edit. Halt/Edit reuse the existing .ui-ico sizing; the signal
   bars need their own compact size. */
body.proj-halyard .wf-embed .sb-icon svg {
  height: 11px; width: auto; display: inline-block; vertical-align: middle;
}

/* ─── 2026-08-07 batch (revised) ───────────────────────────────────────────
   Logo now lives in a dedicated bar at the very top of the device, with the
   status row (time / cache / signal / battery) directly below it. Separating
   the two fixes the logo/CACHE-OK overlap that happened when both shared the
   one status strip. */
body.proj-halyard .wf-embed .dev-logobar {
  display: flex; align-items: center; justify-content: center;
  background: #0A0F14; padding: 13px 14px 12px;
}
body.proj-halyard .wf-embed .dev-logo { height: 8px; width: auto; opacity: .92; }
/* Bottom action strip is the device nav — icon-only, larger icons. The icons
   MUST be light: they were --ink (near-black) on the near-black nav, i.e.
   invisible once the ash-coloured labels were hidden. Primary (Halt) keeps the
   alarm-red used by its old label. */
body.proj-halyard .wf-embed .act-lbl { display: none; }
body.proj-halyard .wf-embed .act-ico { font-size: 21px; color: #AEBAC4; }
body.proj-halyard .wf-embed .act-btn.primary .act-ico { color: #E8776B; }
body.proj-halyard .wf-embed .act-btn { padding-top: 14px; padding-bottom: 14px; }