/* Teardown — pitch demo.
   Same design system as the report: steel paper, blue-black ink,
   red-oxide primer accent, monospace on every figure. */

:root {
  --paper:#E9EBEC; --panel:#F7F8F8; --panel-2:#FFFFFF;
  --ink:#14181B; --ink-2:#4A5459; --ink-3:#6E787D;
  --rule:#C7CDD0; --rule-soft:#DCE0E2;
  --oxide:#A63A20; --oxide-soft:#F0DED8;
  --amber:#A8730B; --amber-soft:#F3E6C9;
  --clear:#3F6B4A; --clear-soft:#DDE8DF;
  --sans: ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --w: 74rem;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#101416; --panel:#171C1F; --panel-2:#1D2326; --ink:#E4E8E9;
    --ink-2:#A3AEB3; --ink-3:#79868C; --rule:#2C3438; --rule-soft:#212829;
    --oxide:#D6603F; --oxide-soft:#331A13; --amber:#E0A63A; --amber-soft:#33280F;
    --clear:#6FA37E; --clear-soft:#17251A; }
}
:root[data-theme="dark"]{ --paper:#101416; --panel:#171C1F; --panel-2:#1D2326; --ink:#E4E8E9;
  --ink-2:#A3AEB3; --ink-3:#79868C; --rule:#2C3438; --rule-soft:#212829;
  --oxide:#D6603F; --oxide-soft:#331A13; --amber:#E0A63A; --amber-soft:#33280F;
  --clear:#6FA37E; --clear-soft:#17251A; }
:root[data-theme="light"]{ --paper:#E9EBEC; --panel:#F7F8F8; --panel-2:#FFFFFF; --ink:#14181B;
  --ink-2:#4A5459; --ink-3:#6E787D; --rule:#C7CDD0; --rule-soft:#DCE0E2;
  --oxide:#A63A20; --oxide-soft:#F0DED8; --amber:#A8730B; --amber-soft:#F3E6C9;
  --clear:#3F6B4A; --clear-soft:#DDE8DF; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-0.02em;text-wrap:balance}
p{margin:0} ul{margin:0;padding-left:1.15rem}
a{color:var(--oxide);text-underline-offset:2px}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--w);margin:0 auto;padding:0 1.5rem}
.label{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);
  border-top:3px solid var(--ink);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:1.25rem;
  padding-top:.7rem;padding-bottom:.7rem;flex-wrap:wrap}
