/* ISP Fuel Systems — design system. Light by default; dark via [data-theme="dark"]. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

:root{
  /* light theme (default) */
  --bg:#eef2f8; --surface:#ffffff; --surface-1:#f7faff; --surface-2:#f5f8fc; --surface-3:#e9eef6;
  --border:#dde4ee; --border-2:#c8d3e2;
  --ink:#101a2b; --muted:#51607a; --faint:#8492a8;
  --accent:#0a6cb0; --accent-press:#085a93;
  --energy:#d97a00; --ok:#0f9d6b; --warn:#b45309; --danger:#d23b3b;
  --r:14px; --r-sm:10px; --maxw:1180px;
  --shadow:0 14px 38px -22px rgba(20,40,80,.35);
  --ring:0 0 0 3px rgba(10,108,176,.30);
  --logo-plate:transparent;
  /* logo (light): navy swoosh + blue arc on white */
  --logo-arc-1:#1a5fa6; --logo-arc-2:#7fb8e6;
  --logo-ball-1:#c2c9d1; --logo-ball-2:#4a525b;
  --logo-swoosh:#0c1320; --logo-ring:#3a424d;
}
[data-theme="dark"]{
  --bg:#0a0f1c; --surface:#0f1626; --surface-1:#131c2f; --surface-2:#141d31; --surface-3:#1a2540;
  --border:#1f2c44; --border-2:#2a3a59;
  --ink:#e8eef8; --muted:#9aa9c2; --faint:#62718d;
  --accent:#38bdf8; --accent-press:#0ea5e9;
  --energy:#f5a524; --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
  --shadow:0 18px 50px -24px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(56,189,248,.35);
  --logo-plate:#ffffff;   /* white backing so the black-text brand logo stays legible on dark */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Open Sans",system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; transition:background .25s ease, color .25s ease;
  background-image:
    radial-gradient(1100px 520px at 85% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(900px 480px at 0% 0%, color-mix(in srgb, var(--energy) 10%, transparent), transparent 55%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:"Poppins",sans-serif; line-height:1.15; margin:0 0 .4em; letter-spacing:-.01em}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-press)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}

/* ---------- logo ---------- */
.isp-logo{height:38px; width:auto; display:block; color:var(--ink)}
.brand .plate{background:var(--logo-plate); border-radius:8px; padding:3px 8px; display:flex; align-items:center;
  transition:background .25s ease}
.auth-logo .isp-logo{height:46px}
.auth-logo{display:inline-flex; background:var(--logo-plate); border-radius:10px; padding:6px 12px; margin-bottom:16px}

/* ---------- top nav ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--surface) 85%, transparent); border-bottom:1px solid var(--border)}
/* nav gets a wider container than page content so all links sit on one row */
.nav .wrap{max-width:1400px}
.nav-inner{display:flex; align-items:center; gap:14px; height:66px}
.brand{display:flex; align-items:center; gap:11px; flex:none}
.nav-links{display:flex; gap:1px; margin-left:4px; flex-wrap:wrap}
.nav-links a{color:var(--muted); padding:6px 8px; border-radius:9px; font-size:12.5px; font-weight:600; white-space:nowrap; transition:.18s}
.nav-links a:hover{color:var(--ink); background:var(--surface-2)}
.nav-links a.active{color:var(--ink); background:var(--surface-3)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}

/* top-nav dropdown (Proposal) — matches the link + profile-menu styling */
.navdrop{position:relative; display:flex}
.navdrop-toggle{display:inline-flex; align-items:center; gap:4px; color:var(--muted); padding:6px 8px;
  border-radius:9px; font-size:12.5px; font-weight:600; white-space:nowrap; background:transparent; border:0;
  cursor:pointer; font-family:inherit; transition:.18s}
.navdrop-toggle:hover{color:var(--ink); background:var(--surface-2)}
.navdrop-toggle.active{color:var(--ink); background:var(--surface-3)}
.navdrop-toggle .caret{width:13px; height:13px; transition:transform .18s ease}
.navdrop.open .navdrop-toggle{color:var(--ink); background:var(--surface-2)}
.navdrop.open .navdrop-toggle .caret{transform:rotate(180deg)}
.navdrop-menu{position:absolute; left:0; top:42px; min-width:214px; background:var(--surface);
  border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow); padding:8px; opacity:0;
  transform:translateY(-6px); pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:60;
  display:flex; flex-direction:column; gap:1px}
.navdrop.open .navdrop-menu{opacity:1; transform:none; pointer-events:auto}
.navdrop-menu a{color:var(--ink); padding:10px; border-radius:9px; font-size:14px; font-weight:600;
  white-space:nowrap; transition:.15s}
.navdrop-menu a:hover{background:var(--surface-2)}
.navdrop-menu a.active{background:var(--surface-3)}

/* ===== Project Tracking (dated log / blog) ===== */
/* ~40% smaller than the hero h1 (clamp 34/60 -> 20/36) */
.pt-title{font-size:clamp(20px,3.24vw,36px); font-weight:800; margin-top:8px}
.ptlog{display:flex; flex-direction:column; gap:18px; margin-top:22px}
.post{padding:20px 22px}
.post-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.post-headings{min-width:0}
.post-date{display:block; font-size:12.5px; font-weight:600; color:var(--faint); letter-spacing:.02em}
.post-kind{display:inline-block; margin-top:6px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--accent); background:var(--surface-2); border:1px solid var(--border);
  padding:2px 8px; border-radius:999px}
.post-title{font-size:20px; margin:8px 0 0}
.post-meta{font-size:14px; color:var(--muted); margin:12px 0 0}
.post-summary{margin:8px 0 0}
.post-links{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px}
.post-links a{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--accent)}
.post-links a:hover{text-decoration:underline}
.post-links svg{width:16px; height:16px; flex:none}
.btn-sm{padding:7px 14px; font-size:13px; flex:none}
.backlink{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--muted)}
.backlink:hover{color:var(--ink)}
.backlink svg{width:16px; height:16px}
/* detail page: process flowcharts + transcript */
.flows{display:flex; flex-direction:column; gap:18px; margin-top:18px}
.flowcard{padding:18px}
.flow-title{font-weight:700; font-size:15px; margin-bottom:10px}
.flow-svg{overflow-x:auto; -webkit-overflow-scrolling:touch}
.flow-svg svg{max-width:100%; height:auto}
.flow-svg .converge-svg{min-width:760px}
.flow-note{margin-top:10px; font-size:13px}
.transcript{margin-top:14px; font-size:14.5px; line-height:1.7; color:var(--ink); max-width:760px}
.transcript p{margin:0 0 12px}
.transcript-pending{margin-top:14px}
/* heading row + add button */
.pt-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.addbtn{flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  background:var(--accent); color:#fff; border:0; cursor:pointer; transition:.18s; margin-top:6px}
.addbtn:hover{background:var(--accent-press)}
.addbtn:focus-visible{outline:none; box-shadow:var(--ring)}
.addbtn svg{width:20px; height:20px; transition:transform .18s ease}
.addbtn[aria-expanded="true"] svg{transform:rotate(45deg)}
/* post meta tags + actions */
.post-tags{display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.post-actions{display:flex; align-items:flex-start; gap:8px; flex:none}
.status-badge{display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 9px; border-radius:999px; border:1px solid transparent}
.status-complete{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.status-coming_up{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
/* inline create panel */
.entry-form-panel{display:none; margin-top:20px; padding:22px}
.entry-form-panel.open{display:block}
.form-actions{display:flex; gap:10px; margin-top:6px}
/* select/textarea in .field match the text inputs */
.field select, .field textarea{width:100%; background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:var(--r-sm); color:var(--ink); padding:11px 12px; font-size:14px; font-family:inherit; transition:.18s}
.field select:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
.field textarea{resize:vertical; min-height:80px; line-height:1.5}
/* attendees checkbox grid — Django renders <div id="id_attendees"><div><label><input>…</label></div>…> */
#id_attendees{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; margin-top:2px}
#id_attendees > div{margin:0}
#id_attendees label{display:flex; align-items:center; gap:9px; margin:0; font-size:13.5px; font-weight:500;
  color:var(--ink); text-transform:none; letter-spacing:0; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:8px 11px; cursor:pointer; line-height:1.25}
#id_attendees label:hover{border-color:var(--accent)}
#id_attendees input[type="checkbox"]{appearance:auto; -webkit-appearance:auto; width:16px; height:16px; min-width:0;
  margin:0; padding:0; border:0; background:none; box-shadow:none; accent-color:var(--accent); flex:none; cursor:pointer}
/* process flowcharts */
.flow-title{font-weight:700; font-size:16px; margin:0}
.flow-summary{margin:4px 0 0; font-size:13.5px}
.flowsteps{list-style:none; margin:16px 0 0; padding:0}
.flowstep{position:relative; display:flex; gap:14px; padding-bottom:18px}
.flowstep:last-child{padding-bottom:0}
.flowstep:not(:last-child)::before{content:""; position:absolute; left:19px; top:42px; bottom:-2px; width:2px;
  background:var(--border-2)}
.flow-ic{flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--accent); z-index:1}
.flow-ic svg{width:20px; height:20px}
.flow-body{padding-top:9px}
.flow-label{font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.3}
.flow-detail{font-size:13px; margin-top:2px; line-height:1.4}
.flow-body .flow-owner{margin-top:7px}
.flow-ic-milestone{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,var(--border-2))}
.flow-ic-decision{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,var(--border-2))}
/* horizontal flow: large icons flowing left→right, with owner chips */
.flowsteps-h{display:flex; flex-wrap:nowrap; gap:0 42px; margin:18px 0 2px; padding:6px 2px 10px;
  overflow-x:auto; -webkit-overflow-scrolling:touch}
