/* ASD Essentials Navigator. Visual language of the tdx agents console: light, white panels,
   Public Sans + IBM Plex Mono for IDs, ThreatDefence red as the accent. */
:root{
  --bg:#eaebee;--panel:#fff;--head:#fafbfc;--ink:#16181d;--ink2:#2b2f38;--sub:#4b5160;--muted:#666c7a;
  --line:#d4d7de;--line2:#e3e5ea;
  --red:#da1f26;--red-ink:#b01b21;--red-tint:#fbe4e5;
  --green:#22a06b;--green-ink:#1f7a50;--green-tint:#e4f3eb;
  --amber:#f5a524;--amber-ink:#9a5b0c;--amber-tint:#fef3dc;
  --na:#c3c7cf;
  --font:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{font-family:var(--font);color:var(--ink);font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
button{font:inherit}
.mono{font-family:var(--mono);font-size:12px}
.muted{color:var(--muted)}
[hidden]{display:none!important}

/* top bar */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:stretch;gap:12px;height:52px;padding:0 24px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:8px;align-self:center;text-decoration:none;white-space:nowrap}
.brand b{font-size:14px;font-weight:600}
.brand span{font-size:11px;color:var(--muted)}
.topnav{display:flex;gap:2px;margin-left:16px}
.topnav a{display:flex;align-items:center;padding:0 12px;text-decoration:none;color:var(--sub);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.topnav a:hover{color:var(--ink)}
.topnav a.on{color:var(--ink);border-bottom-color:var(--red)}
.right{margin-left:auto;display:flex;align-items:center;gap:8px}
.chapwrap{position:relative;z-index:45}
.chap{display:flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:9px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.chap:hover{background:var(--ink2)}
.chapwrap.big .chap{font-size:13px;padding:6px 11px;border-radius:8px}
.vctl{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;align-self:stretch}
.vhead2 h1{margin:0}
.chapwrap.big .chapmenu{right:auto;left:0}
.chapwrap{z-index:45}
.chapmenu{z-index:45}
.titlerow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.titlerow h1{margin:0}
.chap .car{font-size:10px;color:rgba(255,255,255,.75)}
.chap[aria-expanded="true"]{background:var(--ink2);border-color:var(--ink2)}
.chapmenu{display:none;position:absolute;right:0;top:calc(100% + 6px);width:300px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(22,24,29,.12);padding:6px}
.chapmenu.open{display:block}
.chapmenu .cmh{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 8px 4px}
.chapmenu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:7px 8px 7px 26px;cursor:pointer;position:relative}
.chapmenu button:hover{background:var(--head)}
.chapmenu button b{display:block;font-size:12.5px;font-weight:500}
.chapmenu button span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.chapmenu button.on::before{content:'';position:absolute;left:10px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--red)}

main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:24px 24px 40px}
main:focus{outline:none}
/* the footer waits for the page above it, so it is not seen jumping down as the data arrives */
main:has(> .loading),main:has(> .loading, .e8empty, .mx2:empty) ~ .foot{visibility:hidden}
/* the matrix card shows once it is drawn, not as an empty box that then grows */
.mapcard:has(.mx2:empty){visibility:hidden}
.skip{position:absolute;left:8px;top:-60px;z-index:60;padding:8px 14px;border:0;border-radius:8px;background:var(--ink);color:#fff;font-weight:500;cursor:pointer}
.skip:focus{top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the loading line only shows when the data is slow to arrive */
.loading{color:var(--muted);visibility:hidden;animation:late 0s .6s forwards}
@keyframes late{to{visibility:visible}}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--line);background:var(--panel);font-size:11.5px;color:var(--muted)}

/* layout */
.page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.page.full{grid-template-columns:minmax(0,1fr)}
.head{margin-bottom:16px}
.crumb{font-size:12px;color:var(--muted);margin-bottom:6px}
.crumb a{color:var(--sub)}
h1{font-size:20px;font-weight:600;letter-spacing:-.2px;margin:0}
.head p{margin:4px 0 0;color:var(--sub);max-width:760px}
h2{font-size:14px;font-weight:600;margin:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.pad{padding:16px 18px}
.lbl{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sect{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.sect::after{content:'';flex:1;height:1px;background:var(--line2)}
.rail .panel{padding:16px}
.rail .sect:first-child{margin-top:0}
.rail p{margin:0 0 10px;color:var(--sub);font-size:12.5px}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:6px}
.stat{padding:11px 16px;border-left:1px solid var(--line2);min-width:0}
.stat:first-child{border-left:0}
.stat .v{display:block;font-size:20px;font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v small{font-size:12px;color:var(--muted);font-weight:400;margin-left:4px}
.stat .v.sm{font-size:14px;padding-top:4px}
.v.fe{color:var(--green-ink)}.v.pe{color:var(--amber-ink)}.v.ne{color:var(--red-ink)}

/* bars and pills */
.bar6{display:block;height:5px;background:var(--line2);border-radius:3px;overflow:hidden}
.bar6 i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .25s}
.stack{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line2)}
.stack i{display:block;height:100%}
.pill{display:inline-block;font-size:11px;font-weight:500;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pill.fe{background:var(--green-tint);color:var(--green-ink)}
.pill.pe{background:var(--amber-tint);color:var(--amber-ink)}
.pill.ne{background:var(--red-tint);color:var(--red-ink)}
.pill.na{background:var(--line2);color:var(--sub)}
.chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--line2);color:var(--sub);white-space:nowrap}
.chip.mono{font-family:var(--mono);font-size:11px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--na);flex:none}
.dot.fe{background:var(--green)}.dot.pe{background:var(--amber)}.dot.ne{background:var(--red)}

/* segmented control */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel);flex:none}
.seg button{font-size:11.5px;padding:4px 10px;background:none;border:0;border-left:1px solid var(--line);color:var(--sub);cursor:pointer;white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--ink);background:var(--head)}
.seg button.on{background:var(--ink);color:#fff}
.seg.sm button{padding:3px 8px;font-size:11px}

.btn{display:inline-block;font-size:12px;padding:6px 12px;border:1px solid var(--line);background:var(--panel);border-radius:8px;cursor:pointer;color:var(--ink);text-decoration:none;white-space:nowrap}
.btn:hover{border-color:#c2c6ce}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.red{background:var(--red);color:#fff;border-color:var(--red)}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* overview: phase route */
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.node{display:flex;align-items:center;gap:8px;margin-bottom:10px;position:relative}
.node .c{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;background:var(--panel);flex:none}
.node b{font-weight:600;font-size:12.5px;display:block;line-height:1.2}
.node span{font-size:11px;color:var(--muted)}
.node .ln{flex:1;height:1px;background:var(--line);margin-left:6px}
.dcard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px;transition:border-color .15s,box-shadow .15s}
.dcard:hover{border-color:#c2c6ce;box-shadow:0 2px 10px rgba(22,24,29,.06)}
.dcard .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;font-weight:500}
.dcard .t em{font-style:normal;font-weight:500;white-space:nowrap}
.dcard .t em.na{font-weight:400;font-size:11.5px;color:var(--muted)}
.dcard .sub{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:7px}
.lanes{margin-top:10px;border-top:1px dashed var(--line);padding-top:12px}
.lanes .cap{font-size:11.5px;color:var(--muted);margin-bottom:8px}
.lane{display:grid;grid-template-columns:minmax(150px,auto) 1fr minmax(60px,auto);gap:14px;align-items:center;background:var(--head);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:8px;text-decoration:none}
.lane:hover{border-color:#c2c6ce}
.lane b{font-weight:500;white-space:nowrap}
.lane b small{font-weight:400;color:var(--muted);font-size:11px;margin-left:6px}
.lane em{font-style:normal;text-align:right;font-weight:500;white-space:nowrap}
.lane em.na{font-weight:400;font-size:11.5px;color:var(--muted)}
.slist{list-style:none;margin:0 0 6px;padding:0}
.slist li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.slist li:last-child{border-bottom:0}
.slist .r{margin-left:auto;color:var(--muted);font-size:11.5px;white-space:nowrap}

/* domain: principle table */
.ptab{width:100%}
.prow{display:grid;grid-template-columns:16px 64px minmax(0,1fr) auto 140px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line2);cursor:pointer}
.prow:first-child{border-top:0}
.prow:hover{background:#fcfcfd}
.prow .nm{font-weight:500}
.prow .nm small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:1px}
.prow .rt{text-align:right}
.phead{display:grid;grid-template-columns:16px 64px minmax(0,1fr) auto 140px;gap:12px;padding:8px 14px;background:var(--head);border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
.sq{display:flex;gap:3px;flex-wrap:wrap;max-width:140px;justify-content:flex-end}
.sq i{width:10px;height:10px;border-radius:2px;background:var(--na)}
.sq i.fe{background:var(--green)}.sq i.pe{background:var(--amber)}.sq i.ne{background:var(--red)}
.sq i.weak{outline:1.5px solid var(--ink);outline-offset:1px}
.acts{background:var(--head);border-top:1px solid var(--line2);padding:4px 14px 8px 106px}
.arow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line2)}
.arow:last-child{border-bottom:0}
.arow .tx{font-size:12.5px;color:var(--ink2)}
.arow .tx a{color:var(--ink);text-decoration:none}
.arow .tx a:hover{text-decoration:underline}
.arow .tx .mono{color:var(--muted);margin-right:6px}

/* action page */
.atitle{font-size:18px;font-weight:600;line-height:1.35;margin:4px 0 10px;letter-spacing:-.15px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.drate{width:100%;border-collapse:collapse}
.drate td{padding:8px 0;border-top:1px solid var(--line2);vertical-align:middle}
.drate tr:first-child td{border-top:0}
.drate td:last-child{text-align:right}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 0;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 12px;font-weight:500;color:var(--sub);cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--red)}
.tpanel{padding:14px 0 0}
.ind h3{font-size:12.5px;font-weight:600;margin:14px 0 6px;display:flex;align-items:center;gap:8px}
.ind h3:first-child{margin-top:0}
.ind ul{margin:0;padding:0;list-style:none}
.ind li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--line2);color:var(--ink2)}
.ind li .mono{color:var(--muted)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:500;font-size:11px;color:var(--sub);background:var(--head);padding:8px 12px;border-bottom:1px solid var(--line);letter-spacing:.03em;text-transform:uppercase}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:#fcfcfd}
.tbl .wrapids{display:flex;gap:5px;flex-wrap:wrap}
.note{background:var(--head);border:1px solid var(--line2);border-radius:8px;padding:10px 12px;color:var(--sub);font-size:12.5px}
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:16px}

