/* =====================================================================
   HEALTHLINK TALENT — WIREFRAME
   Amplixiti "Aksel" structural pattern · HealthLink color schematics
   ---------------------------------------------------------------------
   THE UNIVERSAL FRAMEWORK (every module is an instance of this):
     DATA (Source)  ->  PROCESS (Project)  ->  OUTPUT (Dispatch)
     measured by the Recursive Triality:
       Intent   = green  (#87bc42)  capacity / original logic
       Transition = amber (#e0a82e) kinetic flow / velocity
       Entropy  = red    (#e0533d)  friction / decay
   Tokens below are the single source of truth — swap --accent or the
   schema map and every pattern re-skins. (replaceable by data structure)
   ===================================================================== */

:root{
  /* ---- HealthLink color schematics (DO NOT recolor) ---- */
  --accent:#87bc42;            /* primary action / Intent */
  --accent-d:#6fa233;
  --accent-soft:rgba(135,188,66,.12);
  --accent-line:rgba(135,188,66,.32);

  --ink-900:#0f1a26;           /* sidebar base */
  --ink-800:#16273a;
  --ink-700:#1a3142;           /* sidebar raised */
  --ink-600:#274056;

  --canvas:#f4f7f9;            /* light workspace */
  --card:#ffffff;
  --card-2:#fbfcfd;
  --line:#e6ecf0;
  --line-2:var(--chip);
  --chip:#eef2f5;                  /* neutral chip / avatar bg */
  --topbar:rgba(244,247,249,.86);

  --text:#0f1a26;
  --text-2:#52606d;
  --text-3:#8a97a4;

  /* Status triality */
  --green:#87bc42; --green-bg:#eef6e3;
  --amber:#e0a82e; --amber-bg:#fbf2dc;
  --red:#e0533d;   --red-bg:#fbe6e1;
  --blue:#3d7fe0;  --blue-bg:#e4eefb;

  --r-card:14px; --r-sm:8px; --r-pill:999px;
  --drawer-w:480px; --sidebar-w:248px;
  --pad:22px;
  --shadow:0 1px 2px rgba(15,26,38,.04),0 8px 24px rgba(15,26,38,.06);
  --shadow-lg:0 12px 40px rgba(15,26,38,.18);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Dark mode — workspace tokens flip; dark sidebar is constant in both.
   Eye-comfort palette for long clinical sessions (low pure-white glare). */
body[data-theme="dark"]{
  --canvas:#0a121b;
  --card:#13202e;
  --card-2:#0f1a26;
  --line:#243a4f;
  --line-2:#1c2e40;
  --chip:#1c2e40;
  --topbar:rgba(10,18,27,.86);
  --text:#e9eff4;
  --text-2:#9db0bf;
  --text-3:#64778a;
  --green-bg:rgba(135,188,66,.16);
  --amber-bg:rgba(224,168,46,.18);
  --red-bg:rgba(224,83,61,.18);
  --blue-bg:rgba(61,127,224,.18);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Global icon default — inline SVGs without explicit sizing fall back to a
   huge intrinsic size, so pin everything to 16px and let wrappers override. */
svg{width:16px;height:16px;flex:none}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--ink-900);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ============================ APP SHELL ============================ */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;width:100vw}

/* ---- Sidebar (dark) ---- */
.sidebar{
  background:linear-gradient(180deg,var(--ink-900),var(--ink-800));
  border-right:1px solid rgba(255,255,255,.05);
  display:flex;flex-direction:column;height:100vh;overflow:hidden;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.05)}
.brand .logo{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:var(--ink-900);font-weight:800;font-size:15px;flex:none}
.brand .name{font-weight:700;font-size:15px;color:#fff;letter-spacing:-.2px;line-height:1}
.brand .name .g{color:var(--accent)}
.brand .sub{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.5px;margin-top:3px;text-transform:uppercase}

.nav{flex:1;overflow-y:auto;padding:12px 12px 24px}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:6px}
.nav-group{margin-top:16px}
.nav-group:first-child{margin-top:4px}
.nav-label{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.32);padding:6px 12px 8px;display:flex;align-items:center;gap:7px}
.nav-label .dot{width:5px;height:5px;border-radius:50%}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);
  color:rgba(255,255,255,.62);font-size:13px;font-weight:500;cursor:pointer;
  transition:all .14s ease;border:1px solid transparent;position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.045);color:#fff}