.flowstep-h{position:relative; flex:0 0 auto; width:136px; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:8px}
.flow-ic-lg{width:66px; height:66px; display:grid; place-items:center; border-radius:18px;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--accent)}
.flow-ic-lg svg{width:32px; height:32px}
.flow-ic-lg.flow-ic-milestone{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,var(--border-2))}
.flow-ic-lg.flow-ic-decision{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,var(--border-2))}
.flow-label-h{font-weight:600; font-size:14px; line-height:1.25; color:var(--ink)}
.flowstep-h .flow-detail{font-size:12px; line-height:1.35}
.flow-owner{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px 10px; margin-top:2px}
.flow-owner svg{width:13px; height:13px; color:var(--accent); flex:none}
.flowstep-h:not(:last-child)::after{content:"→"; position:absolute; top:19px; right:-30px; font-size:24px;
  line-height:1; color:var(--muted)}
/* trailing "process continues" marker */
.flowstep-more{width:52px}
.flow-more{height:66px; display:flex; align-items:center; justify-content:center; font-size:30px;
  font-weight:700; letter-spacing:2px; color:var(--muted)}

/* ===== IC canvas demo (Future Automation Vision card) ===== */
.cnv-card-row{display:flex; gap:22px; margin-top:16px; align-items:stretch}
.cnv-steps{flex:0 0 288px; margin-top:0}
.cnv-demo{flex:1; min-width:0; display:flex; flex-direction:column; border:1px solid var(--border);
  border-radius:var(--r); background:var(--surface); overflow:hidden}
.cnv-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface-2)}
.cnv-seg{display:inline-flex; background:var(--surface); border:1px solid var(--border-2); border-radius:999px; padding:3px}
.cnv-segbtn{border:0; background:none; color:var(--muted); font-weight:600; font-size:12.5px; padding:6px 12px;
  border-radius:999px; cursor:pointer; font-family:inherit; transition:.15s}
.cnv-segbtn.active{background:var(--accent); color:#fff}
.cnv-tools{display:flex; gap:6px; flex-wrap:wrap}
.cnv-btn{border:1px solid var(--border-2); background:var(--surface); color:var(--ink); font-family:inherit;
  font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:9px; cursor:pointer; transition:.15s}
.cnv-btn:hover{border-color:var(--accent); color:var(--accent)}
.cnv-btn.active{background:color-mix(in srgb,var(--accent) 14%,var(--surface)); border-color:var(--accent); color:var(--accent)}
.cnv-btn-accent{background:var(--accent); color:#fff; border-color:var(--accent)}
.cnv-btn-accent:hover{background:var(--accent-press); color:#fff}
.cnv-body{display:flex; flex:1; min-height:360px}
.cnv-palette{flex:0 0 148px; border-right:1px solid var(--border); background:var(--surface-2); padding:10px;
  overflow-y:auto; display:flex; flex-direction:column; gap:6px}
.cnv-pal-title{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint);
  margin-bottom:2px}
.cnv-part{display:flex; align-items:center; gap:8px; padding:7px 8px; border:1px solid var(--border-2);
  border-radius:9px; background:var(--surface); cursor:grab; font-size:12px; font-weight:600; color:var(--ink);
  user-select:none; touch-action:none}
.cnv-part:hover{border-color:var(--accent)}
.cnv-part .cnv-ic{width:22px; height:22px; flex:none; color:var(--accent)}
.cnv-ic svg,.cnv-node-ic svg,.cnv-ghost svg{width:100%; height:100%; fill:none; stroke:currentColor;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.cnv-canvas{position:relative; flex:1; min-width:0; overflow:auto; background:var(--surface-2);
  background-image:radial-gradient(color-mix(in srgb,var(--border-2) 55%,transparent) 1px, transparent 1px);
  background-size:22px 22px}
.cnv-links{position:absolute; inset:0; pointer-events:none; overflow:visible}
.cnv-glow{fill:none; stroke:var(--accent); stroke-width:7; stroke-linejoin:round; stroke-linecap:round;
  opacity:0; transition:opacity .3s}
.cnv-demo.running .cnv-glow{opacity:.16}
.cnv-line{fill:none; stroke:var(--border-2); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
  pointer-events:stroke; cursor:pointer}
.cnv-line:hover{stroke:var(--accent)}
.cnv-line.sel{stroke:var(--accent); stroke-width:3.5}
.cnv-demo.running .cnv-line{stroke:var(--accent); stroke-dasharray:9 7; animation:cnv-flow .7s linear infinite}
@keyframes cnv-flow{to{stroke-dashoffset:-16}}
.cnv-node{position:absolute; display:flex; flex-direction:column; align-items:center; gap:5px; width:96px;
  padding:9px 8px; background:var(--surface); border:1.5px solid var(--border-2); border-radius:12px;
  cursor:grab; box-shadow:var(--shadow); user-select:none; touch-action:none; transition:border-color .2s, box-shadow .2s}
.cnv-node.drag{cursor:grabbing; z-index:5}
.cnv-node.sel{border-color:var(--accent); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.cnv-node.src{border-color:var(--energy); box-shadow:0 0 0 3px color-mix(in srgb,var(--energy) 30%,transparent)}
/* view toggle */
.cnv-barleft{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
/* Parts view — tour-style equipment shapes replace the icon cards */
.cnv-demo[data-view="parts"] .cnv-node{background:transparent; border:0; box-shadow:none; padding:2px 4px; width:auto}
.cnv-shape{display:block; width:118px; height:auto; pointer-events:none; overflow:visible}
.cnv-shape .body{fill:var(--surface); stroke:var(--border-2); stroke-width:2}
.cnv-shape .sub{fill:var(--surface-3); stroke:none}
.cnv-shape .detail{stroke:var(--muted); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round}
.cnv-shape .rotor{fill:none; stroke:var(--border-2); stroke-width:2}
.cnv-shape .rotor-b{stroke:var(--muted); stroke-width:2; fill:none; stroke-linecap:round}
.cnv-shape .level{fill:color-mix(in srgb,var(--accent) 24%,var(--surface-2))}
.cnv-shape .glabel{fill:var(--muted); font:700 22px "Open Sans",sans-serif}
.cnv-demo[data-view="parts"] .cnv-node.sel .body{stroke:var(--accent); stroke-width:3}
.cnv-demo[data-view="parts"] .cnv-node.sel{filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent))}
/* running: spin rotors, drop tank level, light pump/generator — like the tour */
.cnv-demo.running .cnv-shape .rotor-b{transform-box:fill-box; transform-origin:center; animation:spin .8s linear infinite}
.cnv-demo.running .cnv-node[data-type="pump"] .body,
.cnv-demo.running .cnv-node[data-type="generator"] .body{stroke:var(--accent)}
.cnv-demo.running .cnv-shape .level{transform-box:fill-box; transform-origin:bottom; animation:drawdown 6s ease-in-out infinite}
.cnv-node-ic{width:30px; height:30px; color:var(--accent)}
.cnv-node-label{font-size:11.5px; font-weight:600; color:var(--ink); text-align:center; line-height:1.2}
.cnv-connecting .cnv-node{cursor:crosshair}
.cnv-connecting .cnv-canvas{cursor:crosshair}
.cnv-demo.running .cnv-rotor{transform-box:fill-box; transform-origin:center; animation:spin .9s linear infinite}
.cnv-demo.running .cnv-node[data-type="pump"]{border-color:var(--accent)}
.cnv-demo.running .cnv-node[data-type="generator"]{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.cnv-ghost{position:fixed; width:40px; height:40px; transform:translate(-50%,-50%); color:var(--accent);
  pointer-events:none; z-index:10000; opacity:.85}
.cnv-hint{position:absolute; left:16px; right:16px; top:50%; transform:translateY(-50%); text-align:center;
  color:var(--faint); font-size:13px; line-height:1.6; pointer-events:none}
.cnv-editor{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px;
  border-top:1px solid var(--border); background:var(--surface-2)}
.cnv-ed-label{font-size:12px; font-weight:600; color:var(--muted)}
.cnv-ed-input{flex:1; min-width:120px; background:var(--surface); border:1px solid var(--border-2);
  border-radius:8px; padding:8px 10px; font-size:13px; color:var(--ink); font-family:inherit}
.cnv-ed-input:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
/* fullscreen */
.cnv-demo.cnv-full{position:fixed; inset:0; z-index:9999; border-radius:0; border:0; background:var(--surface)}
body.cnv-full-lock{overflow:hidden}
@media (max-width:900px){
  .cnv-card-row{flex-direction:column}
  .cnv-steps{flex:none}
}

/* ===== automation wizard ===== */
.cnv-bar{display:none}
.cnv-demo.cnv-hasbar .cnv-bar{display:flex}
/* keep the toolbar (with Expand/Close) present whenever expanded, even on form steps */
.cnv-demo.cnv-full .cnv-bar{display:flex}
.cnv-demo.cnv-full:not(.cnv-hasbar) .cnv-barleft,
.cnv-demo.cnv-full:not(.cnv-hasbar) .cnv-tools .cnv-btn:not(.cnv-btn-accent){display:none}
.cnv-wiz{display:flex; flex-direction:column; flex:1; min-height:380px}
.cnv-wiz-head{padding:12px 14px; border-bottom:1px solid var(--border); background:var(--surface-2)}
.cnv-step-num{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-right:8px}
.cnv-step-title{font-weight:700; font-size:15px; color:var(--ink)}
.cnv-step-sub{display:block; font-size:12.5px; color:var(--muted); margin-top:3px}
.cnv-wiz-body{flex:1; display:flex; flex-direction:column; min-height:0; overflow:auto}
.cnv-wiz-body .cnv-body{flex:1}
.cnv-wiz-nav{display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--border); background:var(--surface-2)}
.cnv-nav-spacer{flex:1}
.cnv-btn:disabled{opacity:.45; cursor:not-allowed}
.cnv-note{padding:10px 14px; font-size:12.5px; color:var(--faint); margin:0}
/* counts steppers */
.cnv-counts{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:10px; padding:12px 14px}
.cnv-count-row{display:flex; align-items:center; gap:9px; border:1px solid var(--border-2); border-radius:10px;
  padding:8px 9px 8px 11px; background:var(--surface)}
.cnv-count-ic{width:20px; height:20px; color:var(--accent); flex:none}
.cnv-count-name{flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--ink)}
.cnv-stepper{display:inline-flex; align-items:center; border:1px solid var(--border-2); border-radius:8px; overflow:hidden}
.cnv-step-btn{border:0; background:var(--surface-2); color:var(--ink); font-size:15px; font-weight:700; width:28px; height:28px; cursor:pointer; line-height:1}
.cnv-step-btn:hover{background:color-mix(in srgb,var(--accent) 14%,var(--surface-2)); color:var(--accent)}
.cnv-count-val{min-width:30px; text-align:center; font-size:14px; font-weight:700; color:var(--ink)}
/* project suggestions */
.cnv-suggest{display:flex; flex-direction:column; gap:10px; padding:12px 14px}
.cnv-proj{border:1px solid var(--border-2); border-radius:11px; padding:11px 13px; cursor:pointer; transition:.15s; background:var(--surface)}
.cnv-proj:hover{border-color:var(--accent)}
.cnv-proj.sel{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.cnv-proj-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.cnv-proj-name{font-weight:700; font-size:14px; color:var(--ink)}
.cnv-proj-flag{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ok);
  background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 40%,transparent); border-radius:999px; padding:1px 7px; margin-left:6px}
.cnv-proj-pct{font-weight:800; font-size:14px; color:var(--accent)}
.cnv-proj-type{font-size:12px; color:var(--muted); margin-top:2px}
.cnv-bar-track{height:6px; border-radius:999px; background:var(--surface-3); margin-top:8px; overflow:hidden}
.cnv-bar-track span{display:block; height:100%; background:var(--accent); border-radius:999px}
/* SOO + strip + guided + assembly */
.cnv-strip{padding:8px 0 0}
.cnv-selproj{font-size:12.5px; color:var(--muted); padding:4px 14px 0}
.cnv-soo-wrap{padding:10px 14px 16px}
.cnv-soo-title{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-bottom:6px}
.cnv-soo{white-space:pre-wrap; font:12.5px/1.6 "Open Sans",sans-serif; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border-2); border-radius:10px; padding:12px; margin:0}
.cnv-guided{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 14px}
.cnv-rename{display:flex; align-items:center; gap:8px; flex:1; min-width:220px}
.cnv-assemble{padding:16px}
.cnv-assemble-h{font-weight:700; font-size:15px; color:var(--ink); margin-bottom:12px}
.cnv-asm-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border-2); border-radius:10px; margin-bottom:8px; font-size:13.5px; color:var(--ink)}
.cnv-asm-check{width:22px; height:22px; border-radius:50%; background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); display:grid; place-items:center; font-weight:800; flex:none}
.cnv-asm-note{color:var(--muted); font-size:12.5px; margin-left:auto}
/* left flow steps: clickable + blue active highlight */
.cnv-steps .flowstep{padding:7px 8px; border-radius:10px; transition:background .15s}
.cnv-steps .flowstep.cnv-clickable{cursor:pointer}
.cnv-steps .flowstep.cnv-clickable:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cnv-steps .flowstep.active{background:color-mix(in srgb,var(--accent) 11%,transparent)}
.cnv-steps .flowstep.active .flow-ic{border-color:var(--accent); background:var(--accent); color:#fff}
.cnv-steps .flowstep.active .flow-label{color:var(--accent)}
.cnv-steps .flowstep.done .flow-ic{border-color:color-mix(in srgb,var(--accent) 45%,var(--border-2)); color:var(--accent)}

/* ===== process builder tool ===== */
.pc-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface-2)}
.pc-left{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pc-proc-select{background:var(--surface); border:1px solid var(--border-2); border-radius:9px; color:var(--ink);
  font-family:inherit; font-size:13px; font-weight:600; padding:7px 10px; cursor:pointer; max-width:260px}
.pc-proc-select:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
/* The tool is sized to the viewport in JS, so the page itself doesn't scroll
   and the library card can't scroll away. (position:sticky can't do this job:
   its travel is container height minus element height, and the palette fills
   the body exactly — zero travel.) The canvas scrolls internally instead. */
.pc-tool .cnv-body{flex:1; min-height:0}
.pc-tool.cnv-full .cnv-body{height:auto; min-height:0}
.pc-tool .cnv-canvas{min-height:0}
/* step library: a floating card that stays put on the left */
.pc-tool .cnv-palette{align-self:stretch; flex:0 0 150px; margin:10px; padding:10px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface); overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 6px 18px -8px rgba(15,23,42,.22), 0 2px 5px -2px rgba(15,23,42,.10)}
.pc-tool .cnv-pal-title{position:sticky; top:-10px; margin:-10px -10px 4px; padding:10px 10px 6px;
  background:var(--surface); border-radius:12px 12px 0 0}
