/* ============================================================================
   BOLT — reusable component layer, built entirely on design-tokens.css.
   Opt in by adding class="bolt" to a container; all components live under it,
   so light/dark themes work automatically (no hardcoded theme colors).
   Used by Agentforce Review; reusable for the global nav and other pages.
   ============================================================================ */
.bolt{
  color:var(--color-text);
  font-family:var(--font-sans);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.bolt *{box-sizing:border-box}
.bolt svg{stroke-width:1.75}
.bolt a{text-decoration:none;color:inherit}
.bolt a:hover{text-decoration:none}

/* ---- hero banner (the single highlight on a page, e.g. Home) ---- */
.bolt .hero{display:flex;align-items:flex-start;gap:16px;border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:22px 24px;margin-bottom:18px;background:linear-gradient(135deg,var(--color-primary-subtle),var(--color-bg-surface) 72%);box-shadow:var(--shadow-sm)}
.bolt .hero .sp{flex:1}
.bolt .hero .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary)}
.bolt .hero h1{margin:8px 0 4px} .bolt .hero .sub{margin:0;max-width:560px}

/* ---- layout / text ---- */
.bolt .content{max-width:1000px;margin:0 auto;padding:26px 24px 90px}
.bolt h1{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0}
.bolt .pagehead{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.bolt .pagehead .sp{flex:1}
.bolt .sub{font-size:13.5px;color:var(--color-text-muted);margin:6px 0 0;max-width:640px}
.bolt .sectitle{font-size:14px;font-weight:700;margin:24px 0 12px}
.bolt .crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--color-text-muted)}
.bolt .crumb .here{color:var(--color-text);font-weight:600}
.bolt .crumb a{cursor:pointer}.bolt .crumb a:hover{color:var(--color-text)}
.bolt .crumb svg{width:13px;height:13px;color:var(--color-text-subtle)}
.bolt .sp{flex:1}
.bolt .muted{color:var(--color-text-muted)} .bolt .subtle{color:var(--color-text-subtle)}
.bolt .small{font-size:11.5px} .bolt .right{text-align:right}
.bolt .mono{font-family:var(--font-mono);font-size:12px}
.bolt .num{font-variant-numeric:tabular-nums;font-weight:650}
/* inline text link (.bolt a is body-coloured): <a class="link" href> or <button class="link" type="button"> */
.bolt :is(a,button).link{position:relative;padding:0;border:0;background:none;font:inherit;color:var(--color-primary-strong);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.bolt :is(a,button).link:hover{color:var(--color-text);text-decoration:underline}
.bolt :is(a,button).link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}

/* ---- buttons ---- */
.bolt .btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:8px 14px;border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-bg-surface);color:var(--color-text)}
.bolt .btn:hover{background:var(--color-bg-hover)} .bolt .btn svg{width:15px;height:15px}
.bolt .btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}
.bolt .btn-primary:hover{background:var(--color-primary-strong)}
.bolt .btn-sm{padding:6px 11px;font-size:12.5px}
.bolt .btn-ghost{border-color:transparent;background:transparent;color:var(--color-text-muted)}
.bolt .btn-ghost:hover{background:var(--color-bg-hover);color:var(--color-text)}
.bolt .btn:disabled{opacity:.5;cursor:default}

/* ---- cards ---- */
.bolt .card{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);margin-bottom:16px}
.bolt .card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--color-line)}
.bolt .card-h h2{font-size:13.5px;font-weight:650;margin:0} .bolt .card-h .sp{flex:1}
.bolt .card-b{padding:18px}

/* ---- inputs ---- */
.bolt .inp{font:inherit;font-size:12.5px;padding:7px 10px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text)}
/* a select shrinks to its column and cuts a long option with an ellipsis (the app keeps the full label in its title) */
.bolt :where(select.inp){max-width:100%;min-width:0;text-overflow:ellipsis}
/* disabled fields: flat and quieter but still readable; opacity and text-fill undo the 40% fade iOS adds itself */
.bolt :where(.inp,select,textarea):disabled{background:var(--color-bg-subtle);color:var(--color-text-muted);-webkit-text-fill-color:var(--color-text-muted);opacity:1;cursor:not-allowed}

/* ---- badges / pills ---- */
.bolt .pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:var(--radius-pill);border:1px solid var(--color-border);color:var(--color-text-muted)}
.bolt .pill.green{color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}
.bolt .pill.amber{color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)}
.bolt .pill.gray{color:var(--color-text-subtle)}
.bolt .pill.red{color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}
.bolt .pill.blue{color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}
.bolt .grade{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2px 7px}
.bolt .env{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--color-text-muted)}
.bolt .stat-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:none}
.bolt .d-green{background:var(--color-success)} .bolt .d-amber{background:var(--color-warning)} .bolt .d-red{background:var(--color-danger)} .bolt .d-gray{background:var(--color-text-subtle)}
.bolt .chips{display:flex;flex-wrap:wrap;gap:6px}
.bolt .chip{font-size:11.5px;color:var(--color-text-muted);background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:3px 10px}

/* ---- tiles ---- */
.bolt .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
@media(max-width:880px){.bolt .tiles{grid-template-columns:repeat(2,1fr)}}
.bolt .tile{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-sm)}
.bolt .tile .v{font-size:24px;font-weight:700;letter-spacing:-.02em} .bolt .tile .l{font-size:12px;color:var(--color-text-muted);margin-top:3px} .bolt .tile .x{font-size:11px;color:var(--color-text-subtle);margin-top:6px;display:flex;align-items:center;gap:5px}

/* ---- feature cards ---- */
.bolt .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:880px){.bolt .feat{grid-template-columns:1fr}}
.bolt .fcard{display:flex;gap:13px;padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-bg-surface);cursor:pointer;box-shadow:var(--shadow-sm)}
.bolt .fcard:hover{background:var(--color-bg-hover)}
.bolt .fcard .fi{width:34px;height:34px;border-radius:9px;background:var(--color-bg-subtle);color:var(--color-text-muted);display:grid;place-items:center;flex:none}
.bolt .fcard .fi svg{width:17px;height:17px} .bolt .fcard .ft{font-size:13.5px;font-weight:650} .bolt .fcard .fd{font-size:11.5px;color:var(--color-text-muted);margin-top:2px}

/* ---- tables (subtle uppercase header on a light fill) ---- */
.bolt .tbl{width:100%;border-collapse:collapse}
/* a card holding a table scrolls it sideways at every width instead of widening the page (so a popover or sticky
   header inside that card is clipped to it) */
.bolt :where(.card:has(> .tbl), .card-b:has(> .tbl)){overflow-x:auto}
.bolt .tbl thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);font-weight:700;padding:10px 16px;background:var(--color-bg-subtle);border-bottom:1px solid var(--color-border);white-space:nowrap}
.bolt .tbl thead th:first-child{border-top-left-radius:var(--radius-lg)} .bolt .tbl thead th:last-child{border-top-right-radius:var(--radius-lg)}
.bolt .tbl td{padding:13px 16px;border-top:1px solid var(--color-line);font-size:13px;vertical-align:middle}
.bolt .tbl tr.click{cursor:pointer} .bolt .tbl tr.click:hover td{background:var(--color-bg-hover)}
.bolt .agc{display:flex;align-items:center;gap:12px}
.bolt .agc .ic{width:34px;height:34px;border-radius:var(--radius-lg);background:var(--color-primary-subtle);color:var(--color-primary);display:grid;place-items:center;flex:none;font-size:12px;font-weight:700}
.bolt .agc .nm{font-weight:600} .bolt .agc .id{font-size:11.5px;color:var(--color-text-subtle);margin-top:1px}
.bolt .maptbl{width:100%;border-collapse:collapse;font-size:12.5px}
.bolt .maptbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);font-weight:700;padding:0 10px 8px}
.bolt .maptbl td{padding:9px 10px;border-top:1px solid var(--color-line);vertical-align:top}

