/* Segmentation Atlas — flow analysis for ring-fence and microsegmentation policy */

/* Typefaces are served from this folder — the page makes no external requests.
   Inter is drawn for screen reading at small sizes; IBM Plex Mono keeps ports, tags and
   addresses in a fixed width so columns line up. Both are SIL Open Font License. */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/inter-var-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/plex-mono-400-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/plex-mono-500-latin.woff2") format("woff2");
}


:root{
  --paper:#eff3f2; --surface:#ffffff; --surface-2:#f6f9f8; --surface-3:#eaf0ef;
  --ink:#101a1d; --ink-2:#4f6167; --ink-3:#7b8e94;
  --rule:#d0dad8; --rule-2:#e3eae9;
  --accent:#0e6a63; --accent-2:#0b524d; --accent-soft:#dbeceA; --accent-ink:#0b4b46;
  --crit:#a4231b; --crit-soft:#f8e2df; --crit-line:#c0392e;
  --high:#a85c0b; --high-soft:#f9ebd9; --high-line:#c4741a;
  --watch:#76701a; --watch-soft:#f2f1d8; --watch-line:#8e8724;
  --ok:#2a6a47; --ok-soft:#dcece2; --ok-line:#357f56;
  --mute:#7b8e94; --mute-soft:#e8eeed;
  --shadow:0 1px 2px rgba(16,26,29,.06), 0 6px 18px -8px rgba(16,26,29,.14);
  --shadow-lift:0 2px 6px rgba(16,26,29,.09), 0 18px 40px -16px rgba(16,26,29,.28);
  --r:7px;
  --fs-display:clamp(28px,4.2vw,44px);
  --sans:"Inter","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --cond:"Inter","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0c1215; --surface:#131c20; --surface-2:#182327; --surface-3:#1e2b30;
    --ink:#e2ebe8; --ink-2:#95a7ac; --ink-3:#6f8188;
    --rule:#25333a; --rule-2:#1b262b;
    --accent:#4cbdb0; --accent-2:#6ad0c4; --accent-soft:#11312e; --accent-ink:#7fd8cd;
    --crit:#ef7267; --crit-soft:#381917; --crit-line:#e0594d;
    --high:#e09b46; --high-soft:#382613; --high-line:#d08b33;
    --watch:#cdc055; --watch-soft:#302d13; --watch-line:#bdb043;
    --ok:#5fc08a; --ok-soft:#123020; --ok-line:#4bab76;
    --mute:#6f8188; --mute-soft:#1b262b;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0c1215; --surface:#131c20; --surface-2:#182327; --surface-3:#1e2b30;
  --ink:#e2ebe8; --ink-2:#95a7ac; --ink-3:#6f8188;
  --rule:#25333a; --rule-2:#1b262b;
  --accent:#4cbdb0; --accent-2:#6ad0c4; --accent-soft:#11312e; --accent-ink:#7fd8cd;
  --crit:#ef7267; --crit-soft:#381917; --crit-line:#e0594d;
  --high:#e09b46; --high-soft:#382613; --high-line:#d08b33;
  --watch:#cdc055; --watch-soft:#302d13; --watch-line:#bdb043;
  --ok:#5fc08a; --ok-soft:#123020; --ok-line:#4bab76;
  --mute:#6f8188; --mute-soft:#1b262b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
/* a class that sets display must never out-rank the hidden attribute */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink); overflow-x:clip;
  font:400 16.5px/1.62 var(--sans);
  font-feature-settings:"kern" 1,"cv05" 1,"ss03" 1;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--cond); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.005em}
p{margin:0}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}

.shell{max-width:1240px; margin:0 auto; padding-inline:20px}
.stack{display:flex; flex-direction:column}

/* ---------- the export shelf ---------- */
.shelf{display:flex; flex-direction:column; gap:9px; padding:13px 15px; border:1px solid var(--rule);
  border-radius:var(--r); background:var(--surface-2)}
.shelf-rows{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px}
.shelf-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0}
.shelf-label{font:600 13px/1 var(--sans); color:var(--ink-3)}
.shelf-select{font:500 14px/1.2 var(--mono); color:var(--ink); background:var(--surface);
  border:1px solid var(--rule); border-radius:5px; padding:7px 9px; max-width:min(460px,60vw)}
.shelf-select:hover{border-color:var(--ink-3)}
.shelf-file{font:400 13.5px/1.2 var(--sans); color:var(--ink-2); max-width:min(340px,54vw)}
.shelf-file::file-selector-button{font:500 12.5px/1 var(--mono); color:var(--ink); background:var(--surface);
  border:1px solid var(--rule); border-radius:99px; padding:7px 12px; margin-right:9px; cursor:pointer}
.shelf-file::file-selector-button:hover{border-color:var(--accent); color:var(--accent-ink)}
.shelf-note{font:400 13.5px/1.4 var(--sans); color:var(--ink-3)}
.btn-quiet{color:var(--ink-3)}
.btn-quiet:hover{border-color:var(--crit-line); color:var(--crit)}
.shelf-progress{font:400 14px/1.5 var(--sans); color:var(--ink-2); margin:0}
.shelf-progress.is-bad{color:var(--crit)}
.flash{font-size:14.5px; line-height:1.5; padding:9px 12px; border-radius:5px; border:1px solid var(--rule)}
.flash.is-ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)}
.flash.is-bad{background:var(--crit-soft); color:var(--crit); border-color:var(--crit-line)}

/* ---------- welcome page ---------- */
.welcome{ display:flex; flex-direction:column; gap:13px}
.welcome h2{font-size:22.5px}
.welcome p{color:var(--ink-2); font-size:16px; line-height:1.6}
.welcome-cols{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.welcome-cols li{font:400 13.5px/1 var(--mono); background:var(--surface-2); border:1px solid var(--rule);
  border-radius:4px; padding:6px 9px; color:var(--ink-2)}
.welcome-foot{font-size:14.5px; color:var(--ink-3)}
.welcome code{font-family:var(--mono); font-size:.92em; color:var(--ink-2)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule); background:var(--surface); }
.masthead .shell{padding-block:22px 24px; display:flex; flex-direction:column; gap:18px}
.wordmark{font:600 14.5px/1 var(--sans); color:var(--ink-3); margin:0; letter-spacing:.01em}
.masthead h1{font-size:var(--fs-display); line-height:1.04; letter-spacing:-.02em; margin-bottom:-4px}
.masthead .lede{ color:var(--ink-2); font-size:17.5px}
.masthead-top{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.themer{display:flex; gap:2px; background:var(--surface-3); border-radius:99px; padding:3px; flex:none}
.themer button{font:500 12.5px/1 var(--sans); padding:6px 12px;
  border:0; border-radius:99px; background:transparent; color:var(--ink-3); cursor:pointer}
.themer button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

/* ---------- the three numbers that matter ---------- */
.headline-nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(218px,1fr)); gap:12px}
.bignum{display:flex; flex-direction:column; gap:2px; padding:15px 17px 16px;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--surface-2)}
.bignum b{font:600 42px/1.05 var(--cond); letter-spacing:-.028em; font-variant-numeric:tabular-nums}
.bignum span{font:600 16px/1.3 var(--sans); color:var(--ink)}
.bignum i{font:400 13.5px/1.45 var(--sans); font-style:normal; color:var(--ink-3); margin-top:3px}
.bignum.is-crit b{color:var(--crit)}
.bignum.is-ok b{color:var(--ok)}