.brand{font-size:1.0625rem;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.brand em{font-style:normal;color:var(--ink-3);font-weight:500;font-size:.8125rem}
.tabs{display:flex;gap:.15rem;flex-wrap:wrap;margin-left:auto}
.tab{background:none;border:1px solid transparent;color:var(--ink-2);
  font-size:.8125rem;font-weight:600;padding:.4rem .7rem;cursor:pointer;
  display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.tab .tn{font-family:var(--mono);font-size:.6875rem;color:var(--ink-3)}
.tab:hover{color:var(--ink);background:var(--panel)}
.tab.on{background:var(--oxide);border-color:var(--oxide);color:#fff}
.tab.on .tn{color:rgba(255,255,255,.7)}

/* ---------- stage shell ---------- */
.stage{display:none;padding:2.75rem 0 4rem;animation:fade .28s ease}
.stage.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stage-head{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2rem;max-width:64ch}
.stage-head h2{font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.1}
.stage-head .lede{font-size:1.0625rem;color:var(--ink-2)}

.stage-foot{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;margin-top:2.75rem;padding-top:1.25rem;border-top:1px solid var(--rule);flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:700;
  padding:.7rem 1.2rem;border:1px solid var(--oxide);background:var(--oxide);
  color:#fff;cursor:pointer;text-decoration:none;transition:opacity .12s}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--oxide)}
.btn.quiet{background:transparent;border-color:var(--rule);color:var(--ink-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{font-size:.8125rem;padding:.45rem .8rem}

/* ---------- generic panel ---------- */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.g2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.cell{background:var(--panel);padding:1.35rem 1.25rem;display:flex;flex-direction:column;gap:.6rem}
.cell h3{font-size:1.0625rem}
.cell h4{font-size:.9375rem}
.cell p{font-size:.9375rem;color:var(--ink-2)}
.cell .n{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--oxide);letter-spacing:.1em}
.cell .src{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);
  border-left:2px solid var(--rule);padding-left:.6rem;line-height:1.55}

.stat{display:flex;flex-direction:column;gap:.2rem}
.stat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.75rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat .v.oxide{color:var(--oxide)}
.stat .k{font-size:.8125rem;color:var(--ink-3)}

.callout{border-left:5px solid var(--oxide);background:var(--panel);
  padding:1.15rem 1.4rem;font-size:.9375rem;color:var(--ink-2)}
.callout strong{color:var(--ink)}
.callout.ink{border-left-color:var(--ink)}

/* ---------- hero ---------- */
.hero-fig{border-left:6px solid var(--oxide);background:var(--panel);
  padding:1.6rem 1.8rem;display:flex;flex-direction:column;gap:.4rem;align-self:flex-start}
.hero-fig .v{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(2.1rem,6.5vw,3.2rem);font-weight:700;letter-spacing:-.045em;
  line-height:1;color:var(--oxide)}
.hero-fig .k{font-size:.9375rem;color:var(--ink-2);max-width:46ch}

/* ---------- loop diagram ---------- */
.loop{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.loop .node{background:var(--panel);padding:1.2rem 1rem;display:flex;
  flex-direction:column;gap:.4rem;position:relative}
.loop .node .n{font-family:var(--mono);font-size:.7rem;font-weight:700;color:var(--oxide)}
.loop .node h4{font-size:.9375rem}
.loop .node p{font-size:.8125rem;color:var(--ink-2)}
.loop .node.back{background:var(--oxide-soft)}

/* ---------- scanner ---------- */
.scan-grid{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:1.25rem}
@media(max-width:56rem){.scan-grid{grid-template-columns:1fr}}
.sources{border:1px solid var(--rule);background:var(--panel)}
.src-row{display:flex;align-items:center;gap:.7rem;padding:.6rem .85rem;
  border-bottom:1px solid var(--rule-soft);font-size:.8125rem}
.src-row:last-child{border-bottom:none}
.src-dot{width:.5rem;height:.5rem;flex:0 0 auto;background:var(--rule);border-radius:50%}
.src-row.live .src-dot{background:var(--clear);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.src-row .nm{flex:1;min-width:0}
.src-row .nm b{display:block;font-weight:600;color:var(--ink)}
.src-row .nm span{display:block;font-size:.7rem;color:var(--ink-3)}
.src-row .ct{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:.8125rem;font-weight:700;color:var(--ink-2)}

.scan-out{border:1px solid var(--rule);background:var(--panel);display:flex;flex-direction:column;min-height:26rem}
.scan-bar{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--rule);flex-wrap:wrap}
.scan-bar .label{margin-right:auto}
.hits{overflow-y:auto;max-height:32rem}
.hit{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;padding:.8rem .9rem;
  border-bottom:1px solid var(--rule-soft);cursor:pointer;animation:slidein .3s ease}
.hit:hover{background:var(--panel-2)}
.hit.sel{background:var(--oxide-soft)}
@keyframes slidein{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.hit .who{font-weight:700;font-size:.9375rem}
.hit .where{font-size:.75rem;color:var(--ink-3);font-family:var(--mono)}
.hit .chips{grid-column:1/-1;display:flex;gap:.3rem;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .45rem;border:1px solid currentColor}
.chip.heavy{color:var(--oxide);background:var(--oxide-soft)}
.chip.mod{color:var(--amber);background:var(--amber-soft)}
.chip.light{color:var(--clear);background:var(--clear-soft)}
.hit .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:.9375rem;font-weight:700;color:var(--oxide);text-align:right;white-space:nowrap}

.empty{padding:3rem 1.5rem;text-align:center;color:var(--ink-3);font-size:.9375rem}

/* ---------- precompute ---------- */
.pc-row{display:grid;grid-template-columns:5.5rem 1fr auto;gap:.5rem 1rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule-soft);align-items:start}
.tier{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.22rem .35rem;text-align:center;border:1px solid currentColor}
.tier.public{color:var(--clear);background:var(--clear-soft)}
.tier.stated{color:var(--amber);background:var(--amber-soft)}
.tier.ledger{color:var(--ink-3);background:var(--panel-2)}
.pc-row h4{font-size:.9375rem}
.pc-row p{font-size:.8125rem;color:var(--ink-2);margin-top:.2rem}
.pc-row .ev{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);
  background:var(--panel);border-left:2px solid var(--rule);padding:.4rem .6rem;
  margin-top:.4rem;overflow-x:auto}
.pc-row .money{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.0625rem;font-weight:700;white-space:nowrap;text-align:right}
.pc-row .money small{display:block;font-size:.625rem;font-weight:400;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.pc-row.locked{opacity:.42}

/* ---------- email ---------- */
.mail{border:1px solid var(--rule);background:var(--panel-2)}
.mail-hd{border-bottom:1px solid var(--rule);padding:.8rem 1rem;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-2);display:flex;
  flex-direction:column;gap:.2rem}
.mail-hd b{color:var(--ink)}
.mail-bd{padding:1.2rem 1.25rem;font-size:.9375rem;line-height:1.7;white-space:pre-wrap}
.mail-bd .fill{background:var(--oxide-soft);color:var(--oxide);font-weight:700;
  padding:0 .15rem;font-family:var(--mono);font-size:.875rem}

.seq{display:flex;flex-direction:column}
.seq-step{display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;padding:.75rem 0;
  border-bottom:1px solid var(--rule-soft);align-items:start}
.seq-step .day{font-family:var(--mono);font-size:.75rem;font-weight:700;
  color:var(--oxide);padding-top:.15rem}
.seq-step b{font-size:.875rem;display:block}
.seq-step span{font-size:.8125rem;color:var(--ink-2)}
.seq-step .ch{font-family:var(--mono);font-size:.625rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3)}

.dom{display:flex;flex-direction:column;gap:.15rem;padding:.75rem 0;border-bottom:1px solid var(--rule-soft)}
.dom-top{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.dom-top b{font-family:var(--mono);font-size:.875rem}
.dom-top .st{font-family:var(--mono);font-size:.625rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:.15rem .4rem;border:1px solid currentColor}
.st.healthy{color:var(--clear);background:var(--clear-soft)}
.st.warming{color:var(--amber);background:var(--amber-soft)}
.st.parked{color:var(--oxide);background:var(--oxide-soft)}
.dom-top .cap{margin-left:auto;font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.meter{height:.45rem;background:var(--rule-soft);position:relative;margin-top:.3rem}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--clear);display:block}
.meter i.warn{background:var(--amber)} .meter i.bad{background:var(--oxide)}
.dom .note{font-size:.8125rem;color:var(--ink-2);margin-top:.3rem}

/* ---------- pipeline ---------- */
.pipe-tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1rem}
.pipe-tab{background:var(--panel);border:1px solid var(--rule);color:var(--ink-2);
  font-size:.8125rem;font-weight:600;padding:.45rem .8rem;cursor:pointer;
  display:flex;align-items:center;gap:.45rem}
.pipe-tab .c{font-family:var(--mono);font-size:.6875rem;color:var(--ink-3)}
.pipe-tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pipe-tab.on .c{color:rgba(255,255,255,.65)}

.pipe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);gap:1.25rem}
@media(max-width:62rem){.pipe-grid{grid-template-columns:1fr}}

.tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.tbl th{text-align:left;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:.6rem .7rem;border-bottom:2px solid var(--ink);white-space:nowrap}
.tbl td{padding:.7rem;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--panel)}
.tbl .shop{font-weight:700}
.tbl .sub{font-size:.75rem;color:var(--ink-3);font-family:var(--mono)}
.tbl .money{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;text-align:right;white-space:nowrap}
.tbl-scroll{overflow-x:auto;border:1px solid var(--rule);background:var(--panel)}

.pill{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:.2rem .45rem;border:1px solid currentColor;white-space:nowrap}
.pill.neutral{color:var(--ink-3);background:var(--panel-2)}
.pill.amber{color:var(--amber);background:var(--amber-soft)}
.pill.oxide{color:var(--oxide);background:var(--oxide-soft)}
.pill.clear{color:var(--clear);background:var(--clear-soft)}

.feed{border:1px solid var(--rule);background:var(--panel);display:flex;flex-direction:column;max-height:36rem}
.feed-hd{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--rule)}
.live-dot{width:.5rem;height:.5rem;background:var(--clear);border-radius:50%;animation:pulse 1.4s infinite}
.feed-body{overflow-y:auto;padding:.3rem 0}
.ev{display:grid;grid-template-columns:auto 1fr;gap:.6rem;padding:.6rem .9rem;
  border-bottom:1px solid var(--rule-soft);animation:slidein .35s ease}
