@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap&subset=latin,latin-ext');

:root{
  --paper:#EDEFEA;
  --surface:#FBFBF8;
  --ink:#141A17;
  --muted:#6E7872;
  --line:#D3D8CF;
  --pine:#16463C;
  --pine-soft:#2C6355;
  --brass:#B08A21;
  --brass-lite:#E8D9A8;
  --brick:#9C4038;
  --r:3px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}

/* ---------- shell ---------- */
.app{
  display:grid;grid-template-columns:238px 1fr;
  max-width:1060px;margin:0 auto;height:100dvh;
  background:var(--surface);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}

/* ---------- signature: the gauge rail ---------- */
.rail{
  border-right:1px solid var(--line);
  padding:26px 20px;display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(180deg,#F6F7F3,#EFF1EC);
}
.rail-cap{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.rail-row{padding:9px 0;border-bottom:1px dotted var(--line)}
.rail-row:last-of-type{border-bottom:none}
.rail-head{display:flex;align-items:baseline;gap:8px}
.rail-idx{
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);
  min-width:16px;
}
.rail-name{font-size:12.5px;font-weight:500;color:var(--muted);transition:color .3s}
.rail-row[data-state="active"] .rail-name{color:var(--pine);font-weight:600}
.rail-row[data-state="done"] .rail-name{color:var(--ink)}
.rail-ticks{display:flex;gap:2px;margin-top:7px;margin-left:24px}
.tick{height:3px;flex:1;background:var(--line);transition:background .45s ease}
.tick.on{background:var(--brass)}
.rail-foot{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.7;
  letter-spacing:.06em;color:var(--muted);
}

/* ---------- stage ---------- */
.stage{display:flex;flex-direction:column;min-width:0}
.masthead{
  padding:22px 30px 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
}
.mast-title{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:21px;
  letter-spacing:-.025em;line-height:1.1;
}
.mast-sub{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:5px;
}
.mast-right{display:flex;align-items:center;gap:12px}
.mast-badge{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:var(--pine);border:1px solid var(--pine);border-radius:100px;
  padding:4px 11px;white-space:nowrap;
}

/* language switch */
.lang{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden}
.lang button{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;color:var(--muted);
  transition:background .16s,color .16s;
}
.lang button[aria-pressed="true"]{background:var(--pine);color:#F3F5F0}
.lang button:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}

.transcript{flex:1;overflow-y:auto;padding:26px 30px 8px;scroll-behavior:smooth}
.transcript::-webkit-scrollbar{width:8px}
.transcript::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* ---------- messages ---------- */
.msg{max-width:78%;margin-bottom:14px;animation:rise .34s ease both}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.msg-bot .bubble{
  background:#F1F3ED;border:1px solid var(--line);border-left:2px solid var(--pine);
  border-radius:var(--r);padding:12px 15px;
}
.msg-me{margin-left:auto;display:flex;justify-content:flex-end}
.msg-me .stamp{
  background:var(--pine);color:#F3F5F0;border-radius:var(--r);
  padding:9px 14px;font-size:14px;font-weight:500;max-width:100%;
}
.q-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brass);margin-bottom:6px;
}
.typing{display:flex;gap:4px;padding:14px 15px;width:fit-content;
  background:#F1F3ED;border:1px solid var(--line);border-left:2px solid var(--pine);border-radius:var(--r)}
.typing i{width:4px;height:11px;background:var(--muted);display:block;animation:bob .9s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- dock ---------- */
.dock{
  border-top:1px solid var(--line);padding:16px 30px 22px;
  background:linear-gradient(180deg,#FBFBF8,#F4F6F1);
  max-height:52vh;overflow-y:auto;
}
.dock:empty{display:none}
.opts{display:flex;flex-direction:column;gap:7px}
.opt{
  text-align:left;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r);padding:11px 14px;font-size:14px;line-height:1.4;
  display:flex;align-items:center;gap:11px;transition:border-color .16s,background .16s,transform .1s;
}
.opt:hover{border-color:var(--pine);background:#F2F5F0}
.opt:active{transform:translateY(1px)}
.opt:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.opt-key{
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:1px 5px;flex:none;
}
.opt[aria-pressed="true"]{border-color:var(--pine);background:#EAF0EA}
.opt[aria-pressed="true"] .opt-key{background:var(--pine);color:#F3F5F0;border-color:var(--pine)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.dock-cta{
  margin-top:11px;background:var(--pine);color:#F3F5F0;border-radius:var(--r);
  padding:12px 18px;font-weight:600;font-size:14px;width:100%;
  transition:background .16s;
}
.dock-cta:hover{background:var(--pine-soft)}
.dock-cta:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.dock-note{font-size:11.5px;color:var(--muted);margin-top:9px}
.dock-foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;gap:12px}
.back{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:4px 0;
  border-bottom:1px solid transparent;
}
.back:hover{color:var(--ink);border-bottom-color:var(--line)}
.back:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.back[hidden]{display:none}

/* ---------- report ---------- */
.report{max-width:100%;animation:rise .4s ease both}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;margin-bottom:14px;
}
.card-cap{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}

/* signature: the level ruler */
.ruler{position:relative;margin:34px 0 6px}
.ruler-track{display:flex;height:34px;border:1px solid var(--line)}
.ruler-band{flex:1;border-right:1px solid var(--line);position:relative;background:#F4F6F1}
.ruler-band:last-child{border-right:none}
.ruler-band.hit{background:var(--brass-lite)}
.ruler-band span{
  position:absolute;bottom:-21px;left:0;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.ruler-band.hit span{color:var(--ink);font-weight:500}
/* The needle and the bars carry their final value inline; these animations only
   replay the way in. A keyframe with just a `from` step ends at whatever the
   element already is, so a run that never happens — hidden tab, off-screen
   iframe — simply shows the finished state.
   fill-mode must stay `forwards`: `both` would pin the element to the `from`
   step while the animation is still waiting to start, which is exactly the
   blank chart this replaced. */
.needle{position:absolute;top:-26px;bottom:-8px;width:2px;background:var(--brick);
  animation:needle-in 1.1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes needle-in{from{left:0}}
.needle b{
  position:absolute;top:-4px;left:50%;transform:translate(-50%,-100%);
  font-family:'Archivo',sans-serif;font-size:23px;font-weight:800;letter-spacing:-.03em;
  background:var(--surface);padding:0 6px;
}
.level-line{margin-top:32px;font-size:14.5px;line-height:1.6}

/* radar */
.radar-wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.radar{width:330px;max-width:100%;flex:none}
.bars{flex:1;min-width:210px;display:flex;flex-direction:column;gap:11px}
.bar-row{display:grid;grid-template-columns:1fr 42px;gap:10px;align-items:center}
.bar-name{font-size:12.5px}
.bar-track{height:6px;background:#E4E7DF;margin-top:5px;position:relative;overflow:hidden}
.bar-fill{height:100%;background:var(--pine);animation:bar-grow .9s ease forwards}
@keyframes bar-grow{from{width:0}}
.bar-fill.weak{background:var(--brick)}
.bar-val{font-family:'IBM Plex Mono',monospace;font-size:12px;text-align:right;color:var(--muted)}

.note{border-left:2px solid var(--brass);padding-left:14px;margin-top:16px;font-size:13.5px;line-height:1.6}

.gap{border-left:2px solid var(--brick);padding-left:16px;margin-bottom:20px}
.gap h4{font-family:'Archivo',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.gap p{font-size:13px;color:var(--muted);margin:3px 0 10px}
.gap ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.gap li{font-size:13.5px;line-height:1.5;padding-left:16px;position:relative}
.gap li::before{content:'→';position:absolute;left:0;color:var(--brass);font-size:12px}

.lead label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.lead input[type=text],.lead input[type=email]{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);font:inherit;font-size:14px;margin-bottom:12px;
}
.lead input:focus{outline:none;border-color:var(--pine)}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.consent input{margin-top:3px;flex:none;accent-color:var(--pine)}
.consent a{color:var(--pine)}
.err{color:var(--brick);font-size:12.5px;margin-bottom:10px;display:none}

.after{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:6px 0 24px}
.book{
  background:var(--pine);color:#F3F5F0;border-radius:var(--r);
  padding:11px 20px;font-weight:600;font-size:14px;text-decoration:none;
}
.book:hover{background:var(--pine-soft)}
.plain{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
  padding-bottom:2px;background:none;
}
.plain:hover{color:var(--ink);border-color:var(--ink)}
.disc{font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:6px}

/* ---------- embed mode: no chrome, transparent, grows with content ---------- */
body.embed{background:transparent}
body.embed .app{
  height:auto;min-height:0;border:1px solid var(--line);
  grid-template-columns:200px 1fr;
}
body.embed .masthead{display:none}
body.embed .transcript{overflow:visible;max-height:none}
body.embed .stage{min-height:420px}
/* Nothing scrolls inside the frame — the frame itself grows instead, so the
   dock must not cap itself against the iframe's viewport. */
body.embed .dock{max-height:none;overflow:visible}

@media (max-width:820px){
  .app{grid-template-columns:1fr;height:100dvh}
  body.embed .app{grid-template-columns:1fr}
  .rail{
    flex-direction:row;gap:5px;padding:11px 16px;overflow-x:auto;
    border-right:none;border-bottom:1px solid var(--line);
  }
  .rail-cap,.rail-foot,.rail-idx{display:none}
  /* Each area keeps its natural width and the strip scrolls sideways. Sharing
     the width equally instead makes the longer names overlap their neighbours. */
  .rail-row{padding:0 12px 0 0;border-bottom:none;flex:0 0 auto}
  .rail-name{font-size:10.5px;white-space:nowrap}
  .rail-ticks{margin-left:0;margin-top:5px}
  .masthead{padding:16px 18px 14px}
  .mast-title{font-size:17px}
  .mast-badge{display:none}
  .transcript{padding:18px 18px 6px}
  .dock{padding:13px 18px 18px;max-height:56vh}
  .msg{max-width:92%}
  .grid2{grid-template-columns:1fr}
  .card{padding:17px}
}

@media print{
  body{background:#fff}
  .app{display:block;height:auto;max-width:none;border:none}
  .rail,.dock,.masthead,.after,.msg-me,.typing,.lead{display:none}
  .transcript{overflow:visible;padding:0}
  .msg-bot{display:none}
  .report{animation:none}
  .card{break-inside:avoid;border-color:#ccc;margin-bottom:10px}
  .needle{transition:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}