/* ============================================================
   Leadflix Build Board — production styles
   Design system + board CSS carried over from the approved
   prototype. Added: login + project picker. Removed: share
   banner, info popover, and their helpers.
   ============================================================ */
:root{
  /* ===== Leadflix brand (leadflix.io): near-black chrome · electric-blue accent · warm cream ===== */
  --paper:#F5F2EA; --mist:#ECE9E1; --mist-2:#E2DED3; --tint:#E4EEF6; --card:#FFFFFF;
  --accent:#B6D8F4; --accent-deep:#2F6DA6;          /* Leadflix sky-blue (light, on dark) + deep companion (on light) — per-project overridable */
  --sage:var(--accent); --sage-deep:var(--accent-deep);  /* legacy names → resolve to brand accent */
  --teal-dark:#1E1E1E; --teal-darker:#121212;       /* Leadflix near-black chrome (legacy names) */
  --ink:#15171C; --muted:#5C616B; --line:rgba(11,12,14,.13); --line-2:rgba(11,12,14,.07);

  /* status system — semantic, independent of the brand accent.
     'granskning' is violet (not blue) so it never reads as the electric-blue brand colour. */
  --st-ej:#8A8F98;         --st-ej-bg:#ECEBE6;
  --st-design:#C6923F;     --st-design-bg:#F5ECD9;      /* amber (light) — DESIGN, in progress */
  --st-designklar:#9A7328; --st-designklar-bg:#EFE7D3;  /* amber (deep)  — DESIGN, finished */
  --st-utveckling:#6BA0A8; --st-utveckling-bg:#E4EFF0;  /* teal (light)  — DEVELOPMENT, in progress */
  --st-byggd:#46727A;      --st-byggd-bg:#DCEAEC;       /* teal (deep)   — DEVELOPMENT, finished */
  --st-granskning:#6E57A8; --st-granskning-bg:#ECE7F5;
  --st-godkand:#3E7856;    --st-godkand-bg:#E5EFE8;
  --st-andring:#B0483A;    --st-andring-bg:#F5E5E1;
  --st-struken:#9A9A93;    --st-struken-bg:#EDECE7;

  --f-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --f-display:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --maxw:1360px; --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--f-body);font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:var(--teal-darker);}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:2px;}
.muted-cell{color:var(--muted);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
@media(max-width:640px){.wrap{padding:0 15px;}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* status chip primitives */
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:500;font-size:11px;letter-spacing:.03em;padding:4px 10px 4px 8px;white-space:nowrap;border-radius:2px;}
.chip .d{width:7px;height:7px;border-radius:50%;flex:none;}
.st-ej{background:var(--st-ej-bg);color:var(--st-ej);}.st-ej .d{background:var(--st-ej);}
.st-design{background:var(--st-design-bg);color:var(--st-design);}.st-design .d{background:var(--st-design);}
.st-designklar{background:var(--st-designklar-bg);color:var(--st-designklar);}.st-designklar .d{background:var(--st-designklar);}
.st-utveckling{background:var(--st-utveckling-bg);color:var(--st-utveckling);}.st-utveckling .d{background:var(--st-utveckling);}
.st-byggd{background:var(--st-byggd-bg);color:var(--st-byggd);}.st-byggd .d{background:var(--st-byggd);}
.st-granskning{background:var(--st-granskning-bg);color:var(--st-granskning);}.st-granskning .d{background:var(--st-granskning);}
.st-godkand{background:var(--st-godkand-bg);color:var(--st-godkand);}.st-godkand .d{background:var(--st-godkand);}
.st-andring{background:var(--st-andring-bg);color:var(--st-andring);}.st-andring .d{background:var(--st-andring);}
.st-struken{background:var(--st-struken-bg);color:var(--st-struken);}.st-struken .d{background:var(--st-struken);}
.st-dot-ej{background:var(--st-ej);}.st-dot-design{background:var(--st-design);}.st-dot-designklar{background:var(--st-designklar);}.st-dot-utveckling{background:var(--st-utveckling);}.st-dot-byggd{background:var(--st-byggd);}
.st-dot-granskning{background:var(--st-granskning);}.st-dot-godkand{background:var(--st-godkand);}.st-dot-andring{background:var(--st-andring);}.st-dot-struken{background:var(--st-struken);}

/* ============ LOGIN ============ */
body.screen-login{background:var(--paper);}
.login-split{min-height:100vh;display:grid;grid-template-columns:minmax(400px,44%) 1fr;}
.login-hero{background:var(--teal-darker);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:44px;padding:58px 56px 44px;position:relative;overflow:hidden;}
.login-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(760px 440px at 16% -8%, rgba(182,216,244,.30), transparent 62%),
  radial-gradient(440px 300px at 98% 8%, rgba(132,178,219,.14), transparent 55%);}
