/* Design tokens: every colour, radius and space is defined once here. Component rules below use only var(--token). */
:root{
  color-scheme: light;
  /* neutrals */
  --bg:#f4f5f7; --panel:#ffffff; --panel-2:#f8f9fb; --line:#e2e5ea; --line-strong:#c9ced6; --text:#171b22; --muted:#566070; --faint:#66707f; --on-dark:#ffffff; --ink:#171b22; --ink-hover:#2b3240;
  /* semantic colours: each carries exactly one meaning */
  --belief:#1b57c2; --belief-bg:#e7effc; --belief-line:#aac3ee;      /* what the agent believes */
  --world:#0f6b46;  --world-bg:#e2f3ea;  --world-line:#a9d6bf;       /* what the World confirms */
  --unsure:#7a5000; --unsure-bg:#fcefcf; --unsure-line:#e6cd8f;      /* uncertainty: unknown outcome, blind, inconclusive */
  --bad:#a4251c;    --bad-bg:#fde6e3;    --bad-line:#eab4ae;         /* violations and stale actors only */
  /* scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --r1:6px; --r2:10px; --r3:99px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 6px 24px rgba(23,27,34,.14);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.45 var(--font);overflow-x:hidden;display:flex;flex-direction:column}
h1{font-size:15px;margin:0;font-weight:650}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 var(--s2);font-weight:650}
.sub{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
h3.sub{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:var(--s3) 0 var(--s1);white-space:normal}
.skip{position:absolute;left:-999px} .skip:focus{left:var(--s2);top:var(--s2);background:var(--panel);padding:var(--s2);z-index:50}
.mono{font-family:var(--mono)} .muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12px}
.top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);background:var(--panel);border-bottom:1px solid var(--line);flex:none}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,var(--belief) 50%,var(--world) 50%);flex:none}
.top-right{display:flex;gap:10px;align-items:center;flex:none}
.badge{font-size:12px;padding:3px 9px;border-radius:var(--r3);border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);font-weight:600}
.badge.live{color:var(--world);background:var(--world-bg);border-color:var(--world-line)}
.badge.demo{color:var(--unsure);background:var(--unsure-bg);border-color:var(--unsure-line)}
.app{flex:1;min-height:0;display:grid;grid-template-columns:252px minmax(0,1fr) 322px;gap:var(--s3);padding:var(--s3) var(--s4)}
.col{display:flex;flex-direction:column;gap:var(--s3);min-height:0;min-width:0;overflow-y:auto}
.col.center{overflow-y:auto;scroll-behavior:smooth}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) 14px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:6px}
.panel-head h2{margin:0}
.empty{color:var(--muted);padding:var(--s3) var(--s1);font-size:13px}
.err-text,.bad-text{color:var(--bad);font-weight:600}

/* controls */
.btn{font:inherit;font-weight:600;font-size:13px;padding:6px var(--s3);border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s}
.btn:hover{background:var(--panel-2)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--ink);color:var(--on-dark);border-color:var(--ink)} .btn.primary:hover{background:var(--ink-hover)}
.btn.ghost{border-color:transparent;color:var(--belief);background:transparent}
.btn.small{padding:3px var(--s2);font-size:12px} .ico{font-size:11px}
:is(.btn,select,input,.tab,.preset,.dot,.call,.fault,.pop-item,.tip):focus-visible{outline:2px solid var(--belief);outline-offset:2px}
select,input[type=number]{font:inherit;font-size:13px;padding:5px 7px;border:1px solid var(--line-strong);border-radius:7px;background:var(--panel);color:var(--text)}
label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:var(--s2) 0;align-items:flex-end}
.switch{flex-direction:row;align-items:center;gap:var(--s2);color:var(--text);font-size:13px;margin:10px 0;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{flex:none;width:30px;height:18px;border-radius:var(--r3);background:var(--line-strong);position:relative;transition:background .15s}
.switch .track::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--panel);transition:transform .15s}
.switch input:checked + .track{background:var(--belief)} .switch input:checked + .track::after{transform:translateX(12px)}
.switch input:focus-visible + .track{outline:2px solid var(--belief);outline-offset:2px}
.tip{display:inline-flex;width:15px;height:15px;border-radius:50%;border:1px solid var(--line-strong);color:var(--muted);font-size:10px;font-weight:700;align-items:center;justify-content:center;margin-left:var(--s1);cursor:help;vertical-align:1px;text-transform:none;letter-spacing:0;font-family:var(--font)}
.tooltip{position:fixed;z-index:60;max-width:280px;background:var(--ink);color:var(--on-dark);font-size:12px;line-height:1.4;padding:var(--s2) 10px;border-radius:8px;pointer-events:none}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:var(--on-dark);padding:var(--s2) 14px;border-radius:9px;font-size:13px;z-index:70;max-width:90vw}
.pill{display:inline-flex;align-items:center;gap:4px;padding:1px var(--s2);border-radius:var(--r3);font-size:12px;font-weight:600;white-space:nowrap;background:var(--panel-2);color:var(--muted);border:1px solid transparent}
.pill.belief{background:var(--belief-bg);color:var(--belief)} .pill.world{background:var(--world-bg);color:var(--world)}
.pill.unsure{background:var(--unsure-bg);color:var(--unsure)} .pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.neutral{background:var(--panel-2);color:var(--muted)}
.spin{display:inline-block;width:11px;height:11px;border:2px solid var(--line-strong);border-top-color:var(--belief);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{display:grid;gap:var(--s2);padding:var(--s2) 0}
.sk-line{height:12px;border-radius:var(--r1);background:linear-gradient(90deg,var(--panel-2),var(--line),var(--panel-2));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.callout{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s3);font-size:13px;margin:var(--s2) 0}
.callout.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-4px 0 var(--s2)}
.tab{font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:6px var(--s2);cursor:pointer}
.tab[aria-selected=true]{color:var(--text);border-bottom-color:var(--ink)}

