:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --border:#2a3240;
  --text:#e6edf3; --muted:#8b949e; --accent:#4f8cff; --good:#3fb950;
  --bad:#f85149; --warn:#d29922; --chip:#21262d;
  /* themeable pieces that used to be hardcoded */
  --code-bg:#0a0e14; --code-text:#c9d1d9;
  --code-border:var(--border); --code-link:var(--accent);
  /* mermaid renders its own light/dark palette, so its box tracks the theme, not the code box */
  --diagram-bg:var(--code-bg);
  --bubble-right-bg:#1e3a5f; --bubble-right-border:#2b5488;
  --btn-text:#fff;
}
/* ── Minimalist Dark: black & white, thin borders, no shadow/gradient ── */
:root[data-theme="min-dark"]{
  --bg:#000000; --panel:#0c0c0c; --panel2:#151515; --border:#2c2c2c;
  --text:#f0f0f0; --muted:#8c8c8c; --accent:#f0f0f0; --good:#3fb950;
  --bad:#f85149; --warn:#d29922; --chip:#161616;
  --code-bg:#0c0c0c; --code-text:#e0e0e0;
  --bubble-right-bg:#1c1c1c; --bubble-right-border:#3a3a3a;
  --btn-text:#000;
}
/* ── Minimalist Light: white & black, thin borders, no shadow/gradient ── */
:root[data-theme="min-light"]{
  --bg:#ffffff; --panel:#fafafa; --panel2:#f2f2f2; --border:#dcdcdc;
  --text:#111111; --muted:#6b6b6b; --accent:#111111; --good:#1a7f37;
  --bad:#cf222e; --warn:#9a6700; --chip:#f0f0f0;
  /* highlight.js ships the github-dark palette for every theme, so keep code on a
     dark inset here too — light-on-light tokens were unreadable. #0d1117 is the
     exact background github-dark expects. */
  --code-bg:#0d1117; --code-text:#c9d1d9;
  --code-border:#30363d; --code-link:#79b8ff;
  --diagram-bg:#f5f5f5;
  --bubble-right-bg:#eaeaea; --bubble-right-border:#cfcfcf;
  --btn-text:#ffffff;
}
/* Tool-call commands are highlighted in place on a light chip, where the
   github-dark token colours wash out; fall back to the chip's own text colour. */
:root[data-theme="min-light"] .tcmd [class^="hljs-"]{color:inherit}
/* Minimalist themes: drop the glowing live-dot shadow to honour "no shadow". */
:root[data-theme^="min-"] .dot.live{animation:none;box-shadow:none}
/* Minimalist themes: square corners; keep circular avatars/dots round. */
:root[data-theme^="min-"] *{border-radius:0}
:root[data-theme^="min-"] .aav,
:root[data-theme^="min-"] .av,
:root[data-theme^="min-"] .mini,
:root[data-theme^="min-"] .toolav,
:root[data-theme^="min-"] .dot,
:root[data-theme^="min-"] .typing .d{border-radius:50%}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);height:100vh;overflow:hidden}
.app{display:grid;grid-template-columns:320px 1fr;height:100vh}
/* Sidebar */
.side{border-right:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.brand{padding:16px;font-weight:700;font-size:18px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center}
.btn{background:var(--accent);color:var(--btn-text);border:0;border-radius:8px;padding:8px 12px;
  font-size:13px;cursor:pointer;font-weight:600}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* The 1px border would otherwise make every gray button 2px taller and 2px wider
   than the accent buttons they sit next to (top bar, wizard footer). Shrink the
   padding by exactly the border so both variants occupy an identical box. */
.btn.gray{background:var(--chip);color:var(--text);border:1px solid var(--border);
  padding:7px 11px}
.btn.bad{background:var(--bad)}
.btn.good{background:var(--good)}
.sidescroll{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column}
.sechdr{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  padding:12px 14px 6px;font-weight:700}
.themebox{padding:2px 12px 10px;border-bottom:1px solid var(--border)}
.themebox select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:7px 9px;font-size:12.5px;cursor:pointer}
.themebox select:focus{outline:none;border-color:var(--accent)}
/* Alert-cue toggle + the three manual triggers under it */
.alertrow{display:flex;gap:8px;align-items:center;font-size:12.5px;cursor:pointer;user-select:none}
.alertrow input{flex:0 0 auto;cursor:pointer}
.alerttest{display:flex;gap:6px;margin-top:8px}
.alerttest .tbtn{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--muted);
  border-radius:6px;padding:4px 0;font:11px inherit;cursor:pointer}