.login-hero>*{position:relative;}
.login-hero .eyebrow{font-family:var(--f-display);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);display:inline-flex;align-items:center;gap:12px;}
.login-hero .eyebrow::before{content:"";width:28px;height:1px;background:var(--sage);opacity:.8;}
.login-hero h1{font-family:var(--f-serif);font-weight:500;font-size:clamp(46px,4.9vw,74px);letter-spacing:-.02em;line-height:.98;margin-top:18px;}
.lh-sub{color:rgba(247,246,242,.78);font-size:15.5px;max-width:400px;margin-top:18px;line-height:1.62;}
.lh-pipe{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.pchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-size:11px;letter-spacing:.03em;padding:6px 12px;border-radius:20px;background:rgba(247,246,242,.07);border:1px solid rgba(247,246,242,.15);color:rgba(247,246,242,.85);white-space:nowrap;}
.pchip::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;}
.pchip.p-ej::before{background:#B9B9B2;}
.pchip.p-arbete::before{background:#D3A75E;}
.pchip.p-gransk::before{background:#6BA0A8;}
.pchip.p-godkand{background:rgba(62,120,86,.30);border-color:rgba(123,180,144,.5);color:#DFEEE4;}
.pchip.p-godkand::before{background:#7BB490;}
.parr{color:rgba(247,246,242,.38);font-size:12px;}
.lh-foot{font-family:var(--f-display);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,246,242,.48);}
.login-main{display:flex;align-items:center;justify-content:center;padding:48px 28px;}
.login-box{width:min(400px,100%);}
.login-box h2{font-family:var(--f-display);font-weight:500;font-size:21px;letter-spacing:.01em;text-transform:uppercase;color:var(--teal-darker);}
.login-box>.login-sub{margin:6px 0 28px;}
.login-sub{font-size:14px;color:var(--muted);line-height:1.55;}
@media(max-width:880px){
  .login-split{grid-template-columns:1fr;min-height:auto;}
  .login-hero{padding:36px 22px 28px;gap:24px;}
  .login-hero h1{font-size:36px;}
  .lh-sub{font-size:14px;margin-top:12px;}
  .login-main{padding:36px 18px 64px;align-items:flex-start;}
}
.login-form{display:flex;flex-direction:column;gap:15px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field span{font-family:var(--f-display);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.field input{border:1px solid var(--line);border-radius:3px;padding:12px 13px;font-size:15px;background:var(--paper);transition:border-color .2s,background .2s;}
.field input:focus{outline:none;border-color:var(--sage-deep);background:var(--card);}
.login-err{background:var(--st-andring-bg);color:var(--st-andring);border:1px solid var(--st-andring);border-radius:3px;padding:9px 12px;font-size:13px;}
.login-btn{margin-top:4px;font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--teal-darker);color:#fff;padding:14px;border-radius:3px;transition:background .2s,transform .15s;}
.login-btn:hover{background:#2D2D2D;transform:translateY(-1px);}
.login-btn:active{transform:translateY(0);}
.login-btn:disabled{opacity:.6;cursor:default;transform:none;}
.login-demo{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted);line-height:1.6;}
.login-demo b{font-family:var(--f-mono);font-size:11.5px;color:var(--sage-deep);}
.login-foot{font-family:var(--f-display);font-size:11px;letter-spacing:.04em;color:var(--muted);}

/* ============ PICKER ============ */
.pick-top{background:var(--teal-darker);color:#fff;}
.pick-top-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;flex-wrap:wrap;}
.pick-user{display:flex;align-items:center;gap:14px;}
.pick-user .me{font-family:var(--f-display);font-size:13px;letter-spacing:.02em;color:rgba(247,246,242,.85);}
.picker{padding:38px 0 90px;}
.pick-lead{font-size:15.5px;color:var(--muted);margin-bottom:26px;max-width:600px;}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.proj-card{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:24px 24px 20px;display:flex;flex-direction:column;gap:20px;transition:box-shadow .22s,transform .16s,border-color .2s;box-shadow:0 1px 0 rgba(11,12,14,.03);}
.proj-card:hover{box-shadow:0 16px 40px rgba(11,12,14,.14);border-color:var(--sage);transform:translateY(-3px);}
.proj-eyebrow{font-family:var(--f-display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);}
.proj-top h2{font-family:var(--f-serif);font-weight:500;font-size:25px;letter-spacing:-.01em;margin-top:8px;color:var(--teal-darker);}
.proj-stats{display:flex;gap:22px;}
.pstat{display:flex;flex-direction:column;gap:2px;}
.pstat b{font-family:var(--f-display);font-weight:500;font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink);}
.pstat span{font-size:11px;color:var(--muted);letter-spacing:.02em;}
.pstat.has b{color:var(--st-andring);}
.proj-bar{height:5px;background:var(--mist-2);border-radius:3px;overflow:hidden;}
.proj-fill{height:100%;background:linear-gradient(90deg,var(--sage-deep),var(--sage));border-radius:3px;transition:width .5s var(--ease);}
.proj-open{font-family:var(--f-display);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--sage-deep);display:inline-flex;align-items:center;gap:7px;margin-top:-6px;}
.proj-open .arr{transition:transform .22s var(--ease);}
.proj-card:hover .proj-open .arr{transform:translateX(4px);}
.board-missing{max-width:var(--maxw);margin:0 auto;padding:80px 28px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:18px;}

/* ============ TOPBAR ============ */
.topbar{background:var(--teal-darker);color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(0,0,0,.2);}
.topbar-inner{display:flex;align-items:center;gap:24px;padding:16px 28px;flex-wrap:wrap;}
@media(max-width:640px){.topbar-inner{padding:12px 15px;gap:14px;}}
.brand{display:flex;flex-direction:column;gap:3px;min-width:0;}
.brand .eyebrow{font-family:var(--f-display);font-weight:500;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);}
.brand h1{font-family:var(--f-display);font-weight:500;font-size:19px;letter-spacing:.01em;text-transform:uppercase;line-height:1;}
.progwrap{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px;}
.progtop{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-display);}
.progtop #progLabel{font-size:12px;color:rgba(247,246,242,.72);letter-spacing:.02em;}
.progtop #progPct{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;}
.progbar{height:6px;background:rgba(247,246,242,.16);border-radius:3px;overflow:hidden;}
.progbar #progFill{height:100%;background:linear-gradient(90deg,#84B2DB,#B6D8F4);border-radius:3px;transition:width .5s var(--ease);}

.topbar-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.roleswitch{display:flex;background:rgba(247,246,242,.1);border-radius:3px;padding:3px;}
.rolebtn{font-family:var(--f-display);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:2px;color:rgba(247,246,242,.7);transition:background .2s,color .2s;}
.rolebtn.on{background:var(--accent);color:var(--teal-darker);font-weight:600;}
.meChip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-size:11.5px;letter-spacing:.02em;color:rgba(247,246,242,.85);background:rgba(247,246,242,.08);padding:7px 12px;border-radius:3px;}
.meChip .dotu{width:6px;height:6px;border-radius:50%;background:var(--sage);}
.tbtn{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;padding:8px 12px;border-radius:3px;color:rgba(247,246,242,.82);border:1px solid rgba(247,246,242,.18);transition:background .2s,border-color .2s;}
.tbtn:hover{background:rgba(247,246,242,.1);border-color:rgba(247,246,242,.35);}
.tbtn.primary{background:var(--accent);color:var(--teal-darker);border-color:var(--accent);font-weight:600;}
.tbtn.primary:hover{background:#9EC8E9;border-color:#9EC8E9;}

/* ============ CONTROLS ============ */
.controls{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line);}
.controls-inner{display:flex;align-items:center;gap:16px;padding:14px 28px;flex-wrap:wrap;}
@media(max-width:640px){.controls-inner{padding:11px 15px;gap:10px;}}
.viewtoggle{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.viewbtn{font-family:var(--f-display);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:8px 16px;color:var(--muted);transition:background .2s,color .2s;}
.viewbtn.on{background:var(--teal-dark);color:#fff;}
.statfilters{display:flex;gap:7px;flex-wrap:wrap;flex:1;}
.filter-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-size:11px;letter-spacing:.02em;padding:6px 11px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--muted);transition:border-color .2s,background .2s;}
.filter-chip .d{width:7px;height:7px;border-radius:50%;}
.filter-chip b{font-variant-numeric:tabular-nums;color:var(--ink);}
.filter-chip.on{border-color:var(--sage-deep);background:var(--tint);}
.statpill.st-ej .d{background:var(--st-ej);}.statpill.st-design .d{background:var(--st-design);}.statpill.st-designklar .d{background:var(--st-designklar);}.statpill.st-utveckling .d{background:var(--st-utveckling);}.statpill.st-byggd .d{background:var(--st-byggd);}
.statpill.st-granskning .d{background:var(--st-granskning);}.statpill.st-godkand .d{background:var(--st-godkand);}.statpill.st-andring .d{background:var(--st-andring);}.statpill.st-struken .d{background:var(--st-struken);}
#allChip{font-family:var(--f-display);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:20px;border:1px solid var(--line);color:var(--muted);}
#allChip:hover{border-color:var(--sage-deep);}
.searchbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:3px;padding:7px 12px;background:var(--card);}
.searchbox input{border:none;outline:none;background:none;font-size:13.5px;width:150px;}
.searchbox svg{opacity:.5;flex:none;}