.nav-item.active{background:var(--accent-soft);color:#fff;border-color:var(--accent-line)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--accent);border-radius:0 3px 3px 0}
.nav-item svg{width:16px;height:16px;flex:none;opacity:.85}
.nav-item .badge{margin-left:auto;background:var(--accent);color:var(--ink-900);font-size:10px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill)}
.nav-item .badge.amber{background:var(--amber);color:#3a2c06}
.sidebar-foot{padding:12px;border-top:1px solid rgba(255,255,255,.05)}
.role-switch{margin-bottom:10px}
.role-switch label{display:block;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.32);margin:0 0 5px 4px}
.role-switch select{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:8px 10px;font-family:var(--font);font-size:12px;font-weight:600;outline:none;cursor:pointer}
.role-switch select:focus{border-color:var(--accent-line)}
.nav-item.proprietary.active{background:rgba(224,168,46,.14);border-color:rgba(224,168,46,.4)}
.nav-item.proprietary.active::before{background:var(--amber)}
.nav-item .lock{margin-left:auto;color:var(--amber);opacity:.9}
.nav-item .lock svg{width:12px;height:12px}
.prop-banner{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:12px;background:rgba(224,168,46,.1);border:1px solid rgba(224,168,46,.32);margin-bottom:18px}
.prop-banner .pi{width:30px;height:30px;border-radius:8px;background:rgba(224,168,46,.18);color:var(--amber);display:grid;place-items:center;flex:none}
.prop-banner b{font-size:12.5px;color:var(--text)}
.prop-banner span{font-size:11.5px;color:var(--text-2)}
.tenant-chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--text-2);background:var(--card);border:1px solid var(--line);padding:4px 10px;border-radius:var(--r-pill)}
.tenant-chip .d{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.userchip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.03)}
.userchip .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-d));display:grid;place-items:center;color:var(--ink-900);font-weight:700;font-size:12px}
.userchip .meta{line-height:1.25}
.userchip .meta b{color:#fff;font-size:12.5px;font-weight:600}
.userchip .meta span{color:rgba(255,255,255,.4);font-size:10.5px}

/* ---- Workspace (light) ---- */
.workspace{background:var(--canvas);height:100vh;overflow-y:auto;position:relative}
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(244,247,249,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:13px 28px;display:flex;align-items:center;gap:18px;
}
.crumb{font-size:12px;color:var(--text-3)}
.crumb b{color:var(--text);font-weight:600}
.spine{display:flex;align-items:center;gap:0;margin-left:4px}
.spine .seg{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3);padding:4px 10px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line)}
.spine .seg .b{width:6px;height:6px;border-radius:50%;background:#cfd8de}
.spine .seg.on{color:var(--text)}
.spine .seg.s1.on .b{background:var(--green)} .spine .seg.s2.on .b{background:var(--amber)} .spine .seg.s3.on .b{background:var(--accent)}
.spine .arr{color:var(--text-3);margin:0 6px;font-size:11px}
.search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;width:280px;color:var(--text-3);font-size:12.5px}
.search input{border:0;outline:0;background:transparent;font-family:var(--font);font-size:12.5px;color:var(--text);width:100%}
.tb-btn{width:36px;height:36px;border-radius:10px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--text-2);cursor:pointer}
.tb-btn:hover{border-color:var(--accent-line);color:var(--accent-d)}

