:root{
  --ink:#14233d; --ink2:#243a5d; --muted:#5d6d84; --paper:#f7f8fa; --white:#fff;
  --line:#dce3ea; --soft:#edf2f6; --teal:#0a6f6c; --teal2:#dff3f1;
  --blue:#1f5f94; --blue2:#e8f1f8; --amber:#8a5109; --amber2:#fff4df;
  --red:#95302f; --red2:#fcebea; --green:#2f6b4f; --green2:#e4f3ea;
  --code-bg:#0f1a2b; --code-fg:#d7e2ec; --code-head:#182740;
  --shadow:0 18px 48px rgba(25,48,78,.14);
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
[data-theme="dark"]{
  --ink:#e8eef6; --ink2:#c3d0e0; --muted:#93a3b8; --paper:#0c121c; --white:#131b28;
  --line:#26324a; --soft:#1a2333; --teal:#5ecfc4; --teal2:#12312f;
  --blue:#7ab3e0; --blue2:#132538; --amber:#e0a95c; --amber2:#2d2416;
  --red:#e58b8b; --red2:#311d1d; --green:#7fc79f; --green2:#16301f;
  --code-bg:#080d16; --code-fg:#cfdae7; --code-head:#111b2c;
  --shadow:0 18px 48px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;transition:background .2s,color .2s}
button,input,select{font:inherit}
.shell{width:min(1600px,calc(100% - 64px));margin:auto}
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-150%);background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100}
.skip-link:focus{transform:none}
.mono-sm{font:600 11.5px var(--mono);color:var(--muted)}

.project-banner{background:#0c1a2d;color:#b8c8d9;text-align:center;font:600 10.5px/1.4 var(--mono);letter-spacing:.06em;padding:10px 16px}
[data-theme="dark"] .project-banner{background:#060b13;color:#8fa3ba}

.site-header{position:sticky;top:0;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);z-index:20}
.nav-row{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:750}
.brand small{display:block;color:var(--muted);font-weight:500;font-size:11px;letter-spacing:.02em}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--teal);background:var(--teal2);color:var(--teal);border-radius:10px;font:700 12px var(--mono)}
.nav-right{display:flex;align-items:center;gap:18px}
nav{display:flex;gap:20px}
nav a{color:var(--ink2);font-size:13px;font-weight:650;text-decoration:none}
nav a:hover{color:var(--teal)}
.theme-toggle{width:40px;height:40px;border-radius:9px;border:1px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;font-size:16px;display:grid;place-items:center}
.theme-toggle:hover{border-color:var(--teal);color:var(--teal)}
.theme-icon-dark{display:none}
[data-theme="dark"] .theme-icon-light{display:none}
[data-theme="dark"] .theme-icon-dark{display:inline}

.hero{padding:64px 0 44px}
.eyebrow{margin:0 0 12px;color:var(--teal);font:700 11px/1.2 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.07;letter-spacing:-.04em;margin:0;max-width:900px}
.lede{font-size:17px;line-height:1.65;color:var(--muted);max-width:820px;margin:22px 0 14px}
.micro{font-size:12px;color:var(--muted);margin:0}

.section{padding:20px 0 76px}
.section-head{margin-bottom:26px}
.section-head h2,.references h2{font-size:clamp(26px,3.6vw,38px);line-height:1.14;letter-spacing:-.03em;margin:0}

/* control picker */
.control-picker{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:30px}
.picker-label{display:block;font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.control-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ctrl-btn{background:var(--paper);border:1px solid var(--line);color:var(--ink2);padding:10px 14px;border-radius:9px;cursor:pointer;text-align:left;min-width:0}
.ctrl-btn strong{display:block;font:700 12px var(--mono);color:var(--teal)}
.ctrl-btn span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ctrl-btn.active{background:var(--teal2);border-color:var(--teal)}
.ctrl-btn.active span{color:var(--ink2)}
.selected-pack{display:flex;align-items:center;gap:10px;width:100%}
.selected-pack strong{font:700 12px var(--mono);color:var(--teal);background:var(--teal2);border:1px solid var(--teal);padding:6px 9px;border-radius:7px}
.selected-pack span{font-size:13px;font-weight:700;color:var(--ink2)}
.selected-pack a{display:inline-flex;align-items:center;min-height:24px;margin-left:auto;font-size:12px;font-weight:650;color:var(--teal);text-decoration:none}
.selected-pack a:hover{text-decoration:underline}

/* environment profile */
.environment-zone{background:color-mix(in srgb,var(--blue2) 42%,var(--paper));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head-with-toggle{display:grid;grid-template-columns:minmax(0,1fr) 32px;column-gap:18px;align-items:start;padding-right:0}.section-head-with-toggle>p{grid-column:1}.environment-head{padding-right:0}.collapse-toggle{position:static;grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--white);color:var(--teal);font:700 17px/1 var(--mono);cursor:pointer}.collapse-toggle:hover{border-color:var(--teal);background:var(--teal2)}
.section-body{min-width:0}.flow-heading{margin-bottom:22px}.flow-heading h2{font-size:23px}.flow-body{min-width:0}
.zone-library.is-collapsed .section-body,.implementation-summary.is-collapsed .section-body,.zone-walkthrough.is-collapsed .flow-body{display:none}
.environment-zone.is-collapsed .environment-layout{display:none}.environment-zone.is-collapsed .environment-setup-body{display:block}.environment-zone.is-collapsed{padding-bottom:24px}.environment-zone.is-collapsed .section-head{margin-bottom:0}.environment-zone.is-collapsed .profile-summary{margin-top:0}
.environment-layout{display:grid;grid-template-columns:minmax(240px,.55fr) 1.45fr;gap:26px}
.profile-choice-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px}
.profile-choice-head .picker-label{margin:0}.profile-choice-note{font-size:11px;color:var(--muted)}
.operating-profiles{display:grid;gap:8px}
.profile-card{display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);text-align:left;cursor:pointer}
.profile-card:hover{border-color:var(--teal)}
.profile-card.active{border-color:var(--teal);background:var(--teal2);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 16%,transparent)}
.profile-radio{width:15px;height:15px;margin-top:2px;flex:0 0 auto;border:1px solid var(--muted);border-radius:50%;background:var(--white)}
.profile-card.active .profile-radio{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 4px var(--teal2)}
.profile-card strong,.profile-card small{display:block}.profile-card strong{font-size:12px;line-height:1.35}.profile-card small{margin-top:4px;font-size:10.5px;line-height:1.45;color:var(--muted)}
.profile-card em{display:block;margin-top:6px;font:700 9px var(--mono);font-style:normal;color:var(--teal);letter-spacing:.02em}
.role-impact{margin:10px 2px 0;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--muted);font-size:10.5px;line-height:1.45}
.technology-groups{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:1280px){.technology-groups{grid-template-columns:1fr 1fr 1fr}}
.technology-group{min-width:0;margin:0;padding:11px 12px 12px;border:1px solid var(--line);border-radius:9px;background:var(--white)}
.technology-group legend{padding:0 4px;font-size:12px;font-weight:750}.technology-group>p{margin:1px 0 9px;font-size:10.5px;line-height:1.4;color:var(--muted)}
/* Two lines per option instead of four. The badge rides inline with the label
 * and the full route explanation is one disclosure per GROUP, so a group with
 * eight products is a list rather than a wall. */
.technology-options{display:grid;gap:2px}
.technology-option{display:flex;gap:8px;align-items:flex-start;cursor:pointer;
  padding:4px 5px;border-radius:6px;min-width:0}
.technology-option:hover{background:var(--paper)}
.technology-option input{margin:3px 0 0;accent-color:var(--teal);flex:0 0 auto}
.opt-body{display:grid;gap:0;min-width:0}
.opt-head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;min-width:0}
.technology-option strong{font-size:11px;line-height:1.35;color:var(--ink)}
.technology-option small{font-size:9.5px;line-height:1.35;color:var(--muted)}
.technology-option em{font:700 8px var(--mono);font-style:normal;letter-spacing:.02em;white-space:nowrap}
.technology-option.route-direct em{color:var(--teal)}
.technology-option.route-splunk em{color:var(--blue)}
.technology-option.route-contract em{color:var(--amber)}
.technology-option.route-roadmap em{color:var(--muted)}

.group-routes{margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}
.group-routes>summary{font:600 9px var(--mono);color:var(--muted);cursor:pointer;list-style:none;
  min-height:24px;display:inline-flex;align-items:center}
.group-routes>summary::-webkit-details-marker{display:none}
.group-routes>summary::before{content:"b8 ";margin-right:3px}
.group-routes[open]>summary::before{content:"be "}
.group-routes>summary:hover,.group-routes>summary:focus-visible{color:var(--teal)}
.route-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.route-list li{display:grid;gap:2px;padding-left:9px;border-left:2px solid var(--line)}
.route-list li>b{font:700 10px var(--sans);color:var(--ink)}
.route-list li>span{font-size:10px;line-height:1.5;color:var(--muted)}
.route-list li>span>em{font:700 8px var(--mono);font-style:normal;letter-spacing:.02em;margin-right:4px}
.route-list li.route-direct>span>em{color:var(--teal)}
.route-list li.route-splunk>span>em{color:var(--blue)}
.route-list li.route-contract>span>em{color:var(--amber)}
.route-list li.route-roadmap>span>em{color:var(--muted)}