/* ============ BOARD ============ */
.board{padding:30px 28px 120px;}
@media(max-width:640px){.board{padding:20px 15px 100px;}}

/* --- tree --- */
.tree{display:flex;flex-direction:column;}
.branch{display:flex;flex-direction:column;}
.children{margin-left:26px;padding-left:20px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:9px;margin-top:9px;margin-bottom:2px;}
.branch>.children{margin-bottom:9px;}

.node{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:13px 16px;border:1px solid var(--line);border-radius:3px;background:var(--card);transition:box-shadow .2s,transform .15s,border-color .2s;position:relative;margin-top:9px;}
.branch>.node:first-child{margin-top:0;}
.node:hover{box-shadow:0 6px 20px rgba(11,12,14,.1);border-color:var(--sage);transform:translateY(-1px);}
.node .pid{font-family:var(--f-display);font-weight:500;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);flex:none;min-width:34px;}
.node .nm{font-family:var(--f-display);font-weight:500;font-size:14.5px;letter-spacing:.01em;flex:none;}
.node .flags{display:flex;gap:5px;}
.node .spacer{flex:1;}
.node.lvl-0{background:var(--teal-darker);color:#fff;border-color:var(--teal-darker);}
.node.lvl-0 .pid{color:rgba(247,246,242,.6);}
.node.lvl-1{background:var(--tint);}
.node.lvl-2{background:var(--mist);}
.node.lvl-3{background:var(--card);}
.node::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:transparent;}
.st-border-godkand::before{background:var(--st-godkand);}
.st-border-andring::before{background:var(--st-andring);}
.st-border-granskning::before{background:var(--st-granskning);}
.st-border-byggd::before{background:var(--st-byggd);}
.st-border-design::before{background:var(--st-design);}
.st-border-designklar::before{background:var(--st-designklar);}
.st-border-utveckling::before{background:var(--st-utveckling);}
.st-border-ej::before{background:var(--st-ej);}
.st-border-struken::before{background:var(--st-struken);}