/* ---- sub nav ---- */
.bolt .subnav{display:flex;gap:4px;border-bottom:1px solid var(--color-border);margin-bottom:18px}
.bolt .subnav button{font:inherit;font-size:13px;font-weight:600;color:var(--color-text-muted);background:none;border:none;padding:9px 13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:7px}
.bolt .subnav button:hover{color:var(--color-text)} .bolt .subnav button.on{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.bolt .subnav .ct{font-size:11px;background:var(--color-primary-subtle);color:var(--color-primary);border-radius:var(--radius-pill);padding:1px 7px}

/* ---- stat grid + bars ---- */
.bolt .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:16px}
.bolt .st{background:var(--color-bg-surface);padding:16px} .bolt .st .v{font-size:23px;font-weight:700;letter-spacing:-.02em} .bolt .st .v.red{color:var(--color-danger)} .bolt .st .v.amber{color:var(--color-warning)} .bolt .st .l{font-size:12px;color:var(--color-text-muted);margin-top:3px}
.bolt .bars{display:flex;flex-direction:column;gap:13px}
.bolt .barrow{display:grid;grid-template-columns:150px 1fr 34px;gap:14px;align-items:center;font-size:12.5px}
.bolt .barrow .bt{color:var(--color-text-muted)} .bolt .bar{height:6px;background:var(--color-line);border-radius:var(--radius-pill);overflow:hidden} .bolt .bar .bf{height:100%;border-radius:var(--radius-pill);background:var(--color-text);transition:width .3s} .bolt .barrow .bv{text-align:right;font-weight:650}
.bolt .bar .bf.g{background:var(--color-success,#16a34a)} .bolt .bar .bf.a{background:var(--color-warning,#d97706)} .bolt .bar .bf.r{background:var(--color-danger,#dc2626)}

/* ---- findings ---- */
.bolt .fgroup-h{display:flex;align-items:center;gap:10px;margin:18px 0 8px} .bolt .fgroup-h h3{font-size:12.5px;font-weight:700;margin:0} .bolt .fgroup-h .c{font-size:11.5px;color:var(--color-text-subtle)}
.bolt .finding{border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:8px;background:var(--color-bg-surface)}
.bolt .finding .fh{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer} .bolt .finding .fh:hover{background:var(--color-bg-hover)}
.bolt .sev{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px;flex:none;width:74px}
.bolt .sev.crit{color:var(--color-danger)} .bolt .sev.mod{color:var(--color-warning)} .bolt .sev.min{color:var(--color-text-muted)}
.bolt .finding .ft{font-weight:550;font-size:13px;flex:1;min-width:0} .bolt .finding .fm{font-size:11px;color:var(--color-text-subtle);font-family:var(--font-mono)}
.bolt .finding .chev{width:14px;height:14px;color:var(--color-text-subtle);transition:transform .15s;flex:none} .bolt .finding.open .chev{transform:rotate(90deg)}
.bolt .finding .fb{display:none;padding:2px 14px 15px 100px;font-size:12.5px} .bolt .finding.open .fb{display:block}
/* collapsible secondary sub-group inside a finding group (two-level grouping) */
.bolt .fsub{margin:0 0 8px}
.bolt .fsub-h{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;border:none;background:none;cursor:pointer;padding:5px 2px 5px 0;color:var(--color-text-muted)}
.bolt .fsub-h:hover{color:var(--color-text)}
.bolt .fsub-h .chev{width:13px;height:13px;color:var(--color-text-subtle);transition:transform .15s;flex:none;transform:rotate(90deg)} .bolt .fsub-h.collapsed .chev{transform:none}
.bolt .fsub-h .ssl{font-size:11.5px;font-weight:600;letter-spacing:.02em}
.bolt .fsub-h .ssc{font-size:10.5px;font-weight:600;color:var(--color-text-subtle);background:var(--color-bg-subtle);border-radius:99px;padding:1px 7px;margin-left:2px}
.bolt .fsub-b{padding-left:6px}
/* boxed findings view: header bar over a nav|body grid (mirrors the agent-script canvas shell) */
.bolt .fbox-shell{display:grid;grid-template-columns:240px 1fr;min-height:320px;background:var(--color-bg-surface)}
.bolt .fbox-shell.no-nav{grid-template-columns:1fr}
.bolt .fbox-nav{border-right:1px solid var(--color-border);overflow:auto;padding:8px;display:flex;flex-direction:column;gap:2px;max-height:72vh;background:var(--color-bg-surface)}
.bolt .fbox-body{overflow:auto;max-height:72vh;padding:14px 16px;min-width:0}
@media(max-width:768px){.bolt .fbox-shell{grid-template-columns:1fr} .bolt .fbox-nav{border-right:none;border-bottom:1px solid var(--color-border);max-height:none;flex-direction:row;flex-wrap:wrap}}
.bolt .rref{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--color-text-muted);margin-bottom:8px} .bolt .rref code{font-family:var(--font-mono);color:var(--color-text)}
.bolt .finding .fb p{margin:0 0 10px;color:var(--color-text-muted)} .bolt .fix{border-left:2px solid var(--color-success);background:var(--color-bg-subtle);border-radius:0 6px 6px 0;padding:9px 12px;color:var(--color-text);font-size:12.5px} .bolt .fix b{font-weight:650}

/* ---- doc / deliverables ---- */
.bolt .doc h3{font-size:13.5px;font-weight:700;margin:22px 0 8px} .bolt .doc h3:first-child{margin-top:0} .bolt .doc p{font-size:13px;margin:0 0 10px} .bolt .doc p.muted{color:var(--color-text-muted)} .bolt .doc code{font-family:var(--font-mono);font-size:11.5px;background:var(--color-bg-subtle);border:1px solid var(--color-line);padding:1px 5px;border-radius:4px}
.bolt .deliv{display:grid;grid-template-columns:248px 1fr;gap:16px} @media(max-width:880px){.bolt .deliv{grid-template-columns:1fr}}
.bolt .deliv-list{display:flex;flex-direction:column;gap:6px}
.bolt .deliv-row{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;background:var(--color-bg-surface)} .bolt .deliv-row:hover{background:var(--color-bg-hover)} .bolt .deliv-row.on{border-color:var(--color-primary-soft);background:var(--color-primary-subtle)}
.bolt .deliv-row .di{width:30px;height:30px;border-radius:var(--radius-md);background:var(--color-bg-subtle);color:var(--color-text-muted);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none} .bolt .deliv-row.on .di{background:var(--color-primary-soft);color:var(--color-primary)} .bolt .deliv-row .dn{font-size:13px;font-weight:600} .bolt .deliv-row .dd{font-size:11px;color:var(--color-text-subtle);margin-top:1px}
.bolt .deliv-prev{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface);min-height:360px;display:flex;flex-direction:column} .bolt .deliv-prev-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--color-line);font-size:13.5px;font-weight:650} .bolt .deliv-body{padding:18px 20px;overflow:auto}
/* "New document type" affordance + plan editor (custom doc types) */
.bolt .deliv-add{border-style:dashed;color:var(--color-text-muted);text-align:left;font:inherit;width:100%} .bolt .deliv-add:hover{border-color:var(--color-primary-soft);color:var(--color-text)} .bolt .deliv-add .di{background:transparent;font-size:18px;line-height:1}
.bolt .nd-sec{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:10px 12px;margin-bottom:10px;background:var(--color-bg-surface)}
.bolt .nd-sec-h{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.bolt .nd-head{flex:1;min-width:0} .bolt .nd-mini{flex:none;width:auto;padding:4px 8px;font-size:12px} .bolt .nd-instr{width:100%;resize:vertical;font-size:12.5px}
.bolt .btn-xs{padding:3px 7px;font-size:12px;line-height:1}
.bolt .nd-warn{margin-top:6px;font-size:11.5px;color:var(--color-warning);background:var(--color-warning-subtle,rgba(234,179,8,.1));padding:5px 8px;border-radius:var(--radius-md)}
.bolt .nd-scope{margin-top:18px;border-top:1px solid var(--color-line);padding-top:14px}
.bolt .nd-scope-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;margin-bottom:8px} .bolt .nd-scope-opt.on{border-color:var(--color-primary-soft);background:var(--color-primary-subtle)} .bolt .nd-scope-opt input{margin-top:3px} .bolt .nd-scope-opt .dn{font-size:13px;font-weight:600} .bolt .nd-scope-opt .dd{font-size:11.5px;color:var(--color-text-subtle);margin-top:1px}
.bolt .deliv-body h1{font-size:16px;margin:0 0 6px} .bolt .deliv-body h2{font-size:15px;margin:16px 0 6px} .bolt .deliv-body h3{font-size:13px;margin:16px 0 7px} .bolt .deliv-body p{font-size:13px;color:var(--color-text-muted);line-height:1.6;margin:0 0 10px} .bolt .deliv-body ul{padding-left:18px;margin:0 0 10px} .bolt .deliv-body li{font-size:13px;color:var(--color-text-muted);margin:3px 0}
.bolt .deliv-body table{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 12px} .bolt .deliv-body th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-subtle);font-weight:700;padding:6px 10px;border-bottom:1px solid var(--color-border)} .bolt .deliv-body td{padding:7px 10px;border-top:1px solid var(--color-line)}
.bolt .deliv-body code{font-family:var(--font-mono);font-size:11.5px;background:var(--color-bg-subtle);border:1px solid var(--color-line);padding:1px 5px;border-radius:4px}
.bolt .deliv-body .mermaid{display:flex;justify-content:center;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:16px;margin:8px 0}
/* Agentic documentation pane */
.bolt .docgen-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.bolt .docgen-types{display:flex;gap:6px;flex-wrap:wrap}
.bolt .docgen-types .btn.on{background:var(--color-accent,#2563eb);color:#fff;border-color:var(--color-accent,#2563eb)}
.bolt .docgen-body{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start}
.bolt .docgen-prog{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface);max-height:560px;overflow:auto}
.bolt .dgp-h{padding:10px 14px;border-bottom:1px solid var(--color-line);font-size:12.5px;font-weight:650}
.bolt .dgp-steps{padding:8px 10px;font-family:var(--font-mono);font-size:11px;line-height:1.5}
.bolt .dgp-step{display:flex;gap:8px;padding:2px 0;color:var(--color-text-muted)}
.bolt .dgp-ph{flex:0 0 auto;min-width:88px;color:var(--color-text-subtle);text-transform:uppercase;font-size:9.5px;letter-spacing:.04em;padding-top:1px}
.bolt .dgp-step.ph-tool-call .dgp-ph{color:#2563eb} .bolt .dgp-step.ph-tool-result .dgp-ph{color:#16a34a} .bolt .dgp-step.ph-error .dgp-ph,.bolt .dgp-step.ph-error .dgp-msg{color:#dc2626} .bolt .dgp-step.ph-done .dgp-ph{color:#16a34a}
.bolt .docgen-doc{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface);min-height:560px}
@media(max-width:900px){.bolt .docgen-body{grid-template-columns:1fr}}
.bolt .dot-done{color:#16a34a;font-size:11px;line-height:1}

/* ---- dependency tree + code ---- */
.bolt .deptree{font-family:var(--font-mono);font-size:12px;line-height:1.9} .bolt .depnode.l1{padding-left:18px} .bolt .depnode.l2{padding-left:40px;color:var(--color-text-muted)}
.bolt .dt-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-subtle);border:1px solid var(--color-border);border-radius:5px;padding:0 6px;margin-left:6px} .bolt .dt-warn{font-size:10.5px;color:var(--color-warning);margin-left:4px}
.bolt pre.code{background:var(--color-bg-subtle);border:1px solid var(--color-border);color:var(--color-text);border-radius:var(--radius-lg);padding:15px 16px;overflow:auto;font-family:var(--font-mono);font-size:12px;line-height:1.6;margin:0;white-space:pre-wrap;word-break:break-word;max-height:520px}

