:root{
  --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#EEF2F7; --line:#E2E7EF; --ink:#1E2433; --ink-2:#4B5568; --muted:#7C869B;
  --accent:#832161; --accent-ink:#6A1A4F; --accent-soft:#F5E6EF; --accent-soft-2:#FBF4F8; --brand-teal:#0097A7;
  --good:#3B9A6E; --good-soft:#E1F3EA; --warn:#D2932A; --warn-soft:#FBF0DA; --crit:#D8544F; --crit-soft:#FBE3E1; --info:#6B7BD6; --info-soft:#E7EAFB;
  --shadow:0 1px 2px rgba(30,36,51,.04),0 8px 24px -12px rgba(30,36,51,.12);
  --r:18px; --r-s:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14171E; --surface:#1C2029; --surface-2:#242935; --line:#2E3442; --ink:#EEF1F6; --ink-2:#C3CAD6; --muted:#8B94A7;
  --accent:#D07FB6; --accent-ink:#E9B4D6; --accent-soft:#3E2036; --accent-soft-2:#2E1A29; --brand-teal:#4FB8C4;
  --good:#5CB88E; --good-soft:#1E3A2E; --warn:#E0A94A; --warn-soft:#3D3120; --crit:#E57470; --crit-soft:#432527; --info:#8E9CE6; --info-soft:#262B45;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --bg:#14171E; --surface:#1C2029; --surface-2:#242935; --line:#2E3442; --ink:#EEF1F6; --ink-2:#C3CAD6; --muted:#8B94A7;
  --accent:#D07FB6; --accent-ink:#E9B4D6; --accent-soft:#3E2036; --accent-soft-2:#2E1A29; --brand-teal:#4FB8C4;
  --good:#5CB88E; --good-soft:#1E3A2E; --warn:#E0A94A; --warn-soft:#3D3120; --crit:#E57470; --crit-soft:#432527; --info:#8E9CE6; --info-soft:#262B45;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
/* base type reads off the shared scale (tokens.css --fs-body-lg/--lh-body-lg) so a scale bump there
 * bumps the whole app at once — no per-component overrides needed for the "bigger type" pass. */
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-body-lg,17px)/var(--lh-body-lg,26px) var(--font-body,"Inter",system-ui,-apple-system,"Segoe UI",sans-serif);-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:var(--font-display,"Geist",system-ui,sans-serif);text-wrap:balance;margin:0}
h1{font-size:var(--fs-headline-lg,30px);line-height:var(--lh-headline-lg,38px);font-weight:800;letter-spacing:-.015em}
h2{font-size:var(--fs-headline-md,23px);line-height:var(--lh-headline-md,31px);font-weight:700;letter-spacing:-.01em}
h3{font-size:var(--fs-headline-sm,18px);line-height:var(--lh-headline-sm,26px);font-weight:700;color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
/* App shell: the shell itself is pinned to the viewport (height:100vh, no outer scroll) — the sidebar and the
 * main panel each own their own internal scroll box below. This replaces the old "whole window scrolls" model:
 * the sidebar never scrolls with content, and .main's page header can stick to the top of ITS box (below). */
.app{display:grid;grid-template-columns:232px 1fr;grid-template-rows:minmax(0,1fr);height:100vh;overflow:hidden}
/* sidebar */
.side{background:var(--surface);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:22px;height:100%;min-height:0;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.brand .mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;overflow:hidden;flex:none}
.brand .mark svg{display:block}
.brand b{font-family:var(--font-display);font-size:16px;font-weight:800}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:-2px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink-2);font-weight:600;text-align:left;width:100%}
.nav button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav button:hover{background:var(--surface-2)}
.nav button.on{background:var(--accent-soft);color:var(--accent-ink)}
.nav .count{margin-left:auto;background:var(--crit);color:#fff;font-size:11px;font-weight:700;padding:1px 8px;border-radius:99px}
/* C3: nav-link inner group (icon+label on the left; count/stage badge pushed right by ui-nav-link's space-between) */
.ui-nav-link .nl-l{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.ui-nav-link .nl-l svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ui-nav-link:hover .nl-l svg,.ui-nav-link.on .nl-l svg{stroke:var(--primary)}
.engagements-list .ui-nav-link{overflow:hidden}
.engagements-list .ui-nav-link .stage{flex:none;margin-left:6px}
.side .label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:0 12px}
.engagements-list button{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;width:100%;box-sizing:border-box;overflow:hidden;color:var(--ink-2);text-align:left;font-size:14px}
.engagements-list button:hover{background:var(--surface-2)}
.engagements-list button.on{background:var(--accent-soft);color:var(--accent-ink)}
.engagements-list button.on .nm{font-weight:700}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.engagements-list .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.engagements-list .stage{flex:none;font-size:11px;color:var(--muted);font-weight:700}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid var(--line)}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex:none}
.me small{display:block;color:var(--muted);font-size:12px}
/* main — the app's one scrolling surface. Contained scrolling (not the window) so the page header
 * (.topbar / .story-top, first child) can stick to the top of THIS box as content scrolls beneath it. */
.main{height:100%;min-height:0;overflow-y:auto;padding:24px 44px 36px;max-width:none;min-width:0}
/* full-bleed sticky header: negative margins cancel .main's padding so the solid background spans
 * edge-to-edge and flush to the top (no content peeking past it as the panel scrolls beneath). */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  position:sticky;top:0;z-index:5;background:var(--bg);
  margin:-24px -44px 24px;padding:24px 44px 16px;border-bottom:1px solid var(--line)}