/* the supporting numbers, deliberately quiet */
.quiet-line{font-size:14.5px; line-height:1.6; color:var(--ink-3)}
.quiet-line b{font-weight:600; color:var(--ink-2)}
.quiet-line a{margin-left:4px; white-space:nowrap}

/* ---------- which file is open: one line until you want it ---------- */
.filebar{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface-2)}
.filebar>summary{list-style:none; cursor:pointer; padding:10px 14px; display:flex; flex-wrap:wrap;
  gap:3px 12px; align-items:baseline; font-size:14.5px; color:var(--ink-2)}
.filebar>summary::-webkit-details-marker{display:none}
.filebar>summary:hover{color:var(--ink)}
.filebar-name b{color:var(--ink); font-weight:600}
.filebar-meta{font-size:13.5px; color:var(--ink-3)}
.filebar-more{margin-left:auto; font-size:13.5px; color:var(--accent-ink)}
.filebar-more::after{content:" ▾"; font-size:10px}
.filebar[open] .filebar-more::after{content:" ▴"}
.filebar .shelf{border:0; border-top:1px solid var(--rule); border-radius:0; background:transparent}

/* ---------- control bar ---------- */
.controls{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule)}
.controls .shell{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; padding-block:11px}
.ctl-group{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.ctl-label{font:500 13.5px/1 var(--sans); color:var(--ink-3)}
.chip{font:500 13px/1 var(--sans); letter-spacing:0; padding:7px 12px; border-radius:99px; cursor:pointer;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink-2); display:inline-flex; align-items:center; gap:6px;
  transition:background .12s, border-color .12s, color .12s}
.chip:hover{border-color:var(--ink-3)}
.chip .dot{width:8px; height:8px; border-radius:99px; background:currentColor; flex:none}
.chip[aria-pressed="true"]{color:var(--surface); border-color:transparent}
.chip[aria-pressed="true"][data-level],.chip[aria-pressed="true"][data-rbview]{background:var(--accent)}
.chip[aria-pressed="true"][data-sev="4"]{background:var(--crit)}
.chip[aria-pressed="true"][data-sev="3"]{background:var(--high)}
.chip[aria-pressed="true"][data-sev="2"]{background:var(--watch)}
.chip[aria-pressed="true"][data-sev="1"]{background:var(--mute)}
.chip[aria-pressed="true"][data-sev="0"]{background:var(--ok)}
:root[data-theme="dark"] .chip[aria-pressed="true"], :root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:#0c1215}
.toggle{display:inline-flex; align-items:center; gap:7px; font:500 13px/1 var(--sans); color:var(--ink-2); cursor:pointer;
  padding:6px 10px; border:1px solid var(--rule); border-radius:99px; background:var(--surface)}
.toggle input{accent-color:var(--accent); margin:0; width:13px; height:13px}
.search{flex:1 1 190px; min-width:150px; display:flex; align-items:center; gap:7px;
  border:1px solid var(--rule); background:var(--surface); border-radius:99px; padding:0 12px}
.search input{flex:1; border:0; background:transparent; color:var(--ink); font:400 14px/1 var(--sans); padding:8px 0; min-width:0}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:0}
.btn-reset{font:500 13px/1 var(--sans); border:1px solid var(--rule); background:var(--surface); color:var(--ink-2);
  border-radius:99px; padding:7px 12px; cursor:pointer}
.btn-reset:hover{border-color:var(--ink-3); color:var(--ink)}

/* ---------- sections ---------- */
main{padding-block:30px 72px}
section{margin-block:0 44px; scroll-margin-top:64px}
section>h2{font-size:26px; letter-spacing:-.014em; margin-bottom:6px}
.sec-note{color:var(--ink-2); font-size:15.5px; margin-bottom:18px}

/* the small "tell me more" disclosures that keep the long explanations off the page */
.more{margin:0 0 16px}
.more>summary{cursor:pointer; list-style:none; font-size:14.5px; color:var(--accent-ink); width:fit-content}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"›"; font:400 15px/1 var(--sans); display:inline-block;
  margin-right:7px; transition:transform .15s; transform-origin:45% 55%}
.more[open]>summary::before{transform:rotate(90deg)}
.more p{margin-top:9px; font-size:15px; line-height:1.6; color:var(--ink-2)}

/* ---------- "new to this?" — everything that used to be three whole sections ---------- */
.explainer-body{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px 34px}
.ex-col{display:flex; flex-direction:column; gap:11px}
.ex-col h3{font-size:17.5px}
.ex-steps,.ex-caveats{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:10px}
.ex-steps li,.ex-caveats li{font-size:14.5px; line-height:1.58; color:var(--ink-2)}
.ex-steps li b,.ex-caveats li b{color:var(--ink)}
.ex-col .src{font:400 13px/1.5 var(--sans); color:var(--ink-3); margin-top:auto; padding-top:5px}
.ex-col code{font-family:var(--mono); font-size:.9em; background:var(--surface-3); padding:1px 5px; border-radius:3px}

/* ---------- map ---------- */
.map-wrap{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); overflow:hidden}
.map-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--rule-2); background:var(--surface-2)}
.legend{display:flex; gap:14px; flex-wrap:wrap}
.legend-item{display:flex; align-items:center; gap:6px; font:400 13px/1 var(--sans); color:var(--ink-2)}
.legend-swatch{width:20px; height:0; border-top-width:2.5px; border-top-style:solid; flex:none}
.map-hint{font:400 13px/1 var(--sans); color:var(--ink-3)}
.map-scroll{overflow-x:auto; padding:6px}
#map{display:block; width:100%; min-width:820px; height:auto}