/* ---- artifacts file rows ---- */
.bolt .filerow{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:8px;cursor:pointer} .bolt .filerow:hover{background:var(--color-bg-hover)} .bolt .filerow.on{border-color:var(--color-primary-soft);background:var(--color-primary-subtle)}
.bolt .filerow .fi{width:30px;height:30px;border-radius:var(--radius-md);background:var(--color-bg-subtle);color:var(--color-text-muted);display:grid;place-items:center;font-family:var(--font-mono);font-size:13px} .bolt .filerow .fn{font-family:var(--font-mono);font-size:12.5px;font-weight:600} .bolt .filerow .fd{font-size:11px;color:var(--color-text-subtle)} .bolt .filerow .sp{flex:1}

/* ---- diff ---- */
.bolt .diffgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:880px){.bolt .diffgrid{grid-template-columns:1fr}}
.bolt .dh{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--color-text-muted);margin-bottom:7px}
.bolt pre.diff{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:auto;font-family:var(--font-mono);font-size:11.5px;line-height:1.7;margin:0;background:var(--color-bg-surface);padding:8px 0;max-height:460px}
.bolt pre.diff .ln{display:block;padding:0 14px;white-space:pre-wrap}
.bolt pre.diff .add{background:color-mix(in srgb,var(--color-success) 9%,transparent);border-left:2px solid var(--color-success)}
.bolt pre.diff .del{background:color-mix(in srgb,var(--color-danger) 9%,transparent);border-left:2px solid var(--color-danger);color:var(--color-text-muted)}