.topbar p{margin:4px 0 0;color:var(--muted)}
.actions{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 16px;border-radius:12px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.primary:hover{background:var(--accent-ink)}
.btn.good{background:var(--good);color:#fff;border-color:transparent}
.btn.danger{background:var(--surface);color:var(--crit);border-color:var(--crit-soft)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:10px;box-shadow:none}
.btn.xs{padding:2px 8px;font-size:13px;line-height:1.4;border-radius:8px;box-shadow:none}
.seg{display:inline-flex;background:var(--surface-2);border-radius:12px;padding:3px}
.seg button{padding:6px 12px;border-radius:9px;font-size:13px;font-weight:700;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:22px}
.grid{display:grid;gap:18px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;line-height:1.4}
.pill.good{background:var(--good-soft);color:var(--good)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.crit{background:var(--crit-soft);color:var(--crit)}.pill.info{background:var(--info-soft);color:var(--info)}.pill.accent{background:var(--accent-soft);color:var(--accent-ink)}.pill.neutral{background:var(--surface-2);color:var(--muted)}
.pill .dot{width:7px;height:7px;background:currentColor}
.hidden{display:none!important}
.view{display:none}.view.on{display:block}
/* ===== portfolio ===== */
.tiles{grid-template-columns:repeat(4,1fr)}
.tile{position:relative;overflow:hidden}
.tile .k{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.tile .v{font-family:var(--font-display);font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:8px 0 4px}
.tile .v small{font-size:16px;color:var(--muted);font-weight:600;margin-left:6px;letter-spacing:0}
.tile p{margin:6px 0 0;color:var(--ink-2);font-size:14px}
.tile a{display:inline-block;margin-top:14px;color:var(--accent-ink);font-weight:700;font-size:13px;text-decoration:none}
.tile .ring{position:absolute;right:18px;top:18px}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring .track{stroke:var(--surface-2)}
.plan-cards{grid-template-columns:repeat(3,1fr);margin-top:18px}
.pc{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.pc:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(30,36,51,.05),0 18px 32px -14px rgba(30,36,51,.2)}
.pc .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pc .client{font-family:var(--font-display);font-weight:800;font-size:18px}
.pc .sub{color:var(--muted);font-size:13px;margin-top:2px}
.pc .stage-row{display:flex;gap:6px;margin:16px 0 10px}
.pc .stage-row span{flex:1;height:7px;border-radius:99px;background:var(--surface-2)}
.pc .stage-row span.done{background:var(--good)}.pc .stage-row span.open{background:var(--accent)}.pc .stage-row span.gated{background:var(--crit)}
.pc .meta{display:flex;justify-content:space-between;color:var(--ink-2);font-size:13px}
.pc .budget{margin-top:14px}
.meter{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.meter i.over{background:var(--crit)}
.pc .flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.exec{margin-top:26px}
.exec-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.run{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--surface-2)}
.run .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center}
.run .ic.running{background:var(--good-soft);color:var(--good)}.run .ic.parked{background:var(--warn-soft);color:var(--warn)}
.run .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.run b{display:block;font-weight:700}
.run small{color:var(--muted);font-size:13px}
.run .t{text-align:right;color:var(--muted);font-size:13px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--good);display:inline-block;margin-right:6px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(59,154,110,.5)}60%{box-shadow:0 0 0 7px rgba(59,154,110,0)}}
@media (prefers-reduced-motion: reduce){.pulse{animation:none}.pc{transition:none}}
/* ===== inbox ===== */
.inbox{grid-template-columns:400px 1fr;align-items:start}
.ui-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card.ui-glass.detail{padding:26px 28px}   /* keep the reading pane's generous padding over the ui-card default */
.queue{display:flex;flex-direction:column;gap:10px}
.qi{display:grid;grid-template-columns:5px 1fr;gap:14px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:0;overflow:hidden;cursor:pointer;text-align:left;width:100%}
.qi .stripe{background:var(--line)}.qi.crit .stripe{background:var(--crit)}.qi.warn .stripe{background:var(--warn)}.qi.info .stripe{background:var(--info)}.qi.accent .stripe{background:var(--accent)}
.qi .body{padding:14px 16px 14px 6px}
.qi:hover{background:var(--surface-bright)}
.qi.on{outline:2px solid var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.qi .kind{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:700}
.qi .title{font-weight:700;margin:4px 0 6px;line-height:1.35}
.qi .foot{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.qi .wait{margin-left:auto;font-weight:700}
.qi .wait.late{color:var(--crit)}
.detail{padding:26px 28px}
.detail .eyebrow{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;font-weight:700}
.detail h2{font-size:22px;margin:8px 0 8px}
.detail .lede{color:var(--ink-2);margin:0 0 20px;max-width:64ch}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.fact{background:var(--surface-2);border-radius:12px;padding:10px 14px}
.fact small{display:block;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.fact b{font-weight:700;font-size:14px}
.finding{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:14px 16px;border-radius:14px;border:1px solid var(--line);margin-top:10px}
.finding .sev{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:11px;font-weight:800}
.finding .sev.crit{background:var(--crit-soft);color:var(--crit)}.finding .sev.high{background:var(--warn-soft);color:var(--warn)}
.finding b{display:block}
.finding p{margin:3px 0 6px;color:var(--ink-2);font-size:14px}
.finding code{font-size:12px;color:var(--muted);background:var(--surface-2);padding:2px 6px;border-radius:6px}
.finding .disp{display:flex;gap:6px}
.next{margin-top:22px;background:var(--accent-soft-2);border-radius:14px;padding:16px 18px}
.next ol{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.next li{display:flex;gap:12px;align-items:center;font-size:14px}
.next li i{width:24px;height:24px;border-radius:50%;background:var(--surface);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px;flex:none;border:1px solid var(--line)}
.next li span{margin-left:auto;color:var(--muted);font-size:12px}
.decide{display:flex;gap:10px;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.decide .who{margin-left:auto;color:var(--muted);font-size:13px;max-width:36ch;text-align:right}
pre.call{background:var(--ink);color:#E9F5F6;border-radius:14px;padding:16px 18px;font:13px/1.55 var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);overflow:auto;margin:0;white-space:pre-wrap;word-break:break-word}
:root[data-theme="dark"] pre.call,:root:not([data-theme="light"]) pre.call{background:#0F1217}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) pre.call{background:#1E2433}}
pre.call .c{color:#8FB8BC}
textarea,input,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%}
textarea:focus,input:focus,select:focus{outline:2px solid var(--accent);border-color:transparent}
/* ===== plan ===== */
.plan-head{display:flex;align-items:center;gap:18px}
.plan-head .client{font-family:var(--font-display);font-size:26px;font-weight:800}
.kpis{display:flex;gap:12px;margin-left:auto}
.kpi{background:var(--surface);border-radius:14px;padding:10px 16px;box-shadow:var(--shadow);min-width:110px}
.kpi small{display:block;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.kpi b{font-family:var(--font-display);font-size:20px;font-weight:800}
/* engagement cockpit — the four "answer tiles" (a full-width row) + overflow actions menu */
.atiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 6px}
.hdr-btns{display:flex;gap:10px;align-items:center}
.atile{background:var(--surface);border-radius:14px;padding:10px 16px;box-shadow:var(--shadow);text-align:left;border:1px solid transparent;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:2px;min-width:0}
.atile:hover{border-color:var(--line)}
.atile small{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.atile b{font-family:var(--font-display);font-size:20px;font-weight:800}
.atile .of{font-size:13px;color:var(--muted);font-weight:600}
.atile .sub{font-size:12px;color:var(--muted)}
.atile .meter.sm{height:6px;margin:3px 0 1px}
.atile.alert{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 6%,var(--surface))}
.atile.alert b{color:var(--crit)}
.hdr-menu{position:relative}
.hdr-menu summary{list-style:none}
.hdr-menu summary::-webkit-details-marker{display:none}
.hdr-menu .menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:6px;min-width:210px;display:flex;flex-direction:column}
.hdr-menu .menu-pop button{text-align:left;padding:8px 10px;border:none;background:none;border-radius:8px;cursor:pointer;font:inherit;color:var(--ink)}
.hdr-menu .menu-pop button:hover{background:var(--surface-2)}
.hdr-menu .menu-pop button.danger{color:var(--crit)}
/* engagement cockpit — Overview: act-left (needs-you queue) / read-right (stage + live agents) */
.cockpit{grid-template-columns:1.3fr 1fr;align-items:start;gap:20px}
.cockpit-left,.cockpit-right{display:grid;gap:18px;min-width:0}
.nq-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.nq-list{display:grid;gap:10px}
.nq{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.nq-g{border-left-color:var(--warn)}
.nq-g.blocked{border-left-color:var(--crit)}
.nq-a{border-left-color:var(--info)}
.nq-q{border-left-color:var(--accent)}
.nq-bd{border-left-color:var(--crit)}
.nq-h{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.nq-h b{font-weight:800}
.nq-t{margin:5px 0;font-size:14px;line-height:1.4}
.nq-input{width:100%;box-sizing:border-box;margin:6px 0 0;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;resize:vertical;color:var(--ink);background:var(--surface)}
.nq-act{display:flex;gap:8px;margin-top:8px}
.nq-calm{display:flex;align-items:center;gap:14px}
.nq-calm-i{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--good) 15%,var(--surface));color:var(--good);font-size:20px;font-weight:800}
@media (max-width:900px){.cockpit{grid-template-columns:1fr}}
.conn-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;padding:10px 16px;border:1px solid var(--crit);border-radius:12px;background:color-mix(in srgb,var(--crit) 8%,var(--surface));color:var(--crit);font-size:14px;font-weight:600}
/* backlog master-detail — story list (left) + inline story detail (right) */
.bk-master{grid-template-columns:360px 1fr;align-items:start;gap:28px;margin-top:8px}
.bk-col{min-width:0}
.bk-col .bk-item{grid-template-columns:1fr auto;padding:14px 16px;margin-bottom:10px}
.bk-col .bk-item:hover{background:var(--surface-bright)}
.bk-item.on{outline:2px solid var(--accent);outline-offset:-1px;background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
/* the inline story detail sits in its own panel so it doesn't bleed into the page background (single, generous padding) */
.bk-detail{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px 28px 24px;box-shadow:var(--shadow)}
.bk-detail .story-page{margin:0;padding:0;max-width:none}
.bk-detail .story-rail .card{background:var(--surface-2)}
.bk-detail .empty{background:none;box-shadow:none;border:0;padding:32px 16px}
@media (max-width:1000px){.bk-master{grid-template-columns:1fr}}
/* cockpit responsive: stack the header and let the stage rail scroll rather than forcing the page wide */
@media (max-width:760px){.atiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .topbar{flex-wrap:wrap}
  .rail{display:flex;overflow-x:auto;gap:10px;-webkit-overflow-scrolling:touch}
  .rail .st{flex:0 0 200px}
  .tabs{overflow-x:auto;flex-wrap:nowrap}
}
.rail{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:22px 0 22px}
.st{background:var(--surface);border-radius:16px;padding:16px;box-shadow:var(--shadow);position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
.st.open{outline:2px solid var(--accent)}
.st .n{font-family:var(--font-display);font-weight:800;font-size:16px}
.st .d{color:var(--muted);font-size:13px;margin-top:2px}
.st .why{grid-column:1/-1;font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.4}
.st .bar{grid-column:1/-1;margin-top:8px}
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs button{padding:10px 14px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--accent-ink);border-color:var(--accent)}
.tabs button span{margin-left:6px;background:var(--surface-2);color:var(--muted);border-radius:99px;padding:0 7px;font-size:12px}
.items{display:grid;gap:10px}
.item{display:grid;grid-template-columns:1.4fr 1fr 1.6fr auto auto;gap:18px;align-items:center;background:var(--surface);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);transition:background var(--dur-fast,150ms) var(--ease-standard,ease),border-color var(--dur-fast,150ms) var(--ease-standard,ease)}
.item:hover{background:var(--surface-bright)}
.item .t b{display:block}
.item .t small{color:var(--muted);font-size:12px}
.owner{display:flex;align-items:center;gap:8px;font-size:14px}
.owner .av{width:26px;height:26px;font-size:10px}
.owner small{display:block;color:var(--muted);font-size:12px;line-height:1.2}
.track{display:flex;align-items:flex-start}
.track .s{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;line-height:1.25;text-align:center;color:var(--muted);width:64px;box-sizing:border-box;padding:0 3px;overflow-wrap:break-word;word-break:break-word;position:relative}
.track .s:not(:last-child)::after{content:"";position:absolute;top:9px;left:calc(50% + 10px);width:calc(100% - 20px);height:2px;background:var(--line)}
.track .s.done::after{background:var(--good)}
.track .s i{width:18px;height:18px;border-radius:50%;background:var(--surface-2);border:2px solid var(--line);display:block;z-index:1}
.track .s.done i{background:var(--good);border-color:var(--good)}
.track .s.run i{background:var(--surface);border-color:var(--good);box-shadow:0 0 0 4px var(--good-soft)}
.track .s.park i{background:var(--warn);border-color:var(--warn)}
.track .s.fail i{background:var(--crit);border-color:var(--crit)}
/* Every "did not run" step — skipped, optional-not-activated, off-by-default, conditional-not-fired,
   or absent from this story's blueprint version — renders as one calm hollow dashed circle, so a
   finished story reads as "solid green ran / faint hollow didn't" instead of four different circles. */
.track .s.opt i,.track .s.absent i{background:transparent;border-color:var(--line);border-style:dashed}
.track .s.opt{opacity:.6}
.track .s.absent{opacity:.4}
.track .s.absent::after{opacity:.4}
.item .more{display:flex;gap:6px}
.timeline{display:flex;flex-direction:column;gap:14px}
.tl-stage{background:var(--surface);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.tl-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tl-bar{position:relative;height:26px;border-radius:8px;background:var(--surface-2);overflow:hidden;min-width:120px}
.tl-fill{position:absolute;inset:0 auto 0 0;background:var(--accent-soft);border-right:2px solid var(--accent)}
.tl-bar span{position:absolute;inset:0;display:flex;align-items:center;padding:0 10px;font-size:12px;color:var(--ink-2);font-weight:600}
.ht{padding:10px 0;border-bottom:1px solid var(--line)}
.ht:last-child{border-bottom:0}
.ht b{display:block;font-size:14px;margin-bottom:2px}
.ht span{color:var(--ink-2);font-size:13px;line-height:1.45}
.side-panels{grid-template-columns:1fr 1fr 1fr;margin-top:22px}
.people{display:grid;gap:12px}
.person{display:flex;align-items:center;gap:12px}
.person b{display:block;font-size:14px}
.person small{color:var(--muted);font-size:12px}
.person .r{margin-left:auto;text-align:right;font-size:12px;color:var(--muted)}
.loc{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.loc:last-child{border-bottom:0}
.loc .ic{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-2);font-size:11px;font-weight:800}
.loc b{display:block;font-size:14px}.loc small{color:var(--muted);font-size:12px}
.loc .pill{margin-left:auto}
.tpl{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tpl:last-child{border-bottom:0}
.tpl b{display:block;font-size:14px}.tpl small{color:var(--muted);font-size:12px}
.tpl .btn{margin-left:auto}
/* ===== templates ===== */
.tplgrid{grid-template-columns:300px 1fr;align-items:start}
.tpl-list button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:12px 14px;border-radius:12px}
.tpl-list button:hover{background:var(--surface-2)}
.tpl-list button.on{background:var(--accent-soft)}
.tpl-list small{color:var(--muted);font-size:12px}
.steps{display:grid;gap:10px;margin-top:14px}
.step{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.step .who{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:11px;font-weight:800}
.step .who.agent{background:var(--info-soft);color:var(--info)}.step .who.human{background:var(--warn-soft);color:var(--warn)}.step .who.engine{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.step b{display:block}.step small{color:var(--muted);font-size:13px}
/* blueprint guide: each step beside exactly what its agent is told */
.steps-detail{display:grid;gap:10px}
.sd-row{display:grid;grid-template-columns:minmax(220px,1fr) 1.5fr;gap:16px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.sd-meta{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center}
.sd-meta .who{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:11px;font-weight:800}
.sd-meta .who.agent{background:var(--info-soft);color:var(--info)}.sd-meta .who.human{background:var(--warn-soft);color:var(--warn)}.sd-meta .who.engine{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.sd-meta b{display:block}.sd-meta small{color:var(--muted);font-size:13px}
.sd-prompt{margin:0;max-height:280px;overflow:auto;align-self:stretch}
.sd-noprompt{display:flex;align-items:center;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--surface)}
@media (max-width:820px){.sd-row{grid-template-columns:1fr}}
/* studio agents master-detail: agents (parents) → versions (children) → version detail inline */
.sa-grid{grid-template-columns:300px 1fr;align-items:start}
.sa-list{display:grid;gap:12px}
.sa-agent{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--surface)}
.sa-agent-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.sa-ver{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:6px;cursor:pointer;font:inherit;color:var(--ink)}
.sa-ver:last-child{margin-bottom:0}
.sa-ver:hover{background:var(--surface-2)}
.sa-ver.on{background:var(--accent-soft);border-color:var(--accent)}
.sa-detail{display:grid;gap:18px;min-width:0}
@media (max-width:820px){.sa-grid{grid-template-columns:1fr}}
.matrix{width:100%;border-collapse:separate;border-spacing:0 6px;margin-top:10px}
.matrix th{font-size:12px;color:var(--muted);font-weight:700;text-align:left;padding:0 12px 4px}
.matrix td{padding:10px 12px;background:var(--surface-2);font-size:13px}
.matrix td:first-child{border-radius:12px 0 0 12px;font-weight:700}
.matrix td:last-child{border-radius:0 12px 12px 0}
.matrix td small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.cell{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.cell.a{color:var(--good)}.cell.p{color:var(--warn)}.cell.f{color:var(--crit)}.cell.n{color:var(--muted);font-weight:400}
.cell .tight{font-size:10px;background:var(--crit-soft);color:var(--crit);border-radius:6px;padding:0 5px;margin-left:2px}
.cols2{grid-template-columns:1fr 1fr}
/* ===== modal ===== */
.overlay{position:fixed;inset:0;background:var(--scrim,rgba(0,0,0,.55));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:22px;width:min(920px,100%);box-shadow:var(--shadow-2xl,0 30px 80px -20px rgba(0,0,0,.45));display:grid;grid-template-columns:1fr 340px;max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden}
/* The whole modal scrolls inside its viewport cap, so any modal — one column (findings, delete) or two (start-task) —
   always reaches its last row and its footer buttons; a grid row can't reliably self-scroll, so the modal owns the scroll. */
.modal .form{padding:28px 30px;min-width:0}   /* min-width:0: a 1fr grid item defaults to min-content width and would overflow the modal (and clip its right edge) when a row is wide; let it shrink so wide rows fit and ellipsize instead */
.modal .preview{background:var(--surface-2);padding:28px 26px;border-left:1px solid var(--line)}
.field{margin-top:16px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice button{border:1px solid var(--line);border-radius:14px;padding:14px;text-align:left;background:var(--surface)}
.choice button.on{border-color:var(--accent);background:var(--accent-soft-2);outline:1px solid var(--accent)}
.choice b{display:block}.choice small{color:var(--muted);font-size:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .foot{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;position:sticky;bottom:0;background:var(--surface);padding-bottom:2px}
.preview h3{margin-bottom:4px}
.preview p{color:var(--muted);font-size:13px;margin:0 0 14px}
.menu{position:relative;display:inline-block}
.menu-backdrop{position:fixed;inset:0;z-index:40}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:41;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:190px;display:grid;gap:2px}
.menu-pop button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:14px;background:transparent;color:var(--ink);border:0;cursor:pointer}
.menu-pop button:hover{background:var(--surface-2)}
.menu-pop button.danger{color:var(--crit)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:var(--shadow);z-index:60}
/* laptop widths: the 14-step track gets its own row under title/owner instead of overflowing the card */
@media (max-width:1600px){.item{grid-template-columns:1.4fr 1fr auto auto;grid-auto-flow:dense;row-gap:10px}.item .track{grid-column:1/-1;justify-content:flex-start}}
/* Narrow viewports: fall back to the old single-column, whole-page-scrolls layout — sidebar and main
 * stack instead of sitting side-by-side in fixed boxes, so the contained-scroll shell (above) is undone here. */
@media (max-width:1100px){.app{grid-template-columns:1fr;height:auto;overflow:visible}.side{position:static;height:auto;overflow:visible}.main{height:auto;overflow:visible}.topbar,.story-top{position:static}.tiles,.plan-cards,.side-panels{grid-template-columns:1fr 1fr}.inbox{grid-template-columns:1fr}.rail{grid-template-columns:repeat(3,1fr)}.item{grid-template-columns:1fr 1fr}.modal{grid-template-columns:1fr;overflow-y:auto}.modal .form,.modal .preview{overflow-y:visible}.facts{grid-template-columns:1fr 1fr}}

/* ===== additions for the live app ===== */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .card{width:min(460px,100%)}
.login .brand{margin-bottom:16px}
.muted{color:var(--muted)}
.small{font-size:13px}
.empty{padding:36px;text-align:center;color:var(--muted);background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.err{background:var(--crit-soft);color:var(--crit);padding:10px 14px;border-radius:12px;font-weight:700;margin-top:10px}
.mono{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12.5px}
.tag{display:inline-block;background:var(--surface-2);color:var(--ink-2);border-radius:8px;padding:2px 8px;font-size:12px;margin:2px 4px 2px 0}
.tag.deny{background:var(--crit-soft);color:var(--crit)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.list{display:grid;gap:8px}
.rowline{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 -12px;border-radius:10px;border-bottom:1px solid var(--line);font-size:14px;transition:background var(--dur-fast,150ms) var(--ease-standard,ease)}
.rowline:last-child{border-bottom:0}
.rowline:hover{background:var(--surface-2)}
.rowline .r{margin-left:auto;text-align:right;color:var(--muted);font-size:13px}
/* column-header row for the read-only policy tables (aligns to .rowline inner grid content) */
.pt-th{display:grid;gap:6px;padding:0 0 6px;margin-bottom:2px;border-bottom:1px solid var(--line);color:var(--muted);font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
/* min-width:0 lets each grid cell honour its fr track (default min-width:auto lets a long unbreakable mono id blow the
   column out and shove the rest right, so header + rows misalign); overflow-wrap wraps the long token in place instead. */
.pt-th>*,.rowline[data-pt-action]>div>*,.rowline[data-pt-rule]>div>*,.rowline[data-pt-forbid]>div>*,.rowline[data-pt-env]>div>*{min-width:0;overflow-wrap:anywhere}
/* edit-mode header: flex row (inner grid flex:1 + hidden button spacer) so columns line up with the input rows.
   gap:12px matches .rowline's flex gap so the inner grid gets the same width as the rows' inner grid. */
.pt-th-e{display:flex;align-items:center;gap:12px}
.rail .st{cursor:pointer}
.rail .st:hover{outline:2px solid var(--line)}
.rail .st.open{outline:2px solid var(--accent)}
.stepmenu{position:relative}
/* the per-story "Steps…" pop-up (app.js stepMenu). It used the class name .menu, which also names the header's
   More ▾ wrapper — the later rule made the header menu position:absolute and it fell to the page corner. */
.stepmenu .menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:20;min-width:220px;display:block}
.stepmenu .menu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:13px}
.stepmenu .menu button:hover{background:var(--surface-2)}
.bar-h{display:flex;align-items:center;gap:10px;font-size:14px}
.bar-h .meter{flex:1}
.bar-h .v{min-width:70px;text-align:right}
.status-bar{margin-top:40px;padding:10px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;gap:16px}
.status-bar .ok{color:var(--good);font-weight:700}
.item.gate-row{background:var(--accent-soft-2)}
.pill.opt{border:1px dashed var(--line);color:var(--muted)}
.ver{display:grid;grid-template-columns:70px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.ver:last-child{border-bottom:0}
.ver b{font-family:var(--font-display)}
.ver small{color:var(--muted);display:block}
.kbd{font:11px var(--font-mono,ui-monospace,monospace);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted)}
.hint{color:var(--muted);font-size:12px;margin-top:8px}
.card h2 + .muted{margin:2px 0 14px;font-size:13px}
.detail.readonly .decide{display:none}
.ring{position:absolute;right:18px;top:18px}
.tile{min-height:170px}
@media (max-width:1100px){.split{grid-template-columns:1fr}}

.tlink{color:var(--accent-ink);text-decoration:none;font-weight:700}
.tlink:hover{text-decoration:underline}
.track .s a i{cursor:pointer}

/* ===== engagements list (dedicated page) ===== */
.engs{display:grid;gap:2px}
.engrow{display:grid;grid-template-columns:12px minmax(0,2.2fr) 1fr auto minmax(0,1.3fr) auto;gap:16px;align-items:center;width:100%;text-align:left;padding:13px 12px;border-radius:12px;border-bottom:1px solid var(--line)}
.engrow:last-child{border-bottom:0}
.engrow:hover{background:var(--surface-2)}
.engrow .dot{width:9px;height:9px}
.engrow .egn{min-width:0}
.engrow .egn b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.engrow .egn small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.engrow .egstage{color:var(--ink-2);font-size:13px;text-transform:capitalize}
.engrow .egmeta{color:var(--muted);font-size:13px;text-align:right;white-space:nowrap}
.engrow .egflags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:1100px){.engrow{grid-template-columns:12px 1fr auto;gap:10px}.engrow .egstage,.engrow .egmeta,.engrow .egflags{display:none}}

/* ---- story drawer + backlog (doc 37 · WP1) ---- */
.clickable{cursor:pointer}
.item .t.clickable:hover b{text-decoration:underline;text-decoration-color:var(--accent)}
.modal.drawer{grid-template-columns:1fr;width:min(760px,100%);justify-self:end;align-self:stretch;max-height:100vh;border-radius:22px 0 0 22px;margin:-20px -20px -20px 0}
.overlay:has(.modal.drawer){place-items:stretch end}
.drawer-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.drawer-head h2{margin:2px 0 0}
.drawer-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.drawer-pills{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.modal .form h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:22px 0 8px}
.modal .form h3 small{text-transform:none;letter-spacing:0;font-weight:500;margin-left:8px}
.prose{font-size:14px;line-height:1.55;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.prose .gap{height:8px}
.ac{margin:0;padding-left:20px;font-size:14px;line-height:1.55}
.kvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px;margin-top:18px}
.kv small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.kv > div{font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kv .av{width:22px;height:22px;font-size:9px}
.step-list{display:grid;gap:4px}
.step-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;font-size:14px}
.step-line:hover{background:var(--surface-2)}
.step-line small{color:var(--muted);font-size:12px;margin-left:8px}
.step-line .sl-end{display:inline-flex;align-items:center;gap:8px;justify-self:end;min-width:0}
.step-line .sl-end small{margin-left:0}
.step-line .dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.step-line.done .dot,.step-line .dot.completed{background:var(--good)}
.step-line.running .dot,.step-line .dot.running{background:var(--accent)}
.step-line.failed .dot,.step-line .dot.failed{background:var(--crit)}
.step-line.parked .dot,.step-line.gated .dot,.step-line .dot.parked{background:var(--warn)}
.step-line.skipped .dot,.step-line.absent .dot{background:transparent;border:1px solid var(--line)}
/* agent-run cards: header + a collapsible, Markdown-rendered summary (doc 42 · story UX) */
.run-list{display:grid;gap:12px}
.run-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.run-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.run-title{display:flex;align-items:center;gap:8px;font-size:15px}
.run-title b{font-weight:700}
.run-title .dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:0 0 9px}
.run-title .dot.completed,.run-title .dot.done{background:var(--good)}
.run-title .dot.running{background:var(--accent)}
.run-title .dot.failed{background:var(--crit)}
.run-title .dot.parked{background:var(--warn)}
.run-cost{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:1px 9px}
.run-meta{color:var(--muted);font-size:12px;margin:5px 0 0}
.run-sum{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;overflow:hidden;max-height:9em;position:relative}
.run-sum.expanded{max-height:none}
.run-sum.has-more:not(.expanded)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2.4em;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.sum-toggle{margin-top:8px;background:none;border:none;color:var(--accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:2px 0}
.sum-toggle:hover{text-decoration:underline}
.seg.sm{padding:2px}
.seg.sm button{padding:4px 10px;font-size:12px;border:none;background:none;cursor:pointer}
/* read-only story flow chart (the story's steps as the blueprint DAG, coloured by status) */
.story-flow{max-height:480px;border:1px solid var(--line);border-radius:12px;overflow:auto;background:var(--surface-2);padding:10px;display:flex;justify-content:center}
.sf-svg{display:block}
.sf-node{width:100%;height:100%;box-sizing:border-box;padding:7px 10px;border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:9px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:12px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.sf-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.sf-status{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-done{border-left-color:var(--good)}
.sf-running{border-left-color:var(--accent)}
.sf-failed{border-left-color:var(--crit)}
.sf-wait{border-left-color:var(--warn)}
.sf-skip{border-left-color:var(--line);opacity:.6}
.sf-plan{border-left-color:var(--muted)}
.md{line-height:1.5;word-break:break-word}
.md>:first-child{margin-top:0}
.md h1,.md h2,.md h3,.md h4{font-size:13px;font-weight:700;margin:8px 0 4px}
.md p{margin:4px 0}
.md ul,.md ol{margin:4px 0;padding-left:18px}
.md li{margin:2px 0}
.md code{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;background:var(--surface-2);padding:1px 4px;border-radius:4px}
.md pre{background:var(--surface-2);padding:8px;border-radius:6px;overflow-x:auto}
.md pre code{background:none;padding:0}
.md hr{border:none;border-top:1px solid var(--line);margin:8px 0}
.md strong{font-weight:700}
.md a{color:var(--accent)}
/* story as a full routed page (doc 42 · story UX): two columns — main content + a sticky details rail */
.story-page{padding:20px 28px;max-width:none;margin:0}
/* story header sticks to the top of the shared .main scroll box too (same pattern as .topbar). */
.story-top{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5;background:var(--bg);margin:-24px -44px 16px;padding:24px 44px 12px;border-bottom:1px solid var(--line)}
.story-top .story-actions{margin-left:auto;display:flex;gap:8px}
.btn.ghost{background:none}
.story-title{font-size:24px;font-weight:800;margin:6px 0 10px;line-height:1.2}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:14px}
.story-main{min-width:0}
/* story detail tab bar (Details / Steps / Runs) */
.story-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 0}
.story-tabs button{padding:9px 16px;border:none;background:none;font:inherit;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:7px}
.story-tabs button:hover{color:var(--ink-2)}
.story-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.story-tabs button span{font-size:11px;font-weight:700;background:var(--surface-2);color:var(--muted);border-radius:999px;padding:1px 7px}
.story-tabs button.on span{background:var(--accent-soft);color:var(--accent-ink)}
.story-tabbody{padding-top:20px}
.story-detail-kvs{margin-top:14px}
/* each sub-section (Description, Acceptance, Steps, Agent runs, Deviations) reads as a distinct block: a hairline
   divider + generous top space, a slightly stronger heading. The first section gets no divider. */
.story-main>h3,.story-main>.nq-head{margin:26px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.story-main>h3:first-child,.story-main>.nq-head:first-child{margin-top:0;padding-top:0;border-top:0}
.story-main h3{font-size:15px;font-weight:700;color:var(--ink)}
.story-main h3 small{font-weight:600;margin-left:6px}
.story-rail{position:sticky;top:16px}
.story-rail .card{padding:14px 16px}
.story-rail .card h3{margin:0 0 10px}
.story-rail-kvs{display:grid;grid-template-columns:1fr;gap:12px}
@media (max-width:900px){.story-grid{grid-template-columns:1fr}.story-rail{position:static}}
/* reusable searchable combobox (doc 42) — components/combo.js */
.combo{position:relative}
.combo-box{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:34px;padding:3px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:text}
.combo-box.open{border-color:var(--accent)}
.combo-input{flex:1;min-width:80px;border:none;outline:none;background:transparent;font:inherit;color:var(--ink);padding:2px 0}
.combo-chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:1px 4px 1px 8px;font-size:12px;line-height:1.6}
.combo-chip button{border:none;background:none;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:0 2px}
.combo-chip button:hover{color:var(--crit)}
.combo-menu{position:absolute;z-index:50;left:0;right:0;margin-top:4px;max-height:240px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.combo-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;cursor:pointer;font-size:13px}
.combo-opt small{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.combo-opt.active{background:var(--surface-2)}
.combo-opt.sel{color:var(--accent);font-weight:600}
.combo-opt.sel::after{content:'✓';color:var(--accent);margin-left:6px}
.combo-empty{padding:8px 10px;color:var(--muted);font-size:13px}
/* visual blueprint flow (doc 42) — React Flow canvas + custom step nodes */
.bp-flow{display:flex;flex-direction:column;height:calc(100vh - 40px)}
.bp-flow__bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bp-flow__body{flex:1;min-height:0;display:flex}
.bp-flow__canvas{flex:1;min-width:0;min-height:0}
.bp-inspector{width:320px;flex:0 0 320px;border-left:1px solid var(--line);background:var(--surface);padding:14px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.bp-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bp-inspector__head b{font-size:15px;word-break:break-word}
.bp-inspector .fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.bp-inspector .fld input,.bp-inspector .fld select,.bp-inspector .fld textarea{font:inherit;font-size:13px;color:var(--ink);padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);width:100%;box-sizing:border-box}
.bp-inspector .fld textarea{resize:vertical;line-height:1.4}
.bp-node.sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.bp-node{width:100%;height:100%;box-sizing:border-box;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.06);font-size:13px;overflow:hidden}
.bp-node__name{font-weight:700}
.bp-node__meta{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.bp-badge{font-size:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:0 7px;line-height:1.7}
.bp-badge.muted{color:var(--muted)}
.bp-node.bp-gate{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.bp-node.bp-human{border-color:var(--accent)}
.bp-node.bp-system{border-style:dashed}
.react-flow__handle{width:8px;height:8px;background:var(--accent);border:none}
.bk-group{margin-bottom:22px}
.bk-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px 10px}
.bk-head b{text-transform:capitalize}
.bk-item{display:grid;grid-template-columns:1.2fr 1.6fr auto;gap:18px;align-items:center;background:var(--surface);border-radius:14px;padding:12px 18px;box-shadow:var(--shadow);margin-bottom:8px}
.bk-item:hover .t b{text-decoration:underline;text-decoration-color:var(--accent)}
.bk-item .t b{display:block}
.bk-item .t small{color:var(--muted);font-size:12px}
.bk-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-right{display:flex;gap:6px;justify-content:flex-end;align-items:center}
@media (max-width:760px){.bk-item{grid-template-columns:1fr}.bk-desc{white-space:normal}.modal.drawer{border-radius:0;margin:-20px}}

.me .signout{margin-left:auto;font-size:11px;color:var(--muted);padding:4px 6px;border-radius:6px;white-space:nowrap}
.me .signout:hover{background:var(--surface-2);color:var(--ink)}
.login details summary{list-style:none}

/* WP5 (doc 37 §4): one nav, seven tabs, one error banner */
.err.banner{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.err.banner .btn{margin-left:auto}
.sect{margin-bottom:26px}.sect>h2{margin:0 0 2px}
.set-row{padding:10px 0;border-bottom:1px solid var(--line)}.set-row:last-child{border-bottom:0}
.items.runs .item.run-row{grid-template-columns:1.3fr .9fr 1.4fr auto auto auto}
.item .t[role=button]:focus-visible,.st:focus-visible,.bk-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tabs button[role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:1100px){.items.runs .item.run-row{grid-template-columns:1fr 1fr auto auto}.items.runs .item.run-row>.muted.small{display:none}}

/* ===== engagement UI refresh (doc 42 · WP5): hover affordances, per-section surfaces, For-You + folded stages ===== */
/* #2 hover affordances — cursor:pointer + a tasteful transition on everything that actually does something. CSS only. */
.btn,.atile,.tabs button,.st,.stage-fold>summary,.item .t.clickable,.qi,.tpl-list button,.sa-ver,.hdr-menu .menu-pop button,.menu-pop button,.nav button,.engagements-list button,.nq-act button,.seg button{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease,color .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(30,36,51,.06),0 10px 22px -12px rgba(30,36,51,.22)}
.btn:active{transform:translateY(0)}
.atile:hover{transform:translateY(-2px);box-shadow:0 6px 20px -8px rgba(30,36,51,.28)}
.tabs button{cursor:pointer;border-radius:9px 9px 0 0}
.tabs button:hover{color:var(--ink);background:var(--surface-2)}
.tabs button.on:hover{color:var(--accent-ink)}
.item .t.clickable{cursor:pointer}
.nq-act button:hover{transform:translateY(-1px)}
/* #3 per-section backgrounds — every panel gets a hairline border over its shadow so sections separate on the flat page,
   and the key sections carry their own restrained, brand-derived tint (accent / info / neutral) so each reads distinctly. */
.card{border:1px solid var(--line)}
.nq-card{background:color-mix(in srgb,var(--accent) 4%,var(--surface));border-color:color-mix(in srgb,var(--accent) 16%,var(--line))}
.stages-sect>.card:first-child{background:color-mix(in srgb,var(--info) 5%,var(--surface));border-color:color-mix(in srgb,var(--info) 16%,var(--line))}
.sect>h2,.stages-sect>h2{margin-top:0}
/* #4 one current-stage block: stageSummary header + work items in the same card, split by a hairline */
.stage-work{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
/* #5 folded stages — collapsed folders for every non-current stage */
.stage-folders{background:var(--surface-2)}
.stage-fold{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;overflow:hidden}
.stage-fold:last-child{margin-bottom:0}
.stage-fold>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-size:14px}
.stage-fold>summary::-webkit-details-marker{display:none}
.stage-fold>summary::before{content:"▸";color:var(--muted);font-size:11px;transition:transform .15s ease}
.stage-fold[open]>summary::before{transform:rotate(90deg)}
.stage-fold>summary:hover{background:var(--surface-2)}
.stage-fold>summary b{font-family:var(--font-display),system-ui,sans-serif;font-weight:800}
.stage-fold .sfold-bar{width:120px;margin-left:auto;flex:none}
.stage-fold-body{padding:0 16px 16px;border-top:1px solid var(--line)}
.stage-fold-body>.nq-head{margin-top:12px}
/* #1 For You — open (actionable) beside answered (read-only history) */
.fy-grid{grid-template-columns:1fr 1fr;align-items:start}
.fy-list{display:grid;gap:10px}
.fy-ans{border:1px solid var(--line);border-left:3px solid var(--good);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.fy-ans.fy-gate{border-left-color:var(--info)}
.fy-ans.fy-approval{border-left-color:var(--accent)}
.fy-ans .nq-h{align-items:center}
.fy-ans .fy-meta{margin-left:auto;text-transform:none;letter-spacing:0;text-align:right}
.fy-ans .fy-lbl{text-transform:uppercase;letter-spacing:.05em}
.fy-ans .fy-a{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:14px;line-height:1.45}
@media (max-width:900px){.fy-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.btn,.atile,.tabs button,.st,.stage-fold>summary,.stage-fold>summary::before,.nq-act button{transition:none}.btn:hover,.atile:hover,.nq-act button:hover{transform:none}}

/* ============================================================================
 * C2 — Engagement cockpit re-skin (design-system): tightens the cockpit-only
 * legacy classes + the tab-body surfaces onto the new card / badge / type look.
 * Loaded first (styles.css) but these rules only touch legacy classes that
 * components-ui.css does not define, or are scoped tighter than the .ui-*
 * primitives, so they win. Scope is the cockpit only: the shell classes
 * (.atiles/.rail/.st/.nq…) are cockpit-exclusive, and the tab bodies are
 * scoped under [role=tabpanel] (unique to Engagement.js) + .story-page.
 * ==========================================================================*/
/* Header KPI strip — the four AnswerTiles now ride .ui-kpi; restore click affordance + captions. */
.atiles{gap:var(--space-sm)}
.atiles .ui-kpi{cursor:pointer;text-align:left;gap:3px;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease}
.atiles .ui-kpi:hover{border-color:var(--outline);background:var(--surface-container);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.atiles .ui-kpi:active{transform:translateY(0)}
.atiles .ui-kpi .of{font-size:13px;color:var(--muted);font-weight:600}
.atiles .ui-kpi .sub{font-size:var(--fs-body-sm);color:var(--muted);margin-top:1px}
.atiles .ui-kpi .ui-meter.sm{height:6px;margin:3px 0 1px}
@media (prefers-reduced-motion: reduce){.atiles .ui-kpi{transition:none}.atiles .ui-kpi:hover{transform:none}}
/* Tab bar — .ui-tabs primitive drives the look; keep the cockpit's spacing below it. */
.ui-tabs.tabs{margin-bottom:18px;flex-wrap:wrap;row-gap:0}
/* Stage rail — glass cards with a glowing selected state (was a flat outline). */
.rail .st{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-soft)}
.rail .st:hover{outline:none;border-color:var(--outline);background:var(--surface-bright)}
.rail .st.open{outline:none;background:color-mix(in srgb,var(--accent) 8%,var(--surface));border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:var(--shadow-glow-primary)}
/* Tab-body surfaces — one card/glass + badge language across every cockpit tab. */
[role=tabpanel] .card,.story-page .card{border-radius:var(--radius-xl);border:1px solid var(--line);background:var(--surface-card);box-shadow:var(--shadow-soft)}
[role=tabpanel] .pill,.story-page .pill{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-badge-status);font-weight:600}
[role=tabpanel] .nq{border-radius:var(--radius-lg)}
[role=tabpanel] .run-card,.story-page .run-card{border-radius:var(--radius-xl);border:1px solid var(--line)}
[role=tabpanel] .stage-fold,[role=tabpanel] .item,[role=tabpanel] .tl-stage{border-radius:var(--radius-lg)}

/* ============================================================================
 * C3 · PASS B — Blueprint Studio (flow graph + catalog) & Pipeline/Runs
 * Visual re-skin to the dark design system. Token-driven; consistent with the
 * C2 cockpit + Pass A. Logic/handlers unchanged — these are pure look rules.
 * (Appended last so equal-specificity rules win over the base .bp-*/.sa-* set.)
 * ==========================================================================*/

/* ---- Blueprint flow graph (BlueprintFlow.js — React Flow via preact/compat) ---- */
.bp-flow__bar{background:var(--surface-container-low);border-bottom:1px solid var(--outline-variant);padding:12px 16px}
.bp-flow__bar b.mono{font-family:var(--font-mono);font-size:var(--fs-code-md);color:var(--on-surface)}
.bp-flow__canvas{background:var(--surface-container-lowest)}
.react-flow__background{color:var(--surface-container-highest)}
/* node card — DS surface, mode-tinted left spine, mono name, DS badges, glow on select */
.bp-node{width:100%;height:100%;box-sizing:border-box;padding:9px 12px 9px 15px;border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-soft);
  font-size:var(--fs-body-sm);overflow:hidden;position:relative;color:var(--on-surface)}
.bp-node::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--outline);border-radius:var(--radius-full)}
.bp-node__name{font-family:var(--font-body);font-weight:700;font-size:var(--fs-body-md);letter-spacing:-.01em;color:var(--on-surface)}
.bp-node__meta{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.bp-badge{font-family:var(--font-mono);font-size:var(--fs-label-caps);letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-container-high);border:1px solid var(--outline-variant);color:var(--on-surface-variant);
  border-radius:var(--radius-full);padding:1px 8px;line-height:1.7}
.bp-badge.muted{color:var(--outline)}
.bp-node.bp-agent{border-color:color-mix(in srgb,var(--primary) 30%,var(--outline-variant))}
.bp-node.bp-agent::before{background:var(--primary)}
.bp-node.bp-agent .bp-badge:first-of-type{background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary);border-color:transparent}
.bp-node.bp-gate{border-color:color-mix(in srgb,var(--error) 45%,transparent);background:color-mix(in srgb,var(--error) 7%,var(--surface-card))}
.bp-node.bp-gate::before{background:var(--error)}
.bp-node.bp-gate .bp-badge:first-of-type{background:color-mix(in srgb,var(--error) 20%,transparent);color:var(--error);border-color:transparent}
.bp-node.bp-human{border-color:color-mix(in srgb,var(--secondary) 40%,transparent)}
.bp-node.bp-human::before{background:var(--secondary)}
.bp-node.bp-human .bp-badge:first-of-type{background:color-mix(in srgb,var(--secondary) 18%,transparent);color:var(--secondary);border-color:transparent}
.bp-node.bp-system{border-style:dashed}
.bp-node.bp-system::before{background:var(--outline-variant)}
.bp-node.sel{border-color:color-mix(in srgb,var(--primary) 60%,transparent);box-shadow:var(--shadow-glow-primary)}
.react-flow__handle{width:8px;height:8px;background:var(--surface-container-highest);border:1px solid var(--outline)}
.react-flow__edge-path{stroke:var(--outline);stroke-width:1.5}
.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:hover .react-flow__edge-path{stroke:var(--primary)}
.react-flow__controls{box-shadow:var(--shadow-md);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--outline-variant)}
.react-flow__controls button{background:var(--surface-container-low);border-bottom:1px solid var(--outline-variant);color:var(--on-surface)}
.react-flow__controls button:hover{background:var(--surface-container)}
.react-flow__controls button svg{fill:var(--on-surface-variant)}
.react-flow__minimap{background:var(--surface-container-lowest)!important;border:1px solid var(--outline-variant);border-radius:var(--radius-lg)}
.bp-inspector{background:var(--surface-container-lowest);border-left:1px solid var(--outline-variant)}
.bp-inspector__head b{font-family:var(--font-display)}

/* ---- Studio hero header (mockup: eyebrow + sync ping + lede) ---- */
.studio-hero{position:relative;overflow:hidden;border-radius:var(--radius-2xl);background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant);box-shadow:var(--shadow-md);padding:var(--space-lg);margin-bottom:var(--space-lg)}
.studio-hero .hero-row{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
.studio-hero h1{margin:6px 0 4px;font-family:var(--font-display);font-size:var(--fs-headline-lg);line-height:var(--lh-headline-lg);letter-spacing:var(--ls-headline-lg);color:var(--on-surface)}
.studio-hero p{margin:0;max-width:70ch;color:var(--on-surface-variant);font-size:var(--fs-body-md)}
.studio-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-label-caps);letter-spacing:var(--ls-label-caps);text-transform:uppercase}
.studio-eyebrow .tag{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary);border-radius:var(--radius);padding:2px 8px;margin:0}
.studio-eyebrow .sync{display:inline-flex;align-items:center;gap:6px;color:var(--tertiary)}
.studio-eyebrow .sync i{width:6px;height:6px;border-radius:50%;background:var(--tertiary);display:inline-block;animation:pulse 1.6s ease-in-out infinite}

/* ---- Studio catalog cards (sa-agent/sa-ver — keep wire() hooks) ---- */
.sa-agent{border:1px solid var(--outline-variant);border-radius:var(--radius-xl);padding:12px 14px;background:var(--surface-card);box-shadow:var(--shadow-soft);transition:border-color .15s ease,background-color .15s ease}
.sa-agent:hover{border-color:var(--outline);background:var(--surface-bright)}
.sa-kind{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-family:var(--font-mono);font-size:var(--fs-label-caps);letter-spacing:var(--ls-label-caps);text-transform:uppercase;color:var(--on-surface-variant)}
.sa-kind .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block}
.sa-kind.k-blueprint .dot{background:var(--secondary)}
.sa-kind.k-agent_variant .dot{background:var(--primary)}
.sa-kind.k-engagement_type .dot{background:var(--tertiary)}
.sa-kind.k-connector_def .dot{background:var(--secondary)}
.sa-agent-head b{font-family:var(--font-display);font-size:var(--fs-headline-sm);letter-spacing:-.01em}
.sa-ver{border:1px solid var(--outline-variant);border-radius:var(--radius-lg);background:var(--surface-container-lowest)}
.sa-ver:hover{background:var(--surface-container-high)}
.sa-ver.on{background:color-mix(in srgb,var(--primary) 12%,var(--surface-container));border-color:color-mix(in srgb,var(--primary) 55%,transparent);box-shadow:var(--shadow-glow-primary)}
.sa-ver b{font-family:var(--font-mono);font-size:var(--fs-code-md)}

/* ---- Pipeline & Runs — stage ribbon, command strip, table, telemetry ---- */
.runs-layout{display:grid;grid-template-columns:1fr;gap:var(--space-lg);align-items:start}
@media (min-width:1180px){.runs-layout{grid-template-columns:minmax(0,3fr) minmax(250px,1fr)}}
.runs-main{min-width:0;display:flex;flex-direction:column;gap:var(--space-md)}
.runs-side{display:flex;flex-direction:column;gap:var(--space-md);min-width:0}
.stage-ribbon{display:flex;align-items:center;gap:var(--space-sm);overflow-x:auto;padding:var(--space-sm) var(--space-md);
  background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft)}
.stage-ribbon .rib{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-lg);background:var(--surface-container-low);white-space:nowrap;flex:none}
.stage-ribbon .rib.on{background:var(--surface-container-high);box-shadow:var(--shadow-soft)}
.stage-ribbon .rib.up{opacity:.55}
.stage-ribbon .rib .rn{font-family:var(--font-display);font-size:var(--fs-headline-sm);color:var(--on-surface)}
.stage-ribbon .sep{color:var(--outline-variant);flex:none}
.cmd-strip{display:grid;grid-template-columns:1fr;gap:var(--space-sm);padding:var(--space-md);background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft)}
@media (min-width:760px){.cmd-strip{grid-template-columns:2fr 1.2fr 1fr auto}}
.cmd-strip .ui-field,.cmd-strip .ui-select{min-width:0}
.runs-table-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:10px 14px;
  background:var(--surface-card);border:1px solid var(--outline-variant);border-bottom:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.runs-table-head b{font-family:var(--font-display);font-size:var(--fs-headline-sm);display:inline-flex;align-items:center;gap:8px}
