/* ============================================================================
   SaarthiOS Workforce — demo-only additions on top of kit.css.
   kit.css owns every token, the shell, the stamps, the buttons and the motion.
   Nothing here redefines a token; it only adds the pieces this demo needs that
   a general kit should not carry: chat bubbles, a call transcript, the journey
   map, the landing page, and a handful of layout utilities so the demo does not
   need Tailwind (one fewer thing to build, and it works off a file:// path).
   ============================================================================ */

/* ---- layout utilities (the small subset of Tailwind this demo actually uses) */
.row{ display:flex; align-items:center; gap:12px }
.row-top{ display:flex; align-items:flex-start; gap:12px }
.wrap{ flex-wrap:wrap }
.between{ justify-content:space-between }
.grow{ flex:1 1 auto; min-width:0 }
.none{ flex:none }
.col{ display:flex; flex-direction:column; gap:12px }
.grid{ display:grid; gap:14px }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.gauto{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.gauto-s{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) }
@media (max-width:900px){ .g2,.g3,.g4{ grid-template-columns:minmax(0,1fr) } }
.mb1{ margin-bottom:6px } .mb2{ margin-bottom:12px } .mb3{ margin-bottom:18px }
.mb4{ margin-bottom:26px } .mt1{ margin-top:6px } .mt2{ margin-top:12px } .mt3{ margin-top:18px }
.p3{ padding:14px } .p4{ padding:18px } .p5{ padding:22px }
.pagehead{ margin:0 0 4px }
.sub{ color:var(--muted); font-size:13.5px; max-width:78ch; margin:0 0 18px }
.tiny{ font-size:11.5px } .small{ font-size:12.5px } .big{ font-size:17px }
.right{ text-align:right } .center{ text-align:center }
.muted{ color:var(--muted) } .faint{ color:var(--faint) } .ink{ color:var(--ink) }
.red{ color:var(--red-deep) } .green{ color:var(--green) } .blue{ color:var(--blue) }
.amberc{ color:var(--amber-deep) }
.nowrap{ white-space:nowrap }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.clickable{ cursor:pointer }
.chartbox{ position:relative; height:220px }
.chartbox.tall{ height:290px }
.chartbox.short{ height:120px }
.scroll-x{ overflow-x:auto }

/* ---- the demo banner. Amber, because this is caution and not alarm: nothing
   here is real, and a reader must never have to wonder. --------------------- */
.demobar{ display:flex; align-items:center; gap:10px; padding:9px 22px;
  background:var(--amber-tint); border-bottom:1px solid var(--amber-soft);
  color:var(--amber-deep); font-family:"Martian Mono",monospace; font-stretch:75%; font-size:11px;
  letter-spacing:.06em; }
.demobar b{ font-family:"Archivo",sans-serif; letter-spacing:0 }
.demobar a{ text-decoration:underline; text-underline-offset:2px }

/* ---- role switcher ------------------------------------------------------- */
.rolepick{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:11.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:6px;
  padding:6px 9px; min-height:32px; max-width:230px }
.rolepick:hover{ border-color:var(--red) }

/* ---- funnel ladder ------------------------------------------------------- */
.ladder{ display:flex; flex-direction:column; gap:3px }
.rung{ display:grid; grid-template-columns:168px 1fr 92px 74px; align-items:center; gap:12px;
  padding:7px 10px; border-radius:6px; border:1px solid transparent; }
.rung:hover{ background:var(--bg-2); border-color:var(--line) }
.rung.stall{ background:var(--amber-tint); border-color:var(--amber-soft) }
.rung .bar{ height:11px; border-radius:3px; background:var(--blue);
  animation:barin .7s cubic-bezier(.2,.8,.2,1) both; transform-origin:left }
@keyframes barin{ from{ transform:scaleX(.02) } }
.rung .bar.alarm{ background:var(--red) } .rung .bar.ok{ background:var(--green) }
.rung .bar.quiet{ background:var(--line-2) }
.rung-l{ font-size:12.5px; color:var(--ink-soft) }
@media (max-width:760px){ .rung{ grid-template-columns:120px 1fr 64px } .rung>.rung-pct{ display:none } }

/* ---- WhatsApp conversation replay --------------------------------------- */
.chat{ background:#ece5dd; border:1px solid var(--line); border-radius:12px; padding:16px;
  min-height:300px; display:flex; flex-direction:column; gap:9px }
