/* fb5-app.css — Flow Bot dashboard, fb5 design system.
 * Assembled: prelude + fb5.css (verbatim, minus Google @import) + app-extra
 * .s5 blocks + app layer (real-app chrome ported from medfi, fb5 tokens)
 * + fb5 view support (node map, flowchart, board, list). */
html,body{margin:0;height:100%;}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/HankenGrotesk.var.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;}


/* Flow Bot — Admin v5 · improved med-fi system
 * One cohesive direction (not variations). Calmer surfaces, more air,
 * lighter chrome, a clearer type scale, a sectioned edit panel.
 * Every screen roots at .s5 (one artboard). Light + dim via .s5.dark.
 */

.s5{
  --font:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  /* warm-neutral surfaces */
  --bg:#F2F1EE; --canvas:#FAF9F7; --grid:rgba(40,34,24,.045);
  --card:#FFFFFF; --card-2:#F7F6F3; --card-3:#F1EFEB;
  --ink:#1B1A17; --ink-2:#57534B; --ink-3:#8A857A;
  --line:#E7E4DE; --line-2:#D8D4CC;
  --brand:#FFC83A; --on-brand:#2A2100;
  --live:#157F47; --live-bg:rgba(21,127,71,.11); --live-bd:rgba(21,127,71,.34);
  --edit:#B26A06; --edit-bg:rgba(178,106,6,.12); --edit-bd:rgba(178,106,6,.40);
  --draft:#6A7180; --draft-bg:rgba(106,113,128,.12); --draft-bd:rgba(106,113,128,.34);
  --err:#C8362F; --err-bg:rgba(200,54,47,.10); --err-bd:rgba(200,54,47,.38);
  --sel:#2D62D6; --sel-bg:rgba(45,98,214,.10); --sel-bd:rgba(45,98,214,.42);
  --shadow-sm:0 1px 2px rgba(28,24,16,.05),0 1px 3px rgba(28,24,16,.06);
  --shadow-md:0 6px 18px rgba(28,24,16,.07),0 2px 6px rgba(28,24,16,.05);
  --shadow-lg:0 24px 60px rgba(28,24,16,.18),0 8px 18px rgba(28,24,16,.10);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  font-family:var(--font); color:var(--ink); background:var(--bg);
  height:100%; width:100%; overflow:hidden; position:relative; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; font-feature-settings:"ss01"; font-size:15px;
}
.s5.dark{
  --bg:#16161A; --canvas:#101013; --grid:rgba(255,255,255,.04);
  --card:#1E1E23; --card-2:#26262C; --card-3:#2D2D34;
  --ink:#ECEAE5; --ink-2:#A8A39A; --ink-3:#76726A;
  --line:#2C2C33; --line-2:#3A3A43;
  --live:#42CE7E; --live-bg:rgba(66,206,126,.14); --edit:#F0A53C; --edit-bg:rgba(240,165,60,.14);
  --draft:#9AA0AC; --draft-bg:rgba(154,160,172,.14); --err:#FF6A60; --err-bg:rgba(255,106,96,.14);
  --sel:#6F9BFF; --sel-bg:rgba(111,155,255,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 22px rgba(0,0,0,.5); --shadow-lg:0 28px 64px rgba(0,0,0,.62);
}
.s5 *{ box-sizing:border-box; }
.s5 svg{ display:block; }
.s5 .grow{ flex:1; }
.s5 .gridbg{ background-image:radial-gradient(var(--grid) 1.4px,transparent 1.4px); background-size:22px 22px; }