/* legend explaining the badges before the options are shown */
.route-legend{margin:0 0 12px;border:1px solid var(--line);border-radius:9px;background:var(--white)}
.route-legend>summary{padding:9px 11px;cursor:pointer;display:grid;gap:1px;list-style:none}
.route-legend>summary::-webkit-details-marker{display:none}
.route-legend>summary strong{font-size:11.5px;color:var(--ink)}
.route-legend>summary strong::before{content:"▸ ";color:var(--muted)}
.route-legend[open]>summary strong::before{content:"▾ "}
.route-legend>summary small{font-size:10px;color:var(--muted);padding-left:12px}
.route-legend-body{padding:0 13px 12px;border-top:1px solid var(--line)}
.route-legend-body>p{margin:10px 0;font-size:11px;line-height:1.6;color:var(--ink2)}
.route-legend-body dl{margin:0;display:grid;gap:7px}
.route-legend-body dt{font:700 9px var(--mono);letter-spacing:.03em;text-transform:uppercase}
.route-legend-body dt.route-direct{color:var(--teal)}
.route-legend-body dt.route-splunk{color:var(--blue)}
.route-legend-body dt.route-contract{color:var(--amber)}
.route-legend-body dt.route-roadmap{color:var(--muted)}
.route-legend-body dd{margin:2px 0 0;font-size:10.5px;line-height:1.6;color:var(--muted)}
.route-legend-body dd code{font:10px var(--mono);color:var(--ink2)}
.route-legend-foot{font-size:10.5px;color:var(--muted)}
.profile-summary{display:grid;grid-template-columns:1fr 1.1fr 1.45fr auto;gap:10px;margin-top:16px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.profile-summary>div{min-width:0;padding:5px 7px}.profile-summary .k{display:block;margin-bottom:5px;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.profile-summary strong{display:block;font-size:12px;line-height:1.35}.profile-summary p{margin:4px 0 0;font-size:10.5px;line-height:1.4;color:var(--muted)}
.profile-summary-fit.supported{border-left:3px solid var(--green)}.profile-summary-fit.manual,.profile-summary-fit.not-selected,.profile-summary-fit.needs-selection{border-left:3px solid var(--amber);background:var(--amber2)}
.profile-summary-actions{display:flex;flex-direction:column;justify-content:center;gap:4px;white-space:nowrap}.profile-summary-actions a{display:inline-flex;align-items:center;min-height:24px;font-size:10.5px;color:var(--teal);font-weight:700;text-decoration:none}.profile-summary-actions a:hover{text-decoration:underline}
.environment-fit{display:flex;gap:10px;align-items:flex-start;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
.environment-fit.ok{border-color:var(--green);background:var(--green2)}.environment-fit.warn{border-color:var(--amber);background:var(--amber2)}
.environment-fit-icon{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--teal);color:#fff;font:700 13px var(--mono)}.environment-fit.warn .environment-fit-icon{background:var(--amber)}
.environment-fit strong{font-size:12px}.environment-fit p{margin:2px 0 0;font-size:11px;line-height:1.45;color:var(--ink2)}
.profile-fit-badge{padding:3px 6px;border-radius:999px;background:var(--teal2);color:var(--teal);font:700 8.5px var(--mono);white-space:nowrap}
.platform-selection-note{margin:10px 0 0;padding:9px 3px 0;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.4}
.query-applicability{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;border:1px solid var(--blue);border-radius:9px;background:var(--blue2)}
.query-applicability.unavailable{border-color:var(--amber);background:var(--amber2)}
.query-applicability-icon{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--blue);color:#fff;font:700 13px var(--mono)}
.query-applicability.unavailable .query-applicability-icon{background:var(--amber)}
.query-applicability strong{display:block;font-size:12px}.query-applicability p{margin:2px 0 0;font-size:11px;line-height:1.45;color:var(--ink2)}.query-applicability p span{font-family:var(--mono);font-size:10px}.query-applicability small{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.code-actions button:disabled{opacity:.45;cursor:not-allowed}.query-highlight-source-key{display:inline-flex;align-items:center;gap:6px;margin-left:12px;font:600 10.5px var(--mono);color:var(--muted)}.query-highlight-source-key i{display:inline-block;width:11px;height:11px;border-radius:3px;background:#9ce7e1;border:1px solid #258f88}
.code-block mark.query-source{background:#9ce7e1;color:#083d3a;border-radius:3px;padding:1px 2px;box-shadow:0 0 0 1px rgba(37,143,136,.35)}
[data-theme="dark"] .code-block mark.query-source{background:#2faaa2;color:#061e1d}

/* flow steps */
.flow-step{display:grid;grid-template-columns:52px 1fr;gap:22px;margin-bottom:8px}
.step-rail{display:flex;flex-direction:column;align-items:center}
.step-num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;font:750 15px var(--mono);flex:0 0 auto}
[data-theme="dark"] .step-num{color:#08201f}
.step-line{flex:1;width:2px;background:var(--line);margin:8px 0}
.flow-step.last .step-line{display:none}
.step-body{padding-bottom:44px;min-width:0}
.step-kicker{margin:6px 0 6px;font:700 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.step-body h2{font-size:25px;letter-spacing:-.025em;margin:0 0 12px;line-height:1.2}
.step-intro{color:var(--muted);font-size:13.5px;margin:0 0 16px;max-width:780px}

.policy-quote{margin:0 0 20px;padding:18px 20px;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:0 10px 10px 0}
.policy-quote p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--ink)}
.policy-quote cite{font-style:normal;font:600 11.5px var(--mono);color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:18px}
.panel h3{font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.panel p{margin:0;font-size:13px;color:var(--ink2);line-height:1.6}
.panel dl{margin:0;display:grid;gap:10px}
.panel dl div{display:grid;gap:2px}
.panel dt{font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.panel dd{margin:0;font-size:12.5px;color:var(--ink2)}

/* platform switch */
.platform-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.plat-btn{background:var(--white);border:1px solid var(--line);color:var(--ink2);padding:11px 16px;border-radius:9px;cursor:pointer;font-weight:700;font-size:13px;text-align:left}
.plat-btn small{display:block;font:500 10.5px var(--mono);color:var(--muted);margin-top:2px}
.plat-btn.active{background:var(--teal2);border-color:var(--teal);color:var(--teal)}
.plat-btn.active small{color:var(--ink2)}
/* A path outside the environment profile stays visible and focusable so the
 * library's breadth is never hidden; activating it explains what to add. */
.plat-btn.locked{border-style:dashed;opacity:.72}
.plat-btn.locked:hover,.plat-btn.locked:focus-visible{opacity:1;border-color:var(--muted)}
.plat-lock{display:block;margin-top:4px;font:600 9.5px var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
@keyframes ocs-attention{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}30%{box-shadow:0 0 0 4px var(--teal2)}}
.attention-flash{animation:ocs-attention 2s ease-out;border-radius:14px}
@media (prefers-reduced-motion:reduce){.attention-flash{animation:none;outline:2px solid var(--teal);outline-offset:4px}}

.query-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.query-meta .qm{background:var(--white);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.query-meta .qm .k{font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.query-meta .qm .v{font-size:12.5px;color:var(--ink2);margin-top:4px}

.code-block{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.code-block.subtle{background:var(--code-bg)}
.code-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 14px;background:var(--code-head);border-bottom:1px solid rgba(255,255,255,.07)}
.code-head .mono-sm{color:#9fb2c6}
.code-actions{display:flex;gap:7px}
.code-actions button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#e3edf6;border-radius:6px;padding:6px 11px;font-size:11px;cursor:pointer}
.code-actions button:hover{border-color:var(--teal);color:var(--teal)}
.code-block pre{margin:0;padding:18px;color:var(--code-fg);font:12px/1.62 var(--mono);white-space:pre;overflow-x:auto;max-height:460px}

/* simulation */
.sim-controls{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);border-radius:11px;padding:16px 18px;margin-bottom:16px}
.sim-controls label{display:flex;flex-direction:column;gap:6px;font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.sim-controls label.grow{flex:1;min-width:210px}
.sim-controls input[type=number]{width:96px;height:40px;border:1px solid var(--line);border-radius:7px;padding:0 10px;font:13px var(--mono);color:var(--ink);background:var(--paper)}
.sim-controls input[type=range]{width:100%;min-height:24px;accent-color:var(--teal)}
.sim-controls b{color:var(--teal);font-family:var(--mono)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border-radius:8px;font-weight:720;font-size:13px;border:1px solid transparent;cursor:pointer}
.button.primary{background:var(--teal);color:#fff}
[data-theme="dark"] .button.primary{color:#06201e}
.button.primary:hover{filter:brightness(1.08)}

.outcome-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:18px}
.oc{background:var(--white);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.oc .k{font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);line-height:1.3}
.oc .v{font:750 22px var(--mono);margin-top:5px}
.oc.f{border-left:3px solid var(--red)} .oc.f .v{color:var(--red)}
.oc.r{border-left:3px solid var(--amber)} .oc.r .v{color:var(--amber)}
.oc.n{border-left:3px solid var(--green)} .oc.n .v{color:var(--green)}
.oc.i{border-left:3px solid var(--muted)}
.oc.x{border-left:3px solid var(--blue)}

.alert-list{display:grid;gap:10px;margin-bottom:22px}
.alert-card{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:16px 18px}
.alert-card.f{border-left:4px solid var(--red)}
.alert-card.r{border-left:4px solid var(--amber)}
.alert-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.alert-ids{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.badge{font:700 9.5px var(--mono);padding:4px 8px;border-radius:5px;letter-spacing:.03em;white-space:nowrap}
.badge.f{background:var(--red2);color:var(--red)}
.badge.r{background:var(--amber2);color:var(--amber)}
.badge.sev{background:var(--soft);color:var(--ink2)}
.badge.tier{background:var(--blue2);color:var(--blue)}
.alert-id{font:700 11px var(--mono);color:var(--muted)}
.alert-desc{font-size:13.5px;color:var(--ink);margin:0 0 12px;line-height:1.55}
.alert-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:12px;border-top:1px solid var(--soft)}
.alert-facts .af .k{font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.alert-facts .af .v{font-size:12.5px;color:var(--ink2);margin-top:3px;word-break:break-word}
.alert-actions{margin-top:12px;display:flex;gap:8px}
.inspect-btn{border:1px solid var(--line);background:var(--paper);color:var(--teal);font-weight:700;font-size:11.5px;padding:7px 12px;border-radius:7px;cursor:pointer}
.inspect-btn:hover{border-color:var(--teal)}
.related-note{font-size:11.5px;color:var(--muted);margin:10px 0 0;font-style:italic}
.empty{padding:34px;text-align:center;border:1px dashed var(--line);border-radius:11px;color:var(--muted);font-size:13px}

.review-panel h3{color:var(--amber)}
.review-panel ul{margin:0 0 14px;padding-left:19px;color:var(--ink2);font-size:13px}
.review-panel li+li{margin-top:6px}
.not-proven{margin:0;padding-top:12px;border-top:1px solid var(--soft);font-size:12.5px;color:var(--muted);line-height:1.6}

/* boundaries + references */
.boundary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.boundary-grid article{padding:24px;border-radius:11px;border:1px solid var(--line);background:var(--white)}
.boundary-grid h3{font-size:16px;margin:0 0 12px}
.boundary-grid ul{margin:0;padding-left:19px;color:var(--muted);font-size:13px}
.boundary-grid li+li{margin-top:6px}
.supports{border-top:4px solid var(--teal)!important}
.does-not{border-top:4px solid var(--red)!important}
.status-card{grid-column:1/-1;background:var(--amber2)!important;border-color:var(--amber)!important}
.status-card p{margin:0;color:var(--ink2);font-size:13px;line-height:1.65}
.references{background:var(--ink);color:var(--paper);padding:70px 0}
[data-theme="dark"] .references{background:#070d17}
.references h2{max-width:760px;color:var(--paper)}
[data-theme="dark"] .references h2{color:var(--ink)}
.references .eyebrow{color:var(--teal)}
.reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.reference-grid a{display:block;color:var(--paper);text-decoration:none;border:1px solid rgba(255,255,255,.15);border-radius:9px;padding:17px;background:rgba(255,255,255,.03)}
[data-theme="dark"] .reference-grid a{color:var(--ink)}
.reference-grid a:hover{border-color:var(--teal);background:rgba(120,200,196,.07)}
.reference-grid strong,.reference-grid span{display:block}
.reference-grid strong{font-size:13px}
.reference-grid span{font-size:11px;color:#a8b8ca;margin-top:5px}

footer{background:#0b1727;color:#b5c1cf;padding:26px 0}
[data-theme="dark"] footer{background:#060b13}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:30px}
.footer-row strong,.footer-row span{display:block}
.footer-row strong{color:#fff;font-size:13px}
.footer-row span,.footer-row p{font-size:11px}
.footer-row p{max-width:520px;text-align:right;margin:0}

/* dialog */
dialog{width:min(720px,calc(100% - 28px));max-height:90vh;border:0;border-radius:13px;padding:0;box-shadow:var(--shadow);color:var(--ink);background:var(--paper)}
dialog::backdrop{background:rgba(8,18,32,.7);backdrop-filter:blur(4px)}
.dialog-shell{background:var(--paper)}
.dialog-head{position:sticky;top:0;display:flex;justify-content:space-between;gap:24px;background:var(--white);padding:22px 26px;border-bottom:1px solid var(--line);z-index:2}
.dialog-head h2{font-size:22px;letter-spacing:-.02em;margin:6px 0 4px}
.dialog-head p{margin:0;color:var(--muted);font-size:13px}
.pack-code{font:700 11px var(--mono);color:var(--teal)}
.icon-button{flex:0 0 auto;width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:22px;cursor:pointer}
#evidenceContent{padding:22px 26px 30px}
.ev-block{background:var(--white);border:1px solid var(--line);border-radius:9px;padding:14px;margin-bottom:11px}
.ev-block .tbl{font:700 11px var(--mono);color:var(--teal);margin-bottom:8px}
.ev-block pre{margin:0;font:11.5px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--ink2)}

#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--ink);color:var(--paper);padding:10px 15px;border-radius:7px;font-size:12px;box-shadow:var(--shadow);transition:.2s;z-index:80}
#toast.show{transform:translate(-50%,0)}

@media(max-width:900px){
  .split,.query-meta,.alert-facts,.boundary-grid,.reference-grid{grid-template-columns:1fr}
  .outcome-strip{grid-template-columns:repeat(2,1fr)}
  .status-card{grid-column:auto}
}
@media(max-width:660px){
  .shell{width:calc(100% - 28px)}
  .brand small,nav{display:none}
  .hero{padding:40px 0 28px}
  .flow-step{grid-template-columns:36px 1fr;gap:14px}
  .step-num{width:32px;height:32px;font-size:13px}
  .step-body h2{font-size:21px}
  .sim-controls{flex-direction:column;align-items:stretch}
  .outcome-strip{grid-template-columns:1fr 1fr}
  .footer-row{display:block}
  .footer-row p{text-align:left;margin-top:12px}
  .code-block pre{font-size:10.5px}
}

/* ---- v0.9.2: platform context, implementation kits, query preflight ---- */
.platform-context{position:sticky;top:82px;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 18px;padding:14px 16px;border:1px solid var(--blue);border-radius:12px;background:color-mix(in srgb,var(--white) 94%,var(--blue2));box-shadow:0 8px 24px rgba(25,48,78,.1)}
.platform-context-copy{display:grid;gap:1px;min-width:220px}
.platform-context-copy>span{font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--blue)}
.platform-context-copy strong{font-size:14px;color:var(--ink)}
.platform-context-copy small{font-size:10.5px;line-height:1.35;color:var(--muted)}
.platform-context .platform-switch{margin:0;justify-content:flex-end}
.platform-context .plat-btn[hidden]{display:none!important}
.platform-context .plat-btn{padding:8px 12px;font-size:11.5px;background:var(--paper)}
.platform-context .plat-btn small{font-size:9.5px}
.section-platform-note{display:inline-flex;align-items:center;gap:5px;margin:0 0 10px;padding:7px 10px;border-radius:7px;background:var(--blue2);color:var(--ink2);font-size:11.5px}
.section-platform-note strong{color:var(--blue)}

.landing-plan{padding:17px 18px}
.landing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.landing-head h4{margin:3px 0 0;font-size:14px;color:var(--ink)}
.platform-mini{font:700 9px var(--mono);white-space:nowrap;color:var(--blue);background:var(--blue2);border:1px solid color-mix(in srgb,var(--blue) 35%,var(--line));border-radius:12px;padding:4px 8px}
.landing-plan>p{margin:0 0 11px}
.landing-plan ol,.ing ol{margin:0;padding-left:21px;color:var(--ink2);font-size:12.5px;line-height:1.58}
.landing-plan li+li,.ing li+li{margin-top:6px}
.official-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px;padding-top:11px;border-top:1px solid var(--line)}
.official-links>span{font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.official-links a{font-size:11px;font-weight:700;color:var(--blue);text-decoration:none}
.official-links a:hover{text-decoration:underline}
.ing ol{margin-top:10px}
.ing .official-links{margin-top:10px}

.query-preflight{margin:0 0 14px;border:1px solid var(--line);border-radius:11px;background:var(--white);overflow:hidden}
.preflight-head{display:flex;align-items:center;gap:12px;padding:14px 16px}
.preflight-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;border-radius:50%;font:800 14px var(--mono)}
.preflight-icon.pass{background:var(--green2);color:var(--green);border:1px solid var(--green)}
.preflight-icon.attention{background:var(--amber2);color:var(--amber);border:1px solid var(--amber)}
.preflight-head h3{margin:0 0 2px;font-size:13.5px}
.preflight-head p{margin:0;font-size:11.5px;color:var(--muted)}
.tenant-required{margin-left:auto;white-space:nowrap;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--amber);background:var(--amber2);border:1px solid var(--amber);border-radius:12px;padding:5px 8px}
.query-preflight details{border-top:1px solid var(--soft)}
.query-preflight summary{cursor:pointer;padding:10px 16px;font-size:11.5px;font-weight:700;color:var(--blue)}
.preflight-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;padding:4px 16px 14px}
.preflight-checks{display:grid;gap:7px}
.preflight-check{display:flex;gap:9px;padding:9px 10px;border:1px solid var(--soft);border-radius:8px;background:var(--paper)}
.preflight-check>span{font:800 11px var(--mono);color:var(--green)}
.preflight-check.error>span{color:var(--amber)}
.preflight-check strong{display:block;font-size:11.5px}
.preflight-check p{margin:1px 0 0;font-size:10.5px;color:var(--muted);line-height:1.45}
.tenant-check{padding:13px 14px;border:1px solid var(--amber);border-radius:9px;background:var(--amber2)}
.tenant-check .k{font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--amber)}
.tenant-check p{margin:7px 0 12px;font-size:11.5px;color:var(--ink2);line-height:1.55}
.tenant-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tenant-actions a{display:inline-flex;align-items:center;min-height:24px;font-size:11px;font-weight:700;color:var(--blue);text-decoration:none}
.tenant-actions a:hover{text-decoration:underline}
.preflight-disclaimer{margin:0;padding:0 16px 14px;font-size:10.5px;color:var(--muted);font-style:italic}
.info-page{margin-bottom:34px}
.info-reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.info-reference-grid a{display:block;min-height:104px;padding:17px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);text-decoration:none}
.info-reference-grid a:hover{border-color:var(--teal);background:var(--teal2)}
.info-reference-grid strong,.info-reference-grid span{display:block}
.info-reference-grid strong{font-size:13px;color:var(--ink)}
.info-reference-grid span{margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--muted)}

@media(max-width:900px){
  .platform-context{position:static;align-items:flex-start;flex-direction:column}
  .platform-context .platform-switch{justify-content:flex-start}
  .preflight-grid{grid-template-columns:1fr}
  .info-reference-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:660px){
  .platform-context .platform-switch{display:grid;grid-template-columns:1fr;width:100%}
  .platform-context .plat-btn{width:100%}
  .preflight-head{align-items:flex-start;flex-wrap:wrap}
  .tenant-required{margin-left:40px}
  .info-reference-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---- v0.7 additions ------------------------------------------------ */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 16px;max-width:760px}
.hero-stats div{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.hero-stats strong{display:block;font:750 26px var(--mono);color:var(--teal);line-height:1}
.hero-stats span{display:block;font-size:11.5px;color:var(--muted);margin-top:5px}
.hero-stats span small{display:block;font:600 10px var(--mono);color:var(--teal);margin-top:2px}

/* pack provenance -- validation status and content hash */
.pack-provenance{margin-top:18px;padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:12px}
.pack-provenance h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 12px}
.provenance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.provenance-grid>div{min-width:0}
.provenance-grid span{display:block;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.provenance-grid strong{display:block;font-size:14px;color:var(--ink);margin-top:4px;word-break:break-word}
.provenance-grid small{display:block;font-size:11px;color:var(--muted);margin-top:5px;line-height:1.5}
.provenance-status.neutral{color:var(--ink2)}
.provenance-status.positive{color:var(--teal)}
.provenance-none{color:var(--ink2)}
.provenance-hash{font-size:12px!important;letter-spacing:.02em}
.summary-actions-note{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.6;max-width:74ch}
.flow-heading-note{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.55;max-width:70ch}

.control-meta{font:600 11.5px var(--mono);color:var(--muted);margin:-4px 0 14px;letter-spacing:.02em}
.section-sub{color:var(--muted);font-size:13.5px;max-width:820px;margin:12px 0 0}
.sub-head{font-size:13px;font-weight:750;color:var(--ink2);margin:26px 0 12px;letter-spacing:-.01em}

/* evidence contracts */
.contract-card{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:18px 20px;margin-bottom:12px}
.cc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.cc-file{font:700 10.5px var(--mono);color:var(--teal);letter-spacing:.03em}
.cc-head h4{margin:3px 0 0;font-size:16px;letter-spacing:-.02em}
.cc-actions{display:flex;gap:7px;flex-wrap:wrap}
.btn-sm{background:var(--teal);color:#fff;border:1px solid transparent;border-radius:7px;padding:7px 12px;font-size:11.5px;font-weight:700;cursor:pointer}
[data-theme="dark"] .btn-sm{color:#06201e}
.btn-sm.ghost{background:transparent;color:var(--teal);border-color:var(--line)}
.btn-sm.ghost:hover{border-color:var(--teal)}
.cc-purpose{font-size:13px;color:var(--ink2);margin:0 0 14px;line-height:1.6}
.cc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:14px;border-bottom:1px solid var(--soft)}
.cc-facts .k,.cc-min .k{display:block;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cc-facts .v{display:block;font-size:12.5px;color:var(--ink2);margin-top:3px}
.cc-min{padding-top:13px}
.min-fields{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0 8px}
.min-fields code{background:var(--teal2);color:var(--teal);border:1px solid var(--teal);border-radius:5px;padding:3px 8px;font:600 11px var(--mono)}
.cc-min p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
.ingest-note{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:-4px 0 16px}
.ingest-note .k{display:block;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--teal);margin-bottom:6px}
.ingest-note p{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.65}
.no-inputs{background:var(--white);border:1px dashed var(--line);border-radius:11px;padding:20px;font-size:13px;color:var(--ink2);line-height:1.6}
.contract-index{display:grid;gap:12px}

/* schema table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:9px}
.schema-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--white)}
.schema-table thead th{text-align:left;font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 12px;background:var(--soft);border-bottom:1px solid var(--line);white-space:nowrap}
.schema-table tbody td{padding:10px 12px;border-bottom:1px solid var(--soft);vertical-align:top;color:var(--ink2)}
.schema-table tbody tr:last-child td{border-bottom:none}
.schema-table .mono{font:600 12px var(--mono);color:var(--ink)}
.req{font:700 9px var(--mono);padding:3px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.req.required{background:var(--red2);color:var(--red)}
.req.recommended{background:var(--amber2);color:var(--amber)}
.req.optional{background:var(--soft);color:var(--muted)}
.ct-min{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:20px}
.ct-h{font-size:13px;margin:22px 0 10px;color:var(--ink)}
.ing-grid{display:grid;gap:10px}
.ing{background:var(--white);border:1px solid var(--line);border-radius:9px;padding:13px 15px}
.ing .k{display:block;font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--teal);margin-bottom:5px}
.ing p{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.6}
.ct-privacy{font-size:12.5px;color:var(--muted);line-height:1.65;background:var(--amber2);border:1px solid var(--amber);border-radius:9px;padding:13px 15px;margin:0}
.ct-actions{margin-top:20px}
#contractContent{padding:22px 26px 30px}

/* console preview */
.console{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--white)}
.console-bar{display:flex;align-items:center;gap:9px;padding:11px 16px;font:700 11.5px var(--mono);letter-spacing:.02em;border-bottom:1px solid var(--line)}
.console.sentinel .console-bar{background:#0b2a4a;color:#cfe3f5}
.console.securityhub .console-bar{background:#232f3e;color:#f0d8b8}
.console.splunk .console-bar{background:#1b2a20;color:#c9e6cf}
.console-bar .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.8}
.console-body{padding:6px 0}
.con-row{display:grid;grid-template-columns:210px 1fr;gap:14px;padding:8px 16px;border-bottom:1px solid var(--soft)}
.con-row:last-child{border-bottom:none}
.cl{font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-top:2px}
.cv{font-size:12.5px;color:var(--ink2)}
.cv.strong{font-weight:700;color:var(--ink)}
.cv.mono,.con-row .mono{font-family:var(--mono);font-size:11.5px}
.pill{display:inline-block;font:700 9.5px var(--mono);padding:3px 8px;border-radius:5px;letter-spacing:.04em}
.pill.new{background:var(--blue2);color:var(--blue)}
.pill.sev-critical{background:var(--red2);color:var(--red)}
.pill.sev-high{background:var(--amber2);color:var(--amber)}
.pill.sev-medium{background:var(--blue2);color:var(--blue)}
.pill.sev-low{background:var(--soft);color:var(--muted)}
.console-note{font-size:11.5px;color:var(--muted);font-style:italic;margin:10px 0 0;line-height:1.6}

.noscript-notice{background:var(--amber2);border:1px solid var(--amber);border-radius:10px;padding:18px;margin:24px auto;max-width:1080px;font-size:13px;color:var(--ink2)}

@media(max-width:900px){
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .cc-facts{grid-template-columns:1fr}
  .con-row{grid-template-columns:1fr;gap:3px}
}
@media(max-width:660px){
  .hero-stats{grid-template-columns:1fr 1fr}
  .cc-head{flex-direction:column}
}
@media print{
  .site-header,.project-banner,.theme-toggle,.sim-controls,.code-actions,.cc-actions{display:none!important}
  body{background:#fff;color:#000}
  .flow-step{page-break-inside:avoid}
}

/* ---- v0.8: library, generator, feedback, usage ---------------------- */
.pack-library{display:grid;gap:26px}
.library-scope{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.library-scope .k{display:block;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.library-scope strong{display:block;margin-top:3px;font-size:12.5px}
.library-scope p{margin:3px 0 0;font-size:11px;color:var(--muted)}
.library-scope-toggle{flex:0 0 auto;white-space:nowrap}
.lib-group{}
.lib-ws{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:var(--teal);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.lib-ws span{font:600 10px var(--mono);color:var(--muted);text-transform:none;letter-spacing:0;background:var(--soft);padding:3px 8px;border-radius:10px}
.lib-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.lib-card{text-align:left;background:var(--white);border:1px solid var(--line);border-radius:11px;padding:16px 18px;cursor:pointer;font-family:inherit;color:inherit;transition:border-color .15s,transform .15s}
.lib-card:hover{border-color:var(--teal);transform:translateY(-2px)}
.lib-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.lib-id{font:700 11.5px var(--mono);color:var(--teal)}
.lib-sev{font:700 9px var(--mono);padding:3px 7px;border-radius:4px;letter-spacing:.04em}
.lib-sev.sev-critical{background:var(--red2);color:var(--red)}
.lib-sev.sev-high{background:var(--amber2);color:var(--amber)}
.lib-sev.sev-medium{background:var(--blue2);color:var(--blue)}
.lib-card h4{margin:0 0 5px;font-size:14.5px;letter-spacing:-.015em;line-height:1.3}
.lib-fam{margin:0 0 12px;font-size:11.5px;color:var(--muted)}
.lib-facts{display:flex;gap:6px;flex-wrap:wrap;padding-top:11px;border-top:1px solid var(--soft)}
.lib-facts span{font:600 9.5px var(--mono);color:var(--muted);background:var(--soft);padding:3px 7px;border-radius:4px}

/* generator */
.generator{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:18px 20px;margin-bottom:14px}
.gen-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.gen-head h3{margin:0 0 4px;font-size:15px;letter-spacing:-.015em}
.gen-head p{margin:0;font-size:12.5px;color:var(--muted);max-width:560px;line-height:1.55}
.privacy-chip{font:700 9.5px var(--mono);background:var(--teal2);color:var(--teal);border:1px solid var(--teal);padding:5px 10px;border-radius:20px;white-space:nowrap}
.gen-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:16px}
.gf.wide{grid-column:1/-1}
.gf label{display:block;font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.gf input[type=number],.gf textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 11px;font:13px var(--sans);color:var(--ink);background:var(--paper)}
.gf textarea{font-family:var(--mono);font-size:12px;resize:vertical;min-height:88px}
.gf input:focus,.gf textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.gf-help{margin:6px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.gf-count{margin:6px 0 0;font:600 11px var(--mono)}
.gf-count.ok{color:var(--teal)}
.gf-count.warn{color:var(--amber)}
.gen-none{margin:0;font-size:12.5px;color:var(--muted)}
.gen-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--soft)}
.button.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.button.ghost:hover{border-color:var(--teal);color:var(--teal)}
.button:disabled{opacity:.45;cursor:not-allowed}
.gen-status{font:600 11.5px var(--mono);color:var(--muted)}
.gen-status.ok{color:var(--teal)}

/* feedback */
.feedback-panel{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:0 11px 11px 0;padding:20px 22px;margin-top:14px}
.feedback-panel h3{margin:0 0 7px;font-size:15px;letter-spacing:-.015em}
.feedback-panel p{margin:0 0 15px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:700px}
.feedback-actions{display:flex;gap:8px;flex-wrap:wrap}
.fb-btn{display:inline-block;text-decoration:none;background:var(--soft);border:1px solid var(--line);color:var(--ink2);padding:9px 14px;border-radius:8px;font-size:12.5px;font-weight:650}
.fb-btn:hover{border-color:var(--teal);color:var(--teal)}

/* usage page */
.usage-h{font-size:20px;letter-spacing:-.02em;margin:38px 0 6px}
.usage-sub{color:var(--muted);font-size:13px;margin:0 0 16px;max-width:760px;line-height:1.6}
.usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}
.ucard{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.ucard .k{font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ucard .v{font:750 27px var(--mono);margin:7px 0 4px;color:var(--ink)}
.ucard .n{font-size:11px;color:var(--muted);line-height:1.45}
.ucard.local{border-left:3px solid var(--amber)}
.ucard.local .v{color:var(--muted)}
.ucard.muted .v{color:var(--muted)}

/* ------------------------------------------------------- signals dashboard
 * Magnitude by control area is one measure, so it is one sequential hue with
 * no legend. The track behind each bar carries the scale, so no gridlines and
 * no second axis are needed. */
/* Sample-data marking. Loud on purpose: the realistic hazard is not somebody
 * being fooled on the page, it is a screenshot being reused later without its
 * context, so the marking survives cropping. */
/* The hidden attribute must win. The UA rule [hidden]{display:none} has the
 * same specificity as .sample-banner, so a bare display:flex here beats it by
 * source order and the banner shows on the live page. */
.sample-banner[hidden]{display:none}
.sample-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 22px;background:#fdf3e0;border-bottom:2px solid var(--amber);color:#6d4a0d}
.sample-banner strong{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:20px;background:var(--amber);color:#fff;white-space:nowrap}
.sample-banner span{font-size:11.5px;line-height:1.55;flex:1 1 320px}
.sample-banner a{display:inline-flex;align-items:center;min-height:24px;font:700 11px var(--sans);color:#6d4a0d}
[data-theme="dark"] .sample-banner{background:#2b2210;color:#e6c886;border-bottom-color:#7a5f22}
[data-theme="dark"] .sample-banner a{color:#e6c886}
.sample-chip{font:700 8px var(--mono);text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:20px;background:#fdf3e0;color:#8a5a0b;border:1px dashed var(--amber)}
[data-theme="dark"] .sample-chip{background:#2b2210;color:#e6c886}
.fresh-dot.sample{background:var(--amber)}
body.is-sample .area-chart,body.is-sample .kpi{border-style:dashed}

/* Confirmed exploited in the wild -- the strongest evidence on this page. */
.exploited{font:700 8px var(--mono);text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:20px;background:#fdecea;color:#a3341f;border:1px solid #e8b4aa}
[data-theme="dark"] .exploited{background:#3a1e19;color:#e8a396;border-color:#7a3a2c}

/* Stat tile with a direction indicator against the preceding period. */
.kpi-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.kpi-delta{display:inline-flex;align-items:baseline;gap:4px;font:700 10px var(--mono)}
.kpi-delta i{margin-left:5px;font:500 9px var(--mono);font-style:normal;color:var(--muted)}
.kpi-delta.up{color:var(--amber)}
.kpi-delta.down{color:var(--teal)}
.kpi-delta.flat{color:var(--muted);font-weight:500}

.signals-hero{padding-bottom:8px}
.freshness{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:11.5px;color:var(--muted)}
.freshness strong{color:var(--ink2);font-weight:700}
.fresh-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.fresh-dot.ok{background:var(--teal)}
.fresh-dot.warn{background:var(--amber)}
.fresh-dot.stale{background:var(--muted)}

.signals-range{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.range-btn{background:var(--white);border:1px solid var(--line);color:var(--ink2);
  padding:7px 14px;min-height:32px;border-radius:20px;cursor:pointer;font:650 11.5px var(--sans)}
.range-btn:hover{border-color:var(--muted)}
.range-btn.active{background:var(--teal2);border-color:var(--teal);color:var(--teal)}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px;margin-bottom:18px}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:15px 17px}
.kpi strong{display:block;font:750 30px var(--mono);color:var(--ink);line-height:1.05}
.kpi span{display:block;font-size:11.5px;color:var(--ink2);margin-top:6px;line-height:1.4}
.kpi small{display:block;font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.kpi.accent{border-color:color-mix(in srgb,var(--teal) 40%,var(--line))}
.kpi.accent strong{color:var(--teal);font-size:24px}

.area-chart{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:17px 19px}
.chart-head h3{margin:0 0 3px;font-size:14px;color:var(--ink)}
.chart-head p{margin:0 0 13px;font-size:11.5px;line-height:1.55;color:var(--muted);max-width:72ch}
.area-chart-svg{display:block;width:100%;max-width:760px;height:auto;overflow:visible}
.bar-track{fill:var(--paper)}
.bar-fill{fill:var(--teal)}
.bar-row:hover .bar-fill,.bar-row:focus-visible .bar-fill{fill:color-mix(in srgb,var(--teal) 82%,#000)}
.bar-row:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.bar-label{fill:var(--ink2);font:700 11.5px var(--mono)}
.bar-value{fill:var(--ink);font:750 12px var(--mono)}
.chart-legend-note{margin-top:11px;font-size:10.5px;color:var(--muted);font-style:italic}
.chart-empty{display:grid;gap:5px;padding:22px 4px;text-align:center}
.chart-empty strong{font-size:13px;color:var(--ink)}
.chart-empty span{font-size:11.5px;color:var(--muted);line-height:1.55;max-width:60ch;margin:0 auto}
.chart-empty .preview-link{justify-self:center;margin-top:11px;min-height:32px;display:inline-flex;align-items:center}
.chart-empty small{font-size:10.5px;color:var(--muted);margin-top:7px}

.area-packs{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.area-pack{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:5px 11px;border-radius:8px;
  background:var(--paper);border:1px solid var(--line);text-decoration:none}
.area-pack:hover{border-color:var(--teal);background:var(--teal2)}
.area-pack b{font:700 11px var(--mono);color:var(--teal)}
.area-pack span{font-size:11px;color:var(--ink2)}
.area-pack em{font:750 11px var(--mono);font-style:normal;color:var(--muted)}

.recent-list{display:grid;gap:9px}
.recent-item{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:13px 15px;display:grid;gap:6px}
.recent-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.src{font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:20px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink2)}
.src-cisa-kev,.src-cisa-advisories{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 30%,var(--line))}
.src-sec-8k-cyber{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 30%,var(--line))}
.recent-meta time{font:10.5px var(--mono);color:var(--muted)}
.recent-title{display:inline-flex;align-items:center;min-height:24px;font-size:12.5px;line-height:1.5;color:var(--ink);text-decoration:none;font-weight:600}
.recent-title:hover{color:var(--teal);text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:20px;
  font:700 9.5px var(--mono);text-decoration:none;border:1px solid transparent}
.chip-strong{background:var(--teal2);color:var(--teal)}
.chip-moderate{background:#fdf3e0;color:#8a5a0b}
.chip-weak{background:var(--paper);color:var(--ink2);border-color:var(--line)}
.chip-none{background:transparent;color:var(--muted);border-color:var(--line);border-style:dashed}
a.chip:hover{border-color:var(--teal)}

.feed-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.feed-item{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:13px 15px;display:grid;gap:5px}
.feed-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feed-top a{display:inline-flex;align-items:center;min-height:24px;font-size:12px;font-weight:650;color:var(--teal);text-decoration:none}
.feed-top a:hover{text-decoration:underline}
.feed-item p{margin:0;font-size:11.5px;line-height:1.55;color:var(--ink2)}
.feed-item small{font-size:10.5px;color:var(--muted);line-height:1.5}
.signals-licence{margin-top:14px;font-size:11px;line-height:1.65;color:var(--muted);max-width:80ch}
.signals-note{font-size:11.5px;color:var(--muted)}

@media(max-width:640px){
  .kpi strong{font-size:26px}
  .area-chart{padding:14px 13px}
}

/* A section with nothing in it is stated in one line rather than shown as a
 * grid of zeros, which would make a working project look dead. */
.quiet-notice{margin:18px 0 0;padding:13px 15px;border:1px dashed var(--line);border-radius:9px;
  font-size:11.5px;line-height:1.6;color:var(--muted);background:var(--paper)}
.usage-range{margin:0 0 12px;font-size:11.5px;color:var(--muted)}

/* engagement ladder -- depth, reported separately from volume */
.engagement-ladder{display:grid;gap:9px}
.rung{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.rung-step{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:var(--teal2);color:var(--teal);font:750 12px var(--mono)}
.rung-body h3{margin:0 0 3px;font-size:13.5px;color:var(--ink)}
.rung-meaning{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink2)}
.rung-caveat{margin:3px 0 0;font-size:10.5px;line-height:1.5;color:var(--muted);font-style:italic}
.rung-figures{display:flex;gap:18px;text-align:right}
.rung-figures strong{display:block;font:750 20px var(--mono);color:var(--ink);line-height:1.1}
.rung-figures span{display:block;font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:3px}
/* Deeper rungs read as more significant; an empty rung is dimmed, not hidden,
 * because "nobody has done this yet" is itself worth stating. */
.rung-0 .rung-step{background:var(--paper);color:var(--muted)}
.rung-2{border-color:color-mix(in srgb,var(--teal) 35%,var(--line))}
.rung-2 .rung-figures strong{color:var(--teal)}
.rung-empty .rung-figures strong{color:var(--muted)}
.ladder-foot{margin:4px 0 0;font-size:11px;line-height:1.55;color:var(--muted)}
.ladder-foot a{display:inline-flex;align-items:center;min-height:24px;color:var(--teal)}

.pack-depth{margin-top:12px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:15px 18px}
.pack-depth h3{margin:0 0 3px;font-size:13px;color:var(--ink)}
.pack-depth p{margin:0 0 9px;font-size:11px;color:var(--muted);line-height:1.5}
.pack-depth ol{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.pack-depth li{display:flex;align-items:baseline;gap:8px;font-size:11.5px}
.pack-depth li span{font:700 11.5px var(--mono);color:var(--ink);min-width:88px}
.pack-depth li b{font:750 14px var(--mono);color:var(--teal)}
.pack-depth li small{color:var(--muted);font-size:10.5px}

@media(max-width:640px){
  .rung{grid-template-columns:26px 1fr;gap:10px}
  .rung-figures{grid-column:1 / -1;justify-content:flex-start;text-align:left;gap:22px;
    padding-top:8px;border-top:1px solid var(--line)}
}
.scope-warn,.scope-ok{border-radius:11px;padding:20px 22px;margin-bottom:26px}
.scope-warn{background:var(--amber2);border:1px solid var(--amber)}
.scope-ok{background:var(--teal2);border:1px solid var(--teal)}
.scope-warn h3,.scope-ok h3{margin:0 0 8px;font-size:15px}
.scope-warn p,.scope-ok p{margin:0 0 8px;font-size:12.5px;color:var(--ink2);line-height:1.65;max-width:780px}
.scope-warn p:last-child,.scope-ok p:last-child{margin-bottom:0}
.repro-grid,.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:11px}
.repro,.method{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:17px 19px}
.repro h3,.method h3{margin:0 0 8px;font-size:13.5px;letter-spacing:-.01em}
.repro p,.method p{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.6}
.repro code{display:inline-block;margin-top:10px;background:var(--code-bg);color:var(--code-fg);padding:6px 10px;border-radius:6px;font:11px var(--mono)}
.engagement-note{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:20px 22px}
.engagement-note p{margin:0 0 12px;font-size:12.5px;color:var(--ink2);line-height:1.65;max-width:780px}
.local-tools{margin-top:34px}
.local-tools-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:16px 20px}
.local-tools-inner h3{margin:0 0 5px;font-size:13.5px}
.local-tools-inner p{margin:0;font-size:12px;color:var(--muted);line-height:1.55;max-width:600px}
nav a[aria-current="page"]{color:var(--teal)}
@media(max-width:660px){.gen-fields{grid-template-columns:1fr}.lib-cards{grid-template-columns:1fr}}

/* ---- v0.9: inline evidence, nav pill, quick vote --------------------- */
.nav-pill{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--teal);color:#fff;
  padding:9px 15px;border-radius:20px;font-size:12.5px;font-weight:700;white-space:nowrap;border:1px solid var(--teal)}
[data-theme="dark"] .nav-pill{color:#06201e}
.nav-pill:hover{filter:brightness(1.08)}
.nav-pill-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85;flex:0 0 auto}
.utility-nav{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.utility-nav a{color:var(--ink2);text-decoration:none;font-size:11.5px;font-weight:700;padding:6px 9px;border-radius:7px}
.utility-nav a:hover{background:var(--soft);color:var(--teal)}

.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.mode-btn{text-align:left;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;font-family:inherit;color:inherit}
.mode-btn strong{display:block;font-size:14px;letter-spacing:-.01em;margin-bottom:3px}
.mode-btn small{display:block;font-size:11.5px;color:var(--muted);line-height:1.45}
.mode-btn.active{background:var(--teal2);border-color:var(--teal)}
.mode-btn.active strong{color:var(--teal)}
.mode-btn.active small{color:var(--ink2)}

.inline-block{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:18px 20px;margin-bottom:12px}
.ib-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ib-head p{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55;max-width:600px}
.ib-example,.ib-editor{margin-bottom:14px}
.ib-example .k,.ib-editor .k{display:block;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:7px}
.ib-table{width:100%;border-collapse:collapse;font-size:12.5px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ib-table thead th{text-align:left;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 10px;background:var(--soft);border-bottom:1px solid var(--line);white-space:nowrap}
.ib-table thead th .rq{color:var(--red)}
.ib-table thead th .op{color:var(--muted);opacity:.7}
.ib-table.example tbody td{padding:8px 10px;color:var(--muted);font-family:var(--mono);font-size:11.5px;background:var(--paper)}
.ib-table.editable tbody td{padding:0;border-bottom:1px solid var(--soft)}
.ib-table.editable tbody tr:last-child td{border-bottom:none}
.ib-table.editable input{width:100%;border:0;background:transparent;padding:9px 10px;font:12px var(--mono);color:var(--ink)}
.ib-table.editable input:focus{outline:2px solid var(--teal);outline-offset:-2px;background:var(--paper)}
.ib-table.editable input.bad{background:var(--red2);color:var(--red)}
/* Minimum 24px in both directions -- the delete control was 30x19 and sat
 * between two text inputs, which is the worst place to under-size a target. */
.row-del{width:32px;min-height:32px;border:0;background:transparent;color:var(--muted);font-size:17px;cursor:pointer;line-height:1}
.row-del:hover{color:var(--red)}
.ib-actions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.ib-status{font:600 11px var(--mono);color:var(--muted)}
.ib-status.ok{color:var(--teal)}
.ib-status.warn{color:var(--amber)}
.ib-defaults,.ib-cap{margin:0;font-size:12px;color:var(--muted);line-height:1.6}
.ib-defaults{padding-top:13px;border-top:1px solid var(--soft);margin-bottom:6px}
.ib-cap{font-style:italic;opacity:.85}
.gen-status.warn{color:var(--amber)}
.query-highlight-key{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:600 10.5px var(--mono);color:var(--muted)}
.query-highlight-key i{display:inline-block;width:11px;height:11px;border-radius:3px;background:#ffe58f;border:1px solid #c49a16}
.code-block mark.query-change{background:#ffe58f;color:#352900;border-radius:3px;padding:1px 2px;box-shadow:0 0 0 1px rgba(196,154,22,.28)}
[data-theme="dark"] .code-block mark.query-change{background:#ffd75e;color:#211900}

.quick-vote{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.qv-q{margin:0 0 10px;font-size:13px;font-weight:700}
.qv-btns{display:flex;gap:8px;flex-wrap:wrap}
.qv-btn{background:var(--white);border:1px solid var(--line);color:var(--ink2);padding:9px 14px;border-radius:8px;font-size:12.5px;font-weight:650;cursor:pointer;font-family:inherit}
.qv-btn:hover{border-color:var(--teal);color:var(--teal)}
.qv-btn.chosen{background:var(--teal2);border-color:var(--teal);color:var(--teal)}
.qv-extra{margin-top:14px;display:grid;gap:6px}
.qv-extra label{font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.qv-extra textarea,.qv-extra input{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 11px;font:12.5px var(--sans);color:var(--ink);background:var(--white)}
.qv-extra textarea{resize:vertical;font-family:var(--mono);font-size:12px}
.qv-submit{display:flex;gap:8px;margin-top:6px}
.qv-status{margin:10px 0 0;font-size:12px;color:var(--muted)}
.qv-status.ok{color:var(--teal)}
.qv-status.warn{color:var(--amber)}
.qv-summary{margin-top:10px;display:grid;gap:4px}
.qv-agg{font:600 11.5px var(--mono);color:var(--ink2)}
.qv-caveat{font-size:11px;color:var(--muted);font-style:italic;line-height:1.5}
.fb-lead{margin:0 0 12px!important;font-size:12.5px;color:var(--muted);line-height:1.6}
@media(max-width:760px){.mode-switch{grid-template-columns:1fr}.ib-table{font-size:11.5px}}

/* inline tables scroll horizontally rather than pushing the page wide */
.ib-example,.ib-editor{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ib-table{min-width:520px}
@media(max-width:760px){
  .ib-table{min-width:440px}
  .ib-table thead th{white-space:normal}
}
@media(max-width:760px){
  .nav-pill-long{display:none}
  .nav-pill{padding:8px 12px;font-size:12px}
}

/* ---- v0.9.1: shorter navigation and clearer page zones --------------- */
.section-zone{margin-top:18px;margin-bottom:34px;padding:46px 34px 54px;border:1px solid var(--line);border-radius:18px}
.zone-library{background:color-mix(in srgb,var(--teal2) 48%,var(--paper))}
.zone-walkthrough{background:color-mix(in srgb,var(--blue2) 35%,var(--paper))}
.zone-boundaries{background:color-mix(in srgb,var(--amber2) 40%,var(--paper))}
.zone-walkthrough .flow-step{padding:22px 22px 12px 12px;border:1px solid var(--line);border-radius:14px;background:var(--white);margin-bottom:16px}
.zone-walkthrough .evidence-step{background:color-mix(in srgb,var(--teal2) 24%,var(--white));border-color:color-mix(in srgb,var(--teal) 32%,var(--line))}
.zone-walkthrough .query-step{background:color-mix(in srgb,var(--blue2) 34%,var(--white));border-color:color-mix(in srgb,var(--blue) 24%,var(--line))}
.zone-walkthrough .requirement-step{background:color-mix(in srgb,var(--amber2) 24%,var(--white));border-color:color-mix(in srgb,var(--amber) 25%,var(--line))}
.zone-walkthrough .query-step .step-num{background:var(--blue)}.zone-walkthrough .evidence-step .step-num{background:var(--teal)}.zone-walkthrough .requirement-step .step-num{background:var(--amber)}

.category-switch{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.category-btn{text-align:left;min-height:96px;padding:15px 16px;border:1px solid var(--line);border-radius:11px;background:var(--white);color:var(--ink);cursor:pointer;font-family:inherit}
.category-btn strong{display:block;font-size:13.5px;line-height:1.35;margin-bottom:8px}
.category-btn span{font:600 10px var(--mono);color:var(--muted)}
.category-btn:hover,.category-btn.active{border-color:var(--teal);background:var(--teal2)}
.category-btn.active strong{color:var(--teal)}
.library-prompt{margin:16px 0 0;padding:16px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:13px;text-align:center;background:var(--paper)}
.lib-group{margin-top:24px}

.combined-template{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px 20px;margin-bottom:16px;border:1px solid var(--teal);border-radius:11px;background:var(--teal2)}
.combined-template .k{font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--teal)}
.combined-template h3{margin:3px 0 5px;font-size:15px}
.combined-template p{margin:0;color:var(--ink2);font-size:12.5px;line-height:1.55;max-width:680px}
.combined-template code{font-family:var(--mono);font-size:11px}
.combined-template .button{flex:0 0 auto}

.feedback-form{display:grid;gap:13px;padding-top:17px;border-top:1px solid var(--soft)}
.feedback-form-row{display:grid;gap:6px}
.feedback-form-row label{font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.feedback-form-row label span{font-weight:500;text-transform:none;letter-spacing:0}
.feedback-form-row select,.feedback-form-row textarea,.feedback-form-row input{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 11px;background:var(--paper);color:var(--ink);font:12.5px var(--sans)}
.feedback-form-row textarea{resize:vertical;min-height:96px}
.feedback-form-row select:focus,.feedback-form-row textarea:focus,.feedback-form-row input:focus{outline:2px solid var(--teal);outline-offset:1px}
.feedback-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.feedback-form-actions .qv-status{margin:0}

.methodology{margin-top:34px;border:1px solid var(--line);border-radius:11px;background:var(--white);padding:0 20px 20px}
.methodology summary{cursor:pointer;font-weight:700;padding:18px 0;color:var(--ink)}
.methodology .method-grid{padding-top:4px}
.references-hero{padding-bottom:34px}
.references-page{padding-top:56px;min-height:420px}
.boundary-page{margin-top:0}

.implementation-summary{background:color-mix(in srgb,var(--green2) 55%,var(--paper));margin-bottom:56px}
.snapshot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:18px}
.snapshot-card{min-height:142px;padding:17px 18px;border:1px solid var(--line);border-radius:11px;background:var(--white)}
.snapshot-card span{display:block;font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.snapshot-card strong{display:block;margin:10px 0 8px;font:750 30px var(--mono);color:var(--teal)}
.snapshot-card strong.snapshot-text{font:750 17px/1.3 var(--sans)}
.snapshot-card small{display:block;font-size:11.5px;line-height:1.5;color:var(--ink2)}
.snapshot-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.snapshot-flow article{display:flex;gap:12px;padding:17px 18px;border:1px solid var(--line);border-radius:11px;background:var(--white)}
.snapshot-step{display:grid;place-items:center;flex:0 0 auto;width:27px;height:27px;border-radius:50%;background:var(--teal2);border:1px solid var(--teal);color:var(--teal);font:700 11px var(--mono)}
.snapshot-flow h3{margin:1px 0 7px;font-size:13.5px}
.snapshot-flow ul{margin:0;padding-left:16px;color:var(--muted);font-size:11.5px;line-height:1.5}
.snapshot-flow p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.55}
.summary-actions{display:flex;justify-content:flex-end;margin-top:18px}

/* ---------------------------------------------------------------- page rail
 *
 * Lives in the gutter to the RIGHT of the content column and never overlaps it.
 * The previous rail was pinned with left:max(4px,...), so once the viewport
 * dropped below roughly 1624px the max() clamped it to 4px and it sat on top of
 * the hero. Here the gutter width decides everything:
 *
 *   gutter = (100vw - shell) / 2      shell = min(1600px, 100vw - 64px)
 *
 * The rail is centred in that gutter, so its clearance is symmetric and grows
 * with the window instead of being a fixed offset that eventually collides.
 *
 * Full rail (labels, 140px) from 1976px up -> gutter 188px, ~24px each side.
 * Compact rail (dots, 17px)  from 1740px up -> gutter  70px, ~26px each side.
 * Below 1740px it is not rendered at all; the steps are numbered in the content
 * itself, so nothing is lost.
 */
.page-rail{display:none}

@media(min-width:1740px){
  .page-rail{
    position:fixed;
    right:max(12px,calc(((100vw - 1600px)/2 - 140px)/2));
    top:50%;
    z-index:18;
    display:grid;
    gap:11px;
    width:140px;
    padding:10px 0;
    transform:translateY(-50%);
    max-height:calc(100vh - 120px);
  }
  .page-rail-title{margin:0 0 2px;font:700 8.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:.75}
  .page-rail-line{position:absolute;top:30px;bottom:14px;left:6px;width:1px;background:var(--line)}
  .rail-item{position:relative;display:flex;align-items:center;gap:9px;color:var(--muted);font:600 9.5px/1.25 var(--mono);text-decoration:none;min-height:16px}
  .rail-dot{width:13px;height:13px;flex:0 0 auto;border:2px solid var(--line);border-radius:50%;background:var(--paper);z-index:1}
  .rail-label{min-width:0}
  .rail-item:hover,.rail-item:focus-visible{color:var(--teal)}
  .rail-item.active{color:var(--teal)}
  .rail-item.active .rail-dot{border-color:var(--teal);background:var(--teal);box-shadow:0 0 0 3px var(--teal2)}

  /* The five pack steps, nested under the implementation guide. */
  .rail-steps{display:grid;gap:9px;margin:1px 0 1px 13px;padding-left:11px;border-left:1px solid var(--line)}
  .rail-step{font-size:9px;opacity:.55;transition:opacity .18s ease}
  .rail-step .rail-dot{width:9px;height:9px;margin-left:2px}
  .rail-step .rail-label b{display:inline-block;min-width:9px;margin-right:3px;color:var(--teal);font-weight:700}
  /* Brought forward only while the implementation guide is the active section,
   * so the rail reads as four sections until the steps are what you are in. */
  .page-rail.in-flow .rail-step{opacity:1}
  .rail-step.active{opacity:1}

  .rail-popover{position:absolute;right:calc(100% + 12px);top:50%;z-index:30;display:grid;gap:6px;width:238px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--teal) 35%,var(--line));border-radius:10px;background:#0f1a2b;color:#fff;box-shadow:0 12px 28px rgba(20,35,61,.22);opacity:0;visibility:hidden;transform:translateY(-50%) translateX(5px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;pointer-events:none}
  .rail-popover strong{color:#fff;font:700 11px/1.35 var(--sans)}
  .rail-popover small{font:10.5px/1.5 var(--sans);color:#d9e4ef}
  .rail-popover em{font:700 9px var(--mono);font-style:normal;color:#9ce7e1}
  .rail-item:hover .rail-popover,.rail-item:focus-visible .rail-popover{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
  [data-theme="dark"] .rail-popover{background:#1a2638;border-color:color-mix(in srgb,var(--teal) 48%,var(--line));box-shadow:0 12px 28px rgba(0,0,0,.5)}
}

/* Compact band: the gutter holds the dots but not the labels, so the labels
 * move into the popover and the rail shrinks to its spine. */
@media(min-width:1740px) and (max-width:1975px){
  .page-rail{width:17px;right:max(12px,calc(((100vw - 1600px)/2 - 17px)/2));gap:13px}
  .page-rail-title{display:none}
  .page-rail-line{top:6px}
  .rail-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .rail-steps{margin-left:3px;padding-left:9px;gap:11px}
}

@media(prefers-reduced-motion:reduce){
  .rail-popover,.rail-step{transition:none}
}

@media(max-width:900px){
  .category-switch{grid-template-columns:1fr 1fr}
  .snapshot-grid,.snapshot-flow{grid-template-columns:1fr 1fr}
  .environment-layout{grid-template-columns:1fr}
  .profile-summary{grid-template-columns:1fr 1fr}
  .profile-summary-actions{align-items:flex-start;white-space:normal}
}
@media(max-width:660px){
  .library-scope{align-items:flex-start;flex-direction:column}
  .library-scope-toggle{width:100%}
  .section-zone{width:calc(100% - 20px);padding:34px 16px 40px;border-radius:14px}
  .category-switch{grid-template-columns:1fr}
  .category-btn{min-height:0}
  .zone-walkthrough .flow-step{padding:18px 12px 8px 6px}
  .combined-template{align-items:flex-start;flex-direction:column}
  .selected-pack{align-items:flex-start;flex-wrap:wrap}
  .selected-pack a{margin-left:0;width:100%}
  .nav-row{gap:8px}.nav-right{gap:6px}.brand>span:last-child{display:none}.brand-mark{width:36px;height:36px}
  .utility-nav{gap:2px;padding:3px}.utility-nav a{font-size:10px;padding:5px 6px}
  .snapshot-grid,.snapshot-flow{grid-template-columns:1fr}
  .technology-groups,.profile-summary{grid-template-columns:1fr}
  .query-highlight-key{width:100%;margin-left:0}
}

/* ---- v0.9.3: quieter platform context and progressive review ---------- */
.zone-walkthrough{display:grid;grid-template-columns:156px minmax(0,1fr);gap:18px;align-items:start}
.flow-main{min-width:0}
.platform-context{position:sticky;top:88px;z-index:5;display:block;margin:0;padding:12px;border-color:var(--line);background:color-mix(in srgb,var(--white) 90%,var(--blue2));box-shadow:none}
.platform-context-copy{min-width:0;gap:2px;padding:2px 3px 10px;border-bottom:1px solid var(--line)}
.platform-context-copy strong{font-size:12.5px;line-height:1.35}
.platform-context-copy small{font-size:9.5px;line-height:1.4}
.platform-context .platform-switch{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;width:100%;margin:10px 0 0;align-items:stretch;justify-content:stretch;justify-items:stretch}
.platform-context .plat-btn{display:block;width:100%;margin:0;padding:8px 9px;font-size:10.5px;text-align:left}
.platform-context .plat-btn small{font-size:8.8px}
.platform-applicability{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:9px;color:var(--muted)}
.platform-applicability-label{font:700 8px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:2px}
.platform-status{display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--white)}
.platform-status b{font-size:9px;color:var(--ink)}
.platform-status small{font-size:8px;color:var(--muted)}
.platform-status.ready{border-color:color-mix(in srgb,var(--teal) 42%,var(--line));background:var(--teal2)}
.platform-status.ready small{color:var(--teal)}
.platform-status.manual{border-color:color-mix(in srgb,var(--amber) 42%,var(--line));background:var(--amber2)}
.platform-status.manual small{color:var(--amber)}
.platform-applicability-empty{line-height:1.35}
.mobile-platform-picker{display:none}

.compact-details,.review-disclosure{border:1px solid var(--line);border-radius:11px;background:var(--white);overflow:hidden}
.compact-details{margin-top:12px}
.compact-details>summary{cursor:pointer;padding:13px 15px;font-size:12px;font-weight:700;color:var(--blue)}
.compact-details[open]>summary{border-bottom:1px solid var(--soft)}
.compact-details .code-block{margin:12px}
.review-disclosure{margin-top:10px}
.review-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:16px 18px;list-style:none}
.review-disclosure>summary::-webkit-details-marker{display:none}
.review-disclosure>summary>span:first-child{display:grid;gap:3px}
.review-disclosure>summary strong{font-size:13.5px;color:var(--ink)}
.review-disclosure>summary small{font-size:11px;color:var(--muted)}
.review-disclosure>summary::after{content:"+";order:3;font:700 18px var(--mono);color:var(--teal)}
.review-disclosure[open]>summary{border-bottom:1px solid var(--line);background:var(--paper)}
.review-disclosure[open]>summary::after{content:"−"}
.review-disclosure-body{padding:18px}
.summary-category,.category-label,.badge.category{display:inline-block;border:1px solid color-mix(in srgb,var(--teal) 45%,var(--line));border-radius:999px;background:var(--teal2);color:var(--teal);font:700 9px var(--mono);letter-spacing:.02em;padding:5px 8px}

.control-context,.snapshot-context{display:grid;grid-template-columns:.8fr 1.2fr 2fr;gap:10px;margin-bottom:16px}
.control-context>div,.snapshot-context>div{padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.control-context span,.snapshot-context span,.alert-implication span{display:block;margin-bottom:5px;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.control-context strong,.snapshot-context strong{font-size:12.5px;line-height:1.45;color:var(--ink)}
.control-context p,.snapshot-context p,.alert-implication p{margin:0;font-size:12px;line-height:1.55;color:var(--ink2)}
.control-context small,.snapshot-context small{display:block;margin-top:5px;font-size:10.5px;line-height:1.4;color:var(--muted)}
.context-implication,.snapshot-implication{border-left:3px solid var(--amber)!important;background:var(--amber2)!important}
.snapshot-context{margin-bottom:14px}
.outcome-strip:empty{display:none}
.preview-pending{line-height:1.65}
.context-row{background:color-mix(in srgb,var(--teal2) 36%,var(--white))}
.implication-row{background:var(--amber2)}
.alert-implication{margin-top:12px;padding:12px 14px;border-left:3px solid var(--amber);border-radius:0 8px 8px 0;background:var(--amber2)}

@media(max-width:1000px){
  .zone-walkthrough{display:block}
  .platform-context{display:none}
  .mobile-platform-picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,220px);align-items:center;gap:12px;margin:0 0 14px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
  .mobile-platform-picker span{font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
  .mobile-platform-picker select{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:var(--white);color:var(--ink);font:12px var(--sans)}
}
@media(max-width:760px){
  .control-context,.snapshot-context{grid-template-columns:1fr}
  .review-disclosure>summary{align-items:flex-start;padding:14px}
  .summary-category{display:none}
  .review-disclosure-body{padding:14px 10px}
  .con-row{grid-template-columns:1fr;gap:4px}
}
@media(max-width:520px){
  .mobile-platform-picker{grid-template-columns:1fr;gap:7px}
}
@media(max-width:660px){
  .section-head-with-toggle{grid-template-columns:1fr;row-gap:10px}.collapse-toggle{grid-column:1;grid-row:auto;justify-self:end}.environment-head{padding-right:0}
  .query-highlight-source-key{width:100%;margin-left:0}
}