/* policy panel */
.presets{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s2)}
.preset{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);border-radius:9px;padding:var(--s2) 10px;display:grid;grid-template-columns:34px 1fr;gap:2px var(--s2);align-items:baseline;transition:border-color .15s,background .15s}
.preset:hover{background:var(--panel-2)} .preset[aria-checked=true]{border-color:var(--belief);background:var(--belief-bg)}
.preset b{font-size:13px} .preset span{font-size:12px;color:var(--muted);line-height:1.3} .preset.minor{padding:6px 10px}
.preset:focus-visible{outline:2px solid var(--belief);outline-offset:2px}
details>summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;margin:6px 0}
.knobs{display:grid;gap:var(--s2);margin-top:6px} .knob{flex-direction:row;justify-content:space-between;align-items:center;color:var(--text)}
.knob select,.knob input[type=number]{width:122px}
.meter{margin-top:var(--s3);padding:10px var(--s3);border:1px solid var(--line);border-radius:var(--r2);background:var(--panel-2)}
.mval{font-weight:700;font-size:15px} .mval.bad{color:var(--bad)} .mval.world{color:var(--world)} .mval.unsure{color:var(--unsure)}

.l4w-note{margin:6px 2px 0;line-height:1.4}
.ev-caption{flex-basis:100%;font-size:13px;min-height:20px;padding:4px 2px 0;color:var(--text)}

/* fault menu parameters */
.pop-param{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0;border-radius:var(--r1)}
.pop-param .pop-item{width:auto;flex:0 0 auto} .pop-param.on{background:var(--unsure-bg)} .pop-param.on .pop-item{color:var(--unsure);font-weight:600;background:none}
.pop-num{width:72px} .pop-num[aria-invalid=true]{border-color:var(--bad)}
.pop-hint{flex-basis:100%;padding:0 6px 4px}
.popover{max-height:calc(100vh - 16px);overflow-y:auto;min-width:330px}