/* ============================== TOP BAR ============================== */
.s5 .top{ height:62px; flex:0 0 auto; display:flex; align-items:center; gap:18px; padding:0 22px; background:var(--card); border-bottom:1px solid var(--line); }
.s5 .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:-.02em; flex:0 0 auto; }
.s5 .logo{ width:30px; height:30px; border-radius:9px; background:var(--brand); display:grid; place-items:center; flex:0 0 auto; }
.s5 .logo svg{ width:17px; height:17px; }
.s5 .srv{ display:flex; align-items:center; gap:10px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md); padding:7px 12px; cursor:pointer; flex:0 0 auto; }
.s5 .srv.islive{ background:var(--err-bg); border-color:var(--err-bd); }
.s5 .sav{ width:26px; height:26px; border-radius:8px; background:linear-gradient(140deg,#46433c,#26241f); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; flex:0 0 auto; }
.s5 .srv .snm{ font-size:13.5px; font-weight:700; line-height:1.15; white-space:nowrap; }
.s5 .srv .smt{ font-size:11px; color:var(--ink-3); font-weight:500; white-space:nowrap; }
.s5 .srv .caret{ color:var(--ink-3); font-size:11px; margin-left:2px; }
.s5 .liveflag{ font-size:10px; font-weight:800; color:var(--err); letter-spacing:.05em; display:flex; align-items:center; gap:5px; }
.s5 nav{ display:flex; gap:3px; flex:0 0 auto; }
.s5 nav a{ font-size:14px; font-weight:600; color:var(--ink-3); padding:8px 13px; border-radius:9px; text-decoration:none; display:flex; align-items:center; gap:7px; cursor:pointer; }
.s5 nav a.on{ color:var(--ink); background:var(--card-2); }
.s5 nav .nbadge{ font-size:11px; font-weight:800; background:var(--err); color:#fff; border-radius:var(--r-pill); padding:0 6px; min-width:18px; height:18px; display:grid; place-items:center; }
.s5 .vseg{ display:flex; gap:2px; background:var(--card-2); border:1px solid var(--line); border-radius:11px; padding:3px; flex:0 0 auto; }
.s5 .vseg button{ border:0; background:transparent; font-family:var(--font); font-size:12.5px; font-weight:600; color:var(--ink-3); padding:7px 11px; border-radius:8px; display:flex; align-items:center; gap:7px; cursor:pointer; }
.s5 .vseg button.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.s5 .vseg svg{ width:15px; height:15px; }
.s5 .iconbtn{ width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; color:var(--ink-2); flex:0 0 auto; cursor:pointer; }
.s5 .iconbtn svg{ width:17px; height:17px; }
.s5 .me{ width:34px; height:34px; border-radius:50%; background:var(--sel); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; flex:0 0 auto; }

/* ============================== SCOPE BANNER ============================== */
.s5 .scope{ flex:0 0 auto; display:flex; align-items:center; gap:11px; padding:11px 22px; font-size:13px; font-weight:600; }
.s5 .scope.live{ background:var(--err-bg); color:var(--err); border-bottom:1px solid var(--err-bd); }
.s5 .scope.safe{ background:var(--live-bg); color:var(--live); border-bottom:1px solid var(--live-bd); }
.s5 .scope svg{ width:16px; height:16px; flex:0 0 auto; }
.s5 .scope .sbtn{ margin-left:auto; font-size:12.5px; font-weight:700; border:1px solid currentColor; background:transparent; color:inherit; border-radius:var(--r-pill); padding:5px 13px; cursor:pointer; white-space:nowrap; flex:0 0 auto; }

/* ============================== WORKSPACE SPLIT ============================== */
.s5 main{ flex:1; display:flex; min-height:0; }
.s5 .work{ flex:1; min-width:0; display:flex; flex-direction:column; }
.s5 .worktop{ flex:0 0 auto; padding:20px 24px 14px; display:flex; align-items:flex-end; gap:16px; }
.s5 .worktop h1{ font-size:21px; font-weight:800; letter-spacing:-.025em; margin:0; white-space:nowrap; }
.s5 .worktop .wsub{ font-size:13px; color:var(--ink-3); margin-top:3px; }
.s5 .search{ display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--card); border-radius:var(--r-pill); padding:9px 15px; color:var(--ink-3); font-size:13.5px; min-width:230px; }
.s5 .search svg{ width:15px; height:15px; flex:0 0 auto; }
.s5 .search input{ border:0; background:transparent; font-family:var(--font); font-size:13.5px; color:var(--ink); outline:none; width:100%; }
.s5 .addbtn{ display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:var(--card); border:0; border-radius:var(--r-pill); padding:9px 16px; font-family:var(--font); font-weight:700; font-size:13.5px; cursor:pointer; flex:0 0 auto; white-space:nowrap; }
.s5 .addbtn svg{ width:15px; height:15px; }
.s5 .filters{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:0 24px 14px; }
.s5 .filters .flab{ font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; margin-right:3px; }
.s5 .fchip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; border:1px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:var(--r-pill); padding:6px 12px; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
.s5 .fchip.on{ background:var(--ink); color:var(--card); border-color:var(--ink); }
.s5 .fchip .ct{ font-weight:700; opacity:.7; }
.s5 .canvaswrap{ flex:1; min-height:0; margin:0 24px 22px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:relative; background:var(--canvas); }

/* ============================== NODE MAP ============================== */
/* Sized by its width/height attributes (set in JS to the canvas px size) so SVG
   units stay 1:1 with the px-positioned cards — never stretch this element. */
.s5 .wires{ position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
.s5 .wires path{ fill:none; stroke:var(--line-2); stroke-width:2; }
.s5 .wires path.err{ stroke:var(--err); stroke-dasharray:5 4; }
.s5 .wires circle.err-cap{ fill:var(--canvas); stroke:var(--err); stroke-width:2; }
.s5 .wires path.end{ stroke:var(--ink-3); stroke-dasharray:4 4; opacity:.55; }
.s5 .wires circle.end-cap{ fill:var(--canvas); stroke:var(--ink-3); stroke-width:1.5; opacity:.7; }
.s5 .node{ position:absolute; width:188px; background:var(--card); border:1px solid var(--line); border-radius:13px; padding:13px 14px; box-shadow:var(--shadow-sm); cursor:pointer; }
.s5 .node .nhead{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.s5 .node .ntitle{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.s5 .node .nmeta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.s5 .node.sel{ border-color:var(--sel); box-shadow:0 0 0 3px var(--sel-bg),var(--shadow-md); }
.s5 .node.entry{ border-top:3px solid var(--brand); }
.s5 .node .lstripe{ position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--draft); }
.s5 .node.s-live .lstripe{ background:var(--live); } .s5 .node.s-edit .lstripe{ background:var(--edit); } .s5 .node.s-draft .lstripe{ background:var(--draft); } .s5 .node.s-err .lstripe{ background:var(--err); }

/* type badge */
.s5 .tbadge{ width:19px; height:19px; border-radius:6px; display:grid; place-items:center; font-size:11px; font-weight:800; flex:0 0 auto; color:#fff; }
.s5 .tb-question{ background:var(--brand); color:var(--on-brand); } .s5 .tb-fix{ background:var(--live); } .s5 .tb-ticket{ background:var(--sel); } .s5 .tb-template{ background:#7C5CFC; }

/* chips + dots */
.s5 .chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:2px 9px; border-radius:var(--r-pill); }
.s5 .chip .d{ width:6px; height:6px; border-radius:50%; }
.s5 .chip.live{ color:var(--live); background:var(--live-bg); } .s5 .chip.live .d{ background:var(--live); }
.s5 .chip.edited{ color:var(--edit); background:var(--edit-bg); } .s5 .chip.edited .d{ background:var(--edit); }
.s5 .chip.draft{ color:var(--draft); background:var(--draft-bg); } .s5 .chip.draft .d{ background:var(--draft); }
.s5 .chip.err{ color:var(--err); background:var(--err-bg); } .s5 .chip.err .d{ background:var(--err); }
.s5 .chip.neutral{ color:var(--ink-2); background:var(--card-2); border:1px solid var(--line); }
.s5 .tagx{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--ink-2); background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 10px; }
.s5 .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; display:inline-block; }
.s5 .d-live{ background:var(--live);} .s5 .d-edit{ background:var(--edit);} .s5 .d-draft{ background:var(--draft);} .s5 .d-err{ background:var(--err);} .s5 .d-sel{ background:var(--sel);}

/* zoom control */
/* Docked below the canvas frame (not floating over it) so it can never cover a node card. */
.s5 .pz{ flex:0 0 auto; align-self:flex-end; margin-top:10px; display:flex; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.s5 .pz button{ width:36px; height:34px; border:0; background:transparent; color:var(--ink-2); display:grid; place-items:center; cursor:pointer; }
.s5 .pz .pct{ min-width:48px; text-align:center; font-size:12px; font-weight:700; color:var(--ink-2); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.s5 .pz svg{ width:16px; height:16px; }
.s5 .maplegend{ position:absolute; left:16px; top:14px; display:flex; gap:13px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 14px; box-shadow:var(--shadow-sm); font-size:11.5px; font-weight:600; color:var(--ink-2); z-index:4; }
.s5 .maplegend span{ display:flex; align-items:center; gap:6px; }

/* ============================== EDIT PANEL (the headline rework) ============================== */
.s5 .edit{ width:392px; flex:0 0 auto; background:var(--card); border-left:1px solid var(--line); display:flex; flex-direction:column; }
.s5 .edit .ehead{ padding:20px 22px 0; flex:0 0 auto; }
.s5 .edit .ehrow{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.s5 .edit .etype{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--ink-2); background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 11px 4px 5px; }
.s5 .edit .etitle{ width:100%; border:0; background:transparent; font-family:var(--font); font-size:23px; font-weight:800; letter-spacing:-.03em; color:var(--ink); padding:0; outline:none; line-height:1.15; }
.s5 .ebody{ flex:1; overflow:hidden; padding:18px 22px; display:flex; flex-direction:column; gap:16px; }
.s5 .esec{ display:flex; flex-direction:column; gap:11px; }
.s5 .eseclab{ font-size:10.5px; font-weight:800; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; }
.s5 .efield > .fl{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.s5 .efield > .fl .req{ color:var(--edit); font-size:11.5px; font-weight:600; }
.s5 .textarea{ width:100%; border:1px solid var(--line); background:var(--card-2); border-radius:var(--r-md); padding:12px 14px; font-family:var(--font); font-size:13.5px; line-height:1.6; color:var(--ink-2); min-height:90px; }
.s5 .seg{ display:flex; gap:5px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md); padding:4px; }
.s5 .seg button{ flex:1; border:0; background:transparent; color:var(--ink-2); border-radius:8px; padding:8px 4px; font-family:var(--font); font-weight:600; font-size:12px; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
.s5 .seg button.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.s5 .seg .tbadge{ width:16px; height:16px; font-size:9px; }
.s5 .linkrow{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; font-size:13px; font-weight:600; }
.s5 .linkrow.bad{ border-color:var(--err-bd); background:var(--err-bg); color:var(--err); }
.s5 .linkrow .grip{ color:var(--ink-3); cursor:grab; font-size:12px; }
.s5 .linkrow .x{ margin-left:auto; color:var(--ink-3); font-size:16px; cursor:pointer; }
.s5 .addlink{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; border:1px dashed var(--line-2); background:transparent; color:var(--ink-2); border-radius:var(--r-md); padding:10px; font-family:var(--font); font-weight:600; font-size:12.5px; cursor:pointer; }
.s5 .addlink svg{ width:14px; height:14px; }
.s5 .inlink{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2); }
.s5 .tags{ display:flex; flex-wrap:wrap; gap:7px; }
.s5 .tagchip{ font-size:12px; font-weight:600; border:1px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:var(--r-pill); padding:5px 12px; cursor:pointer; }
.s5 .tagchip.on{ background:var(--sel-bg); border-color:var(--sel-bd); color:var(--sel); }
.s5 .chanpill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-2); background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 11px; }
.s5 .chanpill .hash{ color:var(--ink-3); }
.s5 .savebar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:14px 22px; border-top:1px solid var(--line); background:var(--card-2); }
.s5 .savebtn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); border-radius:var(--r-md); padding:9px 15px; font-family:var(--font); font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
.s5 .savebtn svg{ width:15px; height:15px; }
.s5 .saveind{ font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.s5 .saveind.un{ color:var(--edit); } .s5 .saveind .sd{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.s5 .deleterow{ padding-top:4px; }
.s5 .btn-textdanger{ display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--err); font-family:var(--font); font-weight:600; font-size:13px; padding:0; cursor:pointer; }
.s5 .btn-textdanger svg{ width:15px; height:15px; }

/* edit empty */
.s5 .editempty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; color:var(--ink-3); }
.s5 .editempty svg{ width:40px; height:40px; margin-bottom:14px; opacity:.6; }
.s5 .editempty h3{ font-size:16px; font-weight:700; color:var(--ink-2); margin:0 0 6px; }
.s5 .editempty p{ font-size:13px; margin:0; max-width:230px; line-height:1.5; }

/* ============================== DISCORD PREVIEW ============================== */
.s5 .dc{ background:#313338; border-radius:var(--r-md); padding:14px 16px; }
.s5 .dc .dch{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.s5 .dc .dav{ width:32px; height:32px; border-radius:50%; background:#5865F2; display:grid; place-items:center; flex:0 0 auto; }
.s5 .dc .dav svg{ width:17px; height:17px; }
.s5 .dc .dname{ font-size:13px; font-weight:700; color:#fff; display:flex; align-items:center; gap:7px; }
.s5 .dc .dbot{ font-size:8.5px; font-weight:700; background:#5865F2; color:#fff; padding:1px 5px; border-radius:3px; }
.s5 .dc .dmeta{ font-size:10.5px; color:#949ba4; }
.s5 .dc .dtag{ display:inline-block; font-size:9.5px; font-weight:600; color:#dbdee1; background:#3f4147; border-radius:4px; padding:2px 8px; margin:0 5px 5px 0; }
.s5 .dc .dtitle{ font-size:15px; font-weight:700; color:#f2f3f5; margin-bottom:6px; }
.s5 .dc .dbody{ font-size:12.5px; color:#dbdee1; line-height:1.55; }
.s5 .dc .dsep{ height:1px; background:#3f4147; margin:12px 0; }
.s5 .dc .dprompt{ font-size:11px; color:#949ba4; margin-bottom:7px; font-weight:600; }
.s5 .dc .dlink{ display:flex; align-items:center; gap:8px; font-size:13px; color:#00a8fc; font-weight:600; padding:3px 0; }
.s5 .dc .dlink .arr{ color:#6d7178; }
.s5 .dc .dnote{ display:flex; gap:8px; font-size:10.5px; color:#949ba4; line-height:1.45; margin-top:11px; padding-top:11px; border-top:1px solid #3f4147; }
.s5 .dc .dnote svg{ width:13px; height:13px; flex:0 0 auto; margin-top:1px; }
.s5 .dc .dticket{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:#fff; background:#5865F2; border-radius:8px; padding:9px 12px; }
.s5 .dc .dticket svg{ width:15px; height:15px; }

/* collapsible preview */
.s5 .dprev{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.s5 .dprev .summ{ display:flex; align-items:center; gap:9px; padding:11px 13px; background:var(--card-2); font-size:12.5px; font-weight:700; cursor:pointer; }
.s5 .dprev .summ .pvic{ width:15px; height:15px; color:var(--ink-2); }
.s5 .dprev .summ .pvsub{ font-size:11px; font-weight:500; color:var(--ink-3); }
.s5 .dprev .summ .chev{ width:15px; height:15px; margin-left:auto; color:var(--ink-3); }
.s5 .dprev .pvwrap{ padding:13px; }

/* ============================== PUBLISH BAR ============================== */
.s5 .pubbar{ flex:0 0 auto; height:64px; display:flex; align-items:center; gap:16px; padding:0 22px; background:var(--card); border-top:1px solid var(--line); }
.s5 .pubstat{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2); }
.s5 .pubstat b{ color:var(--ink); }
.s5 .pubdiv{ width:1px; height:22px; background:var(--line); }
.s5 .pubwarn{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--err); background:var(--err-bg); border:1px solid var(--err-bd); border-radius:var(--r-pill); padding:6px 13px; }
.s5 .pubwarn svg{ width:15px; height:15px; }
.s5 .chanbtn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); border-radius:var(--r-md); padding:9px 13px; font-family:var(--font); font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
.s5 .chanbtn .hash{ color:var(--ink-3); }
.s5 .chanbtn .caret{ color:var(--ink-3); font-size:11px; }
.s5 .ptarget{ display:flex; flex-direction:column; line-height:1.2; }
.s5 .ptarget .ptl{ font-size:10px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.s5 .ptarget .ptv{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.s5 .btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); border-radius:var(--r-md); padding:11px 17px; font-family:var(--font); font-weight:700; font-size:13.5px; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
.s5 .btn svg{ width:16px; height:16px; }
.s5 .btn.primary{ background:var(--ink); border-color:var(--ink); color:var(--card); }
.s5 .btn.danger{ background:var(--err); border-color:var(--err); color:#fff; }
.s5 .btn.ghost{ background:transparent; border-color:transparent; color:var(--ink-2); }
.s5 .btn.sm{ padding:8px 13px; font-size:12.5px; }
.s5 .btn:disabled{ opacity:.45; }

/* ============================== BOARD ============================== */
.s5 .board{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start; height:100%; }
.s5 .lane{ background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; }
.s5 .lane.attn{ background:var(--err-bg); border-color:var(--err-bd); }
.s5 .lane h4{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; margin:0 0 2px; }
.s5 .lane h4 .ct{ margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-3); background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:1px 9px; }
.s5 .lane .lsub{ font-size:11px; color:var(--ink-3); margin-bottom:12px; }
.s5 .bcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; margin-bottom:9px; box-shadow:var(--shadow-sm); position:relative; }
.s5 .bcard .lstripe{ position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; }
.s5 .bcard.s-live .lstripe{ background:var(--live);} .s5 .bcard.s-edit .lstripe{ background:var(--edit);} .s5 .bcard.s-draft .lstripe{ background:var(--draft);} .s5 .bcard.s-err .lstripe{ background:var(--err);}
.s5 .bcard .bt{ font-size:13px; font-weight:700; letter-spacing:-.01em; margin-bottom:7px; padding-left:8px; }
.s5 .bcard .bm{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-3); padding-left:8px; }

/* ============================== OUTLINE ============================== */
.s5 .outline{ height:100%; overflow:hidden; padding:6px 0; }
.s5 .orow{ display:flex; align-items:center; gap:11px; padding:11px 16px; border-radius:var(--r-md); cursor:pointer; }
.s5 .orow.sel{ background:var(--sel-bg); }
.s5 .orow .otw{ width:16px; color:var(--ink-3); font-size:11px; text-align:center; flex:0 0 auto; }
.s5 .orow .otitle{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s5 .orow .ocount{ font-size:11.5px; color:var(--ink-3); font-weight:600; }

/* ============================== SHEETS / MODALS ============================== */
.s5 .scrim{ position:absolute; inset:0; background:rgba(28,24,16,.42); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:20; }
.s5 .scrim.bottom{ align-items:flex-end; justify-content:center; }
.s5 .sheet{ background:var(--card); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); width:540px; max-height:88%; display:flex; flex-direction:column; overflow:hidden; }
.s5 .sheet.wide{ width:600px; }
.s5 .shead{ padding:22px 24px 0; flex:0 0 auto; }
.s5 .shead h2{ font-size:21px; font-weight:800; letter-spacing:-.025em; margin:0 0 6px; }
.s5 .shead .ssub{ font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.s5 .sbody{ padding:18px 24px; overflow:hidden; display:flex; flex-direction:column; gap:16px; }
.s5 .sacts{ flex:0 0 auto; display:flex; align-items:center; gap:11px; padding:16px 24px; border-top:1px solid var(--line); background:var(--card-2); }
.s5 .formfield > label{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:8px; display:block; }
.s5 .formfield .req{ color:var(--edit); }
.s5 .input{ width:100%; border:1px solid var(--line); background:var(--card); border-radius:var(--r-md); padding:11px 13px; font-family:var(--font); font-size:14px; color:var(--ink); outline:none; }
.s5 .parentpick{ width:100%; display:flex; align-items:center; border:1px solid var(--line); background:var(--card); border-radius:var(--r-md); padding:11px 13px; font-family:var(--font); font-size:14px; color:var(--ink); cursor:pointer; }
.s5 .parentpick.empty{ color:var(--ink-3); }
.s5 .parentpick .ppc{ margin-left:auto; color:var(--ink-3); }
.s5 .hint{ font-size:12px; color:var(--ink-3); margin-top:7px; line-height:1.45; }

/* target line in review */
.s5 .targetline{ display:flex; align-items:center; gap:12px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; }
.s5 .targetline.live{ background:var(--err-bg); border-color:var(--err-bd); }
.s5 .blocker{ border:1px solid var(--err-bd); background:var(--err-bg); border-radius:var(--r-md); padding:14px 16px; }
.s5 .blocker h3{ font-size:14px; font-weight:800; color:var(--err); margin:0 0 5px; display:flex; align-items:center; gap:8px; }
.s5 .blocker h3 svg{ width:16px; height:16px; }
.s5 .blocker p{ font-size:12.5px; color:var(--ink-2); margin:0 0 12px; line-height:1.5; }
.s5 .blocker .bacts{ display:flex; align-items:center; gap:10px; }
.s5 .anyway{ font-size:12px; color:var(--ink-3); text-decoration:underline; cursor:pointer; margin-left:4px; white-space:nowrap; }
.s5 .changegroup{ }
.s5 .changegroup .cglab{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:9px; }
.s5 .changerow{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:8px; }
.s5 .changerow .ctag{ font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:5px; letter-spacing:.03em; }
.s5 .changerow .ctag.add{ color:var(--live); background:var(--live-bg); } .s5 .changerow .ctag.upd{ color:var(--edit); background:var(--edit-bg); } .s5 .changerow .ctag.del{ color:var(--err); background:var(--err-bg); }
.s5 .changerow .cname{ font-size:13px; font-weight:700; }
.s5 .changerow .cwhat{ font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.s5 .liveack{ display:flex; align-items:flex-start; gap:11px; border:1px solid var(--err-bd); background:var(--err-bg); border-radius:var(--r-md); padding:14px 16px; }
.s5 .ackbox{ width:22px; height:22px; border-radius:6px; border:2px solid var(--err); background:var(--card); flex:0 0 auto; display:grid; place-items:center; color:var(--err); font-size:14px; font-weight:800; cursor:pointer; }
.s5 .ackbox.on{ background:var(--err); color:#fff; }
.s5 .liveack .at{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.45; }

/* ripple (delete) */
.s5 .ripple{ display:flex; gap:11px; border:1px solid var(--edit-bd); background:var(--edit-bg); border-radius:var(--r-md); padding:14px 16px; }
.s5 .ripple svg{ width:18px; height:18px; color:var(--edit); flex:0 0 auto; margin-top:1px; }
.s5 .ripple .rt{ font-size:13px; color:var(--ink); line-height:1.5; }
.s5 .ripple .rt b{ color:var(--edit); }
.s5 .repoint{ border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px; }
.s5 .repoint .rl{ font-size:12.5px; font-weight:600; margin-bottom:10px; }

/* resolve list */
.s5 .resolve{ display:flex; flex-direction:column; gap:7px; max-height:260px; }
.s5 .ropt{ display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:var(--r-md); padding:11px 13px; cursor:pointer; }
.s5 .ropt.sel{ border-color:var(--sel); background:var(--sel-bg); }
.s5 .ropt .radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line-2); flex:0 0 auto; }
.s5 .ropt.sel .radio{ border-color:var(--sel); border-width:5px; }
.s5 .ropt .rname{ font-size:13px; font-weight:700; white-space:nowrap; }
.s5 .ropt .rmeta{ font-size:11px; color:var(--ink-3); white-space:nowrap; }

/* progress */
.s5 .ppmark{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; }
.s5 .ppmark.run{ border:4px solid var(--line); border-top-color:var(--sel); }
.s5 .ppmark.ok{ background:var(--live-bg); color:var(--live); } .s5 .ppmark.ok svg{ width:26px; height:26px; }
.s5 .ppmark.fail{ background:var(--err-bg); color:var(--err); } .s5 .ppmark.fail svg{ width:24px; height:24px; }
.s5 .pptitle{ font-size:19px; font-weight:800; letter-spacing:-.02em; text-align:center; margin-bottom:5px; }
.s5 .ppsub{ font-size:13px; color:var(--ink-2); text-align:center; line-height:1.5; }
.s5 .pbar{ height:7px; border-radius:4px; background:var(--card-3); overflow:hidden; margin:18px 0 8px; }
.s5 .pbar i{ display:block; height:100%; border-radius:4px; background:var(--sel); }
.s5 .pmeter{ display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:var(--ink-3); }
.s5 .psteps{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.s5 .pstep{ display:flex; align-items:center; gap:11px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--r-md); font-size:13px; font-weight:600; }
.s5 .pstep .pic{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font-size:11px; font-weight:800; }
.s5 .pstep.done .pic{ background:var(--live); color:#fff; } .s5 .pstep.done{ color:var(--ink); }
.s5 .pstep.fail .pic{ background:var(--err); color:#fff; } .s5 .pstep.fail{ color:var(--err); border-color:var(--err-bd); background:var(--err-bg); }
.s5 .pstep.run .pic{ border:2px solid var(--line); border-top-color:var(--sel); } .s5 .pstep.pend{ color:var(--ink-3); } .s5 .pstep.pend .pic{ border:2px solid var(--line); }
.s5 .pstep .pst{ margin-left:auto; font-size:11px; font-weight:700; }
.s5 .failsum{ border:1px solid var(--err-bd); background:var(--err-bg); border-radius:var(--r-md); padding:13px 15px; margin-top:14px; }
.s5 .failsum h4{ font-size:13px; font-weight:800; color:var(--err); margin:0 0 5px; display:flex; align-items:center; gap:7px; }
.s5 .failsum h4 svg{ width:15px; height:15px; }
.s5 .failsum p{ font-size:12.5px; color:var(--ink-2); margin:0; line-height:1.5; }

/* server menu */
.s5 .srvmenu{ position:absolute; top:54px; left:0; width:330px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:7px; z-index:30; }
.s5 .srvmenu .mh{ font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; padding:9px 11px 7px; }
.s5 .srvitem{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-md); cursor:pointer; }
.s5 .srvitem.cur{ background:var(--card-2); }
.s5 .srvitem .sii{ flex:1; line-height:1.2; }
.s5 .srvitem .inm{ font-size:13.5px; font-weight:700; }
.s5 .srvitem .imt{ font-size:11px; color:var(--ink-3); }
.s5 .srvitem .schip{ font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:var(--r-pill); letter-spacing:.03em; }
.s5 .srvitem .schip.safe{ color:var(--live); background:var(--live-bg); } .s5 .srvitem .schip.live{ color:var(--err); background:var(--err-bg); }
.s5 .srvitem .ck{ width:16px; color:var(--sel); }
.s5 .srvmenu .mfoot{ display:flex; align-items:center; gap:8px; padding:11px; margin-top:4px; border-top:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink-2); }
.s5 .srvmenu .mfoot svg{ width:15px; height:15px; }

/* channel menu */
.s5 .chanmenu{ position:absolute; bottom:54px; right:0; width:300px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:7px; z-index:30; }
.s5 .chanitem{ display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:var(--r-md); cursor:pointer; }
.s5 .chanitem.cur{ background:var(--card-2); }
.s5 .chanitem .hash{ color:var(--ink-3); font-weight:700; }
.s5 .chanitem .cn{ font-size:13.5px; font-weight:700; }
.s5 .chanitem .cmt{ font-size:11px; color:var(--ink-3); }
.s5 .chanitem .creq{ margin-left:auto; font-size:9.5px; font-weight:700; color:var(--edit); background:var(--edit-bg); padding:2px 7px; border-radius:var(--r-pill); }

/* empty / no-results */
.s5 .empty{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; }
.s5 .empty .eart{ width:72px; height:72px; border-radius:var(--r-lg); background:var(--card-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-3); margin-bottom:20px; }
.s5 .empty .eart svg{ width:34px; height:34px; }
.s5 .empty h2{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
.s5 .empty p{ font-size:14px; color:var(--ink-2); max-width:380px; line-height:1.55; margin:0 0 22px; }
.s5 .empty .esteps{ display:flex; flex-direction:column; gap:10px; margin-top:24px; width:380px; text-align:left; }
.s5 .empty .estep{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; }
.s5 .empty .estep .n{ width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--card); font-size:12px; font-weight:800; display:grid; place-items:center; flex:0 0 auto; }
.s5 .empty .estep .t{ font-size:13px; font-weight:600; color:var(--ink-2); white-space:nowrap; }

/* history */
.s5 .histlist{ display:flex; flex-direction:column; gap:12px; max-width:760px; }
.s5 .histrow{ display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-sm); }
.s5 .histrow .htime{ display:flex; flex-direction:column; min-width:130px; }
.s5 .histrow .htime b{ font-size:14px; font-weight:800; }
.s5 .histrow .htime span{ font-size:11.5px; color:var(--ink-3); }
.s5 .histrow .hsum{ flex:1; font-size:13px; color:var(--ink-2); }
.s5 .histrow .hsum .htags{ display:flex; gap:6px; margin-top:7px; }
.s5 .histrow .revert{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); border-radius:var(--r-md); padding:9px 14px; font-family:var(--font); font-weight:700; font-size:12.5px; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
.s5 .histrow .revert svg{ width:14px; height:14px; }
.s5 .histrow.current{ border-color:var(--live-bd); }
.s5 .histrow .nowtag{ font-size:10px; font-weight:800; color:var(--live); background:var(--live-bg); border-radius:var(--r-pill); padding:2px 8px; }

/* toast */
.s5 .toast{ position:absolute; left:50%; bottom:90px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; background:var(--ink); color:var(--card); border-radius:var(--r-pill); padding:12px 16px 12px 18px; box-shadow:var(--shadow-lg); font-size:13.5px; font-weight:600; z-index:40; }
.s5 .toast .tcheck{ width:18px; height:18px; color:var(--live); }
.s5 .toast .tundo{ font-weight:800; color:var(--brand); cursor:pointer; padding-left:6px; border-left:1px solid rgba(255,255,255,.2); }

.s5 .focusbadge{ position:absolute; top:14px; right:16px; font-size:10.5px; font-weight:700; color:var(--ink-3); background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 11px; z-index:6; }


/* ===== app-extra (.s5 blocks: onboarding, list view, empty fixes) ===== */
/* Flow Bot — interactive prototype: supplemental structural CSS not in fb5.css.
 * Onboarding layout (color-agnostic — uses fb5.css tokens) + flow menu + chrome. */

.s5 .onboard{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px; }
.s5 .ocard{ width:560px; max-width:100%; }
.s5 .obrand{ display:flex; align-items:center; gap:11px; font-size:18px; font-weight:800; letter-spacing:-.02em; margin-bottom:24px; white-space:nowrap; }
.s5 .obrand .logo{ width:30px; height:30px; border-radius:9px; background:var(--brand); display:grid; place-items:center; }
.s5 .obrand .logo svg{ width:17px; height:17px; }
.s5 .inlineico{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; flex:0 0 auto; }
.s5 .inlineico svg{ width:17px; height:17px; }
.s5 .ostep{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
.s5 .ocard h1{ font-size:24px; font-weight:800; letter-spacing:-.025em; margin:0 0 8px; }
.s5 .ocard .olede{ font-size:14px; color:var(--ink-2); line-height:1.55; margin:0 0 22px; }
.s5 .opick{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.s5 .stepdots{ display:flex; align-items:center; gap:8px; }
.s5 .stepdots i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); opacity:.25; }
.s5 .stepdots i.on{ opacity:1; background:var(--sel); }
.s5 .stepdots i.done{ opacity:.55; }

/* ===================== FLOW MENU (home screen) ===================== */

/* fix: empty-state heading needs explicit line-height so wrapped titles don't collide with the paragraph below */
.s5 .empty h2{ line-height:1.3; margin:0 0 10px; }

/* ============================== LIST VIEW (search & filter) ============================== */
.s5 .listwrap{ flex:1; min-height:0; margin:0 24px 22px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--card); display:flex; flex-direction:column; }
.s5 .lhead{ display:grid; grid-template-columns:1fr 116px 128px 120px 96px; gap:14px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--card-2); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.s5 .lrows{ flex:1; overflow:auto; }
.s5 .lrow{ display:grid; grid-template-columns:1fr 116px 128px 120px 96px; gap:14px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); cursor:pointer; }
.s5 .lrow:hover{ background:var(--card-2); }
.s5 .lrow.sel{ background:var(--sel-bg); }
.s5 .lrow .lmain{ display:flex; align-items:center; gap:11px; min-width:0; }
.s5 .lrow .ltitle{ font-size:14px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s5 .lrow .lpath{ font-size:11.5px; color:var(--ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s5 .lrow .ltype{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.s5 .lrow .lcol{ font-size:12.5px; color:var(--ink-2); font-weight:600; }
.s5 .lrow .lcol .sub{ font-size:11px; color:var(--ink-3); font-weight:500; }
.s5 .lrow mark{ background:var(--brand); color:var(--on-brand); border-radius:3px; padding:0 2px; }
.s5 .listfoot{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--line); background:var(--card-2); font-size:12px; font-weight:600; color:var(--ink-3); }

/* ============================== ANALYTICS ============================== */
.s5 .analytics{ flex:1; min-height:0; overflow:auto; padding:4px 24px 24px; }
.s5 .kpirow{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.s5 .kpi{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-sm); }
.s5 .kpi .kl{ font-size:11.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.s5 .kpi .kv{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin:8px 0 4px; }
.s5 .kpi .kd{ font-size:12px; font-weight:700; display:flex; align-items:center; gap:5px; }
.s5 .kpi .kd.up{ color:var(--live); } .s5 .kpi .kd.down{ color:var(--err); } .s5 .kpi .kd.flat{ color:var(--ink-3); }
.s5 .agrid{ display:grid; grid-template-columns:1.5fr 1fr; gap:14px; }
.s5 .apanel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.s5 .apanel .aph{ display:flex; align-items:center; gap:8px; padding:15px 18px 13px; border-bottom:1px solid var(--line); }
.s5 .apanel .apt{ font-size:14px; font-weight:800; letter-spacing:-.01em; }
.s5 .apanel .aps{ font-size:11.5px; color:var(--ink-3); }
.s5 .apanel .apbody{ padding:8px 10px; }
.s5 .perfrow{ display:flex; align-items:center; gap:13px; padding:10px 10px; border-radius:var(--r-md); }
.s5 .perfrow:hover{ background:var(--card-2); }
.s5 .perfrow .rank{ width:20px; font-size:12px; font-weight:800; color:var(--ink-3); text-align:center; flex:0 0 auto; }
.s5 .perfrow .pi{ flex:1; min-width:0; }
.s5 .perfrow .pn{ font-size:13px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s5 .perfrow .bartrack{ height:6px; border-radius:3px; background:var(--card-3); margin-top:7px; overflow:hidden; }
.s5 .perfrow .bartrack i{ display:block; height:100%; border-radius:3px; background:var(--sel); }
.s5 .perfrow .pv{ font-size:13px; font-weight:800; text-align:right; flex:0 0 auto; min-width:56px; }
.s5 .perfrow .pv .sub{ font-size:10.5px; color:var(--ink-3); font-weight:600; }
.s5 .insight{ display:flex; gap:11px; padding:13px 14px; border-radius:var(--r-md); margin:0 8px 9px; }
.s5 .insight:first-child{ margin-top:8px; }
.s5 .insight.warn{ background:var(--err-bg); border:1px solid var(--err-bd); }
.s5 .insight.info{ background:var(--card-2); border:1px solid var(--line); }
.s5 .insight .ii{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
.s5 .insight.warn .ii{ color:var(--err); } .s5 .insight.info .ii{ color:var(--ink-3); }
.s5 .insight .it{ font-size:12.5px; line-height:1.5; color:var(--ink); }
.s5 .insight .it b{ font-weight:800; }
.s5 .insight .it .ihint{ display:block; color:var(--ink-3); font-weight:600; margin-top:2px; font-size:11.5px; }

/* ============================== ACTIVITY FEED (notifications) ============================== */
.s5 .actwrap{ flex:1; min-height:0; overflow:auto; padding:4px 24px 24px; }
.s5 .actgroup{ max-width:780px; margin:0 auto; }
.s5 .actdate{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin:20px 4px 10px; }
.s5 .actrow{ display:flex; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:9px; box-shadow:var(--shadow-sm); position:relative; }
.s5 .actrow.unread{ border-color:var(--sel-bd); }
.s5 .actrow.unread::before{ content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--sel); }
.s5 .actrow .aicon{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; }
.s5 .actrow .aicon svg{ width:17px; height:17px; }
.s5 .actrow .aicon.pub{ background:var(--live-bg); color:var(--live); }
.s5 .actrow .aicon.edit{ background:var(--edit-bg); color:var(--edit); }
.s5 .actrow .aicon.fail{ background:var(--err-bg); color:var(--err); }
.s5 .actrow .aicon.member{ background:var(--sel-bg); color:var(--sel); }
.s5 .actrow .aicon.revert{ background:var(--card-2); color:var(--ink-2); }
.s5 .actrow .abody{ flex:1; min-width:0; }
.s5 .actrow .atitle{ font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.4; }
.s5 .actrow .atitle b{ font-weight:800; }
.s5 .actrow .adesc{ font-size:12.5px; color:var(--ink-2); margin-top:3px; line-height:1.5; }
.s5 .actrow .ameta{ display:flex; align-items:center; gap:9px; margin-top:8px; font-size:11.5px; color:var(--ink-3); font-weight:600; }
.s5 .actrow .aact{ font-size:11.5px; font-weight:700; color:var(--sel); background:var(--sel-bg); border:1px solid var(--sel-bd); border-radius:var(--r-pill); padding:4px 11px; cursor:pointer; white-space:nowrap; align-self:center; flex:0 0 auto; }
.s5 .actrow .atime{ font-size:11.5px; color:var(--ink-3); font-weight:600; flex:0 0 auto; white-space:nowrap; }
.s5 .actbar{ display:flex; align-items:center; gap:8px; max-width:780px; margin:0 auto 4px; }

/* ===== app layer (real-app chrome fb5 lacks) ===== */
/* extra tokens the ported medfi rules rely on */
.s5{ --pad:13px; --brand-press:#E9B72C; --ring:0 0 0 3px var(--sel-bg); --ease:ease; --ease-out:cubic-bezier(.16,1,.3,1); }
/* body.s5 is the app frame (fb5 .s5 already sets flex column / height / overflow) */

/* --- top bar: fb5 shell pieces the static markup uses --- */
.s5 .top .brand b{ font-weight:800; }
.s5 .srv{ position:relative; background:transparent; border:0; padding:0; }
/* color:var(--ink) is required: a <button> does not inherit the page text color, so without
   this the server name (.sname, which sets no color of its own) falls back to the UA default
   black and goes invisible on the dark button in dark mode. */
.s5 .srvbtn{ display:flex; align-items:center; gap:10px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md); padding:6px 12px 6px 7px; font-family:var(--font); color:var(--ink); cursor:pointer; }
.s5 .srvbtn:hover{ border-color:var(--line-2); box-shadow:var(--shadow-sm); }
.s5 .srvbtn .sicon{ width:26px; height:26px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:10px; color:#fff; background:linear-gradient(140deg,#46433c,#26241f); }
.s5 .srvbtn .sinfo{ display:flex; flex-direction:column; line-height:1.15; text-align:left; max-width:200px; overflow:hidden; }
.s5 .srvbtn .sname{ font-weight:700; font-size:13.5px; white-space:nowrap; }
.s5 .srvbtn .smeta{ font-size:11px; color:var(--ink-3); font-weight:500; white-space:nowrap; }
.s5 .srvbtn .caret{ font-size:11px; color:var(--ink-3); margin-left:2px; }
.s5 .srvbtn .srvflag{ display:none; }
.s5 .srvbtn.live{ background:var(--err-bg); border-color:var(--err-bd); }
.s5 .srvbtn.live .srvflag{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; letter-spacing:.05em; color:var(--err); }
.s5 .vswitch{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.s5 .vswitch .lab{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.s5 .themetoggle{ width:36px; height:36px; flex:0 0 auto; border-radius:10px; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; color:var(--ink-2); cursor:pointer; padding:0; }
.s5 .themetoggle:hover{ color:var(--ink); border-color:var(--line-2); background:var(--card-2); }
.s5 .themetoggle svg{ width:17px; height:17px; }
.s5 .themetoggle .ic-moon{ display:none; }
.s5.dark .themetoggle .ic-sun{ display:none; }
.s5.dark .themetoggle .ic-moon{ display:block; color:var(--brand); }
.s5 .avatar{ width:34px; height:34px; border-radius:50%; background:var(--sel); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; flex:0 0 auto; }

/* --- scope banner (old .scopebar markup, fb5 .scope.live look) --- */
.s5 .scopebar{ display:none; align-items:center; gap:11px; padding:11px 22px; font-size:13px; font-weight:600; flex:0 0 auto; }
.s5 .scopebar.on{ display:flex; background:var(--err-bg); color:var(--err); border-bottom:1px solid var(--err-bd); }
.s5 .scopebar svg{ width:16px; height:16px; flex:0 0 auto; }
.s5 .scopeswitch{ margin-left:auto; font-family:var(--font); font-weight:700; font-size:12.5px; cursor:pointer; background:transparent; color:inherit; border:1px solid currentColor; border-radius:var(--r-pill); padding:5px 13px; white-space:nowrap; flex:0 0 auto; }

/* --- server menu / srv items (JS renderServerMenu markup) --- */

.s5 .srvmenu{ position:absolute; left:0; top:46px; width:312px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:6px; z-index:45; display:none; }
.s5 .srvmenu.on{ display:block; animation:pop .14s ease; }
@keyframes pop{ from{ opacity:0; transform:translateY(-5px) scale(.99); } }
.s5 .srvmenu .mh{ font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); padding:8px 10px; font-weight:700; }
.s5 .srvitem{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-md); cursor:pointer; }
.s5 .srvitem:hover{ background:var(--card-2); }
.s5 .srvitem.cur{ background:var(--sel-bg); }
.s5 .srvitem .sicon{ width:32px; height:32px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--ink); background:var(--card-2); border:1px solid var(--line); }
.s5 .srvitem .sii{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.s5 .srvitem .iname{ font-weight:700; font-size:13.5px; }
.s5 .srvitem .imeta{ font-size:11px; color:var(--ink-3); }
.s5 .schip{ font-size:9.5px; font-weight:700; letter-spacing:.03em; padding:3px 8px; border-radius:var(--r-pill); flex:0 0 auto; }
.s5 .schip.safe{ color:var(--live); background:var(--live-bg); }
.s5 .schip.live{ color:#fff; background:var(--err); }
.s5 .srvitem .check{ width:14px; flex:0 0 auto; text-align:center; color:var(--sel); font-weight:700; font-size:13px; }
.s5 .srvmenu .foot{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink-2); padding:9px 10px; border-top:1px solid var(--line); margin-top:4px; cursor:pointer; border-radius:var(--r-md); }
.s5 .srvmenu .foot:hover{ color:var(--ink); background:var(--card-2); }

.s5 .srvmenu{ top:50px; }


/* --- main split, worktop, setup, banners, sync (ported from medfi) --- */

/* ====================================================== MAIN SPLIT */
.s5 main{ flex:1; display:flex; min-height:0; }
.s5 .left{ flex:1; min-width:0; display:flex; flex-direction:column; }
.s5 .leftbar{ display:flex; align-items:center; gap:13px; padding:16px 22px 10px; flex:0 0 auto; }
.s5 .leftbar h1{ font-size:21px; font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.1; white-space:nowrap; }
.s5 .leftbar .sub{ font-size:12px; color:var(--ink-3); margin-top:3px; font-weight:500; }
.s5 .search{ margin-left:auto; display:flex; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:var(--r-md); padding:8px 13px; width:220px; color:var(--ink-3); font-size:13px; background:var(--card); }
.s5 .search svg{ width:15px; height:15px; }

.s5 .leftbody{ flex:1; min-height:0; overflow:auto; padding:6px 22px 22px; }
/* Let the canvas fill the whole left panel instead of leaving dead space below. */
.s5 #treeArea{ flex:1; min-height:0; display:flex; flex-direction:column; }
.s5 #treeArea .leftbody{ display:flex; flex-direction:column; }
.s5 .version{ display:none; }
.s5 .version.on{ display:flex; flex-direction:column; flex:1; min-height:0; }
.s5 .version .caption{ flex:0 0 auto; }
.s5 #v-board{ flex:1; min-height:0; overflow:auto; }
/* List view: FilterBar on top, listwrap flexes to fill and scrolls internally. */
.s5 #v-ledger{ flex:1; min-height:0; display:flex; flex-direction:column; }
.s5 .lv-filters{ flex:0 0 auto; padding:2px 4px 12px; flex-wrap:wrap; }
.s5 #v-ledger .listwrap{ margin:0; }
.s5 .caption{ font-size:13px; color:var(--ink-2); margin:0 2px 14px; font-weight:500; }
.s5 .caption b{ color:var(--ink); font-weight:700; }

/* ---------- canvas ---------- */
.s5 .cscroll{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); background:var(--canvas);
  overflow:auto; flex:1; min-height:340px; overscroll-behavior:contain;
}
.s5 .canvas, .s5 .flowcanvas{
  position:relative; border:0; border-radius:0; box-shadow:none; overflow:hidden;
  background:
    radial-gradient(var(--grid) 1.3px, transparent 1.3px) 0 0 / 22px 22px,
    var(--canvas);
  min-height:100%;
}
.s5 .canvas{ min-width:760px; }
.s5 .flowcanvas{ min-width:720px; }

/* ==================================================================
   FREE-FORM NODE MAP (Connect Flow) — a pannable/zoomable canvas where
   cards are dragged into place and connected by their right-edge "tail".
   Scoped to .node.nm + the .nmvp/.nmstage containers so the other views
   (flowchart, board, list) are untouched.
   ================================================================== */
.s5 .nmvp{
  position:relative; flex:1; min-height:340px; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  background:
    radial-gradient(var(--grid) 1.3px, transparent 1.3px) 0 0 / 22px 22px,
    var(--canvas);
  cursor:grab; overscroll-behavior:contain; touch-action:none;
}
.s5 .nmvp.panning{ cursor:grabbing; }
.s5 .nmvp.connecting{ cursor:crosshair; }
.s5 .nmstage{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.s5 .nmwires{ position:absolute; left:0; top:0; overflow:visible; }
/* Decorative strokes never catch the pointer, so a click on "empty" canvas that
   happens to cross a wire still pans. Only the fat invisible .hit path is clickable. */
.s5 .nmwires path.wire, .s5 .nmwires path.end, .s5 .nmwires path.broken,
.s5 .nmwires path.dragwire, .s5 .nmwires circle.brokencap{ pointer-events:none; }
.s5 .nmwires path.wire{ fill:none; stroke:var(--line-2); stroke-width:2.25; transition:stroke .12s, stroke-width .12s; }
.s5 .nmwires path.wire.lit{ stroke:var(--sel); stroke-width:3; }
.s5 .nmwires path.wire.dim{ stroke:var(--line); opacity:.5; }
.s5 .nmwires path.hit{ fill:none; stroke:transparent; stroke-width:20; pointer-events:stroke; cursor:pointer; }
.s5 .nmwires path.broken{ fill:none; stroke:var(--err); stroke-width:2.25; stroke-dasharray:6 5; }
.s5 .nmwires path.end{ fill:none; stroke:var(--ink-3); stroke-width:2.25; stroke-dasharray:4 5; opacity:.5; }
.s5 .nmwires circle.brokencap{ fill:var(--canvas); stroke:var(--err); stroke-width:2; }
.s5 .nmwires path.dragwire{ fill:none; stroke:var(--sel); stroke-width:2.75; stroke-dasharray:2 7; stroke-linecap:round; opacity:0; }
.s5 .nmwires path.dragwire.on{ opacity:1; }
.s5 .nmwires path.dragwire.bad{ stroke:var(--edit); }
.s5 #v-nodemap.nmnodes{ position:absolute; left:0; top:0; min-width:0; }

/* free-form card: draggable, connectable */
.s5 .node.nm{ width:198px; cursor:grab; user-select:none; transition:border-color .12s, box-shadow .12s; }
.s5 .node.nm:hover{ transform:none; border-color:var(--line-2); box-shadow:var(--shadow-sm); }
.s5 .node.nm.grabbing{ cursor:grabbing; box-shadow:var(--shadow-lg); z-index:6; }
.s5 .node.nm.sel{ border-color:var(--sel); box-shadow:0 0 0 3px var(--sel-bg), var(--shadow-md); }
.s5 .node.nm.sel:hover{ border-color:var(--sel); }

/* entry node — gold tint + floating "start here" flag */
.s5 .node.nm.entry{ border-top:3px solid var(--brand); border-color:rgba(255,200,58,.4);
  background:linear-gradient(180deg, rgba(255,200,58,.07), transparent 62%), var(--card);
  box-shadow:0 0 0 1px rgba(255,200,58,.18), var(--shadow-md); }
.s5 .node.nm.entry.sel{ box-shadow:0 0 0 3px var(--sel-bg), var(--shadow-md); }
.s5 .node.nm .startflag{ position:absolute; top:-12px; left:13px; display:inline-flex; align-items:center; gap:5px;
  background:var(--brand); color:var(--on-brand); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 9px 3px 8px; border-radius:var(--r-pill); box-shadow:0 3px 9px rgba(0,0,0,.45); }
.s5 .node.nm .startflag svg{ width:9px; height:9px; }

/* per-branch LINK CHIPS inside the card — each with a socket port on the card edge */
.s5 .node.nm .nlinks{ display:flex; flex-direction:column; gap:5px; margin-top:9px; padding-right:13px; }
.s5 .node.nm .linkchip{ display:inline-flex; align-items:center; gap:6px; max-width:100%; font-size:11px; font-weight:600; color:var(--ink-2);
  background:var(--card-2); border:1px solid var(--line); border-radius:8px; padding:3px 8px 3px 7px; cursor:pointer; position:relative;
  transition:border-color .12s,color .12s; }
.s5 .node.nm .linkchip:hover{ border-color:var(--sel-bd); color:var(--ink); }
.s5 .node.nm .linkchip.wsel{ border-color:var(--sel-bd); color:var(--ink); background:var(--sel-bg); }
.s5 .node.nm .linkchip .arw{ color:var(--sel); flex:0 0 auto; font-weight:800; }
.s5 .node.nm .linkchip .lt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s5 .node.nm .linkchip .lx{ opacity:0; margin-left:auto; flex:0 0 auto; width:18px; height:18px; border:0; border-radius:6px;
  background:transparent; color:var(--ink-3); display:grid; place-items:center; cursor:pointer; transition:opacity .1s, background .1s, color .1s; padding:0; }
.s5 .node.nm .linkchip .lx svg{ width:12px; height:12px; }
.s5 .node.nm .linkchip:hover .lx{ opacity:1; }
.s5 .node.nm .linkchip .lx:hover{ background:var(--err-bg); color:var(--err); }
.s5 .node.nm .linkchip .lport{ position:absolute; right:-33px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%;
  background:var(--line-2); border:2px solid var(--line-2); box-shadow:0 0 0 4px var(--canvas), 0 0 0 5px var(--line); z-index:6;
  transition:all .13s cubic-bezier(.3,.9,.4,1.2); pointer-events:none; }
.s5 .node.nm .linkchip:hover .lport{ background:var(--sel); border-color:var(--sel); box-shadow:0 0 0 4px var(--canvas), 0 0 0 5px var(--sel), 0 0 0 8px var(--sel-bg); }
.s5 .node.nm .linkchip.wsel .lport{ background:var(--sel); border-color:var(--sel); box-shadow:0 0 0 4px var(--canvas), 0 0 0 5px var(--sel); }
/* a chip whose target no longer exists */
.s5 .node.nm .linkchip.brokenlink{ border-color:var(--err-bd); color:var(--err); background:var(--err-bg); }
.s5 .node.nm .linkchip.brokenlink .arw{ color:var(--err); }
.s5 .node.nm .linkchip.brokenlink .lport{ background:var(--err); border-color:var(--err); }

/* the ADD-BRANCH row — click to add a step, drag to connect */
.s5 .node.nm .addrow{ display:flex; align-items:center; gap:7px; margin-top:9px; margin-right:13px; position:relative; cursor:pointer; user-select:none;
  font-size:11.5px; font-weight:700; color:var(--ink-3); background:var(--bg); border:1px dashed var(--line-2); border-radius:8px; padding:5px 9px 5px 7px;
  transition:color .12s, border-color .12s, background .12s; }
.s5 .node.nm .addrow:hover{ color:var(--sel); border-color:var(--sel-bd); background:var(--sel-bg); }
.s5 .node.nm .addrow.dragging{ color:var(--sel); border-color:var(--sel); border-style:solid; background:var(--sel-bg); }
.s5 .node.nm .addrow .ap{ width:15px; height:15px; display:grid; place-items:center; flex:0 0 auto; }
.s5 .node.nm .addrow .ap svg{ width:12px; height:12px; }
.s5 .node.nm .addrow .lport.add{ position:absolute; right:-33px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%;
  background:var(--card); border:2px dashed var(--ink-3); box-shadow:0 0 0 4px var(--canvas), 0 0 0 5px var(--line); z-index:7;
  transition:all .13s cubic-bezier(.3,.9,.4,1.2); pointer-events:auto; cursor:crosshair; }
/* enlarge the grab target so the little circle is easy to catch */
.s5 .node.nm .addrow .lport.add::before{ content:""; position:absolute; inset:-9px; border-radius:50%; }
.s5 .node.nm .addrow:hover .lport.add, .s5 .node.nm .addrow.dragging .lport.add,
.s5 .node.nm .addrow .lport.add:hover{ background:var(--sel); border-color:var(--sel); border-style:solid;
  box-shadow:0 0 0 4px var(--canvas), 0 0 0 5px var(--sel), 0 0 0 8px var(--sel-bg); }

/* inbound landing port — a ring that shows while connecting */
.s5 .node.nm .inport{ position:absolute; left:-9px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%;
  border:2px dashed var(--sel); background:var(--canvas); opacity:0; transition:opacity .12s, transform .12s; pointer-events:none; }
.s5 .nmvp.connecting .node.nm .inport{ opacity:.5; }
.s5 .node.nm.drop-ok .inport{ opacity:1; transform:translateY(-50%) scale(1.25); border-style:solid; }
.s5 .node.nm.drop-ok{ border-color:var(--live); box-shadow:0 0 0 3px var(--live-bg), var(--shadow-md); }
.s5 .node.nm.drop-bad{ border-color:var(--edit); box-shadow:0 0 0 3px var(--edit-bg); }
.s5 .node.nm .droplabel{ position:absolute; left:50%; top:-13px; transform:translateX(-50%); white-space:nowrap;
  font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:var(--r-pill); opacity:0; transition:opacity .1s; letter-spacing:.01em; }
.s5 .node.nm.drop-ok .droplabel{ opacity:1; background:var(--live); color:#08240F; }
.s5 .node.nm.drop-bad .droplabel{ opacity:1; background:var(--edit); color:#2A1C05; }

/* inline "name this step" input on a fresh child */
.s5 .node.nm .titleinput{ width:100%; border:0; background:transparent; font-family:var(--font); font-size:13.5px;
  font-weight:700; letter-spacing:-.01em; color:var(--ink); outline:none; padding:0; }

/* wire delete chip — floats over the viewport in screen space */
.s5 .nmchips{ position:absolute; inset:0; pointer-events:none; z-index:9; }
.s5 .nmchips .wchip{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px 5px;
  box-shadow:var(--shadow-md); pointer-events:auto; cursor:default; white-space:nowrap; }
.s5 .nmchips .wchip .del{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px 0 9px; border-radius:var(--r-pill); border:0;
  background:var(--err-bg); color:var(--err); cursor:pointer; font-family:var(--font); font-size:11.5px; font-weight:800; line-height:1; }
.s5 .nmchips .wchip .del:hover{ background:var(--err); color:#fff; }
.s5 .nmchips .wchip .del svg{ width:13px; height:13px; }
.s5 .nmchips .wchip .wcancel{ width:26px; height:26px; border:0; border-radius:50%; background:var(--card-2); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; font-size:16px; line-height:1; }
.s5 .nmchips .wchip .wcancel:hover{ background:var(--card-3); color:var(--ink); }

/* inspector states in the editor pane (overview / wire selected) */
.s5 .sb-pad{ padding:20px; display:flex; flex-direction:column; gap:18px; overflow-y:auto; }
.s5 .sb-kicker{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-3); display:flex; align-items:center; gap:9px; }
.s5 .sb-kicker::after{ content:""; flex:1; height:1px; background:var(--line); }
.s5 .sb-h{ font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.s5 .sb-sub{ font-size:12.5px; font-weight:500; color:var(--ink-2); line-height:1.5; margin-top:-8px; }
.s5 .sb-label{ font-size:11.5px; font-weight:700; color:var(--ink-2); letter-spacing:.01em; }
.s5 .sb-field{ display:flex; flex-direction:column; gap:8px; }
.s5 .sb-stats{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.s5 .sb-stat{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:13px 14px; }
.s5 .sb-stat .num{ font-size:24px; font-weight:800; letter-spacing:-.02em; }
.s5 .sb-stat .cap{ font-size:11px; font-weight:600; color:var(--ink-3); margin-top:2px; }
.s5 .sb-legend{ display:flex; flex-direction:column; gap:9px; }
.s5 .sb-legrow{ display:flex; align-items:baseline; gap:9px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.s5 .sb-legrow .d{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; align-self:center; }
.s5 .sb-legrow .lg-l{ font-weight:700; color:var(--ink); }
.s5 .sb-legrow .lg-s{ font-size:11px; font-weight:500; color:var(--ink-3); }
.s5 .sb-legrow .ct{ margin-left:auto; font-weight:800; color:var(--ink); }
.s5 .sb-divider{ height:1px; background:var(--line); }
.s5 .sb-parent{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 11px; cursor:pointer; }
.s5 .sb-parent:hover{ color:var(--ink); border-color:var(--line-2); }
.s5 .sb-parent .tbadge{ width:18px; height:18px; flex:0 0 auto; }
.s5 .sb-parent .lt{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s5 .sb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; border:1px solid var(--line-2); background:var(--card-2);
  color:var(--ink); font-family:var(--font); font-weight:700; font-size:13px; padding:11px; border-radius:10px; cursor:pointer; transition:all .12s; }
.s5 .sb-btn:hover{ background:var(--card-3); }
.s5 .sb-btn svg{ width:15px; height:15px; }
.s5 .sb-btn.primary{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.s5 .sb-btn.primary:hover{ filter:brightness(1.06); }
.s5 .sb-btn.danger{ color:var(--err); border-color:transparent; background:transparent; }
.s5 .sb-btn.danger:hover{ background:var(--err-bg); }
.s5 .pubcard{ background:linear-gradient(180deg, rgba(255,200,58,.08), transparent), var(--bg); border:1px solid rgba(255,200,58,.3); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:11px; }
.s5 .pubcard .pt{ font-size:13px; font-weight:800; }
.s5 .pubcard .ps{ font-size:12px; font-weight:500; color:var(--ink-2); line-height:1.5; }

/* floating legend inside the viewport */
.s5 .nmlegend{ position:absolute; left:14px; top:12px; display:flex; gap:14px; z-index:8;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 15px; box-shadow:var(--shadow-sm);
  font-size:11.5px; font-weight:600; color:var(--ink-2); pointer-events:none; }
.s5 .nmlegend span{ display:flex; align-items:center; gap:6px; }
.s5 .nmlegend .dot{ width:8px; height:8px; border-radius:50%; }
.s5 .nmlegend .d-live{ background:var(--live); } .s5 .nmlegend .d-edit{ background:var(--edit); }
.s5 .nmlegend .d-draft{ background:var(--draft); } .s5 .nmlegend .d-err{ background:var(--err); }
.s5 .nmhint{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:8; pointer-events:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 15px; box-shadow:var(--shadow-md);
  font-size:12px; font-weight:600; color:var(--ink-2); opacity:0; transition:opacity .2s; white-space:nowrap; }
.s5 .nmhint.on{ opacity:1; }
.s5 .nmhint b{ color:var(--ink); font-weight:700; }
.s5 .setupbtn{ white-space:nowrap; }
.s5 .setupsheet{ width:560px; max-width:94vw; }
.s5 .setup-cards{ display:flex; gap:12px; margin:8px 0 4px; }
.s5 .setup-card{ flex:1; text-align:left; display:flex; flex-direction:column; gap:7px; padding:16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card-2); cursor:pointer; transition:border-color .12s, background .12s; }
.s5 .setup-card:hover{ border-color:var(--brand); background:var(--card); }
.s5 .setup-card .sc-ic{ color:var(--brand); }
.s5 .setup-card .sc-t{ font-weight:800; font-size:14.5px; letter-spacing:-.01em; }
.s5 .setup-card .sc-s{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.s5 .gen-copyrow{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.s5 .gen-copyrow .hinttext{ margin:0; }
.s5 .gen-copyrow .btn{ display:inline-flex; align-items:center; gap:7px; }
.s5 .textarea.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.5; }
.s5 .bk-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.s5 .invitebar{ display:none; align-items:center; gap:12px; padding:11px 22px; background:var(--card-2); border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink); }
.s5 .invitebar.on{ display:flex; }
.s5 .invitebar svg{ width:18px; height:18px; color:var(--brand); flex:0 0 auto; }
.s5 .invitebar span{ flex:1; }
.s5 .persistbar{ display:none; align-items:flex-start; gap:12px; padding:11px 22px; background:var(--err-bg); border-bottom:1px solid var(--err-bd); font-size:13px; color:var(--err); line-height:1.5; }
.s5 .persistbar.on{ display:flex; }
.s5 .persistbar svg{ width:18px; height:18px; color:var(--err); flex:0 0 auto; margin-top:1px; }
.s5 .persistbar span{ flex:1; }
.s5 .persistbar code{ background:var(--card); border:1px solid var(--err-bd); padding:1px 5px; border-radius:4px; font-size:12px; }
.s5 .syncbox{ display:flex; flex-direction:column; gap:8px; margin:4px 0 14px; }
.s5 .syncrow{ font-size:13px; line-height:1.5; padding:11px 13px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--card-2); color:var(--ink); }
.s5 .syncrow.ok{ background:var(--live-bg); border-color:var(--live-bd); color:var(--live); }
.s5 .syncrow.warn{ background:var(--edit-bg); border-color:var(--edit-bd); color:var(--edit); }
.s5 .syncrow.err{ background:var(--err-bg); border-color:var(--err-bd); color:var(--err); }
.s5 .invitebtn{ background:var(--brand); color:var(--on-brand); font-weight:700; font-size:13px; padding:7px 13px; border-radius:9px; text-decoration:none; white-space:nowrap; }
.s5 .invitebtn:hover{ filter:brightness(.95); }
.s5 .srvfoot{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-top:1px solid var(--line); color:var(--brand); font-weight:700; font-size:13px; text-decoration:none; }
.s5 .srvfoot:hover{ background:var(--card-2); }
.s5 .srvfoot .plus{ font-size:16px; line-height:1; }

/* token overrides for the hardcoded persist/sync colors above */
.s5 .persistbar{ background:var(--err-bg); border-bottom:1px solid var(--err-bd); color:var(--err); }
.s5 .persistbar svg{ color:var(--err); }
.s5 .persistbar code{ background:var(--card-2); color:var(--ink); border:1px solid var(--line); }
.s5 .syncrow.ok{ background:var(--live-bg); border-color:var(--live-bd); color:var(--live); }
.s5 .syncrow.warn{ background:var(--edit-bg); border-color:var(--edit-bd); color:var(--edit); }
.s5 .syncrow.err{ background:var(--err-bg); border-color:var(--err-bd); color:var(--err); }
.s5 .invitebar svg{ color:var(--edit); }
.s5 .invitebtn{ background:var(--ink); color:var(--card); }


/* --- edit panel + discord preview (ported) --- */

/* ====================================================== EDIT PANEL */
.s5 .editpane{ flex:0 0 414px; border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--card); }
.s5 .edithead{ padding:16px 20px 14px; border-bottom:1px solid var(--line); }
.s5 .edithead .ehrow{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.s5 .edithead .kind{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); }
.s5 .edithead h2{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0; }
.s5 .editbody{ flex:1; overflow:auto; padding:18px 20px; }
.s5 .field{ margin-bottom:18px; }
.s5 .field > label{ display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:7px; }
.s5 .input, .s5 .textarea{ width:100%; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-md); padding:10px 12px; font-family:var(--font); font-size:14px; color:var(--ink); transition:border-color .12s, box-shadow .12s; }
.s5 .input:focus, .s5 .textarea:focus{ outline:0; border-color:var(--sel); box-shadow:var(--ring); }
.s5 .textarea{ min-height:110px; line-height:1.55; white-space:pre-wrap; resize:vertical; }
.s5 .fmtbar{ display:flex; gap:5px; margin-top:8px; align-items:center; }
.s5 .fmtbar button{ width:30px; height:28px; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-sm); cursor:pointer; font-family:var(--font); font-size:13px; color:var(--ink-2); }
.s5 .fmtbar button:hover{ background:var(--card-2); color:var(--ink); }
.s5 .fmtbar .hint{ margin-left:8px; font-size:11px; color:var(--ink-3); }

.s5 .linkrow{ display:flex; align-items:center; gap:9px; border:1px solid var(--line-2); border-radius:var(--r-md); padding:9px 11px; margin-bottom:8px; background:var(--card); }
.s5 .linkrow .grip{ color:var(--ink-3); font-weight:700; cursor:grab; letter-spacing:-2px; }
.s5 .linkrow .lname{ flex:1; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.s5 .linkrow .x{ width:24px; height:24px; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-sm); cursor:pointer; font-size:13px; line-height:1; color:var(--ink-2); }
.s5 .linkrow .x:hover{ border-color:var(--err-bd); color:var(--err); }
.s5 .addlink{ width:100%; border:1px dashed var(--line-2); background:transparent; color:var(--ink-2); border-radius:var(--r-md); padding:10px; cursor:pointer; font-family:var(--font); font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px; justify-content:center; }
.s5 .addlink:hover{ border-color:var(--ink-3); color:var(--ink); }
.s5 .addlink svg{ width:14px; height:14px; }
.s5 .inlinks{ border:1px solid var(--line); background:var(--card-2); border-radius:var(--r-md); padding:10px 12px; }
.s5 .inlinks .il{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2); padding:3px 0; }

/* discord preview — always renders dark (real member view) */
.s5 .preview-toggle{ display:flex; gap:5px; margin-bottom:11px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md); padding:3px; }
.s5 .preview-toggle button{ flex:1; border:0; background:transparent; color:var(--ink-2); border-radius:7px; padding:7px; cursor:pointer; font-family:var(--font); font-size:12px; font-weight:600; }
.s5 .preview-toggle button.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.s5 .dc{ border-radius:12px; padding:15px; background:#313338; border:1px solid #232428; }
.s5 .dc .dch{ display:flex; gap:10px; align-items:center; margin-bottom:9px; }
.s5 .dc .dav{ width:32px; height:32px; border-radius:50%; background:#5865F2; display:grid; place-items:center; flex:0 0 auto; }
.s5 .dc .dav svg{ width:16px; height:16px; }
.s5 .dc .dname{ font-weight:700; font-size:13.5px; color:#f2f3f5; display:flex; align-items:center; gap:7px; }
.s5 .dc .dbot{ font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px; letter-spacing:.03em; color:#fff; background:#5865F2; }
.s5 .dc .dmeta{ font-size:11px; color:#949ba4; margin-top:1px; }
.s5 .dc .dtitle{ font-weight:700; font-size:15px; color:#f2f3f5; margin:6px 0 6px; }
.s5 .dc .dbody{ font-size:13px; line-height:1.5; color:#dbdee1; }
.s5 .dc .dsep{ border-top:1px solid #3f4147; margin:12px 0 10px; }
.s5 .dc .dprompt{ font-size:12px; color:#949ba4; margin-bottom:8px; }
.s5 .dc .dlinkhint{ font-size:11px; color:#949ba4; margin:-3px 0 7px 20px; line-height:1.4; }
.s5 .dc .dbtns{ display:flex; flex-wrap:wrap; gap:7px; }
.s5 .dc .dbtn{ border:0; background:#4e5058; color:#fff; font-size:12px; font-weight:600; padding:7px 12px; border-radius:6px; }
.s5 .dc .dbtn.add{ background:transparent; border:1px solid #4e5058; color:#b5bac1; border-style:dashed; }

.s5 .btn-text{ background:transparent; border:0; color:var(--ink-2); font-family:var(--font); font-weight:600; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:6px 0; }
.s5 .btn-text.danger{ color:var(--err); }
.s5 .btn-text svg{ width:15px; height:15px; }

/* --- publish bar (ported; old .publish markup) --- */

/* ====================================================== PUBLISH BAR */
.s5 .publish{ flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:12px 20px; border-top:1px solid var(--line); background:var(--card); }
.s5 .pchange{ display:flex; align-items:center; gap:14px; }
.s5 .pchange .stat{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-2); }
.s5 .pchange .stat b{ color:var(--ink); font-size:15px; font-weight:800; }
.s5 .pdivider{ width:1px; height:22px; background:var(--line-2); }
.s5 .pwarn{ display:flex; align-items:center; gap:7px; color:var(--err); font-size:12.5px; font-weight:700; background:var(--err-bg); border:1px solid var(--err-bd); padding:6px 12px; border-radius:var(--r-pill); }
.s5 .pwarn svg{ width:14px; height:14px; }
.s5 .pright{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.s5 .btn{ font-family:var(--font); font-weight:700; font-size:13.5px; padding:10px 18px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); border-radius:var(--r-md); cursor:pointer; transition:transform .1s, background .12s; }
.s5 .btn:hover{ background:var(--card-2); }
.s5 .btn:active{ transform:scale(.98); }
.s5 .btn-primary{ background:var(--brand); color:var(--on-brand); border-color:transparent; box-shadow:var(--shadow-sm); }
.s5 .btn-primary:hover{ background:var(--brand-press); }
.s5 .btn-danger{ background:var(--err); color:#fff; border-color:transparent; }
.s5 .btn-danger:hover{ background:var(--err); filter:brightness(1.05); }
.s5 .btn:disabled{ opacity:.4; cursor:not-allowed; }

.s5 .ptarget{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; margin-right:2px; }
.s5 .ptarget .ptlab{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.s5 .ptarget .ptval{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.s5 .ptarget.live .ptval{ color:var(--err); }

.s5 .publish{ height:64px; padding:0 22px; }
.s5 .btn-primary{ background:var(--ink); color:var(--card); border-color:var(--ink); box-shadow:none; }
.s5 .btn-primary:hover{ background:var(--ink); opacity:.9; }


/* --- scrim / sheets / review (ported; old sheet structure) --- */

/* ====================================================== REVIEW SHEET */
.s5 .scrim{ position:fixed; inset:0; background:rgba(10,12,18,.55); backdrop-filter:blur(3px); display:none; z-index:50; }
.s5 .scrim.on{ display:grid; place-items:center; animation:fade .15s ease; }
@keyframes fade{ from{ opacity:0; } }
/* fb5 sheet anatomy: .shead / .sbody / .sacts (fb5.css) + app-frame sizing */
.s5 .sheet{ width:640px; max-height:86vh; padding:0; display:flex; flex-direction:column; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); }
.s5 .sheet h2{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 5px; }
.s5 .sheet .ssub{ font-size:13.5px; color:var(--ink-2); margin-bottom:4px; line-height:1.5; }
.s5 .sheet .shead{ padding:24px 28px 8px; flex:0 0 auto; }
.s5 .sheet .sbody{ padding:14px 28px 20px; overflow:auto; display:flex; flex-direction:column; gap:14px; min-height:0; }
.s5 .sheet .sbody > *{ flex:0 0 auto; }
.s5 .sheet .sacts{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:15px 28px; border-top:1px solid var(--line); background:var(--card-2); }
/* the setup wizard nests shead/sbody/sacts inside per-step panels */
.s5 .setupsheet{ display:block; overflow:auto; }
.s5 .setupsheet .setup-panel{ display:flex; flex-direction:column; min-height:0; }
.s5 .sheet .sbody .targetline, .s5 .sheet .sbody .blocker, .s5 .sheet .sbody .ripple,
.s5 .sheet .sbody .formfield, .s5 .sheet .sbody .liveack{ margin-bottom:0; }
.s5 .targetline{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:var(--r-md); padding:11px 15px; margin-bottom:18px; background:var(--card-2); }
.s5 .targetline .ptlab{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.s5 .targetline .ptval{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:7px; }
.s5 .targetline.live{ border-color:var(--err-bd); background:var(--err-bg); }
.s5 .targetline.live .ptval{ color:var(--err); }

.s5 .blocker{ border:1px solid var(--err-bd); background:var(--err-bg); border-radius:var(--r-md); padding:15px 17px; margin-bottom:20px; }
.s5 .blocker h3{ font-size:15px; font-weight:800; color:var(--err); display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.s5 .blocker h3 svg{ width:17px; height:17px; }
.s5 .blocker p{ font-size:13px; color:var(--ink-2); line-height:1.55; margin:0 0 12px; }
.s5 .blocker p b{ color:var(--ink); }
.s5 .blocker .acts{ display:flex; gap:8px; flex-wrap:wrap; }
.s5 .mini{ border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-pill); padding:7px 14px; font-family:var(--font); font-weight:700; font-size:12px; cursor:pointer; color:var(--ink); }
.s5 .mini:hover{ background:var(--card-2); }
.s5 .mini.solid{ background:var(--err); color:#fff; border-color:transparent; }
.s5 .dgroup{ margin-bottom:16px; }
.s5 .dgroup .gh{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.s5 .drow{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:8px; background:var(--card); }
.s5 .drow .vtag{ font-size:9.5px; font-weight:800; letter-spacing:.03em; padding:4px 8px; border-radius:var(--r-sm); flex:0 0 auto; margin-top:1px; }
.s5 .vtag.add{ color:var(--live); background:var(--live-bg); }
.s5 .vtag.upd{ color:var(--edit); background:var(--edit-bg); }
.s5 .vtag.link{ color:var(--sel); background:var(--sel-bg); }
.s5 .drow .dmain{ font-size:14px; font-weight:600; } .drow .dmain b{ font-weight:800; }
.s5 .drow .dsub{ font-size:12px; color:var(--ink-3); margin-top:3px; }

.s5 .liveack{ display:none; align-items:center; gap:13px; border:1px solid var(--err-bd); background:var(--err-bg); border-radius:var(--r-md); padding:13px 16px; margin-bottom:16px; font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.s5 .liveack.on{ display:flex; }
.s5 .liveack b{ color:var(--err); }
.s5 .ackbox{ width:26px; height:26px; flex:0 0 auto; border:1.5px solid var(--err-bd); border-radius:var(--r-sm); background:var(--card); cursor:pointer; display:grid; place-items:center; font-size:15px; color:#fff; }
.s5 .ackbox.checked{ background:var(--err); border-color:var(--err); }
.s5 .sheet-acts{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

/* --- publish progress (ported) --- */

/* ====================================================== PUBLISH PROGRESS */
.s5 .scrim .progress-sheet{ display:none; }
.s5 .scrim.publishing .sheet{ display:none; }
.s5 .scrim.publishing .progress-sheet{ display:block; }
.s5 .progress-sheet{ width:540px; max-height:86vh; overflow:auto; padding:26px 28px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.s5 .pp-head{ display:flex; align-items:center; gap:13px; margin-bottom:4px; }
.s5 .pp-mark{ width:38px; height:38px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:var(--brand-press); }
.s5 .pp-mark .ring{ width:21px; height:21px; border-radius:50%; border:2.6px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin .8s linear infinite; }
.s5 .pp-mark .tick{ display:none; }
.s5 .progress-sheet.complete .pp-mark{ background:var(--live); }
.s5 .progress-sheet.complete .pp-mark .ring{ display:none; }
.s5 .progress-sheet.complete .pp-mark .tick{ display:block; width:20px; height:20px; color:#fff; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.s5 .pp-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; }
.s5 .pp-sub{ font-size:13px; color:var(--ink-2); margin:2px 0 20px 51px; line-height:1.5; }
.s5 .pp-sub b{ color:var(--ink); }

.s5 .pbar{ height:9px; border-radius:var(--r-pill); background:var(--card-2); border:1px solid var(--line); overflow:hidden; }
.s5 .pbar > i{ display:block; height:100%; width:0%; background:var(--brand); border-radius:var(--r-pill); transition:width .45s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
.s5 .progress-sheet.complete .pbar > i{ background:var(--live); }
.s5 .pp-meter{ display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:600; color:var(--ink-3); margin:9px 1px 20px; }
.s5 .pp-meter b{ color:var(--ink); font-weight:700; }

.s5 .psteps{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.s5 .pstep{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; background:var(--card); opacity:.5; transition:opacity .25s, border-color .25s, background .25s; }
.s5 .pstep.active{ opacity:1; border-color:var(--sel-bd); background:var(--sel-bg); }
.s5 .pstep.done{ opacity:1; }
.s5 .pstep .pico{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; }
.s5 .pstep .pico .pdotpend{ width:11px; height:11px; border-radius:50%; border:2px solid var(--line-2); }
.s5 .pstep .pico .pspin{ display:none; width:18px; height:18px; border-radius:50%; border:2.4px solid var(--sel-bg); border-top-color:var(--sel); animation:spin .8s linear infinite; }
.s5 .pstep .pico .pcheck{ display:none; width:24px; height:24px; color:#fff; }
.s5 .pstep.active .pico .pdotpend{ display:none; }
.s5 .pstep.active .pico .pspin{ display:block; }
.s5 .pstep.done .pico{ background:var(--live); }
.s5 .pstep.done .pico .pdotpend, .s5 .pstep.done .pico .pspin{ display:none; }
.s5 .pstep.done .pico .pcheck{ display:block; }
.s5 .pstep .ptxt{ flex:1; min-width:0; }
.s5 .pstep .ptt{ font-size:13.5px; font-weight:700; }
.s5 .pstep .pss{ font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.s5 .pstep .ptag{ font-size:9.5px; font-weight:800; letter-spacing:.03em; padding:3px 8px; border-radius:var(--r-sm); flex:0 0 auto; }
.s5 .pp-foot{ display:flex; justify-content:flex-end; margin-top:18px; }

/* --- toast + scrollbars (ported) --- */

/* ====================================================== TOAST */
.s5 .toast{ position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(16px); background:var(--ink); color:var(--bg); font-family:var(--font); font-weight:600; font-size:13.5px; padding:13px 20px; border-radius:var(--r-md); opacity:0; pointer-events:none; transition:all .25s var(--ease,ease); z-index:60; display:flex; align-items:center; gap:9px; box-shadow:var(--shadow-lg); }
.s5 .toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.s5 .toast svg{ width:17px; height:17px; color:var(--live); }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:3px solid var(--bg); }
.s5 .editbody::-webkit-scrollbar-thumb, .s5 .sheet::-webkit-scrollbar-thumb{ border-color:var(--card); }

/* --- v4 additions: focus, search, filters, noresults --- */

/* ---- focus-visible outlines everywhere ---- */
:focus{ outline:none; }
:focus-visible{ outline:2.5px solid var(--sel); outline-offset:2px; border-radius:6px; }
.s5 .gnode:focus-visible, .s5 .fnode:focus-visible, .s5 .lrow:focus-visible, .s5 .bcard:focus-visible{ outline-offset:3px; }
.s5 .ackbox:focus-visible{ outline-offset:3px; }

/* ====================================================== SEARCH + FILTERS */
.s5 .searchwrap{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.s5 .search.input-live{ display:flex; align-items:center; gap:8px; padding:0 13px; width:230px; }
.s5 .search.input-live svg{ flex:0 0 auto; }
.s5 .search.input-live input{ border:0; background:transparent; font-family:var(--font); font-size:13px; color:var(--ink); width:100%; padding:9px 0; }
.s5 .search.input-live input:focus{ outline:none; }
.s5 .search.input-live input::placeholder{ color:var(--ink-3); }
.s5 .search.input-live.has{ border-color:var(--sel); box-shadow:var(--ring); }
.s5 .search .clr{ border:0; background:transparent; color:var(--ink-3); cursor:pointer; font-size:15px; line-height:1; padding:2px; display:none; }
.s5 .search.input-live.has .clr{ display:block; }

.s5 .filters{ display:flex; align-items:center; gap:6px; padding:0 22px 6px; flex-wrap:wrap; }
.s5 .filters .fl{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-right:2px; }
.s5 .fchip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-pill); padding:5px 12px; font-family:var(--font); font-weight:600; font-size:12px; color:var(--ink-2); cursor:pointer; }
.s5 .fchip:hover{ border-color:var(--ink-3); color:var(--ink); }
.s5 .fchip .dot{ width:7px; height:7px; }
.s5 .fchip.on{ background:var(--sel-bg); border-color:var(--sel-bd); color:var(--sel); }
.s5 .fchip .ct{ font-size:11px; color:var(--ink-3); font-weight:700; }
.s5 .fchip.on .ct{ color:var(--sel); }

.s5 .noresults{ display:none; text-align:center; padding:60px 20px; color:var(--ink-3); }
.s5 .noresults.on{ display:block; }
.s5 .noresults .nr-ic{ width:46px; height:46px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:var(--card-2); border:1px solid var(--line); }
.s5 .noresults .nr-ic svg{ width:22px; height:22px; color:var(--ink-3); }
.s5 .noresults h3{ font-size:16px; font-weight:800; color:var(--ink); margin:0 0 4px; }
.s5 .noresults p{ font-size:13px; color:var(--ink-2); margin:0; }
.s5 .noresults .mini{ margin-top:14px; }

/* --- v4: history, empty state --- */

/* ====================================================== HISTORY PANEL */
.s5 .histpanel{ display:none; }
.s5 .histpanel.on{ display:block; }
/* Activity feed */
.s5 .actfilters{ display:flex; align-items:center; gap:8px; margin:0 0 16px; flex-wrap:wrap; }
.s5 .actfilters .fl{ font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; margin-right:3px; }
.s5 .actlist{ display:flex; flex-direction:column; gap:2px; max-width:760px; }
.s5 .actrow{ display:flex; align-items:flex-start; gap:12px; padding:13px 4px; border-bottom:1px solid var(--line); }
.s5 .actrow:last-child{ border-bottom:0; }
.s5 .actrow > .dot{ width:9px; height:9px; margin-top:5px; flex:0 0 auto; }
.s5 .actrow .act-main{ min-width:0; flex:1; }
.s5 .actrow .act-sum{ font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.s5 .actrow .act-meta{ display:flex; align-items:center; gap:8px; margin-top:3px; font-size:12px; color:var(--ink-3); }
.s5 .actrow .act-who{ font-weight:700; color:var(--ink-2); }
.s5 .actrow .act-who::after{ content:'·'; margin-left:8px; color:var(--ink-3); font-weight:400; }
.s5 .histpanel .hh{ font-size:13px; color:var(--ink-2); margin:0 2px 16px; font-weight:500; }
.s5 .histlist{ position:relative; padding-left:26px; }
.s5 .histlist::before{ content:''; position:absolute; left:7px; top:6px; bottom:18px; width:2px; background:var(--line-2); }
.s5 .hitem{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.s5 .hitem::before{ content:''; position:absolute; left:-23px; top:18px; width:12px; height:12px; border-radius:50%; background:var(--live); border:2.5px solid var(--card); box-shadow:0 0 0 1px var(--live-bd); }
.s5 .hitem.reverted::before{ background:var(--ink-3); box-shadow:0 0 0 1px var(--line-2); }
.s5 .hitem .htop{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.s5 .hitem .htime{ font-size:13.5px; font-weight:800; letter-spacing:-.01em; }
.s5 .hitem .hsrv{ font-size:11px; font-weight:700; color:var(--ink-3); display:flex; align-items:center; gap:5px; }
.s5 .hitem .hsrv .dot{ width:7px; height:7px; }
.s5 .hitem .hrevert{ margin-left:auto; }
.s5 .hitem .hsum{ font-size:12.5px; color:var(--ink-2); line-height:1.55; }
.s5 .hitem .hsum b{ color:var(--ink); font-weight:700; }
.s5 .hitem .htags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.s5 .htag{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--r-sm); letter-spacing:.02em; }
.s5 .htag.add{ color:var(--live); background:var(--live-bg); }
.s5 .htag.upd{ color:var(--edit); background:var(--edit-bg); }
.s5 .htag.link{ color:var(--sel); background:var(--sel-bg); }
.s5 .hitem.reverted{ opacity:.62; }
.s5 .hitem .revbadge{ display:none; font-size:10px; font-weight:800; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase; }
.s5 .hitem.reverted .revbadge{ display:inline; }
.s5 .hitem.reverted .hrevert{ display:none; }
.s5 .histempty{ text-align:center; padding:50px 20px; color:var(--ink-3); }
.s5 .histempty h3{ font-size:16px; font-weight:800; color:var(--ink); margin:0 0 4px; }

/* ====================================================== EMPTY / FIRST-RUN */
.s5 .emptystate{ display:none; }
.s5 .emptystate.on{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 24px; }
.s5 .emptystate .es-art{ width:160px; height:120px; border-radius:var(--r-lg); border:1.5px dashed var(--line-2); display:grid; place-items:center; background:
  radial-gradient(var(--grid) 1.3px, transparent 1.3px) 0 0 / 18px 18px, var(--canvas); margin-bottom:22px; }
.s5 .emptystate .es-art svg{ width:46px; height:46px; color:var(--ink-3); }
.s5 .emptystate h2{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
.s5 .emptystate p{ font-size:14px; color:var(--ink-2); max-width:430px; line-height:1.6; margin:0 0 22px; }
.s5 .emptystate .es-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:var(--on-brand); border:0; border-radius:var(--r-md); padding:12px 22px; font-family:var(--font); font-weight:700; font-size:14.5px; cursor:pointer; box-shadow:var(--shadow-md); }
.s5 .emptystate .es-cta svg{ width:17px; height:17px; }
.s5 .emptystate .es-ctarow{ display:flex; align-items:center; gap:12px; }
.s5 .emptystate .es-alt{ display:inline-flex; align-items:center; gap:7px; background:transparent; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-md); padding:12px 18px; font-family:var(--font); font-weight:700; font-size:14px; cursor:pointer; }
.s5 .emptystate .es-alt:hover{ border-color:var(--ink-3); color:var(--ink); }
.s5 .emptystate .es-steps{ display:flex; gap:26px; margin-top:34px; }
.s5 .emptystate .es-step{ display:flex; flex-direction:column; align-items:center; gap:7px; max-width:130px; }
.s5 .emptystate .es-step .n{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:12px; background:var(--card-2); border:1px solid var(--line); color:var(--ink-2); }
.s5 .emptystate .es-step .t{ font-size:12px; color:var(--ink-3); line-height:1.4; font-weight:500; }

/* --- v4: edit panel type/save/tags, discord list --- */

/* ====================================================== EDIT PANEL: type + save + tags + channel */
.s5 .typeseg{ display:flex; gap:4px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md); padding:3px; }
.s5 .typeseg button{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; border:0; background:transparent; color:var(--ink-2); border-radius:7px; padding:8px 6px; cursor:pointer; font-family:var(--font); font-weight:600; font-size:12px; }
.s5 .typeseg button .tbadge{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; flex:0 0 auto; background:var(--line); color:var(--ink-2); }
.s5 .typeseg button.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.s5 .typeseg button.on[data-type="question"] .tbadge{ background:var(--brand); color:var(--on-brand); }
.s5 .typeseg button.on[data-type="fix"] .tbadge{ background:var(--live); color:#fff; }
.s5 .typeseg button.on[data-type="ticket"] .tbadge{ background:var(--sel); color:#fff; }
.s5 .typeseg button.on[data-type="template"] .tbadge{ background:#7C5CFC; color:#fff; }

.s5 .tags{ display:flex; flex-wrap:wrap; gap:7px; }
.s5 .tagchip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-pill); padding:5px 11px; font-size:12px; font-weight:600; color:var(--ink-2); cursor:pointer; }
.s5 .tagchip:hover{ border-color:var(--ink-3); }
.s5 .tagchip.on{ background:var(--sel-bg); border-color:var(--sel-bd); color:var(--sel); }
.s5 .tagchip .x{ font-size:13px; line-height:1; }
.s5 .tagreq{ font-size:11px; font-weight:600; color:var(--edit); margin-top:7px; display:none; }
.s5 .tagreq.on{ display:block; }

.s5 .savebar{ display:flex; align-items:center; gap:11px; padding:13px 20px; border-top:1px solid var(--line); background:var(--card-2); flex:0 0 auto; }
.s5 .savebtn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); border-radius:var(--r-md); padding:9px 16px; font-family:var(--font); font-weight:700; font-size:13px; cursor:pointer; }
.s5 .savebtn:hover{ background:var(--card-2); border-color:var(--ink-3); }
.s5 .savebtn:disabled{ opacity:.45; cursor:default; }
.s5 .savebtn svg{ width:15px; height:15px; }
.s5 .saveind{ font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:7px; font-weight:500; }
.s5 .saveind .sdot{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); }
.s5 .saveind.unsaved{ color:var(--edit); font-weight:600; }
.s5 .saveind.unsaved .sdot{ background:var(--edit); }
.s5 .saveind.saved .sdot{ background:var(--live); }
.s5 .editkind-badge{ font-size:9px; font-weight:800; letter-spacing:.05em; padding:2px 7px; border-radius:var(--r-sm); text-transform:uppercase; }
.s5 .editkind-badge.question{ color:var(--on-brand); background:var(--brand); }
.s5 .editkind-badge.fix{ color:#fff; background:var(--live); }
.s5 .editkind-badge.ticket{ color:#fff; background:var(--sel); }
.s5 .editkind-badge.template{ color:#fff; background:#7C5CFC; }

/* empty editor (nothing selected) */
.s5 .editempty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 28px; color:var(--ink-3); }
.s5 .editempty svg{ width:38px; height:38px; margin-bottom:14px; color:var(--ink-3); }
.s5 .editempty h3{ font-size:15px; font-weight:800; color:var(--ink-2); margin:0 0 5px; }
.s5 .editempty p{ font-size:13px; line-height:1.5; margin:0; max-width:240px; }

/* ---- honest forum linked-list (no fake native buttons) ---- */
.s5 .dc .dlinklist{ display:flex; flex-direction:column; gap:3px; }
.s5 .dc .dlink{ display:flex; align-items:center; gap:8px; font-size:13px; color:#00a8fc; font-weight:600; padding:3px 0; }
.s5 .dc .dlink .arr{ color:#949ba4; font-weight:400; }
.s5 .dc .dlink.add{ color:#00a8fc; opacity:.8; }
.s5 .dc .dnote{ font-size:10.5px; color:#949ba4; margin-top:9px; display:flex; align-items:center; gap:6px; line-height:1.4; }
.s5 .dc .dnote svg{ width:12px; height:12px; flex:0 0 auto; }
.s5 .dc .dtag{ display:inline-block; font-size:10px; font-weight:600; color:#dbdee1; background:#3f4147; border-radius:4px; padding:2px 8px; margin:0 5px 6px 0; }
.s5 .dc .dticket{ display:flex; align-items:center; gap:8px; background:#3a3d44; border:1px solid #4e5058; border-radius:7px; padding:9px 12px; margin-top:4px; font-size:12.5px; color:#dbdee1; }
.s5 .dc .dticket svg{ width:15px; height:15px; color:#00a8fc; flex:0 0 auto; }

/* --- v4: channel picker --- */

/* ====================================================== CHANNEL PICKER (publish bar + sheets) */
.s5 .chanpick{ position:relative; }
.s5 .chanbtn{ display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:7px 11px; font-family:var(--font); font-weight:700; font-size:12.5px; color:var(--ink); cursor:pointer; }
.s5 .chanbtn:hover{ border-color:var(--ink-3); }
.s5 .chanbtn .hash{ color:var(--brand-press); font-weight:800; }
body.dark .chanbtn .hash{ color:var(--brand); }
.s5 .chanbtn .caret{ font-size:9px; color:var(--ink-3); }
.s5 .chanmenu{ position:absolute; right:0; bottom:42px; width:260px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:6px; z-index:48; display:none; }
.s5 .chanmenu.on{ display:block; animation:pop .14s ease; }
.s5 .chanmenu .mh{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); padding:7px 9px; font-weight:700; }
.s5 .chanitem{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--r-sm); cursor:pointer; }
.s5 .chanitem:hover{ background:var(--card-2); }
.s5 .chanitem.cur{ background:var(--sel-bg); }
.s5 .chanitem .hash{ color:var(--ink-3); font-weight:800; font-size:15px; }
.s5 .chanitem .ci{ flex:1; min-width:0; }
.s5 .chanitem .cn{ font-size:13px; font-weight:700; }
.s5 .chanitem .cmeta{ font-size:11px; color:var(--ink-3); }
.s5 .chanitem .creq{ font-size:9px; font-weight:700; color:var(--edit); background:var(--edit-bg); border-radius:var(--r-pill); padding:2px 7px; }
.s5 .chanitem .check{ color:var(--sel); font-weight:800; width:13px; }

/* --- v4: new-post / delete / resolver sheets --- */

/* ====================================================== NEW-POST / DELETE / RESOLVER SHEETS */
.s5 .formfield{ margin-bottom:17px; }
.s5 .formfield > label{ display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:7px; }
.s5 .formfield > label .req{ color:var(--err); margin-left:3px; }
.s5 .formfield .hinttext{ font-size:11.5px; color:var(--ink-3); margin-top:6px; font-weight:500; }
.s5 .parentpick{ width:100%; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-md); padding:11px 12px; font-family:var(--font); font-size:14px; color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:9px; text-align:left; }
.s5 .parentpick.empty{ color:var(--ink-3); }
.s5 .parentpick.invalid{ border-color:var(--err-bd); box-shadow:0 0 0 3px var(--err-bg); }
.s5 .parentpick:focus-visible{ border-color:var(--sel); }
.s5 .parentpick .pp-caret{ margin-left:auto; color:var(--ink-3); font-size:10px; }
.s5 select.parentpick{ appearance:none; }
.s5 .sheet-sub2{ font-size:13px; color:var(--ink-2); margin:-6px 0 18px; line-height:1.5; }
.s5 .minisheet .sheet{ width:520px; }

.s5 .ripple{ border:1px solid var(--edit-bd); background:var(--edit-bg); border-radius:var(--r-md); padding:15px 17px; margin-bottom:18px; }
.s5 .ripple.safe{ border-color:var(--live-bd); background:var(--live-bg); }
.s5 .ripple h3{ font-size:14px; font-weight:800; color:var(--edit); display:flex; align-items:center; gap:8px; margin:0 0 9px; }
.s5 .ripple.safe h3{ color:var(--live); }
.s5 .ripple h3 svg{ width:16px; height:16px; }
.s5 .ripple p{ font-size:13px; color:var(--ink-2); line-height:1.55; margin:0 0 11px; }
.s5 .ripple p b{ color:var(--ink); }
.s5 .ripple .rkids{ display:flex; flex-direction:column; gap:7px; margin-bottom:4px; }
.s5 .ripple .rkid{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 11px; }
.s5 .ripple .rkid .dot{ width:8px; height:8px; }
.s5 .repoint{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2); }
.s5 .repoint label{ display:block; font-size:11px; font-weight:700; color:var(--ink-2); margin-bottom:8px; }

.s5 .resolve-list{ display:flex; flex-direction:column; gap:8px; margin:6px 0 4px; max-height:280px; overflow:auto; }
.s5 .resolve-opt{ display:flex; align-items:center; gap:11px; border:1px solid var(--line-2); border-radius:var(--r-md); padding:11px 13px; cursor:pointer; background:var(--card); }
.s5 .resolve-opt:hover{ border-color:var(--ink-3); background:var(--card-2); }
.s5 .resolve-opt.sel{ border-color:var(--sel); box-shadow:0 0 0 3px var(--sel-bg); }
.s5 .resolve-opt .ro-radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line-2); flex:0 0 auto; display:grid; place-items:center; }
.s5 .resolve-opt.sel .ro-radio{ border-color:var(--sel); }
.s5 .resolve-opt.sel .ro-radio::after{ content:''; width:9px; height:9px; border-radius:50%; background:var(--sel); }
.s5 .resolve-opt .ro-main{ flex:1; min-width:0; }
.s5 .resolve-opt .ro-t{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; }
.s5 .resolve-opt .ro-s{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }

/* ---- demote "publish anyway" to a quiet text link ---- */
.s5 .publish-anyway-link{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:0; color:var(--ink-3); font-family:var(--font); font-weight:600; font-size:12px; text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:4px 0; }
.s5 .publish-anyway-link:hover{ color:var(--err); }
.s5 .blocker .acts.resolved{ opacity:.6; }
.s5 .blocker.cleared{ border-color:var(--live-bd); background:var(--live-bg); }

/* --- v4: partial failure + toast undo --- */

/* ====================================================== PARTIAL FAILURE state */
.s5 .pstep.failed{ opacity:1; border-color:var(--err-bd); background:var(--err-bg); }
.s5 .pstep.failed .pico{ background:var(--err); }
.s5 .pstep.failed .pico .pdotpend, .s5 .pstep.failed .pico .pspin, .s5 .pstep.failed .pico .pcheck{ display:none; }
.s5 .pstep.failed .pico .pcross{ display:block; }
.s5 .pstep .pico .pcross{ display:none; width:22px; height:22px; color:#fff; }
.s5 .pstep.skipped{ opacity:.55; }
.s5 .pstep.skipped .pss::after{ content:' · skipped'; color:var(--ink-3); }
.s5 .progress-sheet.failed .pp-mark{ background:var(--err); }
.s5 .progress-sheet.failed .pp-mark .ring{ display:none; }
.s5 .progress-sheet.failed .pp-mark .tick{ display:none; }
.s5 .progress-sheet.failed .pp-mark .xmark{ display:block; width:20px; height:20px; color:#fff; }
.s5 .pp-mark .xmark{ display:none; }
.s5 .progress-sheet.failed .pbar > i{ background:var(--err); }
.s5 .failsum{ display:none; border:1px solid var(--err-bd); background:var(--err-bg); border-radius:var(--r-md); padding:14px 16px; margin:16px 0 4px; }
.s5 .progress-sheet.failed .failsum{ display:block; }
.s5 .failsum h4{ font-size:13.5px; font-weight:800; color:var(--err); margin:0 0 6px; display:flex; align-items:center; gap:7px; }
.s5 .failsum h4 svg{ width:15px; height:15px; }
.s5 .failsum p{ font-size:12.5px; color:var(--ink-2); line-height:1.55; margin:0; }
.s5 .failsum p b{ color:var(--ink); }

/* toast undo */
.s5 .toast .undo{ margin-left:6px; background:transparent; border:0; color:var(--brand); font-family:var(--font); font-weight:800; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:2px 4px; }
.s5 .toast.err svg{ color:var(--err); }
.s5 .toast .tx{ display:flex; align-items:center; gap:9px; }

/* ===== fb5 view support (rules the fb5 kit lacks for the live canvas views) ===== */
.s5 .version{ position:relative; }
.s5 .wires path.dim{ opacity:.12; }
.s5 .wires circle.dim{ opacity:.12; }
.s5 .node{ transition:transform .12s, box-shadow .12s; }
.s5 .node:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.s5 .node .lstripe{ background:var(--line-2); }
.s5 .node.orphan{ border-style:dashed; border-color:var(--err-bd); background:var(--err-bg); }
.s5 .node.dim, .s5 .lrow.dim, .s5 .bcard.dim{ opacity:.25; filter:saturate(.4); transition:opacity .15s ease; }
.s5 .node.hit{ box-shadow:0 0 0 3px var(--brand), var(--shadow-md); }
.s5 .node .nmeta .tagx{ padding:1px 8px; }
/* collapse toggle (right edge on the node map, bottom edge on the flowchart) */
.s5 .ntoggle{ position:absolute; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; font-size:12px; line-height:1; box-shadow:var(--shadow-sm); z-index:3; padding:0; transition:transform .12s, background .12s; }
.s5 .ntoggle:hover{ background:var(--card-2); color:var(--ink); border-color:var(--ink-3); }
.s5 .ntoggle svg{ width:12px; height:12px; transition:transform .15s; }
.s5 .ntoggle.collapsed svg{ display:none; }
.s5 .node.nm .ntoggle{ right:-11px; top:50%; transform:translateY(-50%); }
.s5 .node.fl .ntoggle{ left:50%; bottom:-11px; transform:translateX(-50%); }
.s5 .ntoggle .cct{ display:none; }
.s5 .ntoggle.collapsed{ width:auto; min-width:22px; padding:0 7px; border-radius:var(--r-pill); border-color:var(--brand); background:var(--brand); color:var(--on-brand); font-weight:800; font-size:10px; }
.s5 .ntoggle.collapsed .cct{ display:inline; }
/* board extras fb5 lacks */
.s5 .bcard{ cursor:pointer; transition:transform .1s, box-shadow .12s; }
.s5 .bcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.s5 .bcard.sel{ border-color:var(--sel); box-shadow:0 0 0 3px var(--sel-bg), var(--shadow-sm); }
.s5 .bcard .errline{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--err); padding-left:8px; }
.s5 .bcard .errline svg{ width:12px; height:12px; flex:0 0 auto; }
.s5 .lane.attn h4 .ct{ color:var(--err); background:var(--card); border-color:var(--err-bd); }
.s5 .lane .lempty{ font-size:11.5px; color:var(--ink-3); font-style:italic; padding:6px 2px; }
.s5 .board{ align-items:start; height:auto; }