.zbox{cursor:pointer}
.zbox .zbg{fill:var(--surface-2); stroke:var(--rule); stroke-width:1.25; rx:6}
.zbox:hover .zbg{stroke:var(--accent); }
.zbox.is-sel .zbg{stroke:var(--accent); stroke-width:2.25; fill:var(--accent-soft)}
.zbox.is-dim{opacity:.3}
.zbox .zid{font:500 9.5px/1 var(--mono); letter-spacing:.07em; fill:var(--ink-3)}
.zbox .zname{font:600 14px/1 var(--cond); fill:var(--ink)}
.zbox .zmeta{font:400 11.5px/1 var(--sans); fill:var(--ink-2)}
.zbox .zips{font:400 10.5px/1 var(--mono); fill:var(--ink-3)}
.zbox .zstripe{rx:2}
.ext .zbg{fill:var(--surface-3); stroke-dasharray:4 3}
.link{fill:none; stroke-linecap:round; transition:opacity .15s, stroke-width .15s}
.link.is-dim{opacity:.08}
.link:hover{stroke-width:5}
.link-hit{fill:none; stroke:transparent; stroke-width:16; cursor:pointer}
.link-label{font:500 10.5px/1 var(--mono); letter-spacing:.02em; fill:var(--ink-2); paint-order:stroke;
  stroke:var(--surface); stroke-width:3.5px; stroke-linejoin:round}
.link-label.is-dim{opacity:.1}
.badge-crit{font:600 10.5px/1 var(--mono); fill:var(--surface)}
.map-empty{font:400 13px/1 var(--sans); fill:var(--ink-3)}
.map-empty-lead{font:500 14px/1 var(--sans); fill:var(--ink-2)}

/* ---------- detail panel ---------- */
.panel{position:fixed; inset:auto 0 0 auto; top:0; width:min(430px,100%); background:var(--surface);
  border-left:1px solid var(--rule); box-shadow:var(--shadow-lift); z-index:60;
  transform:translateX(100%); transition:transform .22s ease, visibility .22s;
  visibility:hidden; display:flex; flex-direction:column}
.panel.is-open{transform:none; visibility:visible}
.panel-head{padding:16px 18px 13px; border-bottom:1px solid var(--rule-2); display:flex; gap:12px; align-items:flex-start}
.panel-head h3{font-size:20.5px; flex:1}
.panel-close{border:1px solid var(--rule); background:var(--surface-2); color:var(--ink-2); border-radius:99px;
  width:28px; height:28px; font:400 16px/1 var(--sans); cursor:pointer; flex:none}
.panel-close:hover{color:var(--ink); border-color:var(--ink-3)}
.panel-body{overflow-y:auto; padding:16px 18px 40px; flex:1; display:flex; flex-direction:column; gap:18px}
.panel-body table{table-layout:fixed; width:100%}
.panel-body td{padding:7px 9px; font-size:13px; overflow:hidden; text-overflow:ellipsis}
.panel-body .col-sev{width:84px}
.panel-body .col-port{width:108px}
.panel-body .col-num{width:70px}
.panel-body .col-peer{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.panel-body .sev{padding:3px 5px; font-size:10.5px}
.panel-sub{font:600 13px/1.3 var(--sans); color:var(--ink-3)}
.panel-note{font-size:13px; line-height:1.5; color:var(--ink-2); margin:6px 0 10px}

/* ---------- a rule, written out the way a firewall rule reads ---------- */
.rulecard{border:1px solid var(--rule); border-left:3px solid var(--ok-line); border-radius:var(--r);
  background:var(--surface); padding:10px 12px; margin-bottom:9px}
.rulecard.is-stop{border-left-color:var(--crit-line); background:var(--surface-2)}
.rulecard-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.rulecard-n{font:600 12.5px/1 var(--sans); color:var(--ink-3); margin-right:auto}
.rulecard-grid{display:grid; grid-template-columns:58px 1fr; gap:5px 10px; margin:0}
.rulecard-grid dt{font:600 12.5px/1.5 var(--sans); color:var(--ink-3)}
.rulecard-grid dd{margin:0; font-size:13.5px; line-height:1.4; color:var(--ink); min-width:0}
.rulecard-grid dd b{font-weight:600}
.rulecard-grid dd i{display:block; font-style:normal; font-family:var(--mono); font-size:11.5px;
  color:var(--ink-3); margin-top:2px; word-break:break-word}
.rulecard-why{font-size:13px; line-height:1.5; color:var(--ink-2); margin:9px 0 0;
  padding-top:8px; border-top:1px solid var(--rule-2)}

/* ---------- tables ---------- */
.tbl-wrap{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); overflow:hidden}
.tbl-scroll{overflow-x:auto; max-height:520px; overflow-y:auto}
table{border-collapse:collapse; width:100%; font-size:14px}
thead th{position:sticky; top:0; z-index:2; background:var(--surface-2); text-align:left; white-space:nowrap;
  font:600 13px/1 var(--sans); color:var(--ink-3);
  padding:11px 12px; border-bottom:1px solid var(--rule); cursor:pointer; user-select:none}