/* ---- unified diff + change explanation blocks ---- */
.bolt .udiff{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface);overflow:auto;max-height:480px;font-family:var(--font-mono);font-size:11.5px;line-height:1.7;padding:6px 0}
.bolt .udiff .dl{display:block;padding:0 12px;white-space:pre-wrap;word-break:break-word;border-left:2px solid transparent}
.bolt .udiff .dl.add{background:color-mix(in srgb,var(--color-success) 10%,transparent);border-left-color:var(--color-success)}
.bolt .udiff .dl.del{background:color-mix(in srgb,var(--color-danger) 10%,transparent);border-left-color:var(--color-danger);color:var(--color-text-muted)}
.bolt .udiff .dl.gap{color:var(--color-text-subtle);text-align:center;background:var(--color-bg-subtle)}
.bolt .changeblk{display:flex;gap:12px;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:8px;background:var(--color-bg-surface)}
.bolt .changeblk .cn{width:22px;height:22px;border-radius:50%;background:var(--color-primary-subtle);color:var(--color-primary);font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.bolt .changeblk .ct{font-weight:650;font-size:13px} .bolt .changeblk .cx{font-size:12.5px;color:var(--color-text-muted);margin-top:3px;line-height:1.55}

/* ---- note / deploy steps / rules ---- */
.bolt .note{display:flex;gap:10px;padding:12px 14px;border:1px solid var(--color-border);background:var(--color-bg-subtle);border-radius:var(--radius-lg);font-size:12.5px;color:var(--color-text-muted);margin-bottom:14px} .bolt .note svg{width:15px;height:15px;color:var(--color-text-subtle);flex:none;margin-top:1px} .bolt .note b{color:var(--color-text);font-weight:600}
.bolt .depstep{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface)} .bolt .depstep.is-wait{opacity:.5} .bolt .depstep.is-done{border-color:color-mix(in srgb,var(--color-success) 35%,transparent);background:color-mix(in srgb,var(--color-success) 6%,transparent)}
.bolt .depn{width:22px;height:22px;border-radius:50%;background:var(--color-bg-subtle);color:var(--color-text-muted);font-size:11.5px;font-weight:700;display:grid;place-items:center;flex:none;border:1px solid var(--color-border)} .bolt .depstep.is-done .depn{background:var(--color-success);border-color:var(--color-success);color:#fff}
.bolt .depbody{flex:1;min-width:0} .bolt .depbody .dt{font-weight:600;font-size:13px} .bolt .depbody .dd{font-size:11.5px;color:var(--color-text-muted);margin-top:1px}
.bolt .rule{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:8px;background:var(--color-bg-surface)} .bolt .rule .rc{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--color-primary);flex:none;width:54px} .bolt .rule .rt{font-size:13px} .bolt .rule .rt .rd{font-size:11.5px;color:var(--color-text-muted);margin-top:2px}

/* ---- analytics placeholders ---- */
.bolt .trend{display:flex;align-items:flex-end;gap:6px;height:120px;padding:18px} .bolt .trend .b{flex:1;background:linear-gradient(var(--color-primary),var(--color-primary-soft));border-radius:4px 4px 0 0}
.bolt .chartcard{height:200px;display:flex;align-items:flex-end;gap:8px;padding:18px} .bolt .col{flex:1;background:var(--color-primary-soft);border-radius:6px 6px 0 0} .bolt .col.alt{background:var(--color-primary)} .bolt .legend{display:flex;gap:14px;font-size:11.5px;color:var(--color-text-muted);padding:0 18px 14px}

/* ---- in-app left rail (and reusable for global nav later) ---- */
.bolt .rail{width:230px;flex:none;border-right:1px solid var(--color-border);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.bolt .rail-agent{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;margin-bottom:8px} .bolt .rail-agent:hover{background:var(--color-bg-hover)}
.bolt .rail-agent .ic{width:28px;height:28px;border-radius:7px;background:var(--color-primary-subtle);color:var(--color-primary);display:grid;place-items:center;font-size:10px;font-weight:700;flex:none} .bolt .rail-agent .nm{font-size:13px;font-weight:600;line-height:1.2} .bolt .rail-agent .or{font-size:10.5px;color:var(--color-text-subtle);margin-top:1px} .bolt .rail-agent .cr{margin-left:auto;color:var(--color-text-subtle)}
.bolt .navlbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-subtle);padding:12px 10px 5px}
.bolt .navitem{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--radius-lg);color:var(--color-text-muted);font-size:13px;font-weight:500;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.bolt .navitem svg{width:16px;height:16px;color:var(--color-text-subtle)} .bolt .navitem:hover{background:var(--color-bg-hover);color:var(--color-text)} .bolt .navitem:hover svg{color:var(--color-text-muted)}
.bolt .navitem.on{background:var(--color-primary-subtle);color:var(--color-primary-strong);font-weight:600} .bolt .navitem.on svg{color:var(--color-primary)}
.bolt .navitem .ct{margin-left:auto;font-size:11px;font-weight:600;color:var(--color-text-subtle)} .bolt .navitem.on .ct{color:var(--color-primary)}

/* ---- misc ---- */
.bolt .spin{width:13px;height:13px;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:bolt-spin .8s linear infinite;flex:none}
@keyframes bolt-spin{to{transform:rotate(360deg)}}