/* intro and scenario */
.intro{flex:none;padding:var(--s5) var(--s4) var(--s4)}
.intro[hidden]{display:none}
body.welcoming .app{display:none} body.welcoming #about{visibility:hidden}
body.welcoming{overflow:auto}
.welcome{max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5) 28px;box-shadow:var(--shadow)}
.w-kicker{margin:0 0 var(--s1);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.w-title{font-size:26px;line-height:1.2;text-transform:none;letter-spacing:0;color:var(--text);margin:0 0 var(--s3);font-weight:750}
.w-lead{font-size:17px;line-height:1.55;margin:0 0 var(--s4);max-width:62ch}
.w-flow{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.wf-step{display:flex;flex-direction:column;gap:2px;border:1px solid var(--world-line);background:var(--world-bg);border-radius:var(--r1);padding:10px var(--s3);font-size:13px}
.wf-step b{color:var(--world)}
.wf-icon{width:28px;height:28px;border-radius:50%;background:var(--panel);border:1px solid var(--world-line);color:var(--world);display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:4px}
.w-sub{margin:0 0 var(--s2);font-size:14px;font-weight:600}
.w-risks{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.wr{display:flex;flex-direction:column;gap:2px;border-radius:var(--r1);padding:10px var(--s3);font-size:13px;border:1px solid var(--line)}
.wr.lose{background:var(--unsure-bg);border-color:var(--unsure-line)} .wr.lose b{color:var(--unsure)}
.wr.repeat{background:var(--bad-bg);border-color:var(--bad-line)} .wr.repeat b{color:var(--bad)}
.wr.remember{background:var(--belief-bg);border-color:var(--belief-line)} .wr.remember b{color:var(--belief)}
#welcome-start{font-size:15px;padding:10px 20px}
.w-note{margin:var(--s3) 0 0}
.scenario p{margin:0 0 6px;font-size:12.5px;line-height:1.45}
.sc-steps{margin:0 0 var(--s2);padding-left:18px;font-size:12.5px;line-height:1.45} .sc-steps li{margin:2px 0}
.sc-tickets{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;gap:3px}
.sc-row{display:grid;grid-template-columns:26px 1fr auto;gap:6px;align-items:center;font-size:12.5px}
.sc-goal{border-top:1px solid var(--line);padding-top:6px}
.sc-terms{margin:0 0 var(--s2)} .sc-terms summary{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);cursor:pointer}
.sc-terms dl{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px var(--s2);font-size:12px;line-height:1.4}
.sc-terms dt{font-weight:650} .sc-terms dd{margin:0;color:var(--muted)}

/* progressive disclosure (body.guided): panels appear as the story reaches them */
body.guided:not(.g-inv) .col.right{display:none}
body.guided:not(.g-inv) .app{grid-template-columns:252px minmax(0,1fr)}
body.guided:not(.g-all) #score, body.guided:not(.g-all) #tabs{display:none}
body.guided:not(.g-policy) #policy{display:none}
body.guided:not(.g-hero) #hero{display:none}
.concept{margin:var(--s2) 0 0;font-size:13px;line-height:1.45;padding:6px 10px;border-radius:var(--r1);background:var(--belief-bg);border:1px solid var(--belief-line)}
.concept-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:0 6px;border-radius:4px;background:var(--belief);color:var(--on-dark)}
.chap-l{font-size:10.5px;color:var(--faint)}

/* reliability story */
.story{padding:10px 14px}
.story-head{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap}
.story-head .rail{order:9;flex:1 1 100%} .story-head .story-title{flex:1 1 0;min-width:0;font-size:13.5px} .story-head > .btn{margin-left:auto}
.story-head h2{margin:0}
.rail{display:flex;gap:var(--s1);list-style:none;margin:0;padding:0;flex:1;min-width:0;flex-wrap:wrap}
.chap{display:flex;align-items:center;gap:6px;padding:2px var(--s2);border-radius:var(--r3);border:1px solid transparent}
.chap.on{border-color:var(--line-strong);background:var(--panel-2)}
.chap-name{font-size:12px;font-weight:700;color:var(--muted)} .chap.on .chap-name{color:var(--text)}
.chap-dots{display:flex;gap:3px}
.beat{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--panel);padding:0;cursor:pointer}
.beat.break{border-radius:3px} .beat.search{border-radius:2px;transform:rotate(45deg) scale(.85)}
.beat.done{background:var(--muted);border-color:var(--muted)}
.beat.cur{outline:2px solid var(--ink);outline-offset:1px}
.beat:focus-visible{outline:2px solid var(--belief);outline-offset:2px}
.story-body{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;margin-top:6px;flex-wrap:wrap}
.story-text{flex:1 1 320px;min-width:0;margin:0;font-size:13.5px;color:var(--text)}
.story-title{font-size:13.5px}
.story-act{flex:0 1 auto;display:flex;justify-content:flex-end}
.story-run{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.story-next{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:4px;border:1px solid var(--line-strong);color:var(--muted)}
.tag.break{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)} .tag.fix{color:var(--world);border-color:var(--world-line);background:var(--world-bg)}
.tag.search{color:var(--unsure);border-color:var(--unsure-line);background:var(--unsure-bg)}
.story-collapsed{display:flex;gap:var(--s3);align-items:center}