.ev .ic{font-family:var(--mono);font-size:.5625rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.2rem .35rem;border:1px solid currentColor;height:fit-content;white-space:nowrap}
.ev b{font-size:.8125rem;display:block}
.ev p{font-size:.8125rem;color:var(--ink-2)}
.ev .ago{font-size:.6875rem;color:var(--ink-3);font-family:var(--mono);margin-top:.15rem}

/* ---------- economics ---------- */
.slider-row{display:flex;flex-direction:column;gap:.5rem;padding:1rem 0}
.slider-row .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.slider-row .top b{font-size:.9375rem}
.slider-row .top .v{font-family:var(--mono);font-weight:700;color:var(--oxide)}
input[type=range]{width:100%;accent-color:var(--oxide)}

.mathline{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--rule-soft);font-size:.9375rem}
.mathline span{color:var(--ink-2)}
.mathline b{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mathline.total{border-bottom:none;border-top:2px solid var(--ink);margin-top:.4rem;padding-top:.8rem}
.mathline.total b{font-size:1.25rem;color:var(--oxide)}

/* ---------- misc ---------- */
.tag{display:inline-block;font-family:var(--mono);font-size:.625rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--oxide);
  border:1px solid var(--oxide);padding:.22rem .5rem}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.5rem}
.stack{display:flex;flex-direction:column;gap:1.25rem}
.stack-sm{display:flex;flex-direction:column;gap:.6rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
hr.sep{border:none;border-top:1px solid var(--rule);margin:2rem 0}

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

/* ============================ stage nav ============================ */
.stage-foot{justify-content:space-between}
.foot-nav{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.crumb{font-size:.8125rem;color:var(--ink-3);font-family:var(--mono)}

/* ============================ report modal ============================ */
.modal{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  background:rgba(10,13,15,.72);backdrop-filter:blur(2px)}
.modal.on{display:flex}
.modal[hidden]{display:none}
.modal-bar{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;
  background:var(--paper);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.modal-bar .label{margin-right:auto}
.modal iframe{flex:1;width:100%;border:0;background:var(--paper)}

/* return-to-flow bar injected into the standalone report */
.returnbar{position:sticky;top:0;z-index:99;display:flex;align-items:center;
  gap:.75rem;padding:.6rem 1rem;background:var(--ink);color:#fff;
  font-family:var(--sans);font-size:.8125rem;flex-wrap:wrap}
.returnbar a{color:#fff;font-weight:700;text-decoration:underline}
.returnbar span{opacity:.72}

/* ============================ blueprint ============================ */
.bp-shell{border:1px solid var(--rule);background:var(--panel)}
.bp-bar{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;
  border-bottom:1px solid var(--rule);flex-wrap:wrap}
.bp-bar b{display:block;font-size:1.0625rem}
.bp-months{display:flex;gap:.25rem;margin-left:auto;flex-wrap:wrap}
.bp-m{font-family:var(--mono);font-size:.75rem;font-weight:700;padding:.35rem .6rem;
  border:1px solid var(--rule);background:var(--panel-2);color:var(--ink-2);cursor:pointer}
.bp-m.on{background:var(--oxide);border-color:var(--oxide);color:#fff}

.bp-body{display:grid;grid-template-columns:13rem minmax(0,1fr) 15rem;gap:1px;background:var(--rule)}
@media(max-width:66rem){.bp-body{grid-template-columns:1fr}}
.bp-body > *{background:var(--panel);padding:1.2rem 1.1rem}

.bp-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:3.4rem;
  font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--oxide)}
.bp-delta{font-family:var(--mono);font-size:.8125rem;font-weight:700;margin-top:.2rem}
.bp-delta.up{color:var(--clear)} .bp-delta.down{color:var(--oxide)} .bp-delta.flat{color:var(--ink-3)}
.bp-track{height:.5rem;background:var(--rule-soft);margin-top:.9rem;position:relative}
.bp-track i{position:absolute;inset:0 auto 0 0;background:var(--oxide);transition:width .4s ease}
.bp-open{font-size:.8125rem;color:var(--ink-3);margin-top:1rem}
.bp-open b{display:block;font-family:var(--mono);font-size:1.25rem;color:var(--ink);font-weight:700}

.bp-move{display:flex;gap:.55rem;align-items:flex-start;padding:.5rem 0;
  border-bottom:1px solid var(--rule-soft);font-size:.875rem}
.bp-move .ar{font-family:var(--mono);font-weight:700;flex:0 0 auto}
.bp-move.up .ar{color:var(--clear)} .bp-move.down .ar{color:var(--oxide)}
.bp-move.flag .ar{color:var(--amber)}
.bp-move.flag{background:var(--amber-soft);padding-left:.5rem;border-left:3px solid var(--amber)}
.bp-none{font-size:.875rem;color:var(--ink-3);padding:.5rem 0}

.bp-peer{padding:.5rem 0;border-bottom:1px solid var(--rule-soft)}
.bp-peer .r{display:flex;justify-content:space-between;gap:1rem;font-size:.8125rem}
.bp-peer .r b{font-weight:600}
.bp-peer .r span{font-family:var(--mono);color:var(--ink-2);white-space:nowrap}
.bp-peer .t{height:.4rem;background:var(--rule-soft);margin-top:.3rem;position:relative}
.bp-peer .t i{position:absolute;inset:0 auto 0 0;background:var(--oxide)}
.bp-peer .t i.ok{background:var(--clear)}
.bp-peer .t u{position:absolute;top:-.2rem;bottom:-.2rem;width:2px;background:var(--ink);text-decoration:none}

.phone{border:1px solid var(--rule);background:var(--panel-2);margin-top:.4rem}
.phone-hd{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:.5rem .7rem;border-bottom:1px solid var(--rule-soft)}
.bubble{margin:.7rem;padding:.7rem .85rem;background:var(--oxide-soft);
  border:1px solid var(--oxide);font-size:.8125rem;line-height:1.55;white-space:pre-line;color:var(--ink)}
.bp-note{font-size:.75rem;color:var(--ink-3);margin-top:.7rem}

.bp-fixes{padding:1.1rem;border-top:1px solid var(--rule)}
.fix{display:grid;grid-template-columns:5.2rem 1fr auto;gap:.6rem 1rem;
  padding:.6rem 0;border-bottom:1px solid var(--rule-soft);align-items:center}
.fix .st{font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:.22rem .35rem;text-align:center;border:1px solid currentColor}
.st.done{color:var(--clear);background:var(--clear-soft)}
.st.doing{color:var(--amber);background:var(--amber-soft)}
.st.open{color:var(--ink-3);background:var(--panel-2)}
.st.blocked{color:var(--oxide);background:var(--oxide-soft)}
.fix .t{font-size:.9375rem} .fix .t small{display:block;font-size:.75rem;color:var(--ink-3)}
.fix .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:.9375rem;text-align:right;white-space:nowrap}

.firewall{border:1px solid var(--rule)}
.fw{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
@media(max-width:46rem){.fw{grid-template-columns:1fr}}
.fw > div{background:var(--panel);padding:.7rem .9rem;font-size:.875rem}
.fw .bp{color:var(--ink-2)} .fw .cr{background:var(--oxide-soft)}
.fw-hd > div{background:var(--ink);color:var(--paper);font-weight:700;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase}
.fw-hd .cr{background:var(--oxide);color:#fff}

/* ============================ progress rail ============================ */
.rail{height:2px;background:var(--rule-soft);position:relative;overflow:hidden}
.rail i{position:absolute;inset:0 auto 0 0;background:var(--oxide);
  transition:width .45s cubic-bezier(.22,.61,.36,1)}

/* ============================ number motion ============================ */
.tick{transition:color .25s ease}
.tick.hot{color:var(--oxide)}

/* the email filling itself in */
.mail-bd .fill{transition:background-color .35s ease,color .35s ease}
.mail-bd .fill.pending{background:var(--rule-soft);color:transparent;
  border-radius:1px;user-select:none}
.mail-bd .fill.flash{animation:flash .7s ease}
@keyframes flash{
  0%{background:var(--oxide);color:#fff}
  60%{background:var(--oxide);color:#fff}
  100%{background:var(--oxide-soft);color:var(--oxide)}
}

/* ============================ micro-polish ============================ */
.hit{transition:background-color .15s ease,transform .15s ease}
.hit:active{transform:scale(.995)}
.tab{transition:background-color .15s ease,color .15s ease}
.bp-m{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.fix,.pc-row{transition:background-color .2s ease}
.pc-row:hover{background:var(--panel-2)}
.stat .v{transition:opacity .2s ease}
.bp-num{transition:color .3s ease}

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

/* ============================ click cues ============================ */
/* One per stage, six pulses, then silent. Dismissed for good once used —
   an affordance hint, not a nag. */
:root{ --cue: rgba(166,58,32,.22); --cue-edge: rgba(166,58,32,.55); }
@media (prefers-color-scheme: dark){
  :root{ --cue: rgba(214,96,63,.26); --cue-edge: rgba(214,96,63,.6); }
}
:root[data-theme="dark"]{ --cue: rgba(214,96,63,.26); --cue-edge: rgba(214,96,63,.6); }
:root[data-theme="light"]{ --cue: rgba(166,58,32,.22); --cue-edge: rgba(166,58,32,.55); }

@keyframes cuePulse{
  0%   { box-shadow:0 0 0 0 var(--cue-edge), 0 0 0 0 var(--cue); }
  55%  { box-shadow:0 0 0 3px transparent,   0 0 0 9px transparent; }
  100% { box-shadow:0 0 0 0 transparent,     0 0 0 0 transparent; }
}
.cue{ animation:cuePulse 2.2s ease-out 6; animation-delay:.7s; border-radius:1px; }

.hint{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;
  color:var(--oxide);font-weight:600}
.hint::before{content:'↳';font-family:var(--mono);opacity:.75}

@media (prefers-reduced-motion: reduce){
  .cue{ animation:none; box-shadow:0 0 0 2px var(--cue-edge); }
}

/* ============================ narrow screens ============================ */
/* Seven tabs wrapping turns the sticky nav into a wall on a phone; the
   three-column detail rows leave ~135px for a full sentence. Both fixed here. */

@media (max-width: 52rem){
  .nav .wrap{gap:.55rem}
  .tabs{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:.15rem}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto}
  .stage{padding:2rem 0 3rem}
  .stage-foot{flex-direction:column;align-items:stretch;gap:.75rem}
  .foot-nav{justify-content:space-between}
}

@media (max-width: 46rem){
  /* the firewall stacks — restore which column each cell belonged to */
  .fw-hd{display:none}
  .fw > div::before{display:block;font-size:.625rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;margin-bottom:.25rem;opacity:.65}
  .fw > .bp::before{content:'Blueprint — $199/mo'}
  .fw > .cr::before{content:'Crunchit — by application'}
}

@media (max-width: 36rem){
  .wrap{padding:0 1.1rem}
  .brand em{display:none}
  .tab .tn{display:none}

  /* detail rows: badge + amount on one line, the prose full width beneath */
  .pc-row{grid-template-columns:auto 1fr;gap:.45rem .7rem}
  .pc-row .tier {grid-row:1;grid-column:1}
  .pc-row .money{grid-row:1;grid-column:2;text-align:right;font-size:1rem}
  .pc-row > div {grid-row:2;grid-column:1/-1}

  .fix{grid-template-columns:auto 1fr;gap:.4rem .7rem}
  .fix .st{grid-row:1;grid-column:1}
  .fix .v {grid-row:1;grid-column:2;text-align:right}
  .fix .t {grid-row:2;grid-column:1/-1}

  .bp-body > *{padding:1rem .9rem}
  .bp-num{font-size:2.8rem}
  .stage-head{margin-bottom:1.4rem}
  .mail-bd{padding:1rem;font-size:.875rem}
  .modal-bar{gap:.5rem}
  .modal-bar .label{width:100%}
  .hint{font-size:.75rem}
}