.runs-table-head .material-symbols-outlined{color:var(--primary)}
.runs-table-head + .ui-table-wrap{border-radius:0;border-bottom:none}
.runs-log-snip{padding:8px 10px;border-radius:var(--radius-lg);background:var(--surface-container-lowest);border:1px solid var(--outline-variant);
  font-family:var(--font-mono);font-size:var(--fs-code-sm);line-height:1.5;color:var(--on-surface-variant);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:42ch}
.ui-table td .rt-key{font-family:var(--font-mono);font-size:var(--fs-code-sm);font-weight:600;color:var(--secondary)}
.ui-table td .rt-title{display:block;margin-top:2px;font-weight:600;color:var(--on-surface)}
.ui-table td .rt-agent{font-family:var(--font-mono);font-size:var(--fs-code-sm);color:var(--on-surface)}
.ui-table td .rt-sub{display:block;margin-top:2px;font-family:var(--font-mono);font-size:var(--fs-code-sm);color:var(--on-surface-variant)}
.ui-table td .rt-cost{font-family:var(--font-mono);font-weight:600;color:var(--tertiary)}
.ui-table td.rt-clickable{cursor:pointer}
.ui-table td.rt-clickable:hover .rt-title{text-decoration:underline;text-decoration-color:var(--primary)}
.runs-pageft{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;
  padding:10px 14px;background:var(--surface-card);border:1px solid var(--outline-variant);border-top:none;
  border-radius:0 0 var(--radius-xl) var(--radius-xl);font-family:var(--font-mono);font-size:var(--fs-code-sm);color:var(--on-surface-variant)}