.tag{font-family:var(--f-display);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:2px;white-space:nowrap;}
.tag-lock{background:rgba(132,178,219,.22);color:var(--sage-deep);}
.tag-var{background:rgba(176,120,107,.14);color:#A6604F;}
.tag-dec{background:#F4ECDA;color:#96702B;border:1px dashed #B4923F;}
.vflag{color:#96702B;font-size:11px;}
.cbadge{font-family:var(--f-display);font-size:11px;color:var(--muted);white-space:nowrap;}
.cbadge.has{color:var(--st-andring);}

.vgroup{margin-top:9px;margin-left:26px;padding-left:20px;border-left:1px solid var(--line);}
.vgroup summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display);font-size:12px;letter-spacing:.04em;color:var(--sage-deep);padding:7px 0;}
.vgroup summary::-webkit-details-marker{display:none;}
.vgroup summary .car{display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;border:1px solid var(--sage-deep);border-radius:50%;font-size:10px;transition:transform .25s var(--ease);flex:none;}
.vgroup[open] summary .car{transform:rotate(45deg);}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;padding:8px 0 4px;}
.vchip{display:flex;align-items:center;gap:8px;text-align:left;font-family:var(--f-display);font-size:12px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:3px;padding:9px 11px;position:relative;transition:border-color .2s,box-shadow .2s;overflow:hidden;}
.vchip:hover{border-color:var(--sage);box-shadow:0 3px 10px rgba(11,12,14,.08);}
.vchip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;}
.vchip.st-border-godkand::before{background:var(--st-godkand);}.vchip.st-border-andring::before{background:var(--st-andring);}
.vchip.st-border-granskning::before{background:var(--st-granskning);}.vchip.st-border-byggd::before{background:var(--st-byggd);}
.vchip.st-border-design::before{background:var(--st-design);}.vchip.st-border-designklar::before{background:var(--st-designklar);}.vchip.st-border-utveckling::before{background:var(--st-utveckling);}.vchip.st-border-ej::before{background:var(--st-ej);}
.vchip .d{width:7px;height:7px;border-radius:50%;flex:none;}
.vchip .vid{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px;}
.vchip .vc{margin-left:auto;font-size:10.5px;color:var(--st-andring);}

