:root{
  /* SOP Builder design tokens */
  --primary:#182540;
  --secondary:#374151;
  --tertiary:#121212;
  --neutral:#FFFFFF;
  --surface-light:#F7F7F7;
  --on-surface:#121212;
  --background:#121212;
  --text:#FFFFFF;
  --border:#374151;
  --error:#B42318;

  /* Practical dark-app adaptations */
  --bg:#121212;
  --paper:#121212;
  --paper2:#181818;
  --paper3:#1F1F1F;
  --surface-dark:#1A1A1A;
  --text-strong:#FFFFFF;
  --text-soft:#E7E9ED;
  --muted:#9CA3AF;
  --muted2:#6B7280;
  --line:rgba(55,65,81,.72);
  --line2:rgba(55,65,81,.92);
  --nav:#0F0F0F;
  --toolbar:#101010;
  --accent:#24324F;
  --accent-strong:#2B3E66;
  --accent-muted:#172036;
  --shadow:none;

  --radius-none:0px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:24px;
  --radius-full:9999px;

  --toc-open:300px;
  --toc-closed:52px;
  --bar-h:60px; /* full-width top app-bar height; JS re-measures into this var so columns offset correctly when it wraps */

  --font-body:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;

  --fs-label-sm:12px;
  --fs-meta:13px;
  --fs-body:15px;
  --fs-body-lg:16px;
  --fs-title:25px;
  --fs-headline:32px;

  /* Legibility correction over source 300 weight */
  --fw-body:400;
  --fw-control:500;
  --fw-title:400;
}
*{box-sizing:border-box}
html,body{min-height:100%;background:var(--bg);color:var(--text)}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:1.55;letter-spacing:.01em;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

/* overflow-x:clip (not hidden) clips horizontal overflow WITHOUT making this a scroll
   container — so the sticky toolbar inside .main can pin to the page scroll. */
.app-shell{position:relative;display:grid;grid-template-columns:var(--toc-open) minmax(0,1fr);min-height:100vh;min-height:100dvh;width:100%;max-width:100vw;overflow-x:clip;transition:grid-template-columns .26s cubic-bezier(.4,0,.2,1)}
/* chatRoot hosts the fixed chat fab + panel; display:contents keeps it out of the grid flow */
#chatRoot{display:contents}
/* the chat panel sits between the TOC and the main column; reserve its width by pushing
   main's left margin (margin-left transitions cleanly — animating a middle grid track with
   a trailing 1fr mis-interpolates in Chrome and gets stuck at 0). Desktop only — on ≤1100
   the chat is an overlay drawer, so main is not pushed. */
@media(min-width:1101px){.app-shell.chat-open .main{margin-left:var(--chat-open,380px)}}
/* right column reserves the chat panel's width so the centre pushes/shrinks like the sidebar (desktop only — on ≤1100 the shell is block and the chat is a drawer) */
.app-shell.chat-open{--chat-gap:var(--chat-open,380px)}
body.chat-resizing .app-shell{transition:none}
/* drag handle to resize the TOC rail (desktop only) */
.toc-resizer{position:absolute;top:0;bottom:0;left:calc(var(--toc-open) - 4px);width:9px;z-index:95;cursor:col-resize;background:transparent;touch-action:none}
/* the always-visible separator is the sidebar's border-right (matches the chat edge
   and animates with the toggle); this handle just brightens on hover/drag to resize. */