.runs-kpi{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.runs-kpi .kv{font-family:var(--font-display);font-size:var(--fs-headline-md);font-weight:700}
.runs-kpi .kv.t{color:var(--tertiary)}.runs-kpi .kv.s{color:var(--secondary)}.runs-kpi .kv.p{color:var(--primary)}
.runs-side .ui-card{position:relative;overflow:hidden}

/* ============================================================================
 * C4 — GOAL A: hover-coverage audit (handoff/findings/018). Every remaining
 * clickable/selectable surface that had no perceptible hover, found by cross-
 * referencing onClick/data-act/data-go/cursor:pointer against existing :hover
 * rules. Grouped by source location for locality; each states resting → hover.
 * ==========================================================================*/
/* Theme/segmented toggle (.seg — Light/Dark/Auto, story Steps List/Flow): only the
   selected (.on) button had a background; the other segments gave zero feedback.
   Resting: transparent on .seg's --surface-2 (dark #1c1f2a). Hover: --surface-bright
   (#353944) — two ramp steps up, clearly short of .on's own --surface (#0c0e19, a
   different, "pressed-in" tone) so hover never reads as selected. */
.seg button:hover{background:var(--surface-bright);color:var(--ink)}
/* Searchable combobox options (components/combo.js .combo-opt) — clickable via
   onmousedown, but only keyboard nav (.active) had a background; the mouse got no
   feedback at all. Resting: transparent on .combo-menu's --surface (#0c0e19 dark).
   Hover: --surface-2 (#1c1f2a) — the same treatment as keyboard .active, since both
   mean "candidate to pick"; .sel (already-chosen value) only recolors text, so the
   two states compose without conflict. */
.combo-opt:hover{background:var(--surface-2)}
/* Blueprint Studio flow-graph node (components/BlueprintFlow.js StepNode) — clickable
   (onNodeClick) and selectable (.sel), but had no cursor or hover at all. Resting:
   --surface-card (#0c0e19 dark). Hover: --surface-bright (#353944), same delta as the
   catalog's .sa-agent:hover for a consistent "card" hover language. Declared before
   .bp-node.sel (above) so a selected node's glow/border always wins over hover. */
.bp-node{cursor:pointer}
.bp-node:hover{border-color:var(--outline);background:var(--surface-bright)}
/* Portfolio KPI tile deep-links ("Open inbox →" etc., .tile a) and the plain nav
   anchor pattern (e.g. Overview's "all runs", a.muted with data-go) — real links with
   zero hover. Text-only affordance (no surrounding block to raise), matching .tlink. */
.tile a:hover{text-decoration:underline}
a.muted:hover{color:var(--ink);text-decoration:underline}
/* Story track step icons (.track .s a i, styles.css ~L421) — cursor:pointer already
   set but no visual feedback; the icon's fill carries run-status meaning (done/run/
   park/fail) so hover adds a neutral ring instead of replacing the background.
   Resting varies by status (default --surface-2 #1c1f2a idle). Hover: +3px ring in
   --line (#494454). */
.track .s a:hover i{box-shadow:0 0 0 3px var(--line)}
/* Modal "choice" picker (.choice button — e.g. start-task's Agent story / Human story):
   only the selected (.on) button had any styling; the unselected button was inert.
   Resting: --surface (#0c0e19 dark) with a --line border. Hover: --surface-bright
   (#353944) + --outline border — declared before .choice button.on so the selected
   choice keeps its own accent look even when hovered. */
.choice button:hover{background:var(--surface-bright);border-color:var(--outline)}
/* Regression fix — hover-beats-selected specificity bug: `.bk-col .bk-item:hover`
   (3 simple selectors) is MORE specific than `.bk-item.on` (2), so hovering a
   selected backlog row silently lost its accent-tinted selected background (only
   the outline stayed). Re-asserts the selected look at higher specificity so
   selected-and-hovered stays visibly distinct from plain hover. */
.bk-col .bk-item.on:hover{background:color-mix(in srgb,var(--accent) 14%,var(--surface-bright))}
@media (prefers-reduced-motion: reduce){.bp-node,.seg button,.choice button{transition:none}}

/* ============================================================================
 * C4 — GOAL B: page → section → sub-section → row hierarchy (handoff/findings/018).
 * CSS-only (keys off DOM structure, not new markup) so it applies everywhere at
 * once: Admin, the engagement cockpit, Connectors modal, Inbox, Portfolio, Studio.
 *   · page   = h1 in .topbar (existing)
 *   · section = a bare h2 outside any card (e.g. "Executing right now", "Time
 *     buckets") — keeps the existing headline-md size, i.e. the biggest step
 *     below the page title.
 *   · sub-section = any h2/h3 living INSIDE a .card/.ui-card ("Needs you",
 *     Admin's "Personas", a Metrics card's "Cost by reason"...). Previously an
 *     in-card h2 rendered at the SAME size as a page-level section h2 (the
 *     reported "blends into the page" bug), and h3 defaulted to a muted,
 *     de-emphasized caption color — wrong for a heading actually titling a
 *     block. Demoted to headline-sm and promoted to full-strength ink+bold, and
 *     the header row gets a hairline rule so the block reads as its own unit.
 *   · row = existing .rowline/.item/.qi/... hairline dividers (unchanged).
 * ==========================================================================*/
.card h2,.ui-card h2{font-size:var(--fs-headline-sm);line-height:var(--lh-headline-sm);letter-spacing:var(--ls-headline-sm)}
.card h3,.ui-card h3{color:var(--ink);font-weight:800}
.card>h2:first-child,.card>h3:first-child,.ui-card>h2:first-child,.ui-card>h3:first-child,
.card>div:first-child:has(>h2),.card>div:first-child:has(>h3),
.ui-card>div:first-child:has(>h2),.ui-card>div:first-child:has(>h3){
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line)}
/* Engagement cockpit "main information" header block (.plan-head, Engagement.js) —
   explicit must-fix: the client name sat with no page-level cue distinguishing it
   from the section below. Adds the same eyebrow-label move already used by the
   Studio hero (.studio-eyebrow) — CSS ::before, no markup change. */