.page{padding:26px 28px 60px;max-width:1320px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-title{font-size:22px;font-weight:700;letter-spacing:-.4px}
.page-sub{font-size:13px;color:var(--text-2);margin-top:4px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;transition:all .14s}
.btn:hover{border-color:#d2dce2}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink-900)}
.btn.primary:hover{background:var(--accent-d);box-shadow:0 6px 18px var(--accent-soft)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.dark{background:var(--ink-700);border-color:var(--ink-700);color:#fff}
.btn.sm{padding:6px 11px;font-size:12px}

/* ---- generic primitives ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill)}
.tag.g{background:var(--green-bg);color:#4a6b1e} .tag.a{background:var(--amber-bg);color:#8a6512}
.tag.r{background:var(--red-bg);color:#a13322} .tag.b{background:var(--blue-bg);color:#27538f}
.tag.n{background:var(--chip);color:var(--text-2)}
.mono{font-family:var(--mono)}
.muted{color:var(--text-3)}

/* ---- Layer band (the universal scaffold) ---- */
.flow{display:grid;grid-template-columns:248px 1fr 248px;gap:16px}
.lane{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.lane-h{padding:13px 16px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:9px}
.lane-h .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.lane-h .ic.s{background:var(--green-bg);color:#4a6b1e}
.lane-h .ic.p{background:var(--amber-bg);color:#8a6512}
.lane-h .ic.d{background:var(--accent-soft);color:var(--accent-d)}
.lane-h .lt{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3)}
.lane-h .ln{font-size:13.5px;font-weight:600;line-height:1.1}
.lane-b{padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.src-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;cursor:pointer;transition:all .12s}
.src-item:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.src-item .si{width:22px;height:22px;border-radius:6px;background:var(--chip);display:grid;place-items:center;color:var(--text-2);flex:none}
.src-item small{display:block;color:var(--text-3);font-size:10.5px;font-weight:500}
.src-item b{font-weight:600;font-size:12px}
.src-item .ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-2);font-weight:600}

/* ---- KPI cards ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .k-top{display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.kpi .k-top .ic{width:24px;height:24px;border-radius:7px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center}
.kpi .k-val{font-size:30px;font-weight:800;letter-spacing:-1px;margin-top:12px;line-height:1}
.kpi .k-foot{margin-top:9px;font-size:11.5px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.kpi .delta{font-weight:700} .kpi .delta.up{color:var(--accent-d)} .kpi .delta.dn{color:var(--red)}
.kpi.hero{background:linear-gradient(135deg,var(--ink-900),var(--ink-700));border-color:var(--ink-700)}
.kpi.hero .k-top,.kpi.hero .k-foot{color:rgba(255,255,255,.55)}
.kpi.hero .k-top .ic{background:var(--accent-soft);color:var(--accent)}
.kpi.hero .k-val{color:#fff}
.kpi.hero .k-val small{color:var(--accent);font-size:15px;font-weight:700}

/* spark */
.spark{position:absolute;right:0;bottom:0;width:90px;height:42px;opacity:.5}

/* ---- section ---- */
.sec{margin-top:18px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-h h3{font-size:14.5px;font-weight:700}
.sec-h .hint{font-size:11.5px;color:var(--text-3)}

/* ---- Triality gauges ---- */
.triality{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gauge{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--card-2)}
.gauge .gt{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700}
.gauge .gt .lab{display:flex;align-items:center;gap:7px}
.gauge .gd{width:9px;height:9px;border-radius:50%}
.gauge .gv{font-size:24px;font-weight:800;margin:10px 0 4px;letter-spacing:-.5px}
.gauge .bar{height:7px;border-radius:6px;background:var(--chip);overflow:hidden}
.gauge .bar i{display:block;height:100%;border-radius:6px}
.gauge .gx{font-size:10.5px;color:var(--text-3);margin-top:8px}
.g-green .gd,.g-green .bar i{background:var(--green)} .g-green .gv{color:#4a6b1e}
.g-amber .gd,.g-amber .bar i{background:var(--amber)} .g-amber .gv{color:#8a6512}
.g-red .gd,.g-red .bar i{background:var(--red)} .g-red .gv{color:#a13322}

/* ---- funnel ---- */
.funnel{display:flex;flex-direction:column;gap:8px}
.fstage{display:flex;align-items:center;gap:12px}
.fstage .fl{width:108px;font-size:12px;color:var(--text-2);font-weight:500;text-align:right;flex:none}
.fstage .ftrack{flex:1;height:30px;background:var(--chip);border-radius:8px;overflow:hidden}
.fstage .ffill{height:100%;border-radius:8px;display:flex;align-items:center;padding:0 10px;color:#fff;font-size:11.5px;font-weight:700;background:linear-gradient(90deg,var(--accent-d),var(--accent))}
.fstage .fv{width:46px;font-family:var(--mono);font-weight:600;font-size:12.5px;flex:none}

/* ---- two col ---- */
.cols{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
.cols-3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}

/* ---- list rows ---- */
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.row .av{width:34px;height:34px;border-radius:9px;background:var(--chip);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--text-2);flex:none}
.row .av.g{background:var(--green-bg);color:#4a6b1e}
.row .nm{font-size:13px;font-weight:600;line-height:1.3}
.row .mt{font-size:11.5px;color:var(--text-3)}
.row .rt{margin-left:auto;text-align:right}

/* ---- timeline ---- */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 16px}
.tl-item::before{content:"";position:absolute;left:-19px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--card);border:2px solid var(--accent)}
.tl-item.amber::before{border-color:var(--amber)} .tl-item.red::before{border-color:var(--red)} .tl-item.n::before{border-color:#cfd8de}
.tl-item .th{font-size:12.5px;font-weight:600}
.tl-item .tx{font-size:11.5px;color:var(--text-2);margin-top:2px}
.tl-item .tm{font-size:10.5px;color:var(--text-3);margin-top:3px}

/* ---- Kanban ---- */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(190px,1fr));gap:13px;overflow-x:auto;padding-bottom:8px}
.kcol{background:var(--card-2);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-height:480px}
.kcol-h{padding:11px 13px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:8px;position:sticky;top:0}
.kcol-h .kd{width:8px;height:8px;border-radius:50%}
.kcol-h .kn{font-size:12px;font-weight:700}
.kcol-h .kc{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-3);background:var(--card);border:1px solid var(--line);padding:1px 7px;border-radius:var(--r-pill)}
.kcol-b{padding:10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px;cursor:pointer;transition:all .14s}
.lcard:hover{border-color:var(--accent-line);box-shadow:var(--shadow);transform:translateY(-1px)}
.lcard .ln{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.lcard .lm{font-size:11px;color:var(--text-3);margin-top:3px;display:flex;align-items:center;gap:5px}
.lcard .lf{display:flex;align-items:center;gap:5px;margin-top:9px;flex-wrap:wrap}
.heat{width:7px;height:7px;border-radius:50%;flex:none}
.heat.h{background:var(--red)} .heat.w{background:var(--amber)} .heat.c{background:var(--blue)}
.src-chip{font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:var(--chip);color:var(--text-2)}
.src-chip.li{background:#e4eefb;color:#27538f}
.src-chip.csv{background:var(--green-bg);color:#4a6b1e}
.mini-act{display:flex;gap:5px;margin-top:9px}
.mini-act .ma{flex:1;display:grid;place-items:center;height:28px;border-radius:7px;border:1px solid var(--line);color:var(--text-2);cursor:pointer}
.mini-act .ma:hover{border-color:var(--accent-line);color:var(--accent-d);background:var(--accent-soft)}
.mini-act .ma svg{width:14px;height:14px}

/* ---- table ---- */
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);padding:11px 16px;border-bottom:1px solid var(--line);background:var(--card-2)}
tbody td{padding:12px 16px;border-bottom:1px solid var(--line-2);font-size:12.5px;vertical-align:middle}
tbody tr:hover{background:var(--card-2);cursor:pointer}
tbody tr:last-child td{border-bottom:0}

/* ---- filters ---- */
.filterbar{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.fpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:7px 13px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);color:var(--text-2);cursor:pointer}
.fpill.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.fpill .ct{font-family:var(--mono);font-size:10.5px;opacity:.7}
.seg-toggle{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:3px;margin-left:auto}
.seg-toggle button{border:0;background:transparent;font-family:var(--font);font-size:12px;font-weight:600;color:var(--text-3);padding:6px 13px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:6px}
.seg-toggle button.on{background:var(--accent-soft);color:var(--accent-d)}
.seg-toggle button svg{width:14px;height:14px}

/* ---- calendar mini ---- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .cdow{font-size:10px;font-weight:700;color:var(--text-3);text-align:center;text-transform:uppercase}
.cal .cd{aspect-ratio:1;border:1px solid var(--line-2);border-radius:8px;padding:6px;font-size:11px;color:var(--text-2);position:relative}
.cal .cd.has{border-color:var(--accent-line);background:var(--accent-soft)}
.cal .cd .pip{position:absolute;bottom:5px;left:6px;font-size:9px;font-weight:700;color:var(--accent-d)}
.cal .cd.amber{border-color:rgba(224,168,46,.4);background:var(--amber-bg)}
.cal .cd.amber .pip{color:#8a6512}

/* ---- composer ---- */
.composer{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.composer .ch{display:flex;border-bottom:1px solid var(--line-2)}
.composer .cch{flex:1;text-align:center;padding:10px;font-size:12px;font-weight:600;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.composer .cch svg{width:14px;height:14px}
.composer .cch.on{color:var(--accent-d);box-shadow:inset 0 -2px 0 var(--accent)}
.composer .cb{padding:13px}
.composer textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;font-family:var(--font);font-size:12.5px;resize:none;min-height:78px;outline:none}
.composer textarea:focus{border-color:var(--accent-line)}
.composer .cf{display:flex;align-items:center;gap:8px;margin-top:10px}
.tmpl{font-size:11px;color:var(--text-2);background:var(--chip);border:0;padding:5px 10px;border-radius:var(--r-pill);cursor:pointer}

/* ---- inbox ---- */
.inbox{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--card);height:560px}
.thread-list{border-right:1px solid var(--line);overflow-y:auto}
.thread{padding:13px 15px;border-bottom:1px solid var(--line-2);cursor:pointer;display:flex;gap:11px}
.thread:hover,.thread.on{background:var(--card-2)}
.thread.on{box-shadow:inset 3px 0 0 var(--accent)}
.thread .av{width:36px;height:36px;border-radius:9px;background:var(--chip);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--text-2);flex:none;position:relative}
.thread .ch-ic{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--card)}
.thread .ch-ic svg{width:9px;height:9px;color:#fff}
.thread .nm{font-size:12.5px;font-weight:600}
.thread .pv{font-size:11px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.thread .tm{font-size:10px;color:var(--text-3);margin-left:auto}
.conv{display:flex;flex-direction:column}
.conv-h{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:11px}
.conv-b{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--card-2)}
.bubble{max-width:72%;padding:10px 13px;border-radius:13px;font-size:12.5px;line-height:1.45}
.bubble.in{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble.out{background:var(--accent);color:var(--ink-900);align-self:flex-end;border-bottom-right-radius:4px}
.bubble .bm{font-size:10px;margin-top:5px;opacity:.6}

/* ---- drawer ---- */
.drawer-scrim{position:fixed;inset:0;background:rgba(15,26,38,.45);backdrop-filter:blur(2px);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:var(--drawer-w);max-width:94vw;background:var(--canvas);z-index:90;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-h{padding:18px 20px;border-bottom:1px solid var(--line);background:var(--card);display:flex;align-items:flex-start;gap:13px}
.drawer-h .av{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-d));display:grid;place-items:center;color:var(--ink-900);font-weight:800;font-size:17px;flex:none}
.drawer-b{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.drawer-x{margin-left:auto;cursor:pointer;color:var(--text-3);width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.drawer-x:hover{background:var(--chip);color:var(--text)}
.stepper{display:flex;gap:4px}
.stepper .stp{flex:1;text-align:center;font-size:9.5px;font-weight:600;color:var(--text-3);padding:7px 2px;border-radius:7px;background:var(--card);border:1px solid var(--line);text-transform:uppercase;letter-spacing:.3px}
.stepper .stp.done{background:var(--accent-soft);color:var(--accent-d);border-color:var(--accent-line)}
.stepper .stp.on{background:var(--accent);color:var(--ink-900);border-color:var(--accent)}
.dfield{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.dfield svg{width:15px;height:15px;color:var(--text-3);flex:none}
.dfield .dl{color:var(--text-3);width:92px;flex:none}
.dfield .dv{font-weight:500}

/* ---- modal ---- */
.modal-scrim{position:fixed;inset:0;background:rgba(15,26,38,.5);backdrop-filter:blur(3px);z-index:80;display:none;align-items:center;justify-content:center;padding:24px}
.modal-scrim.open{display:flex}
.modal{width:560px;max-width:100%;background:var(--canvas);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;max-height:88vh;display:flex;flex-direction:column}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--line);background:var(--card);display:flex;align-items:center;gap:11px}
.modal-b{padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.modal-f{padding:15px 22px;border-top:1px solid var(--line);background:var(--card);display:flex;gap:10px;justify-content:flex-end}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.field input,.field select{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:var(--font);font-size:13px;outline:none;background:var(--card)}
.field input:focus,.field select:focus{border-color:var(--accent-line)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- empty state (Standby Command Center) ---- */
.standby{border:1.5px dashed var(--line);border-radius:var(--r-card);padding:30px;text-align:center;background:repeating-linear-gradient(135deg,transparent,transparent 11px,rgba(135,188,66,.025) 11px,rgba(135,188,66,.025) 22px)}
.standby .si{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;margin:0 auto 14px}
.standby h4{font-size:15px;font-weight:700}
.standby p{font-size:12.5px;color:var(--text-2);margin-top:6px;max-width:440px;margin-inline:auto}
.standby .blueprint{display:flex;justify-content:center;gap:8px;margin-top:16px}
.standby .bp{font-size:10.5px;font-weight:600;color:var(--text-3);background:var(--card);border:1px solid var(--line);padding:6px 11px;border-radius:8px;display:flex;align-items:center;gap:6px}

/* ---- login preview ---- */
.login-prev{display:grid;grid-template-columns:1fr 1fr;height:560px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.login-brand{background:linear-gradient(160deg,var(--ink-900),var(--ink-700));padding:40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-brand .blob{position:absolute;border-radius:50%;filter:blur(60px)}
.login-card{background:var(--card);padding:44px;display:flex;flex-direction:column;justify-content:center}
.role-pick{display:grid;gap:11px;margin-top:18px}
.role-opt{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:all .14s}
.role-opt:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.role-opt.on{border-color:var(--accent);background:var(--accent-soft)}
.role-opt .ri{width:40px;height:40px;border-radius:11px;background:var(--chip);display:grid;place-items:center;color:var(--text-2)}
.role-opt.on .ri{background:var(--accent);color:var(--ink-900)}

/* framework doc */
.fw-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fw-card{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--card);position:relative}
.fw-card .ph{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.fw-card h3{font-size:17px;font-weight:800;margin:8px 0 4px;letter-spacing:-.3px}
.fw-card p{font-size:12.5px;color:var(--text-2);line-height:1.5}
.fw-card .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px}
.fw-card ul{margin-top:12px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.fw-card li{font-size:11.5px;color:var(--text-2);display:flex;align-items:center;gap:7px}
.fw-card li svg{width:13px;height:13px;color:var(--accent-d);flex:none}
.fw-arrow{position:absolute;right:-20px;top:50%;transform:translateY(-50%);z-index:2;color:var(--text-3);background:var(--canvas);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line)}

.audit-table td .tag{font-size:10px}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.legend span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2)}
.legend .d{width:9px;height:9px;border-radius:50%}

.hide{display:none!important}
.note{font-size:11px;color:var(--text-3);font-style:italic}

/* icon-size overrides for larger wrappers */
.kpi .k-top .ic svg{width:14px;height:14px}
.lane-h .ic svg{width:15px;height:15px}
.standby .si svg{width:22px;height:22px}
.fw-card .ico svg{width:20px;height:20px}
.role-opt .ri svg{width:18px;height:18px}
.drawer-h .av svg{width:20px;height:20px}
.thread .ch-ic svg{width:9px;height:9px}
.spark{width:90px;height:42px}

/* ---- animations / micro-interactions (reusable) ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
#screens .page{animation:fadeUp .26s ease both}
.kpi,.card{transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.nav-item,.btn,.fpill,.src-item,.role-opt{transition:all .14s ease}
.modal{animation:popIn .2s ease both}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---- goal-based wayfinding bar (where you are · goal · next) ---- */
.goalbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;margin-bottom:18px;background:linear-gradient(90deg,var(--accent-soft),transparent 70%);border:1px solid var(--accent-line);border-radius:12px}
.goalbar .gb-ic{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--ink-900);display:grid;place-items:center;flex:none}
.goalbar .gb-here{font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.goalbar .gb-goal{font-size:13.5px;font-weight:600;color:var(--text)}
.goalbar .gb-seq{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.gb-step{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);color:var(--text-2)}
.gb-step.on{background:var(--accent);border-color:var(--accent);color:var(--ink-900)}
.gb-step .n{width:16px;height:16px;border-radius:50%;background:var(--chip);display:grid;place-items:center;font-size:9px;font-weight:700}
.gb-step.on .n{background:rgba(15,26,38,.18)}
.gb-arrow{color:var(--text-3)}
.gb-ai{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--accent-d);background:var(--accent-soft);border:1px dashed var(--accent-line);padding:5px 11px;border-radius:var(--r-pill);cursor:pointer}
.gb-ai svg{width:13px;height:13px}

/* ---- role capability matrix ---- */
.matrix{width:100%;border-collapse:collapse;font-size:12px}
.matrix th{text-align:center;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);padding:10px 8px;border-bottom:1px solid var(--line)}
.matrix th:first-child,.matrix td:first-child{text-align:left}
.matrix td{padding:10px 8px;border-bottom:1px solid var(--line-2);text-align:center}
.matrix .yes{color:var(--accent-d)} .matrix .no{color:var(--line)} .matrix .opt{color:var(--amber)}
.matrix td:first-child{font-weight:600}

/* ---- phase cards ---- */
.phase{display:flex;gap:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:12px;position:relative}
.phase .pnum{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.phase.now .pnum{background:var(--accent);color:var(--ink-900)}
.phase.done .pnum{background:var(--green-bg);color:#4a6b1e}
.phase.next .pnum{background:var(--chip);color:var(--text-3)}
.phase h4{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.phase p{font-size:12px;color:var(--text-2);margin-top:3px}
.phase .pchips{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}

/* ---- AI copilot launcher ---- */
.ai-btn{background:linear-gradient(135deg,var(--accent),var(--accent-d));border:0;color:var(--ink-900)}
.choice{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--card)}
.choice:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.choice .ci{width:40px;height:40px;border-radius:11px;background:var(--chip);display:grid;place-items:center;color:var(--text-2);flex:none}
.choice:hover .ci{background:var(--accent);color:var(--ink-900)}

/* ---- consistent select styling (kill raw OS look on closed state) ---- */
.field select{
  -webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a97a4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;
}

/* ---- custom role dropdown (themed to the dark sidebar; replaces native select) ---- */
.rsel{position:relative}
.rsel-btn{width:100%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:8px 10px;font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.rsel-btn:hover{border-color:var(--accent-line)}
.rsel-btn .chev{margin-left:auto;color:rgba(255,255,255,.5);transition:transform .15s}
.rsel.open .rsel-btn .chev{transform:rotate(180deg)}
.rsel-btn .chev svg{width:14px;height:14px}
.rsel-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--ink-700);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 -8px 30px rgba(0,0,0,.4);padding:6px;display:none;z-index:50;max-height:320px;overflow-y:auto}
.rsel.open .rsel-menu{display:block;animation:popIn .15s ease both}
.rsel-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;color:rgba(255,255,255,.7);font-size:12px;font-weight:500;cursor:pointer}
.rsel-opt:hover{background:rgba(255,255,255,.06);color:#fff}
.rsel-opt.on{background:var(--accent-soft);color:#fff}
.rsel-opt .rk{margin-left:auto;font-size:9px;font-weight:700;color:var(--accent);opacity:0;text-transform:uppercase}
.rsel-opt.on .rk{opacity:1}
.rsel-opt .ri-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

@media(max-width:1100px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .flow,.cols,.cols-3,.fw-row,.triality{grid-template-columns:1fr}
}