/* --- map --- */
.map-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.map-hint{font-size:13px;color:var(--muted);font-style:italic;}
.zoomctl{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.zbtn{font-family:var(--f-display);font-size:11.5px;letter-spacing:.03em;padding:7px 13px;color:var(--muted);font-variant-numeric:tabular-nums;transition:background .2s,color .2s;}
.zbtn.on{background:var(--teal-dark);color:#fff;}
.map-scroll{overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:3px;background:
  linear-gradient(rgba(11,12,14,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(11,12,14,.025) 1px,transparent 1px);
  background-size:28px 28px;background-color:var(--card);padding:34px 30px 44px;}
.map-zoom{width:max-content;margin:0 auto;}
.map-zoom.z1{zoom:.55;}
.map-zoom.z2{zoom:.78;}
.map-zoom.z3{zoom:1;}

.oc,.oc ul{list-style:none;margin:0;display:flex;justify-content:center;align-items:flex-start;}
.oc ul{position:relative;padding:26px 0 0;}
.oc ul::before{content:"";position:absolute;top:0;left:50%;width:1px;height:26px;background:var(--line);}
.oc li{display:flex;flex-direction:column;align-items:center;position:relative;padding:26px 6px 0;}
.oc li::before{content:"";position:absolute;top:0;left:50%;width:1px;height:26px;background:var(--line);}
.oc li::after{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--line);}
.oc li:first-child::after{left:50%;width:50%;}
.oc li:last-child::after{left:0;width:50%;}
.oc li:only-child::after{display:none;}
.oc>li{padding-top:0;}
.oc>li::before,.oc>li::after{display:none;}

.mnode{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:128px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:3px;padding:9px 11px 8px;position:relative;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .15s;}
.mnode:hover{border-color:var(--sage);box-shadow:0 8px 20px rgba(11,12,14,.14);transform:translateY(-2px);z-index:2;}
.mnode::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;}
.mnode.st-border-godkand::before{background:var(--st-godkand);}
.mnode.st-border-andring::before{background:var(--st-andring);}
.mnode.st-border-granskning::before{background:var(--st-granskning);}
.mnode.st-border-byggd::before{background:var(--st-byggd);}
.mnode.st-border-design::before{background:var(--st-design);}
.mnode.st-border-designklar::before{background:var(--st-designklar);}
.mnode.st-border-utveckling::before{background:var(--st-utveckling);}
.mnode.st-border-ej::before{background:var(--st-ej);}
.mnode.st-border-struken::before{background:var(--st-struken);}
.mnode .mid{font-family:var(--f-display);font-size:9.5px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;}
.mnode .mnm{font-family:var(--f-display);font-weight:500;font-size:12px;line-height:1.25;color:var(--ink);}
.mnode .mfoot{display:flex;align-items:center;gap:7px;margin-top:1px;}
.mnode .md{width:7px;height:7px;border-radius:50%;}
.mnode .mc{font-family:var(--f-display);font-size:9.5px;color:var(--st-andring);}
.mnode.lvl-0{background:var(--teal-darker);border-color:var(--teal-darker);width:150px;}
.mnode.lvl-0 .mnm{color:#fff;font-size:13px;}
.mnode.lvl-0 .mid{color:var(--sage);}
.mnode.lvl-1{background:var(--tint);}
.mnode.lvl-2{background:var(--mist);}
.mnode.dim{opacity:.28;}

/* --- list --- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:3px;}
table{width:100%;border-collapse:collapse;min-width:720px;background:var(--card);}
thead th{font-family:var(--f-display);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;background:var(--mist);border-bottom:1px solid var(--line);position:sticky;top:0;white-space:nowrap;}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle;}
tbody tr{cursor:pointer;transition:background .15s;}
tbody tr:hover{background:rgba(182,216,244,.20);}
tbody tr:last-child td{border-bottom:none;}
.c-id,.pid{font-variant-numeric:tabular-nums;font-family:var(--f-display);font-size:12px;color:var(--muted);white-space:nowrap;}
.nmcell .nm{font-family:var(--f-display);font-weight:500;font-size:13.5px;}
.nmcell .fl{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--sage-deep);margin-top:2px;}
.c-ck{text-align:center;width:70px;}
.ck{width:22px;height:22px;border:1px solid var(--line);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--st-godkand);background:var(--card);transition:background .15s,border-color .15s;}
.ck.on{background:var(--st-godkand-bg);border-color:var(--st-godkand);}
.c-pri{text-align:center;width:56px;}
.pri{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);}
.pri.set{color:var(--ink);font-weight:500;}
.c-cm{white-space:nowrap;}
.empty{text-align:center;color:var(--muted);padding:60px 0;font-style:italic;}

/* client mode hides team-only bits (defence in depth — app also omits them from markup) */
body.mode-client .team-only{display:none!important;}

/* ============ DRAWER ============ */
.scrim{position:fixed;inset:0;background:rgba(11,12,14,.42);z-index:60;opacity:0;transition:opacity .26s var(--ease);}
.scrim.on{opacity:1;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,94vw);background:var(--paper);z-index:61;box-shadow:-20px 0 60px rgba(11,12,14,.24);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s var(--ease);}
.drawer.open{transform:translateX(0);}
.dr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 18px;border-bottom:1px solid var(--line);background:var(--teal-darker);color:#fff;}
.dr-eyebrow{font-family:var(--f-display);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);}
.dr-title{font-family:var(--f-serif);font-weight:500;font-size:27px;letter-spacing:-.01em;margin-top:7px;line-height:1.03;}
.dr-close{width:34px;height:34px;border-radius:50%;background:rgba(247,246,242,.12);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none;transition:background .2s;}
.dr-close:hover{background:rgba(247,246,242,.24);}
.dr-body{overflow-y:auto;padding:22px 26px 40px;flex:1;}
.dr-purpose{font-size:14.5px;line-height:1.6;color:var(--ink);}
.dr-file{margin-top:12px;font-size:12.5px;color:var(--muted);}
.dr-file code{font-family:var(--f-mono);font-size:12px;color:var(--sage-deep);background:var(--tint);padding:2px 7px;border-radius:2px;}
.dr-sec{margin-top:26px;}
.dr-sec h3{font-family:var(--f-display);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.seg{display:flex;flex-wrap:wrap;gap:6px;}
.segbtn{font-family:var(--f-display);font-size:11.5px;letter-spacing:.02em;padding:7px 12px;border-radius:3px;border:1px solid var(--line);background:var(--card);color:var(--muted);transition:border-color .18s,background .18s,color .18s;}
.segbtn:hover{border-color:var(--sage-deep);}
.segbtn.on{color:#fff;font-weight:500;}
.segbtn.on.st-ej{background:var(--st-ej);border-color:var(--st-ej);}
.segbtn.on.st-design{background:var(--st-design);border-color:var(--st-design);}
.segbtn.on.st-designklar{background:var(--st-designklar);border-color:var(--st-designklar);}
.segbtn.on.st-utveckling{background:var(--st-utveckling);border-color:var(--st-utveckling);}
.segbtn.on.st-byggd{background:var(--st-byggd);border-color:var(--st-byggd);}
.segbtn.on.st-granskning{background:var(--st-granskning);border-color:var(--st-granskning);}
.segbtn.on.st-godkand{background:var(--st-godkand);border-color:var(--st-godkand);}
.segbtn.on.st-andring{background:var(--st-andring);border-color:var(--st-andring);}
.segbtn.on.st-struken{background:var(--st-struken);border-color:var(--st-struken);}
.dr-quick{display:flex;gap:10px;margin-top:16px;}
.bigbtn{flex:1;font-family:var(--f-display);font-size:13px;letter-spacing:.03em;text-transform:uppercase;font-weight:500;padding:14px;border-radius:3px;transition:transform .15s,box-shadow .2s;}
.bigbtn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(11,12,14,.16);}
.bigbtn.approve{background:var(--st-godkand);color:#fff;}
.bigbtn.revise{background:var(--st-andring-bg);color:var(--st-andring);border:1px solid var(--st-andring);}
.checks{display:flex;flex-direction:column;gap:8px;}
.checkrow{display:flex;align-items:center;gap:11px;font-family:var(--f-body);font-size:14px;color:var(--ink);padding:4px 0;text-align:left;}
.checkrow .box{width:22px;height:22px;border:1px solid var(--line);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--st-godkand);flex:none;transition:background .15s,border-color .15s;}
.checkrow.on .box{background:var(--st-godkand-bg);border-color:var(--st-godkand);}
.prirow{display:flex;align-items:center;gap:12px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line-2);}
.prirow label{font-family:var(--f-display);font-size:12px;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;}
.prirow select{border:1px solid var(--line);border-radius:3px;padding:6px 10px;font-size:13.5px;background:var(--card);}
.urlrow{display:flex;gap:8px;}
.urlrow input{flex:1;border:1px solid var(--line);border-radius:3px;padding:9px 12px;font-size:13.5px;background:var(--card);}
.openbtn{display:inline-flex;align-items:center;font-family:var(--f-display);font-size:12px;letter-spacing:.03em;text-transform:uppercase;padding:0 14px;border-radius:3px;background:var(--sage);color:var(--teal-darker);font-weight:500;white-space:nowrap;}
.hint{font-size:12px;color:var(--muted);margin-top:8px;font-style:italic;}

