:root{
  --navy-900:#08182a; --navy-800:#0b2138; --navy-700:#102b46; --navy-600:#16395b;
  --cyan-500:#2aa8e0; --cyan-400:#43bdf2; --cyan-300:#7ed3f6;
  --ink:#13202c; --body:#3a4754; --muted:#5f6d7a; --line:#e3e8ee; /* muted darkened for WCAG AA (4.5:1) on the soft-grey heads */
  --bg:#ffffff; --bg-soft:#f5f8fb; --bg-soft2:#eef3f8;
  --eih:#d85a30; --cdm:#7f77dd; --uns:#1d9e75; --udl:#378add; --fdl:#ba7517; --ai:#d4537e;
  --maxw:1120px; --radius:12px;
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--body);background:var(--bg);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--cyan-500);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;font-weight:700;margin:1.8rem 0 .8rem}
h2{font-size:1.9rem} h3{font-size:1.35rem} h4{font-size:1.1rem}
p{margin:0 0 1.1rem}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:100;border-radius:6px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;flex-shrink:0}
.brand:hover{text-decoration:none}
.brand-logo{height:38px;width:auto}
/* two-line lockup: the logo art already says UMDA, so the text spells the name out instead of repeating it */
.brand-text{display:flex;flex-direction:column;font-weight:700;letter-spacing:.02em;font-size:.86rem;line-height:1.18;color:#fff}
.brand-text .brand-l2{color:#cdd9e5}
.site-nav{display:flex;gap:2px}
.site-nav a{color:#cdd9e5;padding:8px 12px;border-radius:8px;font-size:.93rem;font-weight:500;white-space:nowrap}
.site-nav a:hover{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}
.site-nav a.active{color:var(--navy-900);background:var(--cyan-400)}
/* the Simulation link is the site's flagship interactive: a standing outlined CTA, distinct from the active-page pill */
.site-nav a.nav-cta{border:1px solid rgba(67,189,242,.55);color:#fff}
.site-nav a.nav-cta:hover{background:rgba(67,189,242,.15)}
.site-nav a.nav-cta.active{background:var(--cyan-400);color:var(--navy-900);border-color:var(--cyan-400)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
/* ---- nav submenus: split control — the label navigates to the hub, the caret opens the group ---- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-caret{background:none;border:0;color:#cdd9e5;cursor:pointer;font-size:.74rem;line-height:1;padding:8px 8px 8px 3px;border-radius:6px}
.nav-caret:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-sub{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:225px;background:var(--navy-800);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;z-index:90;box-shadow:0 16px 36px -14px rgba(0,0,0,.6)}
/* invisible hover bridge over the 4px visual gap, so moving the mouse down into the menu never drops :hover */
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-item.open .nav-sub{display:block}
@media (hover:hover){.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{display:block}}
.nav-sub a{display:block;white-space:nowrap;border-left:3px solid transparent}
.nav-sub a.sub-active{background:rgba(67,189,242,.14);color:#fff;font-weight:700;border-left-color:var(--cyan-400)}
@media (max-width:1080px){
.nav-item{flex-wrap:wrap}
.nav-item>a{flex:1 1 auto}
.nav-caret{font-size:.85rem;padding:11px 16px;min-width:48px;text-align:center}
.nav-sub{position:static;width:100%;min-width:0;box-shadow:none;border:0;border-left:2px solid rgba(255,255,255,.16);border-radius:0;margin:0 0 4px 12px;padding:0 0 0 4px}
.nav-sub::before{content:none}
}
.hamburger,.hamburger::before,.hamburger::after{display:block;width:24px;height:2px;background:#fff;position:relative;transition:.2s}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0}
.hamburger::before{top:-7px}.hamburger::after{top:7px}

/* hero */
.hero{background:var(--navy-900) url('../img/Homepage_Background_Header_2.webp') center/cover no-repeat;color:#fff;position:relative}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,42,.55),rgba(8,24,42,.85))}
.hero-inner{position:relative;z-index:1;padding:96px 24px;max-width:var(--maxw)}
.hero-inner.has-art{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-text{min-width:0}
.hero-art{min-width:0}
.hero-art svg{display:block;width:100%;height:auto;max-width:480px;margin:0 auto}
/* hero viz: machine signals rise through the six-layer stack; AI returns a decision to the floor.
   Static state (and reduced motion) shows the full architecture; dots/decision/ack stay hidden. */
.hv-b{fill:rgba(255,255,255,.035);stroke:#2a4258;stroke-width:1.2}
.hv-lbl text{font:700 11px ui-monospace,Consolas,monospace;fill:#9fc4d6;letter-spacing:.05em}
.hv-mach{fill:#10263c;stroke:#3b5164;stroke-width:1.5}
.hv-win{fill:rgba(67,189,242,.55)}
.hv-floor{stroke:#24384c;stroke-width:2}
.hv-core{fill:#0b2138;stroke:#43bdf2;stroke-width:2}
.hv-corec{fill:#43bdf2}
.hv-ring{fill:none;stroke:#43bdf2;stroke-width:1.6;opacity:.25;transform-box:fill-box;transform-origin:center}
.hv-d,.hv-dec,.hv-ok{opacity:0}
.hv-ok{font:700 12px ui-monospace,Consolas,monospace;fill:#7fd0a8;text-anchor:middle}
@media (prefers-reduced-motion:no-preference){
  .hv-b1{animation:hvB1 9s linear infinite}
  .hv-b2{animation:hvB2 9s linear infinite}
  .hv-b3{animation:hvB3 9s linear infinite}
  .hv-b4{animation:hvB4 9s linear infinite}
  .hv-b5{animation:hvB5 9s linear infinite}
  .hv-b6{animation:hvB6 9s linear infinite}
  .hv-d1{animation:hvD1 9s linear infinite}
  .hv-d2{animation:hvD2 9s linear infinite}
  .hv-d3{animation:hvD3 9s linear infinite}
  .hv-ring{animation:hvRing 9s linear infinite}
  .hv-dec{animation:hvDec 9s linear infinite}
  .hv-hit{animation:hvHit 9s linear infinite}
  .hv-ok{animation:hvOk 9s linear infinite}
  @keyframes hvB1{0%,6%{stroke:#2a4258;fill:rgba(255,255,255,.035)}10%,16%{stroke:#43bdf2;fill:rgba(67,189,242,.10)}22%,100%{stroke:#2a4258;fill:rgba(255,255,255,.035)}}
  @keyframes hvB2{0%,10%{stroke:#2a4258;fill:rgba(255,255,255,.035)}14%,20%{stroke:#43bdf2;fill:rgba(67,189,242,.10)}26%,100%{stroke:#2a4258;fill:rgba(255,255,255,.035)}}
  @keyframes hvB3{0%,14%{stroke:#2a4258;fill:rgba(255,255,255,.035)}18%,24%{stroke:#43bdf2;fill:rgba(67,189,242,.10)}30%,100%{stroke:#2a4258;fill:rgba(255,255,255,.035)}}
  @keyframes hvB4{0%,18%{stroke:#2a4258;fill:rgba(255,255,255,.035)}22%,28%{stroke:#43bdf2;fill:rgba(67,189,242,.10)}34%,100%{stroke:#2a4258;fill:rgba(255,255,255,.035)}}
  @keyframes hvB5{0%,22%{stroke:#2a4258;fill:rgba(255,255,255,.035)}26%,32%{stroke:#43bdf2;fill:rgba(67,189,242,.10)}38%,100%{stroke:#2a4258;fill:rgba(255,255,255,.035)}}
  @keyframes hvB6{0%,26%{stroke:#2a4258;fill:rgba(255,255,255,.035)}30%,44%{stroke:#43bdf2;fill:rgba(67,189,242,.14)}52%,100%{stroke:#2a4258;fill:rgba(255,255,255,.035)}}
  @keyframes hvD1{0%,2%{transform:translateY(0);opacity:0}4%{opacity:1}22%{opacity:1;transform:translateY(-195px)}25%,100%{opacity:0;transform:translateY(-195px)}}
  @keyframes hvD2{0%,8%{transform:translateY(0);opacity:0}10%{opacity:1}28%{opacity:1;transform:translateY(-195px)}31%,100%{opacity:0;transform:translateY(-195px)}}
  @keyframes hvD3{0%,14%{transform:translateY(0);opacity:0}16%{opacity:1}34%{opacity:1;transform:translateY(-195px)}37%,100%{opacity:0;transform:translateY(-195px)}}
  @keyframes hvRing{0%,36%{transform:scale(1);opacity:.25}44%{opacity:.7}52%{transform:scale(2.1);opacity:0}53%,100%{transform:scale(1);opacity:0}}
  @keyframes hvDec{0%,52%{transform:translateY(0);opacity:0}55%{opacity:1}68%{opacity:1;transform:translateY(187px)}72%,100%{opacity:0;transform:translateY(187px)}}
  @keyframes hvHit{0%,66%{stroke:#3b5164;stroke-width:1.5}70%,84%{stroke:#7fd0f5;stroke-width:2.5}92%,100%{stroke:#3b5164;stroke-width:1.5}}
  @keyframes hvOk{0%,68%{opacity:0}72%,86%{opacity:1}94%,100%{opacity:0}}
}
/* hidden hero easter egg: shockwave + packet burst when the core is clicked */
@keyframes eggWave{0%{transform:scale(1);opacity:.85}100%{transform:scale(10.5);opacity:0}}
.egg-wave{transform-box:fill-box;transform-origin:center;animation:eggWave 1.5s cubic-bezier(.2,.6,.2,1) forwards;pointer-events:none}
.egg-pk{filter:drop-shadow(0 0 4px #43bdf2);pointer-events:none}
.intro-art{display:block;width:100%;height:auto;max-width:500px;margin:0 auto}

/* home "signal to decision" step-by-step reveal (builds once, then stays; default = fully visible) */
.sd2-step{opacity:1}
.sd2.anim .sd2-step{opacity:0;transform:translateY(10px)}
.sd2.anim.play .sd2-step{opacity:1;transform:translateY(0);transition:opacity .55s ease,transform .55s ease}
.sd2.anim.play .s1{transition-delay:.05s}
.sd2.anim.play .s2{transition-delay:.85s}
.sd2.anim.play .s3{transition-delay:1.65s}
.sd2.anim.play .s4{transition-delay:2.45s}
.sd2.anim.play .s5{transition-delay:3.25s}
.sd2.anim.play .s6{transition-delay:4.05s}
.sd2.anim.play .s7{transition-delay:4.85s}
.sd2.anim.play .s8{transition-delay:5.65s}
/* after the reveal, the signal keeps re-running the gauntlet: quiet proof the loop never stops */
.sd2-run{opacity:0}
.sd2.anim.play .sd2-run{animation:sd2run 7s linear infinite 6.4s}
@keyframes sd2run{0%{transform:translateY(0);opacity:0}4%{opacity:.9}88%{opacity:.9;transform:translateY(444px)}94%,100%{opacity:0;transform:translateY(444px)}}

/* About hero (bridge) */
.about-hero{display:grid;grid-template-columns:1.06fr .94fr;gap:46px;align-items:center}
.about-hero-text{min-width:0}
.about-hero-art{min-width:0}
.about-hero-art svg{display:block;width:100%;height:auto;max-width:480px;margin:0 auto}
.ab-pk{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ab-pk-t1{animation:abT 3s ease-in-out infinite}
  .ab-pk-t2{animation:abT 3s ease-in-out infinite 1.5s}
  .ab-pk-b1{animation:abB 3s ease-in-out infinite .8s}
  .ab-pk-b2{animation:abB 3s ease-in-out infinite 2.3s}
}
@keyframes abT{0%{transform:translate(0,0);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate(200px,0);opacity:0}}
@keyframes abB{0%{transform:translate(0,0);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate(-200px,0);opacity:0}}
@media (max-width:820px){.about-hero{grid-template-columns:1fr;gap:30px}.about-hero-art{max-width:420px}}

/* value card icons */
.card-ico{width:32px;height:32px;display:block;margin-bottom:14px;fill:none;stroke:#1583c0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* problem-card treatment (the painful approaches) */
.card.problem{border-left:4px solid #BA7517;background:#fdf6ec}
.card.problem .card-label{color:#9a5b00}
.callout.warn{border-left-color:#BA7517;background:#fdf6ec}

/* About creator + book card */
.creator{display:grid;grid-template-columns:1fr 220px;gap:40px;align-items:center;max-width:900px;margin:0 auto}
.creator-text{min-width:0}
.creator-name{font-size:1.5rem;font-weight:700;color:var(--ink);margin:0}
.creator-role{color:var(--muted);font-size:.9rem;margin:.25em 0 1.1em}
.creator-text p{margin:0 0 1em}
.creator-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.creator-book{display:flex;justify-content:center}
.book-link{display:block;width:100%;max-width:220px;border-radius:8px;line-height:0;box-shadow:0 16px 34px rgba(8,24,42,.3);transition:transform .15s,box-shadow .15s}
.book-link:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(8,24,42,.38)}
.book-link img{display:block;width:100%;height:auto;border-radius:8px}
@media (max-width:680px){.creator{grid-template-columns:1fr;gap:28px}.creator-book{justify-content:flex-start}}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;color:var(--cyan-300);margin:0 0 14px;font-weight:600}
.hero-title{color:#fff;font-size:3rem;margin:0 0 16px;max-width:18ch}
.hero-sub{font-size:1.25rem;color:#c6d3df;max-width:60ch;margin:0 0 28px}

/* inner-page header with lead diagram */
.page-head{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.page-head-inner{display:flex;align-items:center;gap:48px;padding:52px 24px}
.page-head-text{flex:1;min-width:0}
.page-head .page-title{margin:0 0 14px}
.eyebrow-dark{color:#16719e} /* AA on light backgrounds; the plain .eyebrow (cyan-300) stays for dark heroes */
.article-head .eyebrow{color:#16719e} /* article headers sit on the soft-grey band */
.lede{font-size:1.25rem;color:var(--muted);margin:0;max-width:50ch;line-height:1.6}
.page-head-media{flex:0 0 340px;max-width:40%}
.page-head-media img{display:block;width:100%;height:auto}
.page-banner{line-height:0}
.page-banner img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover}

/* buttons */
.btn{display:inline-block;padding:13px 26px;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid transparent}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--cyan-500);color:#04223a;border-color:var(--cyan-500)}
.btn-primary:hover{background:var(--cyan-400);border-color:var(--cyan-400)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:#fff}

/* prose (inner pages) */
.prose{max-width:820px;padding:56px 24px 72px}
.prose code{overflow-wrap:anywhere} /* long UNS topic paths (Acme/Plant1/…/Temperature) must break on phones instead of forcing sideways scroll */
.prose a{color:#1272a8} /* link cyan darkened to AA (≥4.5:1) against the white reading column */
.prose a:hover{color:#0d5b87}
.page-title{font-size:2.4rem;margin:0 0 1.2rem}
.prose h2{margin-top:2.6rem} .prose h3{margin-top:1.8rem}
.prose ul{margin:0 0 1.2rem;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:1.5rem;margin:.45rem 0}
.prose ul li::before{content:"";position:absolute;left:.1rem;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--cyan-500)}
.prose ol{padding-left:1.3rem} .prose ol li{margin:.4rem 0}
.prose > h2:first-child,.prose > h3:first-child,.prose > .page-title:first-child{margin-top:0}
.prose img{border-radius:var(--radius)}

/* long-form article (whitepaper) */
.article-head{background:var(--bg-soft);border-bottom:1px solid var(--line);text-align:center}
.article-head .wrap{max-width:820px;padding:64px 24px 52px}
.article-title{font-size:2.6rem;margin:.2rem 0 .6rem}
.article-sub{font-size:1.25rem;color:var(--muted);margin:0 auto;max-width:62ch;line-height:1.6}
.article-meta{margin:20px 0 0;font-size:.95rem;color:var(--cyan-500);font-weight:600}
.article-byline{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.prose.article{font-size:1.08rem}
.prose.article > p:first-of-type{font-size:1.22rem;color:var(--ink);line-height:1.6}
.prose.article h3{font-size:1.5rem;margin-top:2.8rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.prose.article h4{font-size:1.16rem;margin-top:1.9rem}
.prose.article .byline{font-style:italic;color:var(--muted);border-left:3px solid var(--cyan-400);padding-left:16px;margin-top:6px}
.prose.article .btn{margin-top:8px}
.prose.article .endcap{text-align:center;margin:48px 0 0;padding-top:32px;border-top:1px solid var(--line)}

/* sections (full-width pages) */
.section{padding:72px 0}
.section-alt{background:var(--bg-soft)}
.section-navy{background:var(--navy-900);color:#c6d3df}
.section-head{max-width:720px;margin:0 auto 44px;text-align:center}
.section-head h2{margin:0 0 14px;font-size:2.1rem}
.section-head p{font-size:1.15rem;color:var(--muted);margin:0}
.section-navy .section-head p{color:#9fb1c2}

/* card grids */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Tools hub groups: the page is the complete catalog; labelled sections make the nav cross-listing read as deliberate */
.tools-group+.tools-group{margin-top:46px}
.tg-title{margin:0 0 6px;font-size:1.3rem}
.tg-sub{color:var(--muted);margin:0 0 18px;max-width:72ch}
@media (max-width:620px){.cards-2{grid-template-columns:1fr}}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(16,43,70,.10);border-color:#cdd9e5}
.card h3,.card h4{margin:0 0 8px;font-size:1.18rem}
.card p{margin:0;color:var(--body);font-size:1rem}
.card-top{border-top:4px solid var(--c,var(--cyan-500))}
.card-num{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;color:var(--cyan-500);background:var(--bg-soft2);width:42px;height:42px;border-radius:10px;margin-bottom:16px;letter-spacing:.02em}

/* link cards (navigation) */
.linkcard{display:block;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s}
.linkcard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(16,43,70,.10);border-color:var(--cyan-400);text-decoration:none}
.linkcard h2,.linkcard h3{margin:0 0 6px;color:var(--ink)}
.linkcard h2{font-size:1.18rem}
.linkcard p{margin:0;color:var(--muted);font-size:.98rem}
.linkcard .more{display:inline-block;margin-top:14px;color:var(--cyan-500);font-weight:600;font-size:.95rem}
/* card with several destinations: same look, but a <div> whose .more holds real links */
div.linkcard .more a{color:var(--cyan-500)}
div.linkcard .more a:hover{text-decoration:underline}
div.linkcard .more .sep{color:var(--muted);font-weight:400;margin:0 6px}
/* article tables (whitepapers): bordered, header-tinted; on phones the table itself scrolls sideways
   so the page body never does */
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.93rem;line-height:1.45}
.prose th{background:var(--bg-soft);color:var(--ink);text-align:left;font-weight:700}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;vertical-align:top}
@media (max-width:680px){
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose th,.prose td{min-width:132px}
}
/* whitepaper library: attribution line on a paper card + back link from a paper to the library */
.linkcard .wp-meta{margin-top:12px;font-size:.86rem;font-style:italic;color:var(--muted)}
.article-back{margin:0 0 14px}
.article-back a{font-size:.9rem;font-weight:600;color:var(--cyan-300, #7fd0f5)}
.article-back a:hover{text-decoration:underline}

/* feature checklist */
.checks{list-style:none;padding:0;margin:0 0 28px;display:inline-block;text-align:left}
.checks li{position:relative;padding-left:32px;margin:.6rem 0;font-size:1.05rem}
.checks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--cyan-400);font-weight:700}

/* CTA band */
.cta{background:var(--navy-900);color:#fff;text-align:center}
.cta .wrap{padding:72px 24px}
.cta h2{color:#fff;font-size:2rem;margin:0 0 14px;max-width:22ch;margin-left:auto;margin-right:auto}
.cta p{color:#bcccdb;max-width:54ch;margin:0 auto 26px;font-size:1.1rem}

/* helpers */
.measure{max-width:760px;margin-left:auto;margin-right:auto}
.measure h1{font-size:2.1rem;line-height:1.2;margin:0 0 .8rem}
.bullets{list-style:none;padding:0;margin:0 0 1.2rem}
.bullets li{position:relative;padding-left:1.6rem;margin:.55rem 0}
.bullets li::before{content:"";position:absolute;left:.1rem;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--cyan-500)}
.section-cta{margin-top:32px;text-align:center}

/* card with term + definition */
.card .term{display:block;font-weight:700;color:var(--ink);font-size:1.12rem;margin-bottom:6px}

/* FAQ accordion */
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;background:var(--bg)}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:600;color:var(--ink);font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan-500);font-size:1.5rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{margin:0;padding:16px 22px;color:var(--body)}

/* maturity self-assessment */
.assess{max-width:760px;margin:0 auto}
.q{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:0 0 16px;background:var(--bg)}
.q-text{font-weight:600;color:var(--ink);font-size:1.05rem;padding:0;margin:0 0 14px;line-height:1.5}
.q-opts{display:flex;gap:10px;flex-wrap:wrap}
.q-opts label{flex:1;min-width:110px;position:relative}
.q-opts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.q-opts span{display:block;text-align:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:.95rem;color:var(--body);transition:background .12s,border-color .12s,color .12s}
.q-opts label:hover span{border-color:var(--cyan-400)}
.q-opts input:checked + span{background:var(--cyan-500);border-color:var(--cyan-500);color:#04223a;font-weight:600}
.q-opts input:focus-visible + span{outline:2px solid var(--cyan-500);outline-offset:2px}
.assess-actions{text-align:center;margin:26px 0 0}
.assess-note{text-align:center;color:var(--muted);font-size:.9rem;margin:12px 0 0;min-height:1.2em}
.result{display:none;scroll-margin-top:90px}
.result.show{display:block;animation:xfade .25s ease}
.result.stale{opacity:.5;transition:opacity .2s}
.result-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:30px;text-align:center}
.result-level{font-size:1.7rem;color:var(--ink);margin:0 0 6px;font-weight:700}
.result-score{color:var(--muted);margin:0 0 20px}
.meter{height:12px;background:var(--bg-soft2);border-radius:8px;overflow:hidden;max-width:440px;margin:0 auto 10px}
.meter-fill{height:100%;background:var(--cyan-500);width:0;transition:width .7s ease}
.result-rec{max-width:54ch;margin:18px auto 0;color:var(--body)}
.result-actions{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.focus-list{margin-top:34px}
.focus-list h3{text-align:center;margin-bottom:18px}

/* assessment v2 (sectioned wizard + results) */
.btn:disabled{opacity:.45;cursor:not-allowed}
.assess2{max-width:780px;margin:0 auto}
.a-progress{margin:0 0 24px}
.a-progress-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.a-progress-top span{font-size:.8rem;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.05em}
.a-toggle{background:none;border:none;color:var(--cyan-600,var(--cyan-500));font:inherit;font-size:.83rem;font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
.a-bar{height:8px;background:var(--bg-soft2);border-radius:6px;overflow:hidden}
.a-bar-fill{height:100%;background:var(--cyan-500);width:14%;transition:width .3s ease;border-radius:6px}
.a-section{display:none;border:0;padding:0;margin:0;min-inline-size:auto}
.a-section.current{display:block;animation:xfade .25s ease}
.assess2.show-all .a-section{display:block;margin-bottom:34px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.a-sec-head{margin:0 0 18px}
.a-sec-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-600,var(--cyan-500));background:var(--bg-soft2);padding:5px 12px;border-radius:20px;margin-bottom:10px}
.a-sec-head h2{font-size:1.4rem;margin:.1em 0 .35em}
.a-sec-head p{color:var(--muted);margin:0}
.q-help{color:var(--muted);font-size:.86rem;margin:-4px 0 12px;line-height:1.45}
.a-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.a-nav-r{display:flex;gap:12px}
.a-validate{color:#9a2515;font-size:.92rem;text-align:center;margin:14px 0 0;min-height:1.1em;font-weight:600}
.a-privacy{text-align:center;color:var(--muted);font-size:.82rem;margin:22px 0 0}
.q.unanswered{border-color:#d98a2b;box-shadow:0 0 0 1px #d98a2b}
.result2{display:none;scroll-margin-top:90px}
.result2.show{display:block;animation:xfade .25s ease}
.r2-badge{background:var(--bg-soft);border:1px solid var(--line);border-top:4px solid var(--cyan-500);border-radius:var(--radius);padding:28px 30px;text-align:center;margin:0 auto 34px;max-width:780px}
.r2-prematch{color:var(--muted);font-size:.9rem;margin:0 auto 8px;max-width:48ch}
.r2-level{font-size:1.9rem;font-weight:800;color:var(--ink);margin:0 0 4px}
.r2-overall{color:var(--muted);font-weight:700;margin:0}
.r2-meter{height:12px;background:var(--bg-soft2);border-radius:8px;overflow:hidden;max-width:440px;margin:16px auto}
.r2-meter-f{height:100%;background:var(--cyan-500);border-radius:8px}
.r2-desc{max-width:60ch;margin:8px auto 0;color:var(--body)}
.r2-block{margin:0 auto 36px;max-width:780px}
.r2-block>h3{font-size:1.2rem;margin:0 0 18px;text-align:center}
.r2-bar{margin:0 0 13px}
.r2-bar-l{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;margin-bottom:5px}
.r2-bar-l span:first-child{color:var(--ink);font-weight:600}
.r2-bar-v{color:var(--cyan-600,var(--cyan-500));font-weight:700;font-variant-numeric:tabular-nums}
.r2-bar-t{height:14px;background:var(--bg-soft2);border-radius:7px;overflow:hidden}
.r2-bar-f{height:100%;background:var(--cyan-500);border-radius:7px;min-width:3px}
.r2-quad{max-width:540px;margin:0 auto}
.r2-quad svg{display:block;width:100%;height:auto}
.r2-axisnote{text-align:center;color:var(--body);font-size:.92rem;margin:10px 0 0}
.r2-axisnote b{color:var(--ink)}
.r2-quad-active{background:var(--bg-soft);border-left:4px solid var(--cyan-500);border-radius:0 10px 10px 0;padding:14px 18px;margin:14px auto 0;max-width:600px;color:var(--body)}
.r2-quad-active b{color:var(--ink)}
.r2-sw{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:600px;margin:0 auto}
.r2-sw-card{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--bg)}
.r2-sw-card span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted)}
.r2-sw-card p{margin:6px 0 0;font-weight:700;color:var(--ink)}
.r2-sw-card.strong{border-left:4px solid #1d9e75}
.r2-sw-card.weak{border-left:4px solid #BA7517}
/* assessment plan: action links on the recommended-layer cards (the tool that closes each gap) */
.card-act{margin-top:12px;font-size:.88rem;font-weight:600}
.card-act a{color:var(--cyan-500)}
.card-act a:hover{text-decoration:underline}
.card-act .ca-sep{color:var(--muted);margin:0 8px;font-weight:400}
.r2-steps{max-width:680px;margin:0 auto;padding:0;list-style:none}
.r2-steps li{position:relative;padding:11px 0 11px 28px;border-bottom:1px solid var(--line);color:var(--body)}
.r2-steps li::before{content:"\2192";position:absolute;left:2px;color:var(--cyan-600,var(--cyan-500));font-weight:800}
.r2-steps li.r2-start{font-weight:600;color:var(--ink);border-bottom:none}
.r2-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
@media (max-width:560px){.r2-sw{grid-template-columns:1fr}}
@media print{.site-header,.site-footer,.cta,.assess2,.skip{display:none!important}.result2{display:block!important}.r2-actions{display:none!important}}

/* UNS interactive module */
.uns{display:grid;grid-template-columns:300px 1fr;gap:24px;max-width:1000px;margin:0 auto;align-items:start}
.uns-tree{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:12px 10px;font-size:.95rem}
.uns-tree ul{list-style:none;margin:0;padding:0}
.uns-tree li>ul{margin-left:14px;border-left:1px solid var(--line);padding-left:6px}
.uns-tree li.collapsed>ul{display:none}
.uns-node{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;color:var(--ink);box-sizing:border-box;width:100%}
.uns-node:hover{background:var(--bg-soft)}
.uns-node:focus-visible{outline:2px solid var(--cyan-500);outline-offset:-2px}
.uns-twist{width:12px;text-align:center;color:var(--muted);font-size:.7rem;flex-shrink:0}
.uns-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan-500);flex-shrink:0;margin-left:3px}
.uns-branch.eqsel{color:#185FA5;font-weight:600}
.uns-leaf[aria-selected="true"]{background:var(--cyan-500);color:#04223a;font-weight:600}
.uns-leaf[aria-selected="true"] .uns-dot{background:#04223a}
.uns-detail{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.uns-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 7px}
.uns-lbl:first-child{margin-top:0}
.uns-topic{font-family:ui-monospace,Consolas,monospace;background:var(--navy-900);color:#9fd3ef;padding:12px 14px;border-radius:8px;font-size:.86rem;word-break:break-all;line-height:1.5}
.uns-topic b{color:#fff}
.uns-payload{font-family:ui-monospace,Consolas,monospace;background:var(--bg-soft2);border-radius:8px;padding:14px 16px;font-size:.84rem;white-space:pre;overflow-x:auto;color:var(--ink);margin:0}
.uns-subs{display:flex;flex-wrap:wrap;gap:10px}
.uns-sub{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:.88rem;background:var(--bg);color:var(--body)}
.uns-sub .uns-sdot{width:8px;height:8px;border-radius:50%;background:var(--uns)}
.uns-sub.pulse{animation:unsPulse .7s ease}
@keyframes unsPulse{0%{box-shadow:0 0 0 0 rgba(42,168,224,.55);border-color:var(--cyan-500);background:var(--bg-soft)}100%{box-shadow:0 0 0 12px rgba(42,168,224,0);border-color:var(--line);background:var(--bg)}}
.uns-pub{margin-top:18px}
.uns-hub{margin:6px auto 0;max-width:600px}
.uns-hub svg{display:block;width:100%;height:auto}
.uns-subnode rect{transition:fill .2s,stroke .2s}
.uns-subnode.rcv rect{fill:#E6F1FB;stroke:#2aa8e0;stroke-width:2}
.uns-subnode.rcv text{fill:#0C447C}
@media (max-width:760px){.uns{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.uns-sub.pulse{animation:none}}

/* framework in-page sub-nav */
.fw-subnav{position:sticky;top:68px;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.fw-subnav-inner{display:flex;gap:6px;flex-wrap:nowrap;padding:9px 24px;max-width:var(--maxw);margin:0 auto;overflow-x:auto}
.fw-subnav a{font-size:.88rem;color:var(--body);padding:6px 12px;border-radius:8px;white-space:nowrap}
.fw-subnav a:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
#layers,#layer-eih,#layer-cdm,#layer-uns,#layer-udl,#layer-fdl,#layer-ai{scroll-margin-top:122px}
.x-deeper{margin:18px 0 0}
.x-deeper a{display:inline-block;font-weight:600;color:var(--cyan-500);font-size:.95rem}

/* AI / LLM router module */
.air{display:grid;grid-template-columns:300px 1fr;gap:24px;max-width:1000px;margin:0 auto;align-items:start}
.air-tasks{display:flex;flex-direction:column;gap:8px}
.air-task{all:unset;cursor:pointer;border:1px solid var(--line);border-left:3px solid var(--ai);border-radius:10px;background:var(--bg);padding:11px 14px;font-size:.95rem;color:var(--ink);transition:background .12s,box-shadow .12s}
.air-task:hover{background:var(--bg-soft)}
.air-task[aria-selected="true"]{background:var(--bg-soft);box-shadow:0 0 0 2px var(--ai) inset}
.air-task:focus-visible{outline:2px solid var(--cyan-500);outline-offset:2px}
.air-detail{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.air-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 7px}
.air-lbl:first-child{margin-top:0}
.air-task-text{font-size:1.1rem;color:var(--ink);font-weight:600;margin:0;line-height:1.4}
.air-pills{display:flex;flex-wrap:wrap;gap:8px}
.air-pill{font-size:.8rem;border:1px solid var(--line);border-radius:6px;padding:5px 10px;color:var(--body);background:var(--bg-soft)}
.air-pill b{color:var(--ink);font-weight:600}
.air-route{font-size:1rem;color:var(--ink);margin:0}
.air-route b{color:#185FA5}
.air-why{color:var(--body);margin:6px 0 0}
.air-flow{margin:14px auto 0}
.air-flow svg{display:block;width:100%;height:auto}
.air-model rect{transition:fill .2s,stroke .2s}
#air-fdl rect{transition:fill .2s,stroke .2s}
#air-fdl.rcv rect{fill:#E1F5EE;stroke:#0F6E56;stroke-width:2}
#air-sme circle.flash{animation:airFlash .45s ease 2}
@keyframes airFlash{0%,100%{fill:#FAEEDA}50%{fill:#EF9F27}}
.air-run{margin-top:16px}
.air-tasks-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 8px;padding-left:2px;font-weight:600}
.air-agent rect{transition:fill .2s,stroke .2s}
.air-agent.active rect{fill:#E6F1FB;stroke:#2aa8e0;stroke-width:2}
#air-synth rect{transition:fill .2s,stroke .2s}
#air-synth.on rect{fill:#E6F1FB;stroke:#2aa8e0;stroke-width:2}
#air-caller rect{transition:fill .2s,stroke .2s}
#air-caller.answered rect{fill:#E1F5EE;stroke:#0F6E56;stroke-width:2}
@media (max-width:760px){.air{grid-template-columns:1fr}}

/* EIH pipeline module */
.eih-wrap{max-width:860px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px;overflow-x:auto}
.eih-wrap svg{display:block;width:100%;height:auto;min-width:680px}
.eih-stage{cursor:pointer}
.eih-stage rect{transition:fill .15s,stroke .15s}
.eih-stage:hover rect{stroke:#D85A30}
.eih-stage.sel rect,.eih-stage.active rect{fill:#FAECE7;stroke:#D85A30;stroke-width:2}
.eih-stage:focus-visible{outline:none}
.eih-stage:focus-visible rect{stroke:#D85A30;stroke-width:2.5}
#eih-uns rect{transition:fill .2s,stroke .2s}
#eih-uns.rcv rect{fill:#E1F5EE;stroke:#0F6E56;stroke-width:2}
.eih-below{max-width:760px;margin:18px auto 0}
.eih-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:14px}
.eih-try{flex-basis:100%;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;margin:0}
.eih-net{cursor:pointer;font:inherit;font-weight:600;font-size:.95rem;padding:11px 18px;border-radius:8px;border:1.5px solid #1d9e75;background:#eafaf4;color:#0F6E56;display:inline-flex;align-items:center;gap:9px;box-shadow:0 1px 2px rgba(8,24,42,.08);transition:background .15s,box-shadow .15s}
.eih-net::before{content:"";width:9px;height:9px;border-radius:50%;background:#1d9e75;flex:none}
.eih-net:hover{box-shadow:0 2px 6px rgba(8,24,42,.14)}
.eih-net.off{border-color:#BA7517;color:#854F0B;background:#FBF1DF}
.eih-net.off::before{background:#BA7517}
.eih-info{color:var(--body);margin:16px 0 0;min-height:2.8em}
.eih-payload{font-family:ui-monospace,Consolas,monospace;background:var(--bg-soft2);border-radius:8px;padding:14px 16px;font-size:.84rem;white-space:pre;overflow-x:auto;color:var(--ink);margin:6px 0 0}

/* layer deep-dive framing */
.layer-kicker{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px;display:inline-flex;align-items:center;gap:7px}
.layer-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.section-head .layer-kicker{justify-content:center}
.deepdive-leadin{text-align:center;max-width:620px;margin:26px auto 0;color:var(--body);font-size:1.02rem}
.deepdive-leadin b{color:var(--ink)}

/* home self-assessment feature */
.assess-feature{max-width:720px;margin:0 auto;text-align:center;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--cyan-500);border-radius:var(--radius);padding:34px 30px}
.assess-feature .eyebrow{margin-bottom:8px}
.assess-feature h2{margin:0 0 .4em}
.assess-feature p{margin:0 auto 22px;max-width:560px}

/* FDL closed-loop module */
.fdl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start;max-width:980px;margin:0 auto}
.fdl-left{min-width:0}
.fdl-card{background:var(--bg);border:1px solid var(--line);border-left:4px solid #BA7517;border-radius:12px;padding:16px 18px}
.fdl-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.fdl-asset{font-weight:700;color:var(--ink)}
.fdl-domain{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#854F0B;background:#FBF1DF;border-radius:20px;padding:3px 10px;white-space:nowrap}
.fdl-pred{font-size:1.05rem;color:var(--ink);margin:.2em 0 .8em;line-height:1.4}
.fdl-conf{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted)}
.fdl-confbar{flex:1;height:8px;border-radius:5px;background:var(--bg-soft2);overflow:hidden}
.fdl-confbar i{display:block;height:100%;background:#BA7517;border-radius:5px;width:0;transition:width .4s}
.fdl-conf b{color:var(--ink)}
.fdl-model{font-size:.78rem;color:var(--muted);margin:.7em 0 0;font-family:ui-monospace,Consolas,monospace}
.fdl-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.fdl-actions[hidden],.fdl-reason[hidden]{display:none}
.btn-line{background:transparent;color:#0b2138;border-color:#c2cdd8}
.btn-line:hover{border-color:#0b2138}
.fdl-actions .btn,.fdl-reason .btn{padding:11px 20px;font-size:.95rem}
.fdl-reason{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fdl-reason label{font-size:.78rem;color:var(--muted);flex-basis:100%}
.fdl-reason select{font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);flex:1;min-width:180px}
.fdl-banner{margin-top:14px;border-radius:10px;padding:12px 14px;font-size:.92rem;display:none}
.fdl-banner.show{display:block}
.fdl-banner.good{background:#E1F5EE;color:#04342C;border:1px solid #9ed9c5}
.fdl-banner.miss{background:#FBF1DF;color:#5c3a07;border:1px solid #e6c489}
.fdl-right{min-width:0}
.fdl-loop{max-width:440px;margin:0 auto}
.fdl-loop svg{display:block;width:100%;height:auto}
.fdl-node rect{transition:fill .15s,stroke .15s}
.fdl-node.active rect{fill:#FBF1DF;stroke:#BA7517;stroke-width:2}
.fdl-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.fdl-stat{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:8px 16px;text-align:center;min-width:104px}
.fdl-stat b{display:block;font-size:1.1rem;color:var(--ink)}
.fdl-stat b.ok{color:#0F6E56}
.fdl-stat b.warn{color:#9a5b00}
.fdl-stat span{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fdl-ledger{margin-top:18px}
.fdl-ledger table{width:100%;border-collapse:collapse;font-size:.82rem}
.fdl-ledger th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:0 8px 6px}
.fdl-ledger td{padding:6px 8px;border-top:1px solid var(--line);color:var(--body)}
.fdl-ledger .ai-ok{color:#0F6E56;font-weight:700}
.fdl-ledger .ai-no{color:#b3402a;font-weight:700}
.fdl-ledger .empty td{color:var(--muted);font-style:italic;text-align:center;border-top:none}
@media (max-width:780px){.fdl{grid-template-columns:1fr}}

/* Built to Scale simulator — operations console */
.sim{max-width:1040px;margin:0 auto;
  --con-bg:#0c2236;--con-bg2:#12304a;--con-bg3:#091a2b;
  --con-line:rgba(126,166,196,.16);--con-line2:rgba(126,166,196,.34);
  --con-ink:#eaf2f8;--con-mut:#9cb2c4;--con-cy:#43bdf2;/* muted text bumped from #90a6b8 → #9cb2c4 for comfortable WCAG-AA margin (~6–7:1) on all dark panels, incl. small/secondary labels */
  background:linear-gradient(180deg,#0d2236,#0a1a2b);border:1px solid var(--con-line2);
  border-radius:18px;padding:clamp(15px,2.6vw,26px);color:var(--con-ink);
  box-shadow:0 24px 56px -28px rgba(4,14,26,.75)}
.sim-factory{position:relative;margin-bottom:18px;border:1px solid var(--con-line2);border-radius:14px;background:#081623;overflow:hidden}
.sim-factory canvas{display:block;width:100%;height:auto}
.sim .uns-lbl{color:var(--con-mut);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin:0 0 8px}
.sim .diagram-hint{color:#74c2ec}
.sim-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sim-stat{flex:1;min-width:118px;background:var(--con-bg3);border:1px solid var(--con-line);border-radius:10px;padding:11px 14px 10px;text-align:center;position:relative;overflow:hidden}
.sim-stat::before{content:"";position:absolute;top:0;left:14%;right:14%;height:2px;background:linear-gradient(90deg,transparent,var(--con-cy),transparent);opacity:.55}
.sim-stat b{display:block;font-size:1.35rem;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sim-stat span{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--con-mut)}
.sim-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;margin-bottom:18px}
.sim-kpi{position:relative;background:var(--con-bg2);border:1px solid var(--con-line);border-radius:10px;padding:12px 14px}
.kpi-delta{position:absolute;top:5px;right:13px;font-size:.74rem;font-weight:700;pointer-events:none;z-index:2;text-shadow:0 1px 3px rgba(5,15,26,.8)}
.kpi-delta.good{color:#5fe0ad}
.kpi-delta.bad{color:#ff8473}
@media (prefers-reduced-motion:no-preference){.kpi-delta{animation:kpiFloat 1.25s ease-out forwards}}
@keyframes kpiFloat{0%{opacity:0;transform:translateY(8px)}18%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
.sim-float{position:absolute;z-index:85;transform:translateX(-50%);pointer-events:none;display:flex;gap:10px;background:rgba(8,20,34,.95);border:1px solid rgba(126,166,196,.34);border-radius:9px;padding:7px 12px;font-size:.78rem;font-weight:700;white-space:nowrap;box-shadow:0 12px 28px -8px rgba(0,0,0,.7);opacity:0;animation:simFloatUp 1.7s ease-out forwards}
.sim-float span.good{color:#5fe0ad}
.sim-float span.bad{color:#ff8473}
@keyframes simFloatUp{0%{opacity:0;transform:translate(-50%,10px)}13%{opacity:1}76%{opacity:1;transform:translate(-50%,-34px)}100%{opacity:0;transform:translate(-50%,-48px)}}
@media (prefers-reduced-motion:reduce){.sim-float{animation:none;opacity:1;transform:translate(-50%,-24px)}}
.sim-kpi .k-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.73rem;color:var(--con-mut);margin-bottom:8px}
.sim-kpi .k-top b{color:#fff;font-size:1.05rem;font-variant-numeric:tabular-nums}
.sim-kpi .k-bar{height:6px;background:rgba(0,0,0,.34);border-radius:5px;overflow:hidden;position:relative}
.sim-kpi .k-tgt{position:absolute;top:-1px;bottom:-1px;width:2px;background:rgba(233,242,248,.6);transform:translateX(-1px);z-index:2;border-radius:1px}
.sim-kpi .k-fill{height:100%;border-radius:5px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.sim-kpi .k-spark{display:block;width:100%;height:24px;margin-top:9px;opacity:.85}
/* Phase 17 animations: reactive console + big moments */
.sim{position:relative}
.sim-kpi{transition:box-shadow .25s,border-color .25s}
.sim-kpi.kpi-up{animation:kpiUp .9s ease-out}
.sim-kpi.kpi-down{animation:kpiDown .9s ease-out}
@keyframes kpiUp{0%{box-shadow:0 0 0 0 rgba(95,224,173,0)}25%{box-shadow:0 0 18px -2px rgba(95,224,173,.55);border-color:rgba(95,224,173,.6)}100%{box-shadow:0 0 0 0 rgba(95,224,173,0)}}
@keyframes kpiDown{0%{box-shadow:0 0 0 0 rgba(255,132,115,0)}25%{box-shadow:0 0 18px -2px rgba(255,132,115,.55);border-color:rgba(255,132,115,.6)}100%{box-shadow:0 0 0 0 rgba(255,132,115,0)}}
.sim-stat b.stat-flip{display:inline-block;animation:statFlip .55s ease}
@keyframes statFlip{0%{transform:rotateX(0)}45%{transform:rotateX(90deg);opacity:.3}55%{transform:rotateX(-90deg);opacity:.3}100%{transform:rotateX(0);opacity:1}}
.sim-stat b.stat-shake{display:inline-block;animation:statShake .5s}
@keyframes statShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.goal-chip.chip-pop{animation:chipPop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes chipPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.sim-vignette{position:absolute;inset:0;pointer-events:none;z-index:60;border-radius:inherit;box-shadow:inset 0 0 80px 10px rgba(226,75,74,.55);animation:vigFlash .76s ease-out forwards}
@keyframes vigFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.sim-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:96}
.end-stars .st-on{display:inline-block;animation:starPop .42s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes starPop{0%{transform:scale(0) rotate(-30deg);opacity:0}70%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.sim-kpi.kpi-up,.sim-kpi.kpi-down,.stat-flip,.stat-shake,.chip-pop,.sim-vignette,.end-stars .st-on{animation:none}}
.sim-h{font-size:1.05rem;margin:6px 0 4px;text-align:center;color:#fff;letter-spacing:.01em}
/* ---- Overview: interactive architecture comparison (point-to-point / data lake / UMDA) ---- */
.cmp-wrap{max-width:780px;margin:6px auto 0}
.cmp-toggle{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 16px}
.cmp-btn{font:inherit;font-size:.88rem;font-weight:600;padding:9px 18px;border:1.5px solid #c9d4dd;border-radius:999px;background:#fff;color:#46586a;cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.cmp-btn:hover{border-color:#2aa8e0;color:#1583c0}
.cmp-btn[aria-pressed="true"]{background:#1583c0;border-color:#1583c0;color:#fff}
.cmp-btn[aria-pressed="true"]::before{content:"✓ "}
.cmp-stage{background:#fff;border:1px solid #e2e8ee;border-radius:14px;padding:12px 10px 4px;box-shadow:0 10px 30px -18px rgba(11,33,56,.25)}
.cmp-stage svg{display:block;width:100%;height:auto}
.cmp-take{max-width:640px;margin:14px auto 0;text-align:center;font-size:.95rem;line-height:1.55;color:#46586a}
.cmp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.cmp-stat{display:flex;flex-direction:column;gap:5px;background:#f6f9fb;border:1px solid #e2e8ee;border-radius:10px;padding:11px 13px}
.cmp-k{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#90a0ae}
.cmp-v{font-size:.85rem;font-weight:600;color:#0b2138;line-height:1.4}
@media (max-width:680px){.cmp-stats{grid-template-columns:1fr 1fr}.cmp-btn{padding:9px 13px;font-size:.82rem}}
.sim-goal{background:var(--con-bg3);border:1px solid var(--con-line);border-radius:12px;padding:12px 16px;margin-bottom:14px}
.sim-goal:empty{display:none}
.goal-top{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.goal-eyebrow{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--con-cy);background:rgba(67,189,242,.13);padding:3px 9px;border-radius:20px}
.goal-title{font-size:.94rem;color:#fff;font-weight:600;flex:1;min-width:160px}
.goal-pct{font-size:1.1rem;font-weight:700;color:var(--con-cy);font-variant-numeric:tabular-nums}
.goal-bar{height:7px;background:rgba(0,0,0,.34);border-radius:5px;overflow:hidden;margin-bottom:10px}
.goal-fill{height:100%;background:linear-gradient(90deg,#2aa8e0,#43e0ad);border-radius:5px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.goal-chips{display:flex;gap:8px;flex-wrap:wrap}
.goal-chip{font-size:.71rem;color:var(--con-mut);background:rgba(255,255,255,.04);border:1px solid var(--con-line);border-radius:20px;padding:4px 11px}
.goal-chip b{color:#cddae5;font-variant-numeric:tabular-nums;margin-left:3px}
.goal-chip.done{color:#5fe0ad;border-color:rgba(29,158,117,.5);background:rgba(29,158,117,.13)}
.goal-chip.done b{color:#5fe0ad}
button.goal-chip{font:inherit;cursor:pointer}
button.goal-chip:hover{border-color:var(--con-line2);color:#cddae5}
button.goal-chip.done:hover{border-color:rgba(47,174,122,.8)}
button.goal-chip:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
.goal-next{background:linear-gradient(90deg,rgba(67,189,242,.16),rgba(67,189,242,.03));border:1px solid rgba(67,189,242,.34);border-radius:9px;padding:9px 13px;margin-bottom:12px}
.gn-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gn-eye{font-size:.64rem;font-weight:800;letter-spacing:.04em;color:var(--con-cy);text-transform:uppercase}
.gn-txt{font-size:.95rem;font-weight:700;color:#fff;flex:1;min-width:160px}
.gn-prog{font-size:.8rem;font-weight:700;color:var(--con-cy);font-variant-numeric:tabular-nums}
.gn-bar{height:5px;background:rgba(0,0,0,.34);border-radius:4px;overflow:hidden;margin-top:8px}
.gn-fill{height:100%;background:linear-gradient(90deg,#2aa8e0,#43e0ad);border-radius:4px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
/* clickable Next objective → jumps to the panel where you act on it */
button.goal-next{display:block;width:100%;text-align:left;font:inherit;cursor:pointer}
.goal-next.gn-click:hover{border-color:rgba(67,189,242,.7);background:linear-gradient(90deg,rgba(67,189,242,.26),rgba(67,189,242,.06))}
.gn-cta{display:inline-block;margin-top:7px;font-size:.74rem;font-weight:800;letter-spacing:.03em;color:var(--con-cy);text-transform:uppercase}
.goal-next.gn-early{border-color:var(--con-cy);border-width:2px;box-shadow:0 0 0 0 rgba(67,189,242,.5);animation:gnPulse 1.9s ease-out infinite}
.goal-next.gn-early .gn-cta{color:#fff}
@keyframes gnPulse{0%{box-shadow:0 0 0 0 rgba(67,189,242,.5)}70%{box-shadow:0 0 0 9px rgba(67,189,242,0)}100%{box-shadow:0 0 0 0 rgba(67,189,242,0)}}
/* "what changed this quarter" digest */
.quarter-digest{background:var(--con-bg2);border:1px solid var(--con-line);border-radius:9px;padding:8px 12px 10px;margin-bottom:12px}
.qd-eye{display:block;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--con-mut);margin-bottom:7px}
.qd-pills{display:flex;flex-wrap:wrap;gap:7px}
.qd-pill{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:20px;border:1px solid var(--con-line);background:rgba(255,255,255,.03);color:#dfe9f2}
.qd-ar{font-size:.7rem;font-weight:800}
.qd-pill.qd-up{border-color:rgba(47,174,122,.55);color:#7fe0b4} .qd-pill.qd-up .qd-ar{color:#2fae7a}
.qd-pill.qd-down{border-color:rgba(209,78,44,.55);color:#f0a88e} .qd-pill.qd-down .qd-ar{color:#e0633c}
.qd-pill.qd-flat{color:var(--con-mut)}
.qd-fires{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qd-fire{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:6px;border:1px solid var(--con-line);color:#c4d4e2}
.qd-fi{font-size:.78rem}
.qd-fire.qd-fgood{border-left:2px solid #2fae7a} .qd-fire.qd-fbad{border-left:2px solid #d14e2c} .qd-fire.qd-finfo{border-left:2px solid #43bdf2}
/* confirm modal buttons */
.sim-confirm-row{display:flex;gap:10px;flex-wrap:wrap}
.confirm-danger .b-main{color:#fff} .confirm-danger{background:linear-gradient(180deg,#c8472a,#a8381f);border-color:#c8472a}
.confirm-go{background:linear-gradient(180deg,#2aa8e0,#1f8fc4);border-color:#2aa8e0} .confirm-go .b-main{color:#04223a}
.confirm-cancel{opacity:.85}
@media (prefers-reduced-motion:reduce){.goal-next.gn-early{animation:none}}
/* Executive directive banner — amber mandate, distinct from the cyan Next objective; urgent=red pulse, met=green */
.goal-dir{background:linear-gradient(90deg,rgba(224,162,58,.16),rgba(224,162,58,.03));border:1px solid rgba(224,162,58,.4);border-left:3px solid #e0a23a;border-radius:9px;padding:9px 13px;margin-bottom:12px}
.goal-dir.gd-click{cursor:pointer} .goal-dir.gd-click:hover{border-color:rgba(224,162,58,.7)}
.goal-dir.gd-click:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
.gd2-review{font-size:.62rem;font-weight:700;color:var(--con-mut);margin-left:6px;white-space:nowrap}
.goal-dir.gd-click:hover .gd2-review{color:#e0b26a}
.goal-dir.met{border-color:rgba(47,174,122,.55);border-left-color:#2fae7a;background:linear-gradient(90deg,rgba(47,174,122,.16),rgba(47,174,122,.03))}
.goal-dir.urgent{border-color:rgba(232,90,90,.6);border-left-color:#e85a5a;background:linear-gradient(90deg,rgba(232,90,90,.16),rgba(232,90,90,.03));animation:dirPulse 1.6s ease-in-out infinite}
@keyframes dirPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,90,90,0)}50%{box-shadow:0 0 0 3px rgba(232,90,90,.18)}}
@media (prefers-reduced-motion:reduce){.goal-dir.urgent{animation:none;box-shadow:0 0 0 2px rgba(232,90,90,.35)}}
.gd2-head{display:flex;align-items:center;gap:11px}
.gd2-headtext{flex:1;min-width:0}
.gd2-portrait{flex:0 0 auto;width:50px;height:50px;border-radius:50%;overflow:hidden;box-shadow:0 2px 7px rgba(0,0,0,.4)}
.gd2-portrait svg{display:block;width:100%;height:100%}
.gd2-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.gd2-tag{font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#e0b26a}
.goal-dir.met .gd2-tag{color:#7fe0ad}
/* a directive issued THIS quarter announces itself: NEW chip + a brief attention pulse (word + motion, not colour alone) */
.gd2-newchip{font-size:.6rem;font-weight:800;letter-spacing:.06em;color:#04223a;background:#ffc24a;border-radius:20px;padding:1px 7px}
.goal-dir.gd-new{animation:gdNew 1.1s ease-out 3}
@keyframes gdNew{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px rgba(255,194,74,.55)}}
@media (prefers-reduced-motion:reduce){.goal-dir.gd-new{animation:none}}
.gd2-from{font-size:.7rem;color:var(--con-mut);flex:1;min-width:0}
.gd2-clock{font-size:.7rem;font-weight:800;color:#e0b26a;font-variant-numeric:tabular-nums;white-space:nowrap}
.gd2-clock.urgent{color:#ff9b9b}
.goal-dir.met .gd2-clock{color:#7fe0ad}
.gd2-task{font-size:.86rem;font-weight:700;color:#fff}
.gd2-task b{color:#ffe0a8}
.goal-dir.met .gd2-task b{color:#bff0d6}
.gd2-bar{height:5px;background:rgba(0,0,0,.34);border-radius:4px;overflow:hidden;margin-top:7px}
.gd2-fill{height:100%;background:linear-gradient(90deg,#e0a23a,#f2cd82);border-radius:4px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.gd2-fill.done{background:linear-gradient(90deg,#2aae7a,#43e0ad)}
.gd2-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:.68rem;color:var(--con-mut);font-variant-numeric:tabular-nums}
.gd2-bonus{color:#e0b26a;font-weight:700}
.goal-dir.met .gd2-bonus{color:#7fe0ad}
.hud .goal-dir{margin:0 0 6px}
.sim-layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:8px}
@media(max-width:640px){.sim-layers{grid-template-columns:1fr}}
.grp-tabs{display:flex;gap:6px;margin:0 0 8px}
.grp-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;position:relative;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;color:var(--con-mut);background:var(--con-bg2);border:1px solid var(--con-line);border-radius:9px;padding:9px 10px}
.grp-tab:hover{border-color:var(--con-line2);color:var(--con-ink)}
.grp-tab.active{background:rgba(67,189,242,.14);border-color:var(--con-cy);color:#fff}
.gt-prog{font-size:.66rem;font-weight:800;color:var(--con-mut);background:var(--con-bg3);border-radius:20px;padding:1px 7px}
.grp-tab.active .gt-prog{color:#cdeefd}
.gt-prog.done{color:#0c1f17;background:#56e8b0}
.gt-dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--con-cy);box-shadow:0 0 6px var(--con-cy)}
.grp-tab.active .gt-dot{display:none}
.grp-sub{font-size:.78rem;color:var(--con-mut);margin:0 0 6px;line-height:1.4}
/* Area (building) panel */
.area-scene{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--con-line);background:#0a1822;margin:2px 0 12px}
/* Area pop-up: wider panel + two-column body (diagnosis left · actions right) so it fits without scrolling.
   The scene canvas is width-capped and centered; otherwise widening the panel would make it TALLER (fixed 720:200 aspect). */
.game-panel[data-panel="area"]{width:min(960px,100%)}
/* Desktop/tablet: give the area pop-up more vertical room so content-rich areas (extra driver +
   an extra plant-solution row push a few areas past the generic 86% cap) fit without a slight scroll.
   Scoped ≥681px so it can't override the phone block's max-height. */
@media (min-width:681px){.game-panel[data-panel="area"]{max-height:94%}}
.game-panel[data-panel="area"] .area-scene{height:clamp(110px,16vh,150px);width:auto;max-width:100%;margin:2px auto 8px}
/* Control Room packs 14 HMI tiles + P&L: shrink the decorative interior so it all fits without scrolling */
.game-panel[data-panel="area"].ctrl-room .area-scene{height:clamp(96px,13vh,124px)}
/* the Control Room's bottom CTA stays fully visible even when a short window makes the panel scroll */
.game-panel .ctrl-cta{position:sticky;bottom:-18px;margin:8px -18px -18px;padding:8px 18px 14px;background:var(--con-bg);border-top:1px solid var(--con-line);border-radius:0 0 12px 12px}
.game-panel .ctrl-cta .sim-b{width:100%;justify-content:center}
.area-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}
.area-cols .ac-col{min-width:0}
.area-cols .ac-col>:first-child{margin-top:0;border-top:0;padding-top:0}
/* solution rows: name + the KPI it moves, stacked, so different prices read as different things */
.sol-row{gap:10px}
.sr-info{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.sr-ic{flex:0 0 auto}
.sr-t{display:flex;flex-direction:column;min-width:0}
.sr-t b{font-size:.78rem;color:#dfe9f2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-t i{font-style:normal;font-size:.62rem;color:var(--con-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- consistent action language across the game ----
   cyan filled = progress/build spend · gold outline = optional prestige spend · amber dashed = temporary stopgap spend.
   Navigation is a quiet ghost link, never styled like a spend. Every spend label ends "· $x". */
.area-act{border-top:1px solid var(--con-line);padding-top:8px}
.area-act h4,.area-sol h4,.area-drivers h4{display:flex;align-items:baseline;gap:8px}
.act-ghost{font:inherit;font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--con-cy);background:none;border:0;cursor:pointer;padding:0;margin-left:auto;white-space:nowrap}
.act-ghost:hover{text-decoration:underline}
.act-row{margin:0 0 10px}
.act-btn{display:block;width:100%;font:inherit;font-size:.82rem;font-weight:700;padding:8px 12px;border-radius:8px;cursor:pointer;text-align:center;line-height:1.2}
.act-btn:disabled{opacity:.45;cursor:not-allowed}
.act-btn:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
.act-build{background:linear-gradient(180deg,#2aa8e0,#1f8fc4);border:1px solid #2aa8e0;color:#04223a}
.act-build:hover:not(:disabled){filter:brightness(1.12)}
.act-gold{background:rgba(224,162,58,.10);border:1px solid rgba(224,162,58,.55);color:#f2cd82}
.act-gold:hover:not(:disabled){background:rgba(224,162,58,.2)}
.act-warn{background:rgba(255,255,255,.03);border:1px dashed rgba(224,162,58,.6);color:#f1ba64}
.act-warn:hover:not(:disabled){background:rgba(224,162,58,.1)}
.act-note{display:block;font-size:.67rem;color:var(--con-mut);line-height:1.35;margin:4px 2px 0}
/* HMI status strip: n children → n equal tiles, always fills the row */
.hmi-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:0 0 10px}
.hmi-gold{border-left-color:#e0a23a}.hmi-gold .hmi-v{color:#f2cd82}.hmi-gold .hmi-s{color:#c9a35f}
.area-cols .area-drivers,.area-cols .area-mod,.area-cols .area-sol{margin-bottom:6px;padding-top:8px}
/* density: the pop-up must fit unscrolled, so rows/notes/buttons run tighter inside it */
.game-panel[data-panel="area"] .dv-row{padding:3px 0;font-size:.8rem}
.game-panel[data-panel="area"] .ap-note{line-height:1.35;margin-top:5px}
.game-panel[data-panel="area"] .area-metric{margin:0 0 8px}
.game-panel[data-panel="area"] .area-issue{padding:7px 10px;margin-bottom:8px;line-height:1.4}
.game-panel[data-panel="area"] .area-hint{margin:0 0 8px;line-height:1.4}
.game-panel[data-panel="area"] .sim-b{padding:6px 9px}
.game-panel[data-panel="area"] .area-fix{margin:6px 0 0}
.game-panel[data-panel="area"] .am-state{margin-bottom:6px;padding:5px 8px}
@media (max-width:820px){.area-cols{grid-template-columns:1fr}.area-cols .ac-col+.ac-col>:first-child{border-top:1px solid var(--con-line);padding-top:10px}}
/* HMI dashboard tiles (Control Room): label sits directly above its value — reads like a control-room KPI wall.
   Same inset-cell language as the HUD instrument cluster; status = left edge + glyph + word (colourblind-safe). */
.hmi-sec{border-top:1px solid var(--con-line);padding-top:6px;margin-bottom:7px}
.hmi-sec h4{margin:0 0 5px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--con-mut)}
.hmi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hmi-cell{background:linear-gradient(180deg,#0a141d,#0c1922);border:1px solid #090f15;border-left:3px solid #5f7d97;border-radius:4px;padding:5px 8px 5px 9px;box-shadow:inset 0 2px 5px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.03);display:flex;flex-direction:column;gap:1px;min-height:46px}
.hmi-l{font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#88a1b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmi-v{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:1.02rem;line-height:1.15;color:#e7eef4;text-shadow:0 0 9px rgba(67,189,242,.3);font-variant-numeric:tabular-nums}
.hmi-s{font-size:.6rem;color:var(--con-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmi-ok{border-left-color:#2fae7a}.hmi-ok .hmi-v{color:#7fe0b4}.hmi-ok .hmi-s{color:#5fae8e}
.hmi-warn{border-left-color:#e0a23a}.hmi-warn .hmi-v{color:#f1ba64}.hmi-warn .hmi-s{color:#c9a35f}
.hmi-bad{border-left-color:#d14e2c}.hmi-bad .hmi-v{color:#ff8473}.hmi-bad .hmi-s{color:#d9836f}
.hmi-info .hmi-v{color:#cfe0ea}
@media (max-width:820px){.hmi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#sim-area{display:flex;flex-direction:column}
.area-metric{margin:2px 0 12px}
.am-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--con-mut);margin-bottom:5px}
.am-top b{font-size:.94rem}
.hl-ok{color:#56e8b0}.hl-warn{color:#ffc664}.hl-down{color:#ff6b5a}
.am-bar{height:8px;border-radius:6px;background:var(--con-bg3);overflow:hidden}
.am-bar span{display:block;height:100%;border-radius:6px;transition:width .4s}
.hb-ok{background:#56e8b0}.hb-warn{background:#ffc664}.hb-down{background:#ff6b5a}
.area-issue{background:rgba(255,91,82,.12);border:1px solid rgba(255,91,82,.5);color:#ffb3ab;border-radius:9px;padding:9px 11px;font-size:.8rem;line-height:1.5;margin-bottom:12px}
.area-patchnote{font-size:.78rem;color:#f0c073;margin:0 0 12px;font-weight:600}
.area-drivers{border-top:1px solid var(--con-line);padding-top:10px;margin-bottom:10px}
.area-drivers h4{margin:0 0 6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--con-mut)}
.dv-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:.84rem}
.dv-name{font:inherit;font-size:.84rem;font-weight:600;color:var(--con-cy);background:none;border:0;border-bottom:1px dashed rgba(67,189,242,.5);cursor:pointer;padding:0 0 1px}
.dv-name:hover{color:#fff}
.dv-ok{color:#56e8b0;font-size:.76rem;font-weight:700}
.dv-qw{color:#ffc664;font-size:.76rem;font-weight:700}
.dv-no{color:#ff8473;font-size:.76rem;font-weight:700}
.area-hint{font-size:.78rem;color:var(--con-mut);line-height:1.5;margin:0 0 14px}
.area-patch{width:100%}
.area-fix{font-size:.74rem;color:#8097a8;font-style:italic;margin:9px 0 0;text-align:center}
/* Projects panel: two-mode segmented toggle (Modernize / Build) so only one focused view shows */
.proj-modes{display:flex;gap:6px;margin-left:auto;margin-right:10px}
.proj-modes .pmode{font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;color:var(--con-mut);background:rgba(255,255,255,.04);border:1px solid var(--con-line);border-radius:8px;padding:5px 11px;display:inline-flex;align-items:center;gap:6px}
.proj-modes .pmode:hover{color:#cfe6f2;border-color:var(--con-line2)}
.proj-modes .pmode.active{color:#fff;border-color:var(--con-cy);background:rgba(67,189,242,.14)}
.proj-modes .pm-c{font-size:.64rem;font-weight:700;color:#8aa6bb;background:rgba(0,0,0,.28);border-radius:20px;padding:1px 7px}
.proj-modes .pmode.active .pm-c{color:#bfe6fb}
.rdy-head{font-size:.82rem;font-weight:700;color:#cfe0ec;margin:2px 0 4px}
.rdy-head .rdy-sub{font-size:.66rem;font-weight:400;color:var(--con-mut)}
.rdy-hint{font-size:.74rem;color:var(--con-mut);margin:0 0 9px;line-height:1.4}
.rdy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:7px;margin-bottom:13px}
.rdy-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:9px;row-gap:6px;padding:8px 11px;border-radius:8px;background:var(--con-bg2);border:1px solid var(--con-line);border-left:3px solid #5f7d97}
.rdy-row .rdy-state{grid-column:2;justify-self:end}
.rdy-row .rdy-btn,.rdy-row .rdy-done{grid-column:1/-1;justify-self:start}
.rdy-row.rdy-l1{border-left-color:#e0a23a}
.rdy-row.rdy-l2{border-left-color:#2fae7a}
.rdy-info{grid-column:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rdy-name{font-size:.8rem;font-weight:600;color:#e7eef4;min-width:0}
.rdy-flav{font-size:.66rem;color:var(--con-mut);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rdy-row.rdy-l2 .rdy-flav{color:#6fae8e}
.rdy-state{font-size:.7rem;color:var(--con-mut);white-space:nowrap}
.rdy-row.rdy-l1 .rdy-state{color:#e0b26a}
.rdy-row.rdy-l2 .rdy-state{color:#7fe0ad}
.rdy-btn{font:inherit;font-size:.7rem;font-weight:700;cursor:pointer;color:#cfe6f2;background:rgba(67,189,242,.12);border:1px solid rgba(67,189,242,.34);border-radius:7px;padding:4px 9px;white-space:nowrap}
.rdy-btn.inf{color:#7fe0ad;background:rgba(47,174,122,.12);border-color:rgba(47,174,122,.4)}
.rdy-btn:hover:not(:disabled){filter:brightness(1.15)}
.rdy-btn:disabled{opacity:.4;cursor:not-allowed}
.rdy-done{font-size:.7rem;font-weight:700;color:#7fe0ad;white-space:nowrap}
/* showcase prestige tier: gold, distinct from the cyan digitize / green modernize actions */
.rdy-btn.shw{color:#f2cd82;background:rgba(224,162,58,.12);border-color:rgba(224,162,58,.45)}
.rdy-done.shw{color:#f2cd82}
.area-fix.shw{color:#f2cd82}
.sim-b.area-showbtn{border-color:rgba(224,162,58,.55);color:#f2cd82}
.sim-b.area-showbtn:hover:not(:disabled){border-color:#e0a23a;background:rgba(224,162,58,.14)}
.sim-b .b-fx.shw-fx{color:#e0b26a}
.area-mod{border-top:1px solid var(--con-line);padding-top:10px;margin-top:12px}
.area-mod h4{margin:0 0 6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--con-mut)}
.area-mod .ap-sub{text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}
.am-state{font-size:.78rem;font-weight:600;margin-bottom:8px;padding:6px 9px;border-radius:6px;border-left:3px solid #5f7d97;background:rgba(95,125,151,.1);color:#a9bccc}
.am-state.am-l1{border-left-color:#e0a23a;background:rgba(224,162,58,.1);color:#e6c98a}
.am-state.am-l2{border-left-color:#2fae7a;background:rgba(47,174,122,.12);color:#7fe0ad}
.area-mod .ap-note{font-size:.72rem;color:var(--con-mut);line-height:1.45;margin:7px 0 0}
.area-pts,.area-sol{border-top:1px solid var(--con-line);padding-top:10px;margin-top:12px}
.area-pts h4,.area-sol h4,.area-act h4{margin:0 0 6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--con-mut)}
.area-pts .ap-sub,.area-sol .ap-sub{text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}
.area-sol .ap-note{font-size:.72rem;color:var(--con-mut);line-height:1.45;margin:7px 0 0}
.area-sol .sol-deploy{margin:0}
.area-sol .area-sol-all{margin-top:9px}
.area-pts .ap-btn{font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;color:#f2cd82;background:linear-gradient(180deg,#352713,#241a0c);border:1px solid #e6a93f;border-radius:3px;padding:3px 9px}
.area-pts .ap-btn:hover{color:#fff}
.area-pts .ap-btn:disabled{opacity:.4;cursor:not-allowed;color:var(--con-mut);border-color:#2a3a48;background:none}
.area-pts .ap-note{font-size:.72rem;color:var(--con-mut);line-height:1.45;margin:7px 0 0}
.sim-layer .kpi-impact{font-size:.72rem;font-weight:600;color:#7fd0a0;margin:0 0 6px;line-height:1.35}
.sim-end .end-recap{font-size:.92rem;line-height:1.6;color:#cfe0ec;margin:10px 0 4px}
.end-tl{margin:14px auto 6px;max-width:540px;text-align:left;background:rgba(9,20,31,.55);border:1px solid var(--con-line2);border-radius:10px;padding:12px 14px}
.etl-h{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7fc6e8;margin-bottom:8px}
.etl-list{list-style:none;margin:0;padding:0}
.etl-list li{display:flex;gap:10px;align-items:baseline;padding:3px 0 3px 10px;border-left:2px solid rgba(67,189,242,.35)}
.etl-list li:last-child{border-left-color:#56e8b0}
.etl-q{flex:0 0 auto;min-width:52px;font-size:.68rem;font-weight:700;color:#8fd6f4;font-variant-numeric:tabular-nums}
.etl-t{font-size:.78rem;color:#cfe3ee;line-height:1.45}
.goal-week{display:flex;flex-direction:column;gap:3px;background:rgba(9,20,31,.6);border:1px solid var(--con-line2);border-left:3px solid #f0c049;border-radius:0 9px 9px 0;padding:8px 10px;margin:8px 0}
.gw-h{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f0c049;margin-bottom:2px}
.gw-it{font-size:.74rem;color:#b9cbd8;line-height:1.4}
.gw-it.done{color:#5fe0ad;text-decoration:line-through;text-decoration-color:rgba(95,224,173,.5)}
.gw-note{font-size:.64rem;color:#7fa6be;margin-top:3px}
/* framework page → layer guide links */
.go-deeper{text-align:center;margin:18px 0 4px;font-weight:600}
.x-guide{font-weight:600;white-space:nowrap}
/* layer-guide page visuals: white card, animated inline svg (animations gated in each component) */
.layer-viz{max-width:680px;margin:12px auto 28px;background:#fff;border:1px solid #e2e8ee;border-radius:14px;padding:14px 10px 4px;box-shadow:0 10px 30px -18px rgba(11,33,56,.25)}
.layer-viz.viz-wide{max-width:772px}
.layer-viz svg{display:block;width:100%;height:auto}
.viz-cap{text-align:center;font-size:.82rem;color:#5f7280;margin:8px 8px 10px;line-height:1.45} /* AA on the white viz card */
@media (max-width:680px){.end-tl{padding:10px 10px}.etl-q{min-width:44px}}
.sim-end .end-reason{font-size:.9rem;line-height:1.55;color:#f0b59a;margin:8px 0 2px;font-weight:600}
.sim-layer.locked .kpi-impact{color:#5a7a68}
.layer-grp{grid-column:1/-1;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--con-mut);margin:8px 0 -2px;border-top:1px solid var(--con-line);padding-top:10px}
.layer-grp:first-child{margin-top:0;border-top:0;padding-top:0}
.sim-advisors{margin-bottom:16px}
.adv-toggle{width:100%;display:flex;align-items:center;gap:13px;font:inherit;text-align:left;cursor:pointer;background:linear-gradient(90deg,rgba(67,189,242,.12),rgba(67,189,242,.03));border:1px solid rgba(67,189,242,.34);border-left:4px solid var(--con-cy);border-radius:12px;padding:12px 16px;color:var(--con-ink);transition:background .15s,border-color .15s}
.adv-toggle:hover{background:linear-gradient(90deg,rgba(67,189,242,.2),rgba(67,189,242,.06));border-color:var(--con-cy)}
.sim-advisors.open .adv-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0}
.adv-toggle-l{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.adv-toggle-l b{color:#fff;font-size:.96rem}
.adv-toggle-hint{font-size:.76rem;color:#bcd3e3}
.adv-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:#06151f;background:var(--con-cy);border-radius:20px;padding:6px 13px}
.adv-toggle:hover .adv-cta{background:#5fc8f5}
.adv-chev{font-size:.85rem}
.adv-toggle.attn{animation:advAttn 1.8s ease-in-out infinite}
@keyframes advAttn{0%,100%{box-shadow:0 0 0 0 rgba(67,189,242,.0)}50%{box-shadow:0 0 0 4px rgba(67,189,242,.22)}}
@media (prefers-reduced-motion:reduce){.adv-toggle.attn{animation:none}}
.site-earn{font-size:.78rem;color:#5fe0ad;margin:5px 0 8px}
.site-earn b{font-variant-numeric:tabular-nums}
.site-earn.zero{color:var(--con-mut)}
.sites-tot{color:#fff}
.adv-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:var(--con-bg3);border:1px solid var(--con-line);border-top:0;border-radius:0 0 12px 12px;padding:12px 14px}
@media(max-width:640px){.adv-board{grid-template-columns:1fr}}
.adv-card{background:var(--con-bg2);border:1px solid var(--con-line);border-radius:10px;padding:11px 12px;display:flex;align-items:flex-start;gap:11px}
.adv-brief{grid-column:1/-1;background:linear-gradient(180deg,#10202e,#0c1925);border:1px solid var(--con-cy);border-radius:10px;padding:9px 13px;display:flex;align-items:center;gap:12px;box-shadow:0 0 0 1px rgba(67,189,242,.12),0 6px 18px -10px rgba(0,0,0,.6)}
.adv-brief.bad{border-color:#d14e2c;box-shadow:0 0 0 1px rgba(209,78,44,.18),0 6px 18px -10px rgba(0,0,0,.6)}
.adv-brief.good{border-color:#2fae7a}
.adv-briefbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.adv-prio{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--con-cy)}
.adv-portrait{flex:0 0 auto;width:78px;height:78px;border-radius:50%;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.38)}
.adv-portrait svg{display:block;width:100%;height:100%}
.adv-portrait-sm{width:48px;height:48px;box-shadow:0 1px 5px rgba(0,0,0,.3)}
/* subtle cross-fade when a portrait's mood changes (only applied on a real change, via emoShift()) */
.emo-shift svg{animation:emoShift .5s cubic-bezier(.2,.7,.2,1)}
@keyframes emoShift{0%{opacity:.25;transform:scale(.9)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.emo-shift svg{animation:none}}
.adv-cardbody{flex:1;min-width:0;display:flex;flex-direction:column}
.adv-id{display:flex;flex-direction:column;line-height:1.2;margin-bottom:4px}
.adv-name{color:#fff;font-size:.85rem}
.adv-role{font-size:.7rem;color:var(--con-mut)}
.adv-head{font-size:.84rem;font-weight:700;margin-bottom:4px;color:#cddae5}
.adv-head.good{color:#5fe0ad}
.adv-head.warn{color:#f1ba64}
.adv-head.info{color:#7fc4ee}
.adv-why{font-size:.76rem;color:var(--con-mut);line-height:1.45;margin:0 0 8px;flex:1;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.adv-show{align-self:flex-start;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;color:var(--con-cy);background:transparent;border:1px solid var(--con-line2);border-radius:7px;padding:5px 11px}
.adv-show:hover{border-color:var(--con-cy);background:rgba(67,189,242,.12)}
.adv-focus{animation:coachPulse 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.adv-focus{animation:none;box-shadow:0 0 0 2px var(--con-cy)}}
.sim-tip{position:absolute;z-index:90;max-width:260px;background:#0c2236;border:1px solid rgba(126,166,196,.4);color:#dbe7f0;font-size:.8rem;line-height:1.45;padding:9px 12px;border-radius:8px;box-shadow:0 12px 30px -10px rgba(0,0,0,.65);pointer-events:none;display:none}
.sim-layer{position:relative;background:var(--con-bg2);border:1px solid var(--con-line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;transition:border-color .15s,background .15s,box-shadow .15s}
.sim-layer:hover{border-color:var(--con-line2)}
.sim-layer.rec{border-color:var(--con-cy);box-shadow:0 0 0 1px rgba(67,189,242,.4),0 0 22px -6px rgba(67,189,242,.5)}
.sim-layer.locked{opacity:.72}
.rec-badge{position:absolute;top:-9px;right:12px;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#06151f;background:var(--con-cy);padding:3px 9px;border-radius:20px}
.sim-layer .prereq{font-size:.72rem;color:#f1ba64;margin:0 0 6px;line-height:1.35}
.sim-layer .unlocks{font-size:.72rem;color:var(--con-mut);margin:0 0 6px;line-height:1.35}
/* powers list clamps only at three lines (rarely hit); the title attr carries the full list.
   flex:none on the fixed lines so the flexbox can never squeeze them (overflow:hidden would zero their min-height);
   only the description (flex:1) absorbs spare card height */
.sim-layer .powers{font-size:.7rem;color:#9a8fd0;margin:0 0 6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sim-layer .powers,.sim-layer .kpi-impact,.sim-layer .prereq,.sim-layer .unlocks{flex:0 0 auto}
.sim-layer.locked .powers{color:#6a6480}
/* ---- Solutions panel ---- */
.sol-list{display:block}
/* v2: chip grid (all 8 at a glance) + ONE detail card below, sized so the panel never scrolls */
.solc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 10px}
.solc{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:2px;align-items:center;text-align:left;background:var(--con-bg2);border:1px solid var(--con-line);border-radius:10px;padding:7px 9px;cursor:pointer;transition:border-color .14s,background .14s}
.solc-ic{grid-row:1/3;font-size:1.15rem;line-height:1}
.solc-n{font-size:.68rem;font-weight:700;color:#cfe0ec;line-height:1.25}
.solc-st{grid-column:2;font-size:.62rem;color:var(--con-mut);white-space:nowrap}
.solc:hover{border-color:var(--con-cy)}
.solc.locked{opacity:.62}
.solc.on{border-color:var(--con-cy);background:rgba(67,189,242,.10)}
.solc.on .solc-n::before{content:"▸ ";color:var(--con-cy)}
.solc:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
@media (max-width:700px){.solc-grid{grid-template-columns:repeat(2,1fr)}}
.sol-detail{position:relative;background:var(--con-bg2);border:1px solid rgba(154,111,208,.35);border-radius:12px;padding:13px 14px;overflow:hidden}
.sol-detail.locked{border-color:var(--con-line)}
.sol-rib{position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#9a6fd0,#43bdf2)}
.sol-head{display:flex;align-items:center;gap:10px;margin-bottom:7px;padding-left:5px}
.sol-ic{font-size:1.4rem;line-height:1;flex:none}
.sol-h{display:flex;flex-direction:column;min-width:0}
.sol-h b{font-size:.92rem;color:#fff}
.sol-meta{font-size:.66rem;color:#9a8fd0;text-transform:uppercase;letter-spacing:.03em}
.sol-live{margin-left:auto;font-size:.66rem;font-weight:700;color:#5fe0ad;background:rgba(29,158,117,.16);padding:2px 8px;border-radius:20px;white-space:nowrap}
.sol-desc{font-size:.76rem;color:#a9bccc;line-height:1.45;margin:0 0 9px;padding-left:5px}
.sol-cov{font-size:.74rem;color:#a9bccc;line-height:1.4;margin:8px 0 0;padding:6px 9px;border-left:3px solid var(--con-cy);background:rgba(67,189,242,.07);border-radius:0 6px 6px 0}
.sol-req{font-size:.7rem;color:var(--con-mut);margin:0;padding-left:5px}
.sol-tier{display:inline-block;margin-left:6px;font-size:.62rem;font-weight:700;color:#9a8fd0;border:1px solid rgba(154,111,208,.4);border-radius:20px;padding:1px 7px}
.sol-ainote{font-size:.68rem;line-height:1.4;margin:0 0 8px;padding-left:5px}
.sol-ainote.ok{color:#7fd0a0}
.sol-ainote.warn{color:#e0b26a}
.sol-req .req-ok{color:#5fe0ad}.sol-req .req-no{color:#f1ba64}
.sol-sites{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-left:5px}
.sol-sites-l{font-size:.66rem;color:var(--con-mut);margin-right:2px}
.sol-site{font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:20px}
.sol-site.live{background:rgba(29,158,117,.2);color:#5fe0ad}
.sol-site.brittle{background:rgba(186,117,23,.2);color:#f1ba64}
.sol-deploy{font-size:.74rem;font-weight:700;color:#cfe0ec;background:rgba(67,189,242,.12);border:1px solid rgba(67,189,242,.32);border-radius:8px;padding:6px 12px;cursor:pointer;transition:background .14s,border-color .14s}
.sol-deploy:hover:not(:disabled){background:rgba(67,189,242,.22);border-color:var(--con-cy)}
/* a deployable solution reads as a clear action button (was an easy-to-miss faint pill) */
.sol-deploy.ready{background:var(--con-cy);border-color:var(--con-cy);color:#04223a}
.sol-deploy.ready:hover{background:#5fcdf5;border-color:#5fcdf5}
.sol-deploy:disabled{opacity:.5;cursor:not-allowed}
.sol-deploy:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
/* capacity banner — explicit "what you can do / why a build is blocked" */
.cap-banner{font-size:.8rem;line-height:1.4;border-radius:8px;padding:6px 11px;margin:0 0 8px;border:1px solid var(--con-line)}
.cap-banner.have{background:rgba(67,189,242,.08);border-color:rgba(67,189,242,.3);color:#cddae5}
.cap-banner.have b{color:#fff}
.cap-banner.used{background:rgba(224,162,58,.14);border-color:rgba(224,162,58,.5);color:#ffd28a}
.cap-banner.used b{color:#fff}
.sol-deploy.rebuild{color:#f1ba64;background:rgba(186,117,23,.12);border-color:rgba(186,117,23,.34)}
.sol-deploy.rebuild:hover:not(:disabled){background:rgba(186,117,23,.22)}
.sol-deploy:disabled{opacity:.4;cursor:not-allowed}
.sim-layer h4{margin:0 0 4px;font-size:.98rem;color:#fff}
.sim-layer .sl-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sim-layer .sl-head h4{margin:0 0 4px}
.layer-learn{flex:0 0 auto;font-family:inherit;font-size:.66rem;font-weight:700;background:none;cursor:pointer;color:var(--con-cy);text-decoration:none;border:1px solid var(--con-line2);border-radius:6px;padding:2px 7px;white-space:nowrap;opacity:.85}
.layer-learn:hover{opacity:1;border-color:var(--con-cy);background:rgba(67,189,242,.12)}
.sim-layer .lv{align-self:flex-start;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 9px;border-radius:20px;margin-bottom:6px}
.lv.none{background:rgba(143,166,184,.14);color:#a7bccb}
.lv.shortcut{background:rgba(186,117,23,.2);color:#f1ba64}
.lv.foundation{background:rgba(29,158,117,.22);color:#5fe0ad}
.sim-layer p{font-size:.8rem;color:var(--con-mut);margin:0 0 8px;line-height:1.42;flex:1}
.sim-btns{display:flex;gap:8px;flex-wrap:wrap}
.sim-b{font:inherit;font-size:.8rem;font-weight:600;padding:7px 10px;border-radius:8px;border:1px solid var(--con-line2);background:rgba(255,255,255,.04);color:var(--con-ink);cursor:pointer;flex:1;min-width:0;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
.sim-b .b-fx{font-size:.58rem;font-weight:700;letter-spacing:0;opacity:.92;text-align:center}
.sim-b .b-fx.good{color:#5fe0ad}
.sim-b .b-fx.warn{color:#f1ba64}
.sim-b .b-fx.bad{color:#ff8473}
.sim-b .b-fx.info{color:#9fb4c4}
#sim-rollout{flex:0 0 auto;padding:8px 16px}
#sim-rollout .b-fx{font-size:.62rem;font-weight:600;opacity:.95;color:#9fd3ef}
.sim-b:hover:not(:disabled){border-color:var(--con-cy);background:rgba(67,189,242,.12)}
.sim-b.found{border-color:rgba(29,158,117,.6);color:#5fe0ad}
.sim-b.found:hover:not(:disabled){border-color:#1d9e75;background:rgba(29,158,117,.16)}
.sim-b.short{border-color:rgba(186,117,23,.6);color:#f1ba64}
.sim-b.short:hover:not(:disabled){border-color:#ba7517;background:rgba(186,117,23,.16)}
.sim-b:disabled{opacity:.32;cursor:not-allowed}
.sim-bar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.sim-bar-actions .btn{margin:0}
.sim .btn-line{border-color:var(--con-line2);color:var(--con-ink);background:transparent}
.sim .btn-line:hover{border-color:var(--con-cy);background:rgba(67,189,242,.12)}
.sim-log{background:var(--con-bg3);border:1px solid var(--con-line);border-radius:10px;padding:12px 16px;max-height:220px;overflow-y:auto;font-size:.84rem;font-variant-numeric:tabular-nums}
.sim-log p{margin:0 0 7px}
.sim-log p:last-child{margin-bottom:0}
.sim-log .lg-q{font-weight:700;color:#fff;margin-top:4px}
.sim-log .lg-good{color:#5fe0ad}
.sim-log .lg-bad{color:#ff8473}
.sim-log .lg-info{color:#b6c6d4}
.sim.pregame>*:not(#sim-intro):not(.sim-modal){display:none}/* keep overlay modals (Settings, "Start a new run?" confirm) visible on the start menu — they attach to #sim */
.sim.pregame{padding-bottom:4px}
.sim.pregame #sim-intro{margin-bottom:0}
.sim-intro{background:var(--con-bg2);border:1px solid var(--con-line);border-left:4px solid var(--con-cy);border-radius:12px;padding:18px 22px;margin-bottom:18px}
.sim-intro h3{margin:0 0 8px;font-size:1.2rem;color:#fff}
.sim-intro p{margin:0 0 10px;color:#cddae5}
.sim-intro ul{margin:0 0 16px;padding-left:20px}
.sim-intro li{margin:0 0 7px;color:#cddae5}
.sim-intro li b{color:#fff}
.sim-intro .btn{margin:0}
.intro-eyebrow{display:inline-block;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--con-cy);background:rgba(67,189,242,.14);padding:4px 11px;border-radius:20px;margin-bottom:10px}
.sim-intro .intro-lede{font-size:.95rem;line-height:1.6}
/* conversion-focused menu: hook + one-click quick start + collapsible advanced */
.setup-hook{font-size:1rem;line-height:1.6;color:var(--con-ink);margin:0 0 14px}
.setup-hook .setup-time{display:inline-block;margin-top:6px;font-size:.86rem;font-weight:700;color:#7fe0b4}
.btn.setup-quick{display:block;width:100%;font-size:1.05rem;padding:14px 20px;margin:0 0 10px}
/* start-menu mode cards: Daily / Custom / Career are all visible up front; the open one expands inline */
.setup-ways{margin:16px 0 8px}
.mode-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;cursor:pointer;background:var(--con-bg3);border:1px solid var(--con-line);border-radius:11px;padding:12px 15px;margin:0 0 8px;color:var(--con-ink);transition:border-color .14s,background .14s}
.mode-card:hover{border-color:var(--con-cy)}
.mode-card.open{border-color:var(--con-cy);background:rgba(67,189,242,.08);margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.mode-card:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
.mode-card .mc-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mode-card .mc-t b{color:#fff;font-size:.94rem}
.mode-card .mc-t span{font-size:.76rem;color:var(--con-mut);line-height:1.4}
.mode-card .mc-chev{flex:none;font-size:.9rem;color:var(--con-mut)}
.mode-card.open .mc-chev{color:var(--con-cy)}
.mode-body{border:1px solid var(--con-cy);border-top:0;border-radius:0 0 11px 11px;padding:14px 15px 15px;margin:0 0 8px;background:rgba(10,26,40,.5)}
.mode-body .btn{display:block;width:100%;margin-top:4px}
.setup-settings{display:block;margin:12px auto 0;font:inherit;font-size:.82rem;cursor:pointer;background:transparent;border:0;color:var(--con-mut);text-decoration:underline;text-underline-offset:3px}
.setup-settings:hover{color:var(--con-ink)}
.setup-settings:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px;border-radius:4px}
/* settings modal */
#sim-settings .set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--con-line)}
#sim-settings .set-k{font-weight:700;color:var(--con-ink)}
#sim-settings .set-segs{display:inline-flex;gap:0;border:1px solid var(--con-line2);border-radius:8px;overflow:hidden}
#sim-settings .set-seg{font:inherit;font-size:.82rem;cursor:pointer;background:var(--con-bg3);border:0;border-left:1px solid var(--con-line2);color:var(--con-mut);padding:7px 13px}
#sim-settings .set-seg:first-child{border-left:0}
#sim-settings .set-seg.on{background:var(--con-cy);color:#04223a;font-weight:700}
#sim-settings .set-seg:focus-visible{outline:2px solid var(--con-cy);outline-offset:-2px}
#sim-settings .set-note{font-size:.78rem;color:var(--con-mut);margin:10px 0 0}
#sim-settings .set-menubtn{font:inherit;font-size:.82rem;cursor:pointer;background:rgba(67,189,242,.12);border:1px solid rgba(67,189,242,.45);color:#9bd9f5;border-radius:8px;padding:7px 13px}
#sim-settings .set-menubtn:hover{background:rgba(67,189,242,.22);color:#fff}
#sim-settings .set-menubtn:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
#sim-settings .set-danger .set-k{color:#f0a88e}
#sim-settings .set-resetbtn{font:inherit;font-size:.82rem;cursor:pointer;background:rgba(209,78,44,.14);border:1px solid rgba(209,78,44,.5);color:#f0a88e;border-radius:8px;padding:7px 13px}
#sim-settings .set-resetbtn:hover{background:rgba(209,78,44,.26);color:#fff}
#sim-settings .set-resetbtn:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
.sim-intro .intro-lede b{color:#fff}
.intro-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.82rem;color:var(--con-mut);margin:0 0 14px}
.intro-name input{flex:1;min-width:160px;font:inherit;font-size:.9rem;color:#fff;background:rgba(0,0,0,.28);border:1px solid var(--con-line2);border-radius:8px;padding:8px 11px}
.intro-name input:focus{outline:none;border-color:var(--con-cy);box-shadow:0 0 0 2px rgba(67,189,242,.25)}
.intro-how{margin:0 0 16px;padding-left:20px}
.setup-grp{margin:0 0 14px}
.setup-lbl{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--con-mut);margin:0 0 8px}
.setup-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:560px){.setup-cards{grid-template-columns:1fr}}
.setup-card{--ic:var(--con-cy);text-align:left;font:inherit;cursor:pointer;background:var(--con-bg2);border:1px solid var(--con-line);border-left:4px solid transparent;border-radius:10px;padding:11px 14px;display:flex;flex-direction:column;gap:3px;transition:border-color .15s,background .15s}
.setup-card:hover{border-color:var(--con-line2)}
.setup-card b{color:#fff;font-size:.92rem}
.setup-card span{color:var(--con-mut);font-size:.76rem;line-height:1.4}
.setup-card.sel{border-color:var(--ic);border-left-color:var(--ic);background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--ic) inset}
.setup-card.sel b{color:var(--ic)}
/* Continue/New entry on the start menu — Continue is the primary action when a run is in progress */
.setup-continue{display:block;width:100%;text-align:left;cursor:pointer;font:inherit;background:linear-gradient(90deg,rgba(67,189,242,.30),rgba(67,189,242,.10));border:2px solid var(--con-cy);border-radius:12px;padding:15px 18px;margin:0 0 10px;color:var(--con-ink);box-shadow:0 0 0 3px rgba(67,189,242,.12)}
.setup-continue:hover{background:linear-gradient(90deg,rgba(67,189,242,.42),rgba(67,189,242,.16))}
.setup-continue:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
.setup-continue .sc-eye{display:block;font-size:1.08rem;font-weight:800;color:#fff;margin-bottom:3px}
.setup-continue .sc-meta{display:block;font-size:.82rem;color:#bfe4f5}
.setup-resumenote{font-size:.82rem;line-height:1.55;color:var(--con-mut);margin:0 0 14px}
.setup-resumenote b{color:var(--con-ink)}
.setup-or{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.setup-or::before,.setup-or::after{content:"";flex:1;height:1px;background:var(--con-line2)}
.setup-or span{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--con-mut)}
#sim-settings .set-resetnote{font-size:.76rem;line-height:1.5;color:#c99;margin:8px 0 0}
#sim-settings .set-resetnote b{color:#f0a88e}
/* a friend's challenge banner */
.setup-challenge{background:linear-gradient(90deg,rgba(255,194,74,.16),rgba(255,194,74,.04));border:1px solid rgba(255,194,74,.5);border-left:3px solid #ffc24a;border-radius:11px;padding:12px 15px;margin:0 0 14px}
.setup-challenge .sch-eye{display:block;font-size:.9rem;font-weight:800;color:#ffd98a;margin-bottom:3px}
.setup-challenge .sch-meta{display:block;font-size:.82rem;color:#cddae5}
/* career / season mode */
#setup-career .mc-t b{color:#e6dbf5} /* career keeps its purple identity on the shared mode-card chassis */
#setup-career:hover{border-color:rgba(155,111,208,.7)}
.career-intro{font-size:.92rem;line-height:1.55;color:var(--con-mut)}
.career-map{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.career-ch{display:flex;align-items:center;gap:12px;background:var(--con-bg3);border:1px solid var(--con-line);border-radius:10px;padding:10px 13px}
.career-ch .cch-n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:rgba(255,255,255,.06);color:var(--con-mut)}
.career-ch .cch-body b{color:#fff;font-size:.95rem}
.career-ch .cch-sub{display:block;font-size:.78rem;color:var(--con-mut)}
.career-ch.career-done{border-color:rgba(47,174,122,.45)} .career-ch.career-done .cch-n{background:rgba(47,174,122,.2);color:#5fe0ad}
.career-ch.career-current{border-color:var(--con-cy);box-shadow:0 0 0 1px var(--con-cy) inset} .career-ch.career-current .cch-n{background:var(--con-cy);color:#04223a}
.career-ch.career-locked{opacity:.6}
.career-done{text-align:center;margin:10px 0}
.career-done .cd-eye{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#cbb4f0}
.career-done .cd-rank{font-size:1.8rem;font-weight:800;color:#fff;margin:4px 0}
.career-done .cd-sum{color:var(--con-mut)} .career-done .cd-sum b{color:#ffd98a}
.end-career{margin:14px auto 0;max-width:60ch;text-align:center;background:rgba(155,111,208,.1);border:1px solid rgba(155,111,208,.35);border-radius:10px;padding:10px 14px}
.end-career .ec-eye{display:block;font-weight:800;color:#cbb4f0}
.end-career .ec-sum{display:block;font-size:.85rem;color:var(--con-mut);margin-top:2px}
/* "✓ Saved" autosave reassurance */
.sim-saved{position:absolute;bottom:60px;left:50%;margin-left:-46px;z-index:55;pointer-events:none;width:92px;text-align:center;font-size:.66rem;font-weight:700;letter-spacing:.04em;color:#9be8c6;background:rgba(8,22,34,.9);border:1px solid rgba(47,174,122,.45);border-radius:20px;padding:3px 0;opacity:0;transition:opacity .3s}
.sim-saved.show{opacity:1}
.setup-record{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 14px;padding:9px 14px;border:1px solid var(--con-line);border-left:3px solid var(--con-cy);border-radius:10px;background:var(--con-bg3);font-size:.82rem;color:var(--con-mut)}
.setup-record .sr-item{display:inline-flex;align-items:center;gap:5px}
.setup-record .sr-best b{color:#ffd98a;font-variant-numeric:tabular-nums;font-size:.95rem} .setup-record .sr-item b{color:#fff}
.setup-record .sr-last{color:#cddae5}
@media (max-width:520px){.setup-record .sr-last{flex-basis:100%}}
.daily-card{background:var(--con-bg2);border:1px solid var(--con-line);border-radius:11px;padding:13px 16px;margin:0 0 14px}
.daily-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.daily-date{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--con-cy)}
.daily-done{font-size:.74rem;font-weight:700;color:#5fe0ad}
.daily-streak{font-size:.74rem;font-weight:800;color:#ffd98a}
/* screen-reader-only live region */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* keyboard-accessible "needs attention" row (down areas → open the area panel) */
.goal-attention{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.goal-attention .att-area{font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;background:linear-gradient(90deg,rgba(209,78,44,.18),rgba(209,78,44,.05));border:1px solid rgba(255,91,82,.55);color:#ffb3a8;border-radius:8px;padding:6px 11px}
.goal-attention .att-area:hover{background:rgba(209,78,44,.3);color:#fff}
.goal-attention .att-area:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
.daily-lb .lb-stand{color:#9fd8f2;font-weight:700}
.lb-optin{font:inherit;font-size:.8rem;cursor:pointer;background:rgba(67,189,242,.12);border:1px solid var(--con-cy);color:#cfe9fb;border-radius:8px;padding:5px 11px}
.lb-optin:hover{background:rgba(67,189,242,.2)}
/* locked setup cards (cross-run unlocks) */
.setup-card.locked{cursor:not-allowed;opacity:.6;background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 6px,transparent 6px 12px),var(--con-bg3)}
.setup-card.locked b{color:var(--con-mut)}
.setup-card.locked span{color:var(--con-mut)}
.daily-row{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--con-line);font-size:.84rem}
.daily-row:first-of-type{border-top:0}
.dl-k{flex:0 0 78px;color:var(--con-mut);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.dl-v{color:#e7eef4;font-weight:600}
.dl-v.gold{color:#ffc24a;font-weight:600}
.daily-mods{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.daily-mods li{font-size:.8rem;color:var(--con-mut);line-height:1.4}
.daily-mods li b{color:#ff9d6e}
.daily-note{font-size:.78rem;color:var(--con-mut);margin:10px 0 0;font-style:italic}
.goal-daily{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(67,189,242,.08);border:1px solid rgba(67,189,242,.28);border-radius:8px;padding:7px 11px;margin-bottom:10px;font-size:.76rem}
/* program-standing read (colourblind-safe: icon + word + border, not colour alone) */
.goal-standing{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:8px;padding:6px 11px;margin-bottom:10px;font-size:.78rem;border:1px solid var(--con-line);background:var(--con-bg2)}
.gst-pill{display:inline-flex;align-items:center;gap:7px;color:#cddae5}
.gst-pill b{color:#fff}
.gst-ic{font-size:.95rem;line-height:1}
.gst-trend{font-size:.72rem;color:var(--con-mut);font-variant-numeric:tabular-nums}
.gst-warn{flex-basis:100%;font-size:.74rem;line-height:1.4;color:#f1ba64;margin-top:2px}
/* plant-floor health summary — text/icon mirror of the canvas beacons (colourblind-safe) */
.plant-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:8px;padding:6px 11px;margin-bottom:10px;font-size:.78rem;border:1px solid var(--con-line);background:var(--con-bg2)}
.plant-status .ps-head{font-weight:700;color:#cddae5}
.plant-status.ps-ok{border-left:3px solid #2fae7a}
.plant-status.ps-warn{border-left:3px solid #e0a23a}
.plant-status.ps-down{border-left:3px solid #d14e2c;background:rgba(209,78,44,.10)}
.plant-status .ps-segs{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto}
.plant-status .ps-seg{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:20px;border:1px solid var(--con-line);background:rgba(255,255,255,.03)}
.plant-status .ps-seg.ps-o{color:#7fe0b4;border-color:rgba(47,174,122,.45)}
.plant-status .ps-seg.ps-w{color:#f1ba64;border-color:rgba(224,162,58,.45)}
.plant-status .ps-seg.ps-d{color:#f0a88e;border-color:rgba(209,78,44,.5)}
button.plant-status.ps-click{width:100%;font:inherit;text-align:left;cursor:pointer}
.plant-status.ps-click:hover{border-color:var(--con-line2)}
.plant-status.ps-click.ps-down:hover{border-color:rgba(255,91,82,.8)}
.plant-status.ps-click:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
.plant-status .ps-go{color:var(--con-mut);font-weight:800;margin-left:2px}
.plant-status.ps-click:hover .ps-go{color:var(--con-cy)}
/* reverse tie: a rail row whose plant area is being hovered on the canvas gets a ring echoing the canvas glow */
.rail-area-hi{box-shadow:0 0 0 2px rgba(67,189,242,.85),0 0 12px rgba(67,189,242,.32)}
.goal-standing.gst-thriving{border-left:3px solid #2fae7a} .gst-thriving .gst-ic{color:#5fe0ad}
.goal-standing.gst-steady{border-left:3px solid #43bdf2} .gst-steady .gst-ic{color:#7fc4ee}
.goal-standing.gst-strained{border-left:3px solid #e0a23a} .gst-strained .gst-ic{color:#f1ba64}
.goal-standing.gst-risk{border-left:3px solid #d14e2c;background:rgba(209,78,44,.10)} .gst-risk .gst-ic{color:#f08c5a} .gst-risk .gst-warn{color:#f3a98c}
/* storyline chapter chip (HUD) */
.goal-chapter{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;font-size:.76rem}
.gch-tag{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--con-mut)}
.gch-act{font-weight:700;color:#cbb4f0}
.gch-last{color:var(--con-mut);font-style:italic;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* storyline timeline (Log panel) */
.story-thread{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--con-line)}
.story-thread h4{margin:0 0 9px;font-size:.85rem;color:#cbb4f0}
.st-timeline{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.st-timeline li{display:flex;gap:9px;align-items:baseline;font-size:.8rem;color:#c4d4e2;border-left:2px solid var(--con-line);padding-left:10px}
.st-timeline li.st-good{border-left-color:#2fae7a} .st-timeline li.st-bad{border-left-color:#d14e2c} .st-timeline li.st-info{border-left-color:#43bdf2}
.st-q{flex:0 0 auto;font-size:.66rem;font-weight:700;color:var(--con-mut);font-variant-numeric:tabular-nums;min-width:38px}
.st-t{min-width:0}
/* end-screen storyline finale banner */
.end-story{max-width:64ch;margin:14px auto 6px;display:flex;align-items:center;gap:14px;text-align:left;background:var(--con-bg2);border:1px solid var(--con-line);border-radius:12px;padding:14px 16px}
.end-story.arc-legacy{border-left:4px solid #2fae7a} .end-story.arc-recovered{border-left:4px solid #43bdf2} .end-story.arc-reckoning{border-left:4px solid #d14e2c}
.es-portrait{flex:0 0 auto;width:62px;height:62px;border-radius:50%;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.es-portrait svg{display:block;width:100%;height:100%}
.es-body{min-width:0}
.es-tag{display:block;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#cbb4f0;margin-bottom:5px}
.es-verdict{margin:0;font-size:.9rem;line-height:1.5;color:#dfe9f2;font-style:italic}
.gd-tag{font-weight:800;color:var(--con-cy);text-transform:uppercase;letter-spacing:.05em;font-size:.66rem}
.gd-mods{color:#ff9d6e;font-weight:600}
.gd-obj{margin-left:auto;color:#ffc24a;font-weight:700}
.gd-obj.met{color:#5fe0ad}
.end-daily{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 8px}
.ed-tag{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--con-cy)}
.ed-grade{font-size:1.5rem;font-weight:900;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff}
.ed-grade.g-S{background:rgba(255,194,74,.2);color:#ffc24a;box-shadow:0 0 18px -4px rgba(255,194,74,.6)}
.ed-grade.g-A{background:rgba(95,224,173,.18);color:#5fe0ad}
.ed-grade.g-B{background:rgba(67,189,242,.18);color:#43bdf2}
.ed-grade.g-C,.ed-grade.g-D{background:rgba(255,132,115,.16);color:#ff8473}
.ed-obj{font-size:.86rem;font-weight:700;margin:0 0 10px!important}
.ed-obj.met{color:#5fe0ad}
.ed-obj.miss{color:#ff8473}
/* run grade chip (shown on every run, not just daily) — letter conveys rank; colour is supplementary (colourblind-safe) */
.end-graderow{text-align:center;margin:-4px 0 10px}
.end-grade{display:inline-flex;align-items:center;font-size:.8rem;font-weight:800;letter-spacing:.02em;padding:2px 10px;border-radius:20px;vertical-align:middle;background:rgba(255,255,255,.08);color:#fff}
.end-grade.g-S{background:rgba(255,194,74,.2);color:#ffc24a} .end-grade.g-A{background:rgba(95,224,173,.18);color:#5fe0ad} .end-grade.g-B{background:rgba(67,189,242,.18);color:#43bdf2} .end-grade.g-C,.end-grade.g-D{background:rgba(255,132,115,.16);color:#ff8473}
/* named win tier badge (arc + score) */
.end-tier{display:inline-block;margin:2px auto 12px;font-size:1.05rem;font-weight:800;letter-spacing:.01em;padding:7px 18px;border-radius:24px;border:1px solid var(--con-line2);background:rgba(255,255,255,.05);color:#eaf2f8}
.end-tier.arc-legacy{border-color:rgba(255,194,74,.55);background:linear-gradient(90deg,rgba(255,194,74,.16),rgba(255,194,74,.04));color:#ffd98a}
.end-tier.arc-recovered{border-color:rgba(95,224,173,.5);background:linear-gradient(90deg,rgba(95,224,173,.16),rgba(95,224,173,.04));color:#8fe9c4}
.end-tier.arc-reckoning,.end-tier.arc-none{border-color:rgba(67,189,242,.45);background:linear-gradient(90deg,rgba(67,189,242,.14),rgba(67,189,242,.03));color:#9fd8f2}
/* "play again with what you learned" tip */
.end-next{margin:16px auto 0;max-width:60ch;text-align:left;background:rgba(67,189,242,.08);border:1px solid rgba(67,189,242,.3);border-left:3px solid var(--con-cy);border-radius:10px;padding:11px 15px}
.end-next .en-h{display:block;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--con-cy);margin-bottom:5px}
.end-next p{margin:0;font-size:.9rem;color:#dbe7f0;line-height:1.55}
/* run history */
.end-history{margin:14px auto 0;max-width:60ch;text-align:left}
.rh-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:7px}
.rh-htag{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--con-mut)}
.rh-best{font-size:.82rem;color:#cddae5;font-variant-numeric:tabular-nums} .rh-best b{color:#fff} .rh-pb{color:#ffd98a;font-weight:800}
.rh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.rh-list li{display:flex;align-items:center;gap:9px;font-size:.84rem;background:var(--con-bg3);border:1px solid var(--con-line);border-radius:8px;padding:5px 11px}
.rh-ic{font-weight:800;width:14px;text-align:center} .rh-win .rh-ic{color:#5fe0ad} .rh-lose .rh-ic{color:#ff8473}
.rh-lbl{flex:1;min-width:0;color:#dbe7f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-grade{font-weight:800;font-size:.74rem;padding:1px 7px;border-radius:6px;background:rgba(255,255,255,.07)}
.rh-grade.g-S{color:#ffc24a} .rh-grade.g-A{color:#5fe0ad} .rh-grade.g-B{color:#43bdf2} .rh-grade.g-C,.rh-grade.g-D{color:#ff8473}
.rh-score{font-variant-numeric:tabular-nums;font-weight:700;color:#fff;min-width:42px;text-align:right}
.end-ach{margin:14px auto 0;max-width:60ch}
.ea-h{display:block;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--con-mut);margin-bottom:7px}
.ea-badges{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.ea-badge{font-size:.76rem;font-weight:700;color:#ffc24a;background:rgba(255,194,74,.12);border:1px solid rgba(255,194,74,.4);border-radius:20px;padding:4px 11px;animation:starPop .5s cubic-bezier(.2,1.5,.4,1) backwards}
.setup-ach{margin-top:14px}
.ach-toggle{width:100%;font:inherit;font-size:.84rem;font-weight:700;text-align:left;cursor:pointer;background:var(--con-bg3);border:1px solid var(--con-line);border-radius:10px;padding:10px 14px;color:#cddae5;display:flex;justify-content:space-between;align-items:center}
.ach-toggle:hover{border-color:var(--con-line2)}
.ach-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
@media(max-width:560px){.ach-grid{grid-template-columns:1fr}}
.ach-cell{display:flex;gap:10px;align-items:center;background:var(--con-bg2);border:1px solid var(--con-line);border-radius:9px;padding:9px 11px;opacity:.5;filter:grayscale(.6)}
.ach-cell.got{opacity:1;filter:none;border-color:rgba(255,194,74,.4);background:rgba(255,194,74,.06)}
.ach-i{font-size:1.3rem;flex:0 0 auto}
.ach-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ach-tx b{color:#fff;font-size:.84rem}
.ach-tx span{color:var(--con-mut);font-size:.72rem}
.ach-cell.got .ach-tx b{color:#ffc24a}
.sim-end-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
@media (max-width:560px){
  .sim-bar-actions{flex-direction:column;align-items:stretch}
  .sim-bar-actions .btn,.sim-bar-actions .sim-b{width:100%;flex:1 1 auto}
  .sim-stat{min-width:calc(50% - 5px)}
}
.sim-end{background:linear-gradient(180deg,#10293f,#0b1d2e);border:1px solid var(--con-line2);border-top:4px solid var(--con-cy);border-radius:16px;padding:30px;text-align:center;margin-top:18px}
.sim-end.win{border-top-color:#1d9e75;box-shadow:0 0 46px -12px rgba(29,158,117,.45)}
.sim-end.lose{border-top-color:#e24b4a}
.sim-end h3{font-size:1.6rem;margin:0 0 6px;color:#fff}
.sim-end .grade{font-size:1.05rem;font-weight:700;color:var(--con-cy);margin:0 0 12px}
.end-stars{font-size:2rem;letter-spacing:6px;line-height:1;margin:4px 0 6px}
.end-stars .st-on{color:#ffc24a;text-shadow:0 0 14px rgba(255,194,74,.6)}
.end-stars .st-off{color:rgba(255,255,255,.16)}
.end-score{font-size:1.3rem;font-weight:800;color:#fff;margin:0 0 10px!important;font-variant-numeric:tabular-nums}
/* z66 keeps the Guide ABOVE an open panel (mobile panels are z60) so its next step stays visible while
   you're inside Projects/etc.; still below event modals (z80), which pause the tutorial anyway */
#sim-coach{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:66;display:none;align-items:center;gap:14px;max-width:min(680px,92%);background:rgba(9,23,38,.97);border:1px solid var(--con-cy);border-radius:12px;padding:12px 16px;box-shadow:0 16px 40px -10px rgba(0,0,0,.7)}
#sim-coach .coach-tag{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#06151f;background:var(--con-cy);padding:4px 9px;border-radius:20px;flex:0 0 auto}
/* Norman fronts the Guide: portrait + name stack ahead of the message */
#sim-coach .coach-norm{flex:0 0 auto;width:42px;height:42px;border-radius:50%;overflow:hidden;box-shadow:0 3px 9px rgba(0,0,0,.5)}
#sim-coach .coach-norm svg{display:block;width:100%;height:100%}
#sim-coach .coach-id{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:0 0 auto}
#sim-coach .coach-id b{font-size:.82rem;color:#fff;line-height:1}
.nd-head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.nd-head h4{margin:0}
.nd-port{flex:0 0 auto;width:46px;height:46px;border-radius:50%;overflow:hidden;box-shadow:0 3px 9px rgba(0,0,0,.5)}
.nd-port svg{display:block;width:100%;height:100%}
#sim-coach .coach-txt{font-size:.88rem;line-height:1.45;color:#dbe7f0;flex:1}
#sim-coach .coach-txt b{color:#fff}
#sim-coach .coach-skip{font:inherit;font-size:.78rem;font-weight:700;flex:0 0 auto;cursor:pointer;color:var(--con-cy);background:transparent;border:1px solid var(--con-line2);border-radius:8px;padding:6px 12px}
#sim-coach .coach-skip:hover{border-color:var(--con-cy);background:rgba(67,189,242,.12)}
.coach-pulse{animation:coachPulse 1.5s ease-in-out infinite}
@keyframes coachPulse{0%,100%{box-shadow:0 0 0 1px rgba(67,189,242,.5),0 0 0 0 rgba(67,189,242,.45)}50%{box-shadow:0 0 0 1px rgba(67,189,242,.8),0 0 26px 4px rgba(67,189,242,.5)}}
@media (prefers-reduced-motion:reduce){.coach-pulse{animation:none;box-shadow:0 0 0 2px var(--con-cy)}}
/* launch hint on the fullscreen toggle: flashes only while the Guide's first step is up */
.hud-fs.fs-hint{animation:fsHint 1.1s ease-in-out infinite}
@keyframes fsHint{0%,100%{box-shadow:0 0 0 0 rgba(67,189,242,0)}50%{box-shadow:0 0 0 1px rgba(67,189,242,.9),0 0 18px 5px rgba(67,189,242,.55)}}
@media (prefers-reduced-motion:reduce){.hud-fs.fs-hint{animation:none;box-shadow:0 0 0 2px var(--con-cy)}}
@media (max-width:560px){#sim-coach{flex-wrap:wrap;bottom:10px}#sim-coach .coach-txt{flex:1 1 100%;order:3}}
.sim-end p{max-width:60ch;margin:0 auto 8px;color:#cddae5}
/* post-game learning recap — the educational payload */
.end-learn{max-width:64ch;margin:18px auto 6px;text-align:left;background:var(--con-bg2);border:1px solid var(--con-line);border-left:3px solid var(--con-cy);border-radius:12px;padding:16px 18px}
.end-learn h4{margin:0;font-size:.95rem;color:#dff1ff;text-align:left}
.lr-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lr-list li{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.5;color:#c4d4e2}
.lr-list li b{color:#fff;font-weight:700}
.lr-i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;margin-top:1px}
.lr-ok .lr-i{background:rgba(47,174,122,.18);color:#5fe0ad;border:1px solid rgba(47,174,122,.5)}
.lr-no .lr-i{background:rgba(224,140,90,.16);color:#f1ba64;border:1px solid rgba(224,140,90,.5)}
.lr-more{display:inline-block;margin-top:13px;font-size:.8rem;font-weight:700;color:var(--con-cy);text-decoration:none;border:1px solid var(--con-line2);border-radius:7px;padding:6px 12px}
.lr-more:hover{border-color:var(--con-cy);background:rgba(67,189,242,.12)}

.sim-sites{background:var(--con-bg2);border:1px solid var(--con-line);border-radius:12px;padding:14px 16px;margin-bottom:18px}
.sites-head{margin-bottom:10px}
.sites-head b{font-size:1.02rem;color:#fff}
.site-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:9px}
.site-card{background:var(--con-bg3);border:1px solid var(--con-line);border-radius:10px;padding:8px 11px;cursor:pointer;transition:border-color .15s,box-shadow .15s;text-align:left}
.site-card:hover{border-color:var(--con-line2)}
.site-card.sel{border-color:var(--con-cy);box-shadow:0 0 0 1px rgba(67,189,242,.4)}
.site-card.lag{border-left:3px solid #ba7517}
.site-card:focus-visible{outline:none;border-color:var(--con-cy);box-shadow:0 0 0 2px var(--con-cy)}
/* visible focus rings for every interactive game control (the dark theme shouldn't lean on the faint UA default) */
.sim .sim-b:focus-visible,.sim .tb-btn:focus-visible,.sim .gp-close:focus-visible,.sim #sim-end:focus-visible,.sim .pmode:focus-visible,.sim .grp-tab:focus-visible,.sim .sol-deploy:focus-visible,.sim .site-mod:focus-visible,.sim .hud-fs:focus-visible,.sim .fx-ctrl:focus-visible,.sim .layer-learn:focus-visible,.sim .goal-next:focus-visible,.sim .arch-lens button:focus-visible{outline:2px solid var(--con-cy);outline-offset:2px}
.site-h{font-size:.9rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:6px}
.site-now{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#06151f;background:var(--con-cy);padding:2px 6px;border-radius:10px}
.site-meta{font-size:.74rem;color:#cddae5;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.site-kpis{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;margin:5px 0 6px}
.skpi{font-size:.68rem;color:var(--con-mut);display:flex;justify-content:space-between;gap:6px}
.skpi b{font-variant-numeric:tabular-nums;font-weight:700}
.skpi.ok b{color:#5fe0ad}
.skpi.warn b{color:#f1ba64}
.site-status{font-size:.72rem;color:var(--con-mut);margin-bottom:8px}
.site-card.lag .site-status{color:#f1ba64}
.site-card .site-mod{width:100%;margin-top:2px}
/* Sites panel: pin the footer (Roll out + network total) and scroll only the card grid, so the key action is never scrolled out of reach */
.game-panel[data-panel="sites"]{overflow:hidden}
.game-panel[data-panel="sites"] #sim-expand,.game-panel[data-panel="sites"] .sim-sites{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.game-panel[data-panel="sites"] .site-cards{overflow:auto;min-height:0;flex:1 1 auto}
.game-panel[data-panel="sites"] .sites-foot{flex:0 0 auto;padding-top:10px;border-top:1px solid var(--con-line)}
.sites-foot{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sites-foot span{font-size:.82rem;color:var(--con-mut);flex:1;min-width:220px}
.sites-econ{display:block;margin-top:5px}
.sites-econ.good{color:#7fe0b6}
.sites-econ.warn{color:#f1ba64}
.sites-foot .btn{margin:0;white-space:nowrap}
.sim-event{background:linear-gradient(180deg,#16344f,#0e2336);border:1px solid var(--con-line2);border-left:5px solid var(--con-cy);border-radius:12px;padding:18px 20px;margin-bottom:16px;box-shadow:0 16px 38px -18px rgba(0,0,0,.65)}
.sim-ev-tag{display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#06151f;background:var(--con-cy);padding:3px 10px;border-radius:20px;margin-bottom:9px}
.story-portraitrow{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.story-portrait{flex:0 0 auto;width:72px;height:72px;border-radius:50%;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.story-portrait svg{display:block;width:100%;height:100%}
.ev-advisor{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:11px;border-bottom:1px solid var(--con-line)}
.ev-advisor .adv-av{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#06151f;font-size:.95rem}
.ev-advisor .adv-id{display:flex;flex-direction:column;line-height:1.25}
.ev-advisor .adv-name{color:#fff;font-size:.9rem}
.ev-advisor .adv-role{font-size:.72rem;color:var(--con-mut)}
.ev-brings{margin-left:auto;font-size:.72rem;font-style:italic;color:var(--con-mut)}
.sim-event h3{margin:0 0 6px;font-size:1.2rem;color:#fff}
.sim-event p{margin:0 0 14px;color:#cddae5}
/* directive briefing: attributed story + labeled fact rows (structure, not colour, carries the hierarchy) */
.dir-story{margin:0 0 12px}
.dir-byline{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--con-mut);margin-bottom:4px}
.dir-brief{margin:0 0 14px;border-top:1px solid var(--con-line2)}
.db-row{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--con-line2)}
.db-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--con-cy);padding-top:2px}
.db-val{font-size:.92rem;color:#cddae5;line-height:1.5}
.db-val::first-letter{text-transform:uppercase}
@media (max-width:680px){.db-row{grid-template-columns:68px 1fr;gap:8px}}
.sim-ev-choices{display:flex;gap:10px;flex-wrap:wrap}
.sim-ev-choices .sim-b{flex:1;min-width:170px;padding:11px 14px;font-weight:600}
.sim-b:active:not(:disabled){transform:scale(.97)}
.sim .btn:active{transform:scale(.985)}
@keyframes numFlash{0%{color:var(--con-cy);text-shadow:0 0 12px rgba(67,189,242,.7)}100%{text-shadow:0 0 0 transparent}}
.num-flash{animation:numFlash .7s ease}
.sim-toasts{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:330px;pointer-events:none}
.sim-toast{background:linear-gradient(180deg,#13314c,#0e2336);border:1px solid rgba(126,166,196,.34);border-left:4px solid #43bdf2;color:#eaf2f8;font-size:.86rem;font-weight:500;padding:11px 15px;border-radius:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);opacity:0;transform:translateX(24px);transition:opacity .28s ease,transform .28s ease}
.sim-toast.show{opacity:1;transform:translateX(0)}
.sim-toast.t-good{border-left-color:#2fcf94}
.sim-toast.t-bad{border-left-color:#ff7a6b}
.sim-toast.t-info{border-left-color:#43bdf2}
@media (prefers-reduced-motion:reduce){.sim-toast{transition:opacity .2s}.num-flash{animation:none}}
.sim-modal{position:fixed;inset:0;z-index:80;background:rgba(5,12,22,.74);display:flex;align-items:center;justify-content:center;padding:20px;animation:simFade .25s ease}
.sim-modal-card{max-width:520px;width:100%;margin:0;animation:simPop .32s cubic-bezier(.2,.8,.3,1)}
/* cards WITHOUT .sim-event (Settings, Why-it-matters, …) had no background at all — text floated illegibly over the game */
.sim-modal .sim-modal-card:not(.sim-event){background:linear-gradient(180deg,#152c42,#0d1e2f);border:1px solid var(--con-line2);border-top:2px solid var(--con-cy);border-radius:14px;padding:18px 22px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8)}
.sim-modal .sim-modal-card:not(.sim-event) h3{color:#eaf2f8;margin:6px 0 12px} /* headings here had no colour rule and rendered near-black */
.kpi-detail{--kc:#43bdf2;max-width:600px;width:100%;max-height:calc(100% - 24px);overflow:auto;background:linear-gradient(180deg,#13202e,#0d1722);border:1px solid var(--con-line2);border-radius:16px;padding:0 22px 16px;position:relative;box-shadow:0 20px 50px -16px rgba(0,0,0,.7)}
.kd-x{position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid var(--con-line2);color:var(--con-mut);cursor:pointer;font-size:.85rem;line-height:1;z-index:4}
.kd-x:hover{color:#fff;border-color:var(--con-cy)}
.kd-head{display:flex;align-items:center;gap:13px;margin:0 -22px 11px;padding:13px 22px 12px;border-bottom:1px solid var(--con-line);position:relative;overflow:hidden}
.kd-head::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,var(--kc),transparent 62%);opacity:.16;pointer-events:none}
.kd-head::after{content:"";position:absolute;right:-34px;top:-46px;width:160px;height:160px;border-radius:50%;background:var(--kc);opacity:.14;filter:blur(8px);pointer-events:none}
.kd-ic{position:relative;z-index:1;flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:#0d1722;border:1px solid var(--kc);box-shadow:0 0 20px -5px var(--kc)}
.kd-htext{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.kd-name{font-size:1.14rem;font-weight:700;color:#fff;line-height:1.15}
.kd-target{font-size:.74rem;color:#9fc4d6}
.kd-vw{position:relative;z-index:1;margin-left:auto;padding-right:30px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.kd-val{font-size:1.85rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--kc);line-height:1;text-shadow:0 0 18px color-mix(in srgb,var(--kc) 45%,transparent)}
.kd-chart{position:relative;height:50px;background:#06101a;border:1px solid var(--con-line);border-radius:8px;padding:6px;margin-bottom:9px}
.kd-guide{position:absolute;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.28);pointer-events:none;z-index:2}
.kd-tip{position:absolute;top:-1px;transform:translateX(-50%);background:rgba(6,16,26,.96);border:1px solid var(--con-line2);border-radius:5px;padding:2px 7px;font-size:.68rem;font-weight:600;color:#e7eef4;white-space:nowrap;pointer-events:none;z-index:3;font-variant-numeric:tabular-nums}
.kd-chart .k-spark{display:block;width:100%;height:100%;opacity:1}
.kd-nochart{font-size:.78rem;color:var(--con-mut);text-align:center;line-height:38px}
.kd-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
@media (max-width:540px){.kd-grid{grid-template-columns:1fr}}
.kd-sec{margin-bottom:9px}
.kd-sec h5{margin:0 0 5px;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#7f97ad}
.kd-row{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.kd-row span{color:#a9bccc}.kd-row b{color:#e7eef4;font-variant-numeric:tabular-nums;white-space:nowrap}
.kd-bn p{margin:0;font-size:.83rem;line-height:1.45;color:#f0d6a0;background:rgba(224,162,58,.09);border-left:3px solid #e0a23a;padding:8px 11px;border-radius:0 8px 8px 0}
.kd-vw{position:relative;z-index:1;margin-left:auto;padding-right:30px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.kd-delta{font-size:.72rem;font-weight:700;white-space:nowrap}
.kd-delta.good{color:#5fe0ad}.kd-delta.bad{color:#ff8473}
.kd-actions{border-top:1px solid var(--con-line);padding-top:10px;margin-top:2px}
.kd-ah{margin:0 0 7px;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#7f97ad}
.kd-projs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}
@media (max-width:540px){.kd-projs{grid-template-columns:1fr}}
.kd-projrow{position:relative;display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:rgba(47,174,122,.07);border:1px solid rgba(47,174,122,.28);border-left:3px solid #2fae7a;border-radius:0 9px 9px 0;padding:7px 10px;cursor:pointer;transition:background .14s,border-color .14s,transform .1s}
.kd-projrow:hover{background:rgba(47,174,122,.16);border-color:var(--con-cy);transform:translateY(-1px)}
.kd-projrow.kd-best{border-color:var(--con-cy);background:rgba(67,189,242,.13);box-shadow:0 0 0 1px rgba(67,189,242,.35),0 7px 20px -9px rgba(67,189,242,.55)}
.kd-projrow.kd-lock{opacity:.72;border-left-color:#7a6326}
.kd-best-tag{align-self:flex-start;margin-bottom:3px;font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#06151f;background:var(--con-cy);padding:2px 8px;border-radius:20px;box-shadow:0 2px 8px -2px rgba(67,189,242,.7)}
.kd-projrow .kp-top,.kd-projrow .kp-bot{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.kd-projrow .kp-l{font-size:.82rem;font-weight:600;color:#eafff4}
.kd-projrow .kp-k{font-size:.74rem;color:#9fc4d6;font-variant-numeric:tabular-nums}
.kd-projrow .kp-cost{font-size:.7rem;color:#8fa6b8;white-space:nowrap;font-variant-numeric:tabular-nums}
.kd-projrow .kp-cost.pay-fast{color:#5fe0ad}.kd-projrow .kp-cost.pay-med{color:#e0b23a}.kd-projrow .kp-cost.pay-slow{color:#d98b6a}
.kd-projrow .kp-p{font-size:.82rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.kd-projrow .kp-p.good{color:#5fe0ad}.kd-projrow .kp-p.bad{color:#ff8473}
.kd-gap{font-size:.72rem;font-weight:700;margin-left:5px}
.kd-gap.good{color:#5fe0ad}.kd-gap.bad{color:#ff9d72}
.kd-levers{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.kd-lever{flex:1 1 auto;text-align:center}
.kd-lever.lv-debt{border-color:rgba(224,162,58,.6)!important;color:#f1ba64!important}
.kd-lever.lv-roll{border-color:rgba(47,174,122,.6)!important;color:#7fe0ad!important}
.kd-lever.lv-mod{border-color:rgba(67,189,242,.6)!important;color:#7fd0f5!important}
.kd-lever.lv-build{border-color:rgba(154,111,208,.6)!important;color:#bda6f0!important}
.kd-lever:hover{filter:brightness(1.18)}
.kpi-click{cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .1s}
.kpi-click:hover{border-color:var(--con-cy);background:rgba(67,189,242,.08);box-shadow:0 0 0 1px rgba(67,189,242,.35),0 4px 14px -6px rgba(67,189,242,.5)}
.kpi-click:hover .k-fill{filter:brightness(1.15)}
.kpi-click:active{transform:scale(.985)}
.kpi-click:focus-visible{outline:2px solid var(--con-cy);outline-offset:1px}
/* deep-dive dashboard visuals */
.kd-viz{margin:2px 0 9px}
.kd-vlabel{font-size:.68rem;color:#8fa6b8;text-align:center;margin-bottom:5px}
.kd-gauge{display:block;width:172px;max-width:48%;margin:0 auto}
.kd-stack{display:block;width:100%;height:24px;border-radius:5px;overflow:hidden;background:rgba(0,0,0,.3)}
.kd-legend{display:flex;flex-wrap:wrap;gap:3px 13px;justify-content:center;margin-top:6px}
.kl-i{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;color:#a9bccc}
.kl-i i{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.kd-cov-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:#7f97ad;margin:9px 0 5px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.kd-cov-key{font-size:.6rem;text-transform:none;letter-spacing:0;color:#6f8597;font-weight:600}
.kd-cov{display:flex;flex-direction:column;gap:3px}
.kd-cov-row{display:flex;align-items:center;gap:3px}
.kd-cov-site{flex:0 0 38px;font-size:.68rem;color:#a9bccc;text-align:right;padding-right:4px;white-space:nowrap}
.kd-cov-c{flex:1;text-align:center;font-size:.72rem;line-height:19px;border-radius:4px;min-width:0;font-variant-emoji:text}
.kd-cov-head .kd-cov-c{font-size:.82rem;opacity:.85}
.kd-cov-c.cov-live{background:rgba(29,158,117,.22);color:#5fe0ad}
.kd-cov-c.cov-brittle{background:rgba(186,117,23,.2);color:#f1ba64}
.kd-cov-c.cov-none{background:rgba(255,255,255,.05);color:#5f7d97}
.kd-cov-empty{font-size:.74rem;color:var(--con-mut);background:rgba(255,255,255,.04);border-radius:8px;padding:10px 12px;margin-top:10px;line-height:1.45}
.kd-bars{display:flex;flex-direction:column;gap:6px}
.kb-row{display:flex;align-items:center;gap:8px}
.kb-l{flex:0 0 88px;font-size:.72rem;color:#a9bccc;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-track{flex:1;height:12px;background:rgba(0,0,0,.3);border-radius:6px;overflow:hidden}
.kb-fill{display:block;height:100%;border-radius:6px;transition:width .3s}
.kb-v{flex:0 0 auto;font-size:.7rem;color:#cfe0ec;font-variant-numeric:tabular-nums;white-space:nowrap}
.kd-pips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:4px 0}
.pip{width:28px;height:15px;border-radius:3px;background:rgba(255,255,255,.1)}
.pip.on{background:#7fcf9a;box-shadow:0 0 7px -1px rgba(127,207,154,.6)}
.pip.lock{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 3px,transparent 3px,transparent 6px);border:1px dashed rgba(255,255,255,.2)}
/* deep-dive entrance animations */
@keyframes gaugeDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes barWipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pipPop{from{opacity:0;transform:scale(.45)}to{opacity:1;transform:scale(1)}}
.kd-gauge .g-val{stroke-dasharray:100;filter:drop-shadow(0 0 4px currentColor);animation:gaugeDraw .95s cubic-bezier(.3,.7,.3,1) forwards}
.kd-gauge .g-tgt{animation:simFade .4s .72s backwards}
.kd-stack{transform-origin:left center;animation:barWipe .7s cubic-bezier(.2,.8,.3,1)}
.kb-fill{transform-origin:left center;animation:barGrow .75s cubic-bezier(.2,.8,.3,1)}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.kd-pips .pip{animation:pipPop .42s backwards}
.kd-pips .pip:nth-child(1){animation-delay:.03s}.kd-pips .pip:nth-child(2){animation-delay:.09s}.kd-pips .pip:nth-child(3){animation-delay:.15s}.kd-pips .pip:nth-child(4){animation-delay:.21s}.kd-pips .pip:nth-child(5){animation-delay:.27s}.kd-pips .pip:nth-child(6){animation-delay:.33s}.kd-pips .pip:nth-child(7){animation-delay:.39s}
@keyframes kdRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.kpi-detail>*{animation:kdRise .42s ease backwards}
.kpi-detail>*:nth-child(2){animation-delay:.03s}.kpi-detail>*:nth-child(3){animation-delay:.07s}.kpi-detail>*:nth-child(4){animation-delay:.11s}.kpi-detail>*:nth-child(5){animation-delay:.15s}.kpi-detail>*:nth-child(6){animation-delay:.19s}.kpi-detail>*:nth-child(7){animation-delay:.23s}.kpi-detail>*:nth-child(8){animation-delay:.27s}.kpi-detail>*:nth-child(9){animation-delay:.31s}
/* red-zone gauge pulse */
@keyframes gaugePulse{0%,100%{filter:drop-shadow(0 0 3px currentColor);opacity:.85}50%{filter:drop-shadow(0 0 11px currentColor);opacity:1}}
.kd-gauge .g-val.g-danger{animation:gaugeDraw .95s cubic-bezier(.3,.7,.3,1) forwards,gaugePulse 1.5s 1s ease-in-out infinite}
/* hover sheen on bars */
@keyframes sheen{to{transform:translateX(360%)}}
.k-fill{position:relative;overflow:hidden}
.k-fill::after,.kb-fill::after,.kd-projrow::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-160%);pointer-events:none}
.kb-fill{position:relative;overflow:hidden}
.kd-projrow{position:relative;overflow:hidden}
.kd-projrow::after{background:linear-gradient(100deg,transparent,rgba(95,224,173,.28),transparent)}
.kpi-click:hover .k-fill::after,.kb-row:hover .kb-fill::after,.kd-projrow:hover::after{animation:sheen .85s ease}
@media (prefers-reduced-motion:reduce){.kd-gauge .g-val,.kd-gauge .g-val.g-danger,.kd-gauge .g-tgt,.kd-stack,.kb-fill,.kd-pips .pip,.kpi-detail>*{animation:none}.k-fill::after,.kb-fill::after,.kd-projrow::after{display:none}}
@keyframes simFade{from{opacity:0}to{opacity:1}}
@keyframes simPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.sim-celebrate{position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .4s}
.sim-celebrate.show{opacity:1}
.cel-card{background:linear-gradient(180deg,#11503b,#0c2a22);border:1px solid rgba(47,207,148,.5);color:#bff3dd;font-size:1.2rem;font-weight:600;text-align:center;padding:20px 34px;border-radius:16px;box-shadow:0 0 60px -8px rgba(47,207,148,.55);transform:scale(.85);transition:transform .42s cubic-bezier(.2,.8,.3,1)}
.sim-celebrate.show .cel-card{transform:scale(1)}
.cel-tag{display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#5fe0ad;margin-bottom:6px}
#sim-endwrap{--con-bg2:#12304a;--con-bg3:#091a2b;--con-line:rgba(126,166,196,.16);--con-line2:rgba(126,166,196,.34);--con-mut:#90a6b8;--con-cy:#43bdf2}
#sim-endwrap .btn-line{border-color:var(--con-line2);color:#eaf2f8;background:transparent}
#sim-endwrap .btn-line:hover{border-color:var(--con-cy);background:rgba(67,189,242,.12)}
.recap-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.rstat{background:var(--con-bg3);border:1px solid var(--con-line);border-radius:10px;padding:9px 16px;min-width:92px}
.rstat b{display:block;font-size:1.2rem;color:#fff;font-variant-numeric:tabular-nums}
.rstat span{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--con-mut)}
.recap-wrap{margin:14px auto;max-width:540px}
.recap-chart{display:block;width:100%;height:150px;background:rgba(0,0,0,.22);border:1px solid var(--con-line);border-radius:10px}
.recap-legend{display:flex;gap:16px;justify-content:center;margin-top:8px;font-size:.74rem}
.rl{display:inline-flex;align-items:center;gap:6px;color:var(--con-mut)}
.rl::before{content:"";width:14px;height:3px;border-radius:2px;display:inline-block}
.rl-oee::before{background:#2aa8e0}
.rl-dm::before{background:#378add}
.rl-val::before{background:#1d9e75}
@media (prefers-reduced-motion:reduce){.sim-modal,.sim-modal-card,.sim-celebrate .cel-card{animation:none;transition:none}}

/* knowledge graph diagram */
.kg-wrap{max-width:860px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px;overflow-x:auto}
.kg-wrap svg{display:block;width:100%;height:auto;min-width:560px}
.kg-legend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:22px auto 0;font-size:.9rem;color:var(--body)}
.kg-legend span{display:inline-flex;align-items:center;gap:8px}
.kg-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.kg-cap{text-align:center;color:var(--muted);max-width:62ch;margin:18px auto 0}
.dchip{cursor:pointer}
.dchip > rect{transition:stroke .12s}
.dchip:hover > rect{stroke:#2aa8e0}
.dchip.sel > rect,.dchip:focus-visible > rect{stroke:#2aa8e0;stroke-width:3}
.dchip:focus-visible{outline:none}
.diagram-info{max-width:720px;margin:20px auto 0;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--cyan-500);border-radius:var(--radius);padding:16px 20px}
.diagram-info h4{margin:0 0 6px;color:var(--ink);font-size:1.06rem}
.diagram-info p{margin:0;color:var(--body)}
.diagram-info .hint{color:var(--muted);margin:0}
.diagram-hint{text-align:center;color:var(--cyan-500);font-size:.9rem;font-weight:500;margin:0 auto 14px}
/* (emoji pointer removed: site chrome stays emoji-free; the cyan colour already marks the hint) */

/* callout (concrete example) */
.callout{background:var(--bg-soft);border-left:4px solid var(--cyan-500);border-radius:0 10px 10px 0;padding:16px 22px;margin:20px 0;color:var(--ink);font-size:1.02rem}
.callout em{color:var(--muted);font-style:normal;display:block;font-size:.85rem;margin-top:6px}

/* get involved */
.involve{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:900px;margin:0 auto}
.involve .card h3{display:flex;align-items:center;gap:8px}

/* tags (acknowledgements) */
.tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px auto 0;max-width:760px}
.tag{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:7px 16px;font-size:.9rem;color:var(--body)}
.card-label{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--cyan-500);margin-bottom:8px}

/* reference */
.ref-search{max-width:520px;margin:0 auto 36px}
input[type=search],input[type=text]{font:inherit;font-size:1rem;padding:13px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
input[type=search]:focus,input[type=text]:focus{outline:none;border-color:var(--cyan-400);box-shadow:0 0 0 3px rgba(42,168,224,.18)}
.std-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;max-width:980px;margin:0 auto}
.std-item{border-left:3px solid var(--cyan-400);padding:4px 0 4px 16px}
.std-item b{display:block;color:var(--ink);font-size:1rem;margin-bottom:2px}
.std-item span{font-size:.93rem;color:var(--body)}
.ref-none{display:none;text-align:center;color:var(--muted);padding:24px}
.ref-emblem{width:76px;height:76px;margin:0 auto 10px;display:block}
.ref-stats{color:var(--muted);font-size:.92rem;margin:16px 0 0}
.ref-stats strong{color:var(--ink);font-weight:600}
.filter-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:980px;margin:0 auto 30px}
.chip{all:unset;cursor:pointer;font-size:.9rem;padding:8px 16px;border:1px solid var(--line);border-radius:20px;color:var(--body);background:var(--bg);transition:background .12s,border-color .12s,color .12s}
.chip:hover{border-color:var(--cyan-400)}
.chip[aria-pressed="true"]{background:var(--cyan-500);border-color:var(--cyan-500);color:#04223a;font-weight:600}
.chip:focus-visible{outline:2px solid var(--cyan-500);outline-offset:2px}
@media(max-width:700px){.std-grid{grid-template-columns:1fr}}

/* implementation phases */
.phases{max-width:1000px;margin:0 auto}
.phase{margin-bottom:40px;scroll-margin-top:160px;--pc:#2aa8e0}
.phase .phase-tag{color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,#fff)}
.phase .card-num{color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,#fff)}
.impl-roadmap-bar{position:sticky;top:68px;z-index:30;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 2px 8px rgba(8,24,42,.04)}
.impl-rm-scroll{overflow-x:auto;padding:9px 24px}
.impl-rm-scroll svg{display:block;width:100%;height:auto;max-width:940px;min-width:560px;margin:0 auto}
.rmphase.rm-active .rm-node{fill:var(--nc)}
.rmphase.rm-active .rm-label{fill:var(--nc);font-weight:700}
.rmphase{cursor:pointer}
.rm-node{transition:stroke-width .12s}
.rmphase:hover .rm-node,.rmphase:focus-visible .rm-node{stroke-width:3}
.rmphase:hover .rm-label,.rmphase:focus-visible .rm-label{fill:#185FA5}
.rmphase:focus-visible{outline:none}
.phase-head{margin:0 0 22px}
.phase-tag{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-500);background:var(--bg-soft2);padding:5px 13px;border-radius:20px;margin-bottom:12px}
.phase-head h2{margin:.1rem 0 .4rem;font-size:1.55rem}
.phase-head p{margin:0;color:var(--muted);max-width:70ch}
.kout{margin:16px 0 0;font-size:.82rem;color:var(--body);background:var(--bg-soft);border-radius:8px;padding:9px 12px;border-left:3px solid #1d9e75}
.kout span{color:#0a6b4f;font-weight:700}
.kout span::before{content:"\2713";font-weight:800;margin-right:5px}
.ktool{margin:8px 0 0;font-size:.82rem;color:var(--body);background:var(--bg-soft);border-radius:8px;padding:9px 12px;border-left:3px solid var(--cyan-500)}
.ktool span{color:#1583c0;font-weight:700}
.ktool span::before{content:"\2192";font-weight:800;margin-right:5px}
.act-why{color:#e8b24a}
/* "put this layer to work" line under a framework deep-dive module */
.tool-cta{text-align:center;max-width:62ch;margin:22px auto 0;padding:0 24px;color:var(--muted)}
.tool-cta a{font-weight:600}
.card-num-sm{width:34px;height:34px;font-size:.9rem;border-radius:8px;margin-bottom:14px}

/* interactive architecture explorer */
.explorer{display:grid;grid-template-columns:310px minmax(0,1fr);gap:26px;max-width:1000px;margin:0 auto;align-items:start} /* minmax(0,…): the detail pane must shrink below its content's min-width on tablets */
.explorer-rail{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:stretch}
.rail-tiers{display:flex;flex-direction:column;gap:8px}
.rail-cap{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-align:center;padding:4px 0}
.rail-cap i{font-style:normal;color:var(--cyan-500)}
.flow-track{position:relative}
.flow-line{position:absolute;left:50%;top:26px;bottom:26px;width:3px;transform:translateX(-50%);border-radius:3px;background:linear-gradient(180deg,rgba(212,83,126,.5),rgba(42,168,224,.45),rgba(216,90,48,.5))}
.flow-dot{position:absolute;left:50%;width:11px;height:11px;border-radius:50%;margin-left:-5.5px;margin-top:-5.5px}
.flow-up{background:var(--cyan-500);box-shadow:0 0 10px 2px rgba(42,168,224,.7);animation:flowUp 3.2s cubic-bezier(.45,0,.55,1) infinite}
.flow-up.d1{animation-delay:1.06s}.flow-up.d2{animation-delay:2.13s}
.flow-down{width:9px;height:9px;background:var(--fdl);box-shadow:0 0 10px 2px rgba(216,90,48,.6);animation:flowDown 6.4s ease-in-out infinite;animation-delay:1.6s}
@keyframes flowUp{0%{top:100%;opacity:0}9%{opacity:1}88%{opacity:1}100%{top:0%;opacity:0}}
@keyframes flowDown{0%{top:0%;opacity:0}6%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.flow-legend{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:22px auto 0;font-size:.85rem;color:var(--muted)}
.flow-legend span{display:inline-flex;align-items:center;gap:7px}
.flow-legend .k{width:10px;height:10px;border-radius:50%}
.flow-legend .k-up{background:var(--cyan-500)}.flow-legend .k-down{background:var(--fdl)}
@media (prefers-reduced-motion:reduce){.flow-dot{animation:none;top:50%;opacity:.6}.flow-up.d1,.flow-up.d2{display:none}}
.tier{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);border-left:4px solid var(--c,var(--cyan-500));border-radius:10px;background:var(--bg);transition:background .15s,box-shadow .15s,border-color .15s}
.tier:hover{background:var(--bg-soft)}
.tier[aria-selected="true"]{background:var(--bg-soft);box-shadow:0 0 0 2px var(--c,var(--cyan-500)) inset}
.tier:focus-visible{outline:2px solid var(--cyan-500);outline-offset:2px}
.tier .t-dot{width:12px;height:12px;border-radius:3px;background:var(--c,var(--cyan-500));flex-shrink:0}
.tier .t-name{font-weight:600;color:var(--ink);font-size:.98rem;line-height:1.25}
.tier .t-sub{display:block;font-size:.8rem;color:var(--muted);font-weight:400}
.explorer-detail{background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--c,var(--cyan-500));border-radius:var(--radius);padding:28px 30px;min-height:340px}
.xpanel{display:none}
.xpanel.active{display:block;animation:xfade .2s ease}
@keyframes xfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.x-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.x-head h3{margin:0;font-size:1.4rem}
.x-role{color:var(--body);margin:0 0 18px;font-size:1.02rem}
.x-hint{text-align:center;color:var(--muted);font-size:.9rem;margin:0 0 22px}
@media(max-width:760px){.explorer{grid-template-columns:1fr}.explorer-detail{min-height:0}}
@media(prefers-reduced-motion:reduce){.xpanel.active{animation:none}}

/* framework layer blocks */
.layers{display:flex;flex-direction:column;gap:22px;max-width:940px;margin:0 auto}
.layer{background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--c,var(--cyan-500));border-radius:var(--radius);padding:26px 30px}
.layer-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.layer-head h3{margin:0;font-size:1.35rem}
.layer-dot{width:14px;height:14px;border-radius:4px;background:var(--c,var(--cyan-500));flex-shrink:0}
.layer-abbr{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--c,var(--cyan-500));border:1px solid var(--c,var(--cyan-500));padding:3px 8px;border-radius:6px}
.layer-role{color:var(--body);margin:0 0 18px}
.layer-feats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 30px}
.layer-feats li{position:relative;padding-left:1.4rem;font-size:.96rem;margin:.2rem 0;line-height:1.55}
.layer-feats li::before{content:"";position:absolute;left:.1rem;top:.55em;width:6px;height:6px;border-radius:2px;background:var(--c,var(--cyan-500))}
.layer-feats strong{color:var(--ink);font-weight:600}
@media(max-width:900px){.layer-feats{grid-template-columns:1fr}} /* 761-900px: the two-column explorer leaves the detail pane too narrow for two feature columns */

/* split feature row */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split img{width:100%;height:auto}
.split h2{margin-top:0}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:32px}}

/* buttons */

/* footer */
.site-footer{background:#06121e;color:#9fb0c1;border-top:3px solid var(--cyan-500)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding:56px 24px 44px}
.footer-brand{max-width:460px}
.footer-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;margin-bottom:14px}
.footer-logo:hover{text-decoration:none}
.footer-logo img{height:34px;width:auto}
.footer-logo .brand-text{font-size:.84rem}
.footer-brand p{font-size:.95rem;color:#8497a8;line-height:1.7;margin:0}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col h2{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 6px;font-weight:600}
.footer-col a{color:#9fb0c1;font-size:.95rem}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-base{border-top:1px solid rgba(255,255,255,.08)}
.footer-base-inner{display:flex;justify-content:space-between;gap:16px;padding:18px 24px;flex-wrap:wrap;font-size:.85rem;color:#6f8194}
.footer-tag{color:var(--cyan-300)}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px 32px}.footer-brand{grid-column:1 / -1}}

/* per-layer accent helpers */
.lyr-eih{--c:var(--eih)} .lyr-cdm{--c:var(--cdm)} .lyr-uns{--c:var(--uns)}
.lyr-udl{--c:var(--udl)} .lyr-fdl{--c:var(--fdl)} .lyr-ai{--c:var(--ai)}

/* collapse the (now 9-item) main nav to a menu before it would overflow */
@media (max-width:1080px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--navy-800);flex-direction:column;padding:10px 16px;gap:2px;border-bottom:1px solid rgba(255,255,255,.08)}
  .site-nav.open{display:flex}
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--navy-800);flex-direction:column;padding:10px 16px;gap:2px;border-bottom:1px solid rgba(255,255,255,.08)}
  .site-nav.open{display:flex}
  .hero-title{font-size:2.1rem}
  .hero-inner{padding:64px 24px}
  .hero-inner.has-art{grid-template-columns:1fr}
  .hero-art{display:none}
  .page-head-inner{flex-direction:column;align-items:flex-start;gap:28px;padding:40px 24px}
  .page-head-media{flex-basis:auto;max-width:100%;width:100%;max-width:420px;align-self:center}
}

/* ============ Cockpit single-screen layout (no-scroll game stage) ============ */
/* simulator page: tighter intro so the console sits near the fold (default .section padding is 72px top+bottom ×2 sections) */
.section.sim-head{padding:40px 0 18px}
.section.sim-body-sec{padding-top:26px}
/* pre-JS boot placeholder inside #sim-intro — replaced by render() the moment the script initializes; if the (large) script stalls, this stays visible with a useful hint */
.sim-boot{display:flex;flex-direction:column;align-items:center;gap:9px;padding:min(24vh,170px) 20px 40px;text-align:center;color:var(--con-mut)}
.sim-boot .sb-ic{font-size:1.7rem;animation:bootPulse 1.4s ease-in-out infinite}
.sim-boot b{color:#cddae5;font-size:1.02rem}
.sim-boot .sb-sub{font-size:.74rem;opacity:.8}
@keyframes bootPulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sim-boot .sb-ic{animation:none}}
.sim{display:flex;flex-direction:column;height:min(86vh,860px);max-width:1200px;padding:0;overflow:hidden;scroll-margin-top:72px}
.sim.pregame{height:auto;max-height:none;overflow:visible;padding:clamp(14px,2.5vw,24px)}
.sim.fullscreen{position:fixed;inset:0;z-index:9999;height:100vh;width:100vw;max-width:none;border-radius:0;border:0;margin:0}
html.sim-fs-on,html.sim-fs-on body{overflow:hidden}
html.sim-fs-on .sim-toasts,html.sim-fs-on #sim-coach,html.sim-fs-on .sim-celebrate,html.sim-fs-on .sim-float,html.sim-fs-on .sim-confetti{z-index:10001}
/* end-of-game exit: fullscreen hides the toolbar/HUD collapse control, so the end screen carries its own
   always-visible "Exit full screen" (shown only in fullscreen; pinned top-right over the scrolling report) */
.end-fsexit{display:none}
.sim.fullscreen .end-fsexit{display:inline-flex;align-items:center;position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:10px;z-index:90;background:#12242f;border:1px solid #3a5468;color:#dbe9f2;border-radius:8px;padding:10px 14px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.sim.fullscreen .end-fsexit:hover{border-color:var(--con-cy);color:#fff}
/* HUD */
.hud{flex:0 0 auto;padding:11px 15px 7px;border-bottom:1px solid var(--con-line);background:linear-gradient(180deg,rgba(13,34,54,.6),transparent)}
.hud-row{display:flex;align-items:flex-start;gap:10px}
.hud .sim-stats{flex:1;margin:0 0 7px;gap:7px}
.hud .sim-stat{flex:1;min-width:0;padding:5px 9px;text-align:left;display:flex;flex-direction:column;justify-content:center;min-height:42px}
.hud .sim-stat::before{display:none}
.hud .sim-stat b{font-size:.96rem;order:2;line-height:1.15}
.hud .sim-stat span{font-size:.58rem;order:1;text-transform:none;letter-spacing:.02em;margin-bottom:1px}
.hud-fs{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:var(--con-bg3);border:1px solid var(--con-line2);color:var(--con-ink);cursor:pointer;font-size:1.05rem;line-height:1}
.hud-fs:hover{border-color:var(--con-cy)}
.hud .sim-kpis{margin:0 0 6px;gap:6px;grid-template-columns:repeat(6,minmax(0,1fr))}
.hud .sim-kpi{padding:5px 7px;min-height:42px;display:flex;flex-direction:column;justify-content:center}
.hud .sim-kpi .k-top{gap:6px}
.hud .sim-kpi .k-top b{font-variant-numeric:tabular-nums}
.hud .sim-kpi .k-top{margin-bottom:4px;font-size:.6rem}
.hud .sim-kpi .k-top b{font-size:.88rem}
.hud .sim-kpi .k-spark{display:none}
/* ---- Stage: the plant floor + a right-hand objectives rail (so status banners no longer stack ABOVE
   the plant and shrink it — they fill the empty space beside it instead) ---- */
.sim-stage{display:flex;flex:1 1 auto;min-height:0;gap:10px;align-items:stretch;padding:0}
.sim-stage .sim-factory{flex:1 1 auto;min-height:0;margin:0;border:0;border-radius:0;background:#06121e;overflow:hidden}
.sim-stage .sim-factory canvas{display:block;width:100%;height:100%}
/* the objectives rail */
.sim-rail{flex:0 0 300px;max-width:300px;min-height:0;margin:0;padding:8px;display:flex;flex-direction:column;background:transparent;border:0;box-shadow:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--con-line2) transparent}
.sim-rail::-webkit-scrollbar{width:6px}
.sim-rail::-webkit-scrollbar-thumb{background:var(--con-line2);border-radius:3px}
/* mission-progress block fills the rail and anchors to the bottom — the at-a-glance "where am I overall" the floor HUD had no room for */
#sim-goal .goal-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:auto 0 9px;padding-top:11px;border-top:1px solid var(--con-line)}
#sim-goal .goal-eyebrow{order:1}
#sim-goal .goal-pct{order:2;margin-left:auto;font-size:1.18rem}
#sim-goal .goal-title{order:3;flex:1 1 100%;font-size:.82rem;line-height:1.3}
#sim-goal .goal-bar{display:block;height:7px;margin:0 0 10px}
#sim-goal .goal-chips{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#sim-goal .goal-chip{font-size:.72rem;padding:5px 9px;text-align:center}
#sim-goal .goal-next{margin:0 0 8px;padding:10px 12px}
#sim-goal .goal-next .gn-cta{display:block;margin:7px 0 0;font-size:.72rem}
/* "Last quarter" digest — eye on its own line, pills wrap (plenty of vertical room in the rail) */
#sim-goal .quarter-digest{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px;padding:8px 11px}
#sim-goal .quarter-digest .qd-eye{margin:0;font-size:.6rem;flex:0 0 100%}
#sim-goal .quarter-digest .qd-pills{gap:6px;flex-wrap:wrap}
#sim-goal .quarter-digest .qd-fires{margin-top:4px}
#sim-goal .goal-daily{margin:0 0 8px}
#sim-goal .goal-standing{margin:0 0 8px;padding:7px 11px}
#sim-goal .plant-status{margin:0 0 8px;padding:7px 11px}
#sim-goal .goal-chapter{margin:0 0 8px}
/* early-game "coming up" hint row: quiet, informational, clearly not an alert */
.goal-upcoming{display:flex;align-items:flex-start;gap:8px;border:1px dashed var(--con-line);border-radius:8px;padding:7px 11px;font-size:.72rem;color:var(--con-mut);line-height:1.4}
.goal-upcoming b{color:#cddae5}
.goal-upcoming .gu-i{flex:0 0 auto}
#sim-goal .goal-upcoming{margin:0 0 8px}
#sim-goal .goal-attention{margin:0 0 8px}
#sim-goal .goal-dir{margin:0 0 8px;padding:10px 12px}
#sim-goal .goal-dir .gd2-portrait{width:40px;height:40px}
#sim-goal .goal-dir .gd2-head{gap:9px}
#sim-goal .goal-dir .gd2-bar{margin-top:6px}
/* HTML overlays on the factory (moved out of canvas so the plant can scale to fill) */
.fx-overlay{position:absolute;pointer-events:none;z-index:3}
.fx-ctrl{position:absolute;left:14px;bottom:12px;z-index:4;pointer-events:auto;font:inherit;font-size:.74rem;font-weight:700;color:#cfe6f2;background:rgba(10,22,34,.82);border:1px solid var(--con-line2);border-radius:8px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fx-ctrl:hover{border-color:var(--con-cy);color:#fff;background:rgba(16,32,46,.92)}
.fx-tools{position:absolute;left:14px;bottom:84px;z-index:5;display:flex;gap:8px}/* sit above the UMDA-stack strip (≈77px tall) so the Control Room / Architecture buttons don't cover the stack chips */
.fx-tools .fx-ctrl{position:static;left:auto;bottom:auto}
/* bottom-right site selector: click a little site landmark to switch sites.
   Sits ABOVE the UMDA-stack strip (like .fx-tools on the left) so added sites never cover the foundation chips */
.fx-sites{right:12px;bottom:88px;left:auto;z-index:5;pointer-events:none}
@media (max-width:760px){.fx-sites{bottom:116px}}/* the stack row wraps to two lines on narrow screens */
.fx-sites:empty{display:none}
.fxs-hd{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#8aa6bb;text-align:right;margin-bottom:5px;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.fxs-list{display:flex;gap:7px;align-items:flex-end;pointer-events:auto}
.fxs-site{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:50px;padding:7px 4px 5px;cursor:pointer;color:var(--sc);background:rgba(9,20,31,.85);border:1px solid var(--con-line2);border-radius:9px;transition:border-color .14s,background .14s,transform .12s,box-shadow .14s}
.fxs-site:hover{border-color:var(--sc);background:rgba(15,30,44,.96);transform:translateY(-2px)}
.fxs-site.sel{border-color:var(--sc);background:rgba(15,30,44,.98);box-shadow:0 0 0 1px var(--sc),0 0 16px -4px var(--sc)}
.fxs-ic{width:27px;height:27px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.fxs-lbl{font-size:.62rem;font-weight:700;color:#cfe6f2;letter-spacing:.02em;max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-rename{background:none;border:1px solid transparent;border-radius:5px;color:#7fa6be;font-size:.72rem;line-height:1;padding:2px 4px;margin-left:6px;cursor:pointer;vertical-align:middle}
.site-rename:hover{color:#cfe6f2;border-color:var(--con-line2);background:rgba(15,30,44,.9)}
.site-ren-in{width:130px;max-width:60%;background:#0a1826;border:1px solid var(--con-cy);border-radius:6px;color:#eaf6ff;font-size:.8rem;padding:3px 6px}
.site-ren-ok{margin-left:6px;background:var(--con-cy);border:0;border-radius:6px;color:#04202e;font-size:.7rem;font-weight:700;padding:4px 8px;cursor:pointer}
@media (max-width:680px){ /* phone: rename controls need real tap targets (game standard ≥35px) */
.site-rename{padding:9px 11px;font-size:.9rem}
.site-ren-ok{padding:10px 12px;font-size:.78rem}
.site-ren-in{padding:8px 8px}
}
.fxs-site.sel .fxs-lbl{color:#fff}
.fxs-dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;border:1px solid rgba(0,0,0,.4)}
.fxs-site.lag .fxs-lbl::after{content:" ▲";color:#ffc664}
.fxs-site.new{border-color:#56e8b0;box-shadow:0 0 0 1px #56e8b0,0 0 10px -3px #56e8b0}
.fxs-new{position:absolute;top:-7px;right:-7px;z-index:1;font-size:.5rem;font-weight:800;letter-spacing:.06em;line-height:1;color:#04160d;background:#56e8b0;border-radius:6px;padding:2px 4px;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
.fxs-site.new{animation:fxsNewPulse 1.6s ease-in-out infinite}
@keyframes fxsNewPulse{0%,100%{box-shadow:0 0 0 1px #56e8b0,0 0 6px -3px #56e8b0}50%{box-shadow:0 0 0 2px #56e8b0,0 0 18px 0 rgba(86,232,176,.75)}}
}
@media (max-width:760px){.fx-sites .fxs-hd{display:none}.fxs-site{width:42px;padding:5px 3px 4px}.fxs-ic{width:22px;height:22px}}
/* data architecture panel */
.game-panel[data-panel="arch"]{width:min(980px,100%);height:min(86%,650px)}
.arch-lens{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 9px}
.arch-lens button{font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;color:var(--con-mut);background:linear-gradient(180deg,#1a2733,#121c26);border:1px solid #0a131b;border-radius:3px;padding:5px 10px}
.arch-lens button:hover{color:#fff;border-color:var(--con-cy)}
.arch-lens button.on{color:#dff4ff;background:linear-gradient(180deg,#0c2c3e,#0a2230);border-color:var(--con-cy);box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 9px -3px rgba(67,189,242,.7)}
.arch-lens .arch-vsep{width:1px;align-self:stretch;background:#22323f;margin:2px 2px}
.arch-lens .arch-view.on{color:#f2cd82;background:linear-gradient(180deg,#352713,#241a0c);border-color:#e6a93f;box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 9px -3px rgba(230,169,63,.7)}
.arch-lens .arch-replay{margin-left:auto;color:#9be3ff}
.arch-lens .arch-replay:hover{color:#fff;border-color:var(--con-cy)}
.arch-lens .arch-replay.playing{color:#f2cd82;border-color:#e6a93f;box-shadow:0 0 9px -3px rgba(230,169,63,.8)}
.arch-stage{flex:1 1 auto;min-height:0;position:relative;border:1px solid #0a131b;border-radius:4px;background:#06101a;overflow:hidden;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 2px 16px rgba(0,0,0,.5)}
.arch-stage canvas{display:block;width:100%;height:100%}
.arch-hint{font-size:.78rem;color:var(--con-mut);line-height:1.5;margin:0}
#fx-title{top:10px;left:14px;font-size:.8rem;font-weight:800;letter-spacing:.05em;text-shadow:0 1px 5px rgba(0,0,0,.75)}
#fx-legend{top:11px;right:14px;display:flex;gap:14px;font-size:.72rem;color:#a7c6d8;text-shadow:0 1px 4px rgba(0,0,0,.7)}
#fx-legend span{display:inline-flex;align-items:center;gap:5px}
#fx-legend i{width:9px;height:9px;border-radius:50%}
#fx-legend i.lg-ok{border-radius:50%}
#fx-legend i.lg-warn{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
#fx-legend i.lg-down{border-radius:1px}
#fx-stack{left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:20px 10px 9px;background:linear-gradient(0deg,rgba(5,15,26,.92) 32%,rgba(5,15,26,0))}
.fx-stack-head{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7f97ad}
.fx-stack-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.fx-grp{display:flex;align-items:center;gap:7px}
.fx-grp-l{font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#5f7d97}
.fx-chips{display:flex;gap:5px}
.fx-chip{font-size:.64rem;font-weight:700;letter-spacing:.03em;color:#6b7b89;background:rgba(20,29,39,.85);border:1px solid #3a4a57;border-radius:6px;padding:3px 8px}
.fx-chip.qw{color:#f0c073;border-color:#ba7517;background:rgba(42,36,24,.85)}
.fx-chip.built{background:rgba(18,58,82,.85)}
/* Tool bar */
.game-toolbar{flex:0 0 auto;position:relative;z-index:45;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 13px;border-top:1px solid var(--con-line);background:var(--con-bg3)}
.game-toolbar .btn{margin:0;padding:9px 16px}
.tb-sep{width:1px;align-self:stretch;background:var(--con-line);margin:0 2px}
.tb-grow{flex:1 1 auto;background:transparent}
.tb-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--con-ink);background:var(--con-bg2);border:1px solid var(--con-line2);border-radius:8px;padding:7px 11px}
.tb-btn .tb-i{font-size:.95rem}
.tb-btn:hover{border-color:var(--con-cy)}
.tb-btn.active{background:rgba(67,189,242,.16);border-color:var(--con-cy);color:#fff}
.tb-btn{position:relative}
.tb-btn.tb-cta{background:linear-gradient(180deg,rgba(67,189,242,.22),rgba(67,189,242,.10));border-color:var(--con-cy);color:#eaf7ff;font-weight:800;padding:7px 18px;box-shadow:0 0 0 1px rgba(67,189,242,.25) inset}
.tb-btn.tb-cta .tb-i{font-size:1.08rem}
.tb-btn.tb-cta:hover{background:linear-gradient(180deg,rgba(67,189,242,.32),rgba(67,189,242,.18));color:#fff}
.tb-btn.tb-cta.active{background:rgba(67,189,242,.26);color:#fff}
.tb-badge{display:none;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:9px;font-size:.62rem;font-weight:800;margin-left:1px;line-height:1}
.tb-badge.warn{background:#ff8473;color:#1a0d0a}
.tb-badge.amber{background:#ffc24a;color:#1a1408}
.tb-badge.dot{min-width:auto;height:auto;padding:0;background:transparent;color:var(--con-cy);font-size:1rem;animation:tbDot 1.4s ease-in-out infinite}
@keyframes tbDot{0%,100%{opacity:.45}50%{opacity:1}}
#sim-end.ready{animation:endReady 1.4s ease-in-out infinite}
@keyframes endReady{0%,100%{box-shadow:0 0 0 0 rgba(67,189,242,.5)}55%{box-shadow:0 0 0 6px rgba(67,189,242,0)}}
/* first-step nudge: pulse the Projects button until the player opens it / builds */
.game-toolbar .tb-btn.tb-pulse{animation:ctaPulse 1.5s ease-in-out infinite;border-color:var(--con-cy);color:#fff}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(67,189,242,0)}50%{box-shadow:0 0 0 4px rgba(67,189,242,.4),0 0 16px -2px rgba(67,189,242,.7)}}
@media (prefers-reduced-motion:reduce){.tb-badge.dot,#sim-end.ready,.game-toolbar .tb-btn.tb-pulse{animation:none}.game-toolbar .tb-btn.tb-pulse{box-shadow:0 0 0 2px var(--con-cy)}}
/* mini-map site switcher (HUD) */
.sim-minimap{display:flex;gap:5px;align-items:center;flex:0 0 auto}
.sim-minimap:empty{display:none}
.mm-site{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.7rem;font-weight:700;cursor:pointer;color:var(--con-mut);background:var(--con-bg3);border:1px solid var(--con-line);border-radius:7px;padding:5px 8px}
.mm-site:hover{border-color:var(--con-line2);color:var(--con-ink)}
.mm-site.sel{border-color:var(--con-cy);color:#fff;background:rgba(67,189,242,.14)}
.mm-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
/* news ticker (HUD) */
.sim-ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--con-line);margin-top:7px;padding-top:5px}
.sim-ticker:empty{display:none}
.tk-scroll{display:inline-block;white-space:nowrap;font-size:.72rem;color:#7fa8c4;letter-spacing:.02em;animation:tickerScroll 42s linear infinite;will-change:transform}
.tk-scroll:hover{animation-play-state:paused}
.tk-item{color:#7fa8c4}
.tk-alarm{color:#ff7a6e;font-weight:700}
.tk-dot{color:#5f7d97;opacity:.5;margin:0 11px}
.tk-dot.tk-gap{margin:0 46px}/* loop seam: wide breathing room so short item lists don't read as stuttering repeats */
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* end-of-quarter cinematic */
.q-sweep{position:absolute;inset:0;z-index:38;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(67,189,242,.16) 50%,transparent 65%);background-size:300% 100%;animation:qSweep .85s ease-out forwards}
@keyframes qSweep{from{background-position:120% 0}to{background-position:-60% 0}}
.q-tally{position:absolute;left:50%;top:-3px;transform:translateX(-50%);font-size:.8rem;font-weight:800;color:#5fe0ad;pointer-events:none;white-space:nowrap;text-shadow:0 1px 3px rgba(5,15,26,.85);animation:qTally 1.6s ease-out forwards}
@keyframes qTally{0%{opacity:0;transform:translate(-50%,6px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-18px)}}
/* panel card stagger reveal (only while .revealing) */
.game-panel.revealing .sim-layer,.game-panel.revealing .adv-card,.game-panel.revealing .site-card{animation:cardReveal .32s cubic-bezier(.2,.8,.3,1) backwards}
.game-panel.revealing .sim-layer:nth-child(2),.game-panel.revealing .adv-card:nth-child(2),.game-panel.revealing .site-card:nth-child(2){animation-delay:.04s}
.game-panel.revealing .sim-layer:nth-child(3),.game-panel.revealing .adv-card:nth-child(3),.game-panel.revealing .site-card:nth-child(3){animation-delay:.08s}
.game-panel.revealing .sim-layer:nth-child(4),.game-panel.revealing .adv-card:nth-child(4),.game-panel.revealing .site-card:nth-child(4){animation-delay:.12s}
.game-panel.revealing .sim-layer:nth-child(5),.game-panel.revealing .site-card:nth-child(5){animation-delay:.16s}
.game-panel.revealing .sim-layer:nth-child(6),.game-panel.revealing .site-card:nth-child(6){animation-delay:.2s}
.game-panel.revealing .sim-layer:nth-child(7){animation-delay:.24s}
.game-panel.revealing .sim-layer:nth-child(8){animation-delay:.28s}
.game-panel.revealing .sim-layer:nth-child(n+9){animation-delay:.32s}
@keyframes cardReveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tk-scroll,.q-sweep,.q-tally,.game-panel.revealing .sim-layer,.game-panel.revealing .adv-card,.game-panel.revealing .site-card{animation:none}}
/* Pop-up panels (bottom sheet) */
.sim-panels{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;padding:16px}
.sim-panels-bd{position:absolute;inset:0;background:rgba(4,12,20,.55)}
.game-panel{position:relative;z-index:1;flex-direction:column;width:min(780px,100%);max-height:86%;overflow:auto;background:var(--con-bg);border:1px solid var(--con-line2);border-top:2px solid var(--con-cy);border-radius:14px;padding:0 18px 18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8);animation:panelUp .2s cubic-bezier(.2,.8,.3,1)}
.game-panel[data-panel="invest"]{height:576px;width:min(1040px,100%);max-height:100%}/* wide + tall enough that a full Build card (incl. the Build buttons) fits without scrolling; on short screens it may use the whole panel area, not just 86% */
/* narrow windows: reclaim CHROME space only (padding, gaps, header) — card text stays full-size (640px and below goes single-column and scrolls by design) */
@media (min-width:641px) and (max-width:900px){
  .sim-layer{padding:9px 10px}
  .sim-layers{gap:8px}
  .cap-banner{padding:5px 10px;margin:0 0 6px}
  .grp-tabs{margin:0 0 6px}
  .grp-tab{padding:7px 8px}
  .grp-sub{margin:0 0 5px}
  .game-panel[data-panel="invest"] .gp-head{padding:9px 16px 8px;margin-bottom:8px}
  .sim-panels{padding:8px}
}
.game-panel[data-panel="invest"] .sim-layers{align-content:start}
@keyframes panelUp{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.game-panel{animation:none}}
.gp-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;background:var(--con-bg);padding:13px 0 9px;margin-bottom:8px;border-bottom:1px solid var(--con-line)}
.gp-head h3{margin:0;font-size:1.05rem;color:#fff}
.gp-close{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--con-bg3);border:1px solid var(--con-line2);color:var(--con-ink);cursor:pointer;font-size:.9rem}
.gp-close:hover{border-color:var(--con-cy);color:#fff}
.game-panel .sim-layers{margin:0}
.game-panel .sim-log{max-height:none}
.game-panel .sim-advisors,.game-panel .adv-board{margin:0}
/* End screen as an overlay over the stage */
#sim-endwrap{position:absolute;inset:0;z-index:60;display:none}
#sim-endwrap:not(:empty){display:flex;align-items:flex-start;justify-content:center;overflow:auto;background:rgba(4,12,20,.72)}
#sim-endwrap .sim-end{margin:18px;width:100%;max-width:600px}
/* --- phone-shell controls: invisible on desktop, where everything is always on screen.
       display:contents keeps the desktop DOM layout literally identical. --- */
.kpi-toggle,.game-toolbar button.tb-more,.game-toolbar button.tb-status,.rail-more{display:none}/* button.* outranks the cockpit skin's .game-toolbar .tb-btn display rule */
.arch-lens .arch-zoom,.arch-zoom-x,.arch-zoom-ctl,.arch-zoom-hint{display:none}/* phone-only architecture zoom controls — ALL of them (the +/− pad and hint were missing here, so they showed on desktop as dead buttons) */
.tb-group{display:contents}
.rail-extra{display:contents}

@media (max-width:680px){
  /* phones read dimmer in ambient light: lift the secondary text and the near-black inset surface so
     dark-on-dark content is comfortably legible (main text --con-ink #eaf2f8 is already bright). */
  .sim{--con-mut:#c2d2df;--con-bg3:#0e2233}
  /* the Guide bar: pin it to the viewport bottom (fixed, not scroll-tied) and let the text wrap, so its
     next step is always fully visible over an open panel — the fix for "the guide never changed" on mobile */
  /* Default (no panel open, e.g. the opening "tap Projects" step): ride ABOVE the bottom toolbar so the guide
     never covers the menu it points at — critical in fullscreen where the toolbar is pinned to the viewport
     bottom. --tbh is the live toolbar height (set in renderPanels); +12px gap + safe area. */
  #sim-coach{position:fixed;left:8px;right:8px;bottom:calc(var(--tbh,92px) + 12px + env(safe-area-inset-bottom,0px));transform:none;max-width:none;gap:8px 10px;padding:10px 12px;flex-wrap:wrap}
  /* With a panel open the toolbar is behind the backdrop, so drop the coach low to sit over the panel (minimal coverage). */
  .sim.panel-open #sim-coach{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  #sim-coach .coach-txt{flex:1 1 100%;order:4;font-size:.84rem}
  #sim-coach .coach-skip{margin-left:auto}
  /* phones: the IN-GAME console is a one-screen app box in both windowed and fullscreen modes —
     no scrolling to play. Menu/setup/end states size to content and scroll normally. */
  .sim:not(.pregame){position:relative;display:flex;flex-direction:column;height:100vh;height:100svh;max-height:100svh;overflow-y:auto;overflow-x:hidden}
  .sim.pregame{height:auto;max-height:none;overflow:visible}
  /* ---- phone cockpit: KPIs fold behind a summary bar, the rail shows triage only, and the
          toolbar becomes a sticky bottom action bar with the secondary tools under More ---- */
  #sim-kpis{display:none}
  .hud.kpis-open #sim-kpis{display:grid}
  .kpi-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:6px;padding:9px 12px;background:#0a141d;border:1px solid #223649;border-radius:8px;color:#cfe6f2;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
  .kpi-toggle .kt-warn{color:#ffc664;font-weight:800}
  .rail-extra{display:none}
  #sim-goal.rail-open .rail-extra{display:block}
  .rail-more{display:block;width:100%;margin:8px 0 2px;padding:8px 12px;background:#0a141d;border:1px solid #223649;border-radius:8px;color:#9fb8cc;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.04em;cursor:pointer;text-align:center}
  .game-toolbar{padding:8px 0 2px}
  .game-toolbar button.tb-more{display:inline-flex}
  .game-toolbar button.tb-status{display:inline-flex}
  .tb-group{display:none}
  .game-toolbar.tb-open{flex-wrap:wrap}
  .game-toolbar.tb-open .tb-group{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:6px;order:-1;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #223649}
  .tb-group .tb-sep{display:none}
  /* FIXED bar layout: Projects · End quarter · More share the top row; Status is always alone on a
     full-width bottom row (flex 100% forces its own line — no more wrapping in/out depending on badges).
     button.* / button#… out-specifies the later cockpit-skin flex:0 0 auto. */
  .game-toolbar button.tb-cta,.game-toolbar button#sim-end,.game-toolbar button.tb-more{flex:1 1 0;min-width:0}/* basis 0 → the three always share one row, never wrapping in/out */
  .game-toolbar button.tb-status{flex:1 1 100%;min-width:0;order:5}
  .hud .sim-stats{flex-wrap:wrap}
  .hud .sim-stat{flex:1 1 28%}
  .hud .sim-stat b{font-size:.92rem}
  .hud .sim-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* phones: single-column stage; the canvas flex-fills the one-screen console box */
  .sim-stage{flex-direction:column;gap:8px}
  .sim-stage .sim-factory{min-height:0}
  /* Area scene is crop-zoomed on phones (see drawAreaInterior): the canvas backing becomes a narrower
     ~2.6:1 band, so fill the panel width at natural aspect — taller strip, bigger machines, no distortion.
     Control Room keeps the width-capped fit (it's a dashboard, not a scene). */
  .game-panel[data-panel="area"]:not(.ctrl-room) .area-scene{width:100%;height:auto;max-width:100%;margin:2px 0 8px}
  /* phones drop the in-canvas UMDA stack strip entirely (the Architecture screen and the Status
     sheet's Foundation chips carry that info) — the canvas is pure plant, overlays kept minimal */
  #fx-stack{display:none}
  #fx-legend{display:none}/* collides with the plant title at 375px; beacon states also read from the building badges */
  .fx-tools{bottom:12px}
  .fx-sites{bottom:58px}/* one row up: on a phone-width canvas the growing site chips would collide with the Architecture button */
  /* quarterly flash toasts: on a phone the viewport bottom-right is the action bar, so the flashes
     were landing behind the buttons. Float them centered, clear of the ~92px two-row toolbar. */
  .sim-toasts{left:12px;right:12px;bottom:108px;max-width:none;align-items:center}
  .sim-toast{transform:translateY(14px);max-width:100%;text-align:center}
  .sim-toast.show{transform:translateY(0)}
  /* ⛶ Zoom: the diagram fills the screen UPRIGHT (no rotation — phone orientation never matters) and is
     drawn oversized so it's readable; the stage scrolls to pan, and +/− zoom in and out. View-only; ✕ exits. */
  .arch-lens .arch-zoom{display:inline-flex}
  .game-panel[data-panel="arch"].arch-zoomed{position:fixed;inset:0;z-index:5;width:100vw;max-width:none;height:100vh;height:100svh;max-height:none;border-radius:0;margin:0;padding:0;overflow:hidden;background:#0b1a28;border:0}
  .game-panel[data-panel="arch"].arch-zoomed .gp-head,.game-panel[data-panel="arch"].arch-zoomed .arch-lens,.game-panel[data-panel="arch"].arch-zoomed .arch-hint{display:none}
  .game-panel[data-panel="arch"].arch-zoomed .arch-stage{position:absolute;inset:0;height:auto;max-height:none;overflow:auto;-webkit-overflow-scrolling:touch;display:block;touch-action:pan-x pan-y}
  .game-panel[data-panel="arch"].arch-zoomed #arch-cv{position:static;display:block;margin:auto;transform:none;pointer-events:none}
  .game-panel[data-panel="arch"].arch-zoomed .arch-zoom-x{display:inline-flex;position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:10px;z-index:7;background:#12242f;border:1px solid #3a5468;color:#dbe9f2;border-radius:8px;padding:9px 13px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
  .game-panel[data-panel="arch"].arch-zoomed .arch-zoom-ctl{display:flex;gap:8px;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:7}
  .arch-zoom-ctl{display:none}
  .arch-zoom-ctl button{width:52px;height:44px;font-size:1.5rem;font-weight:700;line-height:1;background:#12242f;border:1px solid #3a5468;color:#dbe9f2;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .arch-zoom-ctl button:disabled{opacity:.4}
  .game-panel[data-panel="arch"].arch-zoomed .arch-zoom-hint{display:block;position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:12px;z-index:7;font-size:.72rem;color:#9fc4d6;background:rgba(11,26,40,.8);padding:6px 10px;border-radius:8px}
  .arch-zoom-hint{display:none}
  .fx-sites .fxs-list{justify-content:center}
  /* rail hides behind the Status button in BOTH modes; it slides up as a sheet over the plant */
  .sim-stage{min-height:0}
  #sim-goal{display:none}
  .sim.rail-over #sim-goal{display:block;position:absolute;left:8px;right:8px;bottom:62px;top:auto;max-height:62%;overflow:auto;z-index:80;background:#0d1a28;border:1px solid #2a4258;border-radius:10px;padding:10px 12px;box-shadow:0 -12px 34px rgba(0,0,0,.65)}
  /* HMI tile rows (area popup + Control Room) go 2-up on phones instead of squeezing into one row */
  .hmi-row{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* panel headers on phones: the ✕ is ABSOLUTELY pinned top-right on every panel, so a long title
     (e.g. "Plant solutions…") can never wrap it to a second row / the left. The head reserves right
     padding so the title never runs under it; the Projects mode toggle drops to its own row below. */
  .sim .gp-head{flex-wrap:wrap;padding-right:46px}/* .sim prefix out-specifies the later cockpit-skin .gp-head / .sim .gp-close rules */
  .sim .gp-head h3{flex:1 1 auto;min-width:0}
  .sim .gp-head .gp-close{position:absolute;top:9px;right:8px;margin:0}
  #sim-proj-modes{order:3;flex:1 1 100%}
  .sim-rail{flex:0 0 auto;max-width:none;order:-1;overflow:visible;padding:0}
  #sim-goal .quarter-digest .qd-eye{flex:0 0 auto}
  .sim-panels{position:fixed;z-index:60}/* above the toolbar (z45): the page can scroll behind a viewport-fixed panel, and the console's toolbar must never drift OVER the panel content (below modals/Status sheet at z80) */
  .game-panel{max-height:88%}
  /* the console is height:auto and the page scrolls on phones — let the goal panel expand fully (no nested scroll) */
  #sim-goal{max-height:none;overflow:visible}
  /* pin the autosave chip to the viewport so it's visible regardless of page scroll */
  .sim:not(.fullscreen) .sim-saved{position:fixed;bottom:14px}
}

/* ===================== Industrial cockpit skin ===================== */
/* Outer shell: gunmetal cabinet with a powered top strip */
.sim{
  background:linear-gradient(180deg,#243443,#16222e 55%,#0f1820);
  border:1px solid #090f15;border-top:2px solid var(--con-cy);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(0,0,0,.5);
}
/* HUD = instrument cluster */
.hud{background:linear-gradient(180deg,#27343f,#1a2531);border-bottom:1px solid #090f15;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 7px -4px rgba(0,0,0,.6)}
.hud .sim-stat,.hud .sim-kpi{background:linear-gradient(180deg,#0a141d,#0c1922);border:1px solid #090f15;border-radius:6px;box-shadow:inset 0 2px 5px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.03)}
/* the objectives rail sits on the cabinet with a faint inset well; its individual rows are the cards */
.sim-rail{background:linear-gradient(180deg,rgba(8,16,23,.5),rgba(10,20,28,.3));border:1px solid #0c151d;border-radius:8px;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.sim .sim-stat b,.sim .sim-kpi .k-top b,.sim-goal .gn-prog,.sim-goal .goal-pct{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;text-shadow:0 0 9px rgba(67,189,242,.3)}
.hud .sim-stat span,.hud .sim-kpi .k-top span{color:#88a1b3}
.sim .sim-kpi .k-bar{background:#04101a;box-shadow:inset 0 1px 2px rgba(0,0,0,.85)}
.sim .sim-kpi .k-fill{box-shadow:0 0 9px -1px currentColor}
/* clickable HUD readouts: clear cyan outline on hover/focus (overrides the cockpit inset border) */
.hud .sim-kpi.kpi-click,.hud .sim-stat.kpi-click{transition:border-color .14s,box-shadow .14s,transform .1s}
.hud .sim-kpi.kpi-click:hover,.hud .sim-stat.kpi-click:hover{border-color:var(--con-cy);box-shadow:inset 0 2px 5px rgba(0,0,0,.45),0 0 0 1.5px var(--con-cy),0 0 16px -3px rgba(67,189,242,.75);transform:translateY(-1px)}
.hud .sim-kpi.kpi-click:focus-visible,.hud .sim-stat.kpi-click:focus-visible{outline:none;border-color:var(--con-cy);box-shadow:inset 0 2px 5px rgba(0,0,0,.45),0 0 0 2px var(--con-cy)}
.hud .sim-kpi.kpi-click:hover .k-fill{filter:brightness(1.2)}
#sim-ticker{background:linear-gradient(180deg,#0a141d,#0c1922);box-shadow:inset 0 2px 4px rgba(0,0,0,.6);border-color:#090f15}
/* Toolbar = control deck */
.game-toolbar{background:linear-gradient(180deg,#222f3b,#16212b);border-top:1px solid #090f15;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 -3px 8px -5px rgba(0,0,0,.6)}
.sim .tb-sep{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55),transparent);box-shadow:1px 0 0 rgba(255,255,255,.05)}
/* Tactile metal buttons */
.sim .tb-btn,.sim .sim-b:not(.found):not(.short),.sim .gp-close,.sim .hud-fs,.sim .mm-site,.sim .grp-tab,.fx-ctrl{
  background:linear-gradient(180deg,#2c3b48,#1c2935);border:1px solid #090f15;color:#dbe7ef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 3px rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.5);
}
.sim .tb-btn:hover,.sim .sim-b:not(.found):not(.short):hover:not(:disabled),.sim .gp-close:hover,.sim .hud-fs:hover,.sim .mm-site:hover,.sim .grp-tab:hover,.fx-ctrl:hover{
  background:linear-gradient(180deg,#374a59,#23323f);border-color:#0a1620;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(67,189,242,.45),0 0 10px -2px rgba(67,189,242,.5);
}
.sim .tb-btn:active,.sim .sim-b:not(.found):not(.short):active:not(:disabled),.sim .gp-close:active,.sim .hud-fs:active,.sim .mm-site:active,.fx-ctrl:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.65);transform:translateY(1px)}
/* Lit toggle states */
.sim .tb-btn.active,.sim .grp-tab.active,.sim .mm-site.sel{
  background:linear-gradient(180deg,#0c2c3e,#0a2230);color:#fff;border-color:#090f15;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 0 0 1px var(--con-cy),0 0 12px -3px rgba(67,189,242,.7);
}
/* Build keys keep their accent, gain a bevel */
.sim .sim-b.found,.sim .sim-b.short{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.45)}
/* Projects = illuminated key */
.sim .tb-btn.tb-cta{background:linear-gradient(180deg,#1b4d66,#0f3346);border:1px solid #090f15;color:#eaf7ff;
  box-shadow:inset 0 1px 0 rgba(130,215,250,.4),inset 0 -2px 4px rgba(0,0,0,.4),0 0 13px -3px rgba(67,189,242,.6),0 1px 2px rgba(0,0,0,.5)}
.sim .tb-btn.tb-cta:hover{background:linear-gradient(180deg,#226184,#114056);color:#fff}
/* End quarter = big illuminated action */
.sim #sim-end{background:linear-gradient(180deg,#3aa9da,#2080b1);color:#04141d;border:1px solid #0a2a3a;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 5px rgba(0,0,0,.3),0 0 16px -4px rgba(67,189,242,.75),0 2px 3px rgba(0,0,0,.5)}
.sim #sim-end:hover{background:linear-gradient(180deg,#48b8e8,#2a90c2)}
.sim #sim-end:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
/* Pop-up windows = brushed-metal panels with a labeled bezel header */
.game-panel{background:linear-gradient(180deg,#1f2d39,#16222d);border:1px solid #090f15;border-top:2px solid var(--con-cy);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.4)}
.gp-head{margin:0 -18px 10px;padding:12px 16px 11px;border-bottom:1px solid #090f15;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 5px -2px rgba(0,0,0,.55);
  background:radial-gradient(circle at 14px 50%,rgba(190,210,225,.5) 0 1.8px,transparent 2.7px),radial-gradient(circle at calc(100% - 44px) 50%,rgba(190,210,225,.5) 0 1.8px,transparent 2.7px),linear-gradient(180deg,#28353f,#1a2530)}
.gp-head h3{text-transform:uppercase;letter-spacing:.1em;font-size:.84rem;padding-left:16px;position:relative}
.gp-head h3::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:14px;background:var(--con-cy);border-radius:1px;box-shadow:0 0 8px -1px var(--con-cy)}
/* Recessed glass viewport with corner screws */
.sim>.sim-factory{border:2px solid #090f15;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 3px 22px rgba(0,0,0,.5)}
.sim>.sim-factory::after{content:"";position:absolute;inset:7px;z-index:6;pointer-events:none;background-repeat:no-repeat;
  background:radial-gradient(circle at 0 0,rgba(195,215,228,.5) 0 2px,transparent 3px),radial-gradient(circle at 100% 0,rgba(195,215,228,.5) 0 2px,transparent 3px),radial-gradient(circle at 0 100%,rgba(195,215,228,.5) 0 2px,transparent 3px),radial-gradient(circle at 100% 100%,rgba(195,215,228,.5) 0 2px,transparent 3px)}
/* Shift clock = green LCD readout */

/* ---- Square factory buttons · consistent sizing · brushed steel · scanlines ---- */
/* every toolbar key: same height, square corners, single tidy row */
.game-toolbar{gap:5px}
.game-toolbar .tb-btn,.game-toolbar .sim-b,.game-toolbar #sim-end,.game-toolbar .btn{
  height:38px;min-height:38px;padding:0 9px;border-radius:3px;flex:0 0 auto;
  display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;line-height:1;font-size:.78rem;
}
.game-toolbar .tb-btn.tb-cta{padding:0 12px}
/* WINDOWED desktop: the console is capped by the page column (~1040px inner), and the full 10-key row
   needs ~996px — one extra badge digit (or the Debt key appearing) used to push Settings onto its own
   row. Slim the keys slightly in windowed mode only so the row always fits; fullscreen keeps full size. */
@media (min-width:681px){
  .sim:not(.fullscreen) .game-toolbar{gap:3px}
  .sim:not(.fullscreen) .game-toolbar .tb-btn,.sim:not(.fullscreen) .game-toolbar .sim-b,.sim:not(.fullscreen) .game-toolbar #sim-end,.sim:not(.fullscreen) .game-toolbar .btn{padding:0 6px;font-size:.73rem}
  .sim:not(.fullscreen) .game-toolbar .tb-btn.tb-cta{padding:0 9px}
}
/* square corners across the cockpit chrome */
.sim{border-radius:7px}
.sim.fullscreen{border-radius:0}
.sim .tb-btn,.sim .sim-b,.sim .grp-tab,.sim .mm-site,.fx-ctrl{border-radius:3px}
.sim .gp-close,.sim .hud-fs{border-radius:3px;width:38px;height:38px;padding:0}
.hud .sim-stat,.hud .sim-kpi,#sim-goal,#sim-ticker{border-radius:2px}
.sim .sim-kpi .k-bar{border-radius:2px}
.game-panel{border-radius:4px}
.sim>.sim-factory{border-radius:4px}
.sim .grp-tab{height:40px;border-radius:3px}
/* brushed-steel texture on the large metal surfaces */
.sim{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),linear-gradient(180deg,#243443,#16222e 55%,#0f1820)}
.game-toolbar{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),linear-gradient(180deg,#222f3b,#16212b)}
.hud{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),linear-gradient(180deg,#27343f,#1a2531)}
/* CRT scanlines + glass sheen on the recessed readouts */
.hud .sim-stat,.hud .sim-kpi{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(180deg,#0a141d,#0c1922)}
.hud .sim-stat::after,.hud .sim-kpi::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%)}
/* hazard caution strip along the top of the control deck */
.game-toolbar::before{content:"";position:absolute;top:-2px;left:0;right:0;height:3px;pointer-events:none;background:repeating-linear-gradient(45deg,rgba(224,162,58,.55) 0 7px,rgba(14,20,28,.75) 7px 14px)}
/* amber maintenance / warning key */
.sim #sim-paydebt{color:#f2c277;border:1px solid #3a2a12;border-left:3px solid #e0a23a;background:linear-gradient(180deg,#3a3320,#241c0d);box-shadow:inset 0 1px 0 rgba(255,210,140,.2),inset 0 -2px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.5)}
.sim #sim-paydebt:hover{color:#ffd89a;background:linear-gradient(180deg,#4a4126,#2f2512);box-shadow:inset 0 1px 0 rgba(255,210,140,.25),0 0 0 1px rgba(224,162,58,.5),0 0 11px -2px rgba(224,162,58,.55)}
.sim #sim-paydebt:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
/* square the content tiles to match */
.game-panel .sim-layer,.game-panel .adv-card,.game-panel .site-card,.game-panel .sim-log,.game-panel .area-issue,.game-panel .area-drivers,.sim .am-bar{border-radius:3px}

/* ---- engraved labels, toggle switch, LED cluster, amber-when-high debt ---- */
/* engraved (debossed) instrument labels */
.hud .sim-stat span,.hud .sim-kpi .k-top span,#fx-leds .led,.fx-stack-head,.fx-grp-l{text-shadow:0 1px 0 rgba(0,0,0,.55),0 -1px 0 rgba(255,255,255,.05)}
/* Sound = physical rocker switch */
#sim-sound{gap:8px}
#sim-sound .sw{position:relative;width:26px;height:13px;border-radius:8px;flex:0 0 auto;background:#0a141d;border:1px solid #090f15;box-shadow:inset 0 1px 2px rgba(0,0,0,.75)}
#sim-sound .sw-k{position:absolute;top:1px;left:1px;width:11px;height:11px;border-radius:50%;background:#5a6b78;box-shadow:0 1px 1px rgba(0,0,0,.6);transition:left .18s ease,background .18s}
#sim-sound.on .sw{background:#0c2c1e;border-color:#0a1f15}
#sim-sound.on .sw-k{left:13px;background:#56e8b0;box-shadow:0 0 7px #56e8b0}
#sim-sound .sw-lbl{font-size:.78rem;font-weight:700;letter-spacing:.04em}
/* status LED cluster (under the viewport title) */
#fx-leds{top:31px;left:14px;display:flex;gap:10px;pointer-events:none}
#fx-leds .led{display:inline-flex;align-items:center;gap:4px;font-size:.56rem;font-weight:700;letter-spacing:.07em;color:#7f97ad}
#fx-leds .led i{width:7px;height:7px;border-radius:50%;background:#33485a;box-shadow:inset 0 0 2px rgba(0,0,0,.7)}
#fx-leds .led-g i{background:#56e8b0;box-shadow:0 0 6px #56e8b0;border-radius:50%}
#fx-leds .led-a i{background:#ffc664;box-shadow:0 0 6px #ffc664;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)} /* triangle = partial */
#fx-leds .led-r i{background:#ff5b52;box-shadow:0 0 7px #ff5b52;border-radius:1px;animation:ledBlink 1s steps(2,jump-none) infinite} /* blinking square = alarm */
#fx-leds .led-o i{background:transparent;border:1.5px solid #4a5b69;box-shadow:none} /* hollow = off/inactive */
@keyframes ledBlink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){#fx-leds .led-r i{animation:none}}
/* amber/red when technical debt climbs */
.sim .sim-kpi.kpi-warn{border-color:#7a5a17;box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 0 0 1px rgba(224,162,58,.4),0 0 12px -3px rgba(224,162,58,.55)}
.sim .sim-kpi.kpi-warn .k-top b{color:#ffd28a;text-shadow:0 0 9px rgba(224,162,58,.5)}
.sim .sim-kpi.kpi-crit{border-color:#7a241c;box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 0 0 1px rgba(255,91,82,.5),0 0 14px -3px rgba(255,91,82,.7);animation:kpiCrit 1.1s ease-in-out infinite}
.sim .sim-kpi.kpi-crit .k-top b{color:#ff8e86;text-shadow:0 0 10px rgba(255,91,82,.6)}
.sim-kpi .k-flag{font-weight:800;font-style:normal}
.sim .sim-kpi.kpi-warn .k-flag{color:#ffd28a} .sim .sim-kpi.kpi-crit .k-flag{color:#ff8e86}
@keyframes kpiCrit{0%,100%{box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 0 0 1px rgba(255,91,82,.45),0 0 10px -3px rgba(255,91,82,.5)}50%{box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 0 0 1px rgba(255,91,82,.8),0 0 18px -2px rgba(255,91,82,.85)}}
@media (prefers-reduced-motion:reduce){.sim .sim-kpi.kpi-crit{animation:none}}

/* ===== Shop-floor HMI push-buttons: raised metal caps seated in the panel ===== */
.sim .tb-btn,.sim .sim-b:not(.found):not(.short),.sim .gp-close,.sim .hud-fs,.sim .mm-site,.sim .grp-tab,.fx-ctrl{
  border:1px solid #070d12;border-radius:4px;color:#e3edf4;text-shadow:0 -1px 0 rgba(0,0,0,.4);
  background:linear-gradient(180deg,#3c4d5b 0%,#2a3845 46%,#1b2733 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 6px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.05),0 2px 0 #0a131b,0 4px 6px -1px rgba(0,0,0,.55);
  transition:background .12s,box-shadow .12s,transform .06s;
}
.sim .tb-btn:hover,.sim .sim-b:not(.found):not(.short):hover:not(:disabled),.sim .gp-close:hover,.sim .hud-fs:hover,.sim .mm-site:hover,.sim .grp-tab:hover,.fx-ctrl:hover{
  border-color:#0a1620;color:#fff;
  background:linear-gradient(180deg,#475b6b 0%,#324351 46%,#212f3b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -3px 6px rgba(0,0,0,.4),0 2px 0 #0a131b,0 5px 9px -1px rgba(0,0,0,.55),0 0 0 1px rgba(67,189,242,.4),0 0 11px -3px rgba(67,189,242,.5);
}
.sim .tb-btn:active,.sim .sim-b:not(.found):not(.short):active:not(:disabled),.sim .gp-close:active,.sim .hud-fs:active,.sim .mm-site:active,.sim .grp-tab:active,.fx-ctrl:active{
  transform:translateY(2px);background:linear-gradient(180deg,#222f3a,#192430);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 #0a131b,0 1px 2px rgba(0,0,0,.5);
}
/* Confirm modal actions: keep the primary "go" cyan-filled and the "danger" red, above BOTH metal-button
   definitions. Extra ancestor (.sim-modal) lifts specificity so source order can't bury it; label text is
   pinned dark on the cyan fill (white on red) so it never reads as greyed-out. */
.sim .sim-modal .sim-confirm-row .sim-b.confirm-go{background:linear-gradient(180deg,#43bdf2,#1f8fc4);border:1px solid #1f8fc4;color:#04223a;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 #0a131b,0 4px 6px -1px rgba(0,0,0,.5)}
.sim .sim-modal .sim-confirm-row .sim-b.confirm-go .b-main{color:#04223a}
.sim .sim-modal .sim-confirm-row .sim-b.confirm-go:hover:not(:disabled){background:linear-gradient(180deg,#5ccaf7,#2aa8e0);border-color:#2aa8e0;color:#04223a}
.sim .sim-modal .sim-confirm-row .sim-b.confirm-danger{background:linear-gradient(180deg,#d85a30,#a8381f);border:1px solid #a8381f;color:#fff;text-shadow:none}
.sim .sim-modal .sim-confirm-row .sim-b.confirm-danger .b-main{color:#fff}
.sim .sim-modal .sim-confirm-row .sim-b.confirm-danger:hover:not(:disabled){background:linear-gradient(180deg,#e8703f,#c8472a);border-color:#c8472a}
/* Build keys: colored-collar HMI caps (keep green/amber edges) */
.sim .sim-b.found,.sim .sim-b.short{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.4),0 2px 0 #0a131b,0 4px 6px -1px rgba(0,0,0,.5)}
.sim .sim-b.found:active:not(:disabled),.sim .sim-b.short:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 #0a131b,0 1px 2px rgba(0,0,0,.5)}
/* End quarter = illuminated blue start button */
.sim #sim-end{border:1px solid #0a3145;color:#04141d;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.4);
  background:linear-gradient(180deg,#56bced 0%,#2f93c6 50%,#1c74a4 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,40,60,.45),0 2px 0 #14557a,0 4px 8px -1px rgba(0,0,0,.5),0 0 16px -5px rgba(67,189,242,.8)}
.sim #sim-end:hover{background:linear-gradient(180deg,#63c6f5,#36a0d4 50%,#2380b0)}
.sim #sim-end:active{transform:translateY(2px);box-shadow:inset 0 2px 7px rgba(0,30,48,.5),0 0 0 #14557a,0 1px 2px rgba(0,0,0,.5),0 0 10px -4px rgba(67,189,242,.7)}
/* Projects = illuminated cyan key */
.sim .tb-btn.tb-cta{border:1px solid #082531;color:#eaf7ff;
  background:linear-gradient(180deg,#2a6f90 0%,#15506c 50%,#0e3a50 100%);
  box-shadow:inset 0 1px 0 rgba(150,225,255,.5),inset 0 -3px 6px rgba(0,0,0,.4),0 2px 0 #07232f,0 4px 7px -1px rgba(0,0,0,.5),0 0 13px -4px rgba(67,189,242,.65)}
.sim .tb-btn.tb-cta:hover{background:linear-gradient(180deg,#3486a8,#1b6182 50%,#124a64);box-shadow:inset 0 1px 0 rgba(150,225,255,.55),0 2px 0 #07232f,0 5px 9px -1px rgba(0,0,0,.5),0 0 15px -3px rgba(67,189,242,.7)}
.sim .tb-btn.tb-cta:active{transform:translateY(2px);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 0 #07232f,0 1px 2px rgba(0,0,0,.5),0 0 9px -4px rgba(67,189,242,.6)}
/* Pay debt = amber maintenance cap */
.sim #sim-paydebt{border:1px solid #1e1608;border-left:3px solid #e0a23a;color:#f2c277;
  background:linear-gradient(180deg,#5a4a22 0%,#3d3015 50%,#2a2010 100%);
  box-shadow:inset 0 1px 0 rgba(255,210,140,.35),inset 0 -3px 6px rgba(0,0,0,.4),0 2px 0 #18120a,0 4px 6px -1px rgba(0,0,0,.5)}
.sim #sim-paydebt:hover{color:#ffd89a;background:linear-gradient(180deg,#6b5826,#4a3a18 50%,#352814);box-shadow:inset 0 1px 0 rgba(255,210,140,.4),0 2px 0 #18120a,0 5px 9px -1px rgba(0,0,0,.5),0 0 11px -3px rgba(224,162,58,.5)}
.sim #sim-paydebt:active{transform:translateY(2px);box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 0 0 #18120a,0 1px 2px rgba(0,0,0,.5)}
/* Latched + lit toggle (selected panel/tab/site) — pressed-in and illuminated */
.sim .tb-btn.active,.sim .grp-tab.active,.sim .mm-site.sel{
  transform:translateY(1px);color:#dff4ff;border-color:#06151e;
  background:linear-gradient(180deg,#0c2c3e,#0a2230);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.65),inset 0 0 11px rgba(67,189,242,.28),0 0 0 1px var(--con-cy),0 0 13px -3px rgba(67,189,242,.7);
}

/* ===== Machined-metal cap faces: brushed grain + top gloss + breathing backlight ===== */
.sim .tb-btn,.sim .sim-b,.sim .gp-close,.sim .hud-fs,.sim .mm-site,.sim .grp-tab,.fx-ctrl,.sim #sim-end{position:relative}
.sim .tb-btn::before,.sim .sim-b::before,.sim .gp-close::before,.sim .hud-fs::before,.sim .mm-site::before,.sim .grp-tab::before,.fx-ctrl::before,.sim #sim-end::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 38%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.62),inset 0 0 0 1px rgba(200,216,228,.32),inset 0 -1.5px 0 rgba(255,255,255,.16),inset 0 -1px 3px rgba(0,0,0,.3);
}
/* breathing backlight on the two illuminated keys */
@keyframes endGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,40,60,.45),0 2px 0 #14557a,0 4px 8px -1px rgba(0,0,0,.5),0 0 12px -6px rgba(67,189,242,.5)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,40,60,.45),0 2px 0 #14557a,0 4px 8px -1px rgba(0,0,0,.5),0 0 22px -3px rgba(67,189,242,.95)}}
@keyframes ctaGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(150,225,255,.5),inset 0 -3px 6px rgba(0,0,0,.4),0 2px 0 #07232f,0 4px 7px -1px rgba(0,0,0,.5),0 0 10px -5px rgba(67,189,242,.4)}50%{box-shadow:inset 0 1px 0 rgba(150,225,255,.5),inset 0 -3px 6px rgba(0,0,0,.4),0 2px 0 #07232f,0 4px 7px -1px rgba(0,0,0,.5),0 0 18px -3px rgba(67,189,242,.8)}}
.sim #sim-end{animation:endGlow 2.8s ease-in-out infinite}
.sim #sim-end:hover,.sim #sim-end:active{animation:none}
.sim .tb-btn.tb-cta{animation:ctaGlow 2.8s ease-in-out infinite}
.sim .tb-btn.tb-cta:hover,.sim .tb-btn.tb-cta:active,.sim .tb-btn.tb-cta.active{animation:none}
@media (prefers-reduced-motion:reduce){.sim #sim-end,.sim .tb-btn.tb-cta{animation:none}}
/* narrow-window Projects supplement (late in the sheet so the cockpit-skin rules above don't win):
   same font sizes, tighter leading + slimmer chrome, and only the longest description caps at 6 lines */
@media (min-width:641px) and (max-width:900px){
  .sim .grp-tab{height:36px}
  .game-panel[data-panel="invest"]{padding-bottom:10px}
  .sim-layer{padding:8px 10px}
  .sim-layer p{line-height:1.36}
  .sim-layer .kpi-impact,.sim-layer .prereq,.sim-layer .unlocks{line-height:1.3}
  .sim-btns{gap:6px}
  .sim .sim-b{padding:6px 8px}
}
/* phone-width Projects: the three group tabs (Enablers/Data/Intelligence + counters) must fit a 375px panel */
@media (max-width:640px){
  .grp-tabs{gap:4px}
  .grp-tab{padding:8px 5px;font-size:.76rem;gap:4px;min-width:0}
  .grp-tab .gt-prog{font-size:.6rem;padding:1px 5px}
}
/* phone Status sheet: an explicit close affordance (the sheet also dismisses on outside tap / Escape) */
.rail-x{display:none}
@media (max-width:680px){
  .sim.rail-over #sim-goal .rail-x{display:flex;position:sticky;top:-10px;z-index:3;width:100%;align-items:center;justify-content:center;gap:6px;background:#13293d;border:1px solid #33506a;border-radius:8px;padding:8px 10px;margin:0 0 8px;color:#dbe9f7;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
}
/* end-screen architecture debrief: layer scorecard + reuse ledger + alternative path + go-deeper links.
   Statuses are always glyph + word (✓ foundation / ▲ quick win / ⚠ hand-wired / ✗ not built) — never colour alone. */
.end-debrief{max-width:64ch;margin:18px auto 6px;text-align:left;background:var(--con-bg2);border:1px solid var(--con-line);border-left:3px solid var(--con-cy);border-radius:12px;padding:16px 18px}
.edb-h{display:block;font-weight:700;font-size:.92rem;color:#fff;margin-bottom:10px}
.edb-lays{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.edb-lay{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:4px 8px;border-radius:7px;border:1px solid var(--con-line2);color:#dbe9f5;background:rgba(9,20,31,.55)}
.edb-lay i{font-style:normal;font-weight:500;font-size:.68rem;color:#9fb4c6}
.edb-f{border-color:rgba(47,207,148,.55)}
.edb-q{border-color:rgba(255,198,100,.55)}
.edb-hw{border-color:rgba(255,198,100,.8);border-style:dashed}
.edb-n{opacity:.62}
.edb-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}
.edb-col h5{margin:0 0 7px;font-size:.8rem;color:#fff}
.edb-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.edb-col li{font-size:.8rem;line-height:1.45;color:#c4d4e2;padding-left:10px;border-left:2px solid var(--con-line2)}
.edb-good li{border-left-color:rgba(47,207,148,.5)}
.edb-bad li{border-left-color:rgba(255,198,100,.5)}
.edb-col li b{color:#fff}
.edb-alt{background:rgba(67,189,242,.08);border:1px solid rgba(67,189,242,.3);border-radius:9px;padding:9px 12px;margin:0 0 10px}
.edb-alt-h{display:block;font-weight:700;font-size:.78rem;color:#9be3ff;margin-bottom:3px}
.edb-alt p{margin:0;font-size:.82rem;line-height:1.5;color:#c4d4e2}
.edb-alt b{color:#fff}
.edb-links{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:.78rem;color:#9fb4c6}
.edb-links a{color:#43bdf2;font-weight:600;text-decoration:underline}
@media (max-width:680px){.edb-cols{grid-template-columns:1fr}}
/* homepage reuse section: source line under the borrowed Paper 3 cost chart */
.viz-src{text-align:center;font-size:.85rem;color:#5f7280;margin:10px auto 34px;max-width:60ch}
.viz-src a{color:#1272a8;text-decoration:underline}
/* homepage intro: at-a-glance counters + standards trust bar */
.intro-stats{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin:28px 0 4px}
.is-item{text-align:center;min-width:84px}
.is-num{display:block;font-size:2.1rem;font-weight:800;color:#0b2138;line-height:1;font-variant-numeric:tabular-nums}
.is-lbl{display:block;margin-top:5px;font-size:.82rem;color:#5f7280}
.intro-stds{display:flex;justify-content:center;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:22px auto 0;max-width:72ch}
.stds-lead{font-size:.74rem;color:#5f7280;letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.std-chip{font:600 .78rem ui-monospace,Consolas,monospace;color:#1272a8;border:1px solid #c9d4dd;border-radius:8px;padding:4px 10px;background:#fbfdfe;text-decoration:none}
.std-chip:hover,.std-chip:focus-visible{border-color:#2aa8e0;text-decoration:underline}
/* end-of-file sentinel: the loader check reads this to detect a truncated stylesheet (keep as the LAST rule) */
:root{--css-complete:1}