/* ---- review board (per-artifact parallel review progress) ---- */
.bolt .navlbl-sm{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-subtle);margin:0 0 7px}
.bolt .rvgrouphd{display:flex;align-items:center;gap:8px;font-size:12px;margin:0 0 6px;color:var(--color-text-muted)}
.bolt .rvgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(max-width:768px){.bolt .rvgrid{grid-template-columns:1fr}}
.bolt .rvtile{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface);transition:border-color .2s,background .2s}
.bolt .rvtile .rvi{width:18px;height:18px;flex:none}
.bolt .rvtile.run{border-color:color-mix(in srgb,var(--color-primary) 35%,transparent)}
.bolt .rvtile.done{border-color:color-mix(in srgb,var(--color-success) 35%,transparent);background:color-mix(in srgb,var(--color-success) 5%,transparent)}
.bolt .rvtile.partial{border-color:color-mix(in srgb,var(--color-warning) 42%,transparent);background:color-mix(in srgb,var(--color-warning) 6%,transparent)}
.bolt .rvtile .rn{font-size:12.5px;font-weight:600;font-family:var(--font-mono,monospace);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bolt .rvtile .rs{margin-left:auto;font-size:11px;color:var(--color-text-subtle);white-space:nowrap;flex:none}
.bolt .rvtile.partial .rs{color:var(--color-warning)}

/* ---- artifacts viewer (bordered file tree + code pane) ---- */
.bolt .artwrap{display:grid;grid-template-columns:260px 1fr;gap:14px;align-items:start}
@media(max-width:768px){.bolt .artwrap{grid-template-columns:1fr}}
.bolt .arttree{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface);padding:8px;display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow:auto}
.bolt .arttree-grp{display:flex;flex-direction:column;gap:2px}
.bolt .arttree-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-subtle);padding:6px 8px 3px}
.bolt .arttree-h .ct{margin-left:auto;font-size:10px;font-weight:600;color:var(--color-text-subtle);background:var(--color-bg-subtle);border-radius:99px;padding:1px 7px}
.bolt .artfile{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;border:none;background:none;cursor:pointer;padding:7px 9px;border-radius:var(--radius-md);color:var(--color-text)}
.bolt .artfile:hover{background:var(--color-bg-hover)}
.bolt .artfile.on{background:var(--color-primary-subtle)}
.bolt .artfile.on .afn{color:var(--color-primary-strong);font-weight:600}
.bolt .artfile .afi{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:6px;background:var(--color-bg-subtle);color:var(--color-text-muted);font-family:var(--font-mono);font-size:11px;font-weight:700}
.bolt .artfile .afi.flow{font-size:13px}
.bolt .artfile .afn{font-family:var(--font-mono);font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bolt .artpane{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.bolt .artpane-h{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--color-border);background:var(--color-bg-subtle)}
.bolt .artpane-b{min-width:0;overflow:auto}

/* ---- expanded audit: dependency graph / perm-set / channel ---- */
.bolt .rvtile .rvia{font-size:10.5px;color:var(--color-text-subtle);margin-top:2px;font-family:var(--font-mono)}
.bolt .depbadge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:5px;padding:1px 6px;flex:none}
.bolt .depbadge.direct{color:var(--color-primary);background:var(--color-primary-subtle)}
.bolt .depbadge.trans{color:var(--color-text-muted);background:var(--color-bg-subtle);border:1px solid var(--color-border)}
.bolt .deprow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--color-line,var(--color-border));font-size:12.5px} .bolt .deprow:first-child{border-top:none}
.bolt .deprow .afi{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:var(--color-bg-subtle);color:var(--color-text-muted);font-family:var(--font-mono);font-size:11px;flex:none}
/* clickable dependency-tree rows (left pane of the Dependencies view) */
.bolt .deptreerow{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;border:none;background:none;cursor:pointer;padding:6px 9px;border-radius:var(--radius-md);color:var(--color-text);line-height:1.4}
.bolt .deptreerow:hover:not(:disabled){background:var(--color-bg-hover)}
.bolt .deptreerow.on{background:var(--color-primary-subtle)} .bolt .deptreerow.on .afn{color:var(--color-primary-strong);font-weight:600}
/* collapse caret for tree rows with children (+ spacer to keep leaf rows aligned) */
.bolt .dt-caret{flex:none;width:16px;height:16px;display:grid;place-items:center;border:none;background:none;color:var(--color-text-subtle);cursor:pointer;font-size:13px;line-height:1;padding:0;border-radius:4px;transition:transform .15s;transform:rotate(90deg)}
.bolt .dt-caret:hover{color:var(--color-text);background:var(--color-bg-subtle)}
.bolt .dt-caret.collapsed{transform:none}
.bolt .dt-caret-sp{flex:none;width:16px}
/* type tag badge: fits 2–3 char labels (AP/FL/OBJ/FLD/…) */
.bolt .deptreerow .afi{min-width:24px;height:18px;padding:0 4px;border-radius:4px;display:grid;place-items:center;background:var(--color-bg-subtle);color:var(--color-text-subtle);font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.03em;flex:none}
.bolt .deptreerow .afi.apex{color:var(--color-primary-strong);background:var(--color-primary-subtle)}
.bolt .deptreerow .afi.flow{color:var(--color-primary-strong);background:var(--color-primary-subtle)}
.bolt .deptreerow .afi.leaf{background:transparent;border:1px solid var(--color-border)}
.bolt .deptreerow .afn{font-family:var(--font-mono);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bolt .deptreerow .dt-skip{font-size:10px;color:var(--color-text-subtle);font-style:italic;margin-left:auto;flex:none}
/* coverage matrix */
.bolt .disclose{cursor:pointer;color:var(--color-primary,#7c3aed);font-weight:600;user-select:none}
.bolt .disclose:hover{text-decoration:underline}
.bolt .cov{width:100%;border-collapse:collapse}
.bolt .cov th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);font-weight:700;text-align:left;padding:0 12px 9px}
.bolt .cov td{padding:10px 12px;border-top:1px solid var(--color-line,var(--color-border));font-size:12.5px;vertical-align:middle}
.bolt .cov .comp{font-family:var(--font-mono);font-size:12px}
.bolt .covsum{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.bolt .covsum .m .v{font-size:22px;font-weight:700;letter-spacing:-.02em} .bolt .covsum .m .l{font-size:11px;color:var(--color-text-subtle)}
/* channel chain */
.bolt .chain{display:flex;flex-direction:column}
.bolt .chrow{display:flex;align-items:flex-start;gap:13px;position:relative;padding-bottom:18px}
.bolt .chrow:not(:last-child)::before{content:'';position:absolute;left:16px;top:34px;bottom:0;width:2px;background:var(--color-line,var(--color-border))}
.bolt .chic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;border:1px solid var(--color-border);background:var(--color-bg-surface);z-index:1} .bolt .chic svg{width:17px;height:17px}
.bolt .chic.ok{border-color:color-mix(in srgb,var(--color-success) 40%,transparent);background:color-mix(in srgb,var(--color-success) 7%,transparent);color:var(--color-success)}
.bolt .chic.warn{border-color:color-mix(in srgb,var(--color-warning) 45%,transparent);background:color-mix(in srgb,var(--color-warning) 8%,transparent);color:var(--color-warning)}
.bolt .chbody{flex:1;min-width:0;padding-top:2px} .bolt .chbody .ct{font-size:13px;font-weight:600} .bolt .chbody .cv{font-family:var(--font-mono);font-size:11.5px;color:var(--color-text);margin-top:2px} .bolt .chbody .cmeta{font-size:11px;color:var(--color-text-subtle);margin-top:3px}
.bolt .proglog{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto;font-size:12.5px}
/* Test drawer — mirrors agent-studio SkillDrawer (as-* pattern) */
.bolt .as-scrim{position:fixed;inset:0;background:rgba(15,23,42,.38);display:flex;justify-content:flex-end;z-index:var(--layer-drawer,950)}
.bolt .as-drawer{width:480px;max-width:92vw;height:100%;background:var(--color-bg-surface);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.12)}
.bolt .as-drawer-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--color-border)} .bolt .as-drawer-h h2{margin:0;font-size:15px}
.bolt .as-drawer-b{padding:18px 20px;overflow-y:auto;flex:1}
.bolt .as-drawer-f{display:flex;gap:10px;align-items:center;padding:14px 20px;border-top:1px solid var(--color-border)}
/* Platform-owned overlay parts, the bolt twins of the kit's ts-drawer / ui-modal / ts-switch (appui.css is not loaded
   on bolt pages). AF Agent Setup and Agent Studio prefix their own classes as-, so INV9 keeps these names platform-only.
   Markup: .as-scrim > .as-drawer[.sm|.md|.lg] | .as-modal[.lg] > -h (h2 + .as-x) / -b / -f; a <form> may hold -b + -f.
   Behaviour (focus, Esc, keyboard inset): /shared/ui/js/dialogFocus.js. */