thead th:hover{color:var(--ink)}
thead th .arrow{opacity:.45; font-size:9.5px}
tbody td{padding:9px 12px; border-bottom:1px solid var(--rule-2); vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tbody tr.is-sel{background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:0}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.mono{font-family:var(--mono); font-size:13px; white-space:nowrap}
.wrap-cell{min-width:230px; white-space:normal; color:var(--ink-2); font-size:13.5px; line-height:1.45}
.empty-row td{color:var(--ink-3); text-align:center; padding:26px; font-style:italic}

/* ---------- severity language ---------- */
.sev{display:inline-flex; align-items:center; gap:5px; font:600 12px/1 var(--sans);
  padding:5px 9px; border-radius:99px; white-space:nowrap}
.sev-4{background:var(--crit-soft); color:var(--crit)}
.sev-3{background:var(--high-soft); color:var(--high)}
.sev-2{background:var(--watch-soft); color:var(--watch)}
.sev-1{background:var(--mute-soft); color:var(--ink-2)}
.sev-0{background:var(--ok-soft); color:var(--ok)}
.stripe-4{background:var(--crit)} .stripe-3{background:var(--high)} .stripe-2{background:var(--watch)}
.stripe-1{background:var(--mute)} .stripe-0{background:var(--ok)}

/* ---------- findings ----------
   The severity stripe is a border on the card, not a child element. It used to be a <span> in a
   two-column grid, which broke the moment browsers started wrapping a <details>'s content in a
   ::details-content box: the grid then sees only the summary and that box, so the summary was
   placed in the 4px stripe column and the body drew straight over the top of it. */
.findings{display:flex; flex-direction:column; gap:10px}
.finding{display:block; background:var(--surface); border:1px solid var(--rule);
  border-left:4px solid var(--mute); border-radius:var(--r); overflow:hidden}
.finding.lv-4{border-left-color:var(--crit)}
.finding.lv-3{border-left-color:var(--high)}
.finding.lv-2{border-left-color:var(--watch)}
.finding.lv-1{border-left-color:var(--mute)}
.finding.lv-0{border-left-color:var(--ok)}
.finding-main{padding:0}
.finding-btn{width:100%; text-align:left; background:transparent; border:0; padding:14px 16px; cursor:pointer;
  display:flex; gap:13px; align-items:flex-start; color:inherit; font:inherit}
.finding-btn:hover{background:var(--surface-2)}
.finding-idx{font:500 13px/1.5 var(--mono); color:var(--ink-3); flex:none; padding-top:2px}
.finding-t{flex:1; display:flex; flex-direction:column; gap:5px}
.finding-t h3{font-size:19px; line-height:1.25}
.finding-tags{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.tag{font:500 12px/1 var(--sans); padding:5px 9px;
  border-radius:99px; background:var(--surface-3); color:var(--ink-2); border:1px solid var(--rule-2)}
.tag-phase{background:var(--accent-soft); color:var(--accent-ink); border-color:transparent}
.finding-caret{color:var(--ink-3); font-size:12px; flex:none; padding-top:4px; transition:transform .18s}
.finding[open] .finding-caret{transform:rotate(90deg)}
.finding-detail{padding:0 16px 16px 44px; display:flex; flex-direction:column; gap:12px}
.finding-detail p{ color:var(--ink-2); font-size:15.5px}
.do-this{border-left:2px solid var(--accent); padding:9px 0 9px 13px; background:transparent}
.do-this .panel-sub{margin-bottom:4px; color:var(--accent-ink)}
.do-this p{color:var(--ink); font-size:15.5px}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:3px; border-bottom:1px solid var(--rule); margin:38px 0 18px; overflow-x:auto}
.tab{font:500 13.5px/1 var(--cond); letter-spacing:.01em; padding:10px 14px; border:0; background:transparent;
  color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tab .count{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-left:5px}
.tabpanel[hidden]{display:none}

/* ---------- phases ---------- */
.phases{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:12px}
.phase{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); padding:0; overflow:hidden;
  text-align:left; cursor:pointer; font:inherit; color:inherit; display:flex; flex-direction:column}
.phase:hover{border-color:var(--ink-3)}
.phase[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.phase-top{display:flex; align-items:baseline; gap:10px; padding:13px 15px 0}
.phase-n{font:600 30px/1 var(--cond); color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.phase-name{font:600 18.5px/1.2 var(--cond)}
.phase-body{padding:8px 15px 15px; display:flex; flex-direction:column; gap:9px}
.phase-goal{font-size:14.5px; color:var(--ink); font-weight:500}
.phase-does{font-size:14px; color:var(--ink-2); line-height:1.52}
.phase-test{font-size:13.5px; color:var(--ink-2); border-top:1px solid var(--rule-2); padding-top:9px}
.phase-test b{font:600 12.5px/1 var(--sans); color:var(--ink-3); display:block; margin-bottom:4px}
.phase-cut{font:500 13px/1.3 var(--sans); color:var(--accent-ink); padding:0 15px 14px}

/* ---------- rules output ---------- */
.rules-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.btn{font:500 13px/1 var(--sans); border:1px solid var(--rule); background:var(--surface);
  color:var(--ink); border-radius:99px; padding:8px 14px; cursor:pointer}
.btn:hover{border-color:var(--accent); color:var(--accent-ink)}
.btn-primary{background:var(--accent); color:var(--surface); border-color:transparent}
:root[data-theme="dark"] .btn-primary,:root:not([data-theme="light"]) .btn-primary{color:#0c1215}
.btn-primary:hover{background:var(--accent-2); color:var(--surface)}
pre.rules{margin:0; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:15px 17px; overflow-x:auto; font:400 13px/1.72 var(--mono); color:var(--ink); max-height:460px}
pre.rules .c{color:var(--ink-3)}
pre.rules .k{color:var(--accent-ink); font-weight:500}
pre.rules .d{color:var(--crit)}
pre.rules .a{color:var(--ok)}

/* ---------- assets ---------- */
.zone-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px}
.zone-card{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); overflow:hidden}
.zone-card-head{padding:12px 15px; border-bottom:1px solid var(--rule-2); background:var(--surface-2);
  display:flex; justify-content:space-between; align-items:center; gap:10px}
.zone-card-head h3{font-size:17.5px}
.zone-card-head .zid{font:400 12px/1 var(--mono); color:var(--ink-3); display:block; margin-bottom:4px}
.zone-members{list-style:none; margin:0; padding:0}
.zone-members li{display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:8px 15px; border-bottom:1px solid var(--rule-2); font-size:14px}
.zone-members li:last-child{border-bottom:0}
.zone-members .mname{font:500 13.5px/1.3 var(--mono)}
.zone-members .mip{font:400 12px/1.3 var(--mono); color:var(--ink-3)}
.posture{display:flex; gap:4px; flex:none}
.pdot{font:600 11.5px/1 var(--sans); padding:4px 7px; border-radius:99px}
.pdot.ok{background:var(--ok-soft); color:var(--ok)}
.pdot.no{background:var(--crit-soft); color:var(--crit)}

footer{border-top:1px solid var(--rule); background:var(--surface)}
footer .shell{padding-block:22px 34px; display:flex; flex-direction:column; gap:9px}
footer p{font-size:13.5px; color:var(--ink-3)}
footer a{color:var(--ink-2)}
.srcs{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13.5px}

@media (max-width:720px){
  body{font-size:16px}
  .bignum b{font-size:36px}
  .filebar>summary{gap:2px 8px}
  .filebar-more{margin-left:0}
  .finding-detail{padding-left:16px}
  .panel{width:100%}
  .controls .shell{padding-block:9px}
}

/* ---------- environment containers on the map ---------- */
.envbg{fill:none; stroke:var(--rule); stroke-width:1; stroke-dasharray:3 4}
/* drawn after the links, with a halo, so a line crossing the row passes behind the caption */
.envtag{font:500 9.5px/1 var(--mono); letter-spacing:.13em; fill:var(--ink-3);
  paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round}
.envname{font:600 13px/1 var(--cond); fill:var(--ink-2); letter-spacing:.02em;
  paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round}
.zbox.untagged .zbg{stroke-dasharray:5 3; stroke:var(--high)}
.ztagwarn{font:500 10.5px/1 var(--mono); fill:var(--high)}

/* ---------- rulebase: firewall table ---------- */
.posture{border:1px solid var(--rule); border-left:3px solid var(--crit); border-radius:var(--r);
  background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.posture-rule{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.posture-deny{font:600 13px/1 var(--sans); background:var(--crit); color:var(--surface);
  padding:7px 12px; border-radius:99px; white-space:nowrap}
:root[data-theme="dark"] .posture-deny, :root:not([data-theme="light"]) .posture-deny{color:#0c1215}
.posture-sel{font:400 13.5px/1 var(--sans); color:var(--ink-2)}
.posture p{font-size:14px; color:var(--ink-2); line-height:1.55}

.coverage{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.cov-item{display:flex; flex-direction:column; gap:1px}
.cov-item b{font:600 18.5px/1 var(--cond); font-variant-numeric:tabular-nums}
.cov-item span{font:400 12.5px/1.25 var(--sans); color:var(--ink-3)}
.cov-item.is-ok b{color:var(--ok)} .cov-item.is-crit b{color:var(--crit)}
.cov-arrow{color:var(--ink-3); font-size:14px}

.fw-scroll{overflow-x:auto}
table.fwtable{width:100%; border-collapse:collapse; font-size:14px; min-width:900px}
.fwtable thead th{position:sticky; top:0; z-index:2; background:var(--surface-2); text-align:left; white-space:nowrap;
  font:600 13px/1 var(--sans); color:var(--ink-3);
  padding:11px 12px; border-bottom:1px solid var(--rule); cursor:default}
.fwtable td{padding:10px 12px; border-bottom:1px solid var(--rule-2); vertical-align:top}
.fwtable tbody tr:last-child td{border-bottom:0}
.fwtable tbody tr:hover{background:var(--surface-2)}
.fw-n{font:500 12px/1.5 var(--mono); color:var(--ink-3); text-align:right; width:38px;
  font-variant-numeric:tabular-nums; white-space:nowrap}
th.fw-n{text-align:right}
.fw-obj{min-width:170px; max-width:230px}
.fw-obj b{display:block; font:500 13.5px/1.35 var(--mono); color:var(--ink); font-weight:500}
.fw-obj i{display:block; font:400 11px/1.4 var(--mono); font-style:normal; color:var(--ink-3);
  margin-top:2px; word-break:break-word}
.fw-svc{min-width:140px; max-width:190px}
.fw-svc b{display:block; font:500 13px/1.4 var(--mono); font-weight:500; color:var(--ink)}
.fw-svc i{display:block; font:400 11px/1.4 var(--sans); font-style:normal; color:var(--ink-3); margin-top:2px}
.fw-a{white-space:nowrap; width:1%; min-width:116px}
.fw-act{font:600 12px/1 var(--sans); padding:5px 9px; border-radius:99px; display:inline-block; white-space:nowrap}
.fw-allow .fw-act{background:var(--ok-soft); color:var(--ok)}
.fw-deny .fw-act{background:var(--crit-soft); color:var(--crit)}
.fw-warn{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:5px;
  border-radius:50%; background:var(--high-soft); color:var(--high); font:600 11px/16px var(--mono); cursor:help}
.fw-cmt{font-size:13.5px; color:var(--ink-2); line-height:1.5; min-width:260px}
.fw-note{display:block; margin-top:6px; font-size:12.5px; color:var(--ink-2); background:var(--surface-3);
  padding:6px 9px; border-radius:3px; line-height:1.45}
.fw-note b{font:600 12px/1 var(--sans); color:var(--ink-3); margin-right:7px}
.fw-ev{display:block; margin-top:5px; font:400 11.5px/1.4 var(--mono); color:var(--ink-3)}
.fw-allow{border-left:3px solid var(--ok)}
.fw-deny{border-left:3px solid var(--crit)}
/* an observation, not an action — it gets no alarming stripe */
.fw-observe{border-left:3px solid var(--mute)}
.fw-allow td:first-child, .fw-deny td:first-child, .fw-observe td:first-child{padding-left:9px}
.fw-act-free{background:var(--ok-soft); color:var(--ok)}
.fw-act-decide{background:var(--high-soft); color:var(--high)}
.fw-decide{border-left-color:var(--high)}
.fw-note-warn{background:var(--high-soft); color:var(--ink)}
.fw-note-warn b{color:var(--high)}
.rb-block{margin-bottom:0}
.rb-head{margin-bottom:10px}
.rb-head h3{font-size:20.5px; letter-spacing:-.01em}
.rb-head p{font-size:14px; color:var(--ink-2); line-height:1.55; margin-top:4px}
.rules-toolbar{display:flex; gap:12px 18px; flex-wrap:wrap; align-items:center; margin-bottom:16px;
  padding:12px 14px; border:1px solid var(--rule); border-radius:var(--r); background:var(--surface)}
.exports{display:flex; gap:7px; flex-wrap:wrap; margin-left:auto}
.dim{display:inline-flex; align-items:baseline; gap:5px; font:500 12.5px/1 var(--mono);
  background:var(--accent-soft); color:var(--accent-ink); padding:5px 8px; border-radius:3px}
.dim i{font-style:normal; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; opacity:.72}
.rule-act{font:600 12px/1 var(--sans); padding:5px 9px; border-radius:99px}
.rule-act.act-allow{background:var(--ok-soft); color:var(--ok)}
.rule-act.act-stop{background:var(--crit-soft); color:var(--crit)}
.phase-dim{font-size:13.5px; color:var(--ink-2)}
.phase-dim b{color:var(--ink)}

@media (max-width:620px){ .fw-cmt{min-width:220px} }

/* ---------- tagging ---------- */
.tag-split{display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1.25fr); gap:16px; align-items:start}
.tagrows{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); overflow:hidden}
.tagrow{padding:12px 15px; border-bottom:1px solid var(--rule-2); display:flex; flex-direction:column; gap:7px}
.tagrow:last-child{border-bottom:0}
.tagrow-head{display:flex; align-items:baseline; gap:9px}
.tagname{font:500 14px/1 var(--mono); color:var(--ink)}
.tagused{font:400 13px/1.3 var(--sans); color:var(--ink-3); flex:1}
.tagpct{font:500 12.5px/1 var(--mono); font-variant-numeric:tabular-nums}
.tone-ok{color:var(--ok)} .tone-watch{color:var(--high)} .tone-crit{color:var(--crit)}
.tagbar{height:4px; background:var(--surface-3); border-radius:99px; overflow:hidden}
.tagbar-fill{display:block; height:100%; border-radius:99px; background:currentColor}
.tagbar-fill.tone-ok{background:var(--ok)} .tagbar-fill.tone-watch{background:var(--high)} .tagbar-fill.tone-crit{background:var(--crit)}
.tagvals{display:flex; gap:5px; flex-wrap:wrap}
.tagval{display:inline-flex; align-items:baseline; gap:5px; font:400 12px/1 var(--mono); padding:4px 7px;
  border-radius:3px; background:var(--surface-2); border:1px solid var(--rule-2); color:var(--ink-2)}
.tagval i{font-style:normal; color:var(--ink-3); font-size:10.5px}
.tagval-none{color:var(--crit); border-color:var(--crit-soft); background:var(--crit-soft)}
.tagmiss{font:400 12px/1.45 var(--mono); color:var(--high)}
.mtags{display:flex; gap:4px; flex-wrap:wrap; margin-top:4px}
.mtag{font:400 10.5px/1 var(--mono); padding:3px 5px; border-radius:2px; background:var(--surface-3); color:var(--ink-3)}
.mtag-missing{background:var(--high-soft); color:var(--high)}
.zone-card.is-untagged{border-color:var(--high)}

@media (max-width:860px){ .tag-split{grid-template-columns:1fr} }

/* ---------- the first decision: administrative access ---------- */
.admin-alarm{font-size:15px; line-height:1.55; color:var(--ink); background:var(--crit-soft);
  border:1px solid var(--crit-line); border-left-width:3px; border-radius:var(--r); padding:11px 14px}
.admin-alarm b{color:var(--crit)}
.admin-alarm a{margin-left:4px; white-space:nowrap}

.adminstep{margin-bottom:34px}
.adminstep.is-set{margin-block:0}          /* once set it is just another row in the stack */
.adminstep.is-open{border:1px solid var(--accent); border-left-width:3px; border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow)}
.admin-head{padding:18px 20px 0}
.admin-head h2{font-size:24px; margin-bottom:8px}
.admin-head p{font-size:15.5px; line-height:1.6; color:var(--ink-2); margin-bottom:8px}
.admin-head .admin-why{font-size:14.5px; color:var(--ink-3)}
.adminbody{padding:14px 20px 20px}

.admin-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:18px 28px}
.admin-field{border:0; margin:0; padding:0; min-width:0}
.admin-field legend{font:600 17px/1.3 var(--cond); color:var(--ink); padding:0; margin-bottom:5px}
.admin-hint{font-size:14px; color:var(--ink-3); margin-bottom:10px}
.admin-sub{font:600 13.5px/1.4 var(--sans); color:var(--ink-2); margin:14px 0 7px}
.admin-eg{font-weight:400; color:var(--ink-3)}
.admin-note{font-size:13px; line-height:1.5; color:var(--ink-3); margin-top:7px}
.admin-note code, .admin-note kbd{font-family:var(--mono); font-size:.92em; background:var(--surface-3);
  padding:1px 5px; border-radius:3px}

.admin-choices{display:flex; flex-direction:column; gap:6px}
.admin-choice{display:flex; gap:9px; align-items:baseline; cursor:pointer; padding:8px 11px;
  border:1px solid var(--rule); border-radius:5px; background:var(--surface)}
.admin-choice:hover{border-color:var(--accent)}
.admin-choice input{accent-color:var(--accent); margin:0; flex:none}
.admin-choice span{font-size:14px; color:var(--ink)}
.admin-choice i{font-style:normal; color:var(--ink-3); font-size:12.5px; margin-left:7px}

.admin-select{width:100%; font:400 13.5px/1.5 var(--sans); color:var(--ink); background:var(--surface);
  border:1px solid var(--rule); border-radius:5px; padding:6px}
.admin-select optgroup{font:600 12.5px/1.6 var(--sans); color:var(--ink-3)}
.admin-select option{padding:3px 5px; color:var(--ink)}
.admin-input{width:100%; font:400 14.5px/1.4 var(--sans); color:var(--ink); background:var(--surface);
  border:1px solid var(--rule); border-radius:5px; padding:9px 11px}
.admin-input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.admin-actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:18px}

/* the admin rule stands out in the rule table — it is the one that keeps you in the door */
.fw-admin{border-left:3px solid var(--accent)}
.fw-admin td:first-child{padding-left:9px}
.fw-admin .fw-obj b{color:var(--accent-ink)}
.rule-act.act-admin{background:var(--accent-soft); color:var(--accent-ink); display:inline-block; margin-bottom:5px}

/* ---------- one roll-up row, used for every collapsible section on the page ----------
   Chevron, title, and a right-hand line saying what is inside — the same shape whether it is a
   whole section, a block inside a tab, or the administrative-access status. */
.fold{margin:0}
.fold>summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px;
  padding:15px 2px; border-bottom:1px solid var(--rule-2)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"›"; font:400 19px/1 var(--sans); color:var(--ink-3); flex:none;
  width:12px; text-align:center; transform:translateY(1px); transition:transform .15s, color .15s}