/* what happened? */
.what{padding:var(--s3) var(--s4)}
.what-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1);flex-wrap:wrap}
.what-title{font-size:17px;text-transform:none;letter-spacing:0;color:var(--text);margin:0;font-weight:700}
.what-head .btn{margin-left:auto}
.what-lead{font-size:15px;line-height:1.5;margin:var(--s1) 0 10px;font-weight:500;max-width:84ch}
.what-lead.bad{border-left:3px solid var(--bad);padding-left:10px} .what-lead.world{border-left:3px solid var(--world);padding-left:10px}
.what-intro p{margin:0 0 var(--s2);max-width:80ch}
.what-goal{margin:0 0 var(--s2);font-size:12.5px;color:var(--muted)} .what-goal b{color:var(--text);font-weight:650}
.what-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.wcard{border:1px solid var(--line);border-radius:var(--r1);padding:var(--s2) 10px;background:var(--panel-2);min-width:0}
.wcard h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 var(--s1);font-weight:700}
.wcard p{margin:0 0 3px;font-size:12.5px;line-height:1.42} .wcard p:last-of-type{margin-bottom:0} .wcard .btn{margin-top:6px}
.wcard.belief{background:var(--belief-bg);border-color:var(--belief-line)} .wcard.belief h3{color:var(--belief)}
.wcard.world{background:var(--world-bg);border-color:var(--world-line)} .wcard.world h3{color:var(--world)}
.wcard.fault{background:var(--unsure-bg);border-color:var(--unsure-line)} .wcard.fault h3{color:var(--unsure)} .wcard.fault.none{background:var(--panel-2);border-color:var(--line)} .wcard.fault.none h3{color:var(--muted)}
.wcard.impact.bad{background:var(--bad-bg);border-color:var(--bad-line)} .wcard.impact.bad h3{color:var(--bad)}
.wcard.impact.world{background:var(--panel);border-color:var(--world-line)} .wcard.impact.world h3{color:var(--world)}
.wcard.why{background:var(--panel)}
.what-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s2);margin-top:var(--s2)}
.what-foot > :only-child{grid-column:1/-1}
.wn-why{border:1px solid var(--line);border-radius:var(--r1);padding:var(--s2) 10px;background:var(--panel)}
.what-next{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r1);border:1.5px solid var(--ink);background:var(--panel);flex-wrap:wrap}
.wn-text{flex:1 1 220px;min-width:0}
:is(.what-next,.wn-why) h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 2px;font-weight:700}
:is(.what-next,.wn-why) p{margin:0;font-size:12.5px;line-height:1.42}
.small-pill{font-size:11px;padding:0 6px}
.unsure-text{color:var(--unsure);font-weight:600}