/* actions browser */
.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;padding:12px 14px;border-bottom:1px solid var(--line)}
.filters label{display:flex;flex-direction:column;gap:4px}
.filters select,.filters input{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);min-width:150px}
.count{padding:10px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line2)}
.resp{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;background:var(--ink);color:#fff;font-size:11px;font-weight:600}
.resp.S{background:#5b6170}.resp.P{background:#9aa0ab}

/* board summary */
.canvas{background:#dfe1e5;border-radius:12px;padding:28px}
.paper{background:#fff;max-width:820px;margin:0 auto;padding:36px 40px;box-shadow:0 1px 3px rgba(22,24,29,.08),0 12px 30px rgba(22,24,29,.10);border-radius:2px}
.paper .wm{font-weight:800;color:var(--red);letter-spacing:-.4px;font-size:15px}
.paper h1{font-size:22px;margin:14px 0 2px}
.paper .meta{color:var(--muted);font-size:12px;margin-bottom:20px}
.paper .tbl td,.paper .tbl th{padding:7px 8px}
.paper .tbl td.n{text-align:right}
.paper .gaps li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line2)}
.paper .gaps{list-style:none;padding:0;margin:0}
.paper .fine{font-size:11px;color:var(--muted);margin-top:22px}

/* ---------- app.js views ---------- */
.col{min-width:0}
.rail .panel>.sect:first-child{margin-top:0}
.rail .btns{margin-bottom:4px}
.btn[disabled]{opacity:.45;cursor:default}
.btn.red:hover{background:var(--red-ink)}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line)}
.linkbtn:hover{color:var(--red)}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.crumb b{font-weight:500;color:var(--ink2)}
.seg button:focus-visible,.btn:focus-visible,.prow:focus-visible,.tabs button:focus-visible,.chap:focus-visible,.topnav a:focus-visible,.dcard:focus-visible,.lane:focus-visible,.chapmenu button:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.segn{margin-left:5px;opacity:.65}
.sdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--na);box-shadow:0 0 0 3px var(--line2)}
.sdot.fe{background:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.sdot.pe{background:var(--amber);box-shadow:0 0 0 3px var(--amber-tint)}
.sdot.ne{background:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
.slist li.cur{font-weight:500}
.slist a{text-decoration:none}.slist a:hover{text-decoration:underline}
.confirm{background:var(--red-tint);border-radius:8px;padding:10px 12px;margin-top:8px}
.confirm p{color:var(--ink2);margin:0 0 8px}
.flash{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--green-tint);color:var(--green-ink);font-size:12px}
.flash.bad{background:var(--red-tint);color:var(--red-ink)}
.lead{margin:0 0 10px;color:var(--sub);max-width:760px}
.hint{margin:0 0 10px;color:var(--muted);font-size:12px}
.v.na{color:var(--muted)}

/* overview */
.stop{min-width:0}
.node .lab{display:flex;flex-direction:column;line-height:1.25}
.node .ln{position:relative;height:0;border-top:1.5px solid var(--line);background:none}
.node .ln::after{content:'';position:absolute;right:1px;top:-5.5px;width:8px;height:8px;border-top:1.5px solid var(--line);border-right:1.5px solid var(--line);transform:rotate(45deg)}
.dcard .t{font-size:12.5px}
.dcard .sub span:last-child{white-space:nowrap}
.respgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tpanel .respgrid{grid-template-columns:repeat(2,1fr)}
.respcard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 12px;transition:border-color .15s}
a.respcard:hover{border-color:#c2c6ce}
.respcard b{font-weight:500;margin-left:6px}
.respcard p{margin:6px 0;color:var(--sub);font-size:12px}
.respcard .lbl{display:block;margin-bottom:6px}
.respcard .muted{font-size:11.5px}
.resp.none{background:var(--line2);color:var(--muted)}

/* domain */
.tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 8px;font-size:12px}
.ptab{overflow:hidden}
.phead .rt{text-align:right}
.prow .car{color:var(--muted);font-size:11px;transition:transform .15s;display:inline-block}
.prow.open .car{transform:rotate(90deg)}
.prow.open{background:var(--head)}
.acts .pov{margin:8px 0 2px;color:var(--sub);font-size:12px}
.arow .tx small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.arow .tx small.wk{color:var(--ink2);font-weight:500}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.sqi{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--na)}
.sqi.fe{background:var(--green)}.sqi.pe{background:var(--amber)}.sqi.ne{background:var(--red)}
.sqi.weak{outline:1.5px solid var(--ink);outline-offset:1px}
.big{font-size:30px;font-weight:500;letter-spacing:-.5px;line-height:1.1;margin-bottom:10px}
.big .muted{font-size:13px;font-weight:400;letter-spacing:0}
.rail .stack{margin-bottom:8px}

/* action */
.atitle{max-width:760px}
.prin{border-top:1px solid var(--line2);padding-top:10px}
.prin p{margin:4px 0 0;color:var(--ink2);max-width:760px}
.prin b{font-weight:600}
.drate td:first-child a{font-weight:500;text-decoration:none}
.drate td:first-child a:hover{text-decoration:underline}
.drate td small{display:block;color:var(--muted);font-size:11px}
.drate tr.all td{background:var(--head)}
.drate tr.all td:first-child{padding-left:10px;border-radius:8px 0 0 8px}
.drate tr.all td:last-child{padding-right:10px;border-radius:0 8px 8px 0}
.drate tr.all b{font-weight:500}
h3.sub{font-size:12.5px;font-weight:600;margin:16px 0 8px}
.tpanel h3.sub:first-of-type{margin-top:4px}
.tbl .rt{text-align:right;white-space:nowrap}
.tbl a{text-decoration:none}.tbl a:hover{text-decoration:underline}
.tbl .sub{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.wrapids a.chip:hover{background:var(--line);text-decoration:none}
.pager .btn{max-width:48%;overflow:hidden;text-overflow:ellipsis}

/* actions list */
.tblwrap{overflow-x:auto}
.atbl td:first-child{white-space:nowrap}
.atbl .idm{display:none}
.atbl .sq{justify-content:flex-start;max-width:110px}

/* board summary */
.paper .pm{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px;font-size:11px;color:var(--muted)}
.paper h1{margin-top:0}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line2);border-radius:8px;margin-bottom:6px}
.kpis div{padding:8px 12px;border-left:1px solid var(--line2)}
.kpis div:first-child{border-left:0}
.kpis b{display:block;font-weight:500;font-size:15px;margin-top:1px}
.paper .ph{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--sub);margin:22px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--ink)}
.stbl th{background:none;padding:6px 8px}
.stbl th.n,.stbl td.n{text-align:right;white-space:nowrap}
.stbl td b{font-weight:600}
.stbl tr.grp td{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:12px;border-bottom:1px solid var(--line2)}
.paper .gaps small{display:block;color:var(--muted);font-size:11px}
.paper .gaps li{align-items:center}
.paper .gaps li>span:first-child{min-width:0}
.paper .more,.paper .method{color:var(--sub);font-size:12px;margin:8px 0 0}
.paper .pf{margin-top:24px;padding-top:10px;border-top:1px solid var(--line2);font-size:10.5px;color:var(--muted);display:flex;justify-content:space-between;gap:14px}
.field{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.field input{width:100%;font:inherit;font-size:12.5px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--head);color:var(--ink)}