/* node grows only for the owner pill; the label wraps at the base width */
.pc-tool .cnv-node{width:auto; min-width:140px; max-width:300px; box-sizing:border-box}
.pc-tool .cnv-node-label{white-space:normal; font-size:11px; line-height:1.22; max-width:132px}
/* node owner / role pill (click to edit, freeform + preset roles) */
.pc-node-owner{display:inline-flex; align-items:center; gap:5px; margin-top:5px; font-size:11px; font-weight:600;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:2px 9px; cursor:text}
.pc-node-owner.empty{color:var(--faint); border-style:dashed}
.pc-node-owner:hover{border-color:var(--accent)}
.pc-owner-ic{width:12px; height:12px; flex:none; color:var(--accent); display:inline-flex}
.pc-owner-ic svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2}
.pc-owner-txt{white-space:nowrap}
.pc-owner-input{border:0; background:transparent; font:inherit; font-size:11px; color:var(--ink); width:92px; outline:none; padding:0}
/* wall: group divider (Customer | ISP) — not a process step */
.pc-wall{position:absolute; top:0; bottom:0; width:0; z-index:0}
.pc-wall-line{position:absolute; top:26px; bottom:6px; left:-5px; width:10px; cursor:ew-resize}
.pc-wall-line::before{content:""; position:absolute; left:4px; top:0; bottom:0; width:0; border-left:2px dashed var(--border-2)}
.pc-wall.drag .pc-wall-line::before{border-color:var(--accent)}
.pc-wall-lbl{position:absolute; top:2px; font-size:11px; font-weight:700; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border-2); border-radius:8px; padding:3px 9px; white-space:nowrap; cursor:text; outline:none}
.pc-wall-lbl.left{right:9px} .pc-wall-lbl.right{left:9px}
.pc-wall-lbl:focus{border-color:var(--accent); box-shadow:var(--ring)}
.pc-wall-del{position:absolute; top:-3px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%;
  border:1px solid var(--border-2); background:var(--surface); color:var(--muted); font-size:13px; line-height:1;
  cursor:pointer; display:none; padding:0}
.pc-wall:hover .pc-wall-del{display:block}
.pc-wall-del:hover{border-color:var(--danger); color:var(--danger)}
/* cyclical-process marker (standalone, non-card) */
.pc-cycle{position:absolute; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:grab;
  z-index:1; user-select:none; touch-action:none}
.pc-cycle.drag{cursor:grabbing}
.pc-cycle-ic{width:52px; height:52px; color:var(--accent); display:inline-flex}
.pc-cycle-ic svg{width:52px; height:52px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pc-cycle-lbl{font-size:11px; font-weight:600; color:var(--muted); background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:8px; padding:2px 8px; white-space:nowrap; cursor:text; outline:none}
.pc-cycle-lbl:focus{border-color:var(--accent); box-shadow:var(--ring)}
.pc-cycle-del{position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; border:1px solid var(--border-2);
  background:var(--surface); color:var(--muted); font-size:13px; line-height:1; cursor:pointer; display:none; padding:0}
.pc-cycle:hover .pc-cycle-del{display:block}
.pc-cycle-del:hover{border-color:var(--danger); color:var(--danger)}
/* drill-in button + menu on a node */
.pc-drill{position:absolute; bottom:-8px; right:-8px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--border-2); background:var(--surface); color:var(--muted); cursor:pointer; display:none;
  padding:0; align-items:center; justify-content:center; z-index:4}