/* timeline panel */
.tl-panel{flex:0 0 auto;display:flex;flex-direction:column}
.runstate{font-size:12px;color:var(--muted)}
.tl-controls{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-bottom:6px}
.scrub{display:flex;gap:6px;align-items:center;flex:1;min-width:200px}
.scrub input[type=range]{flex:1;accent-color:var(--belief);min-width:80px}
.zoom{display:flex;gap:var(--s1)}
.faults{display:flex;gap:6px;flex-wrap:wrap;min-height:26px;align-items:center;margin-bottom:var(--s1)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:2px var(--s2);border-radius:var(--r3);border:1px solid var(--line-strong);background:var(--panel);white-space:nowrap}
.chip.fault{background:var(--unsure-bg);border-color:var(--unsure-line);color:var(--unsure);font-weight:600}
.chip.fault button{all:unset;cursor:pointer;padding:0 2px;font-size:14px;line-height:1}
.chip.fault button:focus-visible{outline:2px solid var(--belief)}
.diff{min-height:0;margin-bottom:var(--s1);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.diff:empty{display:none}
.timeline{position:relative;width:100%;min-height:150px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r1);background:var(--panel)}
.tl-foot{padding-top:var(--s1)}
.tl{display:block;cursor:grab;user-select:none} .tl:active{cursor:grabbing}

