/* Clariti Results Intake. Ported from the approved clickable prototype. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url(../vendor/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  box-sizing:border-box;
  --paper:#EDF1F3;--surface:#FFFFFF;--sunk:#E3EAED;--ink:#10262F;--muted:#55707B;--line:#CBD7DC;
  --top:#10262F;--topink:#E9F0F2;
  --ai:#6F55A3;--info:#1F6F8B;--warn:#9A6B0C;--pass:#2A7550;--block:#B3261E;
  --sans:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0D1A20;--surface:#14262E;--sunk:#0A1419;--ink:#E3ECEF;--muted:#91A9B2;--line:#2A434E;--top:#081217;--topink:#E3ECEF;
  --ai:#AE9ADB;--info:#62B6D2;--warn:#E0B552;--pass:#6CC498;--block:#F0766C;}}
:root[data-theme="dark"]{
  --paper:#0D1A20;--surface:#14262E;--sunk:#0A1419;--ink:#E3ECEF;--muted:#91A9B2;--line:#2A434E;--top:#081217;--topink:#E3ECEF;
  --ai:#AE9ADB;--info:#62B6D2;--warn:#E0B552;--pass:#6CC498;--block:#F0766C;}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.45;-webkit-text-size-adjust:100%}
h1{font-size:1.35rem;margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:1rem;margin:0 0 8px;font-weight:650}
h3{font-size:.82rem;margin:0 0 6px;font-weight:600;color:var(--muted)}
p{margin:.4rem 0}
a{color:var(--info)}
main a:not([class]){text-decoration:underline}
.mono{font-family:var(--mono);font-size:.92em}
.muted{color:var(--muted)} .small{font-size:.84rem}
:focus-visible{outline:3px solid var(--info);outline-offset:1px;border-radius:4px}
[hidden]{display:none!important}

.top{background:var(--top);color:var(--topink);position:sticky;top:0;z-index:30}
.top .in{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:0 14px;overflow-x:auto;scrollbar-width:none}
.top .in::-webkit-scrollbar{display:none}
.envbar{background:color-mix(in srgb,var(--warn) 18%,var(--paper));border-bottom:1px solid var(--line);font-size:.8rem;text-align:center;padding:4px 10px}

main{max-width:1360px;margin:0 auto;padding:18px 14px 60px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin-bottom:14px}
.head .sp{flex:1}
.crumb{font-size:.84rem;margin-bottom:4px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px}
.card.tight{padding:0;overflow:hidden}
.grid{display:grid;gap:12px}
@media (min-width:860px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.stat b{font-size:1.5rem;display:block;font-weight:700;letter-spacing:-.02em}
.stat span{color:var(--muted);font-size:.84rem}
a.statbtn,button.statbtn{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;text-decoration:none;display:block}
.statbtn.on{border-color:var(--info);box-shadow:0 0 0 2px color-mix(in srgb,var(--info) 30%,transparent)}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;min-width:640px}
table.t th{text-align:left;font-size:.76rem;font-weight:600;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--sunk);white-space:nowrap}
table.t td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:color-mix(in srgb,var(--info) 6%,transparent)}
table.t tr.sel td{background:color-mix(in srgb,var(--warn) 14%,transparent)}
table.t td.grp{background:var(--sunk);font-weight:600;font-size:.8rem;color:var(--muted)}
td.num,th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
tr.rowlink a.cover{color:inherit;text-decoration:none}

.chip{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 9%,transparent);white-space:nowrap;margin:1px 3px 1px 0}
.c-block{--c:var(--block)} .c-warn{--c:var(--warn)} .c-pass{--c:var(--pass)} .c-info{--c:var(--info)} .c-ai{--c:var(--ai)} .c-mute{--c:var(--muted)}
.btn{font:inherit;font-weight:600;font-size:.86rem;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 13px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block;line-height:1.3}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--pass);border-color:var(--pass);color:#fff}
.btn.info{background:var(--info);border-color:var(--info);color:#fff}
.btn.danger{color:var(--block);border-color:var(--block)}
.btn.sm{padding:3px 9px;font-size:.78rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.htmx-request .btn,.btn.htmx-request{opacity:.6;pointer-events:none}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sp{flex:1}
select,input[type=text],input[type=number],input[type=password],input[type=search],input[type=file],textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:7px 9px;max-width:100%}
textarea{width:100%;font-family:var(--mono);font-size:.8rem;line-height:1.5;min-height:230px}
label.f{display:block;font-size:.78rem;color:var(--muted);margin-bottom:3px}
.w100{width:100%}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:9px 13px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.88rem;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--ink);border-bottom-color:var(--info)}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:.9rem}
dl.kv dt{color:var(--muted)} dl.kv dd{margin:0}
.alert{border-radius:8px;padding:9px 12px;margin-bottom:10px;border:1px solid var(--c);background:color-mix(in srgb,var(--c) 9%,var(--surface));font-size:.9rem}
.err{color:var(--block);font-size:.86rem;margin:6px 0}

/* workbench */
.bench{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.bench{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}.viewer{position:sticky;top:64px}}
.viewer{background:#4a555a;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.vbar{background:#2c3539;color:#dfe7ea;display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:.8rem;flex-wrap:wrap}
.vbar button{font:inherit;background:#3d484d;color:#fff;border:0;border-radius:5px;padding:3px 9px;cursor:pointer}
.vbar button.on{background:#62B6D2;color:#10262F}
.vbar .sp{flex:1}
.vtag{background:#3d484d;border-radius:999px;padding:2px 9px;font-size:.72rem;white-space:nowrap}
.vbody{display:flex;gap:8px;padding:10px;max-height:74vh;overflow:auto}
.thumbs{display:flex;flex-direction:column;gap:6px;flex:none}
.thumbs button{width:40px;height:52px;background:#f4f4f1;border:2px solid transparent;border-radius:3px;font:600 .7rem var(--mono);color:#333;cursor:pointer}
.thumbs button.on{border-color:#62B6D2}
.pagewrap{flex:1;min-width:0;display:flex;justify-content:flex-start;align-items:flex-start}
.pagewrap>.pagebox{margin:0 auto}
.pagebox{position:relative;box-shadow:0 2px 10px rgba(0,0,0,.4);background:#fff;flex:none}
.pagebox canvas{display:block}
.pagebox .hl{position:absolute;background:rgba(255,214,64,.42);outline:2px solid rgba(214,160,0,.9);border-radius:2px;pointer-events:none;mix-blend-mode:multiply}
.pagebox .region{position:absolute;border:2px dashed #1F6F8B;background:rgba(31,111,139,.12);pointer-events:none}
.pagebox.drawing{cursor:crosshair}
.vmsg{color:#dfe7ea;padding:30px;text-align:center;font-size:.9rem}
.pnl{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.pnl > header{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--sunk)}
.pnl > header h2{margin:0;font-size:.9rem;flex:1}
.pnl > .bd{padding:11px 12px}
.cand{border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-bottom:8px}
.cand.sel{border-color:var(--pass);background:color-mix(in srgb,var(--pass) 7%,transparent)}
.cand.excl{opacity:.7;border-style:dashed}
.find{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;padding:7px 0;border-top:1px solid var(--line);font-size:.88rem}
.find:first-child{border-top:0}
.old{text-decoration:line-through;color:var(--block);margin-right:5px}
.actions{position:sticky;bottom:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 -4px 14px rgba(0,0,0,.08)}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;padding:5px 0;font-size:.88rem;align-items:baseline}
.steps li i{width:10px;height:10px;border-radius:50%;background:var(--c,var(--line));display:inline-block;margin-top:4px}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.pg{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--c,var(--line));border-radius:6px;padding:7px 8px;font-size:.74rem;cursor:pointer;min-height:112px;text-align:left;font-family:inherit;color:inherit;text-decoration:none;display:block}
.pg b{font-size:1rem;display:block}
.pg.un{border-style:dashed;border-top-style:solid}
.pg.on{box-shadow:0 0 0 2px var(--info)}
pre.json{background:var(--sunk);border-radius:8px;padding:11px;font-family:var(--mono);font-size:.76rem;overflow-x:auto;margin:0;line-height:1.5;white-space:pre-wrap}
.chainv{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.82rem}
.chainv span,.chainv a{border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--surface);text-decoration:none;color:inherit}
.chainv .cur{border-color:var(--info);font-weight:600}
.pdfall{display:grid;gap:14px;background:#4a555a;padding:14px;border-radius:10px;justify-items:center}
.pdfall canvas{max-width:100%;height:auto;box-shadow:0 2px 10px rgba(0,0,0,.4);background:#fff}
.diff{font-family:var(--mono);font-size:.76rem;background:var(--sunk);border-radius:8px;padding:10px;overflow-x:auto;white-space:pre-wrap}
.diff .add{background:color-mix(in srgb,var(--pass) 22%,transparent);display:block}
.diff .del{background:color-mix(in srgb,var(--block) 20%,transparent);display:block}

.modalbg{position:fixed;inset:0;background:rgba(6,14,18,.55);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:8vh 12px;overflow:auto}
.modal{background:var(--surface);border-radius:12px;max-width:560px;width:100%;padding:18px;border:1px solid var(--line)}
.modal.wide{max-width:760px}
.modal h2{font-size:1.05rem}
#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:grid;gap:8px;max-width:92vw}
.toast{background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:9px;font-size:.88rem;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.toast.block{background:var(--block);color:#fff}
.pt{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--info);border-radius:10px;padding:10px 14px;margin-bottom:12px}
@media (min-width:860px){.pt{grid-template-columns:repeat(6,auto);justify-content:start;gap:4px 34px}}
.pt span{display:block;font-size:.74rem;color:var(--muted)}
.pt b{font-weight:600}
@media (max-width:700px){table.t.cards{min-width:0}table.t.cards thead{display:none}table.t.cards tr{display:block;padding:10px 12px;border-bottom:1px solid var(--line)}table.t.cards td{display:block;padding:2px 0;border:0;text-align:left}table.t.cards td[data-l]:not(:empty)::before{content:attr(data-l) ": ";color:var(--muted);font-size:.78rem;font-family:var(--sans)}}
.flowrow{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
@media (min-width:760px){.flowrow{grid-template-columns:repeat(4,1fr)}.flowstep:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;width:10px;height:10px;border-top:2px solid var(--line);border-right:2px solid var(--line);transform:translateY(-50%) rotate(45deg);background:var(--surface)}}
.flowstep{position:relative;font:inherit;color:inherit;text-align:left;background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:10px 12px;cursor:pointer;text-decoration:none;display:block}
.flowstep b{display:block;font-size:1.35rem}.flowstep span{color:var(--muted);font-size:.84rem}
/* The menu: a sidebar on wide screens, a panel from the left on narrow ones. */
.mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#3C93B3,#8A6FC4);display:inline-grid;place-items:center;color:#fff;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
/* Counts: blue is work waiting, amber is late or waiting to be set up, red is a problem. */
.badge{display:inline-block;min-width:20px;text-align:center;font-size:.7rem;font-weight:700;line-height:1.55;border-radius:999px;padding:0 6px;margin-left:5px;background:#F0766C;color:#1B0A08;font-variant-numeric:tabular-nums}
.badge.info{background:#62B6D2;color:#06222B}.badge.warn{background:#E0B552;color:#2B1F00}.badge.block{background:#F0766C;color:#1B0A08}
.side{flex-direction:column;background:var(--top);color:var(--topink);padding:0 10px 10px;overflow-y:auto}
.sbrand{display:flex;align-items:center;gap:10px;font-weight:700;padding:16px 8px 10px;color:inherit;text-decoration:none;white-space:nowrap}
.side nav{flex:1}
.sgrp{font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.5;padding:16px 10px 5px}
a.sn{display:flex;align-items:center;gap:11px;padding:8px 10px;margin:1px 0;border-radius:8px;color:inherit;opacity:.8;text-decoration:none;font-weight:500;white-space:nowrap;position:relative}
a.sn:hover{opacity:1;background:rgba(255,255,255,.07)}
a.sn.on{opacity:1;background:rgba(98,182,210,.16);box-shadow:inset 3px 0 0 #62B6D2}
a.sn.on svg{color:#62B6D2}
a.sn svg{flex:none}a.sn .badge{margin-left:auto}
.side :focus-visible,.top :focus-visible{outline:2px solid #62B6D2;outline-offset:-2px}
.sfold{display:flex;align-items:center;gap:8px;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;padding:8px 10px;border-radius:8px;font:inherit;font-size:.8rem}
.sfold:hover{opacity:1;background:rgba(255,255,255,.07)}
.suser{display:flex;align-items:center;gap:10px;width:100%;font:inherit;text-align:left;color:inherit;background:rgba(255,255,255,.06);border:0;border-radius:9px;padding:8px;cursor:pointer;margin-top:6px}
.sav{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--info);color:#fff;font-size:.74rem;font-weight:700;flex:none}
.suser b{display:block;font-size:.82rem}.suser small{opacity:.65;font-size:.72rem}
/* Narrow screens: a menu button, the brand and the page title. */
.app{display:block}.side{display:none}
.brand{font-weight:700;padding:11px 4px;white-space:nowrap;display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.mbtn{display:inline-flex;align-items:center;position:relative;background:none;border:0;color:inherit;padding:10px 8px 10px 0;cursor:pointer}
.mdot{position:absolute;top:8px;right:4px;width:8px;height:8px;border-radius:50%;background:#62B6D2;box-shadow:0 0 0 2px var(--top)}
.top .ttl{font-weight:600;padding:13px 0 13px 10px;margin-left:4px;border-left:1px solid rgba(255,255,255,.16);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ubtn{background:none;border:0;padding:6px 0;cursor:pointer;color:inherit}.ubtn .sav{width:30px;height:30px}
.menubg{display:none}
.app.menu-open .side{display:flex;position:fixed;top:0;bottom:0;left:0;width:min(280px,86vw);z-index:47;box-shadow:8px 0 30px rgba(0,0,0,.35)}
.app.menu-open .menubg{display:block;position:fixed;inset:0;background:rgba(6,14,18,.5);z-index:46}
.app.menu-open .sfold{display:none}
body.menu-open{overflow:hidden}
@media (min-width:1000px){
.app{display:grid;grid-template-columns:232px minmax(0,1fr);align-items:start}.app.rail{grid-template-columns:68px minmax(0,1fr)}
.side{display:flex;position:sticky;top:0;height:100vh;height:100dvh}
.menubg,.mbtn{display:none!important}
.app.rail .lbl{display:none}
.app.rail .sgrp.lbl{display:block;height:0;padding:0;margin:10px 12px;border-top:1px solid rgba(255,255,255,.12);font-size:0}
.app.rail a.sn{justify-content:center;padding:10px 0}
.app.rail a.sn .badge{position:absolute;top:6px;right:14px;margin:0;min-width:0;width:9px;height:9px;padding:0;font-size:0;box-shadow:0 0 0 2px var(--top)}
.app.rail .sbrand{justify-content:center;padding-left:0;padding-right:0}.app.rail .suser{justify-content:center;background:none;padding:4px 0}
.app.rail .sfold{justify-content:center}.app.rail .sfold svg{transform:rotate(180deg)}
.top{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.top .brand,.top .ubtn{display:none}.top .ttl{border:0;margin:0;padding:13px 0;font-weight:700}.top .in{max-width:1360px;padding:0 22px}
main{padding:18px 22px 60px}
}
.menu{position:fixed;top:50px;right:10px;z-index:48;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;min-width:250px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.menu h3{padding:4px 8px}
.menu button,.menu a{display:flex;justify-content:space-between;gap:12px;width:100%;font:inherit;text-align:left;background:none;border:0;color:var(--ink);padding:8px;border-radius:6px;cursor:pointer;text-decoration:none}
.menu button:hover,.menu a:hover{background:var(--sunk)}
.menu button span,.menu a span{color:var(--muted);font-size:.8rem}
@media (min-width:1000px){.menu{top:auto;bottom:64px;right:auto;left:12px}}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login .card{max-width:400px;width:100%;padding:24px}

/* Process flow */
.sysbar{display:flex;flex-wrap:wrap;gap:6px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.84rem}
.sys{display:block;min-width:0;line-height:1.45}
.sys i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:middle}
.sys b{white-space:nowrap;margin-right:6px}
.sys span{color:var(--muted)}
.flowmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;margin-bottom:14px}
@media (min-width:900px){.flowmap{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1600px){.flowmap{grid-template-columns:repeat(8,minmax(0,1fr))}}
.flowexits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.fnode{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--c,var(--line));border-radius:10px;padding:10px 12px 12px;cursor:pointer;min-height:140px;transition:border-color .15s,box-shadow .15s}
.fnode:hover,.fnode:focus-visible{border-color:var(--c,var(--info));outline:none}
.fnode.sel{box-shadow:0 0 0 2px var(--info)}
.fnode.here{box-shadow:0 0 0 3px color-mix(in srgb,var(--info) 45%,transparent);background:color-mix(in srgb,var(--info) 7%,var(--surface))}
.fnode .n{width:100%;display:flex;justify-content:space-between;gap:6px;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.fnode .who{font-weight:600}
.fnode .who-ai,.fnode .who-system-and-ai{color:var(--ai)}
.fnode .who-person{color:var(--warn)}
.fnode h3{margin:0;font-size:.92rem;line-height:1.25}
.fnode .big{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.fnode .big small{font-size:.74rem;font-weight:500;color:var(--muted);margin-left:5px;letter-spacing:0}
.fnode .sub{font-size:.76rem;color:var(--muted)}
.fsub{font:inherit;font-size:.74rem;font-weight:600;text-align:left;border:1px solid var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 9%,transparent);border-radius:999px;padding:1px 8px;cursor:pointer;max-width:100%}
.fsub:hover{background:color-mix(in srgb,var(--c) 18%,transparent)}
.fnode .herechip{display:none;position:absolute;top:-10px;right:10px;font-size:.66rem;font-weight:700;text-transform:uppercase;background:var(--info);color:#fff;border-radius:999px;padding:1px 7px}
.fnode.here .herechip{display:block}
.flowmap .fnode::after{content:"";position:absolute;right:-19px;top:50%;width:9px;height:9px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:translateY(-50%) rotate(45deg);opacity:.6}
.flowmap .fnode.last::after{display:none}
@media (max-width:899px){.flowmap .fnode:nth-child(2n)::after{display:none}}
@media (min-width:900px) and (max-width:1599px){.flowmap .fnode:nth-child(4n)::after{display:none}}
.fexit{min-height:0;border-top-style:dashed}
.jh{font-size:.86rem;margin:4px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.jres{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.fnode.htmx-request,.fsub.htmx-request{opacity:.6;cursor:progress}
#flowlist.htmx-request>*{opacity:.6;transition:opacity .15s}

/* Review panel on the Process flow page */
.drawerbg{position:fixed;inset:0;background:rgba(6,14,18,.45);z-index:39}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(1480px,97vw);background:var(--paper);z-index:40;overflow:auto;border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(0,0,0,.35)}
.drawer[hidden],.drawerbg[hidden]{display:none}
.drawer-bar{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.drawer-body{padding:10px 16px 40px}
.drawer .viewer{top:58px}
body.drawer-open{overflow:hidden}
@media (max-width:700px){.drawer{width:100vw;border-left:0}}
.cand .chip{white-space:normal}
/* Live pages: shown when a part someone is working in has changed underneath */
.livenote{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:45;display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--info);border-radius:10px;padding:8px 12px;box-shadow:0 6px 24px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
.livenote[hidden]{display:none}