.cnv-node:hover .pc-drill, .pc-drill.has{display:inline-flex}
.pc-drill.has{color:var(--accent); border-color:var(--accent)}
.pc-drill svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2}
.pc-drill:hover{border-color:var(--accent); color:var(--accent)}
.pc-drill-menu{position:absolute; bottom:-6px; left:50%; transform:translate(-50%,100%); z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow);
  padding:5px; display:flex; flex-direction:column; gap:3px; min-width:160px}
.pc-drill-opt{border:0; background:transparent; text-align:left; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--ink); padding:7px 9px; border-radius:7px; cursor:pointer; white-space:nowrap}
.pc-drill-opt:hover{background:var(--surface-2); color:var(--accent)}
/* inline "expand here": inner-process preview on the card */
.pc-subview{margin-top:8px; width:100%; border-top:1px dashed var(--border-2); padding-top:6px; cursor:default}
.pc-subview-title{font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-bottom:4px}
.pc-subview-empty{font-size:10.5px; color:var(--faint); line-height:1.3}
.pc-subview-mini{display:flex; flex-direction:column; gap:4px}
.pc-subview-chip{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--border-2); border-radius:8px; padding:4px 7px}
.pc-subview-chip .cnv-node-ic{width:14px; height:14px; color:var(--accent)}
.pc-subview-chip .cnv-node-ic svg{width:14px; height:14px}
.pc-subview-txt{white-space:normal; text-align:left; line-height:1.2}
/* breadcrumb when inside a sub-process */
.pc-crumb{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px;
  border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.pc-crumb-back{flex:none}
.pc-crumb-trail{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.pc-crumb-item{border:0; background:transparent; font:inherit; font-size:12.5px; font-weight:600; color:var(--muted);
  cursor:pointer; padding:2px 4px; border-radius:6px}
.pc-crumb-item:hover{color:var(--accent)}
.pc-crumb-item.current{color:var(--ink)}
.pc-crumb-sep{color:var(--faint)}
/* drill zoom-in animation */
@keyframes pcZoomIn{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
.pc-zoomin{animation:pcZoomIn .22s ease}
.cnv-ed-type{background:var(--surface); border:1px solid var(--border-2); border-radius:8px; color:var(--ink);
  font-family:inherit; font-size:13px; padding:8px 10px; cursor:pointer}
.cnv-ed-type:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
/* full-width processes canvas (spans to both browser edges) */
.pc-page{padding:0 14px 14px}
/* Compact intro: this is a tool page, and every pixel here is a pixel the
   canvas doesn't get — the tool is sized to the remaining viewport. */
.pc-intro{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:14px 16px 10px}
.pc-intro-title{font-size:23px; font-weight:800; margin:0; flex:none}
.pc-intro-desc{margin:0; font-size:13px; line-height:1.5; min-width:0}
/* sticky header (toolbar + editor) under the nav; overflow visible so sticky works */
.pc-tool{overflow:visible}
.pc-tool .pc-head{position:sticky; top:66px; z-index:40; background:var(--surface)}
.pc-tool.cnv-full .pc-head{top:0}
.pc-ed-note{flex:1 1 240px}
/* note shown inside a step box */
.pc-node-note{display:block; margin-top:5px; max-width:150px; font-size:10.5px; line-height:1.3; color:var(--muted);
  text-align:center; border-top:1px dashed var(--border-2); padding-top:4px}
/* connector direction picker (in the editor when a connector is selected) */
.pc-dir-group{display:inline-flex; gap:6px; flex-wrap:wrap}
/* snap-to-align guide lines */
.pc-guide{position:absolute; background:var(--accent); opacity:.55; pointer-events:none; z-index:3; display:none}
.pc-guide-v{top:0; bottom:0; width:1px}
.pc-guide-h{left:0; right:0; height:1px}
/* canvas panning cursor (drag background to slide) */
.pc-tool .cnv-canvas{cursor:grab}
.pc-tool .cnv-canvas.panning{cursor:grabbing}
.pc-tool.cnv-connecting .cnv-canvas{cursor:crosshair}
/* zoom sizer / layer */
.pc-sizer{position:relative}
.pc-zoom{position:absolute; top:0; left:0; transform-origin:0 0}
.pc-zoomctl{display:inline-flex; align-items:center; border:1px solid var(--border-2); border-radius:9px; overflow:hidden}
.pc-zbtn{border:0; background:var(--surface); color:var(--ink); font-family:inherit; font-size:16px; font-weight:700;
  width:30px; height:32px; cursor:pointer; line-height:1}
.pc-zbtn:hover{background:color-mix(in srgb,var(--accent) 14%,var(--surface)); color:var(--accent)}
.pc-zoom-lbl{font-size:12px; font-weight:600; color:var(--muted); min-width:46px; text-align:center;
  border-left:1px solid var(--border-2); border-right:1px solid var(--border-2)}

/* profile menu */
.usermenu{position:relative}
.avatar{width:38px;height:38px;border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px;
  background:var(--surface-3); border:1px solid var(--border-2); color:var(--ink); cursor:pointer; transition:.18s}
.avatar:hover{border-color:var(--accent)}
.avatar:focus-visible{outline:none; box-shadow:var(--ring)}
.menu{position:absolute; right:0; top:48px; min-width:230px; background:var(--surface); border:1px solid var(--border);
  border-radius:13px; box-shadow:var(--shadow); padding:8px; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease; z-index:60}
.usermenu.open .menu{opacity:1; transform:none; pointer-events:auto}
.menu .who{padding:8px 10px 10px; border-bottom:1px solid var(--border); margin-bottom:6px}
.menu .who .nm{font-weight:600; font-size:14px} .menu .who .em{font-size:12px; color:var(--faint)}
.menu .item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px; border-radius:9px;
  font-size:14px; color:var(--ink); background:transparent; border:0; cursor:pointer; font-family:inherit; transition:.15s}
.menu .item:hover{background:var(--surface-2)}
.menu .item svg{width:17px;height:17px;color:var(--muted)}
/* theme switch row */
.themerow{display:flex; align-items:center; justify-content:space-between; padding:8px 10px}
.themerow span{font-size:14px}
.switch{position:relative; width:46px; height:26px; border-radius:99px; background:var(--surface-3); border:1px solid var(--border-2);
  cursor:pointer; transition:.2s; flex:none}
.switch::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--accent); transition:.2s}
[data-theme="dark"] .switch::after{left:22px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:"Open Sans"; font-weight:600; font-size:15px;
  padding:11px 18px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:.18s; min-height:44px}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-press)}
.btn-ghost{background:transparent; border-color:var(--border-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- cards / layout ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.card-2{background:var(--surface-2)}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.kicker{font-family:ui-monospace,monospace; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint)}
.section{padding:54px 0}
.divider{height:1px;background:var(--border);margin:0}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px; border:1px solid var(--border-2); color:var(--muted)}
.badge.ok{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.badge.energy{color:var(--energy); border-color:color-mix(in srgb,var(--energy) 45%,transparent)}
.badge.sky{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* hero */
.hero{padding:64px 0 28px}
.hero h1{font-size:clamp(34px,5.4vw,60px); font-weight:800}
.hero p.lede{font-size:clamp(16px,2vw,20px); color:var(--muted); max-width:680px}
.statline{display:flex; gap:28px; flex-wrap:wrap; margin-top:26px}
.stat .n{font-family:"Poppins"; font-weight:700; font-size:26px}
.stat .l{font-size:13px; color:var(--faint)}

/* forms */
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px}
.field input{width:100%; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-sm);
  color:var(--ink); padding:13px 14px; font-size:15px; font-family:"Open Sans"; min-height:46px; transition:.18s}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
.field .err{color:var(--danger); font-size:13px; margin-top:6px}
.helptext{color:var(--faint); font-size:12.5px; margin-top:6px}
/* password visibility toggle */
.pw-wrap{position:relative; display:block}
.pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0;
  cursor:pointer; color:var(--faint); padding:8px; display:grid; place-items:center; border-radius:8px}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle:focus-visible{outline:none; box-shadow:var(--ring)}
.pw-toggle svg{width:20px;height:20px}

/* auth shell */
.auth-wrap{min-height:100dvh; display:grid; place-items:center; padding:24px}
.auth-card{width:100%; max-width:418px}

/* messages */
.msgs{position:fixed; top:80px; right:18px; z-index:80; display:flex; flex-direction:column; gap:10px; max-width:360px}
.msg{padding:12px 16px; border-radius:var(--r-sm); border:1px solid var(--border-2); background:var(--surface); font-size:14px;
  box-shadow:var(--shadow); animation:slidein .35s ease}
.msg.error{border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.msg.success{border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
.msg.info{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
@keyframes slidein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* gallery */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:.18s; display:block}
.tile:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow)}
.tile .thumb{aspect-ratio:4/3; background:var(--surface-3); display:grid; place-items:center; color:var(--faint); overflow:hidden}
.tile .thumb img{width:100%;height:100%;object-fit:cover}
.tile .meta{padding:13px 15px}
.tile .meta .t{font-weight:600; font-size:14.5px; line-height:1.3}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 22px}
.filters a{font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--border-2); color:var(--muted)}
.filters a.active{background:var(--surface-3); color:var(--ink)}