.fold[open]>summary::before{transform:translateY(1px) rotate(90deg)}
.fold>summary:hover::before{color:var(--accent)}
.fold>summary:hover .fold-title{color:var(--accent-ink)}
.fold+.fold{border-top:0}
.fold[open]>summary{border-bottom-color:var(--rule)}

.fold-title{font:600 23px/1.25 var(--cond); letter-spacing:-.012em; margin:0; color:var(--ink);
  display:flex; align-items:baseline; gap:8px; transition:color .12s}
.fold-sub .fold-title{font-size:18.5px; letter-spacing:-.008em}
.fold-sum{margin-left:auto; font:400 14px/1.45 var(--sans); color:var(--ink-3); text-align:right;
  padding-left:20px}
.fold-tick{color:var(--ok); font-weight:700; font-size:.85em; flex:none}

.fold-body{padding:18px 0 34px}
.fold-sub .fold-body{padding:16px 0 26px}
.fold .sec-note{margin-bottom:16px}
.fold .rb-head{margin-bottom:12px}

@media (max-width:620px){
  .fold>summary{flex-wrap:wrap; padding:13px 2px}
  .fold-sum{margin-left:0; text-align:left; flex-basis:100%; padding-left:24px; margin-top:3px}
  .fold-title{font-size:21px}
  .fold-sub .fold-title{font-size:17.5px}
}