/* timeline svg (colours only via tokens) */
.lane-bg{fill:var(--panel)} .lane-bg.belief{fill:var(--belief-bg);opacity:.55} .lane-bg.world{fill:var(--world-bg);opacity:.55} .lane-bg.gap{fill:var(--panel-2)}
.lane-label{font-size:11px;font-weight:600;fill:var(--muted)} .lane-label.belief{fill:var(--belief)} .lane-label.world{fill:var(--world)}
.tick-line{stroke:var(--line);stroke-width:1} .tick-text{font-size:10px;fill:var(--faint)}
.hatch-bg.unsure{fill:var(--unsure-bg)} .hatch-line.unsure{stroke:var(--unsure);stroke-width:1.4;opacity:.7}
.hatch-bg.bad{fill:var(--bad-bg)} .hatch-line.bad{stroke:var(--bad);stroke-width:1.4;opacity:.7}
.band text{font-size:10.5px;font-weight:600;pointer-events:none}
.band.lease rect{fill:var(--ink);rx:3} .band.lease text{fill:var(--on-dark)}
.band.believed rect{fill:url(#hatch-bad);stroke:var(--bad)} .band.believed text{fill:var(--bad)}
.band.owners rect{fill:url(#hatch-bad);opacity:.5;stroke:var(--bad);stroke-dasharray:3 3} .band.owners text{fill:var(--bad)}
.band.pause rect{fill:url(#hatch-unsure);stroke:var(--unsure)} .band.pause text{fill:var(--unsure)}
.band.down rect{fill:var(--line-strong)}
.band.gap rect{rx:3} .band.gap.unsure rect{fill:url(#hatch-unsure);stroke:var(--unsure)} .band.gap.bad rect{fill:url(#hatch-bad);stroke:var(--bad)}
.band.gap.unsure text{fill:var(--unsure)} .band.gap.bad text{fill:var(--bad)}
.conn line{stroke:var(--line-strong);stroke-dasharray:2 3}
.call rect{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:1.2;cursor:pointer}
.call:hover rect,.call.selected rect{stroke:var(--ink);stroke-width:2}
.call.mailbox rect{stroke-dasharray:none} .call.journal rect{fill:var(--panel)}
.call.unknown rect{fill:url(#hatch-unsure);stroke:var(--unsure);stroke-width:1.6}
.call.lost rect{fill:var(--panel);stroke:var(--unsure);stroke-dasharray:4 3}
.call.ghost rect{fill:var(--panel);stroke:var(--bad);stroke-dasharray:1.5 3;stroke-width:1.6}
.call.faulted rect{stroke-width:2}
.call-label{font-size:10.5px;fill:var(--text);pointer-events:none;font-weight:600} .call-truth{font-size:9.5px;font-weight:600;pointer-events:none}
.call-truth.yes{fill:var(--world)} .call-truth.no{fill:var(--muted)}
.fault circle{fill:var(--unsure-bg);stroke:var(--unsure);stroke-width:1.5;cursor:pointer} .fault text{font-size:9px;font-weight:700;fill:var(--unsure);pointer-events:none}
.mark path{fill:var(--panel);stroke:var(--muted);stroke-width:1.5}
.mark text{font-size:10.5px;font-weight:700;fill:var(--bad);pointer-events:none}
.mark.w-ok path{fill:var(--world);stroke:var(--world)} .mark.w-bad path{fill:var(--bad);stroke:var(--bad)}
.mark.w-replay path{fill:var(--panel);stroke:var(--world);stroke-width:2} .mark.w-reject path,.mark.reject path{stroke:var(--muted)}
.mark.journal-done path{fill:var(--muted)} .mark.journal-intent path{fill:var(--panel)}
.mark.belief path{fill:var(--belief);stroke:var(--belief)}
.mark.belief.unsure path{stroke:var(--unsure);stroke-width:2.5} .mark.belief.bad path{stroke:var(--bad);stroke-width:2.5} .mark.belief.blind path{stroke:var(--unsure);stroke-width:2.5}
.mark.violation path{fill:none;stroke:var(--bad);stroke-width:3;stroke-linecap:round;cursor:pointer}
.cursor-line{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 3} .cursor-head{fill:var(--ink)}
.future{opacity:.16}
.enter{animation:pop .28s ease-out both} @keyframes pop{from{opacity:0}to{opacity:1}}
.mark.violation.enter path{animation:thump .5s ease-out}
@keyframes thump{0%{stroke-width:1}50%{stroke-width:7}100%{stroke-width:3}}

/* popover (fault menu) */
.popover{position:fixed;z-index:40;width:320px;max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r2);box-shadow:var(--shadow);padding:var(--s2)}
.pop-head{padding:var(--s1) 6px var(--s2);border-bottom:1px solid var(--line);margin-bottom:6px}
.pop-title{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;padding:6px 6px 2px}
.pop-item{display:block;width:100%;text-align:left;font:inherit;font-size:13px;border:0;background:none;padding:6px;border-radius:var(--r1);cursor:pointer;color:var(--text)}
.pop-item:hover,.pop-item:focus-visible{background:var(--belief-bg)} .pop-item.on{background:var(--unsure-bg);color:var(--unsure);font-weight:600}
.pop-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}

/* hero: belief versus reality */
.hero{flex:none;display:flex;flex-direction:column}
.col.center > .panel{flex:none}
.hgrid{overflow:auto;flex:1;min-height:0;display:grid;grid-auto-rows:min-content;gap:0}
.hrow{display:grid;grid-template-columns:128px minmax(190px,1.3fr) 92px minmax(140px,1fr) minmax(170px,1.2fr);gap:var(--s2);align-items:center;padding:5px var(--s2);border-bottom:1px solid var(--panel-2)}
.hhead{position:sticky;top:0;background:var(--panel);z-index:1;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;border-bottom:1px solid var(--line)}
.hhead .c1{color:var(--belief)} .hhead .c4{color:var(--world)}
.hrow.diverged{background:var(--unsure-bg)} .hrow.harmed{background:var(--bad-bg);box-shadow:inset 3px 0 0 var(--bad)}
.hc{min-width:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.stamp{font-size:11px;font-weight:700;padding:0 6px;border-radius:var(--r3);border:1px solid var(--line-strong);color:var(--muted)}
.stamp.unsure{background:var(--unsure-bg);border-color:var(--unsure-line);color:var(--unsure)} .stamp.world{background:var(--world-bg);border-color:var(--world-line);color:var(--world)}
.gapbar{font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r1);border:1px dashed currentColor}
.gapbar.unsure{color:var(--unsure);background:repeating-linear-gradient(135deg,var(--unsure-bg) 0 5px,var(--panel) 5px 10px)}
.gapbar.bad{color:var(--bad);background:repeating-linear-gradient(135deg,var(--bad-bg) 0 5px,var(--panel) 5px 10px)}

/* invariants, metrics, tabs content */
.inv{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.inv li{border-radius:var(--r1);padding:3px 0} .inv li.violated{background:var(--bad-bg);padding:5px 6px;margin:0 -6px}
.inv-row{display:flex;justify-content:space-between;gap:var(--s2);align-items:flex-start} .inv-name{font-size:12px;font-weight:600}
.cause{margin-top:6px;padding-top:6px;border-top:1px dashed var(--bad-line);display:grid;gap:6px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.metric{border:1px solid var(--line);border-radius:var(--r1);padding:6px var(--s2);background:var(--panel-2);min-width:0} .metric .mval{font-size:14px}
.tabs-panel{flex:1 1 220px;min-height:200px;display:flex;flex-direction:column}
.tabbody{overflow:auto;flex:1;min-height:0;padding-right:2px}
table{border-collapse:collapse;width:100%;font-size:12px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:3px 6px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
td{padding:3px 6px;border-bottom:1px solid var(--panel-2)} tr.bad td{background:var(--bad-bg);color:var(--bad);font-weight:600}
td.key{max-width:96px;overflow:hidden;text-overflow:ellipsis}
.scroll{max-height:150px;overflow:auto}
.counters{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.counter{font-weight:700;font-size:12px;padding:2px var(--s2);border-radius:var(--r1)} .counter.world{background:var(--world-bg);color:var(--world)} .counter.bad{background:var(--bad-bg);color:var(--bad)}
.tape{display:flex;flex-wrap:wrap;gap:var(--s1)} .tape-cell{font-size:11px;font-family:var(--mono);border:1px solid var(--line-strong);padding:1px 6px;border-radius:var(--r1);background:var(--panel)} .tape-cell.done{background:var(--panel-2)}
.plain{margin:0;padding-left:18px} .plain li{margin:2px 0}
.gloss dt{font-weight:650;font-size:12px;margin-top:6px} .gloss dd{margin:0;color:var(--muted);font-size:12px}
.found{margin-top:var(--s2);font-size:13px}
.card{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) var(--s3);background:var(--panel-2);animation:pop .25s ease-out}
.card p{margin:4px 0} .card.bad{border-color:var(--bad-line);background:var(--bad-bg)} .card.ok{border-color:var(--world-line);background:var(--world-bg)} .card.warn{border-color:var(--unsure-line);background:var(--unsure-bg)}
.stair{margin-top:var(--s2);display:grid;gap:6px} .srow{display:grid;grid-template-columns:34px 1fr 76px;gap:var(--s2);align-items:center;font-size:12px}
.bar{height:14px;border-radius:5px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)} .fill{height:100%;transition:width .4s ease}
.fill.bad{background:var(--bad)} .fill.hold{background:repeating-linear-gradient(45deg,var(--world) 0 6px,var(--world-line) 6px 12px)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .cmp-list{list-style:none;margin:6px 0;padding:0;display:grid;gap:3px} .cmp-list li{display:flex;justify-content:space-between;gap:6px}

@media (max-width:1280px){ body.guided:not(.g-inv) .app{grid-template-columns:228px minmax(0,1fr)} .app{grid-template-columns:228px minmax(0,1fr) 292px;gap:10px;padding:10px var(--s3)} }
@media (max-width:1100px){
  body{overflow:auto;height:auto} html{height:auto}
  .app,body.guided:not(.g-inv) .app{grid-template-columns:232px minmax(0,1fr)} .col,.col.center{overflow:visible}
  .col.right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:start} .col.right .tabs-panel{grid-column:1/-1}
  .sub{display:none}
}
@media (max-width:1180px){ .what-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .what-foot{grid-template-columns:1fr} }
@media (max-width:760px){
  .intro{padding:var(--s3) var(--s2)} .welcome{padding:var(--s4)} .w-title{font-size:21px} .w-lead{font-size:15px} .w-flow,.w-risks{grid-template-columns:1fr}
  .top-right{flex-wrap:wrap;flex:1 1 auto;min-width:0;gap:6px} .top-right .btn{padding:3px 6px}
  .what-grid{grid-template-columns:1fr} .story-head .story-title{min-width:0;flex-basis:100%} .col.center{order:-1} .what-title{white-space:nowrap}
  .app,body.guided:not(.g-inv) .app{grid-template-columns:1fr;padding:var(--s2)} .col.right{grid-template-columns:1fr}
  .top{flex-wrap:wrap} .what-lead{font-size:14px} .story-act,.story-next{justify-content:flex-start}
  .timeline{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.inv-plain{font-size:13px;font-weight:650}