/* agent chat */
.chat{display:flex; flex-direction:column; gap:14px; min-height:280px}
.bubble{max-width:80%; padding:14px 17px; border-radius:14px; font-size:15px; white-space:pre-wrap; line-height:1.55}
.bubble.user{align-self:flex-end; background:var(--accent); color:#fff; font-weight:500}
.bubble.bot{align-self:flex-start; background:var(--surface-2); border:1px solid var(--border)}
.bubble.bot .src{margin-top:10px; font-size:12px; color:var(--faint)}
.bubble.bot .src-link{color:var(--faint); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--border-2)}
.bubble.bot .src-link:hover{color:var(--ink); text-decoration-color:var(--accent)}
/* ── signature cards ─────────────────────────────────────── */
.sig-section{margin-top:8px}
.sig-sec-label{font-size:10px;font-family:ui-monospace,monospace;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;margin-bottom:6px}
.sig-cards{display:flex;flex-wrap:wrap;gap:8px}
.sig-card{display:flex;align-items:flex-start;gap:9px;padding:8px 11px;background:var(--surface-1);border:1px solid var(--border-2);border-radius:8px;max-width:280px}
.sig-icon{font-size:17px;line-height:1;margin-top:2px;flex-shrink:0;opacity:.7}
.sig-name{font-weight:600;font-size:13px;color:var(--ink);line-height:1.3}
.sig-meta{font-size:11px;color:var(--muted);margin-top:2px}
.sig-link{display:block;font-size:11px;margin-top:5px;color:var(--faint);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--border-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.sig-link:hover{color:var(--ink);text-decoration-color:var(--accent)}
.askbar{display:flex; gap:10px; margin-top:18px}
.askbar input{flex:1}
.suggest{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.suggest button{font-size:13px; color:var(--muted); background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:7px 13px; cursor:pointer; transition:.18s}
.suggest button:hover{border-color:var(--accent); color:var(--ink)}
.spinner{width:16px;height:16px;border:2px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* value-add */
.va{border-left:3px solid var(--border-2); padding:16px 20px; border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--surface); box-shadow:var(--shadow)}
.va.client{border-left-color:var(--energy)} .va.proposed{border-left-color:var(--accent)} .va.risk{border-left-color:var(--danger)}
.va h4{margin:6px 0 6px; font-size:17px}
.va p{margin:0; color:var(--muted); font-size:14.5px}
.cl{margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.65}
.cl li{margin:4px 0}

/* ---- Project Files: search, tabs, tree ---- */
.filesearch{display:flex; align-items:center; gap:10px; margin:20px 0; background:var(--surface);
  border:1px solid var(--border-2); border-radius:var(--r-sm); padding:6px 6px 6px 14px; box-shadow:var(--shadow)}
.filesearch:focus-within{border-color:var(--accent); box-shadow:var(--ring)}
.filesearch > svg{width:20px;height:20px;color:var(--faint);flex:none}
.filesearch input{flex:1; border:0; background:transparent; color:var(--ink); font-size:15px; font-family:"Open Sans"; padding:10px 4px; min-height:40px}
.filesearch input:focus{outline:none}

.tabs{display:flex; gap:6px; border-bottom:1px solid var(--border); margin:6px 0 18px}
.tabbtn{font-family:"Open Sans"; font-weight:600; font-size:15px; color:var(--muted); background:none; border:0;
  border-bottom:2px solid transparent; padding:11px 16px; cursor:pointer; margin-bottom:-1px; display:flex; align-items:center; gap:8px}
.tabbtn:hover{color:var(--ink)}
.tabbtn.active{color:var(--ink); border-bottom-color:var(--accent)}
.tabbtn .cnt{font-size:11px; font-weight:700; color:var(--faint); background:var(--surface-3); border-radius:99px; padding:1px 8px}
.tabpanel{display:none}
.tabpanel.active{display:block; animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* tree */
.tree{list-style:none; margin:0; padding-left:0}
.tree .tree{padding-left:20px; border-left:1px solid var(--border); margin-left:9px}
.tree li{padding:1px 0}
.tree details > summary{display:flex; align-items:center; gap:8px; cursor:pointer; padding:5px 6px; border-radius:7px;
  font-weight:600; font-size:14px; list-style:none}
.tree details > summary::-webkit-details-marker{display:none}
.tree details > summary:hover{background:var(--surface-2)}
.tree details > summary::before{content:"▸"; color:var(--faint); font-size:11px; transition:transform .15s}
.tree details[open] > summary::before{transform:rotate(90deg)}
.tree .ic-folder{width:16px;height:16px;color:var(--energy);flex:none}
.tree .cnt{margin-left:auto; font-size:11px; color:var(--faint); background:var(--surface-3); border-radius:99px; padding:1px 8px}
.tree .leaf{display:flex; align-items:center; gap:8px; padding:4px 6px 4px 22px; border-radius:7px}
.tree .leaf:hover{background:var(--surface-2)}
.tree .leaf a{display:flex; align-items:center; gap:9px; color:var(--ink); flex:1; min-width:0}
.tree .leaf .fname{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tree .leaf .sz{font-size:11.5px; color:var(--faint); flex:none}
.tree .tag-open{font-size:10px; font-weight:700; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius:99px; padding:0 7px; flex:none}
.ext{font-size:9.5px; font-weight:800; letter-spacing:.03em; color:#fff; background:var(--faint); border-radius:4px;
  padding:2px 5px; min-width:34px; text-align:center; flex:none}
.ext-pdf{background:#d23b3b}.ext-dwg{background:#0a6cb0}.ext-jpg,.ext-jpeg,.ext-png{background:#0f9d6b}
.ext-doc,.ext-docx{background:#2b579a}.ext-xls,.ext-xlsx{background:#1d7044}.ext-msg{background:#7a5cff}.ext-zip{background:#b06a00}

/* search results */
.srlist{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.sr{display:block; border:1px solid var(--border); border-radius:var(--r-sm); padding:13px 15px; background:var(--surface-2); transition:.15s}
.sr:hover{border-color:var(--accent)}
.sr-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.sr-title{font-weight:600; color:var(--ink)}
.sr-path{font-family:ui-monospace,monospace; font-size:11.5px; color:var(--faint); margin-top:3px}
.sr-snip{font-size:13px; color:var(--muted); margin-top:7px; line-height:1.5}

/* ---- System Tour (animated schematic) ---- */
.tour-hero{margin:22px 0 6px}
.tour-hero img{width:100%; height:auto; display:block; border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--shadow)}
.tour-hero figcaption{color:var(--faint); font-size:12.5px; margin-top:8px; max-width:760px}
.tour-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:18px 0}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--border-2); border-radius:999px; padding:4px}
.segbtn{border:0; background:none; color:var(--muted); font-weight:600; font-size:14px; padding:9px 16px; border-radius:999px; cursor:pointer; font-family:inherit; transition:.15s}
.segbtn.active{background:var(--accent); color:#fff}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip .v i{font-style:normal; font-weight:700; color:var(--ink)}
.chip .v .v-run{display:none}
.state-running .chip .v-sb{display:none}
.state-running .chip .v .v-run{display:inline}
.chip .v .on{color:var(--ok)}
.state-running .chip .v-run:not(.on){color:var(--accent)}
.diagram{padding:14px}
.schematic{width:100%; height:auto; display:block}
.schematic text{font-family:"Open Sans",sans-serif}
.lbl{fill:var(--ink); font-size:13px; font-weight:600}
.lbl-faint{fill:var(--faint); font-size:11px; letter-spacing:.1em}
.comp{cursor:pointer}
.comp .body{fill:var(--surface-2); stroke:var(--border-2); stroke-width:2; transition:stroke .2s}
.comp .sub{fill:var(--surface-3)}
.sub-l{stroke:var(--faint); stroke-width:2}
.risebody{fill:var(--surface-3); stroke:var(--border-2)}
.pipe{fill:none; stroke:var(--border-2); stroke-width:6; stroke-linejoin:round; stroke-linecap:round}
.pipe-glow{fill:none; stroke:var(--accent); stroke-width:6; stroke-linejoin:round; stroke-linecap:round; opacity:0; transition:opacity .3s}
.state-running .flow-supplyline{opacity:.16}
.state-running .flow-feedline{opacity:.16; stroke:var(--energy)}
.mk{fill:var(--accent); stroke:var(--bg); stroke-width:2}
.mkn{fill:#fff; font-size:12px; font-weight:800; text-anchor:middle; pointer-events:none}
.comp.sel .body{stroke:var(--accent); stroke-width:3}
.comp.sel{filter:drop-shadow(0 6px 16px color-mix(in srgb,var(--accent) 45%,transparent))}
.level{fill:color-mix(in srgb,var(--energy) 65%, var(--surface-3)); transform-box:fill-box; transform-origin:center bottom}
.state-running .level{animation-name:drawdown; animation-duration:6s; animation-timing-function:ease-in-out; animation-iteration-count:infinite}
@keyframes drawdown{0%{transform:scaleY(1)}30%{transform:scaleY(.5)}48%{transform:scaleY(.85)}72%{transform:scaleY(.55)}100%{transform:scaleY(1)}}
.sensor{fill:var(--ok); stroke:var(--surface); stroke-width:2}
.rotor{fill:none; stroke:var(--border-2); stroke-width:2}
.rotor-b{stroke:var(--faint); stroke-width:2}
.state-running .body{}
.state-running #comp-generator .body,.state-running #comp-pump .body{stroke:var(--accent)}
.state-running .rotor{stroke:var(--accent)}
.state-running .rotor-b{stroke:var(--accent); transform-box:fill-box; transform-origin:center; animation-name:spin; animation-duration:.8s; animation-timing-function:linear; animation-iteration-count:infinite}
.fp{opacity:0}
@keyframes flow{from{offset-distance:0%}to{offset-distance:100%}}
.fp-supply{fill:var(--accent)} .fp-feed{fill:var(--energy)} .fp-polish{fill:#4f9fd4}
.state-running .fp-supply{opacity:1; animation-name:flow; animation-duration:2.6s; animation-timing-function:linear; animation-iteration-count:infinite}
.state-running .fp-feed{opacity:1; animation-name:flow; animation-duration:2s; animation-timing-function:linear; animation-iteration-count:infinite}
.state-standby .fp-polish{opacity:.85; animation-name:flow; animation-duration:5s; animation-timing-function:linear; animation-iteration-count:infinite}
.legend{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0}
.lg{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border-2); background:var(--surface); border-radius:99px; padding:7px 14px; font-size:13.5px; color:var(--ink); cursor:pointer; font-family:inherit; transition:.15s}
.lg:hover{border-color:var(--accent)}
.lg.active{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, var(--surface))}
.lgn{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;flex:none}
.tourinfo{margin-top:4px}

/* ---- Submittals & Closeout Desk ---- */
.desk-stats{gap:12px}
.desk-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 18px; box-shadow:var(--shadow); min-width:120px}
.desk-stat .n{display:block; font-family:"Poppins"; font-weight:700; font-size:26px; line-height:1}
.desk-stat .l{font-size:12px; color:var(--faint)}
.desk-stat.warn{border-color:color-mix(in srgb,var(--energy) 55%,transparent)}
.desk-stat.warn .n{color:var(--energy)}

.desk{display:grid; grid-template-columns:308px 1fr; gap:18px; align-items:start}
.reclist{padding:10px; max-height:760px; overflow:auto}
.reclist-head{font-family:ui-monospace,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); padding:8px 8px 10px}
.rec{display:block; width:100%; text-align:left; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:11px 13px; margin-bottom:8px; cursor:pointer; font-family:inherit; transition:.15s}
.rec:hover{border-color:var(--accent)}
.rec.active{border-color:var(--accent); border-left:3px solid var(--accent); background:var(--surface)}
.rec-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px}
.rec-nm{font-family:"Poppins"; font-weight:600; font-size:15px; line-height:1.2; color:var(--ink)}
.rec-meta{display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); margin-top:5px}
.rec-stage{font-family:ui-monospace,monospace; font-size:11px; color:var(--faint); flex:none}
.flag{font-family:ui-monospace,monospace; font-size:11px; font-weight:700}
.flag.due{color:var(--energy)} .flag.over{color:var(--danger)}