.bolt .as-drawer.sm{width:460px} .bolt .as-drawer.md{width:720px} .bolt .as-drawer.lg{width:1080px}
.bolt .as-scrim:has(>.as-modal){align-items:center;justify-content:center;padding:5vh 16px;z-index:var(--layer-modal,1000)}
.bolt .as-modal{display:flex;flex-direction:column;width:560px;max-width:100%;max-height:100%;min-height:0;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);color:var(--color-text)}
.bolt .as-modal.lg{width:720px} .bolt .as-modal:focus{outline:none}
.bolt .as-modal>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.bolt .as-modal-h{display:flex;align-items:center;gap:10px;flex:none;padding:16px 20px;border-bottom:1px solid var(--color-line)} .bolt .as-modal-h h2{flex:1;min-width:0;margin:0;font-size:15px;font-weight:700}
.bolt .as-modal-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px}
.bolt .as-modal-f{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex:none;padding:14px 20px;border-top:1px solid var(--color-line)}
.bolt .as-x{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;margin-left:auto;padding:0;border:0;border-radius:var(--radius-md);background:none;color:var(--color-text-subtle);font:inherit;font-size:20px;line-height:1;cursor:pointer} .bolt .as-x:hover{background:var(--color-bg-hover);color:var(--color-text)}
/* switch: <button class="as-switch" role="switch" aria-checked="…"><span class="knob"></span></button>; .lg is the 38x22 size */
.bolt .as-switch{position:relative;width:34px;height:20px;flex:none;padding:0;border:0;border-radius:var(--radius-pill);background:var(--color-border-strong);cursor:pointer;vertical-align:middle;transition:background .16s ease}
.bolt .as-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:transform .16s ease}
.bolt .as-switch:is(.on,[aria-checked="true"]){background:var(--color-primary)} .bolt .as-switch:is(.on,[aria-checked="true"]) .knob{transform:translateX(14px)}
.bolt .as-switch.lg{width:38px;height:22px} .bolt .as-switch.lg .knob{width:18px;height:18px} .bolt .as-switch.lg:is(.on,[aria-checked="true"]) .knob{transform:translateX(16px)}
.bolt .as-switch:disabled{opacity:.55;cursor:default}
.bolt .as-switch:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 25%,transparent)}
@media (prefers-reduced-motion: reduce){.bolt .as-switch,.bolt .as-switch .knob{transition:none}}
.bolt .as-fld{display:block;margin-bottom:18px} .bolt .as-lab{display:block;font-size:12px;font-weight:650;margin-bottom:7px} .bolt .as-hint{font-weight:400;color:var(--color-text-muted)}
.bolt .dep-mini{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:8px 11px;margin-bottom:6px} .bolt .dep-mini .dt{font-size:12.5px;font-weight:600} .bolt .dep-mini .dd{font-size:11.5px;color:var(--color-text-muted);margin-top:2px;display:flex;flex-direction:column;gap:6px}
.bolt .gfield{display:flex;flex-direction:column;gap:4px} .bolt .gname{font-size:11.5px;font-weight:600;color:var(--color-text);display:flex;align-items:center;gap:6px}
.bolt .ginput{width:100%;font-size:12.5px;padding:6px 9px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-surface);font-family:var(--font-mono,monospace)} .bolt .ginput:focus{outline:none;border-color:var(--color-primary,#4f46e5)}
.bolt .gtag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);background:var(--color-bg-subtle);border-radius:4px;padding:1px 5px} .bolt .gtag-pos{color:var(--color-primary,#4f46e5);background:color-mix(in srgb,var(--color-primary,#4f46e5) 12%,transparent)}
.bolt .progline{display:flex;align-items:center;gap:9px;color:var(--color-text-muted);transition:color .2s}
.bolt .progline.cur{color:var(--color-text);font-weight:550}
.bolt .progline.cur .pdot{box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 18%,transparent)}
.bolt .pdot{width:7px;height:7px;border-radius:50%;background:var(--color-text-subtle,#9aa);flex:none}
.bolt .pdot.pull,.bolt .pdot.parse,.bolt .pdot.start,.bolt .pdot.explain{background:var(--color-text-subtle,#9aa)}
.bolt .pdot.optimize,.bolt .pdot.repair{background:var(--color-primary)}
.bolt .pdot.optimized,.bolt .pdot.done{background:var(--color-success,#2e7d32)}
.bolt .pdot.validate,.bolt .pdot.revert{background:var(--color-warning,#c77700)}
.bolt .pdot.error{background:var(--color-danger,#c0392b)}
.bolt .codeblock{border:1px solid var(--color-border);border-radius:9px;overflow:hidden;background:var(--color-surface)}
.bolt .codeblock-h{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--color-line,var(--color-border));font-size:12px;font-weight:600;background:var(--color-bg)}
.bolt .codeblock-h .lang{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle,#9aa);border:1px solid var(--color-border);border-radius:5px;padding:0 6px}
.bolt pre.codeblock-b{margin:0;padding:14px 16px;overflow:auto;font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:12px;line-height:1.65;background:var(--color-surface)}
.bolt pre.codeblock-b code{font-family:inherit;white-space:pre;background:none;padding:0;border:0}
.bolt .pdot.suggest{background:var(--color-primary)}
.bolt .pdot.passed{background:var(--color-success,#2e7d32)}
.bolt .pdot.failed{background:var(--color-warning,#c77700)}
.bolt .hidden{display:none!important}
.bolt .toasts{position:fixed;bottom:18px;right:calc(18px + var(--assistant-w, 0px));display:flex;flex-direction:column;gap:8px;z-index:var(--layer-toast,1100)}
.bolt .toast{padding:10px 14px;border-radius:var(--radius-lg);font-size:12.5px;background:var(--color-text);color:var(--color-bg-surface);box-shadow:var(--shadow-lg)}
.bolt .toast.error{background:var(--color-danger);color:#fff} .bolt .toast.success{background:var(--color-success);color:#fff}

/* segmented toggle (Canvas / Code) */
.bolt .seg{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.bolt .seg button{font:inherit;font-size:12px;font-weight:600;color:var(--color-text-muted);background:var(--color-bg-surface);border:none;padding:5px 12px;cursor:pointer}
.bolt .seg button+button{border-left:1px solid var(--color-border)}
.bolt .seg button:hover{color:var(--color-text)} .bolt .seg button.on{color:var(--color-primary-strong);background:var(--color-primary-subtle)}

/* ===== Agent Script Canvas (agc-) — parsed .agent rendered as a structured document ===== */
.bolt .agc-host{display:flex;flex-direction:column;height:100%;min-height:0}
/* header bar: ☰ outline toggle BEFORE the script title, then toolbar slot (mode switcher etc.) */
.bolt .agc-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--color-border);background:var(--color-bg-subtle);flex:none}
.bolt .agc-menu{display:grid;place-items:center;width:30px;height:28px;flex:none;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-muted);cursor:pointer}
.bolt .agc-menu:hover{color:var(--color-text)} .bolt .agc-menu.on{color:var(--color-primary-strong);background:var(--color-primary-subtle);border-color:var(--color-primary)}
.bolt .agc-menu svg{width:15px;height:15px}
.bolt .agc-bar-title{font-size:13px;font-weight:600;color:var(--color-text)} .bolt .agc-bar-sp{flex:1}
.bolt .agc-shell{display:grid;grid-template-columns:240px 1fr;flex:1;min-height:320px;overflow:hidden;background:var(--color-bg-surface)}
.bolt .agc-shell.no-nav{grid-template-columns:1fr}
/* changed-block highlighting (suggested / diff views) */
.bolt .agc-block.mod{background:var(--canvas-changed-bg);box-shadow:inset 4px 0 0 var(--canvas-changed-bar)}
/* before/after: fade unchanged blocks so the modified subagents pop in both columns */
.bolt .agc-dim .agc-block{opacity:.4;filter:saturate(.6);transition:opacity .15s} .bolt .agc-dim .agc-block:hover{opacity:.75}
.bolt .agc-dim .agc-block.mod{opacity:1;filter:none}
.bolt .agc-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-primary-strong);background:var(--color-primary-soft);border-radius:var(--radius-sm);padding:1px 7px;margin-left:9px;vertical-align:middle}
/* before / after: two canvases side-by-side (Suggested-fixes tab) */
.bolt .agc-ba{display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:0}
@media(max-width:900px){.bolt .agc-ba{grid-template-columns:1fr}}
.bolt .agc-ba-col{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--color-border);overflow:hidden} .bolt .agc-ba-col:last-child{border-right:none}
.bolt .agc-ba-h{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);padding:8px 16px;border-bottom:1px solid var(--color-line);background:var(--color-bg-subtle)}
.bolt .agc-ba-col .agc-host{flex:1;min-height:0}
.bolt .agc-nav{border-right:1px solid var(--color-border);overflow:auto;padding:6px 8px 30px;background:var(--color-bg-surface)}
.bolt .agc-navg{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-subtle);padding:14px 12px 5px}
.bolt .agc-navi{display:block;font-size:13px;color:var(--color-text-muted);padding:6px 12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid transparent;border-radius:0 var(--radius-md) var(--radius-md) 0}
.bolt .agc-navi:hover{color:var(--color-text);background:var(--color-bg-subtle)} .bolt .agc-navi.on{color:var(--color-primary-strong);font-weight:600;border-left-color:var(--color-primary);background:var(--color-primary-subtle)}
.bolt .agc-doc{overflow:auto;background:var(--canvas-surface)}
.bolt .agc-empty{padding:40px;color:var(--color-text-muted);text-align:center}
.bolt .agc-block{border-top:1px solid var(--color-line);scroll-margin-top:12px} .bolt .agc-block:first-child{border-top:none}
.bolt .agc-block-h{display:flex;align-items:center;gap:11px;padding:18px 24px 4px;cursor:pointer}
.bolt .agc-bchev{width:13px;height:13px;color:var(--color-text-subtle);flex:none;transition:transform .15s} .bolt .agc-block:not(.collapsed)>.agc-block-h .agc-bchev{transform:rotate(90deg)}
.bolt .agc-block-h h2{font-size:16px;font-weight:700;letter-spacing:-.015em;margin:0;color:var(--color-text)}
.bolt .agc-block-h .agc-bk{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-subtle);margin-left:auto}
.bolt .agc-block.collapsed .agc-block-body{display:none} .bolt .agc-block.collapsed .agc-block-h{padding-bottom:18px}
.bolt .agc-bdesc{padding:4px 24px 6px 45px;color:var(--color-text-muted);font-size:13px}
.bolt .agc-sec{padding:12px 24px 16px 45px}
.bolt .agc-phase,.bolt .agc-sech{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);margin:0 0 10px;display:block}
.bolt .agc-phase{color:var(--color-primary-strong)}
.bolt .agc-prose{font-size:14px;line-height:1.85;color:var(--color-text);margin:2px 0}
.bolt b.agc-kw{font-weight:650;color:var(--color-primary-strong)}
.bolt .agc-tok{display:inline;font-family:var(--font-mono);font-size:12px;border-radius:var(--radius-sm);padding:1px 6px}
.bolt .agc-var,.bolt .agc-out{background:var(--color-bg-subtle);color:var(--color-text)} 
.bolt .agc-act{color:var(--color-primary-strong);background:var(--color-primary-soft);cursor:pointer;font-weight:500}
.bolt .agc-val{font-family:var(--font-mono);font-size:12px;color:var(--color-text)} .bolt .agc-op{font-family:var(--font-mono);font-size:12px;color:var(--color-text-subtle);margin:0 3px}
.bolt .agc-cond{margin:3px 0} .bolt .agc-cline{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;cursor:pointer;padding:3px 0;line-height:1.7} .bolt .agc-cline .agc-chev{width:13px;height:13px;margin-top:4px;color:var(--color-text-subtle);flex:none;transition:transform .15s} .bolt .agc-cond.open>.agc-cline .agc-chev{transform:rotate(90deg)}
.bolt .agc-cbody{margin:2px 0 8px 6px;padding:2px 0 2px 18px;border-left:1.5px solid var(--color-line);display:none} .bolt .agc-cond.open>.agc-cbody{display:block}
.bolt .agc-run{display:flex;align-items:center;gap:8px;padding:3px 0}
/* standalone procedure statements (set / with / transition / available-when) inside if/else + run bodies */
.bolt .agc-brow{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;position:relative;padding-left:15px;margin:3px 0;line-height:1.7;font-size:13px}
.bolt .agc-brow::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:var(--color-border)}
/* else marker line (not a toggle); shares the cond's open-gating with its following cbody */
.bolt .agc-cline.agc-celse{cursor:default;padding-left:21px;display:none} .bolt .agc-cond.open>.agc-cline.agc-celse{display:flex}
.bolt .agc-arow{margin:1px 0} .bolt .agc-ahd{display:flex;align-items:center;gap:9px;cursor:pointer;padding:5px 0} .bolt .agc-ahd .agc-chev{width:13px;height:13px;color:var(--color-text-subtle);transition:transform .15s} .bolt .agc-arow.open>.agc-ahd .agc-chev{transform:rotate(90deg)}
.bolt .agc-abody{display:none;flex-direction:column;gap:6px;padding:6px 0 10px 21px;margin-left:6px;border-left:1.5px solid var(--color-line)} .bolt .agc-arow.open>.agc-abody{display:flex}
.bolt .agc-wsec{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);margin:8px 0 2px}
.bolt .agc-wrow{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:13px;line-height:1.7;padding:1px 0}
.bolt .agc-wrow b.agc-kw{min-width:104px} .bolt .agc-src{font-size:11px;color:var(--color-text-muted);font-style:italic} .bolt .agc-muted{color:var(--color-text-muted)}
.bolt .agc-iorow{display:grid;grid-template-columns:180px 56px 1fr;gap:10px;align-items:center;font-family:var(--font-mono);font-size:11px;padding:3px 0;border-top:1px solid var(--color-line)} .bolt .agc-iorow:first-child{border-top:none} .bolt .agc-ion{font-weight:600;color:var(--color-text)} .bolt .agc-iotype{color:var(--color-text-subtle)} .bolt .agc-iodesc{grid-column:1/-1;font-family:var(--font-sans);font-size:11px;color:var(--color-text-muted)}
.bolt .agc-flag{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;border-radius:3px;padding:0 5px;color:var(--color-primary-strong);background:var(--color-primary-soft)}
.bolt .agc-vtoggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px} .bolt .agc-vtoggle .agc-chev{width:13px;height:13px;transition:transform .15s} .bolt .agc-sec.vshow .agc-vtoggle .agc-chev{transform:rotate(90deg)}
.bolt .agc-cnt{font-size:10px;font-weight:600;color:var(--color-text-muted);background:var(--color-bg-subtle);border-radius:var(--radius-pill);padding:1px 8px;margin-left:2px}
.bolt .agc-sec .agc-vargrid{display:none} .bolt .agc-sec.vshow .agc-vargrid{display:flex;margin-top:10px} .bolt .agc-vargrid{flex-direction:column}
.bolt .agc-varrow{padding:7px 0;border-top:1px solid var(--color-line);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .bolt .agc-varrow:first-child{border-top:none} .bolt .agc-vmeta{font-family:var(--font-mono);font-size:11px;color:var(--color-text-subtle)} .bolt .agc-vdesc{flex-basis:100%;font-size:11px;color:var(--color-text-muted)}

/* ---- PHONE + TOUCH ------------------------------------------------------------------------------
   Phone = max-width: 768px (--bp-phone). Rules that only ADD a property the base rule leaves unset use
   .bolt :where(...) so an app rule on the same element wins; rules that must replace a base value use
   the base selector (subnav underline, segmented overflow, drawer width, toast position, .inp size,
   content gutter, the --text-min-phone text floor).
   Constraints apps should know: a card holding a .tbl scrolls sideways (at every width, the tables section), so a
   popover or sticky header inside that card is clipped to it; on touch screens min-height lifts a .btn and the fields
   (.inp, select, textarea) even when an app gave them a fixed height; on phones a drawer is full width even when an
   app gave it its own width (!important, as the kit's ts-drawer), and the scrim's bottom follows --kb-inset (set by
   trackKeyboard in /shared/ui/js/dialogFocus.js) so a sheet's footer stays above the on-screen keyboard.
   The max-width queries above this section at 880px (.tiles, .feat, .deliv, .diffgrid) and 900px (.docgen-body,
   .agc-ba) are tablet content-width collapses, not phone layout, and stay. */
@media (max-width: 768px) {
  .bolt :where(.pagehead, .card-h, .hero) { flex-wrap: wrap; }
  /* In .hero/.pagehead the .sp text block is flex:1 (a 0 basis), which never wraps; full width puts the
     actions on the line below it. */
  .bolt .hero .sp, .bolt .pagehead .sp { flex-basis: 100%; }
  /* The action groups after .sp wrap their buttons; no display here, so a hidden group stays hidden. */
  .bolt :where(.pagehead, .hero) > :where(.sp ~ *) { flex-wrap: wrap; gap: var(--space-2, 8px); max-width: 100%; min-width: 0; }
  /* <app-layout> already pads its content with --page-pad; a bolt page outside it keeps that gutter itself. */
  .bolt .content { padding-left: var(--page-pad, 16px); padding-right: var(--page-pad, 16px); }
  :where(app-layout) .bolt .content { padding-left: 0; padding-right: 0; }
  .bolt .hero .eyebrow, .bolt .tbl thead th, .bolt .pill, .bolt .chip, .bolt .small, .bolt .env,
  .bolt .subnav .ct, .bolt .fcard .fd { font-size: var(--text-min-phone, 12px); }
  /* .tbl.tbl-stack: each row becomes a card, each cell "Header: value" (data-label, set by stackLabels() in
     /shared/ui/js/tableStack.js, which also restores the table roles the display change drops); the
     .tbl-stack-keep cell, or a row header (<th scope="row">), is the card's title. Opt-in: a wide numeric table
     scrolls instead (the .card rule above). */
  .bolt .tbl.tbl-stack, .bolt .tbl.tbl-stack tbody, .bolt .tbl.tbl-stack tr { display: block; }
  .bolt .tbl.tbl-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bolt .tbl.tbl-stack tr { padding: 10px 14px; border-top: 1px solid var(--color-line); }
  .bolt .tbl.tbl-stack tbody tr:first-child { border-top: 0; }
  .bolt .tbl.tbl-stack tbody :is(td, th) { display: grid; grid-template-columns: minmax(88px, 36%) minmax(0, 1fr); gap: 10px; align-items: baseline;
    padding: 3px 0; border-top: 0; font-size: 13px; text-align: left; overflow-wrap: anywhere; }
  .bolt .tbl.tbl-stack tbody :is(td, th)::before { content: attr(data-label); color: var(--color-text-subtle); font-size: var(--text-min-phone, 12px);
    font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
  .bolt .tbl.tbl-stack tbody :is(td, th):is(:not([data-label]), [data-label=""], .tbl-stack-keep, th) { grid-template-columns: minmax(0, 1fr); }
  .bolt .tbl.tbl-stack tbody :is(td, th):is(:not([data-label]), [data-label=""], .tbl-stack-keep, th)::before { content: none; }
  .bolt .tbl.tbl-stack tbody :is(.tbl-stack-keep, th) { padding-bottom: 6px; font-weight: 600; }
  .bolt .tbl.tbl-stack tr.click:hover :is(td, th) { background: none; }
  .bolt :where(.card:has(> .tbl.tbl-stack), .card-b:has(> .tbl.tbl-stack)) { overflow-x: visible; }
  /* overflow-x forces overflow-y too, which would clip the 2px active underline that hangs 1px below the
     strip — so the strip draws its rule inside itself instead. */
  .bolt .subnav { overflow-x: auto; flex-wrap: nowrap; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--color-border); }
  /* An edge shadow shows only where tabs are scrolled out of view: the "local" covers (strip-coloured) scroll with
     the tabs and hide the fixed shadows at an edge that has nothing beyond it; a strip that fits shows neither. */
  .bolt .subnav { --subnav-bg: var(--color-bg-page);
    background:
      linear-gradient(to right, var(--subnav-bg) 40%, transparent) left / 28px 100% no-repeat local,
      linear-gradient(to left, var(--subnav-bg) 40%, transparent) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--color-text) 16%, transparent), transparent) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--color-text) 16%, transparent), transparent) right / 12px 100% no-repeat scroll; }
  .bolt :is(.card, .as-drawer, .as-modal) .subnav { --subnav-bg: var(--color-bg-surface); }
  .bolt .subnav button { margin-bottom: 0; }
  .bolt :where(.subnav button, .seg button) { flex: none; white-space: nowrap; }
  .bolt .seg { max-width: 100%; overflow-x: auto; }
  .bolt .as-scrim { bottom: var(--kb-inset, 0px); }
  .bolt .as-drawer { width: 100% !important; max-width: 100%; }
  .bolt .as-drawer-h { padding: 14px 16px; }
  .bolt .as-drawer-b { padding: 16px; }
  .bolt .as-drawer-f { flex-wrap: wrap; padding-bottom: calc(14px + var(--safe-bottom, 0px)); }
  /* modal → bottom sheet; its height is relative to the scrim, which shrinks above the keyboard, so the title and
     close button never slide off the top */
  .bolt .as-scrim:has(> .as-modal) { align-items: flex-end; padding: 0; }
  .bolt .as-modal, .bolt .as-modal.lg { width: 100%; max-height: calc(100% - 12px); border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .bolt .as-modal-h { padding: 14px 16px; }
  .bolt .as-modal-b { padding: 16px; }
  .bolt .as-modal-f { flex-wrap: wrap; padding: 12px 16px calc(12px + var(--safe-bottom, 0px)); }
  .bolt :where(.as-drawer-f, .as-modal-f) > .btn { flex: 1 1 auto; justify-content: center; }
  .bolt .toasts { left: 12px; right: 12px; bottom: calc(12px + var(--fab-clear, 88px) + var(--safe-bottom, 0px) + var(--page-bar-h, 0px)); }
  /* a page-level sticky bar sits flush with the bottom (appui.css); the pill rides above it by the bar's measured
     height, which AppLayout's pageBar.js puts on <body> (so a wrapped two-row bar is cleared too) */
  assistant-panel { --fab-lift: var(--page-bar-h, 0px); }
}
/* While a bolt drawer or modal is open the floating Assistant pill steps aside at every width, as for the kit
   overlays (appui.css): it would sit on the footer buttons. Open = rendered; one hidden by [hidden] or v-show
   (inline display: none), or inside such an element, does not count. */