.bub{ max-width:76%; padding:8px 11px; font-size:13.5px; line-height:1.45; white-space:pre-wrap;
  box-shadow:0 1px 1px rgba(20,18,16,.08); position:relative;
  animation:bubin .32s cubic-bezier(.2,.8,.2,1) both }
@keyframes bubin{ from{ opacity:0; transform:translateY(7px) scale(.985) } }
.bub-in{ align-self:flex-start; background:#fff; border-radius:3px 12px 12px 12px }
.bub-out{ align-self:flex-end; background:#d9fdd3; border-radius:12px 3px 12px 12px }
.bub-sys{ align-self:center; background:rgba(255,255,255,.72); border-radius:6px; font-size:11px;
  color:var(--amber-deep); font-family:"Martian Mono",monospace; font-stretch:75%; max-width:90%;
  padding:5px 12px; box-shadow:none; border:1px dashed var(--amber-soft) }
.bub .at{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:9.5px; color:#667781;
  display:block; text-align:right; margin-top:3px }
.bub .tick{ color:#53bdeb }
/* The trace: why this turn exists. Not a tooltip — on these pages it IS the content. */
.trace{ align-self:flex-end; max-width:76%; margin:-4px 2px 4px 0;
  font-family:"Martian Mono",monospace; font-stretch:75%; font-size:10.5px; line-height:1.5; color:var(--muted);
  border-left:2px solid var(--line-2); padding:2px 0 2px 9px }
.trace b{ font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:9.5px }
.trace.eng-template     { border-color:#9aa0a8 } .trace.eng-template b{ color:#6b7178 }
.trace.eng-deterministic{ border-color:var(--blue) } .trace.eng-deterministic b{ color:var(--blue) }
.trace.eng-tool         { border-color:var(--green) } .trace.eng-tool b{ color:var(--green) }
.trace.eng-llm          { border-color:#7c5cd6 } .trace.eng-llm b{ color:#6b46c9 }
.trace.eng-guardrail    { border-color:var(--amber) } .trace.eng-guardrail b{ color:var(--amber-deep) }
.trace .ms{ color:var(--faint) }
.typing{ align-self:flex-start; background:#fff; border-radius:3px 12px 12px 12px; padding:10px 13px }
.typing i{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#99a;
  margin-right:3px; animation:dot 1.1s infinite }
.typing i:nth-child(2){ animation-delay:.18s } .typing i:nth-child(3){ animation-delay:.36s }
@keyframes dot{ 0%,60%,100%{ opacity:.3 } 30%{ opacity:1 } }
.replaybar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px }

/* ---- voice call ---------------------------------------------------------- */
.wave{ display:flex; align-items:center; gap:2px; height:34px }
.wave i{ display:block; width:3px; border-radius:2px; background:var(--line-2); flex:none }
.wave i.on{ background:var(--red) }
.wave.live i.on{ animation:wv .9s ease-in-out infinite alternate }
@keyframes wv{ from{ transform:scaleY(.45) } to{ transform:scaleY(1) } }
.turn{ display:grid; grid-template-columns:54px 1fr; gap:12px; padding:11px 0;
  border-top:1px solid var(--line) }
.turn:first-child{ border-top:0 }
.turn.now{ background:var(--red-tint); border-radius:6px; padding:11px 10px; border-top-color:transparent }
.turn-t{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:11px; color:var(--faint); padding-top:2px }
.turn-who{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:3px }
.turn-agent .turn-who{ color:var(--red-deep) } .turn-cand .turn-who{ color:var(--blue) }
.turn-text{ font-size:13.5px; line-height:1.5 }
.ev{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:10.5px; color:var(--muted);
  margin-top:5px; display:flex; gap:7px; align-items:flex-start }
.ev-k{ flex:none; padding:0 5px; border-radius:3px; background:var(--bg-2);
  border:1px solid var(--line); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  line-height:16px; color:var(--muted) }
.ev-barge_in .ev-k{ background:var(--amber-tint); border-color:var(--amber-soft); color:var(--amber-deep) }
.ev-guardrail .ev-k{ background:var(--amber-tint); border-color:var(--amber-soft); color:var(--amber-deep) }
.ev-tool .ev-k{ background:var(--green-soft); border-color:var(--green-soft); color:var(--green) }
.ev-policy .ev-k{ background:var(--red-tint); border-color:var(--red-soft); color:var(--red-deep) }

/* ---- gate ladder (governance, call gates) ------------------------------- */
.gates{ display:flex; flex-direction:column }
.gate{ display:grid; grid-template-columns:26px 1fr auto; gap:11px; align-items:center;
  padding:9px 10px; border-top:1px solid var(--line) }
.gate:first-child{ border-top:0 }
.gate-n{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:10.5px; color:var(--faint);
  text-align:center }
.gate-ok{ color:var(--green) } .gate-no{ color:var(--amber-deep) } .gate-skip{ color:var(--faint) }
.gate-name{ font-size:13px; font-weight:600; font-family:"Archivo",sans-serif }
.gate-why{ font-size:12px; color:var(--muted) }

/* ---- journey map --------------------------------------------------------- */
.journey{ position:relative; padding-left:34px }
.journey::before{ content:""; position:absolute; left:11px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--red),var(--blue) 45%,var(--green)) }
.jstep{ position:relative; margin-bottom:14px }
.jstep::before{ content:""; position:absolute; left:-28px; top:16px; width:12px; height:12px;
  border-radius:50%; background:var(--paper); border:2px solid var(--line-2) }
.jstep.k-ai::before{ border-color:#7c5cd6 } .jstep.k-rule::before{ border-color:var(--amber) }
.jstep.k-human::before{ border-color:var(--blue) } .jstep.k-send::before{ border-color:var(--green) }
.jactor{ font-family:"Martian Mono",monospace; font-stretch:75%; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint) }

/* ---- topic / insight cards ---------------------------------------------- */
.topic{ border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--paper) }
.topic.v-good{ border-left:3px solid var(--green) }
.topic.v-amber{ border-left:3px solid var(--amber) }
.topic.v-bad{ border-left:3px solid var(--red) }
.qbar{ display:flex; height:7px; border-radius:3px; overflow:hidden; background:var(--bg-2) }
.qbar i{ display:block; height:100% }
.qbar .ok{ background:var(--green) } .qbar .pa{ background:var(--amber) } .qbar .no{ background:var(--red) }

/* ---- lab ---------------------------------------------------------------- */
.labwrap{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start }
@media (max-width:1000px){ .labwrap{ grid-template-columns:minmax(0,1fr) } }
.labin{ display:flex; gap:8px }
.labin input{ flex:1 1 auto; padding:10px 12px; border-radius:6px; border:1px solid var(--line-2);
  font-size:13.5px; font-family:"Archivo",sans-serif; background:var(--paper) }
.labin input:focus-visible{ border-color:var(--blue) }

/* ---- landing page ------------------------------------------------------- */
.lp{ max-width:1120px; margin:0 auto; padding:0 24px }
.lp-nav{ display:flex; align-items:center; gap:14px; padding:18px 0 }
.lp-hero{ padding:56px 0 34px }
.lp-h1{ font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:clamp(34px,5.4vw,62px); line-height:1.02; margin:0 0 18px; max-width:19ch }
.lp-lede{ font-size:clamp(16px,2vw,20px); line-height:1.5; color:var(--ink-soft); max-width:60ch;
  margin:0 0 26px }
.lp-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.lp-btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:6px;
  background:linear-gradient(180deg,var(--red-2),var(--red)); color:#fff; font-weight:600;
  font-size:14.5px; box-shadow:0 14px 30px -14px var(--red); transition:.18s;
  font-family:"Archivo",sans-serif }
.lp-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px var(--red) }
.lp-btn2{ display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border-radius:6px;
  border:1px solid var(--line-2); background:var(--paper); font-weight:600; font-size:14.5px;
  font-family:"Archivo",sans-serif; transition:.18s }
.lp-btn2:hover{ border-color:var(--red); color:var(--red-deep) }
.lp-sec{ padding:48px 0; border-top:1px solid var(--line) }
.lp-h2{ font-family:"Archivo",sans-serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(23px,3vw,33px); margin:0 0 10px }
.lp-stat{ font-family:"Archivo",sans-serif; font-weight:700; font-size:34px; line-height:1;
  font-variant-numeric:tabular-nums }
.lp-foot{ padding:34px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px }
.lp-shot{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper);
  box-shadow:var(--shadow) }
.lp-shot-bar{ display:flex; align-items:center; gap:7px; padding:9px 13px;
  border-bottom:1px solid var(--line); background:var(--bg-2) }
.lp-dot{ width:9px; height:9px; border-radius:50%; background:var(--line-2) }
@media (prefers-reduced-motion:reduce){
  .bub,.rung .bar,.wave.live i.on,.typing i{ animation:none }
  .lp-btn:hover,.lp-btn2:hover{ transform:none }
}