.desk-detail{padding:0; overflow:hidden}
.detail-head{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:22px 24px 16px; border-bottom:1px solid var(--border)}
.detail-nm{font-family:"Poppins"; font-weight:700; font-size:24px; margin:10px 0 4px; letter-spacing:-.01em}
.detail-sub{font-size:14px; max-width:520px}
.detail-site{font-size:12px; margin-top:6px}
.steps{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.step{display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--border-2); border-radius:999px; padding:6px 12px; font-family:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:.15s}
.step:hover{border-color:var(--accent); color:var(--ink)}
.step.on{background:var(--accent); border-color:var(--accent); color:#fff}
.step.done{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.step-dot{font-size:11px} .step-sep{color:var(--border-2); flex:none}

.desk-tabs{margin:0; padding:0 24px}
.desk-pane{padding:22px 24px}
.desk-note{font-size:13px; color:var(--muted); margin-bottom:16px}
.desk-note code{background:var(--surface-2); border:1px solid var(--border); padding:1px 6px; border-radius:6px; font-size:12px}
.desk-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.desk-field{margin-bottom:0}
.desk-field.wide{grid-column:1/-1}
.desk-field > span{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px}
.field-in{width:100%; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-sm); color:var(--ink); padding:11px 12px; font-size:14px; font-family:"Open Sans"; transition:.18s}
.field-in:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
.field-in.missing{border-color:color-mix(in srgb,var(--energy) 50%,transparent); background:color-mix(in srgb,var(--energy) 7%,var(--surface-2))}
textarea.field-in{resize:vertical; line-height:1.5}

.doc-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.doc-status{font-family:ui-monospace,monospace; font-size:13px; font-weight:600}
.doc-status.ok{color:var(--ok)} .doc-status.warn{color:var(--energy)}
.doc-copy{padding:8px 14px; min-height:0; font-size:13px}
.doc{background:var(--surface-2); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:var(--r-sm);
  padding:26px 30px; font-size:13.5px; line-height:1.8; white-space:pre-wrap; box-shadow:var(--shadow); max-width:820px}
.merge{background:color-mix(in srgb,var(--accent) 16%,var(--surface)); color:var(--accent-press); padding:0 4px; border-radius:4px; font-weight:600}
.merge.gap{background:color-mix(in srgb,var(--energy) 18%,var(--surface)); color:var(--warn)}
[data-theme="dark"] .merge{color:var(--accent)} [data-theme="dark"] .merge.gap{color:var(--energy)}
@media(max-width:900px){ .desk{grid-template-columns:1fr} .reclist{max-height:300px} }

footer.ft{border-top:1px solid var(--border); padding:40px 0 60px; color:var(--faint); font-size:13.5px; margin-top:40px}

@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

/* ===================== MOBILE ===================== */
.navtoggle{display:none; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--border-2); background:var(--surface); color:var(--ink); border-radius:10px; cursor:pointer}
.navtoggle svg{width:22px; height:22px}
.navtoggle:focus-visible{outline:none; box-shadow:var(--ring)}

@media (max-width: 920px){
  .wrap{padding:0 16px}
  .navtoggle{display:inline-flex}
  .nav-links{position:absolute; left:0; right:0; top:65px; display:none; flex-direction:column; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow);
    padding:10px 16px 18px; max-height:calc(100dvh - 65px); overflow:auto; z-index:55}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:13px 14px; font-size:16px; border-radius:10px}
  .nav-links a.active{background:var(--surface-3)}
  /* dropdown collapses inline within the hamburger sheet */
  .navdrop{flex-direction:column; align-items:stretch}
  .navdrop-toggle{width:100%; justify-content:space-between; padding:13px 14px; font-size:16px; border-radius:10px}
  .navdrop-menu{position:static; opacity:1; transform:none; box-shadow:none; border:0; background:transparent;
    padding:2px 0 4px 12px; min-width:0; display:none}
  .navdrop.open .navdrop-menu{display:flex}
  .navdrop-menu a{padding:11px 14px; font-size:15px}
  .section{padding:38px 0}
  .hero{padding:40px 0 18px}
  /* keep the schematic legible by letting it scroll instead of shrinking text */
  .diagram{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .schematic{min-width:640px}
  .card .tree{overflow-x:auto}
  .tree .tree{padding-left:14px}
  .filesearch{flex-wrap:wrap}
  .filesearch input{flex:1 1 100%; order:2; padding-left:0}
  .filesearch > svg{order:1}
  table{font-size:13.5px}
  .statline{gap:18px}
  .grid{gap:14px}
}
@media (max-width: 480px){
  .isp-logo{height:30px}
  .nav-inner{gap:10px; height:60px}
  .nav-links{top:59px}
  h1{letter-spacing:-.02em}
  .chip{font-size:11.5px; padding:4px 9px}
  .tour-bar{gap:10px}
  .seg{width:100%; justify-content:center}
  .segbtn{flex:1; text-align:center}
  .bubble{max-width:92%}
  .btn{width:auto}
  .auth-card{max-width:100%}
}

/* ---- control panel / permission manager ---- */
.select{width:100%; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-sm);
  color:var(--ink); padding:12px 14px; font-size:15px; font-family:"Open Sans"; min-height:46px}
.select:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
.chk{display:inline-flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink); cursor:pointer}
.chk input{width:17px; height:17px; accent-color:var(--accent)}
.chk.strong{font-weight:700; font-size:15.5px}
.permblock{border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; margin-top:12px; background:var(--surface-2)}
.permscope{display:flex; flex-direction:column; gap:8px; margin-top:10px; padding-left:26px; transition:opacity .15s}
.folders{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:4px; padding:8px 0 2px}
.fchk{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); cursor:pointer}
.fchk input{width:15px; height:15px; accent-color:var(--accent)}

/* ---- agent project picker (multi-select dropdown) ---- */
.agent-toolbar{display:flex; align-items:center; gap:10px; padding:0 2px 12px; border-bottom:1px solid var(--border); margin-bottom:12px; flex-wrap:wrap}
.proj-pick{position:relative}
.proj-btn{display:inline-flex; align-items:center; gap:8px; font-family:"Open Sans"; font-weight:600; font-size:13.5px;
  color:var(--ink); background:var(--surface-2); border:1px solid var(--border-2); border-radius:10px; padding:7px 12px; cursor:pointer; transition:.15s}
.proj-btn:hover{border-color:var(--accent)}
.proj-btn .caret{color:var(--muted); font-size:11px}
.proj-menu{position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:300px; max-height:340px; overflow:auto;
  background:var(--surface); border:1px solid var(--border-2); border-radius:12px; box-shadow:var(--shadow); padding:6px}