/* roles */
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rolecard{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.rolecard:hover{border-color:#c2c6ce;box-shadow:0 2px 10px rgba(22,24,29,.06)}
.rolecard .t{display:flex;justify-content:space-between;gap:10px;font-weight:600;font-size:13.5px}
.rolecard .t em{font-style:normal;font-weight:500;font-size:12px;color:var(--sub);white-space:nowrap}
.rolecard .who{font-size:12px;color:var(--ink2)}
.rolecard .dd{font-size:12px;color:var(--muted);flex:1}
.rolecard .sub{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}
.rolepick{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 14px;overflow-x:auto}
.rolepick a{padding:8px 12px;text-decoration:none;color:var(--sub);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.rolepick a:hover{color:var(--ink)}
.rolepick a.on{color:var(--ink);border-bottom-color:var(--red)}
.mx{width:100%;border-collapse:collapse;font-size:12px}
.mx th{font-weight:500;font-size:11px;color:var(--sub);background:var(--head);padding:8px 6px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.mx th a{text-decoration:none}.mx th a:hover{text-decoration:underline}
.mx th small{display:block;font-weight:400;color:var(--muted);font-size:10.5px}
.mx th.mxh{text-align:left;padding-left:14px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.mx td{padding:7px 6px;border-bottom:1px solid var(--line2);text-align:center;vertical-align:middle}
.mx td.mxn{text-align:left;padding-left:14px;min-width:260px}
.mx tr.mxp{cursor:pointer}
.mx tr.mxp td{background:var(--head);font-weight:500}
.mx tr.mxp:hover td{background:#f3f4f6}
.mx tr.mxp:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.mx tr.mxp .car{color:var(--muted);font-size:11px;display:inline-block;transition:transform .15s;margin-right:6px}
.mx tr.mxp.open .car{transform:rotate(90deg)}
.mx tr.mxa td.mxn{padding-left:32px;color:var(--ink2)}
.mx tr.mxa a{text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mx tr.mxa a:hover{text-decoration:underline}
.mx tr.mxa .mono{color:var(--muted);margin-right:6px}
.mx tfoot td{font-weight:500;border-top:1px solid var(--line);border-bottom:0;background:var(--head)}
.mx tfoot td.mxn{font-size:11px;color:var(--sub);font-weight:500}
.cell{display:inline-block;width:16px;height:16px;border-radius:4px;background:var(--na);vertical-align:middle}
.cell.fe{background:var(--green)}.cell.pe{background:var(--amber)}.cell.ne{background:var(--red)}
.btn-cell{border:0;padding:0;cursor:pointer}
.btn-cell{transition:transform .12s,box-shadow .12s}
.btn-cell:hover{box-shadow:0 1px 3px rgba(22,24,29,.25)}
/* a principle's rolled-up rating in the list: a status dot, not a control */
.roll{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--na);vertical-align:middle}
.roll.fe{background:var(--green)}.roll.pe{background:var(--amber)}.roll.ne{background:var(--red)}
.legend .roll{width:9px;height:9px}
.mxlist tr.mxp td:not(.mxn){cursor:default}
.mxlist tr.scorerow th{text-transform:none;letter-spacing:0;font-size:12px;color:var(--ink);padding-top:6px;padding-bottom:7px;background:#fff}
.mxlist tr.scorerow th b{display:block;font-weight:600}
.mxlist tr.scorerow th b.na{color:var(--muted);font-weight:500}
.mxlist tr.scorerow th small{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
.mxlist tr.scorerow th.mxh{font-size:11px;font-weight:600;color:var(--ink2);text-align:left}
.listhint{margin:-4px 0 10px}
.mxlist[data-lg] .btn-cell,.mxlist[data-lg] .roll{opacity:.2;transition:opacity .15s}
.mxlist[data-lg="fe"] .fe,.mxlist[data-lg="pe"] .pe,.mxlist[data-lg="ne"] .ne,.mxlist[data-lg="na"] .btn-cell.na,.mxlist[data-lg="na"] .roll.na{opacity:1}
/* list headers stay visible under the top bar while scrolling (wide screens; narrow ones scroll the table sideways instead) */
@media (min-width:1001px){
  .tblwrap.listwrap{overflow:visible}
  .mxlist thead{position:sticky;top:52px;z-index:6}
  .mxlist thead th{background:var(--head);box-shadow:inset 0 -1px 0 var(--line)}
  .mxlist thead tr.scorerow th{background:#fff}
  .mxlist{min-width:0}
}
.btn-cell:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.nap{display:inline-block;width:12px;height:2px;background:var(--line);vertical-align:middle}
.legend .nap{width:10px}
.small{font-size:11.5px;margin-top:10px}

/* facet filters */
.fpanel{overflow:visible}
.ftop{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line2)}
.fsearch{position:relative;flex:1 1 260px;min-width:0}
.fsearch svg{position:absolute;left:11px;top:50%;width:14px;height:14px;margin-top:-7px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
.fsearch input{width:100%;font:inherit;font-size:13px;padding:8px 12px 8px 32px;border:1px solid var(--line);border-radius:10px;background:var(--head);color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s}
.fsearch input:focus{outline:0;background:#fff;border-color:var(--ink2);box-shadow:0 0 0 3px rgba(22,24,29,.08)}
.facets{display:flex;gap:6px;flex-wrap:wrap}
.facet{position:relative}
.fbtn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap;max-width:240px;transition:border-color .15s,background .15s}
.fbtn span{overflow:hidden;text-overflow:ellipsis}
.fbtn:hover{border-color:#b9bec8;background:var(--head)}
.fbtn i{font-style:normal;font-size:9px;color:var(--muted);transition:transform .15s}
.facet.open .fbtn i{transform:rotate(180deg)}
.fbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fbtn.on i{color:rgba(255,255,255,.7)}
.fbtn b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:600}
.fbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.fpop{position:absolute;left:0;top:calc(100% + 6px);z-index:25;min-width:250px;max-width:min(320px,calc(100vw - 32px));max-height:360px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(22,24,29,.16);padding:6px;animation:pop .12s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fpop{animation:none}}
.fph{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fph .linkbtn,.fph .muted{font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:500}
.fph .muted{font-weight:400}
.fopt{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--ink)}
.fopt:hover{background:var(--head)}
.fopt input{position:absolute;opacity:0;width:1px;height:1px}
.fopt .box{width:16px;height:16px;flex:none;border:1.5px solid #b9bec8;border-radius:5px;background:#fff;position:relative;transition:background .12s,border-color .12s}
.fopt input:checked+.box{background:var(--ink);border-color:var(--ink)}
.fopt input:checked+.box::after{content:'';position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fopt input:focus-visible+.box{outline:2px solid var(--red);outline-offset:2px}
.fopt .ol{flex:1;min-width:0}
.fopt .oc{font-size:11.5px;color:var(--muted);min-width:22px;text-align:right}
.fopt.zero{color:var(--muted)}
.ftokens{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);min-height:44px}
.ftokens .count{padding:0;border:0;margin-right:6px;font-weight:500;color:var(--ink2)}
.tok{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--line2);color:var(--ink);border:0;border-radius:999px;padding:4px 6px 4px 10px;cursor:pointer;max-width:100%;transition:background .15s}
.tok:hover{background:#d9dce2}
.tok .tk{color:var(--muted);font-size:11px}
.tok i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(22,24,29,.08);font-size:12px;line-height:1}
.tok:hover i{background:var(--ink);color:#fff}
.ftokens .linkbtn{margin-left:4px;font-size:12px}

/* modern polish */
.panel,.dcard,.rolecard,.respcard,.stats{box-shadow:0 1px 2px rgba(22,24,29,.04)}
.btn{border-radius:9px;transition:border-color .15s,background .15s}
.btn.primary:hover{background:var(--ink2)}
.seg{border-radius:9px}
.seg button{transition:background .12s,color .12s}
.atbl tbody tr{transition:background .12s}
.atbl tbody tr.click:hover td{background:#f7f8fa}
.atbl td{vertical-align:middle}

/* rating buttons: a dot in each rating's color, and the selected one filled with it */
.seg button[data-rate]::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px;background:var(--na)}
.seg button[data-rate="ne"]::before{background:var(--red)}
.seg button[data-rate="pe"]::before{background:var(--amber)}
.seg button[data-rate="fe"]::before{background:var(--green)}
.seg button[data-rate].on::before{background:#fff}
.seg button[data-rate="na"].on{background:var(--line2);color:var(--ink)}
.seg button[data-rate="na"].on::before{background:var(--sub)}
.seg button[data-rate="ne"].on{background:var(--red);color:#fff}
.seg button[data-rate="pe"].on{background:var(--amber);color:#fff}
.seg button[data-rate="fe"].on{background:var(--green);color:#fff}

.foot .presented{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.foot .tdlogo{display:inline-flex;align-items:center}
.foot .tdlogo img{height:13px;width:auto;display:block}
.foot .aboutlink{margin-left:14px;color:var(--sub)}

@media (max-width:1000px){
  .roles{grid-template-columns:1fr}
  .page{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line2)}
}
@media (max-width:760px){
  .respgrid,.tpanel .respgrid{grid-template-columns:1fr}
  .right{margin-left:auto}
  .chap{max-width:170px;overflow:hidden}
  .chapwrap.big .chap{max-width:none}
  .chapwrap.big .chapmenu{left:0}
  .chap #chapLbl{overflow:hidden;text-overflow:ellipsis}
  .lane b{white-space:normal}
  .lane b small{display:block;margin-left:0}
  .stbl{font-size:11.5px}
  .stbl th.n{white-space:normal;line-height:1.2}
  .canvas{padding:0;background:none}
  .paper{padding:20px 16px}
  .stbl td:first-child{width:46%}
  .stbl th,.stbl td{padding:6px 3px}
  .atbl .hide-sm,.atbl .mapcol{display:none}
  .facets{width:100%}
  .fbtn{padding:6px 10px;font-size:12px}
  .fpop{position:fixed;left:16px;right:16px;top:auto;bottom:16px;max-width:none;max-height:60vh}
  .mx td.mxn{min-width:200px}
  .topnav a{padding:8px 10px}
  .atbl th:first-child,.atbl td:first-child{display:none}
  .atbl .idm{display:block;margin-bottom:2px}
  .atbl th:last-child{width:76px!important}
  .tools{flex-wrap:wrap}
  .drate tr{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-top:1px solid var(--line2)}
  .drate td{border:0;padding:0;text-align:left!important}
  .drate tr.all{padding:8px 10px;background:var(--head);border-radius:8px}
  .drate tr.all td{background:none;padding:0!important}
  .seg{flex-wrap:wrap}
  .kpis{grid-template-columns:1fr 1fr}.kpis div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line2)}
  .stbl .nacol{display:none}
  .stbl th,.stbl td{padding:6px 4px}
  .paper .pf{flex-direction:column}
  .prow .rt .pill{font-size:10.5px;padding:2px 7px}

  .bar{flex-wrap:wrap;height:auto;padding:8px 16px;gap:6px}
  .brand span{display:none}
  .topnav{order:3;width:100%;margin:0 -12px;overflow-x:auto}
  .topnav a{padding:8px 12px}
  .chapmenu{right:auto;left:-60px;width:min(300px,calc(100vw - 32px))}
  main{padding:16px}
  .route{grid-template-columns:1fr}
  .node .ln{display:none}
  .lane{grid-template-columns:1fr auto}
  .lane .bar6{grid-column:1/-1;grid-row:2}
  .prow,.phead{grid-template-columns:12px 56px minmax(0,1fr) 92px}
  .prow .sqc,.phead .sqc{display:none}
  .acts{padding-left:14px}
  .arow{grid-template-columns:1fr}
  .seg button{padding:4px 7px}
  .canvas{padding:0;background:none}.paper{padding:20px 14px}
}
@media print{
  @page{margin:14mm}
  .bar,.foot,.noprint,.rail{display:none!important}
  .page{display:block}
  .paper .tbl th{background:none}
  .stbl tr,.gaps li{break-inside:avoid}
  body,html{background:#fff}
  main{padding:0;max-width:none}
  .canvas{background:none;padding:0}.paper{box-shadow:none;padding:0;max-width:none}
}

/* ---------- map (explore.js), the home view ---------- */
main.wide{max-width:none}
.vhead2{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:16px}
.vhead2 p{margin:4px 0 0;color:var(--sub);max-width:760px}
.seg.viewseg a{font-size:12.5px;font-weight:500;padding:5px 14px;text-decoration:none;color:var(--sub);border-left:1px solid var(--line)}
.seg.viewseg a:first-child{border-left:0}
.seg.viewseg a:hover{background:var(--head);color:var(--ink)}
.seg.viewseg a.on{background:var(--ink);color:#fff}
.mapcard{overflow:visible}
.mx th.phh{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;border-bottom:1px solid var(--line2)}
.mx th.pstart,.mx td.pstart{border-left:1px solid var(--line2)}
.mx tr.mxf td{padding:12px 14px 4px;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;background:#fff;border-bottom:1px solid var(--line2)}
.mxlist{min-width:880px}
@media print{.panel4,.tip{display:none!important}}
.tools2{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;padding:12px 14px;border-bottom:1px solid var(--line2)}
.tools2 .grp{display:flex;flex-direction:column;gap:5px}
.legend3{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line2);font-size:11.5px;color:var(--sub)}
.legend3 .lgi{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11.5px;color:var(--sub);background:none;border:1px solid transparent;border-radius:999px;padding:3px 9px 3px 7px;margin-left:-7px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.legend3 .lgi:hover,.legend3 .lgi.hov{background:var(--head);border-color:var(--line);color:var(--ink)}
.legend3 .lgi.pinned{background:var(--ink);border-color:var(--ink);color:#fff}
.legend3 .lgi.pinned i{box-shadow:0 0 0 1.5px #fff}
.legend3 .lgi:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.legend3 i{width:10px;height:10px;border-radius:0;display:inline-block}
.legend3 .note3{margin-left:auto;color:var(--muted)}
.legend3 .qn{color:var(--ink2);font-weight:500}
.mapscroll{overflow-x:auto;padding:14px 14px 16px;scrollbar-width:thin}
.mx2{position:relative;--cw:40px;--gg:10px;--lw:190px;display:inline-block;min-width:100%}
.hrow,.drow{display:flex;align-items:stretch}
.hrow,.rgrp{position:relative;z-index:1}
.hlab,.rlab{flex:none;width:var(--lw)}
.grpcols{display:flex;gap:var(--gg)}
.gcol{display:flex;flex-direction:column}
.gname{display:block;text-align:left;font:inherit;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:none;border:0;border-bottom:1px solid var(--line);padding:0 2px 6px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.gname:hover{color:var(--ink)}
.cols{display:flex}
.chd{width:var(--cw);display:flex;justify-content:center;align-items:flex-end;padding-bottom:6px}
.chd button{writing-mode:vertical-rl;transform:rotate(180deg);font:inherit;font-family:var(--mono);font-size:10.5px;color:var(--sub);background:none;border:0;border-radius:5px;padding:4px 2px;cursor:pointer;white-space:nowrap}
.mx2.port .chd button{font-family:var(--font);font-size:11px;font-weight:500;color:var(--ink2)}
.chd button:hover,.chd button.lit{background:var(--ink);color:#fff}
.mx2.assocfocus .chd button,.mx2.assocfocus .rlab button{opacity:.45;transition:opacity .15s,background .15s}
.mx2.assocfocus .chd button.assoc,.mx2.assocfocus .rlab button.assoc{opacity:1;background:var(--line2);color:var(--ink)}
.phrow{display:flex;width:100%;align-items:center;gap:10px;margin:12px 0 4px;padding:0;font:inherit;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:none;border:0;cursor:pointer;text-align:left}
.phrow:hover{color:var(--ink)}
.phrow:focus-visible,.gname:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.phrow::after{content:'';flex:1;height:1px;background:var(--line2)}
.drow{margin-top:0}
.rlab{display:flex;align-items:center;padding-right:10px}
.rlab button{font:inherit;font-size:12.5px;font-weight:500;color:var(--ink2);background:none;border:0;border-radius:6px;padding:3px 6px;margin-left:-6px;cursor:pointer;text-align:left}
.mx2.port .rlab button{font-family:var(--mono);font-size:11px;font-weight:400}
.rlab button:hover,.rlab button.lit{background:var(--ink);color:#fff}
/* heatmap cells: square, touching; color is the score, the number is the action count */
.nocell{width:var(--cw);height:32px}
.tile2{width:var(--cw);height:32px;border:0;border-radius:0;padding:0;cursor:pointer;font:inherit;font-size:11px;font-weight:500;color:#9aa0ab;background:#eceef1;box-shadow:inset -1px 0 0 rgba(255,255,255,.55);transition:opacity .15s,filter .15s,box-shadow .12s}
.tile2.scored{color:rgba(22,24,29,.8)}
.tile2.scored.dk{color:#fff}
.tile2.part{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 2px,transparent 2px 6px)}
.tile2:hover{box-shadow:inset 0 0 0 2px rgba(22,24,29,.45)}
.tile2:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* highlighting: other cells stay readable, faded; matches get an inset dark ring that never overlaps a neighbor */
.mx2.focus .tile2{opacity:.28;filter:saturate(.5)}
.mx2.focus .tile2.on{opacity:1;filter:none}
.rgrp{margin:0 -10px;padding:1px 10px 6px;border-radius:10px;transition:background .15s,box-shadow .15s}
.rgrp .phrow{margin-top:10px}
.mx2.grpfocus .rgrp.on{background:rgba(22,24,29,.045)}
.gname span,.phrow span{display:inline-block;border-radius:6px;padding:2px 8px;transition:background .12s,color .12s}
.phrow span{margin-left:-8px}
.mx2.grpfocus .gcol.on .gname span,.mx2.grpfocus .rgrp.on .phrow span{background:var(--ink);color:#fff}
.panel4{position:fixed;right:0;top:0;bottom:0;width:420px;max-width:100vw;z-index:60;overflow:auto;padding:20px 22px 28px;border:0;border-left:1px solid var(--line);border-radius:0;box-shadow:-18px 0 48px rgba(22,24,29,.18);animation:fly .16s ease-out}
@keyframes fly{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel4{animation:none}}
.panel4 .x{position:absolute;right:10px;top:10px;width:28px;height:28px;border:0;border-radius:8px;background:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1}
.panel4 .x:hover{background:var(--head);color:var(--ink)}
.panel4 h2{font-size:15px;font-weight:600;line-height:1.35;margin:6px 28px 8px 0}
.panel4 p{margin:0 0 10px;color:var(--ink2)}
.panel4 .kv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line2);font-size:12.5px}
.panel4 .list button{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line2);padding:7px 0;cursor:pointer;color:var(--ink2);font:inherit;font-size:12.5px}
.panel4 .list button:hover{color:var(--ink)}
.panel4 .list .mono{color:var(--muted)}
.panel4 .list small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.panel4 .crow{padding:10px 0;border-top:1px solid var(--line2)}
.panel4 .crow .atx{display:block;width:100%;text-align:left;background:none;border:0;padding:0;margin:0 0 8px;font:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer}
.panel4 .crow .atx:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.panel4 .crow .mono{color:var(--muted)}
.panel4 .rrow{padding:8px 0;border-top:1px solid var(--line2);font-size:12.5px}
.panel4 .rrow>span{display:block;margin-bottom:6px}
.panel4 .seg.rate{display:flex;width:100%}
.panel4 .seg.rate button{flex:1;padding:5px 4px}
.ind2{margin-top:8px;font-size:12px}
.ind2 summary{cursor:pointer;color:var(--ink);font-weight:600;padding:2px 0}
.ind2 summary:hover{color:var(--ink)}
.htabs{display:flex;gap:14px;border-bottom:1px solid var(--line);margin:8px 0 0}
.htabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:6px 0;font:inherit;font-weight:500;color:var(--sub);cursor:pointer;white-space:nowrap}
.htabs button:hover{color:var(--ink)}
.htabs button.on{color:var(--ink);border-bottom-color:var(--red);cursor:default}
.indg{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--head);border:1px solid var(--line2);cursor:pointer;transition:border-color .12s,background .12s}
.indg:hover{border-color:#b9bec8;background:#fff}
.indg:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.indg.cur.ne{border-color:var(--red);background:var(--red-tint)}
.indg.cur.pe{border-color:var(--amber);background:var(--amber-tint)}
.indg.cur.fe{border-color:var(--green);background:var(--green-tint)}
.indg .chosen{float:right;font-size:11px;font-weight:600;color:var(--ink2)}
.indg ul{margin:6px 0 0;padding-left:16px;color:var(--ink2)}
.indg li{margin:3px 0;line-height:1.45}
.hint3{margin:12px 0 0;font-size:12px;color:var(--muted)}
.helpbtn{display:inline-block;margin-top:8px;font-size:12px}
.wiz{position:relative;margin-top:10px;padding:12px 12px 10px;border:1px solid var(--ink2);border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(22,24,29,.08);font-size:12.5px}
.wiz .wx{top:4px;right:4px}
.wiz.tabbed{margin-top:12px}
.wiz.tabbed .wq{margin-right:0}
.wiz .wlead{margin:4px 24px 2px 0;color:var(--sub);font-size:12px}
.wiz .wq{display:block;font-weight:500;font-size:13px;line-height:1.5;margin:6px 24px 12px 0;color:var(--ink)}
.wiz .wback{font-size:12px;margin-left:4px}
.wiz ul{margin:4px 0 10px;padding-left:16px;color:var(--ink2)}
.wiz li{margin:3px 0;line-height:1.45}
.wiz p{margin:6px 0 8px;font-size:12.5px}
.wiz .wres{margin:6px 0 2px}
.wiz .btns{gap:6px;align-items:center}
.panel4 .sect{margin:16px 0 6px}
.panel4 .btns{margin-top:12px}
.tip{position:fixed;z-index:40;pointer-events:none;max-width:360px;background:var(--ink);color:#fff;border-radius:9px;padding:8px 10px;font-size:12px;box-shadow:0 8px 24px rgba(22,24,29,.25)}
.tip .mono{color:#c3c7cf;font-size:11px}
.tip b{font-weight:500}
.tip .r{display:inline-flex;align-items:center;gap:6px;margin-top:4px;color:#e3e5ea}
.tip .r{display:flex}
.tip .r i{width:9px;height:9px;border-radius:2px;display:inline-block}
.tip ul{list-style:none;margin:8px 0 0;padding:6px 0 0;border-top:1px solid rgba(255,255,255,.15)}
.tip li{display:flex;gap:8px;align-items:baseline;padding:3px 0;color:#e3e5ea;line-height:1.35}
.tip li i{width:9px;height:9px;border-radius:2px;flex:none;transform:translateY(1px)}
@media (max-width:760px){
  .legend3 .note3{margin-left:0;width:100%}
  .panel4{left:0;width:auto;border-left:0;padding:16px 16px 28px}
  .mapscroll{padding:10px 8px 12px}
}

/* modern polish (Nov 7): lighter canvas, softer cards, track-style view switch, outlined chapter picker, search icon */
:root{--bg:#f1f2f4}
.bar{height:56px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom-color:#e3e5ea}
.brand b{font-size:14.5px;letter-spacing:-.01em}
.topnav a{font-size:13.5px}
.chap{color:var(--ink);background:#fff;border:1px solid #d9dce1;border-radius:10px;padding:7px 10px 7px 12px;font-size:13.5px;font-weight:600;box-shadow:0 1px 2px rgba(22,24,29,.05);transition:border-color .15s,box-shadow .15s}
.chap:hover{background:#fff;border-color:#b9bec8;box-shadow:0 2px 6px rgba(22,24,29,.08)}
.chap[aria-expanded="true"]{background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(22,24,29,.06)}
.chap svg.car{width:14px;height:14px;fill:none;stroke:var(--sub);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.chap[aria-expanded="true"] svg.car{transform:rotate(180deg)}
.chapwrap.big .chap{font-size:14px;padding:8px 11px 8px 14px;border-radius:10px}
.chapmenu{border-color:#e3e5ea;border-radius:12px;box-shadow:0 16px 40px rgba(22,24,29,.14);padding:6px}
.chapmenu button{border-radius:8px}
h1{font-size:24px;font-weight:650;letter-spacing:-.02em}
.vhead2{gap:14px;margin-bottom:18px}
.seg.viewseg{background:#e4e6ea;border:0;padding:3px;border-radius:10px;gap:2px}
.seg.viewseg a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:5px 12px;border:0;border-radius:8px;color:var(--sub)}
.seg.viewseg a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.seg.viewseg a:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.seg.viewseg a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(22,24,29,.14),0 0 0 .5px rgba(22,24,29,.06)}
.panel{border-color:#e3e5ea;border-radius:14px;box-shadow:0 1px 2px rgba(22,24,29,.04),0 8px 24px rgba(22,24,29,.04)}
.legend3{padding:12px 16px;gap:8px}
.legend3 .lgi{border:1px solid #e3e5ea;background:#fff;padding:4px 11px 4px 9px;margin-left:0;font-size:12px}
.legend3 .lgi:hover,.legend3 .lgi.hov{background:#f6f7f9;border-color:#c9cdd4}
.legend3 i{border-radius:2px}
.foot{background:#fff;border-top-color:#e3e5ea}
@media (max-width:760px){
  .bar{height:auto;padding:10px 16px 0;gap:8px}
  h1{font-size:21px}
}

/* chapter picker in the top-left of the menu bar (replaces the app name there) */
.chapwrap.top{align-self:center;flex:none}
.chapwrap.top .chapmenu{right:auto;left:0}
.chapwrap.top .chap{font-size:14px;padding:7px 10px 7px 12px}
@media (max-width:760px){
  .chapwrap.top{order:1}
  .chapwrap.top .chap{max-width:none}
}
.legend3 i{box-shadow:inset 0 0 0 1px rgba(22,24,29,.18)}
.legend3 .lgi.pinned,.legend3 .lgi.pinned:hover,.legend3 .lgi.pinned.hov{background:var(--ink);border-color:var(--ink);color:#fff}

/* header: the profile menu, which also holds everything that keeps results (Nov 7, merged Nov 11) */
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:4px;align-self:center}
.dd{position:relative}
/* a plain icon, no box (Anton, Nov 11): the name and saved status are in the tooltip and at the top of the menu */
.hbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;font:inherit;color:var(--sub);background:none;border:0;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.hbtn:hover,.hbtn[aria-expanded="true"]{background:#eceef1;color:var(--ink)}
.hbtn:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.hbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* saved status: the dot on the avatar turns green once ratings are stored, amber when the browser blocks storage */
.hbtn .si{position:relative;display:inline-flex}
.hbtn .sdot{display:none;position:absolute;right:-3px;bottom:-3px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px #fff}
.hbtn.ok .sdot,.hbtn.bad .sdot{display:block}
.hbtn.bad .sdot{background:var(--amber)}
.hbtn.pulse .sdot{animation:svpulse .8s ease-out}
@keyframes svpulse{0%{box-shadow:0 0 0 2px #fff,0 0 0 2px rgba(34,160,107,.6)}100%{box-shadow:0 0 0 2px #fff,0 0 0 10px rgba(34,160,107,0)}}
@media (prefers-reduced-motion:reduce){.hbtn.pulse .sdot{animation:none}}
.av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:8px;background:#eceef1;color:var(--ink2)}
.av svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.av.lg{width:36px;height:36px;border-radius:10px}
.av.lg svg{width:20px;height:20px}
.ddmenu{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:50;width:280px;max-height:calc(100vh - 80px);overflow:auto;background:#fff;border:1px solid #e3e5ea;border-radius:12px;box-shadow:0 16px 40px rgba(22,24,29,.14);padding:6px}
.ddmenu.right{left:auto;right:0;width:300px}
.ddmenu.open{display:block}
.ddmenu .cmh{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 8px 4px}
.ddmenu .sep{height:1px;background:#eceef1;margin:6px 2px}
.ddmenu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:7px 8px;cursor:pointer;font:inherit;color:var(--ink2)}
.ddmenu button:hover,.ddmenu button:focus-visible{background:#f4f5f7;color:var(--ink);outline:none}
.ddmenu button>svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--sub);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ddmenu button b{font-weight:500;font-size:13px}
.ddmenu button.on>svg:last-child{margin-left:auto;stroke:var(--red);stroke-width:2}
.ddmenu .sv{display:flex;flex-direction:column;min-width:0;flex:1}
.ddmenu .sv b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ddmenu .sv small{font-size:11.5px;color:var(--muted)}
.ddmenu .sc{font-family:var(--mono);font-size:11.5px;color:var(--sub);background:#f1f2f4;border-radius:6px;padding:2px 6px}
.ddmenu .add b{color:var(--ink)}
.ddmenu .snote{padding:4px 8px 6px;font-size:12px;color:var(--muted)}
.ddmenu .sstat{display:flex;align-items:center;gap:8px;padding:8px 8px 2px;font-size:12px;color:var(--sub)}
.ddmenu .av{width:24px;height:24px;border-radius:7px}
.ddmenu button.on .av{background:var(--red);color:#fff}
.pmh{display:flex;align-items:center;gap:10px;padding:8px 6px 10px;border-bottom:1px solid #eceef1;margin-bottom:2px}
.pmh>.dot{margin:0 4px 0 6px}
.pmh .who{display:flex;flex-direction:column;min-width:0;flex:1}
.pmh .who b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmh .who small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:8px;background:none;cursor:pointer;color:var(--sub);font-size:20px;line-height:1}
.ibtn:hover{background:#f1f2f4;color:var(--ink)}
.ibtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pmh .ibtn{width:30px!important;padding:0!important}

/* dialog */
.dlg{border:0;padding:0;border-radius:16px;width:min(520px,calc(100vw - 32px));box-shadow:0 24px 64px rgba(22,24,29,.28);color:var(--ink)}
.dlg::backdrop{background:rgba(22,24,29,.38);backdrop-filter:blur(2px)}
.dlgf{display:flex;flex-direction:column;max-height:calc(100vh - 48px)}
.dlg .dh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 6px}
.dlg h2{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em}
.dlg .db{padding:8px 20px 4px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.dlg .df{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px 18px;flex-wrap:wrap}
.dlg .btn{font-size:13px;padding:8px 14px;border-radius:9px}
.dlg .btn.ghost{background:none;border-color:transparent}
.dlg .btn.red{color:var(--red-ink)}
.dlg .btn.ghost.red:hover{background:var(--red-tint)}
.dlg .field{display:flex;flex-direction:column;gap:5px;margin:0}
.dlg .field input,.dlg .field textarea{font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid #d9dce1;border-radius:9px;background:#fff;color:var(--ink);width:100%}
.dlg .field textarea{font-size:12.5px;line-height:1.5;resize:vertical}
.dlg .field input:focus,.dlg .field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(22,24,29,.06)}
.dlg .dnote{margin:0;font-size:12.5px;color:var(--muted)}
.dlg .kpis.sm{margin:0}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;font-size:13px;padding:10px 16px;border-radius:10px;box-shadow:0 12px 32px rgba(22,24,29,.25);transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--red-ink)}

/* shared results page */
.shared{padding:18px 20px 20px;max-width:880px}
.shared .kpis{margin:0 0 14px;grid-template-columns:repeat(4,1fr)}
.shared .stbl{margin-bottom:16px}
.shared .btns{display:flex;gap:8px;flex-wrap:wrap}
.rail .btns{flex-wrap:wrap}

@media (max-width:760px){
  .hdr-r{order:1;margin-left:auto}
  .ddmenu{position:fixed;left:16px!important;right:16px!important;top:64px;width:auto!important}
}
@media print{.hdr-r,.dlg,.toast{display:none!important}}
/* flyout: action text in a cell is plain text, not a link (Anton, Nov 7) */
.panel4 .crow p.atx,.panel4 .crow p.atx:hover{cursor:default;text-decoration:none;color:var(--ink2);margin:0 0 8px}
/* List with the old Actions page folded in (Anton): search and filters on top, actions open for their detail */
.lpanel .ftokens{border-bottom:1px solid var(--line2)}
.ftokens .lexp{margin-left:auto;display:inline-flex;gap:14px}
.ftokens .lexp .linkbtn{margin:0;font-size:12px;color:var(--sub)}
.ftokens .lexp .linkbtn:hover{color:var(--red)}
.mx tr.mxa td.mxn{padding-left:22px}
.mx .aname{display:flex;align-items:flex-start;gap:6px;width:100%;font:inherit;font-size:inherit;text-align:left;color:var(--ink2);background:none;border:0;padding:0;cursor:pointer}
.mx .aname .car{flex:none;color:var(--muted);font-size:10px;line-height:1.7;transition:transform .15s}
.mx tr.mxa.open .aname .car{transform:rotate(90deg)}
.mx .aname .mono{flex:none;color:var(--muted);margin-right:0}
.mx .aname .atx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mx tr.mxa.open .aname .atx{display:block;-webkit-line-clamp:unset}
.mx .aname:hover .atx{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.mx .aname:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.mx tr.mxd td{text-align:left;padding:2px 14px 14px 48px;background:#fff}
.adet{position:sticky;left:48px;max-width:min(760px,calc(100vw - 96px));font-size:12.5px;color:var(--ink2)}
.adet .awhy{margin:0 0 8px;font-size:12px;color:var(--sub)}
.adet dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 14px;margin:0 0 10px}
.adet dt{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.adet dd{margin:0}
.adet .wrapids{display:flex;gap:5px;flex-wrap:wrap}
.adet .resp{height:18px;min-width:18px;font-size:10.5px;vertical-align:1px}
.adet .dsep{display:inline-block;width:18px}
.adet .amore{font-weight:600;color:var(--ink);text-decoration:none}
.adet .amore:hover{color:var(--red)}
.mx td.mxempty{text-align:left;padding:18px 14px;color:var(--muted)}
@media (max-width:760px){
  .ftokens .lexp{margin-left:0;width:100%}
  .adet dl{grid-template-columns:1fr;gap:2px}
  .adet dd{margin-bottom:6px}
  .mx tr.mxd td{padding-left:14px}
  .adet{left:14px;max-width:calc(100vw - 60px)}
}
/* board summary: a very small "Powered by ThreatDefence" line at the foot of the page (Anton) */
.paper .rempty{padding:64px 0 48px;text-align:center}
.paper .rempty b{display:block;font-size:15px}
.paper .rempty p{color:var(--muted);margin:6px 0 18px}
.paper .pby{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:32px;font-size:9.5px;color:var(--muted);text-decoration:none}
.paper .pby img{height:8px;width:auto;display:block}
.paper .pby:hover{color:var(--ink)}
/* rating status: a small coloured dot and plain text, no tinted pill (Anton dislikes the pastel badges) */
.pill{display:inline-flex;align-items:center;gap:7px;padding:0;border-radius:0;background:none !important;color:var(--ink2) !important;font-size:12px;font-weight:500;white-space:nowrap}
.pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--na);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pill.fe::before{background:var(--green)}
.pill.pe::before{background:var(--amber)}
.pill.ne::before{background:var(--red)}
/* top menu: the current page sits on a soft grey tab, no red underline (Anton) */
.topnav{align-items:center;gap:4px}
.topnav a{align-self:center;height:34px;padding:0 12px;border-bottom:0;margin-bottom:0;border-radius:8px;transition:background .15s,color .15s}
.topnav a:hover{background:var(--head);color:var(--ink)}
.topnav a.on{background:var(--line2);color:var(--ink);font-weight:600;border-bottom:0}
@media (max-width:760px){.topnav{padding:6px 12px}.topnav a{height:32px}}
/* List: an opened action shows ASD's indicators in place (Anton: no separate page) */
.adet{max-width:min(1040px,calc(100vw - 96px))}
.aind{margin-top:4px;padding-top:12px;border-top:1px solid var(--line2)}
.aind .lbl{display:block;margin:0 0 8px}
.aindg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.aindg b{display:block;margin:0 0 6px}
.aindg ul{margin:0;padding-left:16px;color:var(--ink2)}
.aindg li{margin:0 0 5px;line-height:1.45}
@media (max-width:900px){.aindg{grid-template-columns:1fr;gap:10px}}
/* board summary: two counts, no source version box (Anton) */
.paper .kpis{grid-template-columns:1fr 1fr}
/* list: filters first, a smaller search at the right (Anton, Nov 10); visible lines between phase groups */
.ftop .fsearch{flex:0 1 240px;margin-left:auto}
.mx.mxlist th.pstart,.mx.mxlist td.pstart{border-left:1px solid #d9dce1}
@media (max-width:760px){.ftop .fsearch{flex:1 1 100%;margin-left:0}}
/* chapter picker: smaller text and one fixed width for every chapter, so the menu beside it never moves; a separator before the menu (Anton, Nov 10) */
.chapwrap.top{display:flex;align-items:center;padding-right:14px;margin-right:2px;border-right:1px solid #e3e5ea;height:32px}
.chapwrap.top .chap{width:184px;justify-content:space-between;font-size:12.5px;font-weight:600;padding:6px 9px 6px 11px}
.chapwrap.top .chap #chapLbl{overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.chapwrap.top{border-right:0;padding-right:0;height:auto}.chapwrap.top .chap{width:auto}}
/* reports: executive summary (one page) and the full action plan, switched in the side panel (Anton) */
.repseg{display:flex;width:100%;margin:0 0 4px}
.repseg a{flex:1;text-align:center;text-decoration:none;font-size:12.5px;padding:7px 10px;color:var(--sub)}
.repseg a.on{background:var(--ink);color:#fff}
/* both reports rank gaps the same way: Now, Next, Later. Shared visuals first (Anton: short, prioritised, with visuals) */
.paper .rtop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:16px 0 4px}
.paper .rtop .lbl{display:block;margin-bottom:8px}
.sbar{display:flex;gap:1px;height:8px;border-radius:4px;overflow:hidden;background:var(--line2)}
.sbar i{display:block;font-style:normal;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sbar.big{height:22px;border-radius:5px}
.sbar.big i{display:flex;align-items:center;justify-content:center;min-width:17px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:#fff}
.sbar i.fe{background:var(--green)}.sbar i.ne{background:var(--red)}
.sbar i.pe{background:var(--amber);color:var(--ink)}.sbar i.na{background:var(--na);color:var(--ink)}
.sleg{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:9px;font-size:11.5px;color:var(--sub)}
.sleg span{display:inline-flex;align-items:center;gap:6px}
.sleg i{width:8px;height:8px;border-radius:50%;background:var(--na);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sleg i.fe{background:var(--green)}.sleg i.pe{background:var(--amber)}.sleg i.ne{background:var(--red)}
.sleg b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* gaps by band: a square in the band's shade, its name, the count, and what puts a gap there */
.pband{width:350px;max-width:100%}
.paper .rtop .pband .lbl{display:flex;justify-content:space-between;gap:12px}
.pband .lbl b{font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.pband ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pband li{display:grid;grid-template-columns:9px 40px 26px minmax(0,1fr);gap:0 9px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.pband li > i{align-self:start;margin-top:5px}
.pband li > b{font-weight:600}
.pband .n{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.pband .w{font-size:11.5px;line-height:1.35;color:var(--sub)}
.pband li.z .n{font-weight:500;color:var(--muted)}
.pband i.b0,.pch i.b0,.prio .pb i.b0{background:var(--ink);color:#fff}
.pband i.b1,.pch i.b1,.prio .pb i.b1{background:#7d8491;color:#fff}
.pband i.b2,.pch i.b2,.prio .pb i.b2{background:#d3d7de;color:var(--ink)}
.pband i,.pch i,.prio .pb i{flex:none;width:9px;height:9px;border-radius:2px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* executive summary: score ring beside the two figures, a stacked bar a domain, priorities in three columns */
.xscore{display:flex;align-items:center;gap:28px}
.xscore .xr{display:flex;flex-direction:column;align-items:center;gap:6px}
.paper .rtop .xr .lbl{margin:0}
.ring{display:block;width:92px;height:92px}
.ring circle{fill:none;stroke-width:7}
.ring .t{stroke:var(--line2)}
.ring .v{stroke:var(--ink);stroke-linecap:round}
.ring text{font-family:inherit;font-size:17px;font-weight:600;fill:var(--ink)}
.xk{display:grid;gap:12px}
.paper .rtop .xk .lbl{margin-bottom:1px}
.xk b{display:block;font-size:15px;font-weight:500}
.paper.exec .sleg{margin:0 0 2px}
.dbars .dbg{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 3px}
.dbr{display:grid;grid-template-columns:190px minmax(0,1fr) 46px;gap:14px;align-items:center;padding:3px 0}
.dbr .dn{font-size:12.5px;color:var(--ink2)}
.dbr .sbar.big{height:18px}
.dbr b{text-align:right;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:10px}
.pch{display:flex;align-items:center;gap:7px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.pch b{font-size:13px;font-weight:600}
.pch span{margin-left:auto;font-size:11px;color:var(--muted)}
.pcol ul{list-style:none;margin:0;padding:0}
.pcol li{position:relative;padding:6px 0 6px 15px;border-bottom:1px solid var(--line2);font-size:12px;line-height:1.35;color:var(--ink2)}
.pcol li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:var(--amber);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pcol li.ne::before{background:var(--red)}
.pcol li .mono{font-size:10.5px;color:var(--muted)}
.pcol li small{display:block;font-size:10.5px;color:var(--muted)}
.pcol p.muted{margin:8px 0 0;font-size:12px}
/* action plan: one ranked table, the band as a group row, then what is still unrated */
.dkey{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 18px;margin:10px 0 2px;font-size:11px;color:var(--sub)}
.dkey b{margin-right:6px;font-weight:600;color:var(--ink)}
.paper.plan .prio{width:100%;font-size:12px}
.paper.plan .prio th{font-size:10px;background:none;vertical-align:bottom}
.paper.plan .prio td{vertical-align:top;line-height:1.4;color:var(--ink2)}
.prio .pk{width:30px;text-align:right;padding-left:0;color:var(--muted);font-variant-numeric:tabular-nums}
.prio .pa .mono{font-size:10.5px;color:var(--muted)}
.prio .pa small{display:block;margin-top:2px;font-size:10.5px;color:var(--muted)}
.prio .ps{width:172px}
.paper.plan .prio .ps .pill{display:flex;align-items:baseline;white-space:normal;font-size:11.5px;line-height:1.35}
.prio .ps .pill + .pill{margin-top:2px}
.prio .ps .pill::before{position:relative;top:-1px}
.prio .pd{width:1%;white-space:nowrap;padding-right:0}
.paper.plan .prio td.pd{padding-top:10px}
.paper.plan .prio tr.pb td{padding:16px 0 6px;border-bottom:1px solid var(--ink);color:var(--ink)}
.prio .pb i{display:inline-block;margin-right:7px}
.prio .pb b{font-size:13px;font-weight:600}
.prio .pb span{margin-left:10px;font-size:11px;color:var(--muted)}
.dstrip{display:inline-flex;gap:5px;vertical-align:top}
.dstrip > span{display:inline-flex;gap:2px}
.dstrip i{width:10px;height:10px;border-radius:2px;background:var(--na);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.dstrip i.fe{background:var(--green)}.dstrip i.pe{background:var(--amber)}.dstrip i.ne{background:var(--red)}
.dstrip i.off{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.dstrip.key > span{display:block;text-align:center;font-size:10px;font-weight:600;color:var(--muted)}
.tass > div{display:grid;grid-template-columns:86px minmax(0,1fr) 170px 84px;gap:14px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.tass .tp{font-size:11px;color:var(--muted)}
.tass .tbar{display:block;height:6px;border-radius:3px;background:var(--line2);overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.tass .tbar i{display:block;height:100%;background:var(--ink);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.tass .tc{text-align:right;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.tass .tc b{font-weight:600;color:var(--ink)}
@media print{
  .prio tr,.tass > div,.pcol li,.dbr{break-inside:avoid}
  .prio tr.pb,.paper h2.ph{break-after:avoid}
  /* the executive summary keeps to one A4 page */
  .paper.exec h1{font-size:19px;margin-top:0}
  .paper.exec .meta{margin-bottom:4px}
  .paper.exec .rtop{padding:10px 0 0}
  .paper.exec .ring{width:80px;height:80px}
  .paper.exec h2.ph{margin-top:14px;margin-bottom:6px}
  .paper.exec .dbars .dbg{margin:7px 0 2px}
  .paper.exec .dbr{padding:2px 0}
  .paper.exec .dbr .sbar.big{height:16px}
  .paper.exec .pcols{margin-top:6px}
  .paper.exec .pcol li{padding:4px 0 4px 15px;font-size:11.5px}
  .paper.exec .pcol li::before{top:9px}
  .paper.exec .pby{margin-top:14px}
}
@media (max-width:760px){
  .paper .rtop{grid-template-columns:minmax(0,1fr);gap:20px}
  .pband{width:auto}
  .dbr{grid-template-columns:minmax(0,1fr) 44px;gap:3px 10px}
  .dbr .dn{grid-column:1/-1}
  .pcols{grid-template-columns:minmax(0,1fr);gap:16px}
  .paper.plan .prio thead,.dkey{display:none}
  .paper.plan .prio,.paper.plan .prio tbody{display:block}
  .paper.plan .prio tr{display:grid;grid-template-columns:26px minmax(0,1fr);padding:9px 0;border-bottom:1px solid var(--line2)}
  .paper.plan .prio td{display:block;width:auto;padding:0;border:0}
  .paper.plan .prio td.pk{text-align:left}
  .paper.plan .prio td.ps,.paper.plan .prio td.pd{grid-column:2;padding-top:5px}
  .paper.plan .prio tr.pb{display:block;padding:14px 0 6px;border-bottom:1px solid var(--ink)}
  .paper.plan .prio tr.pb td{padding:0;border:0}
  .tass > div{grid-template-columns:minmax(0,1fr) 84px;gap:3px 10px}
  .tass .tp{grid-column:1/-1}.tass .tbar{grid-column:1;grid-row:3}.tass .tc{grid-row:2/4;grid-column:2;align-self:center}
}
.repseg a{white-space:nowrap;font-size:12px;padding:7px 8px}
/* a set filter: its pill ends in an x that clears it */
.facet{position:relative;display:inline-flex}
.facet .fbtn.on{padding-right:30px}
.facet .fx{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0}
.facet .fx:hover{background:rgba(255,255,255,.34)}
.facet .fx:focus-visible{outline:2px solid var(--red);outline-offset:1px}
/* a small home button before the chapter picker, back to the home page (Anton) */
.homebtn{align-self:center;flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--sub);transition:background .15s,color .15s,border-color .15s}
.homebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.homebtn:hover{background:var(--head);color:var(--ink);border-color:#b9bec8}
.homebtn:focus-visible{outline:2px solid var(--red);outline-offset:1px}
@media print{.homebtn{display:none}}
/* matrix: each function heading carries its line icon, as in the explainer (Anton) */
.gname .fni,.phrow .fni{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-right:6px;vertical-align:-2px}
.gname{letter-spacing:.04em;display:flex;align-items:center;font-weight:700}
.gname .fni{width:13px;height:13px;margin:0 1px 0 2px}
.gname span{padding:2px 4px;overflow:hidden;text-overflow:ellipsis}
/* a one-column function (Recover in OT) shows its icon alone; the name is in the tooltip */
.gname.g1{justify-content:center}.gname.g1 span{display:none}.gname.g1 .fni{margin:0}
/* a narrow function group keeps its full name and drops the icon instead of cutting the name */
.gname.gn .fni{display:none}.gname.gn span{padding:2px 1px}
/* home: a plain icon, no box, then a thin separator before the chapter picker (Anton) */
.homebtn{width:auto;height:32px;padding:0 14px 0 2px;margin-right:12px;border:0;border-right:1px solid #e3e5ea;border-radius:0;background:none;color:var(--sub)}
.homebtn svg{width:18px;height:18px}
.homebtn:hover{background:none;color:var(--ink);border-color:#e3e5ea}
.panel4 h2 .hid{font-size:.82em;font-weight:500;color:var(--muted);margin-right:4px}
/* home icon: tighter gap before the chapter picker (Anton) */
.homebtn{padding:0 10px 0 2px;margin-right:8px}
/* Essential Eight view: maturity levels on the left, suggested ratings on the right (Anton) */
.e8grid{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:16px;align-items:start}
.e8grid .panel{margin:0}
.e8h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;padding:12px 14px;border-bottom:1px solid var(--line2)}
.e8all{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.e8all .linkbtn{font-size:12px}
.e8set{font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);cursor:pointer}
.e8row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line2)}
.e8row:last-child{border-bottom:0}
.e8n{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--ink);min-width:0}
.e8n svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--sub);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.e8seg{flex:none;margin:0}
.e8seg button{font-size:11.5px;padding:5px 8px}
.e8empty{padding:18px 14px;margin:0}
.e8sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line2)}
.e8sum div{padding:12px 14px;border-left:1px solid var(--line2)}
.e8sum div:first-child{border-left:0}
.e8sum b{display:block;font-size:20px;font-weight:600;line-height:1.2}
.e8sum span{font-size:12px;color:var(--muted)}
.e8sum .pill{font-size:12px}
.e8apply{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line2)}
.e8apply .btn{font-size:13px;padding:8px 14px}
.e8apply .btn[disabled]{opacity:.45;cursor:default}
.e8apply .muted{font-size:12px}
.e8tbl{width:100%;font-size:12.5px}
.e8tbl td{vertical-align:top}
.e8tbl td:first-child{color:var(--ink2)}
.e8tbl .mono{color:var(--muted);font-size:11.5px}
.e8tbl .e8st{white-space:nowrap;font-size:12px}
.e8tbl .e8st small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
@media (max-width:1000px){.e8grid{grid-template-columns:1fr}}
@media (max-width:640px){.e8row{flex-direction:column;align-items:flex-start}.e8sum{grid-template-columns:1fr 1fr}.e8sum div:nth-child(3){border-left:0}.e8tbl .e8st{white-space:normal}}
/* Essential Eight match table: each action's reason, the partial and full level per strategy, your level, ASD's requirements on open */
.e8tbl .aname{display:flex;gap:6px;align-items:flex-start;width:100%;text-align:left;font:inherit;font-size:12.5px;color:var(--ink2);background:none;border:0;padding:0;cursor:pointer}
.e8tbl .aname .car{flex:none;color:var(--muted);font-size:10px;line-height:1.7;transition:transform .15s}
.e8tbl tr.open .aname .car{transform:rotate(90deg)}
.e8tbl .e8note{display:block;margin-top:4px;font-size:11.5px;color:var(--muted);line-height:1.45}
.e8tbl .e8s{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;margin:0 0 3px}
.e8tbl .e8s em{font-style:normal;color:var(--muted);font-size:11px}
.e8tbl .e8s.off span{color:var(--muted)}
.e8tbl .e8you{font-style:normal;font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--line2);color:var(--ink2)}
.e8tbl .e8you.fe{background:var(--green-tint);color:var(--green-ink)}.e8tbl .e8you.pe{background:var(--amber-tint);color:var(--amber-ink)}.e8tbl .e8you.ne{background:var(--red-tint);color:var(--red-ink)}
.e8tbl small{display:block;color:var(--muted);font-size:11px}
.e8tbl tr.e8req td{background:#fff;padding:4px 14px 14px 30px}
.e8rq{margin:0 0 10px}
.e8rq > b{display:block;font-size:12px;margin:0 0 4px}
.e8lvl{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;font-size:12px;color:var(--ink2)}
.e8lvl span{font-size:11px;font-weight:600;color:var(--muted);padding-top:1px}
.e8lvl ul{margin:0 0 6px;padding-left:16px}
.e8lvl li{margin:0 0 3px;line-height:1.4}
.e8tbl .e8you,.e8tbl .e8you.fe,.e8tbl .e8you.pe,.e8tbl .e8you.ne{display:inline-flex;align-items:center;gap:4px;padding:0;border-radius:0;background:none;color:var(--ink2)}
.e8tbl .e8you::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--na)}
.e8tbl .e8you.fe::before{background:var(--green)}.e8tbl .e8you.pe::before{background:var(--amber)}.e8tbl .e8you.ne::before{background:var(--red)}
/* List: actions sit clearly under their principle (Anton) */
.mx tr.mxa td.mxn{padding-left:46px;position:relative}
.mx tr.mxa td.mxn::before{content:"";position:absolute;left:27px;top:0;bottom:0;border-left:1px solid #dfe2e7}
.mx tr.mxd td{padding-left:72px;position:relative}
.mx tr.mxd td::before{content:"";position:absolute;left:27px;top:0;bottom:0;border-left:1px solid #dfe2e7}
.adet{left:72px}
@media (max-width:760px){.mx tr.mxa td.mxn{padding-left:30px}.mx tr.mxa td.mxn::before,.mx tr.mxd td::before{left:16px}.mx tr.mxd td{padding-left:30px}.adet{left:30px}}
/* Ess 8 levels: the chosen level takes the rating colour it leads to (Anton) */
.e8seg button.on.lv0{background:var(--red);color:#fff}
.e8seg button.on.lv1{background:var(--amber);color:#16181d}
.e8seg button.on.lv2{background:#5cb67f;color:#fff}
.e8seg button.on.lv3{background:var(--green);color:#fff}
.e8seg button.on.lvx{background:var(--line2);color:var(--ink2)}
/* matrix legend: Reset all sits at the right end */
.legend3 .lreset{margin-left:auto;font-size:12px;color:var(--sub)}
.legend3 .lreset:hover,.ftokens .lexp .linkbtn[data-act="reset-all"]:hover{color:var(--red)}
/* Ess 8: ML2 green, ML3 purple (Anton) */
.e8seg button.on.lv2{background:var(--green);color:#fff}
.e8seg button.on.lv3{background:#6d4fc2;color:#fff}
/* the short line under the Essentials tabs */
.vsub{margin:-6px 0 16px;font-size:13.5px;color:var(--sub);max-width:760px}
/* List: no guide line beside actions; the indent alone shows they sit under the principle (Anton) */
.mx tr.mxa td.mxn::before,.mx tr.mxd td::before{display:none}

/* Ess 8: strategies expand into their controls; ML buttons are a quick fill (Anton: "map each") */
.e8row .e8n{min-width:0;flex:1 1 auto;background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left}
.e8row .e8n .car{flex:none;color:var(--muted);font-size:10px;width:8px;transition:transform .15s}
.e8row.open .e8n .car{transform:rotate(90deg)}
.e8row .e8n small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:1px}
.e8row.open{border-bottom:0}
.e8cl{padding:2px 14px 12px 32px;border-bottom:1px solid var(--line2)}
.e8g{margin:0 0 6px}
.e8gl{display:block;font-size:11px;font-weight:600;color:var(--muted);margin:6px 0 2px}
.e8c{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;background:none;border:0;padding:4px 0;font:inherit;font-size:12.5px;line-height:1.45;color:var(--ink2);cursor:pointer}
.e8c .bx{flex:none;width:14px;height:14px;margin-top:2px;border:1.5px solid #b9bec7;border-radius:3px;background:#fff;position:relative}
.e8c.on .bx{background:var(--ink);border-color:var(--ink)}
.e8c.on .bx::after{content:"";position:absolute;left:3.5px;top:0.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.e8c:hover .bx{border-color:var(--ink2)}
.e8c .mono{font-size:11px;color:var(--muted)}
.e8c .e8need{font-style:normal;font-size:11px;color:var(--muted);margin-left:4px}
.e8tbl .e8st b{display:block;font-size:12.5px;font-weight:600}
.e8tbl .e8st small{white-space:normal;max-width:190px}
.e8rq > b .muted{font-weight:400;font-size:11px;margin-left:4px}

/* matrix, soft tiles (Anton): rounded tiles with a gap, in the list's solid red, amber and green by score, hollow until rated */
.tile2{width:calc(var(--cw) - 3px);height:29px;margin:1.5px;border-radius:6px;background:none;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2)}
.tile2.scored{box-shadow:none}
.tile2.s-ne,.tile2.s-fe{color:#fff}.tile2.s-pe{color:#3a2503}
.tile2.part{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.26) 0 2px,transparent 2px 6px)}
.tile2:hover{box-shadow:inset 0 0 0 2px rgba(22,24,29,.45)}
.legend3 i{border-radius:3px}
/* matrix on wide screens: each domain's score at the end of its row */
.mx2:not(.port) .hrow{align-items:flex-end}
.shd{flex:none;width:84px;margin-left:12px}
.shd span{display:block;font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:2px 2px 8px;margin-bottom:6px}
.rsc{flex:none;width:84px;margin-left:12px;display:flex;align-items:center;gap:6px;font-size:12px}
.rsc > i{flex:none;width:40px;height:6px;border-radius:3px;background:#eceef1;overflow:hidden}
.rsc > i > i{display:block;height:100%;border-radius:3px;background:var(--ink)}
.rsc b{font-weight:500;color:var(--ink2);font-variant-numeric:tabular-nums}

/* Ess 8, an easy start (Anton): set every strategy at once, see where each strategy lands in Essentials,
   one coverage bar counted in actions, and the table grouped by principle */
.e8row{flex-wrap:wrap;gap:4px 12px}
.e8row .e8n{flex:1 1 0}
.e8to{flex:1 0 100%;min-width:0;padding:0 0 0 46px;background:none;border:0;font:inherit;font-size:11.5px;line-height:1.45;color:var(--muted);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e8to:hover b,.e8to.on b{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.e8row.sel{background:#f6f7f9}
.e8flt{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line2);font-size:12.5px}
.e8flt svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--sub);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.e8flt b{font-weight:600}
.e8flt span{color:var(--muted);font-size:12px}
.e8flt .linkbtn{margin-left:auto;font-size:12px}
.e8to b{font-weight:500;color:var(--ink2);margin-right:6px}
.e8cov{padding:14px;border-bottom:1px solid var(--line2)}
.e8cv{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0 0 10px}
.e8cv b{font-size:20px;font-weight:600;line-height:1.2}
.e8cv span{font-size:12.5px;color:var(--sub)}
.e8bar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}
.e8bar i{display:block;flex:0 0 auto;min-width:4px}
.e8bar .fe{background:var(--green)}.e8bar .pe{background:var(--amber)}.e8bar .ne{background:var(--red)}.e8bar .na{background:#dfe2e7}
.e8leg{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px}
.e8leg span{display:inline-flex;align-items:center;gap:7px}
.e8leg b{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.e8apply .e8k{font-size:12px;color:var(--ink2)}
.e8apply .e8go{margin-left:auto;font-size:12.5px}
.e8tbl tr.grp td{background:var(--head);padding:7px 12px;font-size:12px;font-weight:600;color:var(--ink)}
.e8tbl tr.grp .mono{font-weight:500;margin-right:8px}
.e8tbl tr.e8r:not(.open) .e8at{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.e8tbl th:nth-child(2){width:286px}
@media (max-width:1360px){.e8tbl th:nth-child(2){width:236px}}
.e8sx{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:12px;line-height:1.35;color:var(--muted)}
.e8sx:last-child{margin-bottom:0}
.e8sx svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.e8sx em{margin-left:auto;padding-left:8px;font-style:normal;font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.e8sx.set{color:var(--ink2)}
.e8tbl .e8cvr{white-space:nowrap;font-size:12px;color:var(--sub)}
.e8why{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--sub)}
.e8oa{display:inline-block;font-size:12px}
@media (max-width:640px){.e8row{gap:8px 12px}.e8row .e8n{flex:0 0 auto}.e8tbl th:nth-child(2){width:auto}.e8tbl th:nth-child(3),.e8tbl .e8cvr{display:none}.e8to{white-space:normal;padding-left:0}.e8apply .e8go{margin-left:0}}
/* Ess 8 table on a phone: each action stacks (action, its strategies, the suggested rating) */
@media (max-width:640px){
.e8tbl thead{display:none}
.e8tbl,.e8tbl tbody,.e8tbl tr,.e8tbl td{display:block}
.e8tbl tr.e8r{padding:8px 0;border-bottom:1px solid var(--line2)}
.e8tbl tr.e8r td{border:0;padding:3px 12px 3px 28px}
.e8tbl tr.e8r td:first-child{padding-left:12px}
.e8tbl tr.e8r td.e8cvr{display:none}
.e8tbl tr.e8req td{padding-left:12px}
.e8sx em{margin-left:0}
.e8sx > span{flex:1 1 auto}
}
/* Ess 8 between phone and wide desktop: the table keeps room for the action text */
@media (max-width:1360px){.e8tbl th:nth-child(3),.e8tbl .e8cvr{display:none}}
@media (max-width:1240px){.e8grid{grid-template-columns:1fr}}
@media (min-width:641px) and (max-width:1240px){.e8tbl th:nth-child(2){width:286px}}
/* Ess 8 Apply row: actions suggested, the ratings that makes across domains, the ones already rated; the note sits on its own line */
.e8apply .e8k{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:12.5px;color:var(--sub)}
.e8apply .e8k > span + span::before{content:"\00b7";margin:0 9px;color:var(--muted)}
.e8apply .e8k b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.e8apply .muted{flex:1 0 100%}
@media (max-width:640px){
  .e8apply .e8k{flex:1 0 100%;flex-direction:column;align-items:flex-start;gap:2px}
  .e8apply .e8k > span + span::before{content:none}
}

/* Explainer is a web walkthrough, not a part of the app: a separator before it and a link with a play mark, no tab (Anton) */
.topnav .navsep{align-self:center;flex:none;width:1px;height:20px;margin:0 8px 0 6px;background:#e3e5ea}
.topnav a.tour{gap:7px;padding:0 8px;font-weight:500;color:var(--sub)}
.topnav a.tour svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.topnav a.tour svg .pl{fill:currentColor;stroke:none}
.topnav a.tour svg .go{width:11px;height:11px}
.topnav a.tour:hover{background:none;color:var(--red)}
/* the report page narrows beside the side panel well before phone width, so the top visuals stack on the page's own width */
.paper{container-type:inline-size}
.xk .lbl,.xr .lbl{white-space:nowrap}
@container (max-width:640px){
  .paper .rtop{grid-template-columns:minmax(0,1fr);gap:20px}
  .pband{width:auto}
  .prio .ps{width:132px}
}

/* on a phone the list stacks: each action's text takes the full width with its ratings in a row underneath, so nothing scrolls sideways */
@media (max-width:760px){
  .tblwrap.listwrap{overflow:visible}
  .mx.mxlist{display:block;min-width:0}
  .mxlist thead,.mxlist tbody{display:block}
  .mxlist tr{display:flex;flex-wrap:wrap}
  /* a 1px basis, not 0, so the cells wrap to the line under the full-width name */
  .mxlist th,.mxlist td{flex:1 1 1px;min-width:0}
  .mxlist thead th:not(.mxh),.mxlist tr.mxp td:not(.mxn),.mxlist tr.mxa td:not(.mxn){padding-left:0;padding-right:0}
  .mxlist th[colspan="2"]{flex:2 1 2px}.mxlist th[colspan="3"]{flex:3 1 3px}.mxlist th[colspan="4"]{flex:4 1 4px}
  .mxlist th.mxh,.mxlist td.mxn,.mxlist tr.mxf td,.mxlist tr.mxd td,.mxlist td.mxempty{flex:0 0 100%}
  .mxlist thead tr:first-child th.mxh{padding-bottom:4px;border-bottom:0}
  .mxlist tr.scorerow th.mxh{border-bottom:0;padding-bottom:0}
  .mxlist tr.mxp td.mxn,.mxlist tr.mxa td.mxn{border-bottom:0;padding-bottom:2px;min-width:0}
  .mxlist tr.mxp td:not(.mxn),.mxlist tr.mxa td:not(.mxn){padding-top:4px;padding-bottom:9px}
  /* the action's ID sits on its own line, so long IDs leave the text its full width */
  .mxlist .aname{flex-wrap:wrap}
  .mxlist .aname .atx{display:block;-webkit-line-clamp:unset;flex:0 0 100%;padding-left:14px}
  /* domain names read upwards so every column fits */
  .mxlist thead tr:nth-child(2) th{display:flex;justify-content:center;align-items:flex-end;padding:8px 0}
  .mxlist thead tr:nth-child(2) th a{writing-mode:vertical-rl;transform:rotate(180deg)}
}