.toc-resizer::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:2px;background:transparent;transition:background .12s}
.toc-resizer:hover::after,body.toc-resizing .toc-resizer::after{background:var(--secondary,#5b8def)}
body.toc-resizing{cursor:col-resize;user-select:none}
body.toc-resizing .app-shell,body.toc-resizing .sidebar,body.toc-resizing .main{transition:none!important}
.app-shell.toc-collapsed .toc-resizer{display:none}
@media(max-width:1100px){.toc-resizer{display:none}}
.app-shell.toc-collapsed{grid-template-columns:var(--toc-closed) minmax(0,1fr)}

.sidebar{background:var(--nav);color:var(--text);padding:10px;position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid var(--line);width:var(--toc-open);max-width:var(--toc-open);min-width:0;scrollbar-width:none;transition:width .26s cubic-bezier(.4,0,.2,1),max-width .26s cubic-bezier(.4,0,.2,1),padding .26s cubic-bezier(.4,0,.2,1)}
/* Only the workflow list scrolls — logo, nav (Legend/Structure/Check) and search stay pinned. */
.sidebar-body{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
/* Header parts keep their size; only the workflow list flexes/scrolls (so the search
   and nav don't get squashed by the flex column on short/mobile viewports). */
.sidebar>.brand,.sidebar-body>.nav-actions,.sidebar-body>.search{flex:0 0 auto}
#tocWorkflowList{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#tocWorkflowList::-webkit-scrollbar{display:none}
.sidebar::-webkit-scrollbar{display:none}
.app-shell.toc-collapsed .sidebar{width:var(--toc-closed);max-width:var(--toc-closed);padding:8px}
.sidebar *{max-width:100%}

.brand{display:flex;align-items:center;gap:10px;min-width:0;width:100%;max-width:100%;overflow:hidden;margin:0 0 10px}
.brand-text{min-width:0;overflow:hidden}
.app-shell.toc-collapsed .brand-text,.app-shell.toc-collapsed .sidebar-body{display:none}
.brand h1{font-size:20px;line-height:24px;margin:0 0 2px;font-weight:var(--fw-control);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.brand small{color:var(--muted);font-size:var(--fs-label-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:16px;font-weight:var(--fw-body)}

.toc-toggle,.mobile-toc-toggle{width:36px;height:36px;min-width:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);background:transparent;color:#fff;border-radius:var(--radius-sm);padding:0;font-weight:var(--fw-control)}
.toc-toggle:hover,.mobile-toc-toggle:hover{background:var(--paper2);border-color:var(--text-soft)}
.mobile-toc-toggle{display:none}

.nav-actions{display:flex;gap:8px;margin:8px 0 10px}
.nav-button{height:34px;flex:1;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text-soft);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--fs-meta);font-weight:var(--fw-control);line-height:18px;display:flex;align-items:center;justify-content:center}
.nav-button:hover{border-color:var(--line2);background:rgba(255,255,255,.06)}
.nav-button.active{border-color:rgba(255,255,255,.22);background:var(--accent-muted);color:#fff}

.search{width:100%;height:40px;padding:0 13px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper2);color:#fff;margin:6px 0 10px;outline:none;font-size:var(--fs-body);font-weight:var(--fw-body)}
.search::placeholder{color:var(--muted2)}
.search:focus{border-color:rgba(255,255,255,.35)}

.section-block{border-top:1px solid rgba(55,65,81,.52);padding-top:8px;margin-top:8px;min-width:0}
.section-title{width:100%;height:25px;text-align:left;border:0;background:transparent;color:#fff;border-radius:var(--radius-sm);padding:0 4px;font-size:var(--fs-meta);font-weight:var(--fw-control);display:flex;align-items:center;line-height:18px;min-width:0;overflow:hidden;white-space:nowrap;letter-spacing:.04em}
.section-title:hover{background:rgba(255,255,255,.035)}
.section-title span,.workflow-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workflow-link{width:100%;height:25px;text-align:left;border:0;background:transparent;color:#B9C0CA;border-radius:var(--radius-sm);padding:0 4px;font-size:var(--fs-label-sm);font-weight:var(--fw-body);display:flex;align-items:center;gap:6px;line-height:17px;min-width:0;overflow:hidden;white-space:nowrap}
.workflow-link:hover{background:rgba(255,255,255,.035);color:#fff}
.workflow-link.active{background:var(--accent-muted);color:#fff;box-shadow:inset 2px 0 0 var(--secondary)}
.workflow-number{font-weight:var(--fw-control);color:#fff;flex:0 0 auto}

.main{padding:0 40px 42px;min-width:0;max-width:calc(100vw - var(--toc-open));overflow-x:clip;transition:max-width .26s cubic-bezier(.4,0,.2,1),margin-left .26s cubic-bezier(.4,0,.2,1)}
.app-shell.toc-collapsed .main{max-width:calc(100vw - var(--toc-closed))}
@media(min-width:1101px){
  .app-shell.chat-open .main{max-width:calc(100vw - var(--toc-open) - var(--chat-open,380px))}
  .app-shell.chat-open.toc-collapsed .main{max-width:calc(100vw - var(--toc-closed) - var(--chat-open,380px))}
}

/* full-width top app-bar: pinned across the whole viewport, ABOVE the TOC/chat/main columns,
   so the Contents/Assistant toggles sit far-left at one consistent size in every state. */
.toolbar{position:fixed;top:0;left:0;right:0;z-index:200;min-height:60px;box-sizing:border-box;background:var(--bg);border-bottom:1px solid rgba(55,65,81,.55);padding:8px 24px;display:flex;align-items:center;gap:16px;max-width:100vw;overflow:visible;flex-wrap:wrap;row-gap:8px}
.toolbar-title{font-weight:var(--fw-control);font-size:20px;line-height:24px;color:#fff;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:10px;flex:0 1 auto;letter-spacing:.02em}
.toolbar-actions{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;min-width:0;flex:0 1 auto;margin-left:auto}
/* the Contents/Assistant toggles live in the app-bar, far-left, in EVERY state/size */
.toolbar-toggles{display:flex;align-items:center;gap:8px;flex:0 0 auto;order:0}
.toolbar-tog{display:inline-flex!important;align-items:center;gap:7px;width:auto!important}
.toolbar-tog .tog-ico{display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1}
.toolbar-tog .tog-ico .ai-glyph{width:16px;height:16px}

.btn,label.btn{border:1px solid var(--line2);background:transparent;color:#fff;border-radius:var(--radius-sm);min-height:42px;padding:7px 15px;box-shadow:none;font-size:14px;font-weight:var(--fw-control);line-height:20px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;text-decoration:none;margin:0;letter-spacing:.02em;white-space:nowrap;text-align:center}
/* buttons never wrap mid-text; a genuinely long label that must break grows to a clean 2-line
   height (min-height + balanced padding) instead of clipping. */
.btn.btn-wrap,label.btn.btn-wrap{white-space:normal}
.btn:hover,label.btn:hover{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.035);color:#fff}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.success{background:transparent;color:#fff;border-color:rgba(55,65,81,.92)}
.btn.danger{background:transparent;color:#F1C4C0;border-color:rgba(180,35,24,.62)}
.btn.warning{background:transparent;color:#D4D9E2;border-color:rgba(55,65,81,.92)}
.btn.small{height:32px;min-height:32px;padding:0 10px;font-size:var(--fs-label-sm);line-height:16px}
/* Variant buttons re-set background/border, which (at equal specificity, defined after .btn:hover)
   swallowed the generic hover — so give each variant its own hover so EVERY button reacts on hover. */
.btn.primary:hover,label.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.btn.success:hover,label.btn.success:hover,.btn.warning:hover,label.btn.warning:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);color:#fff}
.btn.danger:hover,label.btn.danger:hover{background:rgba(180,35,24,.16);border-color:rgba(180,35,24,.85);color:#F1C4C0}
.btn[disabled]{opacity:.35;pointer-events:none}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:none}
.page-card{padding:18px;margin-bottom:18px}
.workflow-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid rgba(55,65,81,.62);padding-bottom:18px;margin-bottom:18px}
/* Keep the workflow title on its own line; when the (longer, edit-mode) action buttons don't
   fit beside it, they wrap below instead of squeezing the title into two lines. */
.workflow-header>div:first-child{flex:1 1 300px;min-width:0}
.workflow-header .head-actions{flex:0 1 auto}
.kicker{text-transform:none;letter-spacing:.02em;color:var(--muted);font-size:var(--fs-meta);line-height:20px;font-weight:var(--fw-body)}
.workflow-header h2{font-size:var(--fs-title);margin:6px 0 0;line-height:30px;color:#fff;font-weight:var(--fw-title);letter-spacing:0}
.head-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

.role-panel,.legend-panel{padding:16px;margin-bottom:18px;background:var(--paper2);border:1px solid var(--line);border-radius:var(--radius-md)}
.role-panel h3,.legend-panel h3{margin:0 0 12px;color:#fff;font-size:18px;font-weight:var(--fw-title);line-height:24px}
.role-chip-row,.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.role-chip{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;min-height:30px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.16);font-weight:var(--fw-control);font-size:var(--fs-meta);line-height:18px;cursor:pointer;box-shadow:none;white-space:nowrap}
.role-chip.active{outline:1px solid #fff;transform:none;box-shadow:none}
.role-chip[draggable="true"],.drag-item[draggable="true"],.step-row[draggable="true"]{cursor:grab}
.drag-over{outline:1px dashed #fff;outline-offset:4px}
.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;color:var(--muted);font-size:var(--fs-meta);line-height:20px;font-weight:var(--fw-body)}

.table-wrap{overflow:auto;border-radius:var(--radius-md);border:1px solid var(--line);max-width:100%}
table{width:100%;min-width:920px;border-collapse:separate;border-spacing:0;background:var(--paper);font-size:var(--fs-body);font-weight:var(--fw-body)}
th,td{border-bottom:1px solid rgba(55,65,81,.58);padding:12px 12px;vertical-align:top}
th{background:#151515;color:#fff;text-align:left;font-size:var(--fs-label-sm);font-weight:var(--fw-control);line-height:16px;letter-spacing:.08em;white-space:nowrap}
tr:last-child td{border-bottom:none}
.step-row{transition:opacity .18s ease,filter .18s ease,background .18s ease}
.role-filter-active .step-row.dimmed{opacity:.30;filter:grayscale(.76)}
.role-filter-active .step-row.highlighted{background:#17191D;box-shadow:inset 3px 0 0 var(--secondary)}

.step-type{display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;border-radius:var(--radius-full);font-size:var(--fs-meta);font-weight:var(--fw-control);line-height:18px;border:1px solid rgba(255,255,255,.14);white-space:nowrap}
.step-type.start{background:rgba(55,65,81,.22);color:#fff}
.step-type.process{background:rgba(55,65,81,.22);color:#fff}
.step-type.decision{background:rgba(24,37,64,.48);color:#fff;border-color:rgba(255,255,255,.20)}
.step-type.end{background:rgba(180,35,24,.16);color:#F1C4C0;border-color:rgba(180,35,24,.30)}
.step-type.document{background:rgba(55,65,81,.22);color:#fff}

.svg-icon{--icon:#AEB5C1;display:inline-flex;width:32px;height:32px;min-width:32px;align-items:center;justify-content:center;border-radius:var(--radius-sm);margin:0 6px 6px 0;color:var(--icon);background:rgba(55,65,81,.15);border:1px solid color-mix(in srgb,var(--icon) 62%,transparent);vertical-align:middle}
.svg-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.svg-icon.purple{--icon:#B9B4CA}.svg-icon.mint{--icon:#B7C7BD}.svg-icon.red{--icon:#D58D87}.svg-icon.orange{--icon:#C4B89C}.svg-icon.blue{--icon:#AEBBCB}.svg-icon.db{--icon:#AEBBCB}.svg-icon.system{--icon:#C4C7CC}.svg-icon.tracker{--icon:#B7C7BD}.svg-icon.pay{--icon:#C4C7CC}.svg-icon.sign{--icon:#C4C7CC}.svg-icon.person{--icon:#C4C7CC}.svg-icon.continue{--icon:#C4B89C}.svg-icon.start{--icon:#B7C7BD}.svg-icon.custom{--icon:var(--custom-icon,#AEB5C1)}
.icon-label-row{display:flex;align-items:center;gap:10px}

.note-box,.subpath-box{margin-top:10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--paper2);border:1px dashed rgba(55,65,81,.86);color:#D7DBE2;font-size:var(--fs-meta);line-height:20px}
.branch-panel{margin-top:10px;border:1px solid var(--line);border-left:2px solid var(--secondary);border-radius:var(--radius-md);background:var(--paper2);overflow:hidden}
.branch-panel>summary{list-style:none;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:pointer;color:#fff;font-weight:var(--fw-control);font-size:var(--fs-body);line-height:22px}
.branch-panel>summary::-webkit-details-marker{display:none}
.branch-content{padding:12px 14px;border-top:1px solid var(--line)}
.nested-table{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}

.actions{display:flex;flex-wrap:wrap;gap:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.list{display:grid;gap:10px}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2)}
.item-title{font-weight:var(--fw-control);color:#fff;font-size:var(--fs-body);line-height:22px}.item-meta{font-size:var(--fs-meta);line-height:19px;color:var(--muted);margin-top:3px}

select,input[type=text],input[type=password],input[type=file],textarea,input[type=color]{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;background:var(--surface-light);color:var(--on-surface);outline:none;font-size:var(--fs-body);font-weight:var(--fw-body)}
input[type=color]{height:46px;padding:4px}
textarea{min-height:108px;resize:vertical}
label{display:block;font-size:var(--fs-meta);font-weight:var(--fw-control);color:#D0D5DD;margin:0 0 6px;line-height:18px;letter-spacing:.04em}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .wide{grid-column:1/-1}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.74);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:200}
.modal{width:min(820px,100%);max-height:calc(100vh - 80px);overflow:auto;background:var(--tertiary);border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:none;padding:18px;color:var(--text)}
.modal h2{margin:0 0 18px;color:#fff;font-size:var(--fs-title);font-weight:var(--fw-title);line-height:30px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.color-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.color-swatch{width:28px;height:28px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.25);box-shadow:none;padding:0}
.project-modal .logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.logo-upload-block{display:grid;gap:8px}
.logo-preview{min-height:118px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.035);display:flex;align-items:center;justify-content:center;padding:14px}
.logo-preview img{max-width:100%;max-height:90px;object-fit:contain}
.logo-preview span{color:var(--muted2);font-size:var(--fs-meta)}

.notice{padding:12px 14px;border-radius:var(--radius-sm);background:var(--paper2);border:1px solid var(--line);color:#fff;margin-bottom:18px;font-size:var(--fs-body);line-height:22px}
.legend-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.legend-top h2{color:#fff;margin:0 0 4px;font-size:var(--fs-title);font-weight:var(--fw-title);line-height:30px}.manager-note{color:var(--muted);margin-top:0;font-size:var(--fs-body);line-height:22px;font-weight:var(--fw-body)}
.workflow-empty{padding:24px;text-align:center;color:var(--muted)}
.toc-backdrop{display:none}

@media(max-width:1100px){
  .app-shell,.app-shell.toc-collapsed{display:block;max-width:100vw}
  /* Open the drawer BELOW the toolbar (not behind it): the toolbar is sticky at z-index 200,
     so a top:0 drawer had its head (logo · Legend/Structure/Check · search) hidden under the
     toolbar. Anchoring to --bar-h (the measured toolbar height) keeps the whole TOC visible and
     leaves the toolbar tappable to close it. */
  .sidebar{position:fixed;left:0;top:var(--bar-h,60px);height:calc(100vh - var(--bar-h,60px));height:calc(100dvh - var(--bar-h,60px));width:100vw;max-width:100vw;z-index:160;box-shadow:none;transform:translateX(0);transition:transform .18s ease;padding:16px 14px 10px}
  .app-shell.toc-collapsed .sidebar{transform:translateX(-105%);width:min(84vw,330px);max-width:min(84vw,330px)}
  .app-shell.toc-collapsed .brand-text,.app-shell.toc-collapsed .sidebar-body{display:block}
  .toc-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:110}
  .app-shell.toc-collapsed .toc-backdrop{display:none}
  .mobile-toc-toggle{display:inline-flex}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .main,.app-shell.toc-collapsed .main{padding:0 18px 40px;max-width:100vw}
  .toolbar{position:sticky;display:flex}
  .toolbar-title{margin-bottom:0}
  .toolbar::after{display:none}
  .toolbar-actions{justify-content:flex-start}
  .workflow-header{flex-direction:column}.workflow-header>div:first-child{flex:0 0 auto}.head-actions{justify-content:flex-start}
}
@media(max-width:720px){
  th{display:none}table,tbody,tr,td{display:block;width:100%}table{min-width:0}.step-row{border-bottom:1px solid var(--line)}td{border-bottom:0;padding:10px 12px}.item{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.nav-actions{grid-template-columns:1fr}.toolbar-actions{gap:8px}.btn,label.btn{min-height:38px;padding:6px 10px;font-size:var(--fs-meta)}
  .project-modal .logo-grid{grid-template-columns:1fr}
}


/* V44 BRAND POLISH + MOBILE TOUCH + PRINT/PDF VIEW */
:root{
  --toc-open:310px;
  --fs-meta:14px;
  --fs-body:15.5px;
  --fs-body-lg:17px;
  --fs-title:27px;
}

.brand{
  align-items:flex-start;
  padding:8px 0 14px;
  margin:0 0 8px;
  min-height:78px;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-mark{
  width:42px;
  height:42px;
  min-width:42px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:500;
  font-size:15px;
  line-height:1;
  letter-spacing:.04em;
  background:rgba(255,255,255,.035);
}
.brand-wordmark{
  min-width:0;
  overflow:hidden;
}
.brand-wordmark strong{
  display:block;
  color:#fff;
  font-size:17px;
  font-weight:500;
  line-height:20px;
  letter-spacing:.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-wordmark span{
  display:block;
  color:#D0D5DD;
  font-size:12px;
  font-weight:400;
  line-height:16px;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.app-shell.toc-collapsed .brand{
  padding:6px 0;
  min-height:0;
  align-items:center;
}
.app-shell.toc-collapsed .brand-lockup,
.app-shell.toc-collapsed .brand-wordmark,
.app-shell.toc-collapsed .brand-mark{
  display:none;
}

.sidebar{padding-top:10px}
.section-title{font-size:14px;height:28px}
.workflow-link{font-size:13.5px;height:28px}
.workflow-number{min-width:32px}
.nav-button{font-size:14px}
.search{font-size:15px;height:42px}

.toolbar-title{font-size:21px}
.btn,label.btn{min-height:44px;padding:8px 16px}
.btn.small{height:34px;min-height:34px}

.workflow-header h2{font-size:27px;line-height:34px}
.role-panel h3,.legend-panel h3{font-size:19px;line-height:24px}
.kicker{font-size:14px;line-height:20px}
table{font-size:15px}
th{font-size:12.5px}
.role-chip{min-height:31px;font-size:13.5px;background-blend-mode:multiply}
.role-panel .role-chip{
  border-color:rgba(255,255,255,.20);
}
.step-type{min-height:31px;font-size:13.5px}
.item-title{font-size:15.5px}

.svg-icon{
  width:34px;
  height:34px;
  min-width:34px;
  background:rgba(55,65,81,.28);
  border-color:color-mix(in srgb,var(--icon) 76%,transparent);
}
.svg-icon svg{
  width:20px;
  height:20px;
  stroke-width:2.35;
}
.svg-icon.purple{--icon:#8B6FF6}
.svg-icon.mint{--icon:#3FB394}
.svg-icon.red{--icon:#E0A09A}
.svg-icon.orange{--icon:#E59A45}
.svg-icon.blue{--icon:#C1CEE0}
.svg-icon.db{--icon:#4D8BFF}
.svg-icon.system{--icon:#E3E7EC}
.svg-icon.tracker{--icon:#7ED6CC}
.svg-icon.pay{--icon:#E8D3A8}
.svg-icon.sign{--icon:#D8DDE6}
.svg-icon.person{--icon:#D8DDE6}
.svg-icon.continue{--icon:#E8D3A8}
.svg-icon.start{--icon:#34D17A}

.role-chip{
  box-shadow:inset 0 0 0 999px rgba(255,255,255,.02);
}
.role-chip.active{
  outline:1px solid rgba(255,255,255,.80);
  outline-offset:2px;
}
.presentation-mode .head-actions,
.presentation-mode .actions,
.presentation-mode .filter-bar .btn{
  display:none!important;
}
.presentation-mode .role-panel{
  padding:12px 14px;
}
.presentation-mode .toolbar-actions .edit-sensitive{
  display:none!important;
}

@media(max-width:1100px){
  .brand{min-height:74px}
  .main,.app-shell.toc-collapsed .main{padding:0 18px 42px}
  /* Breathing room between the sticky toolbar and the workflow heading/kicker — mobile had
     none (desktop puts it on #mainView; this is the mobile counterpart). No sticky thead on
     mobile, so top padding here is safe. */
  .app-shell .main>#mainView{padding-top:18px}
  .toolbar-actions{gap:8px}
}

@media(max-width:720px){
  :root{
    --fs-meta:14px;
    --fs-body:16px;
    --fs-title:24px;
  }
  body{font-size:16px;line-height:1.55}
  .sidebar{
    width:min(88vw,360px);
    max-width:min(88vw,360px);
    padding:12px;
  }
  .app-shell.toc-collapsed .sidebar{
    width:min(88vw,360px);
    max-width:min(88vw,360px);
  }
  .brand{
    min-height:82px;
    padding:8px 0 14px;
  }
  .brand-mark{
    width:46px;
    height:46px;
    min-width:46px;
  }
  .brand-wordmark strong{
    font-size:18px;
    line-height:22px;
  }
  .section-title,
  .workflow-link,
  .nav-button{
    min-height:44px!important;
    height:44px!important;
    font-size:15px;
    padding-left:8px;
    padding-right:8px;
  }
  .search{
    height:50px!important;
    font-size:16px;
  }
  .toolbar{
    padding:10px 0;
  }
  .toolbar-title{
    font-size:20px;
    line-height:24px;
  }
  /* Phone toolbar compaction: Workflow View / Undo / Redo move into the Settings ▾ menu
     (see .menu-view), leaving Edit · Save · Settings to share ONE row. Flex is the default so
     a LONE Settings button (diagram view) fills the width instead of sitting at 1/3. */
  .toolbar-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
  }
  .toolbar-actions>.btn,.toolbar-actions>.menu{flex:1 1 0;min-width:0;width:auto}
  /* But a <details> (the Settings menu) won't honour flex-grow equally — it stayed narrower
     than Edit/Save (squashed). When Edit is present (table view = three buttons), switch to a
     3-col grid so all three are exactly equal; grid columns don't have the <details> quirk.
     Diagram view has no #editToggle, so it keeps the flex rule above (lone Settings fills). */
  .toolbar-actions:has(>#editToggle){display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .toolbar-actions:has(>#editToggle)>.menu>.menu-summary{width:100%}
  /* the moved buttons are still rendered in-bar (desktop uses them) — hide the phone copies */
  .toolbar-actions>#diagramToggle,.toolbar-actions>#undoBtn,.toolbar-actions>#redoBtn{display:none!important}
  /* reveal the menu copies in the Settings sheet */
  .menu-head.menu-view{display:block!important}
  .menu-item.menu-view{display:inline-flex!important}
  .menu-sep.menu-view{display:block!important}
  .btn,label.btn{
    height:44px;
    min-height:44px;
    width:100%;
    padding:0 12px;
    font-size:14px;
  }
  .btn.small{
    height:40px;
    min-height:40px;
    padding:0 12px;
    font-size:14px;
  }
  .role-chip{
    min-height:40px;
    padding:8px 12px;
    font-size:14px;
  }
  .step-type{
    min-height:38px;
    padding:8px 12px;
    font-size:14px;
  }
  .svg-icon{
    width:40px;
    height:40px;
    min-width:40px;
  }
  .svg-icon svg{
    width:22px;
    height:22px;
  }
  .workflow-header h2{
    font-size:24px;
    line-height:30px;
  }
  .role-panel,.legend-panel,.page-card{
    padding:16px;
  }
  .actions{
    gap:8px;
  }
  .actions .btn{
    width:auto;
    min-width:88px;
  }
  td{
    font-size:16px;
    line-height:1.55;
  }
}

@media print{
  body{
    background:#fff!important;
    color:#111!important;
    font-family:"Figtree","Helvetica Neue",Arial,sans-serif!important;
  }
  .sidebar,
  .toolbar,
  .toc-backdrop,
  .head-actions,
  .actions,
  .filter-bar,
  .role-panel,
  #notice{
    display:none!important;
  }
  .app-shell,
  .app-shell.toc-collapsed{
    display:block!important;
  }
  .main,
  .app-shell.toc-collapsed .main{
    max-width:none!important;
    padding:0!important;
  }
  .card,
  .page-card{
    border:0!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#111!important;
    padding:0!important;
  }
  .workflow-header{
    border-bottom:1px solid #999!important;
    margin-bottom:16px!important;
    padding-bottom:12px!important;
  }
  .workflow-header h2,
  .kicker{
    color:#111!important;
  }
  .table-wrap{
    border:1px solid #999!important;
    overflow:visible!important;
  }
  table{
    min-width:0!important;
    width:100%!important;
    color:#111!important;
    background:#fff!important;
    font-size:11px!important;
  }
  th{
    background:#f0f0f0!important;
    color:#111!important;
  }
  td,th{
    border-color:#ccc!important;
    padding:6px!important;
  }
  .role-chip,.step-type,.svg-icon{
    color:#111!important;
    background:#fff!important;
    border:1px solid #999!important;
  }
}


/* V45 OFFICIAL LOGO INTEGRATION */
.brand{
  min-height:92px;
  align-items:flex-start;
  gap:10px;
}
.brand-logo-wrap{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-top:2px;
}
.brand-logo-wide{
  width:210px;
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.brand-logo-icon{
  display:none;
  width:38px;
  height:38px;
  object-fit:contain;
}
.app-shell.toc-collapsed .brand{
  min-height:46px;
  padding:6px 0;
  justify-content:center;
}
.app-shell.toc-collapsed .brand-logo-wrap{
  display:flex;
  justify-content:center;
  width:100%;
}
.app-shell.toc-collapsed .brand-logo-wide{
  display:none;
}
.app-shell.toc-collapsed .brand-logo-icon{
  display:block;
}
.app-shell.toc-collapsed .toc-toggle{
  position:absolute;
  top:8px;
  left:8px;
  opacity:.08;
}
.app-shell.toc-collapsed .toc-toggle:hover{
  opacity:1;
}

@media(max-width:1100px){
  .brand{
    min-height:96px;
  }
  .brand-logo-wide{
    width:230px;
  }
  .app-shell.toc-collapsed .brand-logo-wide{
    display:block;
  }
  .app-shell.toc-collapsed .brand-logo-icon{
    display:none;
  }
  .app-shell.toc-collapsed .toc-toggle{
    position:relative;
    top:auto;
    left:auto;
    opacity:1;
  }
}
@media(max-width:720px){
  .brand-logo-wide{
    width:240px;
  }
}


/* V46 BRANCH WORKFLOW + TOC REFINEMENT */

/* Softer overall geometry */
:root{
  --toc-open:318px;
  --toc-closed:44px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:16px;
  --fs-meta:14.5px;
  --fs-body:16px;
  --fs-title:28px;
}

/* TOC: remove dead top gap, make logo placement intentional */
.sidebar{
  padding:6px 10px 10px;
}
.brand{
  min-height:58px!important;
  padding:0 0 8px!important;
  margin:0 0 6px!important;
  align-items:center!important;
  gap:8px!important;
}
.brand-logo-wrap{
  padding-top:0!important;
  align-items:center!important;
}
.brand-logo-wide{
  width:230px!important;
  max-height:46px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.toc-toggle{
  width:48px!important;
  min-width:48px!important;
  height:44px!important;
  font-size:17px!important;
}

/* Collapsed TOC should be a clean rail, not a half-visible hamburger */
.app-shell.toc-collapsed{
  grid-template-columns:var(--toc-closed) minmax(0,1fr)!important;
}
.app-shell.toc-collapsed .sidebar{
  width:var(--toc-closed)!important;
  max-width:var(--toc-closed)!important;
  padding:6px 4px!important;
  overflow:hidden!important;
}
.app-shell.toc-collapsed .brand{
  min-height:44px!important;
  padding:0!important;
  justify-content:center!important;
  margin:0!important;
}
.app-shell.toc-collapsed .toc-toggle{
  position:absolute!important;
  inset:auto!important;
  left:6px!important;
  top:54px!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  opacity:1!important;
  border-color:rgba(255,255,255,.14)!important;
  background:transparent!important;
}
.app-shell.toc-collapsed .brand-logo-wrap{
  width:100%!important;
  justify-content:center!important;
}
.app-shell.toc-collapsed .brand-logo-wide{
  display:none!important;
}
.app-shell.toc-collapsed .brand-logo-icon{
  display:block!important;
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
}
.app-shell.toc-collapsed .brand-text{
  display:none!important;
}
.app-shell.toc-collapsed .sidebar-body{
  display:none!important;
}

/* TOC typography: larger, still clean and single-line */
.nav-actions{
  margin:6px 0 8px!important;
  gap:8px!important;
}
.nav-button{
  height:38px!important;
  min-height:38px!important;
  font-size:15px!important;
  line-height:20px!important;
}
.search{
  height:42px!important;
  font-size:16px!important;
  margin:6px 0 10px!important;
}
.section-block{
  padding-top:8px!important;
  margin-top:8px!important;
}
.section-title{
  height:32px!important;
  min-height:32px!important;
  font-size:15px!important;
  line-height:20px!important;
  padding:0 8px!important;
}
.workflow-link{
  height:32px!important;
  min-height:32px!important;
  font-size:14.5px!important;
  line-height:20px!important;
  padding:0 8px!important;
  gap:7px!important;
}
.workflow-number{
  min-width:36px!important;
}

/* Toolbar wording and layout */
.toolbar-title{
  font-size:21px!important;
  line-height:26px!important;
  letter-spacing:.01em!important;
}

/* Softer corners */
.card,.page-card,.role-panel,.legend-panel,.table-wrap,.branch-panel,.nested-table,.item,.modal,.notice{
  border-radius:14px!important;
}
.btn,label.btn,select,input[type=text],input[type=file],textarea,input[type=color]{
  border-radius:8px!important;
}
.role-chip,.step-type{
  border-radius:9999px!important;
}
.svg-icon{
  border-radius:10px!important;
}

/* Role palette: distinct but muted. Text remains auto-contrast from JS. */
.role-chip{
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 0 0 999px rgba(255,255,255,.035)!important;
}
.role-panel .role-chip{
  opacity:.94;
}
.role-panel .role-chip:hover{
  opacity:1;
  outline:1px solid rgba(255,255,255,.30);
}

/* Step types: restore useful color distinction with subtle fill and clearer outline */
.step-type.start{
  background:rgba(47,74,67,.46)!important;
  color:#D9EFE5!important;
  border-color:rgba(123,170,150,.55)!important;
}
.step-type.process{
  background:rgba(24,37,64,.50)!important;
  color:#DCE5F5!important;
  border-color:rgba(91,113,152,.58)!important;
}
.step-type.decision{
  background:rgba(89,75,42,.52)!important;
  color:#F1E4BE!important;
  border-color:rgba(197,179,88,.62)!important;
}
.step-type.document{
  background:rgba(64,57,85,.48)!important;
  color:#E5DFF5!important;
  border-color:rgba(160,146,190,.55)!important;
}
.step-type.end{
  background:rgba(90,56,56,.48)!important;
  color:#F2CACA!important;
  border-color:rgba(190,116,110,.55)!important;
}

/* Icon visibility: same family, more contrast */
.svg-icon{
  background:rgba(55,65,81,.36)!important;
  border-width:1.25px!important;
  filter:saturate(1.08);
}
.svg-icon svg{
  stroke-width:2.45!important;
}
.svg-icon.purple{--icon:#8B6FF6!important}
.svg-icon.mint{--icon:#3FB394!important}
.svg-icon.red{--icon:#F0B5B0!important}
.svg-icon.orange{--icon:#E59A45!important}
.svg-icon.blue{--icon:#D2DFF2!important}
.svg-icon.db{--icon:#4D8BFF!important}
.svg-icon.system{--icon:#E3E7EC!important}
.svg-icon.tracker{--icon:#7ED6CC!important}
.svg-icon.pay{--icon:#E8D3A8!important}
.svg-icon.sign{--icon:#D8DDE6!important}
.svg-icon.person{--icon:#D8DDE6!important}
.svg-icon.continue{--icon:#E8D3A8!important}
.svg-icon.start{--icon:#34D17A!important}

/* Branch language/visuals: branch is a sub-workflow, not just a decision note */
.branch-panel{
  border-left-width:3px!important;
}
.branch-panel>summary{
  color:#E9EDF5!important;
}
.branch-panel>summary::before{
  content:"Branch";
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#AEB7C8;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:3px 7px;
  margin-right:8px;
}

/* Mobile/touch: keep TOC fully usable and collapsed overlay behavior */
@media(max-width:1100px){
  .app-shell.toc-collapsed .sidebar{
    transform:translateX(-105%)!important;
    width:min(88vw,360px)!important;
    max-width:min(88vw,360px)!important;
  }
  .app-shell.toc-collapsed .sidebar-body{
    display:block!important;
  }
  .app-shell.toc-collapsed .brand-logo-wide{
    display:block!important;
  }
  .app-shell.toc-collapsed .brand-logo-icon{
    display:none!important;
  }
  .app-shell.toc-collapsed .toc-toggle{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    opacity:1!important;
  }
  .brand{
    min-height:62px!important;
  }
  .brand-logo-wide{
    width:238px!important;
    max-height:52px!important;
  }
}

@media(max-width:720px){
  .section-title,.workflow-link,.nav-button{
    height:46px!important;
    min-height:46px!important;
    font-size:16px!important;
  }
  .search{
    height:48px!important;
  }
  .toc-toggle,.mobile-toc-toggle{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
  }
}

/* V47 EDITABILITY + TOC CLEANUP */
:root{
  --toc-closed:44px;
}

/* Desktop TOC uses available page height without its own unnecessary scroll wheel. */
@media(min-width:1101px){
  .sidebar{
    height:auto!important;
    min-height:100vh!important;
    overflow:visible!important;
    padding-top:4px!important;
  }
  .sidebar-body{
    overflow:visible!important;
  }
}

/* Remove the odd collapsed logo; collapsed desktop TOC is only the clean menu rail. */
.app-shell.toc-collapsed .brand{
  min-height:36px!important;
  height:36px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
}
.app-shell.toc-collapsed .brand-logo-wrap,
.app-shell.toc-collapsed .brand-logo-wide,
.app-shell.toc-collapsed .brand-logo-icon,
.app-shell.toc-collapsed .brand-text{
  display:none!important;
}
.app-shell.toc-collapsed .toc-toggle{
  position:static!important;
  opacity:1!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  background:transparent!important;
  border-color:rgba(255,255,255,.22)!important;
}
.app-shell.toc-collapsed .sidebar{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding:6px!important;
}

/* Mobile keeps the overlay drawer behavior and scrolls only when the drawer content truly needs it. */
@media(max-width:1100px){
  .sidebar{
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .app-shell.toc-collapsed .brand-logo-wrap,
  .app-shell.toc-collapsed .brand-logo-wide{
    display:flex!important;
  }
  .app-shell.toc-collapsed .brand-logo-icon{
    display:none!important;
  }
}

/* Drag affordances for Structure Manager and all Legend categories. */
.drag-handle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin-right:8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  color:#AEB7C8;
  font-size:13px;
  line-height:1;
  vertical-align:middle;
  cursor:grab;
}
.drag-item[draggable="true"]{
  user-select:none;
}
.legend-panel .item,
.page-card .item{
  transition:outline-color .14s ease, background .14s ease;
}
.drag-over{
  outline:2px dashed rgba(255,255,255,.72)!important;
  outline-offset:3px!important;
  background:rgba(255,255,255,.035)!important;
}


/* ============================================================
   V48 UI POLISH
   ------------------------------------------------------------
   - Clean collapsed rail (one menu button, no dead space)
   - Wider TOC, full labels (no wrap, no ellipsis)
   - Single page scroll on desktop (no independent sidebar scroll)
   - Drag handles hidden (whole row still drags)
   - Fixed-width steps table (descriptions wrap, never clipped)
   - Calmer toolbar
   - Subpath drill-in (breadcrumbs + sub-workflow pages)
   - Micro-interactions (button press, newly-added flash, toast)
   ============================================================ */
:root{
  --toc-open:424px;
  --toc-closed:46px;
}

/* --- Kill dead space: the inline icon-sprite SVG was rendering at its
       default 300x150 box at the top of the sidebar, pushing the logo down. --- */
#ab-icon-sprite{
  position:absolute!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
}

/* --- Desktop sidebar: scrolls with the page, no inner scrollbar --- */
@media(min-width:1101px){
  .sidebar{
    position:sticky!important;
    top:0!important;
    align-self:start!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:8px 12px 20px!important;
  }
  .sidebar-body{overflow:visible!important}
}

/* --- Expanded brand: logo at the top, no dead gap above it --- */
.brand{
  min-height:0!important;
  padding:2px 0 10px!important;
  margin:0 0 4px!important;
  align-items:center!important;
  gap:8px!important;
}
.brand-logo-wide{
  width:208px!important;
  max-height:42px!important;
}
/* Mobile: the Contents drawer is wider than the logo at 208px, so the wordmark looked small
   and lost in empty space. Two fixes (scoped to mobile so the desktop rail keeps 208×42):
   1) the .brand flex box collapsed to ~12px tall with overflow:hidden, CLIPPING the logo to a
      thin sliver (the real "squashed" look) — give it real height and stop clipping;
   2) let the logo scale up (height-driven, aspect preserved) so it fills the drawer legibly. */
@media(max-width:1100px){
  .brand{min-height:62px!important;overflow:visible!important;align-items:center!important}
  .brand-logo-wrap{overflow:visible!important;align-items:center!important}
  .brand-logo-wide{width:auto!important;max-width:100%!important;max-height:48px!important}
}

/* --- Collapsed desktop rail: a single clean menu button, nothing else --- */
.app-shell.toc-collapsed .sidebar{
  display:block!important;
  padding:10px 4px!important;
  overflow:hidden!important;
}
.app-shell.toc-collapsed .brand{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-height:0!important;
  height:auto!important;
  padding:2px 0 0!important;
  margin:0!important;
}
.app-shell.toc-collapsed .brand-logo-wrap,
.app-shell.toc-collapsed .brand-logo-wide,
.app-shell.toc-collapsed .brand-logo-icon,
.app-shell.toc-collapsed .brand-text{
  display:none!important;
}
.app-shell.toc-collapsed .toc-toggle{
  position:static!important;
  inset:auto!important;
  margin:0!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  opacity:1!important;
  background:transparent!important;
  border-color:rgba(255,255,255,.22)!important;
}

/* --- TOC labels: single line, full text, no ellipsis --- */
.nav-actions{flex-wrap:wrap!important}
.nav-button{flex:1 1 auto!important}
.section-title{
  height:auto!important;
  min-height:30px!important;
  padding:5px 8px!important;
  align-items:center!important;
}
.section-title span{
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
.workflow-link{
  height:auto!important;
  min-height:30px!important;
  padding:5px 8px!important;
  align-items:center!important;
}
.workflow-label{
  flex:1 1 auto;min-width:0;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* --- Direct edit: the whole item drags (grab any empty part), and a pencil icon-button toggles
   its inline editor. No drag handle, no global edit mode. --- */
[data-drag-type][draggable="true"]{cursor:grab}
[data-drag-type][draggable="true"]:active{cursor:grabbing}
.edit-pen{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;flex:0 0 auto;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--paper2);color:var(--text-soft);cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.edit-pen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.edit-pen:hover{border-color:var(--accent-strong);color:var(--text)}
.edit-pen.active{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.item-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:6px}
/* Step value + edit pen sit on one centred line when there's room, and the pen wraps
   underneath when the column is narrow — never overlapping (no absolute positioning). */
.pen-cell-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px}
.step-pen-wrap{display:flex}
.next-cell{text-align:center}
/* Legend panel header: title + actions on one row, actions right-aligned. */
.legend-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.legend-panel-head h3{margin:0!important}
.legend-panel-head .legend-panel-actions{margin:0}
@media(min-width:721px){.pen-cell{vertical-align:top}}

/* --- Steps table: fixed layout so descriptions wrap instead of clipping --- */
@media(min-width:721px){
  .table-wrap>table,.nested-table>table{
    table-layout:fixed!important;
    width:100%!important;
    min-width:0!important;
  }
  .table-wrap>table th:nth-child(1),.table-wrap>table td:nth-child(1),
  .nested-table>table th:nth-child(1),.nested-table>table td:nth-child(1){width:46px}
  .table-wrap>table th:nth-child(2),.table-wrap>table td:nth-child(2),
  .nested-table>table th:nth-child(2),.nested-table>table td:nth-child(2){width:88px}
  .table-wrap>table th:nth-child(3),.table-wrap>table td:nth-child(3),
  .nested-table>table th:nth-child(3),.nested-table>table td:nth-child(3){width:100px}
  /* col 4 (Description) intentionally has no width -> it absorbs the slack */
  .table-wrap>table th:nth-child(5),.table-wrap>table td:nth-child(5),
  .nested-table>table th:nth-child(5),.nested-table>table td:nth-child(5){width:86px}
  .table-wrap>table th:nth-child(6),.table-wrap>table td:nth-child(6),
  .nested-table>table th:nth-child(6),.nested-table>table td:nth-child(6){width:116px}
  .table-wrap>table th:nth-child(7),.table-wrap>table td:nth-child(7),
  .nested-table>table th:nth-child(7),.nested-table>table td:nth-child(7){width:140px}
  td{overflow-wrap:anywhere}
  .note-add .btn,.subpath-add .btn,[data-action="add-branch"],[data-action="add-note"]{white-space:nowrap}
  .role-chip,.step-type{max-width:100%}
}
.table-wrap{overflow-x:auto}

/* --- Toolbar: title left, actions tucked right, calmly wrapping --- */
.toolbar::after{display:none!important}
.toolbar{gap:14px!important}
.toolbar-actions{
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
}

/* --- Subpath drill-in: breadcrumbs + sub-workflow bars --- */
.breadcrumbs{
  display:flex;flex-wrap:wrap;gap:4px;align-items:center;
  margin:0 0 14px;font-size:var(--fs-meta);color:var(--muted);
}
.breadcrumbs .crumb{
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  padding:3px 7px;border-radius:7px;line-height:18px;
}
.breadcrumbs .crumb:hover{color:#fff;background:rgba(255,255,255,.05)}
.breadcrumbs .crumb.current{color:#fff;cursor:default}
.breadcrumbs .crumb.current:hover{background:transparent}
.breadcrumbs .crumb-sep{color:var(--muted2);opacity:.7}

.subpaths{display:grid;gap:8px;margin-top:12px}
.subpath-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;row-gap:8px;
  padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--secondary);
  border-radius:10px;background:var(--paper2);
}
/* when the row can't fit (e.g. a nested subpath in a narrow main while the chat is open),
   the action buttons wrap to a second line instead of being clipped by main's overflow:clip */
.subpath-bar .sp-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.subpath-bar .sp-tag{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#AEB7C8;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:3px 8px;white-space:nowrap;
}
.subpath-bar .sp-label{font-weight:var(--fw-control);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
.subpath-bar .sp-meta{color:var(--muted);font-size:var(--fs-meta);white-space:nowrap}
.subpath-bar .sp-actions{display:flex;gap:8px;flex:0 0 auto}
.subpath-empty{color:var(--muted);font-size:var(--fs-meta);margin-top:10px}

/* --- Micro-interactions --- */
.btn,label.btn,.nav-button,.section-title,.workflow-link,.subpath-bar .btn{
  transition:transform .05s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:active,label.btn:active,.nav-button:active,.section-title:active,.workflow-link:active{
  transform:translateY(1px);
}
@keyframes sopFlash{
  0%{background:rgba(120,150,210,.30)}
  100%{background:transparent}
}
.just-added{animation:sopFlash 1.15s ease-out}
.just-added>td{animation:sopFlash 1.15s ease-out}
.notice{transition:opacity .2s ease}
.notice.flash{animation:noticePop .26s ease-out}
@keyframes noticePop{
  0%{transform:translateY(-4px);opacity:.2}
  100%{transform:translateY(0);opacity:1}
}

/* --- Linked Following Step + Continue-Workflow icon --- */
.step-link{
  display:inline-flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--text-soft);cursor:pointer;font:inherit;
  padding:4px 9px;border-radius:999px;line-height:18px;white-space:nowrap;
}
.step-link:hover{
  color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08);
}
.next-end{
  display:inline-flex;align-items:center;
  padding:4px 9px;border:1px solid transparent;line-height:18px;
  color:var(--muted);font-size:inherit;white-space:nowrap;
}
.icon-link{
  background:transparent;border:0;padding:0;margin:0;cursor:pointer;
  display:inline-flex;border-radius:10px;
}
.icon-link .svg-icon{cursor:pointer;position:relative}
.icon-link:hover .svg-icon{
  outline:1px solid rgba(255,255,255,.55);outline-offset:1px;
  background:rgba(255,255,255,.10)!important;
}

/* --- Dark edit boxes (were far too white) --- */
select,
input[type=text],
input[type=password],
input[type=file],
textarea{
  background:#15161a!important;
  color:var(--text-soft)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
select:hover,
input[type=text]:hover,
input[type=password]:hover,
input[type=file]:hover,
textarea:hover{border-color:rgba(255,255,255,.17)!important}
select:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=file]:focus,
textarea:focus{
  border-color:rgba(255,255,255,.30)!important;
  background:#181a20!important;
  outline:none;
}
input[type=color]{
  background:#15161a!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
::placeholder{color:var(--muted2)!important}
.modal label{color:#C2C8D2!important}

/* --- Inline collapsible subpaths (expand in place, no separate page) --- */
.subpaths{display:grid;gap:8px;margin-top:12px}
.subpath-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--secondary);
  border-radius:10px;background:var(--paper2);cursor:default;
  min-width:0;max-width:100%;overflow:hidden;
}
.subpath-bar.open{
  border-left-color:var(--accent-strong);
  background:rgba(255,255,255,.035);
}
.sp-toggle{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  background:transparent;border:0;color:#fff;cursor:pointer;font:inherit;text-align:left;padding:0;
}
.sp-caret{color:var(--muted);flex:0 0 auto;width:12px;font-size:11px;line-height:1}
.sp-tag{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#AEB7C8;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:3px 8px;white-space:nowrap;flex:0 0 auto;
}
.sp-label{font-weight:var(--fw-control);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
.sp-meta{color:var(--muted);font-size:var(--fs-meta);white-space:nowrap;flex:0 0 auto}
.sp-actions{display:flex;gap:8px;flex:0 0 auto}

.subpath-row>td{padding:0!important;background:transparent;border-bottom:1px solid var(--line)}
.subpath-panel{
  margin:0;padding:10px 0 2px 24px;
  border-left:0;
  background:transparent;
  position:relative;z-index:1;
}
.subpath-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.subpath-panel-head .sp-rename{flex:0 0 auto}
.subpath-add{margin:14px 0 12px}
.subpath-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 12px}
.subpath-foot .btn{flex:0 0 auto;width:auto}
/* Rename (head) and Done (foot) sit in a slot centred over the Following-Step column on desktop. */
.sp-col-slot{display:flex;justify-content:center;align-items:center;flex:0 0 auto}
@media(min-width:721px){.sp-col-slot{width:116px;flex:0 0 116px}}
.subpath-panel .nested-table{background:transparent;border:0;border-radius:0;overflow:visible}
/* Expansion grows downward out of the subpath bar */
@keyframes subpathExpand{
  0%{opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100% 0)}
  100%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}
}
.subpath-panel.sp-animate{
  animation:subpathExpand .30s cubic-bezier(.22,.61,.36,1);
  transform-origin:top center;
}
.subpath-bar .sp-caret{display:inline-block;transition:transform .2s ease}

/* --- Menu (sandwich) button: identical in every state + form factor --- */
.toc-toggle,.mobile-toc-toggle,.chat-toggle{
  width:34px!important;height:34px!important;min-width:34px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:transparent!important;
  border-radius:8px!important;
  color:#fff!important;
}
.toc-toggle:hover,.mobile-toc-toggle:hover,.chat-toggle:hover{
  border-color:rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.05)!important;
}
.toc-toggle:focus,.mobile-toc-toggle:focus,.chat-toggle:focus,
.toc-toggle:focus-visible,.mobile-toc-toggle:focus-visible,.chat-toggle:focus-visible{
  outline:none!important;
  border-color:rgba(255,255,255,.45)!important;
}
/* collapsed must look exactly like open — no brighter/larger border */
.app-shell.toc-collapsed .toc-toggle{
  width:34px!important;height:34px!important;min-width:34px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:transparent!important;
}
@media(max-width:720px){
  .toc-toggle,.mobile-toc-toggle{width:40px!important;height:40px!important;min-width:40px!important}
}

/* --- Editable per-step notes --- */
.note-box{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.note-box .note-text{min-width:0;overflow-wrap:anywhere;white-space:pre-line}
.note-actions{display:flex;gap:6px;flex:0 0 auto}
.note-add{margin-top:8px}

/* --- Legend / Structure items: never collapse the label in edit mode --- */
/* Responsive columns so panels stay roomy instead of squeezing to ~200px. */
.grid-3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))!important}
/* Flex layout: when content + actions don't fit, actions wrap to the next line
   instead of crushing the label cell to zero width (which caused overlap). */
.item{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 14px;
}
.item>*:first-child{flex:1 1 200px;min-width:0}
.item .actions{flex:0 1 auto;min-width:0;justify-content:flex-end}
.item .item-meta,
.item .item-title{min-width:0;overflow-wrap:anywhere}
.icon-label-row{min-width:0}
.icon-label-row>span:last-child{min-width:0;overflow-wrap:anywhere}
/* Chips/badges keep their shape; their own text never wraps past the bubble. */
.legend-panel .role-chip,
.legend-panel .step-type{max-width:100%}

/* ============================================================
   V48 PRINT / PDF — clean A4 that mirrors the on-screen workflow
   ============================================================ */
@page{size:A4;margin:14mm 12mm}
@media print{
  html,body{background:#fff!important;color:#16181d!important}
  body{font-size:9pt!important;line-height:1.4!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  /* hide all chrome + editing affordances */
  .sidebar,.toolbar,.toc-backdrop,.head-actions,.actions,.filter-bar,.role-panel,
  #notice,.subpath-add,.note-add,.note-actions,.sp-actions,.subpath-bar .sp-actions{display:none!important}
  .app-shell,.app-shell.toc-collapsed{display:block!important}
  .main,.app-shell.toc-collapsed .main{max-width:none!important;padding:0!important;overflow:visible!important}
  .card,.page-card{border:0!important;box-shadow:none!important;background:#fff!important;color:#16181d!important;padding:0!important;margin:0!important}
  /* workflow header as the document title */
  .workflow-header{border-bottom:1.5pt solid #222!important;margin:0 0 12pt!important;padding:0 0 8pt!important}
  .workflow-header h2{color:#0e0f12!important;font-size:17pt!important;font-weight:600!important;line-height:1.2!important}
  .kicker{color:#5a606b!important;font-size:8.5pt!important;letter-spacing:.02em!important}
  /* tables */
  .table-wrap,.nested-table{border:0.75pt solid #b6bbc4!important;border-radius:0!important;overflow:visible!important}
  table{min-width:0!important;width:100%!important;table-layout:auto!important;border-collapse:collapse!important;font-size:8.4pt!important}
  thead{display:table-header-group!important}
  th{background:#eef0f3!important;color:#16181d!important;font-size:7.6pt!important;letter-spacing:.04em!important;border-bottom:0.75pt solid #b6bbc4!important}
  td,th{border:0.5pt solid #d7dade!important;padding:4pt 6pt!important;color:#16181d!important;vertical-align:top!important}
  tr,.step-row,.subpath-row{break-inside:avoid!important;page-break-inside:avoid!important}
  /* keep the coloured badges, but force readable text on white */
  .role-chip{border:0.5pt solid rgba(0,0,0,.18)!important;box-shadow:none!important}
  .step-type{color:#16181d!important;border-width:0.75pt!important}
  .svg-icon{color:#3a3f47!important;background:#f1f2f4!important;border:0.5pt solid #c7cbd2!important}
  .svg-icon svg{stroke-width:2!important}
  .step-link{background:none!important;border:0!important;color:#16181d!important;padding:0!important;text-decoration:underline!important}
  .next-end{color:#5a606b!important}
  /* subpaths: visible, indented, light */
  .subpath-bar{background:#f5f6f8!important;border:0.5pt solid #c7cbd2!important;border-left:2pt solid #8a909a!important}
  .sp-toggle{color:#16181d!important}
  .sp-caret{display:none!important}
  .sp-tag{color:#5a606b!important;border:0.5pt solid #c7cbd2!important}
  .subpath-row>td{border:0!important}
  .subpath-panel{background:#fafbfc!important;border-left:2pt solid #8a909a!important;padding:8pt 10pt!important}
  .note-box{background:#f5f6f8!important;border:0.5pt solid #c7cbd2!important;color:#2a2e35!important}
  .note-box .note-text strong{color:#16181d!important}
}

/* --- Data dropdown menu (tucks away export + destructive ops) --- */
.toolbar{overflow:visible!important}
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none;cursor:pointer;user-select:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::marker{content:""}
.menu[open]>summary{border-color:rgba(255,255,255,.42)!important;background:rgba(255,255,255,.05)!important}
.menu-pop{
  position:absolute;right:0;top:calc(100% + 6px);z-index:130;min-width:264px;
  width:max-content;max-width:min(360px,calc(100vw - 24px));
  max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper2);border:1px solid var(--line2);border-radius:12px;padding:7px;
  display:flex;flex-direction:column;gap:2px;box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.menu-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);padding:7px 8px 3px}
.menu-item{
  justify-content:flex-start!important;text-align:left!important;width:100%;
  height:38px!important;min-height:38px!important;white-space:nowrap;
  border:1px solid transparent!important;background:transparent!important;
}
.menu-item:hover{background:rgba(255,255,255,.06)!important;border-color:var(--line)!important}
.menu-item.danger{color:#F1C4C0!important}
.menu-item.danger:hover{background:rgba(180,35,24,.16)!important;border-color:rgba(180,35,24,.5)!important}
.menu-sep{height:1px;background:var(--line);margin:6px 4px}
/* The "View" menu group (Workflow View toggle + Undo/Redo) only exists to compact the
   phone toolbar — hidden everywhere except the ≤720px phone layout (shown there + the
   in-bar copies hidden; see the @media(max-width:720px) block). */
.menu-view{display:none}
@media(max-width:720px){ .menu-pop{right:auto;left:0;min-width:240px} }


/* ============================================================
   V49 — VALIDATION VIEW + UNIFIED UI POLISH
   ============================================================ */

/* ---- Consolidated type scale (fewer, consistent sizes) ---- */
:root{
  --fs-label-sm:11.5px;   /* uppercase micro labels: th, tags, badges */
  --fs-meta:13px;         /* secondary text: meta, kicker, notes */
  --fs-body:15px;         /* body / table / controls */
  --fs-body-lg:16px;
  --fs-title:23px;        /* page heading */
}
.toolbar-title{font-size:18px!important;line-height:24px!important;font-weight:500!important}
.workflow-header h2,.legend-top h2{font-size:23px!important;line-height:30px!important}
.role-panel h3,.legend-panel h3{font-size:18px!important;line-height:24px!important}
.kicker,.manager-note,.item-meta,.filter-bar,.v-loc{font-size:13px!important}
table{font-size:15px!important}
th{font-size:11.5px!important;letter-spacing:.07em!important}
.role-chip,.step-type,.sp-meta{font-size:13px!important}
.sp-tag,.v-badge{font-size:11px!important}
.btn,label.btn{font-size:14px!important}
.btn.small{font-size:12.5px!important}
td{line-height:1.5!important}

/* ---- Smooth, unified sidebar collapse ---- */
.app-shell{transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1)}
@media(min-width:1101px){
  .sidebar{transition:width .28s cubic-bezier(.4,0,.2,1),padding .28s ease!important}
  /* margin-left must transition too — opening the chat shifts .main via margin-left, and
     without it here (this rule overrides the base .main transition) the chat-open snaps
     instead of sliding like the Contents toggle (which only changes max-width). */
  .main{transition:max-width .28s cubic-bezier(.4,0,.2,1),margin-left .28s cubic-bezier(.4,0,.2,1)}
}
.toc-toggle,.mobile-toc-toggle{transition:background .15s ease,border-color .15s ease,transform .05s ease}

/* ---- Sidebar feels like a calm, housed panel ---- */
.sidebar{background:#0E0F11!important;border-right:1px solid rgba(255,255,255,.06)!important}
.sidebar-body{padding-bottom:30px!important}
.nav-actions{margin:6px 0 14px!important;gap:7px!important}
.nav-button{border-radius:9px!important;height:38px!important;min-height:38px!important;font-size:14px!important}
.search{border-radius:10px!important;height:46px!important;min-height:46px!important;flex:0 0 auto!important;margin:4px 0 14px!important}
/* On phones the search must be a comfortable tap target — taller than the nav buttons.
   Placed after the global override so it wins the equal-specificity !important tie. */
@media(max-width:720px){
  .search{height:50px!important;min-height:50px!important}
  .nav-button{height:44px!important;min-height:44px!important}
  /* Contents drawer fills the screen like the Axi panel; overrides the scattered 330/360 widths. */
  .app-shell:not(.toc-collapsed) .sidebar{width:100vw!important;max-width:100vw!important}
}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--error);color:#fff;font-size:10.5px;font-weight:600;margin-left:5px;vertical-align:middle}

/* ---- TOC: each section is a soft housed group; roomier rows ---- */
.section-block{
  border-top:0!important;
  background:rgba(255,255,255,.022)!important;
  border:1px solid rgba(255,255,255,.05)!important;
  border-radius:12px!important;
  padding:7px 7px 9px!important;
  margin:0 0 10px!important;
}
.section-title{
  height:auto!important;min-height:32px!important;
  font-size:12px!important;letter-spacing:.07em!important;text-transform:uppercase;
  color:var(--muted)!important;font-weight:600!important;
  padding:7px 8px 7px!important;white-space:normal!important;align-items:flex-start!important;
}
.section-title span{white-space:normal!important;line-height:1.35!important}
.workflow-link{
  min-height:36px!important;height:auto!important;
  border-radius:9px!important;padding:7px 10px!important;gap:10px!important;
  font-size:14.5px!important;line-height:1.35!important;color:#C2C8D2!important;
}
.workflow-link:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
.workflow-link.active{background:var(--accent-muted)!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important}
.workflow-number{color:var(--muted2)!important;font-weight:500!important;min-width:34px!important}
.workflow-link.active .workflow-number{color:#fff!important}

/* ---- Softer toolbar + cards (less sharp, more unified) ---- */
.toolbar{border-bottom:1px solid rgba(255,255,255,.05)!important}
.card,.page-card{border-color:rgba(255,255,255,.06)!important}
.role-panel,.legend-panel{border-color:rgba(255,255,255,.06)!important}
.table-wrap{border-color:rgba(255,255,255,.07)!important}

/* ---- Validation view ---- */
.v-summary{display:flex;gap:8px;flex-wrap:wrap}
.v-pill{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.v-pill.error{color:#F1C4C0;border-color:rgba(180,35,24,.5);background:rgba(180,35,24,.13)}
.v-pill.warn{color:#E8D3A8;border-color:rgba(197,179,88,.42);background:rgba(150,120,40,.13)}
.v-pill.ok{color:var(--muted)}
.validate-list{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.validate-row{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  background:var(--paper2);border:1px solid var(--line);border-radius:11px;
  padding:11px 14px;cursor:pointer;color:var(--text-soft);font-size:14.5px;
  transition:border-color .14s ease,background .14s ease,transform .05s ease;
}
.validate-row:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.04)}
.validate-row:active{transform:translateY(1px)}
.validate-row[disabled]{cursor:default;opacity:.85}
.validate-row.error{border-left:3px solid var(--error)}
.validate-row.warn{border-left:3px solid rgba(197,179,88,.6)}
.v-badge{flex:0 0 auto;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;font-weight:600}
.v-badge.error{background:rgba(180,35,24,.18);color:#F1C4C0}
.v-badge.warn{background:rgba(150,120,40,.20);color:#E8D3A8}
.v-msg{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;word-break:break-word;line-height:1.4}
.v-loc{flex:0 0 auto;color:var(--muted);white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.v-clean{margin-top:18px;padding:26px;text-align:center;color:#CDE6D8;background:rgba(47,74,67,.18);border:1px solid rgba(123,170,150,.32);border-radius:12px;font-size:16px}

@media(max-width:720px){
  .validate-row{flex-wrap:wrap;gap:8px}
  .v-loc{width:100%}
  /* long workflow titles truncate with an ellipsis; full title shows on hover + in the header */
  .workflow-link{align-items:center!important}
  .workflow-label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}


/* ============================================================
   V49b — de-box / unify corners + move animation + mobile menu
   ============================================================ */

/* Workflow page: drop the redundant outer box so the role panel and
   the table are the only containers (no box-in-a-box behind them). */
.wf-view{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin-bottom:0!important}

/* TOC: soften the section groups — subtle housing via background + spacing,
   no hard border line (removes the box-in-a-box feel inside the sidebar). */
.section-block{
  border:0!important;
  background:rgba(255,255,255,.028)!important;
  border-radius:13px!important;
  padding:8px 8px 10px!important;
}
.workflow-link.active{border:0!important;background:var(--accent)!important}

/* Consistent corner radius across the main containers */
.role-panel,.legend-panel,.table-wrap,.nested-table,.page-card,.card,.modal,.notice,
.subpath-bar,.subpath-panel,.item,.validate-row,.menu-pop,.v-clean,.search,.section-block{
  border-radius:13px!important;
}
.note-box{border-radius:11px!important}

/* Move (arrow-reorder) animation: the moved row settles with a soft highlight
   after sliding (the slide itself is done in JS via a FLIP transform). */
@keyframes movedSettle{0%{background:rgba(120,150,210,.20)}100%{background:transparent}}
.moved-settle{animation:movedSettle .9s ease-out}
.moved-settle>td{animation:movedSettle .9s ease-out}

/* Mobile: the Settings menu drops as a sheet directly BELOW the toolbar (not a stale fixed
   64px, which overlapped the now-taller toolbar) — so it reads as opening under the Settings
   button. Anchored to --bar-h (the measured toolbar height). */
@media(max-width:720px){
  .menu{position:static!important}
  .menu-pop{
    position:fixed!important;top:calc(var(--bar-h,60px) + 4px)!important;left:10px!important;right:10px!important;
    min-width:0!important;max-width:none!important;max-height:calc(100vh - var(--bar-h,60px) - 16px)!important;max-height:calc(100dvh - var(--bar-h,60px) - 16px)!important;overflow:auto!important;overscroll-behavior:contain!important;
  }
}

/* Desktop TOC: drop the dark "housed panel" background and hard border so the
   menu button and the rounded section cards float on the page background — no
   sharp dark slab at the bottom of the list, and the collapsed rail matches the
   toolbar buttons. Mobile keeps the dark drawer (rule above, outside this query). */
@media(min-width:1101px){
  .sidebar{
    background:transparent!important;
    /* 1px separator that matches the chat panel's border-right and animates with the
       sidebar width (so it slides with the sandwich toggle instead of snapping). */
    border-right:1px solid var(--line)!important;
  }
  /* nothing open (collapsed rail + chat closed) → drop the separator so the rail just floats */
  .app-shell.toc-collapsed:not(.chat-open) .sidebar{border-right-color:transparent!important}
}

/* Subpath visibility controls above the steps table */
.subpath-controls{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.subpath-controls .spc-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}

/* Subpath tone alternates by nesting depth: odd levels get a soft light tint
   (bar + its expanded panel share the tone so they read as one unit), even
   levels fall back to the dark page background. Indentation + this make depth clear. */
.subpath-bar{background:transparent}
.subpath-bar.sp-tint{background:rgba(255,255,255,.05)}
.subpath-bar.open{background:rgba(255,255,255,.028)}
.subpath-bar.sp-tint.open{background:rgba(255,255,255,.07)}
/* Tone lives on the full-width row band (not a floating block) so it fills
   edge-to-edge with no dark corners. Odd depth = light, even depth = dark;
   deeper levels are inset by indentation, giving the light/dark inversion. */
.subpath-panel{background:transparent!important;border-left:0!important}
/* Each level's content is indented (panel padding-left, accumulates via nesting),
   but the band background is painted full-width by a pseudo-element that extends
   back to the left edge by the accumulated indent (24px × ancestor depth). So the
   band reaches edge-to-edge at every depth — indented content, no inset box/corners.
   Even depth = explicit dark (#121212), odd = light; transparent would reveal the
   light parent and break the gray↔black inversion. */
.subpath-row>td{background:transparent!important;position:relative}
.subpath-row>td::before{content:"";position:absolute;top:0;bottom:0;right:0;left:calc(-24px * (var(--d,1) - 1));background:#121212;z-index:0}
.subpath-row.sp-tint>td::before{background:rgba(255,255,255,.04)}
/* Nesting rail: a soft, rounded vertical guide running the full height of each
   subpath block (one per depth, sitting in that level's indent gutter). It bounds
   the block top-to-bottom — so a nested subpath stays distinct from the main path
   even when its band inverts to the same color. Works on gray and black bands. */
.subpath-panel::before{content:"";position:absolute;left:8px;top:7px;height:var(--rail-h,calc(100% - 14px));width:2.5px;border-radius:3px;background:rgba(255,255,255,.22);z-index:2}
/* The nested table itself carries a dark fill on the main path (clipped by its
   rounded wrapper). In a subpath we want the band tone to show through instead,
   so the header row doesn't sit on a sharp black box. */
.subpath-row .nested-table,.subpath-row .nested-table>table,.subpath-row thead th,.subpath-row .step-row>td{background:transparent!important}

/* Legend: give Roles, Icons and Step Types items a uniform box height (matched to
   the taller icon box) so the three columns line up row-for-row. Content still
   centers within each box, so internal spacing varies by element but boxes don't. */
.legend-panel .item{min-height:88px}
/* Step-type pills are outlined (faint fill), so the meta at the pill's box edge
   looks like it juts left of the visible text. Indent it to sit under the text,
   matching the pill's left padding — so it reads aligned like the other sections. */
.legend-panel .item[data-drag-type="legend-type"] .item-meta{padding-left:11px}

/* Step move buttons (edit mode): robust chevron icons for up/down + out/in
   (move between nesting levels) — the on-screen alternative to drag, esp. on mobile. */
.btn-ico{display:inline-flex;align-items:center;justify-content:center;padding-left:8px;padding-right:8px}
.btn-ico .mv-ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.btn-ico[disabled]{opacity:.32;cursor:default}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* Workflow View (diagram) module host — keep overflow visible so the module's
   sticky header and title dropdown aren't clipped. */
.diagram-view .main,.diagram-view #mainView,.diagram-view #wfvPanel{overflow:visible}
#wfvPanel{min-height:240px}
/* ── Check page: "What this check looks for" brief ───────────────────── */
.v-rules{margin:16px 0 4px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--tertiary);overflow:hidden}
.v-rules>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 16px;font-weight:600;color:var(--text-soft)}
.v-rules>summary::-webkit-details-marker{display:none}
.v-rules>summary::before{content:"›";font-size:18px;line-height:1;opacity:.6;transition:transform .15s ease}
.v-rules[open]>summary::before{transform:rotate(90deg)}
.v-rules-hint{margin-left:auto;font-weight:400;font-size:12px;color:var(--muted)}
.v-rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:2px 16px 8px}
.v-rules-col h4{margin:8px 0;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--text-soft)}
.v-rules-col ul{margin:0;padding-left:16px;list-style:disc}
.v-rules-col li{margin:6px 0;font-size:13px;line-height:1.5;color:var(--text-soft);opacity:.82}
.v-rules-col li b{font-weight:600;opacity:1;color:var(--text-strong)}
.v-rules-note{margin:0;padding:10px 16px 14px;font-size:12.5px;line-height:1.55;color:var(--muted);border-top:1px solid var(--line)}
@media(max-width:680px){.v-rules-grid{grid-template-columns:1fr;gap:6px}}

/* ── Workflow diagram → portrait PDF export ──────────────────────────── */
/* Light, print-friendly theme for the diagram. Applied (via the
   .printing-diagram class set by printDiagram()) so it takes effect during
   Export PDF; the stage is re-fitted to page width in JS. Reuses the existing
   @page (A4 portrait, 14mm) so the table PDF is unaffected. */
body.printing-diagram .wfv{
  --wfv-ink:#16181d; --wfv-label:#5a606b;
  --wfv-canvas:#ffffff; --wfv-card-bg:#ffffff;
  --wfv-card-border:#b6bbc4; --wfv-spine:#3a3f47; --wfv-branch:#6b7280;
}
body.printing-diagram .wfv-viewport,
body.printing-diagram .wfv-stage{background:#fff!important}
body.printing-diagram .wfv-card{box-shadow:none!important}
/* in the PDF export, use the raw step-type colour for the outline (the screen brightens it toward
   light grey for the dark canvas, which would wash out on white) */
body.printing-diagram .wfv-card{border-color:var(--wfv-t,#b6bbc4)!important;border-width:2px!important}
/* role rail: raw role colour on white (the screen brightens it toward light for the dark canvas) */
body.printing-diagram .wfv-rail{background:var(--wfv-r)!important}
body.printing-diagram #wfv-ah-spine path{fill:#3a3f47!important}
body.printing-diagram #wfv-ah-branch path{fill:#6b7280!important}
@media print{
  body.printing-diagram .sidebar,
  body.printing-diagram .toolbar,
  body.printing-diagram .toc-backdrop,
  body.printing-diagram #notice,
  body.printing-diagram .wfv-filter{display:none!important}
  body.printing-diagram,
  body.printing-diagram .app-shell,
  body.printing-diagram .card,
  body.printing-diagram .page-card{background:#fff!important}
  body.printing-diagram .wfv-viewport{overflow:visible!important}
  body.printing-diagram .wfv-card,
  body.printing-diagram .wfv-stage,
  body.printing-diagram .wfv-wires{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}

/* diagram PDF — complete light-theme coverage for non-var dark surfaces */
body.printing-diagram .wfv-card.wfv-terminal{background:#fff!important;border-color:#b6bbc4!important}
body.printing-diagram .wfv-card.wfv-decision{border-color:#cdb558!important}
body.printing-diagram .wfv-titlebtn,
body.printing-diagram .wfv-titletext,
body.printing-diagram .wfv-card .wfv-body{color:#16181d!important}
body.printing-diagram .wfv-titlebtn{background:transparent!important}
body.printing-diagram .wfv-wlabel{color:#16181d!important;background:#fff!important}

/* Whole-SOP diagram PDF — each workflow's flowchart on its own page. #printAll holds
   cloned, page-scaled .wfv-stage snapshots; .printing-diagrams supplies the diagram's
   light print theme directly on the clones (no .wfv wrapper, so set the vars on the stage). */
@media print{
  body.printing-diagrams .pdg-title{font-size:13pt;font-weight:600;color:#0e0f12;margin:0 0 8pt;border-bottom:1pt solid #cfd3d9;padding-bottom:5pt}
  body.printing-diagrams .pdg-holder{position:relative;margin:0;overflow:hidden}
  body.printing-diagrams .pdg-empty{color:#5a606b;font-size:10pt;padding:18pt 0}
  body.printing-diagrams .pdg-holder .wfv-stage{
    --wfv-ink:#16181d;--wfv-label:#5a606b;--wfv-canvas:#fff;--wfv-card-bg:#fff;
    --wfv-card-border:#b6bbc4;--wfv-spine:#3a3f47;--wfv-branch:#6b7280;
    background:#fff!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
  }
  body.printing-diagrams .wfv-card{box-shadow:none!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body.printing-diagrams .wfv-card.wfv-terminal{background:#fff!important;border-color:#b6bbc4!important}
  body.printing-diagrams .wfv-card.wfv-decision{border-color:#cdb558!important}
  body.printing-diagrams .wfv-card .wfv-head,
  body.printing-diagrams .wfv-card .wfv-body{color:#16181d!important}
  body.printing-diagrams .wfv-wires,
  body.printing-diagrams .wfv-wlabel{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body.printing-diagrams #wfv-ah-spine path{fill:#3a3f47!important}
  body.printing-diagrams #wfv-ah-branch path{fill:#6b7280!important}
}
/* step-type chips: light tints with dark, legible text */
body.printing-diagram .wfv-step.start{background:#e8f3ee!important;color:#1d5a43!important;border-color:#9ccdb8!important}
body.printing-diagram .wfv-step.process{background:#e8eef9!important;color:#1f3a66!important;border-color:#9fb4d8!important}
body.printing-diagram .wfv-step.decision{background:#f6efd9!important;color:#6b551c!important;border-color:#cdb558!important}
body.printing-diagram .wfv-step.end{background:#f9e8e8!important;color:#6b2c2c!important;border-color:#d8a09a!important}
body.printing-diagram .wfv-step.document{background:#efeaf6!important;color:#3f2c66!important;border-color:#b9a6d6!important}
/* icon chips + in-card notes */
body.printing-diagram .wfv-icon{background:#f2f3f5!important;border-color:#c7ccd4!important}
body.printing-diagram .wfv-card .wfv-note{background:#f6f7f9!important;color:#3a3f47!important;border-color:#b6bbc4!important}
body.printing-diagram .wfv-card .wfv-note .wfv-note-t{color:#16181d!important}
body.printing-diagram .wfv-header{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important}

/* ── Whole-SOP PDF (Data → Whole SOP (PDF)) ──────────────────────────── */
/* #printAll holds every workflow's table; built on demand, hidden on screen,
   shown only in print where each workflow starts on a fresh page. Inherits
   the per-workflow @media print table styling above. */
#printAll{display:none}
@media print{
  body.printing-all .app-shell,
  body.printing-all .app-shell.toc-collapsed{display:none!important}
  body.printing-all #printAll{display:block!important}
  body.printing-all .print-wf{break-before:page;page-break-before:always}
  body.printing-all .print-wf:first-child{break-before:auto;page-break-before:avoid}
  /* each captured workflow card flows naturally; tidy spacing */
  body.printing-all .print-wf>.card{padding:0!important;margin:0!important}
  body.printing-all .filter-bar,
  body.printing-all .head-actions{display:none!important}
}


/* ============================================================
   Beta 1.0 PDF EXPORT POLISH (headless Chrome print-to-pdf)
   Overrides the live-app print output: light subpaths everywhere,
   no interactive controls, readable pills, saner pagination.
   ============================================================ */
@media print{
  /* hide remaining interactive controls / inputs */
  .subpath-controls,.spc-label,.search,.toc-toggle,.diagram-toggle,#diagramToggle{display:none!important}
  /* SUBPATHS: force ALL bands light (kills the dark even-depth slabs) + drop the nesting rail */
  .subpath-row>td::before,
  .subpath-row.sp-tint>td::before{background:#f5f6f8!important}
  .subpath-panel::before{display:none!important}
  .subpath-row .nested-table,
  .subpath-row .nested-table>table,
  .subpath-row .nested-table thead th,
  .subpath-row .nested-table td,
  .subpath-row .step-row>td{background:transparent!important;color:#16181d!important;border-color:#d7dade!important}
  .subpath-bar,.subpath-bar.sp-tint,.subpath-bar.open,.subpath-bar.sp-tint.open{background:#eef1f5!important}
  /* inline subpath summary pill in decision rows -> a readable label */
  .sp-toggle,.subpath-bar .sp-toggle{background:#eef1f5!important;color:#16181d!important;border:0.5pt solid #b6bbc4!important;text-decoration:none!important}
  .sp-toggle *,.sp-tag,.sp-count,.sp-label{color:#16181d!important;opacity:1!important}
  /* references, not web links */
  .step-link{text-decoration:none!important;color:#16181d!important}
  /* pagination: allow tall subpath/note blocks to flow (was forcing big blank pages) */
  .subpath-row,.subpath-panel,.note-box{break-inside:auto!important;page-break-inside:auto!important}
  .step-row{break-inside:avoid!important;page-break-inside:avoid!important}
  /* compact notes */
  .note-box{padding:4pt 7pt!important;margin:3pt 0!important;border-radius:2pt!important}
  .note-box+.note-box{margin-top:2pt!important}
}


/* ---- Beta 1.0 PDF export: cover, legend, running titles ---- */
@media print{
  .print-cover{break-after:page;page-break-after:always}
  .print-cover .pc-logo{display:block;max-width:165pt;max-height:64pt;object-fit:contain;margin:0 0 28pt}
  .print-cover .pc-kicker{font-size:10pt;letter-spacing:.18em;text-transform:uppercase;color:#8a909a;margin-top:54pt}
  .print-cover .pc-title{font-size:30pt;font-weight:700;color:#0e0f12;margin:8pt 0 2pt;line-height:1.1}
  .print-cover .pc-sub{font-size:11pt;color:#5a606b;margin-bottom:38pt}
  .print-cover .pc-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 28pt;max-width:380pt;border-top:1pt solid #cfd3d9;padding-top:6pt}
  .print-cover .pc-meta>div{display:flex;justify-content:space-between;border-bottom:0.5pt solid #e6e8ec;padding:6pt 0}
  .print-cover .pc-meta span{color:#8a909a;font-size:9.5pt}
  .print-cover .pc-meta b{color:#16181d;font-size:10.5pt}
  .print-legend{break-after:page;page-break-after:always}
  .print-legend h2{font-size:18pt;color:#0e0f12;margin:0 0 4pt;border-bottom:1.5pt solid #222;padding-bottom:6pt}
  .print-legend h3{font-size:9.5pt;letter-spacing:.08em;text-transform:uppercase;color:#5a606b;margin:16pt 0 7pt}
  .pl-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6pt 18pt}
  .pl-item{display:flex;align-items:center;gap:7pt;font-size:9pt;color:#16181d}
  .pl-chip{display:inline-block;min-width:30pt;text-align:center;color:#fff;border-radius:9pt;padding:2pt 6pt;font-size:8pt;font-weight:600}
  .pl-type{border:0.75pt solid #b6bbc4;border-radius:9pt;padding:2pt 8pt;font-size:8.5pt}
  .pl-ico{font-size:12pt;width:16pt;text-align:center;color:#3a3f47}
  .pl-name{color:#3a3f47}
  /* repeating running title (sits in thead -> repeats on every continuation page) */
  .print-run-title th{background:#16181d!important;color:#fff!important;font-size:9.5pt!important;font-weight:600!important;text-align:left!important;letter-spacing:.01em!important;padding:5pt 8pt!important;border:0!important}
}

.brand-logo-wide[src=""], .brand-logo-icon[src=""] { display: none; }

/* ===== Sidebar footer + sandwich toggle ===== */
/* Sidebar fills the viewport so the builder-identity footer pins to the bottom (all sizes) */
@media screen{.sidebar{display:flex!important;flex-direction:column!important;min-height:100vh!important}}
.sidebar-footer{margin-top:auto;flex:0 0 auto;padding:12px 2px 4px;color:var(--muted);font-size:11px;line-height:14px;font-weight:var(--fw-body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid rgba(255,255,255,.06)}
.app-shell.toc-collapsed .sidebar-footer{display:none}
@media (max-width:1100px){.app-shell.toc-collapsed .sidebar-footer{display:block}}

/* Desktop only (min-width:1101px): sandwich-toggle sizing, brand anchor, and the widened
   collapsed rail. Scoped so the mobile overlay layout (max-width:1100px) is untouched. */
@media (min-width:1101px){
  /* Match toolbar button height (44px), square, identical open/collapsed so it never shifts */
  .toc-toggle,
  .app-shell.toc-collapsed .toc-toggle{
    width:44px!important;height:44px!important;min-width:44px!important;
    border-radius:8px!important;font-size:17px!important;line-height:1!important;
    margin:0!important;flex:0 0 auto!important;
  }
  /* Anchor the toggle at the same offset regardless of collapse state */
  .brand,.app-shell.toc-collapsed .brand{
    align-items:center!important;justify-content:flex-start!important;
    height:auto!important;min-height:0!important;
    padding:10px 0 8px!important;margin:0 0 6px!important;gap:10px!important;
  }
  /* Even out the page frame: left + top breathing room closer to the (liked) ~40px right gutter */
  /* small right padding so the body's scrollbar sits near the edge (not floating inset) and the list gets more room */
  .sidebar,.app-shell.toc-collapsed .sidebar{padding-left:32px!important;padding-right:14px!important;padding-top:14px!important}
  .app-shell .sidebar > .brand{padding-right:10px}
  /* Top breathing room goes on the INNER content (#mainView), not on .main — .main is the
     scroll container, and padding-top on it makes the sticky thead stick BELOW that padding
     (a 14px band where scrolling rows showed through, above the header). With it on #mainView
     the scroll container's top is flush under the toolbar, so the thead pins right against it. */
  .main{padding-top:0!important}
  .app-shell .main>#mainView{padding-top:14px}
  /* Widen the collapsed rail just enough to hold the 44px toggle at the same left offset (no shift) */
  .app-shell.toc-collapsed{grid-template-columns:88px minmax(0,1fr)!important}
  .app-shell.toc-collapsed .chat-panel{left:88px}
  /* Collapsed rail: smaller right padding so the 44px toggle fits without the brand clipping it */
  .app-shell.toc-collapsed .sidebar{width:88px!important;max-width:88px!important;padding-left:6px!important;padding-right:6px!important}
  .app-shell.toc-collapsed .brand{overflow:visible!important}
  .app-shell.toc-collapsed .main{max-width:calc(100vw - 88px)!important}
}

/* SOP content-version badge next to the title; hide empty brand subtitle */
.content-ver{flex:0 0 auto;font-size:12px;font-weight:var(--fw-body);color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:2px 8px;letter-spacing:.02em;line-height:16px}
.brand small:empty{display:none}

/* Edit-mode per-step action buttons: Edit + Delete on top, move/nest arrows in a row below */
.wf-view .actions{display:flex;flex-direction:column;gap:6px;flex-wrap:nowrap;align-items:stretch}
.wf-view .act-row{display:flex;gap:6px}
/* Item C1 — inline step editor. The step row MORPHS into this editor card in place
   (no duplicate read row); it slides+fades in via stepEditorIn. */
.step-editor-row>td{padding:0!important;border:none!important}
.step-editor{margin:0 0 12px;padding:0;border:1px solid var(--accent-strong);border-radius:var(--radius-md);background:var(--paper2);overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.34);animation:stepEditorIn .24s cubic-bezier(.2,.7,.3,1)}
@keyframes stepEditorIn{from{opacity:0;transform:translateY(-8px) scale(.992)}to{opacity:1;transform:none}}
.se-head{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:10px 14px;background:color-mix(in srgb,var(--accent-strong) 16%,var(--paper2));border-bottom:1px solid var(--line)}
.se-head-step{font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--text)}
.se-head-chip{flex:0 0 auto;margin:0}
.se-done{flex:0 0 auto;width:auto;white-space:nowrap}
.se-body{padding:14px 14px 4px}
.se-reorder{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.se-reorder .se-move{flex:0 0 auto;width:auto;padding:0 10px;min-height:34px}
.se-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px 14px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--paper) 55%,transparent)}
.se-foot .btn{flex:0 0 auto;width:auto}
@media(prefers-reduced-motion:reduce){.step-editor{animation:none}}
/* On phones: bigger reorder tap targets, keep the header compact so Done isn't clipped/oversized. */
@media(max-width:720px){
  .se-reorder{flex-wrap:wrap}
  .se-reorder .se-move{min-height:44px;min-width:54px;padding:0 12px}
  .se-reorder .se-move svg{width:20px;height:20px}
  .se-head-chip{display:none}
  .se-done{flex:0 0 auto;width:auto!important;min-height:36px;padding:6px 14px;font-size:13px;align-self:center}
}
.se-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.se-grid{grid-template-columns:1fr}}
.se-f{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;min-width:0}
.se-f>span{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.se-f select,.se-f textarea{width:100%;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);color:var(--text);font:inherit;font-size:13px}
.se-f textarea{resize:vertical;line-height:1.45}
.se-wide{grid-column:1/-1}
.se-polish-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.se-polish-status{font-size:12px;color:var(--muted)}
.se-polish-card{margin-top:8px}
.se-notes{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.se-note{display:flex;gap:6px;align-items:flex-start}
.se-note textarea{flex:1 1 auto;min-width:0;width:auto}
.se-note-del{flex:0 0 auto;width:34px!important;padding:0!important}
.se-icons{display:flex;flex-wrap:wrap;gap:4px}
/* Minimal icon chips: faded by default; a box appears on hover; selected = full saturation + box. */
.se-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:4px;width:auto;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;cursor:pointer;opacity:.45;transition:opacity .12s,border-color .12s,background .12s}
.se-icon:hover{opacity:1;border-color:var(--line);background:var(--paper)}
.se-icon.on{opacity:1;border-color:var(--accent-strong);background:rgba(94,139,208,.16)}
.se-icon .svg-icon{margin:0}
.se-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.se-actions .btn{flex:0 0 auto;width:auto}
.se-spacer{flex:1 1 30px}
.se-spacer{flex:1 1 auto}
.polish-note-line{font-size:12px;color:var(--text-soft);line-height:1.5}

/* Item C2 — inline editors for the Legend (roles/step-types/icons) and Structure (sections/workflows).
   Reuse the .se-* field primitives from the step editor; these add the container + a few extras. */
.legend-editor,.struct-editor{margin:2px 0 6px;padding:14px;border:1px solid var(--accent-strong);border-radius:var(--radius-md);background:var(--paper2)}
.struct-editor{margin:2px 0 10px}
.legend-editor input[type=text],.struct-editor input[type=text],.struct-editor textarea{width:100%;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);color:var(--text);font:inherit;font-size:13px}
.struct-editor textarea{resize:vertical;line-height:1.45}
.le-color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.le-color-row input[type=color]{flex:0 0 auto}
.le-note{font-size:12px;color:var(--text-soft);line-height:1.5;margin:0 0 10px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--paper);border:1px solid var(--line)}
.item.is-editing{outline:1px solid var(--accent-strong);outline-offset:1px;border-radius:var(--radius-sm)}
.se-moves{gap:6px}
.se-move-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-right:2px;align-self:center}
.se-moves .btn-ico{flex:0 0 auto;width:auto;padding:0 7px}
.step-row.is-editing>td{background:var(--paper2)}
.card.is-editing{outline:1px solid var(--accent-strong)}
.legend-icon-editor .icon-lib-grid{max-height:min(34vh,260px)}
.tut-tour-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px;border:1px solid var(--accent-strong);border-radius:var(--radius-md);background:var(--paper2)}
.tut-tour-row .muted{font-size:12px}

/* Item F — guided tour: spotlight overlay (a transparent hole + huge box-shadow dims the rest). */
.coach-overlay{position:fixed;inset:0;z-index:300;pointer-events:auto}
.coach-overlay.no-target{background:rgba(0,0,0,.62)}
.coach-hole{position:absolute;border-radius:10px;box-shadow:0 0 0 9999px rgba(8,10,14,.66);outline:2px solid var(--accent-strong);outline-offset:0;transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease;pointer-events:none}
.coach-card{position:fixed;z-index:301;background:var(--paper2);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.6);padding:16px 16px 12px}
.coach-step-count{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:4px}
.coach-title{margin:0 0 6px;font-size:16px;line-height:1.25}
.coach-body{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--text-soft)}
.coach-body b{color:var(--text)}
.coach-actions{display:flex;align-items:center;gap:8px}
.coach-spacer{flex:1 1 auto}
.coach-card::after{content:"";position:absolute;width:14px;height:14px;background:var(--paper2);border:1px solid var(--line2);transform:rotate(45deg)}
.coach-arrow-up::after{top:-8px;left:24px;border-right:none;border-bottom:none}
.coach-arrow-down::after{bottom:-8px;left:24px;border-left:none;border-top:none}
.coach-arrow-left::after{left:-8px;top:24px;border-right:none;border-top:none}
.wf-view .act-row>.btn{flex:1 1 0;min-width:0}
.wf-view .act-main>.btn{padding:0 5px;white-space:nowrap}
.wf-view .act-moves>.btn{padding:0}

/* Icon picker in the edit-step modal */
.icon-pick-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
/* Item M — icon library picker */
.icon-edit-top{display:flex;align-items:flex-start;gap:14px;margin:4px 0 12px}
.icon-edit-preview{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2)}
.icon-edit-preview .svg-icon{width:44px;height:44px;margin:0}
.icon-edit-preview .svg-icon svg{width:26px;height:26px}
.icon-edit-fields{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;min-width:0}
.icon-edit-fields label{font-size:12px;color:var(--text-soft);margin-top:4px}
.icon-ai-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.icon-gen-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.icon-gen-row input{flex:1 1 160px;min-width:0}
.icon-gen-row .btn{flex:0 0 auto;white-space:nowrap}
.icon-gen-hint{font-size:11.5px;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:6px}
.icon-ai-sep{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center;margin:2px 0 8px;opacity:.7}
.icon-ai-row input{flex:1 1 160px;min-width:0}
.icon-ai-row .btn{flex:0 0 auto;white-space:nowrap}
.icon-lib-search{width:100%;margin:0 0 10px}
.icon-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:min(40vh,320px);overflow:auto;padding:2px}
.icon-lib-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 6px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2);color:var(--text-soft);font:inherit;cursor:pointer;transition:border-color .12s,background .12s}
.icon-lib-btn:hover{border-color:var(--accent-strong);background:rgba(255,255,255,.05)}
.icon-lib-btn.sel{border-color:var(--accent-strong);background:rgba(94,139,208,.16)}
.icon-lib-btn .svg-icon{margin:0}
.icon-lib-name{font-size:10.5px;line-height:1.2;text-align:center;color:var(--muted)}
.icon-pick{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 6px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.03);color:var(--text-soft);cursor:pointer;font-size:13px;line-height:1}
.icon-pick:hover{border-color:var(--text-soft);background:rgba(255,255,255,.06)}
.icon-pick.is-on{border-color:#5E8BD0;background:rgba(94,139,208,.16);color:#fff}
.icon-pick .svg-icon{width:28px;height:28px;min-width:28px;margin:0;flex:0 0 auto;font-size:15px}
.icon-pick .svg-icon svg{width:16px;height:16px}
.icon-pick-label{white-space:nowrap}

/* Rename-before-export modal */
.rename-modal{max-width:520px}
.rename-hint{color:var(--muted);font-size:13px;line-height:1.45;margin:0 0 14px}
.rename-hint b{color:var(--text-soft);font-weight:var(--fw-control)}
.rename-modal input[name="fname"]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Toolbar: wrap the action buttons to a second row before the title gets cramped,
   and truncate the title so the SOP title/version never clips into the buttons. */
.toolbar{flex-wrap:wrap}
/* desktop: keep the app-bar on ONE row — the title truncates so the actions never wrap.
   Below 1101 the bar may wrap and the actions drop to a second row, right-aligned. */
@media(min-width:1101px){.toolbar{flex-wrap:nowrap}.toolbar-actions{flex-wrap:nowrap;flex:0 0 auto}}
.toolbar-title{flex:1 1 auto;min-width:0}
.toolbar-sop-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Theme presets (dark variants). Default = no [data-theme] attribute = untouched. ===== */
/* The sidebar's base background is hardcoded; route it through the token so themes re-skin it. */
:root[data-theme] .sidebar{background:var(--nav)!important}
:root[data-theme] .toolbar{background:var(--bg)!important;backdrop-filter:none!important}
:root[data-theme="graphite"]{--bg:#17181B;--nav:#101114;--paper:#17181B;--paper2:#1F2025;--paper3:#26282E;--accent:#3C4250;--accent-strong:#4E5566;--accent-muted:#23262F;--primary:#2E3340}
:root[data-theme="navy"]{--bg:#0C1322;--nav:#0A0F1C;--paper:#0C1322;--paper2:#131C30;--paper3:#1B273F;--accent:#2A3E63;--accent-strong:#36548A;--accent-muted:#172339;--primary:#1D2F50}
:root[data-theme="forest"]{--bg:#0D1512;--nav:#0A100D;--paper:#0D1512;--paper2:#141E18;--paper3:#1B2820;--accent:#244B3A;--accent-strong:#2F6651;--accent-muted:#15251D;--primary:#1A3526}
:root[data-theme="plum"]{--bg:#14101B;--nav:#0F0B15;--paper:#14101B;--paper2:#1C1624;--paper3:#251D30;--accent:#3F2A5E;--accent-strong:#523884;--accent-muted:#211839;--primary:#2C1D49}

/* Appearance / theme picker modal */
.theme-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:1px solid var(--line2);border-radius:var(--radius-md);background:rgba(255,255,255,.03);color:var(--text-soft);cursor:pointer;width:84px}
.theme-swatch:hover{border-color:var(--text-soft)}
.theme-swatch.sel{border-color:#5E8BD0;background:rgba(94,139,208,.16);color:#fff}
.theme-swatch .ts-chip{width:100%;height:34px;border-radius:6px;border:1px solid rgba(255,255,255,.14)}
.theme-swatch .ts-name{font-size:12px}
.accent-row{display:flex;align-items:center;gap:10px}
.accent-row input[type=color]{width:54px;height:38px;padding:2px;border:1px solid var(--line2);border-radius:var(--radius-sm);background:transparent}

/* ===== AI "Polish" feature (Beta 1.3) ===== */
.polish-bar{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.polish-btn{white-space:nowrap}
.polish-status{font-size:12px;line-height:1.4;min-width:0;flex:1 1 140px}
.polish-status .muted{color:var(--text-soft)}
.polish-ok{color:#7fd1a8}
.polish-err{color:#e88b8b;word-break:break-word}
.polish-card{margin-top:10px;border:1px solid var(--line2);border-radius:var(--radius-md);padding:12px;background:rgba(255,255,255,.04)}
.polish-card.hidden{display:none}
.polish-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.polish-tag{font-weight:600;font-size:13px}
.polish-prov{font-size:11px;color:var(--text-soft);white-space:nowrap}
.polish-suggest{font-size:14px;line-height:1.55;padding:9px 11px;border-radius:var(--radius-sm);background:rgba(127,209,168,.10);border:1px solid rgba(127,209,168,.34)}
.polish-diff-wrap{margin-top:8px}
.polish-diff-wrap>summary{cursor:pointer;font-size:12px;color:var(--text-soft);list-style:revert}
.polish-diff{margin-top:6px;font-size:13px;line-height:1.7;padding:8px 10px;border-radius:var(--radius-sm);background:rgba(0,0,0,.22);word-break:break-word}
.polish-diff ins{background:rgba(127,209,168,.26);text-decoration:none;border-radius:3px;padding:0 2px}
.polish-diff del{background:rgba(204,107,107,.24);border-radius:3px;padding:0 2px}
.polish-notes{margin-top:10px}
.polish-notes-h{font-size:12px;color:var(--text-soft);margin-bottom:4px}
.polish-note{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;padding:3px 0}
.polish-note input{margin-top:3px;flex:0 0 auto}
.polish-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ai-key-inputs{display:flex;gap:8px}
.ai-key-inputs input{flex:1 1 auto;min-width:0}
.ai-key-hint{font-weight:400;font-size:11px;color:var(--text-soft)}
.ai-test-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-test-out{font-size:12px;line-height:1.4;word-break:break-word}
.ai-log-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--line2);font-size:12px}
.ai-log-btns{display:flex;gap:8px;flex-wrap:wrap}
.ai-model-custom{margin-top:8px}
.ai-keys-saved{display:block;margin-top:6px;font-size:11px;color:var(--text-soft)}
.ai-key-detect{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
.ai-key-detect.ok{color:#9FD8B6}
.ai-key-detect.warn{color:#E8C68A}

/* Inset custom dropdown chevron — the native <select> arrow hugs the right edge and
   looks inconsistent; replace it with our own chevron sitting 14px in from the edge.
   !important is needed to win over the later "skin" rules that set `background` on selects. */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0a6b0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
}
select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c2c8d2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
}

/* Custom dropdown — styled replacement for the native <select> popup, consistent with
   the Settings menu. The real <select> is hidden but kept for value/form/change logic. */
.cdd{position:relative;min-width:0}
/* Let form-grid items shrink below their content's min-content so a long, non-wrapping
   dropdown label can't blow the grid wider than the modal on narrow screens. */
.form-grid>div{min-width:0}
.cdd>select{display:none}
.cdd-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;overflow:hidden;text-align:left;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-sm);padding:14px 16px;background:#15161a;color:var(--text-soft);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:1.3;cursor:pointer}
.cdd-trigger:hover{border-color:rgba(255,255,255,.17)}
.cdd.open .cdd-trigger,.cdd-trigger:focus-visible{border-color:rgba(255,255,255,.30);background:#181a20;outline:none}
.cdd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cdd-chev{flex:0 0 auto;width:14px;height:14px;fill:none;stroke:#a0a6b0;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.cdd.open .cdd-chev{transform:rotate(180deg)}
.cdd-panel{position:fixed;z-index:9999;display:none;overflow-y:auto;background:var(--paper2);border:1px solid var(--line2);border-radius:12px;padding:7px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.cdd.open .cdd-panel{display:block}
.cdd-opt{display:block;width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--text-soft);border-radius:8px;padding:9px 11px;font-size:var(--fs-body);line-height:1.35;white-space:normal;cursor:pointer}
.cdd-opt:hover,.cdd-opt.active{background:rgba(255,255,255,.06);border-color:var(--line)}
.cdd-opt.sel{color:#fff;background:rgba(94,139,208,.16);border-color:rgba(94,139,208,.4)}

/* Step notes editor (inside the Edit Step modal; the table shows notes read-only) */
.step-notes{margin-top:14px}
.step-notes-head{font-size:12px;color:var(--text-soft);margin-bottom:8px}
.step-notes-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.step-note-row{display:flex;gap:8px;align-items:flex-start}
.step-note-input{flex:1 1 0;min-width:0;min-height:54px;resize:vertical}
.step-note-row .note-del{flex:0 0 auto;width:auto!important;align-self:flex-start}

/* ===== AI review panel (Beta 1.4 — AI Checking V1) ===== */
.ai-check{margin-top:18px;border-top:2px solid var(--accent-strong,var(--accent))}
.ai-beta-tag{display:inline-block;vertical-align:middle;margin-left:8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--text-soft);background:rgba(255,255,255,.08);border:1px solid var(--line);padding:2px 8px;border-radius:999px}
.ai-prov-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:12px}
.ai-prov-line b{color:var(--text-soft);font-weight:600}
.ai-model{font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;color:var(--text-soft)}
.ai-prov-warn{color:#E8D3A8}
.ai-settings-link{margin-left:auto}
.ai-check-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ai-scope{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ai-scope-label{font-size:13px;color:var(--muted);flex:0 0 auto}
.ai-scope-btn{font-size:13px;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-soft);cursor:pointer;white-space:nowrap}
.ai-scope-btn:hover:not([disabled]){border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.04)}
.ai-scope-btn.sel{background:var(--accent-strong,var(--accent));border-color:var(--accent-strong,var(--accent));color:#fff}
.ai-scope-btn[disabled]{opacity:.4;cursor:not-allowed}
.ai-weight{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;color:var(--muted)}
.ai-weight.w-light{color:#9FD8B6;border-color:rgba(80,170,120,.4);background:rgba(60,150,100,.12)}
.ai-weight.w-medium{color:#CFE0A8;border-color:rgba(150,170,80,.4);background:rgba(120,140,50,.12)}
.ai-weight.w-heavy{color:#E8D3A8;border-color:rgba(197,179,88,.45);background:rgba(150,120,40,.14)}
.ai-weight.w-too-heavy{color:#F1C4C0;border-color:rgba(180,35,24,.5);background:rgba(180,35,24,.14)}
.ai-run{flex:0 0 auto}
.ai-warn{font-size:13px;line-height:1.5;color:#F1C4C0;background:rgba(180,35,24,.10);border:1px solid rgba(180,35,24,.4);border-radius:var(--radius-md);padding:10px 12px;margin:0 0 10px}
.ai-privacy{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.ai-result-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:4px 0 10px;padding-top:12px;border-top:1px solid var(--line2)}
.ai-clear{margin-left:auto}
.ai-check-loading{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-soft);padding:14px 0}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent-strong,var(--text-soft));display:inline-block;animation:aiSpin .8s linear infinite;flex:0 0 auto}
@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-check-error{font-size:14px;line-height:1.5;color:#F1C4C0;background:rgba(180,35,24,.10);border:1px solid rgba(180,35,24,.4);border-radius:var(--radius-md);padding:12px;word-break:break-word}
.ai-check-clean{font-size:14px;color:#9FD8B6;padding:10px 0}
.ai-issue-list{display:flex;flex-direction:column;gap:10px}
.ai-issue{border:1px solid var(--line2);border-left-width:3px;border-radius:var(--radius-md);padding:12px 14px;background:rgba(255,255,255,.03)}
.ai-issue.sev-high{border-left-color:var(--error)}
.ai-issue.sev-medium{border-left-color:rgba(197,179,88,.7)}
.ai-issue.sev-low{border-left-color:rgba(120,150,210,.6)}
.ai-issue-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ai-sev{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:999px}
.ai-sev.high{background:rgba(180,35,24,.18);color:#F1C4C0}
.ai-sev.medium{background:rgba(150,120,40,.20);color:#E8D3A8}
.ai-sev.low{background:rgba(120,150,210,.18);color:#BFD0EE}
.ai-type{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ai-loc{font-size:12px;color:var(--text-soft);margin-left:auto}
.ai-issue-reason{font-size:14px;line-height:1.5;color:var(--text-soft)}
.ai-issue-fix{font-size:13px;line-height:1.5;color:var(--muted);margin-top:6px}
.ai-fix-label{color:var(--text-soft);font-weight:600}
.ai-fix-rep{margin-top:8px;font-size:13px}
.ai-fix-rep summary{cursor:pointer;color:var(--muted);font-size:12px}
.ai-fix-rep-body{margin-top:6px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.04);color:var(--text-soft);line-height:1.5}
.ai-issue-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.ai-applied{font-size:12px;color:#9FD8B6}
.ai-cat{font-size:11px;color:var(--text-soft);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:2px 9px;letter-spacing:.02em}

/* Final-review readiness report (Beta 1.9) */
.readiness-report{border:1px solid var(--line2);border-radius:var(--radius-md);padding:14px 16px;margin:4px 0 14px;background:rgba(255,255,255,.03)}
.readiness-report.rr-ready{border-color:rgba(123,170,150,.5);background:rgba(47,74,67,.16)}
.readiness-report.rr-review{border-color:rgba(197,179,88,.45);background:rgba(150,120,40,.12)}
.readiness-report.rr-blocked{border-color:rgba(180,35,24,.5);background:rgba(180,35,24,.12)}
.rr-head{display:flex;align-items:flex-start;gap:12px}
.rr-icon{flex:0 0 auto;width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.rr-ready .rr-icon{background:rgba(123,170,150,.22);color:#CDE6D8}
.rr-review .rr-icon{background:rgba(197,179,88,.22);color:#E8D3A8}
.rr-blocked .rr-icon{background:rgba(180,35,24,.22);color:#F1C4C0}
.rr-headline{font-size:16px;font-weight:600;color:var(--text-strong,#fff)}
.rr-sub{font-size:13px;line-height:1.5;color:var(--text-soft);margin-top:2px}
.rr-copy{flex:0 0 auto;margin-left:auto}
.rr-sevs,.rr-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.rr-sev{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;letter-spacing:.02em}
.rr-sev.high{background:rgba(180,35,24,.18);color:#F1C4C0}
.rr-sev.med{background:rgba(150,120,40,.20);color:#E8D3A8}
.rr-sev.low{background:rgba(120,150,210,.18);color:#BFD0EE}
.rr-cats-label{font-size:12px;color:var(--muted)}
.rr-cat{font-size:12px;color:var(--text-soft);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.rr-cat b{color:var(--text-strong,#fff)}
@media (max-width:560px){
  .ai-check-controls{align-items:stretch}
  .ai-run{width:100%}
  .ai-loc{margin-left:0;width:100%}
  .rr-copy{margin-left:0;width:100%;margin-top:8px}
  .rr-head{flex-wrap:wrap}
}

/* AI review — workflow picker (Beta 1.4) */
.ai-wf-pick{font-size:13px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--paper2,rgba(255,255,255,.05));color:var(--text-soft);max-width:100%;min-width:0;cursor:pointer}
.ai-wf-pick:hover{border-color:rgba(255,255,255,.32)}
@media (max-width:560px){.ai-wf-pick{flex:1 1 100%;width:100%}}

/* ============================================================================
 * AI DRAFTING (Beta 1.5) — draft markers + the skeleton-drafting modal.
 * Draft = an amber marker on AI-generated content until the author marks it final.
 * ========================================================================== */
/* Axi glyph on AI buttons — the exact artwork from the Executive Comms Assistant app
   (public/axi-glyph.png), embedded as a currentColor mask so it stays crisp and themed. */
.ai-glyph{display:inline-block;width:1.05em;height:1.05em;flex:0 0 auto;margin-right:.4em;vertical-align:-.13em;background-color:currentColor;-webkit-mask:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAASj0lEQVR4nO1cCVhU5fo/h0GQxUS4CKIIbpimhBn/6soVDAs1rX/dBssl078t3qterVwKCSi7+RSlZeKDuJGEVyYdoRCITRTZnGFxRFmGhmGVgYHZh5k5M+f/vMfzeU9UpiQw6Pk9DwwD33DO973f9y6/930PhrFgwYIFCxYsWLBgwYIFCxYsWLBgwYLFgwD8bgaTJInGwyuJ49RbckDujAULqweHw2GeChb9wB0v3syZM+1Wrlw52mKxOMpkMnNRUZFaKBSqMQyzgCoiSVYT9Qe2t/kbpedhh+M4Trq6ujp5eHj4u7i4zJo+fTpn2rRpP3t6el5JT09vsVgsJiQEGIsNzw1IWpsAfiEIvV5v6e3tdXN3d583adKkaTiOd/j7+1+cN28eD8fxOtog2wwHo0zeVJvUvGxtbUmLxTJkJ/h2AiD77BKdVqttd3JyUo4dO3ayvb19gJ2dna/JZOoODAyUX758WW5ra2tBE8OsGPjNU2oV9wg79raIjo6m3E2BQEDodDpRU1PTj52dnRXwNxcXlym+vr7/u3nz5tDnn39+FOyi/Px8Dn0arBF4H6cBNqAjhmFOYOPu1i0fNND6nbq5uXPnjj516tQbLS0tl8FAKJVKlUgkStq9e/eTGIbZwVgbGxssKirqD4U7mGAu/Nq1a935fH6oQCD4h0Ag+OeRI0cWL126dCI4dn3HWgtuKnibm2s6fvz4CaWlpZEajUYOQlCr1dKsrKzdb7/99iwkrJSUFGoy1gCSJKmdT5/M0UlJSS81NDT8qNFotGq1WnL+/Pl/h4eHPxocHEypZJIkB23z3NWFzGYztaitra0t2dnZ6bW1tacJguhxdnaeGBAQ8PcXXnghlCRJd9CxXC4XhiJjN6Q4f/48x8bGBvaK/YEDB57w9/fnenh4zHdycnLUaDS9Wq1Wotfrb4SEhFhAUNHR0ZhVAtQKvZtAcCMjIiJCwCYYjUY9zK6lpSV33759f586depD6DNDeZyjaDVIn1zO9u3bHykrK9svl8u74H47OjpqsrKydu3YscO3z/0O+aa5LdARnTx58ujk5OR1YrH4AkzIZDJpampqePHx8UHI4NFjh2RCJEly4B5AABs2bJh8+vTp9zo6Oq5aLBayt7fXIBKJDq5du/bRm0H9LY1p3YsP4HK5HKRTlyxZ4nPu3Ln35HJ5LQhBq9XeKCkp2bNr164ZN+03jg2VPSBJEl13VEpKymuNjY1FBEGYSZLsra+vT09MTFyCYdgIeqzNsBFAX3du7969AWVlZQd7eno6zWazpaWl5Vp2dva2lStXjhuKyZG/VHuOERERT9fW1qbABoHdr1AoKo4ePboCwzBX5FhYm9f2h0AnACYQHBw8MiYmZoFYLP4eJqjX6wmpVJoXFxfHffjhh90QaTdIJwEHgSMh7Nq169Hy8vJ4nU4nAwHcuHGjJi8v76OFCxdOZHpIw2XnM3EzGUCSKJp2ysjIWN3a2loOG81gMKgrKipS9u3bF4oi7sEQQArjGq+//rp3bm7uNqVS2QiLr9FougoLC/dv3rw5kMvl2qFNYcWB4x+D6TM//fTT43/44Yd/6fV6asIGg0FTVlb25XPPPTcLhIDGDpBnhNP/m1pQCBhTU1P/r7GxsdhkMkEU33v9+vX0o0eP3tL7DMM7ZLgTMu62AJ8fHWEcx1t9fX0zJ0yY4AcUhYuLi5efn9+SjRs3djo7OytxHG+md9s954uioqIo/93W1tY8e/Zsp5deeumxadOmLXZ3d3/U1taW09nZKaisrDxTUVFxGcdxk8ViQfcM/NXwBh39UnqXy+U6QHxQXl7+rdFo1IJ02tvbL588eXIFig+Y1Ma9AtPQf/rpp3MvXLiwX6FQtML1e3p6OkpLS2PmzZt3S++jsdj9AoYxAzgmJyeHi8XiAqPRCKpId/Xq1TPHjx9fjGGYPS0A23uxCOi6tMtpM2bMmInZ2dk7VSpVOyw+QRBagUAQ9+67785Fkf9gUg2DCjBoKPCJiIjwPnv27FaZTHYFFqK7u7tLKBR+s2HDBn/QwaB/cRz/s+4fWnxKiIGBgW4nTpxY19zcXAjX7O3tVbS1tWXFxsY+A5E7jKOvd38KAO1m2rjhr7766rQrV658qVarVeAZyWSy62fOnInYtm0bJHQwRqTcL9CLiQQAPM+zjY2NmWazmQABSCSSguTk5De4XK77b5zS+xeMCJQTFxf3t+rq6u+AqYAYoa2trZLH460BVhL7rzro18Iw1VhCQsL/lJSUHFAqlTdg8c1ms7mysvJAUFDQTNjxjN1//wsAJkoTdzBhx/j4+OdlMlmJyWQywuLU19ef/vjjj5+lkyH92Zm/OGlgXAsLC6Pa29vrDQZDL6w/CFskEsVOnDhxEnPsAyEAAIN/x5YtW+Zx+vTpTSiJYzAYlFevXj3ywQcfPNYncr0jdYTGw6K++eab444ePbpOIpEUGgwGA6g6+gCYRCLRqffffz906dKljugEWJsK+tNxwO3w4Ycf2oBvjuN4l1wuP7d79+6xTk5O41xcXMb7+PiEhoSE/KxSqXpwHJeghb2DqBRn5HXtAwICAoKCgl4eO3Ys5KjtzGYz0CPgCNh4enoGLl++XNbd3d2O4/g1yAkwhGwVOeEBB8PI2oA9uHz58jGNRtNtNptJqVRakZGR8faECRNc+4z9XSkwvKYRK1asmFtaWrqfIAgqHwFxR2dnZ61cLm+A9zT90Hz27NnNDg4OXmj3Dzvi7c8AJotIOy6X6xwfH/+cRCL5CS1Qc3NzdlJS0vJ33nnnL3/ATFL6Gxl4oMELCws/RjyPSqVqq6ysTMrJyflnXl7eu3V1dZkoEGxpaSnj8/mrMQxz7uMkWJU6GhTSbu7cuX/Jz8/f1NbWVk776Q3nzp37AlhLRlLc5nYk2+rVq92Sk5PXdHV1AfEH7KsOEkFRUVGLgGJ2dHQcd+jQodeam5svmkwmE4wBpjYiImI+kHBI0NZgDwbUBvTRtWb4JhQK5QkJCWkvvviiavLkyQsIgnAlSVJnb28/CoIlDMO0NjY2v6ovghwzHTvYLVu2bN6sWbOWOzs7zyAIAqgOkVgszvz666+LMQxT6nQ6LDs7+7yfn98kOzs7L6hjcnNzm7do0aI2Ly8vBY/Hu8IszsKGEIOmC8Fo0uqITE5Olm7cuDGjqKjouFgsTlQoFAUEQdyAOlMYy6xSQy7qiBEjzDNmzLDbsmXLrClTpiwaP378E/b29iNVKpW4pqYmTSQS5ff09ChtbW0pl5PH47UKhcKM5ubmLL1e3+3i4uLp5+e3cMqUKU+HhYWNQ8VZSEU+UGAERSPAk6G/4DT+aiWYamLnzp1Ts7Kyojs6Oq7T6U9ddXV1wnvvvRdAj0VFA7ei40OHDoU1NjZmgVsKLmp9fX32kSNHVgUHB7ugzzxwArjTCUfRwRw93u3bb799TSaTVQC/DwKoq6vj79mzJwzDMAcYgMYyhRYaGgqfW9vZ2VlM2wtVQ0MDPzIych4Ukj0I/NBvAQVFHPqrb4CEDDdaFIf9+/cvraurO0sznMaurq4qHo+3CiokGYl/ZsIHeUy4l5eXd0FBQaRSqaToaaPR2FVUVPTF1q1bZ6ML3rcMaX8QRbuhKDretGnTnPr6+uMEQRjoep4rfD5/x/r16yma4fcWkOFu2kRGRj5x8eLFAxqNhuKKFApFS3Fx8Q5HR0dPxrUAD5g++g2gtCLgiy++mJqbmxujUqmksHByubyjpKTkq1deeeUROs35C0r6t+hxmgdy3rNnzzO1tbV8jUZDBW5NTU0XEhISVqxZs4Y6RQx19GCDQ+dqZ8+ePSYzMxMKgatgwXQ6nbKiouJ0UlISldgBf57BiP5hnhjihzNnzrwhkUhKwCir1WqdSCTiHTx4MAS55INdIWFV0iYZO3DdunWj1q9fP9/b23upu7u7H/yup6en+vr169+npqYWYRgG6gh+fbucLolK7OH1xIkT8pMnT2ZJpdI0KCBzdnZ28PHx+ev06dOXvPXWW4+g4tyoqKihz9YPNkg6OYPqOHfs2DFHKBQeg2IvWvWIc3JyPli5cuUEejylXu7i/99yN2NjY+eWl5cfAWMM/7u1tVX0008/7Zg5cyayByhv8ODYA5JB2gUHB09NT09/X61WN9FeT69QKNwbFhYGep9SJ3erKpCwaCE4RkZGPtPU1JSGOCmZTFZ44MCBl8CrGrbVcv0EziTZYAEyMzM3yOXyajqvq6yurj7zzTffhDLqOCn3sj8XY1xnNJ/PXy+VSktoIWtqa2vPHj58GK6D4on7n7QjGWoEEieff/754paWliw6cWOUSCS5X331VTiQeKjE8c/47MyK6VWrVk1NS0vbiQqL9Xq9pry8fO/y5cuhsBipw/taADgzCEtMTHxKJBJ9p9Pp1DRVfTUrK2vbwoULve5hsERl6mhVxPnoo4/A1hzq6emhun3a29trMjIyPoCqDlTvxCgmu+cYMh0Hk+JyuTbQWQk/b926daqvr+8ib2/v+Q4ODs4qlapVKpVmCASCrJycnBuwG6Ojo+/F/VIe0alTp6Brxpyamlp76dKlVJlMdgFy1m5ubtNnzJix2M/P76/e3t5joHKOjrTvL3vA5GxWrVo1NjU1dWNjY2MZrQpMNTU1p+Pj44NRsDUAu5DZN+aSlpa2Fio2IJ9sNBpVQqEw+csvv4TCAeieZNqDe4ohkSp4FxaLBV17lL+//2P+/v7LPD09KW5GLpcXFhQU/IfP50M7LAG5XLqW815y9yQtBPhZkZKSch6qubVarXTEiBGjpk+fvnDBggXPBQUFQfvSrVTpfeEZMb2LmJiYpwQCwVGDwaCgK+ikeXl5/8IwbCxj7EAVVDF73myhXQnoba1WS9kDpVJ5LS0t7R0Ue9D3M6wFwGQ5cV9fXx+BQLAbGV263fVTaHdFHxiMngK0IXx8fEbGxcUtraqq+t5kMunAOwX6Oy0tDbppnPoTf1gVmKTZ5s2bPfh8/iZUO6pWq3uqqqqStm/fDg3fI5HLORhHHvW8wc/Q0XPy5MnVTU1NxZDuJAjCdO3aNV5cXNxCRmHxPWvqGIycMAKwktSDMRYtWmT/1FNPPTlnzpyX3d3dZxuNxt7W1tayqqqqH1tbW6F+p5cgCMpLAeEM9I3xeDyUCoX4QC4WiwvHjBkz2c7Ozs3Dw2PauHHjQgIDAzu2b9/e/tlnn13ncDhUftsacsp3jPz8fFvY1fBMhr17984vKys7ptVqu2l+/+q5c+f+gYpoh+JRB32oCs6aNWsCoLZUq9VqaKriKo/H28rlcicxAkLrJ+3QxFBUGRYW5nvhwoV/y2QyCa16WgsLCz//5JNPHkbjh8jQ3aKu6fd20M9QV1eXbjab9VDr+PPPP188deoUZOGc+oy1XjAXc86cOV6JiYlvdHZ2Uo18JEmSNTU1iZs2baIe9GEN9Tro5KE89LFjx1Z3dXUJac7O0tDQ8J8tW7b8DdKkyA5YQ33R7Ug26tXT09M9IyNjfXt7+zXEQDY0NOQeP378RUaVNMfK7hv4qYkFBQVQiVFDk4M3Kioq4qKioihPjU4K9fvEDvhRhydSwSuO4w6jRo0a4+joCElxSXd3d15xcfGJPXv2lHA4HHD5cB6Ph1kBqHohHo9HxQhqtbotLS0tXSwW/6TVajvt7e09pkyZsjQ4OPhZaEQHpwIKyforhIH0gqiFh2plgNFo7CktLc2ELhn6952ZmZmSmpqaLnhPF0pZTcdieHi4hY7AiYKCgkp/f39XFxcXX19f32ccHR29fHx8Xg4PD+/u6Ojg5+bmKhmxgVV6Rih4+ZWutLmp961ShzL7CXbu3EnVFzU3N1+inQc9XY86H+zBvaDKBxyMvrDfrWSwMiDPiHp9/PHHvS9duhTZ3d3dRldkt+Tl5e3dtWvXHPQBK7Fjvw9Uqk4bLxwbBmDQIfi2bdseg140giAo7kqhUDTl5OS8i2GYB228qRJLa50bc+fj2PAB6nmDex4ZGxsbKpVKM3t7e6n+g7a2tvzDhw+/Aswu+oC1CmDYgmSoTC6X65qUlPRGQ0PDRVQ0IJFIfoyNjQ1Cp3wgngbwQIPs0+TH5XKhI//9jo4OqkOHDiq/y8zMXPDkk0/eKhamP45bAxk3rIHT/QTR0dHAnEKasikkJCTnoYce8rG3t3/WwcFhjIODA9Aps1QqVRWGYfo7UbOsAO4SUGUXExND+fnx8fHXCIJIkMvlxdD9qVAoTM3NzdccHBwQW4riGquLC4Y9Un6ZKAJyztPV1XU85BPop/CyGAIMN+/u/vCMGAVcLIYAlBAYz8dgTwALFixYsGDBggULFixYsGDBggULFpgV4v8B6QS9Wxk/bRYAAAAASUVORK5CYII=) center/contain no-repeat;mask:url(data:image/png;base64,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) center/contain no-repeat}
.draft-pill{display:inline-block;vertical-align:middle;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#E8C68A;background:rgba(192,136,58,.16);border:1px solid rgba(192,136,58,.5);padding:2px 8px;border-radius:999px;white-space:nowrap;line-height:1.4}
.draft-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#C0883A;box-shadow:0 0 0 2px rgba(192,136,58,.22);margin-left:6px;flex:0 0 auto}
.is-draft{border-left:3px solid rgba(192,136,58,.6)!important}
.draft-banner{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 14px;padding:10px 14px;border:1px solid rgba(192,136,58,.4);background:rgba(192,136,58,.08);border-radius:var(--radius-md)}
.draft-banner-msg{flex:1 1 240px;min-width:0;font-size:13px;line-height:1.5;color:var(--text-soft)}
.btn.ok{border-color:rgba(70,185,138,.55);color:#A9E2C4}
.btn.ok:hover{background:rgba(70,185,138,.12);border-color:rgba(70,185,138,.8)}
.item-intent{margin-top:6px;font-size:var(--fs-meta);line-height:1.5;color:var(--muted);max-width:70ch}
.item-intent-tag{display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--muted2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:middle}
.wf-draft-banner{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2)}
.wf-draft-banner.is-draft{border-color:rgba(192,136,58,.4);background:rgba(192,136,58,.07)}
.wf-intent{flex:1 1 240px;min-width:0;font-size:13px;line-height:1.5;color:var(--text-soft)}
.wf-intent b{color:#fff;font-weight:600}

/* The drafting modal */
.ai-draft-modal{width:min(880px,100%)}
.ai-draft-qs{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.ai-draft-q label{display:block;font-size:14px;font-weight:var(--fw-control);color:var(--text-soft);line-height:1.4;margin-bottom:4px}
.ai-draft-hint{font-size:12px;line-height:1.5;color:var(--muted2);margin-bottom:6px}
.ai-draft-q textarea{resize:vertical}
.ai-draft-advisories{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid rgba(120,150,210,.6);border-radius:var(--radius-md);background:rgba(255,255,255,.03)}
.ai-draft-adv-h{font-size:13px;font-weight:var(--fw-control);color:var(--text-soft);margin-bottom:6px}
.ai-draft-advisories ul{margin:0;padding-left:20px}
.ai-draft-advisories li{font-size:13px;line-height:1.55;color:var(--muted);margin:3px 0}
.ai-draft-roles{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid rgba(120,150,210,.6);border-radius:var(--radius-md);background:rgba(255,255,255,.03)}
.ai-draft-role-cards{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ai-draft-role-card{display:inline-flex;align-items:center;gap:8px;padding:5px 8px 5px 6px;border:1px solid var(--line);border-radius:999px;background:var(--paper2);font-size:13px;color:var(--text-soft)}
.ai-draft-role-hint{font-size:12px;line-height:1.5;color:var(--muted);margin-top:9px}
.ai-draft-tree{display:flex;flex-direction:column;gap:14px;margin:4px 0 12px}
.ai-draft-sec{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2);padding:12px}
.ai-draft-sec-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-draft-sec-tag{font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--muted2);border:1px solid var(--line);border-radius:4px;padding:2px 6px;white-space:nowrap}
.ai-draft-title{flex:1 1 200px;min-width:0;font-weight:var(--fw-control)}
.ai-draft-wfs{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-left:12px;border-left:1px dashed var(--line2)}
.ai-draft-wf{display:flex;flex-direction:column;gap:6px}
.ai-draft-wf-head{display:flex;align-items:center;gap:8px}
.ai-draft-wtitle{flex:1 1 auto;min-width:0}
.ai-draft-wf-head .btn.small.danger{flex:0 0 auto;width:38px;padding:0}
.ai-draft-intent{resize:vertical;font-size:13px}
.ai-draft-wfs > .btn.small{align-self:flex-start}
@media (max-width:560px){
  .ai-draft-sec-head{align-items:stretch}
  .ai-draft-title,.ai-draft-wtitle{flex-basis:100%}
}

/* Workflow-from-intent: step preview + banner actions */
.wf-banner-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.ai-draft-steps{display:flex;flex-direction:column;gap:12px;margin:4px 0 12px}
.ai-draft-step{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2);padding:10px 12px}
.ai-draft-step-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ai-draft-step-n{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-muted);border:1px solid var(--line2);font-size:12px;font-weight:700;color:var(--text-soft)}
.ai-draft-step-type{flex:0 1 150px;min-width:0}
.ai-draft-step-role{flex:1 1 160px;min-width:0}
.ai-draft-step-moves{display:flex;gap:6px;margin-left:auto;flex:0 0 auto}
.ai-draft-step-moves .btn.small{width:34px;padding:0}
.ai-draft-step-desc{resize:vertical;font-size:13px}
.ai-draft-step-notes{margin-top:8px;padding:8px 10px;border-radius:var(--radius-sm);background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.55;white-space:pre-line}
/* Item B — drafted decision sub-paths, previewed read-only under their step */
.ai-draft-branches{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.ai-draft-branch{border-left:2px solid var(--accent-strong);padding:6px 10px;background:rgba(255,255,255,.025);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.ai-draft-branch-h{font-size:11px;font-weight:700;color:var(--text-soft);margin-bottom:5px}
.ai-draft-branch-step{display:flex;flex-direction:column;gap:1px;padding:4px 0;font-size:12px;line-height:1.5;border-top:1px solid var(--line)}
.ai-draft-branch-step:first-of-type{border-top:none}
.ai-draft-bs-meta{font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);opacity:.8}
.ai-draft-bs-desc{color:var(--text-soft)}
@media (max-width:560px){
  .ai-draft-step-type,.ai-draft-step-role{flex-basis:100%}
  .ai-draft-step-moves{margin-left:0}
  .wf-banner-actions{margin-left:0;width:100%}
}
/* Draft step rows: a subtle amber spine on the first cell (stacked-card view too) */
.step-row.is-draft-step td:first-child{box-shadow:inset 3px 0 0 rgba(192,136,58,.65)}
@media (max-width:720px){.step-row.is-draft-step{box-shadow:inset 3px 0 0 rgba(192,136,58,.55)}}

/* ============================================================================
 * AI WORKFLOW ANALYSIS (Beta 1.6) — the workflow-review modal (tabs + findings).
 * Reuses the .ai-issue / .ai-sev / .ai-weight / .ai-prov-line vocabulary from the
 * Check panel; only the modal shell, the tab strip, the lens chip, and the output
 * panes (summary / responsibilities / explain / checklist / suggested order) are new.
 * ========================================================================== */
.ai-analyze-modal{width:min(880px,100%)}
.ai-az-subtitle{font-size:14px;color:var(--text-soft);margin:-4px 0 0;font-weight:var(--fw-control)}
.ai-scope-static{font-size:13px;padding:6px 13px;border-radius:999px;border:1px solid var(--accent-strong,var(--accent));background:var(--accent-strong,var(--accent));color:#fff;white-space:nowrap}
.ai-lens{font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--text-soft);background:rgba(120,150,210,.16);border:1px solid rgba(120,150,210,.4);padding:3px 9px;border-radius:999px}
.ai-az-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px;border-bottom:1px solid var(--line2);padding-bottom:10px}
.ai-az-tab{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-soft);cursor:pointer;white-space:nowrap}
.ai-az-tab:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.04)}
.ai-az-tab.sel{background:var(--accent-strong,var(--accent));border-color:var(--accent-strong,var(--accent));color:#fff}
.ai-az-count{display:inline-block;min-width:16px;text-align:center;font-size:11px;font-weight:700;padding:0 5px;margin-left:4px;border-radius:999px;background:rgba(0,0,0,.22)}
.ai-az-body{max-height:min(56vh,560px);overflow:auto;padding-right:4px}
.ai-az-prose{font-size:14px;line-height:1.6;color:var(--text-soft);max-width:72ch}
.ai-az-pre{white-space:pre-line}
.ai-az-roles{display:flex;flex-direction:column;gap:10px}
.ai-az-role{border:1px solid var(--line2);border-radius:var(--radius-md);padding:10px 12px;background:rgba(255,255,255,.03)}
.ai-az-role-h{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.role-chip-mini{display:inline-flex;align-items:center;justify-content:center;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--accent-muted);font-size:12px;font-weight:700;color:var(--text-soft);white-space:nowrap}
.ai-az-role-name{font-size:13px;color:var(--muted)}
.ai-az-role-body{font-size:13.5px;line-height:1.55;color:var(--muted)}
.ai-az-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.ai-az-hint{font-size:12px;line-height:1.5}
.ai-az-checklist{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ai-az-checklist li{position:relative;padding:8px 12px 8px 34px;border:1px solid var(--line2);border-radius:var(--radius-sm);background:rgba(255,255,255,.03);font-size:14px;line-height:1.5;color:var(--text-soft)}
.ai-az-checklist li::before{content:"";position:absolute;left:12px;top:10px;width:14px;height:14px;border:1.5px solid var(--muted2);border-radius:3px}
.ai-az-order-note{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 10px}
.ai-az-order-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.ai-az-order-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-soft)}
.ai-az-order-lbl{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ai-az-order-list .btn.small{flex:0 0 auto}
@media (max-width:560px){
  .ai-az-body{max-height:none}
  .ai-az-order-list li{flex-wrap:wrap}
}

/* Handover documents (Beta 1.9): the generated Markdown doc, reusing the chat bubble's
   typography but full-width + scrollable inside the modal. */
.hv-hint{font-size:13px;line-height:1.55;margin:8px 0}
.hv-modal .hv-doc{max-width:none;align-self:stretch;width:100%;margin-top:6px;max-height:min(52vh,520px);overflow:auto;font-size:14px;line-height:1.6}
.hv-modal .hv-doc strong{color:var(--text-strong,#fff)}
@media (max-width:560px){ .hv-modal .hv-doc{max-height:none} }

/* ============================================================================
 * AI SOURCE CONTEXT (Beta 1.7) — source-material modal + source citations.
 * Reuses the .ai-weight / .ai-privacy / .form-grid / .modal vocabulary.
 * ========================================================================== */
.ai-source-modal textarea[name="srcText"]{width:100%;font:inherit;line-height:1.5;resize:vertical}
.ai-source-meta{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:12px}
/* Item D — source library: item list, context chip, add/edit form */
.src-context-chip{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 12px;padding:8px 12px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--line2);font-size:12px;color:var(--text-soft)}
.src-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.src-chip-dot.on{background:var(--accent-strong)}
.src-list{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.src-empty{padding:10px 0}
.src-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2)}
.src-item.off{opacity:.58}
.src-item-tog{flex:0 0 auto;display:inline-flex;cursor:pointer}
.src-item-tog input{width:16px;height:16px;cursor:pointer}
.src-item-body{flex:1 1 auto;min-width:0}
.src-item-label{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-item-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-strong);border:1px solid var(--line2);border-radius:var(--radius-full,999px);padding:1px 6px;margin-left:4px}
.src-item-meta{font-size:11px;color:var(--muted);margin-top:2px}
.src-item-acts{flex:0 0 auto;display:flex;gap:6px}
.src-add{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.src-add-h{font-size:13px;margin:0 0 10px;color:var(--text-soft)}
.src-add-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
/* the Axi-panel "what's in context" chip */
.axi-src-row{padding:0 14px 8px}
.axi-src-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--radius-full,999px);border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--text-soft);font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.axi-src-chip:hover{border-color:var(--accent-strong);color:#fff}
/* Items J+K — chat activity-log line + the activity-log viewer */
.chat-log-line{display:flex;align-items:center;gap:6px;align-self:center;margin:2px 14px;padding:3px 10px;border-radius:var(--radius-full,999px);background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600;max-width:90%}
.chat-log-line .ai-glyph{width:12px;height:12px;flex:0 0 auto}
.ai-log-list{display:flex;flex-direction:column;gap:6px;max-height:min(56vh,520px);overflow:auto;margin:4px 0}
.ai-log-item{padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2)}
.ai-log-feat{font-size:13px;font-weight:600;color:var(--text)}
.ai-log-scope{font-weight:400;color:var(--muted)}
.ai-log-meta{font-size:11px;color:var(--muted);margin-top:2px}
/* Item I — versions & diff */
.ver-save-row{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.ver-save-row input{flex:1 1 220px;min-width:0}
.ver-save-row .btn{flex:0 0 auto}
.ver-list{display:flex;flex-direction:column;gap:6px;max-height:min(34vh,300px);overflow:auto;margin:0 0 12px}
.ver-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2)}
.ver-item.sel{border-color:var(--accent-strong);background:rgba(94,139,208,.12)}
.ver-item-body{flex:1 1 auto;min-width:0}
.ver-item-label{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver-item-meta{font-size:11px;color:var(--muted);margin-top:2px}
.ver-item-acts{flex:0 0 auto;display:flex;gap:6px}
.ver-diff{border-top:1px solid var(--line);padding-top:12px}
.ver-diff-h{font-size:14px;margin:0 0 10px}
.vd-group{margin:0 0 12px}
.vd-group h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 6px}
.vd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.vd-list li{font-size:12.5px;line-height:1.45;color:var(--text-soft);display:flex;gap:7px}
.vd-mark{flex:0 0 auto;font-weight:700;width:12px}
.vd-add .vd-mark{color:#46b98a}.vd-rem .vd-mark{color:#e26d6d}.vd-chg .vd-mark{color:#d9a441}
.ver-diff-legend{display:flex;gap:14px;font-size:11px;margin-top:8px;color:var(--muted)}
.ver-diff-legend .vd-add{color:#46b98a}.ver-diff-legend .vd-rem{color:#e26d6d}.ver-diff-legend .vd-chg{color:#d9a441}
/* Item G — guided walkthrough */
.tut-steps{display:flex;flex-direction:column;gap:10px;margin:4px 0 8px}
.tut-step{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2)}
.tut-step.done{border-color:color-mix(in srgb,#46b98a 50%,var(--line))}
.tut-step-num{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-muted);border:1px solid var(--line2);font-size:13px;font-weight:700;color:var(--text-soft)}
.tut-step.done .tut-step-num{background:#46b98a;color:#0b1f17;border-color:#46b98a}
.tut-step-body{flex:1 1 auto;min-width:0}
.tut-step-title{font-size:14px;font-weight:600;color:var(--text)}
.tut-step-text{font-size:12.5px;color:var(--muted);line-height:1.5;margin:3px 0 8px}
.tut-dismiss{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-soft);margin-right:auto;cursor:pointer}
@media(max-width:560px){.src-item{flex-wrap:wrap}.src-item-acts{margin-left:auto}}
.ai-source-styleref{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text-soft);cursor:pointer;line-height:1.45}
.ai-source-styleref input{margin-top:2px;flex:0 0 auto}
.ai-src-cite{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.ai-src-cite-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ai-src-chip{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(80,170,120,.4);background:rgba(60,150,100,.12);color:#9FD8B6;cursor:help}
.ai-inferred{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(197,179,88,.45);background:rgba(150,120,40,.14);color:#E8D3A8}
.ai-src-badge{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
@media (max-width:560px){
  .ai-source-meta{flex-wrap:wrap;gap:6px}
}
.ai-extract-modal .ai-ex-body{max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:18px;margin:4px 0 8px}
.ai-ex-cat h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.ai-ex-n{font-size:11px;color:var(--text-soft);background:var(--surface-2,rgba(255,255,255,.06));border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.ai-ex-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ai-ex-list li{border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;background:var(--surface-2,rgba(255,255,255,.02))}
.ai-ex-item{font-size:13.5px;color:var(--text-soft);line-height:1.45;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ai-ex-item .btn.small{margin-left:auto}
@media (max-width:560px){.ai-extract-modal .ai-ex-body{max-height:none}.ai-ex-item .btn.small{margin-left:0}}
.ai-source-using{font-size:13px;line-height:1.5;color:var(--text-soft);border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;background:var(--surface-2,rgba(255,255,255,.03))}
.ai-draft-step .ai-src-cite{margin-top:8px}

/* ==========================================================================
   Beta 1.9 — SOP Assistant Chat ("Process Pilot")
   Floating launcher (fab) opens a right-side panel: a fixed overlay on desktop
   (no reflow of the page), a full-height drawer + backdrop on tablet/phone.
   Sits above the sidebar (120) but below modals (200) so the insert-as-draft
   modal layers on top. Chat history/keys never touch state.data → never export.
   ========================================================================== */
.chat-fab{position:fixed;top:25px;right:32px;z-index:60;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:var(--radius-sm);border:1px solid var(--accent-strong);
  background:var(--accent);color:#fff;cursor:pointer;transition:transform .12s ease,background .14s ease,border-color .14s ease}
.chat-fab:hover{background:var(--accent-strong);border-color:var(--accent-strong);transform:translateY(-1px)}
.chat-fab .ai-glyph{width:20px;height:20px}
.chat-fab.is-open{display:none}
.chat-fab-lbl{display:none}
.chat-backdrop{display:none}
/* desktop: the chat launcher lives in the sidebar brand (next to the ☰), so hide the floating fab */
@media(min-width:1101px){.chat-fab{display:none}}
/* the two brand toggles (☰ Menu + AI Assistant) share one row above the logo and keep the
   SAME row orientation in every state — labelled pills when the TOC is open, icon-only squares
   when the rail is collapsed. (Base size/border/colour come from the canonical .toc-toggle rule,
   which now also covers .chat-toggle, so the two are identical.) */
.brand-toggles{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;margin:0 0 12px}
.brand-toggles .toc-toggle,.brand-toggles .chat-toggle{width:auto!important;height:34px!important;min-width:34px!important;padding:0 12px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.brand-toggles .tog-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 auto;font-size:15px;line-height:1}
.brand-toggles .tog-ico .ai-glyph{width:18px;height:18px}
.brand-toggles .tog-lbl{font-size:12px;font-weight:600;white-space:nowrap;letter-spacing:.01em;color:#fff}
/* a toggle reads as active while its panel is open — equal treatment for both */
.app-shell:not(.toc-collapsed) .brand-toggles .toc-toggle,
.app-shell.chat-open .brand-toggles .chat-toggle{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.30)!important}
/* collapsed rail: icon-only squares, STILL side by side (same orientation as open) */
.app-shell.toc-collapsed .brand-toggles{gap:6px}
.app-shell.toc-collapsed .brand-toggles .tog-lbl{display:none}
.app-shell.toc-collapsed .brand-toggles .toc-toggle,.app-shell.toc-collapsed .brand-toggles .chat-toggle{width:34px!important;padding:0!important}

.chat-panel{position:fixed;top:var(--bar-h);left:var(--toc-open);right:auto;bottom:0;z-index:160;width:var(--chat-open,380px);max-width:100vw;
  display:flex;flex-direction:column;background:var(--bg);color:var(--text);border-right:1px solid var(--line);
  clip-path:inset(0 0 0 0);transition:clip-path .3s cubic-bezier(.4,0,.2,1),left .26s cubic-bezier(.4,0,.2,1)}
/* reveal in/out: .chat-enter clips the panel to zero width at its LEFT (TOC) edge; removing it
   (open) or adding it (close) animates the clip so the panel wipes in/out from the TOC's right
   edge into the gap the centre vacates — it never draws over the Contents. If the transition
   never runs, the panel simply rests fully revealed — no stuck state. */
.chat-panel.chat-enter{clip-path:inset(0 100% 0 0)}
body.chat-resizing .chat-panel{transition:none}
/* drag-resize handle on the inner (right) edge — mirror of .toc-resizer */
.chat-resizer{position:absolute;top:0;bottom:0;right:-4px;width:9px;z-index:5;cursor:col-resize;background:transparent;touch-action:none}
.chat-resizer::after{content:"";position:absolute;top:0;bottom:0;right:4px;width:2px;background:transparent;transition:background .12s}
.chat-resizer:hover::after,body.chat-resizing .chat-resizer::after{background:var(--secondary,#5b8def)}

.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px 8px}
.chat-head-title{display:flex;align-items:center;gap:10px;min-width:0}
.chat-head-title .ai-glyph{width:22px;height:22px;color:var(--text-strong);flex:0 0 auto}
.chat-head-name{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.chat-head-name b{font-size:15px;color:var(--text-strong)}
.chat-sub{font-size:11.5px;color:var(--muted)}
.chat-head-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.chat-close{font-size:18px;line-height:1;padding:4px 9px}

.chat-ctx{display:flex;align-items:center;gap:8px;padding:10px 14px 4px;flex-wrap:wrap}
.chat-ctx-lbl{font-size:12px;color:var(--text-soft);font-weight:600}
.chat-ctx select{flex:1 1 140px;min-width:0;padding:6px 8px;border-radius:var(--radius-sm,6px);
  border:1px solid var(--line);background:var(--paper2,#1a1a1a);color:var(--text);font:inherit;font-size:13px}
.chat-ctx-note{padding:2px 14px 8px;font-size:11.5px;color:var(--muted)}
.chat-ctx-note b{color:var(--text-soft)}
.chat-nokey{color:var(--error,#CC6B6B)}
.chat-warn{margin:0 14px 8px;padding:8px 10px;border-radius:var(--radius-md);font-size:12.5px;line-height:1.45;
  background:rgba(204,107,107,.12);border:1px solid rgba(204,107,107,.5);color:#f0c9c9}

.chat-log{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:8px 14px 4px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent}
/* Match the gray thumb used by the TOC (sidebar-body) + main panes so all scrollbars read consistently. */
.chat-log::-webkit-scrollbar{width:10px}
.chat-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px;border:3px solid transparent;background-clip:content-box}
.chat-log:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.30);background-clip:content-box}
.chat-msg{max-width:92%;padding:9px 12px;border-radius:var(--radius-md);font-size:13.5px;line-height:1.5;
  word-wrap:break-word;overflow-wrap:anywhere}
.chat-msg.me{align-self:flex-end;background:var(--accent-muted);color:#fff}
.chat-msg.ai{align-self:flex-start;background:var(--paper2,#1a1a1a);color:var(--text-soft)}
.chat-msg.ai.err{background:rgba(204,107,107,.1);border-color:rgba(204,107,107,.5);color:#f0c9c9}
.chat-msg.busy{display:flex;align-items:center;gap:8px;color:var(--muted)}
.chat-msg p{margin:0 0 7px}.chat-msg p:last-child{margin-bottom:0}
.chat-msg ul,.chat-msg ol{margin:4px 0 7px;padding-left:20px}
.chat-msg li{margin:2px 0}
.chat-msg code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;font-size:12.5px}
.chat-msg strong{color:var(--text-strong)}
.chat-msg-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

.chat-empty{padding:18px 8px;text-align:center;color:var(--muted)}
.chat-empty-glyph{display:inline-flex;width:34px;height:34px;color:var(--accent-strong);margin-bottom:8px}
.chat-empty-glyph .ai-glyph{width:34px;height:34px}
.chat-empty-h{margin:0 0 6px;font-size:14.5px;color:var(--text-soft)}
.chat-empty-sub{margin:0;font-size:12.5px;line-height:1.5}

.chat-starters{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px 4px}
.chat-starter{padding:6px 10px;border-radius:var(--radius-full,999px);border:1px solid transparent;
  background:rgba(255,255,255,.025);color:var(--text-soft);font:inherit;font-size:12px;cursor:pointer;transition:border-color .14s,background .14s,color .14s}
.chat-starter:hover{border-color:var(--line2);background:rgba(255,255,255,.06);color:#fff}

/* persistent chat actions (structured, review-only) — e.g. "Suggest roles" */
.chat-actions{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 6px}
.chat-action{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-full,999px);border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--text-soft);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .14s,background .14s,color .14s}
.chat-action:hover{border-color:var(--accent-strong);background:rgba(255,255,255,.07);color:#fff}
.chat-action .ai-glyph{width:14px;height:14px}
/* Item A — the Axi command center: context-aware AI actions grouped by intent */
.axi-cmds{display:flex;flex-direction:column;gap:9px;padding:8px 14px 10px;border-bottom:1px solid var(--line2)}
.axi-cmd-group{display:flex;flex-direction:column;gap:5px}
.axi-cmd-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);opacity:.6}
.axi-cmd-row{display:flex;flex-wrap:wrap;gap:6px}
.axi-cmd-more{align-self:flex-start;margin-top:1px;padding:2px 2px;background:none;border:none;color:var(--accent-strong);font:inherit;font-size:11px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.axi-cmd-more:hover{color:#fff}
/* context gating — what Axi is allowed to change */
.chat-allow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:2px 14px 0}
.chat-allow-lbl{font-size:11.5px;color:var(--muted)}
.chat-allow-chip{padding:3px 9px;border-radius:var(--radius-full,999px);border:1px solid var(--line2);background:transparent;color:var(--text-soft);font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:border-color .14s,background .14s,color .14s}
.chat-allow-chip.on{border-color:rgba(70,185,138,.5);color:var(--ok,#46B98A)}
.chat-allow-chip.off{color:var(--muted);opacity:.85}
.chat-allow-chip:hover{background:rgba(255,255,255,.05)}
/* proposed-role cards inside an assistant message */
.chat-roles{display:flex;flex-direction:column;gap:8px;margin-top:10px}
/* Item O — seed-roles review cards + Legend panel action row */
.legend-panel-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.legend-core-tag{display:inline-flex;align-items:center;padding:3px 8px;border-radius:var(--radius-full,999px);border:1px solid var(--line2);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.seed-role-cards{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.seed-role-card{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper2);padding:9px 12px}
.seed-role-head{display:flex;align-items:center;gap:8px}
.seed-role-name{font-size:13px;font-weight:600;color:var(--text)}
.seed-role-reason{font-size:12px;color:var(--muted);margin:4px 0 6px;line-height:1.5}
.seed-role-act{display:flex;justify-content:flex-end}
.chat-role-card{border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.03);padding:8px 10px}
.chat-role-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chat-role-code{font-weight:700;font-size:12px;letter-spacing:.03em;color:#fff;background:var(--accent-muted,#2F3E56);border-radius:6px;padding:2px 7px}
.chat-role-name{font-size:13px;color:var(--text-soft)}
.chat-role-reason{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
.chat-role-act{margin-top:8px}
.chat-role-added{font-size:12px;color:var(--ok,#46B98A);font-weight:600}

/* source-material file picker */
.ai-source-files{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.ai-source-filehint{font-size:11.5px}
.ai-source-filestatus{font-size:12px;color:var(--text-soft)}

.chat-input{padding:8px 14px 14px;display:flex;flex-direction:column;gap:6px;position:relative}
/* Item A — Claude/Codex-style composer: rounded field with a + on the left and an arrow/stop on the right */
/* Minimal composer: no box/outline/background — you just type from the middle. */
.composer{display:flex;align-items:flex-end;gap:6px;border:none;border-radius:0;background:transparent;padding:2px 2px 2px 4px}
.composer textarea{flex:1 1 auto;min-width:0;resize:none;min-height:46px;max-height:180px;padding:11px 6px;border:none;background:transparent;color:var(--text);font:inherit;font-size:15px;line-height:1.5;overflow-y:auto}
.composer textarea:focus{outline:none}
.composer-plus,.composer-send{flex:0 0 auto;width:38px;height:38px;margin-bottom:4px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--text-soft);cursor:pointer;line-height:1;padding:0;transition:background .14s,border-color .14s,color .14s}
.composer-plus svg,.composer-send svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block}
/* Minimal composer: the + is borderless and faded, brightening on hover/focus (Claude/Codex style). */
.composer-plus{font-weight:400;border-color:transparent;background:transparent;color:var(--muted);opacity:.55}
.composer:hover .composer-plus,.composer:focus-within .composer-plus{opacity:1}
.composer-plus:hover,.composer-plus.on{border-color:transparent;background:rgba(255,255,255,.08);color:var(--text);opacity:1}
/* Send arrow: no circle; faded by default, brightens on hover/focus (and when there's text). */
/* No circle by default — just the arrow. A subtle circle appears on hover (like the +),
   and it turns blue when pressed. */
.composer-send{border-color:transparent;background:transparent;color:var(--muted);opacity:.6}
.composer:hover .composer-send,.composer:focus-within .composer-send,.composer.has-text .composer-send{opacity:1;color:var(--text-soft)}
.composer-send:hover{opacity:1;background:rgba(255,255,255,.08);color:var(--text)}
.composer-send:active{background:var(--accent-strong);color:#fff}
.composer-send svg{width:21px;height:21px}
.composer-send.is-stop{background:transparent;border-color:transparent;color:var(--text);opacity:1}
.composer-send.is-stop svg rect{fill:currentColor;stroke:none}
.composer-meta{display:flex;justify-content:flex-end;padding:0 6px}
.chat-prov{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the "+" tools popover */
.composer-tools-bd{position:fixed;inset:0;z-index:40;background:transparent;border:0;padding:0;margin:0;cursor:default;display:block;width:100%}
/* Tools popover: as tall as it needs to be; only scrolls when the chat window is short. */
.composer-tools{position:absolute;left:14px;right:14px;bottom:100%;margin-bottom:8px;z-index:50;max-height:min(82vh,760px);overflow:auto;background:var(--paper2,#1a1a1a);border:1px solid var(--line2);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.5);padding:10px 4px 6px}
.composer-tools .axi-cmds{padding-top:0}
.ct-title{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 14px 6px}
.ct-sep{height:1px;background:var(--line);margin:6px 14px}
.ct-attach-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:2px 14px 8px}
.ct-attach .ai-glyph{width:13px;height:13px}
.ct-link{background:none;border:none;color:var(--accent-strong);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:2px}
.ct-link:hover{color:#fff}
.composer-tools .chat-allow{padding:6px 14px 4px}
/* streaming reply */
.chat-streaming .chat-stream{white-space:pre-wrap}
.chat-cursor{display:inline-block;width:7px;height:14px;margin-left:2px;background:var(--accent-strong);vertical-align:text-bottom;animation:axiBlink 1s steps(2,start) infinite}
@keyframes axiBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* tablet / phone: full-height drawer + dimmed backdrop, click-outside to close */
@media (max-width:1100px){
  .chat-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:150}
  /* Same as the TOC drawer: sit BELOW the toolbar so the chat's own header (Axi · context ·
     close) isn't hidden behind it. Base already sets top:var(--bar-h)+bottom:0; just don't
     override it back to 0 here. */
  .chat-panel,.app-shell.toc-collapsed .chat-panel{width:min(420px,100vw);left:0!important;right:auto;top:var(--bar-h,60px)}
  .chat-resizer{display:none}
  /* the full-width fixed app-bar is desktop-only; on tablet/phone the toolbar is in normal flow
     (sticky to the top) so it doesn't permanently occupy a tall slice of the small screen. */
  .toolbar{position:sticky;top:0;padding:8px 16px}
}
@media (max-width:480px){
  .chat-fab{top:8px;right:12px;width:40px;height:40px;padding:0}
  .chat-panel{width:100vw;box-shadow:none}
  .chat-msg{max-width:96%}
}

/* ==========================================================================
   Workflow table — floating column header (desktop ≥1101)
   The column-header row (Step / Role / Step Type / Description / Icons /
   Following Step) pins just under the already-pinned toolbar, so the columns
   stay labelled while the steps scroll beneath it. At ≥1101 the table is
   table-layout:fixed/width:100% and fits, so the wrap no longer needs to be a
   horizontal-scroll container (overflow:auto would otherwise break the sticky).
   The repeated sub-path headers are removed in JS, so only this one header shows.
   ========================================================================== */
@media(min-width:1101px){
  .wf-view .table-wrap{overflow:visible}
  .wf-view .table-wrap>table>thead>tr>th{
    position:sticky;top:0;z-index:6;
    background:var(--paper);
    padding-top:14px;padding-bottom:12px;
    border-bottom:1px solid var(--line);
    box-shadow:0 7px 11px -9px rgba(0,0,0,.55);
  }
  /* a little breathing room below the floating header line before the first row */
  .wf-view .table-wrap>table>tbody>tr:first-child>td{padding-top:14px}
  /* the wrap has overflow:visible (so the header can pin), so the square header/table
     backgrounds would paint over the wrap's rounded corners — round the content to match.
     The TABLE element itself must round all four corners: its top corners sit behind the
     sticky thead, and if left square its #121212 fill paints a square nub in the corner
     triangle that the thead's rounding leaves open (defeating the rounded look). */
  .wf-view .table-wrap>table>thead>tr>th:first-child{border-top-left-radius:var(--radius-md)}
  .wf-view .table-wrap>table>thead>tr>th:last-child{border-top-right-radius:var(--radius-md)}
  .wf-view .table-wrap>table{border-radius:var(--radius-md)}
}

/* ==========================================================================
   Independent scroll panes (desktop ≥1101)
   The TOC sidebar becomes a fixed-height pane that scrolls its OWN content, so a
   long table of contents stays reachable within the viewport instead of running
   off-screen (it was height:auto + sticky, so its tail was unreachable). The main
   area scrolls via the page (toolbar + table header pinned), and the chat log
   scrolls itself — so each region scrolls independently and a scrollbar only
   appears when that region actually overflows. The sidebar's border-right is the
   separation line, matching the chat panel's border-left.
   ========================================================================== */
@media(min-width:1101px){
  /* The sidebar is a fixed-height flex column; only the BODY scrolls, so the brand
     (logo + sandwich) and footer keep their natural size (scrolling the whole sidebar
     made flex children shrink and clipped the logo). */
  .app-shell .sidebar{
    position:sticky!important;top:0!important;align-self:start!important;
    height:100%!important;max-height:100%!important;min-height:0!important;
    overflow:hidden!important;display:flex!important;flex-direction:column!important;
  }
  .app-shell .sidebar > .brand,
  .app-shell .sidebar > .sidebar-footer{flex:0 0 auto}
  .app-shell .sidebar > .sidebar-body{
    flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent;
    /* Cancel the sidebar's 14px right padding for the body only, then re-add it as the body's own
       inner padding — so the scrollbar sits flush against the border-right (the blue separator),
       exactly like the chat-log's does, while the TOC content keeps its inset. The explicit width
       is needed because flex cross-axis stretch otherwise ignores the negative margin. */
    width:calc(100% + 14px)!important;max-width:none!important;margin-right:-14px!important;padding-right:14px!important;
  }
  .app-shell .sidebar > .sidebar-body::-webkit-scrollbar{width:10px}
  .app-shell .sidebar > .sidebar-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px;border:3px solid transparent;background-clip:content-box}
  .app-shell .sidebar > .sidebar-body:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.30);background-clip:content-box}
  .app-shell.toc-collapsed .sidebar > .sidebar-body{overflow:hidden}

  /* MAIN is its own scroll pane: the page itself doesn't scroll, so the main
     scrollbar sits at the main column's right edge (between content and the chat),
     not at the viewport's far right where the chat's own scroll lives. The toolbar
     + floating table header pin within this pane; the chat log scrolls itself. */
  html,body{height:100%;overflow:hidden}
  /* Override the base min-height:100vh — it wins over this height:calc and forces the shell to
     full 100vh while sitting at margin-top:bar-h, so its bottom (and the main scroll pane's)
     fell bar-h px BELOW the viewport: the last step + page bottom were unreachable. */
  .app-shell{height:calc(100vh - var(--bar-h))!important;height:calc(100dvh - var(--bar-h))!important;min-height:calc(100vh - var(--bar-h))!important;min-height:calc(100dvh - var(--bar-h))!important;margin-top:var(--bar-h)!important;overflow:hidden!important}
  .main{height:100%!important;overflow-y:auto!important;overscroll-behavior:contain}
  .main::-webkit-scrollbar{width:10px}
  .main::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px;border:3px solid transparent;background-clip:content-box}
  .main:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.30);background-clip:content-box}
}
/* print must not inherit the fixed-height / hidden-overflow pane model */
@media print{
  html,body{height:auto!important;overflow:visible!important}
  .app-shell{height:auto!important;overflow:visible!important}
  .main{height:auto!important;overflow:visible!important}
}

/* ==========================================================================
   Workflow table — stack into cards when the COLUMN is too narrow (not just the
   window). Uses a container query on .table-wrap, so the table also stacks when
   the main column is squeezed by an open TOC + chat on desktop — instead of the
   description collapsing to one letter per line and the row becoming huge.
   Mirrors the mobile card layout; !important beats the desktop fixed-layout
   column widths. Screen-only so print (which targets a fixed page width) is
   unaffected.
   ========================================================================== */
@media screen{
  .wf-view .table-wrap{container-type:inline-size}
  @container (max-width:600px){
    .wf-view .table-wrap thead{display:none!important}
    .wf-view .table-wrap table,
    .wf-view .table-wrap tbody,
    .wf-view .table-wrap tr,
    .wf-view .table-wrap td{display:block!important;width:auto!important;min-width:0!important}
    .wf-view .table-wrap .step-row{border-bottom:1px solid var(--line)}
    .wf-view .table-wrap td{border-bottom:0;padding:8px 12px}
  }
}