.comments{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.nocomments{font-size:13.5px;color:var(--muted);font-style:italic;padding:6px 0;}
.comment{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:12px 14px;border-left:3px solid var(--sage);}
.comment.resolved{opacity:.6;border-left-color:var(--st-godkand);}
.comment.resolved .ctext{text-decoration:line-through;text-decoration-color:var(--muted);}
.chead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;}
.cauthor{font-family:var(--f-display);font-weight:500;font-size:13px;display:inline-flex;align-items:center;gap:8px;}
.crole{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:2px;}
.role-team{background:var(--tint);color:var(--sage-deep);}
.role-client{background:rgba(176,120,107,.16);color:#A6604F;}
.cts{font-family:var(--f-display);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ctext{font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.cactions{display:flex;gap:14px;margin-top:8px;}
.clink{font-family:var(--f-display);font-size:11px;letter-spacing:.03em;color:var(--sage-deep);}
.clink:hover{text-decoration:underline;}
.clink.danger{color:var(--st-andring);}
.addc{border:1px solid var(--line);border-radius:3px;background:var(--card);overflow:hidden;}
.addc textarea{width:100%;border:none;outline:none;padding:12px 14px;font-size:14px;line-height:1.5;resize:vertical;background:none;}
.addc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-top:1px solid var(--line-2);background:var(--paper);}
.asrole{font-family:var(--f-display);font-size:11px;color:var(--muted);letter-spacing:.02em;}
.asrole b{color:var(--ink);}
.sendc{font-family:var(--f-display);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;background:var(--teal-dark);color:#fff;padding:8px 16px;border-radius:3px;transition:background .2s;}
.sendc:hover{background:var(--teal-darker);}

/* ============ TOAST ============ */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;background:var(--teal-darker);color:#fff;font-family:var(--f-display);font-size:13px;letter-spacing:.02em;padding:12px 22px;border-radius:4px;box-shadow:0 12px 30px rgba(11,12,14,.3);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast.bad{background:var(--st-andring);}

footer.pf{border-top:1px solid var(--line);padding:22px 28px 44px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}


/* ============ MOBILE TREE (wrap instead of overflow) ============ */
@media(max-width:680px){
  .node{flex-wrap:wrap;gap:6px 10px;padding:11px 12px 10px;}
  .node .pid{min-width:0;}
  .node .nm{font-size:13.5px;}
  .node .spacer{display:none;}
  .node .chip{margin-left:auto;}
  .children{margin-left:12px;padding-left:10px;}
  .vgroup{margin-left:12px;padding-left:10px;}
}


/* ============ CLIENT LOGO (per project) ============ */
.client-logo{height:24px;width:auto;max-width:150px;display:block;object-fit:contain;}
.client-logo-wrap{display:flex;align-items:center;gap:12px;min-width:0;}
.client-logo-wrap .cl-sep{width:1px;height:26px;background:rgba(247,246,242,.22);flex:none;}