.alerttest .tbtn:hover{color:var(--text);border-color:var(--accent)}
/* Brand doubles as the "home" link back to the engagement list */
.brandlink{color:inherit;text-decoration:none}
.brandlink:hover{color:var(--accent)}
/* Shared header row: page content on the left, signed-in identity pinned right.
   `topbar` owns the bar chrome (padding / border / background) so the per-page
   headers inside it are plain flex rows. */
.topbar{display:flex;align-items:center;gap:12px;padding:11px 18px;
  border-bottom:1px solid var(--border);background:var(--panel)}
.topslot{flex:1;min-width:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.acct{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.acctname{font-size:12.5px;color:var(--muted);max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Engagements page (/) — header row + scrollable card grid */
.pagehead{flex:1;min-width:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pagehead h2{margin:0;font-size:17px}
.pagehead .spacer{flex:1}
.pagecount{font-size:12px;color:var(--muted)}
/* Client-side filter bar above the grid */
.filterbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:10px 20px;border-bottom:1px solid var(--border);background:var(--panel2,var(--panel))}
.filterbar .fld{display:flex;flex-direction:column;gap:3px;min-width:0}
.filterbar .fld.grow{flex:1 1 200px}
.filterbar .fld>span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700}
.finput,.fsel{background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:7px;padding:6px 9px;font:12.5px inherit;min-width:0}
.finput:focus,.fsel:focus{outline:none;border-color:var(--accent)}
.fsel{cursor:pointer}
.filterbar .fclear{padding:6px 12px;align-self:flex-end}
.filterbar .fclear:disabled{opacity:.4;cursor:not-allowed}
.pagebody{flex:1;min-height:0;overflow-y:auto;padding:18px 20px}
.enggrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.engcard{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:13px 15px;cursor:pointer;transition:border-color .12s,transform .12s;
  display:flex;flex-direction:column;gap:7px}
.engcard:hover{border-color:var(--accent);transform:translateY(-1px)}
/* A running engagement should be findable at a glance in a long grid. */
.engcard.live{border-left:3px solid var(--good)}
.engcard .ecrow{display:flex;align-items:center;gap:7px;min-width:0}
.engcard .ecname{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:0 1 auto;min-width:0}
.engcard .badge.model{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.engcard .del{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;
  opacity:0;transition:opacity .12s;padding:2px 4px;border-radius:6px;flex:0 0 auto;margin-left:auto}
.engcard:hover .del{opacity:1}
.engcard .del:hover{color:var(--bad);background:rgba(248,81,73,.12)}
.engcard .ecstat{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.engcard .ecphase{color:var(--text)}
.engcard .ecmeta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.engcard .ecmt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Back arrow in the engagement (log) page header */
.backlink{color:var(--muted);text-decoration:none;font-size:18px;line-height:1;
  padding:2px 6px;border-radius:6px;border:1px solid var(--border)}
.backlink:hover{color:var(--text);border-color:var(--accent)}
/* Sign-in / register page */
.authbody{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:var(--bg);color:var(--text)}
.authwrap{width:100%;max-width:400px;padding:24px}
.authcard{background:var(--panel,var(--bg));border:1px solid var(--border);
  border-radius:14px;padding:28px 26px 22px}
.authbrand{font-size:19px;font-weight:600;letter-spacing:.2px}
.authsub{color:var(--muted);font-size:13px;margin:4px 0 18px}
.authlabel{display:block;font-size:12.5px;font-weight:600;margin:14px 0 6px}
.authinput{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:9px 11px;font:13px inherit}
.authinput:focus{outline:none;border-color:var(--accent)}
.authhint{color:var(--muted);font-size:11.5px;margin:-2px 0 6px}
.authbtn{width:100%;margin-top:18px;justify-content:center}
.autherr{background:#f8514922;border:1px solid #f8514966;color:var(--text);
  border-radius:8px;padding:9px 11px;font-size:12.5px;margin-bottom:4px}
.authnote{background:#d2992222;border:1px solid #d2992266;border-radius:8px;
  padding:9px 11px;font-size:12.5px;margin-bottom:4px}
.authalt{margin-top:16px;font-size:12.5px;color:var(--muted);text-align:center}
.authalt a,.authnote a{color:var(--accent);text-decoration:none}
.authalt a:hover,.authnote a:hover{text-decoration:underline}
.authfoot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  color:var(--muted);font-size:11.5px;line-height:1.5}
/* VPN: sidebar state pill + the manage dialog */
.tbtn{background:var(--bg);border:1px solid var(--border);color:var(--muted);
  border-radius:6px;padding:5px 0;font:11px inherit;cursor:pointer}
.tbtn:hover{color:var(--text);border-color:var(--accent)}
.vpnrow{display:flex;gap:8px;align-items:center;font-size:12.5px;min-width:0}
.vpndot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.45}
.vpndot.on{background:#3fb950;opacity:1;box-shadow:0 0 6px #3fb95088}
.vpndot.pending{background:#d29922;opacity:1}
.vpntext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.vpnstatus{border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:12.5px;
  color:var(--muted);background:var(--bg);white-space:pre-wrap;word-break:break-word}
.vpnstatus.ok{border-color:#3fb95066;color:var(--text)}
.vpnstatus.warn{border-color:#d2992266}
.vpnpick{display:flex;gap:8px;align-items:center;margin-top:4px}
.vpnpick .wizinput{margin-top:0}
.vpnlog{margin-top:14px;max-height:190px;overflow:auto;background:var(--bg);
  border:1px solid var(--border);border-radius:8px;padding:9px 11px;
  font:11.5px/1.5 ui-monospace,monospace;color:var(--muted);white-space:pre-wrap;word-break:break-all}
/* Lift the finding-toast stack clear of the composer (it defaults to bottom:26px,
   which parks it on top of the message box and Send button). */
.pxa-findlayer{bottom:82px !important;right:18px !important}
/* Collapsible section header (e.g. "The team") */
.sectoggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px}
.sectoggle .caret{display:inline-block;transition:transform .12s;font-size:9px}
.sectoggle:not(.collapsed) .caret{transform:rotate(90deg)}
.agents{padding:2px 10px 14px;display:flex;flex-direction:column;gap:8px}
.agents.collapsed{display:none}
.acard{display:flex;gap:9px;background:var(--panel2);border:1px solid var(--border);
  border-left-width:3px;border-radius:10px;padding:8px 10px}
.aav{width:52px;height:52px;flex:0 0 52px;border-radius:50%;overflow:hidden;
  border:2px solid var(--border);background:var(--bg)}
.aav img{width:100%;height:100%;object-fit:cover}
.aname{font-weight:600;font-size:12.5px}
.aintro{font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.live{background:var(--good);box-shadow:0 0 0 0 rgba(63,185,80,.6);animation:pulse 1.6s infinite}
.dot.off{background:var(--muted)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,185,80,.5)}70%{box-shadow:0 0 0 7px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.badge{font-size:10px;padding:1px 6px;border-radius:20px;border:1px solid var(--border);background:var(--chip)}
.badge.good{color:var(--good);border-color:var(--good)}
.badge.bad{color:var(--muted)}
.badge.model{color:var(--accent);border-color:var(--accent);white-space:nowrap;vertical-align:bottom}
/* Main */
.main{display:flex;flex-direction:column;min-height:0}
/* Lives inside .topbar, which supplies the bar chrome — hence no padding/border here. */
.head{flex:1;min-width:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.head h2{margin:0;font-size:16px}
.head .meta{color:var(--muted);font-size:12px}
.head .spacer{flex:1}
.stat{font-size:12px;color:var(--muted)}
.stat b{color:var(--text)}
.mini{width:22px;height:22px;border-radius:50%;overflow:hidden;display:inline-flex;
  vertical-align:middle;border:1px solid var(--border);flex:0 0 22px}
.mini img{width:100%;height:100%;object-fit:cover}
/* Terminal/interim status pill in the engagement header (finished / aborted /
   stopped / an in-flight phase name). Replaces the running "… is working" row. */
.phase{font-size:11.5px;padding:2px 9px;border-radius:20px;border:1px solid var(--border);
  background:var(--chip);color:var(--muted);text-transform:lowercase;white-space:nowrap}
.phase.good{color:var(--good);border-color:var(--good)}
.phase.bad{color:var(--bad);border-color:var(--bad)}
.phase.warn{color:#d29922;border-color:#d29922}
.typing{font-size:12px;color:var(--accent);display:flex;align-items:center;gap:6px}
.typing .d{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 1.2s infinite}
.typing .d:nth-child(2){animation-delay:.2s}.typing .d:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.split{flex:1;display:flex;min-height:0}
.chatpane{flex:1;display:flex;flex-direction:column;min-height:0;min-width:240px}
.feed{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:12px;min-height:0}
.composer{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:var(--panel)}
.composer input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:9px 12px;font-size:13px}
.composer input:focus{outline:none;border-color:var(--accent)}
.dragbar{flex:0 0 6px;cursor:col-resize;background:var(--border);position:relative}
.dragbar:hover,.dragbar.active{background:var(--accent)}
.dragbar::before{content:"";position:absolute;inset:0 -3px}  /* wider grab area */
body.resizing{cursor:col-resize;user-select:none}
body.resizing iframe{pointer-events:none}
/* attack-tree panel */
.tree{flex:0 0 320px;overflow:auto;padding:14px 12px;background:var(--panel);border-left:1px solid var(--border)}
.tree h3{font-size:11px;color:var(--muted);margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em}
/* Engagement info panel (model / tokens / elapsed), below the attack tree */
.enginfo:not(:empty){margin-top:16px;border-top:1px solid var(--border)}
.enginfo .sechdr{padding:10px 0 6px}
.enginfo-body{display:flex;flex-direction:column;gap:7px;padding:2px 0 4px}
.enginfo-body.collapsed{display:none}
.eirow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px}
.eirow .eik{color:var(--muted);white-space:nowrap}
.eirow .eiv{color:var(--text);font-weight:600;text-align:right;word-break:break-word}
.tree ul{list-style:none;margin:0;padding-left:13px;border-left:1px dashed var(--border)}
.tree ul.troot{padding-left:0;border-left:0}
.tree li{margin:2px 0;font-size:12.5px}
.tree .node{padding:2px 0;line-height:1.35;word-break:break-word}
.tree .tw{display:inline-block;width:14px;margin-right:2px;cursor:pointer;color:var(--muted);
  user-select:none;text-align:center;font-weight:700}
.tree .tw:hover{color:var(--accent)}
.tree .tw.leaf{cursor:default;visibility:hidden}
.tree li.collapsed>ul{display:none}
.tree .dim{color:var(--muted);font-size:11px}
.tree .st{font-size:9.5px;padding:0 6px;border-radius:20px;border:1px solid var(--border);
  margin-left:4px;vertical-align:middle;text-transform:uppercase;letter-spacing:.03em}
.empty{color:var(--muted);text-align:center;margin:auto}
/* Chat rows */
.row{display:flex;gap:10px;max-width:82%}
.row.right{align-self:flex-end;flex-direction:row-reverse}
.row.left{align-self:flex-start}
.av{width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:flex;align-items:center;
  justify-content:center;font-size:18px;border:2px solid var(--border);overflow:hidden;
  background:var(--panel2)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.bubble{background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:9px 13px;
  font-size:13px;line-height:1.5;white-space:normal;word-break:break-word}
.row.right .bubble{background:var(--bubble-right-bg);border-color:var(--bubble-right-border)}
/* rendered markdown inside chat bubbles */
.bubble > :first-child{margin-top:0}
.bubble > :last-child{margin-bottom:0}
.bubble p{margin:.35em 0}
.bubble ul,.bubble ol{margin:.35em 0;padding-left:1.35em}
.bubble li{margin:.15em 0}
.bubble .mdh{font-weight:700;margin:.55em 0 .3em}
.bubble .mdh1{font-size:15px}.bubble .mdh2{font-size:14px}
.bubble .mdh3,.bubble .mdh4{font-size:13px}
.bubble code,.sheet #reportBody code{background:var(--code-bg);color:var(--code-text);
  border:1px solid var(--code-border);border-radius:4px;
  padding:1px 4px;font-family:ui-monospace,Menlo,monospace;font-size:12px}
.bubble pre,.sheet #reportBody pre{background:var(--code-bg);color:var(--code-text);
  border:1px solid var(--code-border);border-radius:8px;padding:10px;
  overflow:auto;margin:.45em 0;max-height:320px}
.bubble pre code,.sheet #reportBody pre code{background:none;border:0;padding:0;
  white-space:pre-wrap;word-break:break-word}
/* Links can land inside a code box (research output, report references), where the
   theme accent may be the same tone as the inset. */
.bubble pre a,.bubble code a{color:var(--code-link)}
.bubble blockquote{margin:.4em 0;padding-left:.7em;border-left:3px solid var(--border);color:var(--muted)}
.bubble a{color:var(--accent)}
.bubble hr{border:0;border-top:1px solid var(--border);margin:.5em 0}
/* mermaid diagrams (Reporter attack path) — rendered to inline SVG by main.js */
.mermaid{margin:.6em 0;padding:10px;background:var(--diagram-bg);border:1px solid var(--border);
  border-radius:8px;overflow-x:auto;text-align:center}
.mermaid svg{max-width:100%;height:auto}
.mermaid-wait,.mermaid-err{font-size:11.5px;color:var(--muted);text-align:left}
.mermaid.bad{text-align:left}
.mermaid.bad .mermaid-err{color:var(--bad);margin-bottom:6px}
.who{font-size:11px;color:var(--muted);margin-bottom:3px;font-weight:600}
.who .to{color:var(--accent)}
.when{font-size:10px;color:var(--muted);font-weight:400;opacity:.7;margin-left:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tool .when{margin-left:8px}
.tool{align-self:flex-start;margin-left:44px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--muted);background:var(--chip);border:1px solid var(--border);
  border-left-width:3px;border-radius:8px;padding:5px 9px;max-width:82%;white-space:pre-wrap;word-break:break-all}
.tool b{color:var(--text)}
.toolby{font-weight:600;font-size:11px;margin-right:6px;white-space:nowrap}
.toolav{width:16px;height:16px;border-radius:50%;overflow:hidden;display:inline-flex;
  vertical-align:middle;border:1px solid var(--border);margin-right:3px}
.toolav img{width:100%;height:100%;object-fit:cover}
.tool .tcmd{white-space:pre-wrap;word-break:break-all}
.tool .tcmd.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tool .tcmd.open{display:inline;overflow:visible}
.tool .more{color:var(--accent);cursor:pointer;font-size:11px;margin-left:4px;white-space:nowrap}
.tool .more:hover{text-decoration:underline}
.result{align-self:flex-start;margin-left:44px;font-size:11px;color:var(--muted);
  border-left:3px solid var(--border);padding-left:8px}
.out{align-self:flex-start;margin-left:44px;max-width:82%;font-size:11px;
  border-left:3px solid var(--border);padding-left:8px}
.out summary{color:var(--muted);cursor:pointer;list-style:none;user-select:none}
.out summary:hover{color:var(--text)}
.out summary::-webkit-details-marker{display:none}
.out summary::before{content:"▸ ";color:var(--accent)}
.out[open] summary::before{content:"▾ "}
.out pre{margin:6px 0 0;background:var(--code-bg);border:1px solid var(--code-border);border-radius:8px;
  padding:10px;overflow:auto;font-family:ui-monospace,Menlo,monospace;
  font-size:11.5px;line-height:1.45;color:var(--code-text);white-space:pre-wrap;word-break:break-word;
  /* Show at most ~10 lines, then scroll: 10 * line-height (1.45em) + vertical padding. */
  max-height:calc(1.45em * 10 + 20px)}
/* Web research results (web_search / web_fetch): a list of hits reads badly through
   a 10-line window, so give it a taller box and clickable source URLs. */
.out.research pre{max-height:calc(1.45em * 26 + 20px)}
.out.research pre a{color:var(--code-link);text-decoration:none}
.out.research pre a:hover{text-decoration:underline}
.note{align-self:center;font-size:11px;color:var(--muted);font-style:italic}
/* Report modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:10}
.modal.open{display:flex}
.sheet{background:var(--panel);border:1px solid var(--border);border-radius:12px;width:min(900px,92vw);
  height:min(85vh,900px);display:flex;flex-direction:column}
.sheet .sh{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center}
.sheet pre{margin:0;padding:18px;overflow:auto;flex:1;font-size:12.5px;white-space:pre-wrap;line-height:1.55}
.sheet #reportBody{flex:1;overflow:auto;padding:18px 22px;font-size:13px}
.x{cursor:pointer;color:var(--muted);font-size:20px;background:none;border:0}
/* Sidebar hide/show */
.navbtn{background:none;border:1px solid var(--border);color:var(--muted);cursor:pointer;
  border-radius:6px;font-size:14px;line-height:1;padding:3px 8px}
.navbtn:hover{color:var(--text);border-color:var(--accent)}
.navshow{display:none;position:fixed;top:10px;left:10px;z-index:6;background:var(--panel);
  border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:8px;
  font-size:16px;line-height:1;padding:7px 10px}
.navshow:hover{border-color:var(--accent)}
body.nav-hidden .app{grid-template-columns:1fr}
body.nav-hidden .side{display:none}
body.nav-hidden .navshow{display:block}
/* Clear the fixed ☰ button so it can't overlap the header content. Applied to
   .topbar, which BOTH pages share — scoping it to .head only cleared the
   engagement page and left "Engagements" colliding on the list page. */
body.nav-hidden .topbar{padding-left:60px}
/* Wizard */
.wizsheet{width:min(560px,94vw);height:auto;max-height:88vh}
.wizbody{padding:20px 22px;overflow:auto}
.wizlabel{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.wizhint{font-size:11.5px;color:var(--muted);margin-bottom:8px;line-height:1.45}
.wizinput{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:9px 11px;font-size:13px;font-family:inherit}
.wizinput:focus{outline:none;border-color:var(--accent)}
textarea.wizinput{resize:vertical;line-height:1.5}
.wizcheck{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:12.5px;
  background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer}
.wizcheck input{margin-top:2px;flex:0 0 auto}
/* wrap: three buttons don't fit the 94vw sheet on a narrow screen */
.wizfoot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border);
  flex-wrap:wrap}