.plan-head{position:relative;padding-top:20px}
.plan-head::before{content:"Engagement";position:absolute;top:0;left:0;font-family:var(--font-mono);
  font-size:var(--fs-label-caps);letter-spacing:var(--ls-label-caps);text-transform:uppercase;color:var(--on-surface-variant)}
.plan-head .client{font-size:var(--fs-headline-lg,26px);line-height:1.2}

/* ============================================================================
 * Finding 027 — full-page policy draft editor (#/admin/policy/draft[/<vid>]).
 * Reuses existing tokens only (--surface/--surface-2/--line/--good/--warn/--crit/
 * --accent/--muted) — no new colors, so nothing needed in the theme selectors.
 * ==========================================================================*/
.pd-stepper{display:flex;align-items:center;gap:8px;font-size:12px}
.pd-step{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-weight:700;white-space:nowrap}
.pd-step.done{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.pd-step.active{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-ink,var(--accent))}
.pd-step-sep{color:var(--muted)}
/* Rule groups — practice›connector (or practice/connector/action) nesting, expanded by default. */
.pd-group{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pd-group-l1{background:var(--surface)}
.pd-group-l2{margin:8px 10px 8px 18px;border-style:dashed}
.pd-group-wild{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.pd-group-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
.pd-group-body{padding:6px 10px}
.pd-group-body .pd-group{margin-top:0}
.pd-rule{display:flex;align-items:flex-start;gap:10px;padding:10px 4px}
.pd-rule-sentence code{background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:12px}
.pd-rule-fields input,.pd-rule-fields select{width:100%;box-sizing:border-box;padding:5px 7px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:12px;color:var(--ink);background:var(--surface)}
/* Collapsed rule row (default): just the sentence + Edit. Expanded: sentence + fields + a secondary,
 * muted rule-id row (never shown collapsed) — matches the "clean sentences, editor only on demand" redesign. */
.pd-rule{align-items:center}
.pd-rule.pd-rule-open{align-items:flex-start;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.pd-rule-idrow{display:flex;align-items:center;gap:6px;margin-top:8px}
.pd-rule-idrow input{width:160px;padding:3px 7px;border:1px solid var(--line);border-radius:6px;font-size:11px;background:var(--surface);color:var(--muted)}
/* Hard boundaries — locked red zone. org_forbids always wins; visually distinct from Rules. */
.pd-danger-zone{border:1px solid var(--crit);border-radius:12px;background:color-mix(in srgb,var(--crit) 5%,var(--surface-card));padding:2px}
.pd-danger-zone .ui-card{border:none;background:transparent}
.pd-danger-zone .pt-th{color:var(--crit)}
.pd-forbid-note{color:var(--crit)}
#pd-rule-search{padding:6px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:var(--surface);color:var(--ink)}
#pd-groupby{padding:6px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:var(--surface);color:var(--ink)}
/* Round 3: the narrow sticky Result column is gone — the editor/view pages are single-column, full width
 * (no more .pd-grid split). In its place: a slim one-line impact strip atop the Policy tab, and a dedicated,
 * full-width Preview tab for the resolved matrix + what-if. */
.pd-impact-strip{display:flex;align-items:center;gap:12px;padding:8px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.pd-impact-strip button{margin-left:auto;flex:none}
/* Preview tab matrix: icon + text per cell (no color-only dots) — icon shape carries the meaning, color is
 * secondary reinforcement only. Reuses the existing .cell a/p/f color classes. */
.matrix-preview .cell{gap:6px}
.matrix-preview .cell .material-symbols-outlined{font-size:16px}