.proj-menu[hidden]{display:none}
.proj-opt{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; font-size:14px; color:var(--ink); cursor:pointer}
.proj-opt:hover{background:var(--surface-2)}
.proj-opt input{width:16px; height:16px; accent-color:var(--accent); flex:none}
.proj-div{height:1px; background:var(--border); margin:5px 2px}
.proj-tag{margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#b07400; background:color-mix(in srgb, #ffb43d 22%, transparent); border:1px solid #ffb43d55; border-radius:999px; padding:1px 7px}

/* process-visual generation progress bar (meeting detail) */
.gen-progress{max-width:760px; margin-top:12px}
.gen-progress-label{font-size:13px; color:var(--muted); margin-bottom:6px}
.gen-progress-track{height:8px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--border); overflow:hidden}
.gen-progress-bar{height:100%; width:40%; border-radius:999px; background:var(--accent);
  animation:genslide 1.1s ease-in-out infinite}
.gen-progress-err .gen-progress-label{color:var(--danger)}
.gen-progress-err .gen-progress-bar{background:var(--danger); animation:none; width:100%}
@keyframes genslide{0%{margin-left:-40%} 100%{margin-left:100%}}

/* ===== in-page meeting editor (flow cards + transcript) ===== */
.flows-editor{display:flex; flex-direction:column; gap:14px; margin-top:8px}
.ie-card{padding:14px}
.ie-card-head{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.ie-input{width:100%; font-family:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-2); border-radius:8px; padding:8px 10px}
.ie-input:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
.ie-title{font-size:16px; font-weight:700}
.ie-summary{margin-bottom:10px; color:var(--muted)}
.ie-steps{display:flex; flex-direction:column; gap:8px; margin:6px 0 10px}
.ie-step{display:grid; grid-template-columns:150px 1.4fr 110px 1.4fr auto; gap:8px; align-items:center}
.ie-select{font-family:inherit; font-size:13px; color:var(--ink); background:var(--surface);
  border:1px solid var(--border-2); border-radius:8px; padding:8px 9px; cursor:pointer}
.ie-x{border:1px solid var(--border-2); background:var(--surface); color:var(--muted); border-radius:8px;
  font-size:12px; font-weight:600; padding:6px 9px; cursor:pointer; white-space:nowrap}
.ie-x:hover{border-color:var(--danger); color:var(--danger)}
.ie-x-step{padding:6px 10px}
.ie-add{align-self:flex-start; border:1px dashed var(--border-2); background:transparent; color:var(--accent);
  border-radius:8px; font-size:12.5px; font-weight:600; padding:7px 12px; cursor:pointer}
.ie-add:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.ie-add-proc{margin-top:2px}
.ie-note{font-size:12px; color:var(--faint); font-style:italic}
.ie-textarea{width:100%; max-width:900px; min-height:320px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px; line-height:1.5; color:var(--ink); background:var(--surface);
  border:1px solid var(--border-2); border-radius:10px; padding:12px 14px}
.ie-textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
.ie-bar{position:sticky; bottom:0; z-index:30; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding:12px 14px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow)}
.ie-bar-label{font-size:13px; color:var(--muted); margin-right:auto}
.ie-save{background:var(--accent); border-color:var(--accent); color:#fff}
.ie-save:hover{filter:brightness(1.05)}
@media (max-width:640px){ .ie-step{grid-template-columns:1fr 1fr; } }

/* per-card edit button + in-place card editor */
.flow-wrap{position:relative}
.flow-edit-btn{position:absolute; top:8px; right:8px; z-index:6; border:1px solid var(--border-2);
  background:var(--surface); color:var(--muted); border-radius:8px; font-size:11.5px; font-weight:600;
  padding:4px 9px; cursor:pointer; opacity:.7}
.flow-wrap:hover .flow-edit-btn{opacity:1}
.flow-edit-btn:hover{border-color:var(--accent); color:var(--accent)}
.flow-card-editor{margin-top:10px; padding:14px; display:flex; flex-direction:column; gap:8px}

/* per-card Cancel/Save (inside the card editor, no global bar) */
.ie-cardbar{display:flex; gap:8px; justify-content:flex-end; align-items:center;
  margin-top:8px; padding-top:10px; border-top:1px solid var(--border)}
.ie-cardbar button{font-family:inherit; font-size:12px; font-weight:600; border-radius:8px;
  padding:6px 15px; cursor:pointer; border:1px solid var(--border-2)}
.ie-cardbar .ie-cancel{background:var(--surface); color:var(--muted)}
.ie-cardbar .ie-cancel:hover{color:var(--ink)}
.ie-cardbar .ie-save{background:var(--accent); border-color:var(--accent); color:#fff}
.ie-cardbar .ie-save:hover{filter:brightness(1.05)}
#transcript-cardbar{max-width:900px}

/* ===== work items (notes + file uploads on a meeting) ===== */
.wi-list{display:flex; flex-direction:column; gap:14px; margin-top:18px}
.wi-card{display:flex; flex-direction:column; gap:12px; padding:16px}
.wi-card-top{display:flex; gap:16px; align-items:flex-start}
.wi-thumb{flex:none; display:block; width:132px; height:100px; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); background:var(--surface-2); padding:0; cursor:zoom-in}
.wi-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.wi-thumb:hover{border-color:var(--accent)}
.wi-thumb-edit{width:180px; height:130px; margin:6px 0 10px; cursor:default}
.wi-body{flex:1; min-width:0}
.wi-note{font-size:15px; line-height:1.65; color:var(--ink)}
.wi-note p{margin:0 0 8px}
.wi-note p:last-child{margin-bottom:0}
.wi-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--faint)}
.wi-author{color:var(--muted)}
.wi-actions{flex:none; display:flex; gap:8px; align-items:center}
.wi-del:hover{border-color:var(--danger); color:var(--danger)}
.wi-empty{margin-top:18px}
.wi-form{margin-top:16px; max-width:760px; display:flex; flex-direction:column; gap:14px; padding:18px}
.wi-form-actions{display:flex; gap:10px; align-items:center}
.wi-help{margin:6px 0 0; font-size:12.5px; color:var(--faint)}
.wi-error{font-size:13px; color:var(--danger); margin-top:4px}
.wi-error ul{margin:0; padding-left:18px}

/* attached image: spans the card, keeps its own aspect ratio */
.wi-media{display:block; width:100%; padding:0; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); background:var(--surface-2); cursor:zoom-in}
.wi-media img{display:block; width:100%; height:auto; max-height:520px; object-fit:contain}
.wi-media:hover{border-color:var(--accent)}

/* non-image attachment: a downloadable file chip */
.wi-file{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px;
  text-decoration:none; border:1px solid var(--border); background:var(--surface-2); color:var(--muted)}
.wi-file:hover{border-color:var(--accent); color:var(--accent)}
.wi-file svg{flex:none; width:20px; height:20px}
.wi-file-ext{flex:none; font-size:11px; font-weight:700; letter-spacing:.06em}
.wi-file-name{font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wi-file-edit{margin:6px 0 10px}

.field-file{width:100%; font-family:inherit; font-size:13.5px; color:var(--muted);
  background:var(--surface-2); border:1px dashed var(--border-2); border-radius:10px; padding:12px}
.field-file::file-selector-button{font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--ink); background:var(--surface); border:1px solid var(--border-2); border-radius:8px;
  padding:7px 13px; margin-right:12px}
.field-file::file-selector-button:hover{border-color:var(--accent); color:var(--accent)}

/* full-screen image viewer */
.wi-lb[hidden]{display:none}
.wi-lb{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:64px 24px 24px; background:rgba(9,12,18,.92); cursor:zoom-out;
  animation:wi-lb-in .14s ease-out}