body:has(.bolt :is(.as-drawer, .as-modal):not([hidden], [hidden] *, [style*="display: none"], [style*="display: none"] *)) assistant-panel::part(fab) { display: none; }
/* ...and under ANY open dialog, on every shell page (ensureDesignTokens links this sheet everywhere): dialogFocus()
   marks <html data-ap-overlay> while a dialog holds focus, and a native modal <dialog> matches :modal. */
html[data-ap-overlay] assistant-panel::part(fab) { display: none; }
body:has(dialog:modal) assistant-panel::part(fab) { display: none; }
@media (pointer: coarse) {
  .bolt .subnav { scrollbar-width: none; }
  .bolt :where(.btn, .subnav button) { min-height: var(--tap-min, 44px); }
  .bolt :where(.btn-sm, .btn-xs, .seg button) { min-height: 36px; }
  .bolt :where(.inp, select, textarea) { min-height: var(--tap-min, 44px); }
  /* 44px hit area with the same 30x28 look; the menu sits in dense card headers */
  .bolt .agc-menu { position: relative; }
  .bolt .agc-menu::after { content: ""; position: absolute; inset: -9px -8px; }
  .bolt .as-x { min-width: var(--tap-min, 44px); min-height: var(--tap-min, 44px); }
  /* a standalone button link gets a 44px hit area around its line box; inline <a> links in running text are exempt
     (WCAG 2.5.8) — a hit area there would overlap the lines above and below and steal their taps */
  .bolt button.link::after { content: ""; position: absolute; inset: -12px -4px; }
  /* 44px hit areas with the same 34x20 / 38x22 look; ::before, so an app may still draw on ::after */
  .bolt .as-switch::before { content: ""; position: absolute; inset: -12px -5px; }
  .bolt .as-switch.lg::before { inset: -11px -3px; }
  /* bolt.css itself sizes .inp at 12.5px, below the 16px at which iOS stops zooming on focus; generic
     fields are covered at zero specificity by phone.css. */
  .bolt .inp { font-size: 16px; }
}