/* ---------- acknowledge, dismiss, or note a finding ---------- */
.decide{border-top:1px solid var(--rule-2); margin-top:4px; padding-top:12px;
  display:flex; flex-direction:column; gap:8px}
.decide.is-saving{opacity:.55; pointer-events:none}
.decide-now{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.decide-q{font:600 13.5px/1.4 var(--sans); color:var(--ink-3); flex:none}
.decide-act{display:flex; gap:7px; flex:none}
.decide-note{flex:1 1 260px; min-width:0; font:400 14px/1.4 var(--sans); color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:8px 11px}
.decide-note:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.btn-ack:hover{border-color:var(--ok); color:var(--ok)}
.btn-dismiss:hover{border-color:var(--crit-line); color:var(--crit)}

.decide-done{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.decide-state{font:600 12px/1 var(--sans); padding:5px 9px; border-radius:99px; flex:none}
.decide-state.st-acknowledged{background:var(--ok-soft); color:var(--ok)}
.decide-state.st-dismissed{background:var(--mute-soft); color:var(--ink-2)}
.decide-when{font:400 12.5px/1.4 var(--sans); color:var(--ink-3); flex:none}
.decide-comment{font:400 14px/1.5 var(--sans); color:var(--ink-2); flex:1 1 200px; min-width:0}
.decide-done .btn{flex:none}
.decide-err{font-size:13.5px; color:var(--crit)}

/* a decided finding steps back; a dismissed one steps back further */
.finding.is-acknowledged{border-left-color:var(--ok)}
.finding.is-dismissed{border-left-color:var(--mute); opacity:.62}
.finding.is-dismissed:hover{opacity:1}
.finding.is-dismissed .finding-t h3{color:var(--ink-2)}
.tag.tag-acknowledged{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.tag.tag-dismissed{background:var(--mute-soft); color:var(--ink-2); border-color:transparent}

@media (max-width:620px){
  .decide-now{gap:8px}
  .decide-q{flex-basis:100%}
  .decide-note{flex-basis:100%}
}

/* ---------- which tag the ring is drawn around ---------- */
.ringbar{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-bottom:22px;
  padding:12px 15px; border:1px solid var(--rule); border-radius:var(--r); background:var(--surface-2)}
.ringbar-label{font:600 14.5px/1 var(--sans); color:var(--ink); flex:none}
.ringbar-picks{display:flex; gap:6px; flex-wrap:wrap}
.ringbar .chip{font-family:var(--sans)}
.ringbar .chip[aria-pressed="true"]{background:var(--accent); color:var(--surface); border-color:transparent}
:root[data-theme="dark"] .ringbar .chip[aria-pressed="true"],
:root:not([data-theme="light"]) .ringbar .chip[aria-pressed="true"]{color:#0c1215}
.ringbar-note{margin-left:auto; font:400 13.5px/1.4 var(--sans); color:var(--ink-3); text-align:right}
.ringbar-note b{color:var(--ink-2); font-weight:600}
@media (max-width:620px){ .ringbar-note{margin-left:0; text-align:left; flex-basis:100%} }
.phase-more{grid-column:1/-1; font-size:13.5px; line-height:1.5; color:var(--ink-3); margin-top:4px}

/* ---------- the menu bar ---------- */
.menubar{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--rule); margin-bottom:-4px}
.menuitem{display:flex; flex-direction:column; gap:2px; padding:9px 15px 11px; text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:6px 6px 0 0; min-width:0}
.menuitem b{font:600 15px/1.2 var(--sans); color:var(--ink-2)}
.menuitem i{font:400 12.5px/1.3 var(--sans); font-style:normal; color:var(--ink-3)}
.menuitem:hover{background:var(--surface-2)}
.menuitem:hover b{color:var(--accent-ink)}
.menuitem.is-on{border-bottom-color:var(--accent); background:var(--surface-2)}
.menuitem.is-on b{color:var(--ink)}

/* ---------- one flow: the question ---------- */
.flowpage{display:flex; flex-direction:column; gap:26px; padding-block:26px 40px}
.flowform{display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:start;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--surface-2); padding:16px 18px}
.flowend{border:0; margin:0; padding:0; display:grid; gap:5px 10px; min-width:0;
  grid-template-columns:auto minmax(0,1fr)}
.flowend legend{font:600 13px/1 var(--sans); color:var(--ink-3); padding:0 0 7px; grid-column:1/-1}
.fl-lab{font:500 12.5px/1.9 var(--sans); color:var(--ink-3); white-space:nowrap}
.flowend select,.flowend input{font:400 14px/1 var(--sans); background:var(--surface); color:var(--ink);
  border:1px solid var(--rule); border-radius:5px; padding:8px 9px; min-width:0; width:100%}
.flowend select:hover,.flowend input:hover{border-color:var(--ink-3)}
.flowend [hidden]{display:none!important}
.flowend .fl-lab{align-self:center}
.flowgo{display:flex; gap:10px; align-items:center; align-self:end; padding-bottom:1px}
.flowgo .btn-primary{font:600 14px/1 var(--sans); border:1px solid transparent; border-radius:99px;
  padding:11px 18px; cursor:pointer}
.flowgo .btn-quiet{font:500 13.5px/1 var(--sans); text-decoration:none}

.flowempty{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); padding:20px 22px}
.flowempty h2{font:600 22px/1.25 var(--cond); margin:0 0 8px}
.flowempty p{font-size:15px; line-height:1.65; color:var(--ink-2); margin:0}

.flowsum{display:flex; flex-direction:column; gap:12px}
.flowpage .fold-sec{border-top:1px solid var(--rule); padding-top:16px}

/* ---------- one flow: the rule that comes out ---------- */
.flowrule{border:1px solid var(--rule); border-left:3px solid var(--ok-line); border-radius:var(--r);
  background:var(--surface); padding:16px 18px; margin-top:14px}
.flowrule.is-blocked{border-left-color:var(--crit-line); background:var(--surface-2)}
.rule-line{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px}
.rule-end{font:600 17px/1.35 var(--sans); color:var(--ink); background:var(--surface-2);
  border:1px solid var(--rule); border-radius:6px; padding:7px 12px}
.flowrule.is-blocked .rule-end{background:var(--crit-soft); border-color:var(--crit-line); color:var(--crit)}
.rule-arrow{font:400 20px/1 var(--sans); color:var(--ink-3)}
.rule-svc{font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0 0 6px}
.rule-svc b{color:var(--ink)}
.rule-svc-warn b{color:var(--high, var(--crit))}
.rule-warn{font-size:14px; line-height:1.6; color:var(--ink-2); margin:10px 0 0;
  background:var(--surface-2); border:1px solid var(--rule); border-left:3px solid var(--crit-line);
  border-radius:5px; padding:9px 12px}
.rule-foot{font-size:13.5px; line-height:1.6; color:var(--ink-3); margin:12px 0 0;
  padding-top:10px; border-top:1px solid var(--rule-2)}

/* ---------- one flow: the detail ---------- */
.flowtbl{margin:0}
.flowtbl thead th{cursor:default}
.flowtbl tbody tr{cursor:default}
.flowtbl .small{font-size:13px; line-height:1.5; color:var(--ink-2)}
.flowtbl .more{margin:4px 0 0}
.risk-word{display:inline-block; font:600 11px/1 var(--sans); font-style:normal; text-transform:uppercase;
  letter-spacing:.04em; padding:3px 6px; border-radius:99px; margin-left:6px;
  background:var(--surface-3); color:var(--ink-3)}
.flowtbl .lv-4 .risk-word{background:var(--crit-soft); color:var(--crit)}
.flowtbl .lv-3 .risk-word{background:var(--high-soft, var(--surface-3)); color:var(--high, var(--ink-2))}
.verdict-ok{color:var(--ok)}
.verdict-ask{color:var(--crit)}
.verdict-stop{color:var(--ink-3)}

.pairwrap{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; margin-top:14px}
.pairgrp{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); padding:12px 14px}
.pairgrp h4{font:600 14px/1.3 var(--sans); margin:0 0 8px; color:var(--ink)}
.pairgrp h4 code{font-family:var(--mono); font-size:12.5px; color:var(--accent-ink); margin-right:5px}
.pairgrp h4 em{display:block; font:400 12.5px/1.4 var(--sans); font-style:normal; color:var(--ink-3); margin-top:3px}
.pairgrp ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.pairgrp li{display:flex; justify-content:space-between; gap:12px; font-size:13px; line-height:1.4}
.pairgrp li span{color:var(--ink-2); min-width:0; overflow-wrap:anywhere}
.pairgrp li b{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink-3); flex:none}
.pairgrp .pair-more span{color:var(--ink-3); font-style:italic}

.endgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin-top:14px}
.endcard{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); padding:14px 16px}
.endcard h4{font:600 15px/1.2 var(--sans); margin:0 0 10px; color:var(--ink-3)}
.endrow{display:flex; gap:12px; justify-content:space-between; font-size:13.5px; line-height:1.5;
  margin:0 0 7px; padding-bottom:7px; border-bottom:1px solid var(--rule-2)}
.endrow:last-child{margin-bottom:0; padding-bottom:0; border-bottom:0}
.endrow span{color:var(--ink-3); flex:none}
.endrow b{font-weight:500; color:var(--ink); text-align:right; overflow-wrap:anywhere}
.endrow-warn b{color:var(--crit)}

@media (max-width:900px){
  .flowform{grid-template-columns:1fr}
  .flowgo{padding-top:4px}
}
.flowempty h2 em{font-style:italic}
.flowempty-hint{font-size:14px; color:var(--ink-3)}
.btn-swap{display:inline-block; font:600 14px/1 var(--sans); text-decoration:none;
  background:var(--accent); color:var(--surface); border-radius:99px; padding:11px 18px; margin-top:4px}
:root[data-theme="dark"] .btn-swap,:root:not([data-theme="light"]) .btn-swap{color:#0c1215}
.btn-swap:hover{background:var(--accent-2); color:var(--surface)}
.svc-proc{display:block; font:400 11.5px/1.35 var(--mono); font-style:normal; color:var(--ink-3); margin-top:3px}
.mergenote{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); padding:12px 14px;
  display:flex; flex-direction:column; gap:9px}