@keyframes wi-lb-in{from{opacity:0} to{opacity:1}}
.wi-lb-img{max-width:100%; max-height:100%; object-fit:contain; cursor:default;
  border-radius:8px; background:#fff}
.wi-lb-bar{position:absolute; top:0; left:0; right:0; height:52px; display:flex; align-items:center;
  gap:16px; padding:0 16px; color:#e8eaf0; background:rgba(9,12,18,.6)}
.wi-lb-name{flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; opacity:.85}
.wi-lb-dl{font-size:12.5px; font-weight:600; color:#e8eaf0; text-decoration:none; opacity:.85;
  border:1px solid rgba(255,255,255,.28); border-radius:8px; padding:6px 12px}
.wi-lb-dl:hover{opacity:1; border-color:rgba(255,255,255,.6)}
.wi-lb-close{font-size:26px; line-height:1; color:#e8eaf0; background:none; border:0; cursor:pointer;
  padding:4px 8px; opacity:.8}
.wi-lb-close:hover{opacity:1}
body.wi-lb-lock{overflow:hidden}

@media (max-width:640px){
  .wi-card-top{flex-direction:column}
  .wi-thumb{width:100%; height:180px}
  .wi-actions{align-self:flex-start}
  .wi-media img{max-height:340px}
  .wi-lb{padding:60px 10px 10px}
}

/* ===== process canvas: phase lanes + step status ===== */
/* Translucent bands behind the steps. Each lane owns a hue: a soft fill, a
   slightly stronger edge, and a dark tone the steps borrow for their border. */
.pc-lane{position:absolute; left:0; width:100%; box-sizing:border-box; pointer-events:none;
  border-top:1px solid var(--lane-edge); background:var(--lane-fill)}
.pc-lane:last-of-type{border-bottom:1px solid var(--lane-edge)}
.pc-lane[data-color="orange"]{--lane-fill:rgba(234,120,40,.13); --lane-edge:rgba(180,83,20,.34); --lane-ink:#9a4a12}
.pc-lane[data-color="blue"]  {--lane-fill:rgba(37,110,190,.13); --lane-edge:rgba(24,85,150,.34); --lane-ink:#14568f}
.pc-lane[data-color="yellow"]{--lane-fill:rgba(214,170,20,.17); --lane-edge:rgba(160,120,10,.36); --lane-ink:#8a6a08}
.pc-lane[data-color="purple"]{--lane-fill:rgba(130,80,200,.13); --lane-edge:rgba(95,55,160,.34); --lane-ink:#5b3aa0}
.pc-lane[data-color="green"] {--lane-fill:rgba(30,150,100,.13); --lane-edge:rgba(15,110,75,.34); --lane-ink:#0f6e4b}
/* Horizontal chip in the lane's top-left. It sits above the steps in z-order so
   a card parked at the top of a lane can never hide it; the default layout also
   leaves clearance below each boundary so that overlap is rare in practice. */
.pc-lane-lbl{position:absolute; top:5px; left:10px; pointer-events:auto; cursor:text; z-index:6;
  max-width:calc(100% - 20px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--lane-ink);
  background:color-mix(in srgb, var(--surface) 88%, transparent); border:1px solid var(--lane-edge);
  border-radius:6px; padding:2px 9px; line-height:1.35}
.pc-lane-lbl:focus{outline:none; box-shadow:var(--ring); background:var(--surface)}
/* the shared boundary: sits on the lane's bottom edge, grab to slide */
.pc-lane-grip{position:absolute; left:0; right:0; bottom:-5px; height:11px; pointer-events:auto;
  cursor:ns-resize; z-index:4}
.pc-lane-grip::after{content:""; position:absolute; left:0; right:0; top:5px; height:1px;
  background:var(--lane-edge); transition:.12s}
.pc-lane-grip:hover::after,.pc-lane.resizing .pc-lane-grip::after{height:3px; top:4px;
  background:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}

/* a step borrows its lane's dark tone for its border, and carries the lane hue
   so its fill can be derived from status without repeating 5x3 combinations */
.pc-tool .cnv-node[data-lane]{border-width:2px}
.pc-tool .cnv-node[data-lane="orange"]{border-color:#b45314; --lane-hue:#ea7828}
.pc-tool .cnv-node[data-lane="blue"]  {border-color:#185596; --lane-hue:#256ebe}
.pc-tool .cnv-node[data-lane="yellow"]{border-color:#a07a0a; --lane-hue:#d6aa14}
.pc-tool .cnv-node[data-lane="purple"]{border-color:#5f37a0; --lane-hue:#8250c8}
.pc-tool .cnv-node[data-lane="green"] {border-color:#0f6e4b; --lane-hue:#1e9664}
.pc-tool .cnv-node.sel[data-lane]{border-color:var(--accent)}

/* In progress carries the deep wash of its own lane, so a glance still reads
   which phase the work is in. Complete leaves the lane behind for one green —
   done is done regardless of phase, and it matches the green check badge.
   Both stay light enough for the dark label text. */
.pc-tool .cnv-node[data-lane][data-status="in progress"]{
  background:color-mix(in srgb, var(--lane-hue) 48%, var(--surface))}
.pc-tool .cnv-node[data-status="complete"]{background:oklch(0.68 0.13 158)}
/* the owner pill sits on that wash, so give it an opaque backing */
.pc-tool .cnv-node[data-status="in progress"] .pc-node-owner,
.pc-tool .cnv-node[data-status="complete"] .pc-node-owner{
  background:color-mix(in srgb, var(--surface) 82%, transparent)}

/* per-step status dropdown (deliberately small — it's secondary to the label) */
/* status sits in its own strip in the card's top-right corner; the card gets
   extra top padding so the pill never sits on top of the type icon */
.pc-tool .cnv-node{padding-top:24px}
.pc-node-status{position:absolute; top:4px; right:5px; margin:0; max-width:calc(100% - 10px);
  font-family:inherit; font-size:9.5px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-align:center; cursor:pointer;
  padding:1px 4px; border-radius:999px; border:1px solid var(--border-2); background:var(--surface-2);
  color:var(--muted); -webkit-appearance:none; appearance:none}
.pc-node-status:focus{outline:none; box-shadow:var(--ring)}
.pc-node-status option{font-size:12px; text-transform:none; letter-spacing:normal}
.pc-node-status[data-v="open"]{border-color:var(--border-2); background:var(--surface-2); color:var(--muted)}
.pc-node-status[data-v="in progress"],.pc-node-status[data-v="complete"]{
  border-color:color-mix(in srgb, var(--lane-hue, var(--border-2)) 45%, var(--border-2));
  background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--ink)}

/* ===== step status badge (upper-left of each canvas item) ===== */
/* Fixed purple/green regardless of lane: the fill says which phase a step is
   in, the badge says how far along it is, so the two never compete. Hidden for
   "open" — an unstarted step stays unmarked. */
.pc-node-badge{position:absolute; top:4px; left:5px; z-index:3; display:none;
  width:20px; height:20px; border-radius:50%; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 0 0 2px var(--surface), 0 1px 3px oklch(0.3 0.03 260 / .3)}
.pc-tool .cnv-node[data-status="in progress"] .pc-node-badge,
.pc-tool .cnv-node[data-status="complete"] .pc-node-badge{display:inline-flex}
/* Flat fills, not gradients: at 20px a gradient just muddies the glyph edge.
   Lightness is tuned so the white stroke clears 4.5:1 on both. */
.pc-tool .cnv-node[data-status="in progress"] .pc-node-badge{background:oklch(0.50 0.19 295)}
.pc-tool .cnv-node[data-status="complete"] .pc-node-badge{background:oklch(0.50 0.14 158)}
/* 14 of 20px — the artwork now fills its own viewBox, so the glyph reads as an
   icon rather than a mark floating in a disc. */
.pc-badge-ic{display:none; width:16px; height:16px}
.pc-badge-ic svg{width:100%; height:100%; display:block; fill:none; stroke:currentColor;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.pc-tool .cnv-node[data-status="in progress"] .pc-badge-arrow{display:block}
.pc-tool .cnv-node[data-status="complete"] .pc-badge-check{display:block}

/* ===== condensed phase view ===== */
/* Left-to-right strip, one block per lane. Uniform blocks are the point here —
   they're being compared — so the variation carries meaning instead: the live
   phase is raised and ringed, finished ones go green, the rest recede. */
.pc-condensed{flex:1; min-height:0; overflow:auto; display:flex; align-items:flex-start; gap:12px;
  padding:16px; background:var(--surface-2)}
.pc-condensed[hidden]{display:none}
.pc-phase{flex:1 1 0; min-width:186px; display:flex; flex-direction:column; gap:9px;
  padding:14px 15px; border:1px solid var(--border); border-radius:12px; background:var(--surface);
  transition:box-shadow .18s, border-color .18s}
.pc-phase[data-color="orange"]{--lane-hue:#ea7828}
.pc-phase[data-color="blue"]  {--lane-hue:#256ebe}
.pc-phase[data-color="yellow"]{--lane-hue:#d6aa14}
.pc-phase[data-color="purple"]{--lane-hue:#8250c8}
.pc-phase[data-color="green"] {--lane-hue:#1e9664}

.pc-phase-head{display:flex; align-items:center; gap:8px}
.pc-phase-dot{flex:none; width:9px; height:9px; border-radius:50%; background:var(--lane-hue)}
.pc-phase-name{flex:1; min-width:0; font-size:11.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted)}
.pc-phase-tick{flex:none; width:15px; height:15px; color:oklch(0.55 0.14 158)}
.pc-phase-tick svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}

.pc-phase-count{font-size:14px; font-weight:650; color:var(--ink); line-height:1.3}
.pc-phase-bar{height:5px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--border); overflow:hidden}
.pc-phase-bar span{display:block; height:100%; background:var(--lane-hue); transition:width .25s}

.pc-phase-now{display:flex; flex-direction:column; gap:2px; padding-top:8px;
  border-top:1px solid var(--border)}
.pc-phase-now-lbl{font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint)}
.pc-phase-now-step{font-size:12.5px; line-height:1.4; color:var(--ink)}

/* every step in the phase is finished */
.pc-phase[data-state="done"]{border-color:oklch(0.68 0.13 158);
  background:color-mix(in srgb, oklch(0.68 0.13 158) 13%, var(--surface))}
.pc-phase[data-state="done"] .pc-phase-name{color:oklch(0.42 0.11 158)}
.pc-phase[data-state="done"] .pc-phase-bar span{background:oklch(0.68 0.13 158)}
/* the phase actually being worked — the one to look at first */
.pc-phase[data-state="active"]{border-color:var(--lane-hue);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--lane-hue) 18%, transparent), 0 4px 12px -6px rgba(15,23,42,.3)}
.pc-phase[data-state="active"] .pc-phase-name{color:var(--lane-hue)}
/* nothing started yet, but it's where the work picks up next */
.pc-phase[data-state="next"]{border-color:color-mix(in srgb, var(--lane-hue) 45%, var(--border))}
/* not reached yet */
.pc-phase[data-state="idle"]{background:var(--surface); opacity:.72}

@media (max-width:900px){
  .pc-condensed{flex-wrap:wrap}
  .pc-phase{flex:1 1 240px}
}