.mergenote p{font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0}
.mergenote b{color:var(--ink)}
.mergetbl{font-size:13px}
.mergetbl thead th{cursor:default; padding:7px 10px; background:transparent; border-bottom:1px solid var(--rule)}
.mergetbl tbody tr{cursor:default}
.mergetbl tbody td{padding:6px 10px}
.mergetbl tbody td em{font-style:normal; color:var(--crit)}
.mergefoot{font-size:12.5px; color:var(--ink-3)}

/* ---------- groups: one machine per line ---------- */
#grouptbl{margin:0}
#grouptbl thead th{cursor:pointer}
#grouptbl tbody tr{cursor:default}
#grouptbl tbody tr.is-untagged td:first-child{box-shadow:inset 3px 0 0 var(--high)}
#grouptbl td{vertical-align:middle}
#grouptbl td:first-child,#grouptbl .mono,#grouptbl .col-dot{white-space:nowrap}
#grouptbl .lbl{white-space:normal}
#grouptbl .mono{font-family:var(--mono); font-size:12.5px; color:var(--ink-3)}
#grouptbl .col-dot{text-align:center; width:56px}
.lbl{font:400 12.5px/1 var(--mono); color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--rule-2); border-radius:4px; padding:4px 7px; display:inline-block}
.lbl-missing{color:var(--high); background:var(--high-soft); border-color:var(--high-line)}
.linkish{font:500 13.5px/1 var(--sans); color:var(--accent-ink); background:none; border:0;
  padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.linkish:hover{color:var(--accent)}
#grouptbl .pdot{font:600 11px/1 var(--sans); padding:4px 7px; border-radius:99px; display:inline-block}
.ruleline{display:block; font-size:13px; line-height:1.5; color:var(--ink)}
.ruleline b{font-weight:600}
.ruleline code{font-family:var(--mono); font-size:12px; color:var(--accent-ink)}
.rulemore,.rulewhy{display:block; font-style:normal; font-size:12.5px; line-height:1.5; color:var(--ink-3); margin-top:4px}