/* ============================================================
   SAULNA — MOTION PORTAL
   Tokens & components are lifted verbatim from SAULNA_DESIGN_SYSTEM.md
   (§3–§5, §9, §14). No invented colors, radii, or shadows.
   ============================================================ */

:root{
  /* obsidian */
  --ink-900:#09090B; --ink-850:#0E0E11; --ink-800:#131317; --ink-700:#1B1B20;
  --ink-600:#26262C; --ink-line:#2E2E36; --ink-line-2:#3A3A44;
  /* parchment */
  --parchment:#F4F1E8; --parchment-raised:#FAF8F1; --parchment-sunken:#ECE7DA; --parchment-line:#DED7C6;
  /* bone (text on dark) */
  --bone-50:#F7F4EC; --bone-100:#ECE7DA; --bone-300:#C9C2B2; --bone-500:#968F7E;
  /* ink text (on light) */
  --ink-text-strong:#0B0B0C; --ink-text:#1A1812; --ink-text-muted:#6B6457;
  /* gold */
  --gold-300:#E4CB91; --gold-500:#C9A86A; --gold-600:#B08F50; --gold-700:#8A6E3B;
  --gold-rule:linear-gradient(90deg,#8A6E3B 0%,#E4CB91 50%,#8A6E3B 100%);
  --gold-edge:linear-gradient(180deg,#E9D29B 0%,#C9A86A 45%,#9A7B3F 100%);
  --gold-foil:linear-gradient(92deg,#9A7B3F 0%,#E9D29B 35%,#C9A86A 70%,#8A6E3B 100%);
  /* semantic */
  --emerald-500:#3E7E5E; --emerald-300:#6FB294;
  --amber-500:#B7842F;   --amber-300:#D6A95A;
  --garnet-500:#9B3F3F;  --garnet-300:#C56B6B;
  --slate-500:#5C7288;   --slate-300:#8AA0B4;
  /* type */
  --font-serif:"Archivo","Playfair Display",Didot,Georgia,serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  /* radius */
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  /* elevation */
  --shadow-sm:0 1px 2px rgba(0,0,0,.40);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.50);
  --edge-light:inset 0 1px 0 rgba(247,244,236,.05);
  --focus-gold:0 0 0 2px rgba(201,168,106,.55);
  /* motion */
  --ease-brand:cubic-bezier(0.2,0.7,0.2,1);
  --dur-fast:150ms; --dur:220ms; --dur-slow:320ms;
  /* layout */
  --sidebar-w:248px; --topbar-h:60px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--ink-900); color:var(--bone-100);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;}
.s-display,h1.serif,h2.serif{font-family:var(--font-serif);color:var(--bone-50);letter-spacing:-0.01em;}
p{margin:0;}
a{color:var(--gold-500);text-decoration:none;}
a:hover{color:var(--gold-300);text-decoration:underline;text-underline-offset:2px;}
button{font-family:inherit;}
.s-num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum";}

:focus-visible{outline:none;box-shadow:var(--focus-gold);border-radius:var(--radius-sm);}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--ink-850);}
::-webkit-scrollbar-thumb{background:var(--ink-line);border-radius:0;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-line-2);}

/* ---- shared brand bits ---- */
.s-eyebrow{font:600 12px/1.4 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-500);}
.s-rule{height:1px;width:64px;background:var(--gold-rule);border:0;display:block;}
.s-rule--full{width:100%;height:1px;background:var(--ink-line);border:0;display:block;}
.muted{color:var(--bone-500);}
.mono{font-family:var(--font-mono);}

/* ============================================================
   BOOT / LOADING
   ============================================================ */
.boot{height:100vh;display:grid;place-content:center;justify-items:center;gap:18px;}
.boot__mark{
  font-family:var(--font-serif);font-weight:600;font-size:56px;color:var(--bone-50);
  width:96px;height:96px;display:grid;place-content:center;background:var(--ink-850);
  border:1px solid var(--ink-line);border-radius:var(--radius-lg);position:relative;overflow:hidden;
}
.boot__mark::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--gold-rule);
  animation:shimmer 1.6s var(--ease-brand) infinite;
}
.boot__label{color:var(--bone-500);font-size:14px;letter-spacing:.04em;}
@keyframes shimmer{0%{opacity:.25;transform:translateX(-40%)}50%{opacity:1;transform:translateX(0)}100%{opacity:.25;transform:translateX(40%)}}

#topbar-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold-rule);z-index:200;transition:width var(--dur-slow) var(--ease-brand),opacity var(--dur) var(--ease-brand);opacity:0;}
#topbar-progress.active{opacity:1;}

/* ============================================================
   APP SHELL
   ============================================================ */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:minmax(var(--topbar-h),auto) 1fr;
  grid-template-areas:"brand topbar" "sidebar main";height:100vh;}

/* brand corner */
.brand{grid-area:brand;background:var(--ink-900);border-right:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);
  display:flex;align-items:center;gap:12px;padding:0 20px;}
.brand__mark{font-family:var(--font-serif);font-weight:700;color:var(--bone-50);font-size:24px;line-height:1;
  width:34px;height:34px;display:grid;place-content:center;background:var(--ink-850);border:1px solid var(--ink-line);border-radius:var(--radius-md);}
.brand__word{display:flex;flex-direction:column;gap:3px;}
.brand__word b{font-family:var(--font-serif);font-weight:600;font-size:16px;letter-spacing:.16em;color:var(--bone-50);text-transform:uppercase;line-height:1;}
.brand__word .s-rule{width:100%;}
.brand__word span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-500);}

/* top bar */
.topbar{grid-area:topbar;background:var(--ink-900);border-bottom:1px solid var(--ink-line);
  display:flex;align-items:center;justify-content:space-between;padding:8px 24px;gap:16px;min-width:0;min-height:var(--topbar-h);}
.topbar__title{display:flex;align-items:baseline;gap:14px;min-width:0;flex-shrink:0;}
.topbar__title h1{font-family:var(--font-sans);font-weight:600;font-size:18px;color:var(--bone-50);letter-spacing:-0.01em;white-space:nowrap;}
.topbar__title .crumb{color:var(--bone-500);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar__right{display:flex;align-items:center;gap:14px;min-width:0;flex-wrap:wrap;justify-content:flex-end;}

/* role + member pickers */
.picker{display:flex;align-items:center;gap:8px;min-width:0;}
.picker .field{min-width:0;max-width:200px;}
.picker label{font:600 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-500);}
select.field,input.field,textarea.field{
  background:var(--ink-800);border:1px solid var(--ink-line);border-radius:var(--radius-sm);
  color:var(--bone-50);padding:9px 12px;font:400 14px/1.2 var(--font-sans);min-height:40px;
  transition:border-color var(--dur-fast) var(--ease-brand),box-shadow var(--dur-fast) var(--ease-brand);
}
select.field{cursor:pointer;appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23968F7E' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;}
.field::placeholder{color:var(--bone-500);}
.field:focus-visible,select.field:focus-visible{border-color:var(--gold-500);box-shadow:var(--focus-gold);}
textarea.field{min-height:84px;resize:vertical;line-height:1.5;}
.field--sm{min-height:34px;padding:6px 10px;font-size:13px;}

.avatar{width:34px;height:34px;border-radius:var(--radius-md);background:var(--ink-700);border:1px solid var(--ink-line);
  display:grid;place-content:center;font:600 13px/1 var(--font-sans);color:var(--bone-100);letter-spacing:.02em;}

/* sidebar */
.sidebar{grid-area:sidebar;background:var(--ink-850);border-right:1px solid var(--ink-line);
  padding:20px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.sidebar__section{padding:16px 10px 6px;}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-left:2px solid transparent;border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--bone-300);font:500 14px/1 var(--font-sans);padding:11px 12px;min-height:42px;
  transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand);}
.nav-item:hover{background:var(--ink-700);color:var(--bone-50);}
.nav-item.active{background:var(--ink-700);color:var(--bone-50);border-left-color:var(--gold-500);}
.nav-item svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;flex-shrink:0;}
.nav-item .count{margin-left:auto;font:600 11px/1 var(--font-sans);color:var(--bone-500);
  background:var(--ink-800);border:1px solid var(--ink-line);border-radius:var(--radius-sm);padding:3px 6px;}
.nav-item.active .count{color:var(--gold-500);border-color:rgba(201,168,106,.4);}
.sidebar__spacer{flex:1;}
.sidebar__foot{padding:12px 12px 4px;border-top:1px solid var(--ink-line);margin-top:8px;}
.sidebar__foot p{font-size:11px;color:var(--bone-500);line-height:1.5;}

/* main */
/* min-width:0 lets this grid item shrink below its content instead of forcing
   the whole shell wider than the viewport (which mashes the layout on narrow screens) */
.main{grid-area:main;overflow-y:auto;overflow-x:hidden;background:var(--ink-900);min-width:0;}
.view{max-width:1280px;margin:0 auto;padding:28px 32px 64px;}
.view__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:8px;}
.view__head .lede{max-width:560px;}
.view__head .s-eyebrow{margin-bottom:8px;}
.view__head h2.serif{font-size:30px;line-height:1.15;}
.view__head .lede p{color:var(--bone-300);font-size:15px;margin-top:10px;}
.view__head .s-rule{margin:10px 0 0;}

/* ============================================================
   BUTTONS (§9.1)
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border-radius:var(--radius-md);font:600 14px/1 var(--font-sans);letter-spacing:.01em;
  height:40px;padding:0 18px;border:1px solid transparent;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand);}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;}
.btn--primary{background:var(--bone-50);color:var(--ink-900);}
.btn--primary:hover{background:var(--bone-100);}
.btn--gold{background:transparent;border-color:var(--gold-500);color:var(--gold-500);}
.btn--gold:hover{background:rgba(201,168,106,.10);}
.btn--secondary{border-color:var(--ink-line);color:var(--bone-100);background:transparent;}
.btn--secondary:hover{background:var(--ink-600);}
.btn--ghost{color:var(--bone-300);}
.btn--ghost:hover{color:var(--bone-50);background:var(--ink-700);}
.btn--destructive{border-color:var(--garnet-500);color:var(--garnet-300);background:transparent;}
.btn--destructive:hover{background:rgba(155,63,63,.12);}
.btn--sm{height:34px;padding:0 12px;font-size:13px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

/* ============================================================
   CARDS / PANELS (§9.4)
   ============================================================ */
.panel{background:var(--ink-800);border:1px solid var(--ink-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm),var(--edge-light);}
.panel--pad{padding:24px;}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 24px;border-bottom:1px solid var(--ink-line);}
.panel__head h3{font:600 16px/1.3 var(--font-sans);color:var(--bone-50);}
.panel__head .s-eyebrow{margin-bottom:0;}
.panel--featured{position:relative;}
.panel--featured::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-rule);border-radius:var(--radius-lg) var(--radius-lg) 0 0;}

/* ============================================================
   KPI TILES (§9.5)
   ============================================================ */
.kpi-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));}
/* fixed-count rows for the manager dashboard (4 / 3 / 4), responsive */
.kpi-grid--4{grid-template-columns:repeat(4,1fr);}
.kpi-grid--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:1040px){ .kpi-grid--4,.kpi-grid--3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .kpi-grid--4,.kpi-grid--3{grid-template-columns:1fr;} }
.kpi{background:var(--ink-800);border:1px solid var(--ink-line);border-radius:var(--radius-lg);
  padding:20px 22px;box-shadow:var(--shadow-sm),var(--edge-light);position:relative;display:flex;flex-direction:column;gap:6px;min-height:128px;}
.kpi--hero{}
.kpi--hero::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-rule);border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.kpi__label{font:600 11px/1.4 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-500);}
.kpi__value{font-family:var(--font-serif);color:var(--bone-50);font-size:44px;line-height:1;font-weight:500;}
.kpi--hero .kpi__value{color:var(--gold-500);}
.kpi__value.compact{font-size:34px;}
.kpi__sub{font-size:12px;color:var(--bone-500);}
.kpi__delta{font-size:13px;display:inline-flex;gap:5px;align-items:center;}
.delta-up{color:var(--emerald-300);} .delta-down{color:var(--garnet-300);} .delta-flat{color:var(--bone-500);}
.kpi__foot{font-size:11px;color:var(--bone-500);margin-top:auto;display:flex;justify-content:space-between;gap:8px;}
.kpi__foot b{color:var(--bone-300);font-weight:600;}

/* segmented toggle (period) */
.segmented{display:inline-flex;border:1px solid var(--ink-line);border-radius:var(--radius-md);overflow:hidden;background:var(--ink-850);}
.segmented button{background:transparent;border:0;color:var(--bone-300);font:500 13px/1 var(--font-sans);
  padding:9px 14px;cursor:pointer;position:relative;min-height:38px;transition:color var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand);}
.segmented button:hover{color:var(--bone-50);}
.segmented button.active{color:var(--bone-50);background:var(--ink-700);}
.segmented button.active::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--gold-rule);}

/* period control: granularity + prev/next navigator */
.period{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.period__nav{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ink-line);
  border-radius:var(--radius-md);background:var(--ink-850);padding:2px;}
.period__step{background:transparent;border:0;color:var(--bone-300);cursor:pointer;
  font-size:18px;line-height:1;width:30px;height:34px;border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand);}
.period__step:hover{color:var(--bone-50);background:var(--ink-700);}
.period__step:disabled{opacity:.3;cursor:not-allowed;}
.period__label{display:flex;flex-direction:column;align-items:center;line-height:1.15;
  min-width:120px;padding:0 4px;}
.period__label b{font:600 13px/1.2 var(--font-sans);color:var(--bone-50);white-space:nowrap;}
.period__label small{font-size:11px;color:var(--bone-500);white-space:nowrap;}

/* ============================================================
   FUNNEL VISUAL
   ============================================================ */
.funnel{display:flex;flex-direction:column;gap:8px;}
.funnel__row{display:grid;grid-template-columns:150px 1fr 86px;align-items:center;gap:14px;}
.funnel__label{font-size:13px;color:var(--bone-300);}
.funnel__bar{height:30px;background:var(--ink-700);border:1px solid var(--ink-line);border-radius:var(--radius-sm);overflow:hidden;position:relative;}
.funnel__fill{height:100%;background:linear-gradient(90deg,rgba(201,168,106,.30),rgba(201,168,106,.12));border-right:2px solid var(--gold-500);transition:width var(--dur-slow) var(--ease-brand);}
.funnel__fill--end{background:linear-gradient(90deg,rgba(201,168,106,.55),rgba(201,168,106,.25));}
.funnel__val{text-align:right;font-size:14px;color:var(--bone-50);}
.funnel__val small{display:block;color:var(--bone-500);font-size:11px;}

/* ============================================================
   TABLES (§9.6)
   ============================================================ */
.table-wrap{overflow-x:auto;border:1px solid var(--ink-line);border-radius:var(--radius-lg);background:var(--ink-800);box-shadow:var(--shadow-sm),var(--edge-light);}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px;}
table.grid thead th{position:sticky;top:0;z-index:2;background:var(--ink-850);text-align:left;
  font:600 11px/1.4 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-500);
  padding:12px 14px;border-bottom:1px solid var(--ink-line);white-space:nowrap;}
table.grid thead th.num{text-align:right;}
table.grid tbody td{padding:12px 14px;border-bottom:1px solid var(--ink-line);color:var(--bone-100);vertical-align:middle;}
table.grid tbody tr{cursor:pointer;transition:background var(--dur-fast) var(--ease-brand);}
table.grid tbody tr:hover{background:var(--ink-700);}
table.grid tbody tr:last-child td{border-bottom:0;}
table.grid td.num{text-align:right;}
.cell-name{display:flex;flex-direction:column;gap:2px;}
.cell-name b{font-weight:600;color:var(--bone-50);}
.cell-name small{color:var(--bone-500);font-size:11.5px;}
.cell-sub{color:var(--bone-500);font-size:12px;}

/* dialer: tighter rows, prominent easy-to-read phone numbers */
table.grid--dialer tbody td{padding:7px 14px;}
.cell-phone{color:var(--bone-50);font-size:13.5px;letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;}

/* dialer: local "active time" in the lead's timezone, glowing green (9–5) / red */
.localtime{font:600 13px/1 var(--font-mono);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;}
.localtime--good{color:var(--emerald-300);text-shadow:0 0 9px rgba(111,178,148,.6);}
.localtime--bad{color:var(--garnet-300);text-shadow:0 0 9px rgba(197,107,107,.55);}
.localtime--none{color:var(--bone-500);}

/* master-list bulk assign (manager) */
.assign-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;
  padding:12px 16px;background:var(--ink-800);border:1px solid var(--gold-700);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm),var(--edge-light);}
.assign-bar__count{font-weight:600;color:var(--gold-500);letter-spacing:.02em;}
.assign-bar__spacer{flex:1;}
.assign-bar .field{min-width:180px;}
.lead-check{accent-color:var(--gold-500);width:16px;height:16px;cursor:pointer;}
.truncate{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom;}

/* per-MM leaderboard zebra */
table.grid.zebra tbody tr:nth-child(even){background:var(--ink-850);}
table.grid.zebra tbody tr:hover{background:var(--ink-700);}

/* ============================================================
   CHIPS (§3.7 / §9.7)
   ============================================================ */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-sm);
  font:600 11px/1.3 var(--font-sans);padding:4px 8px;border:1px solid transparent;white-space:nowrap;}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.chip--neutral{color:var(--bone-300);border-color:var(--ink-line-2);}
.chip--slate{color:var(--slate-300);border-color:rgba(92,114,136,.4);background:rgba(92,114,136,.12);}
.chip--emerald{color:var(--emerald-300);border-color:rgba(62,126,94,.4);background:rgba(62,126,94,.12);}
.chip--amber{color:var(--amber-300);border-color:rgba(183,132,47,.4);background:rgba(183,132,47,.12);}
.chip--garnet{color:var(--garnet-300);border-color:rgba(155,63,63,.4);background:rgba(155,63,63,.12);}
.chip--dead{color:var(--bone-500);border-color:var(--ink-line);opacity:.7;}
.chip--gold{color:var(--gold-500);border-color:rgba(201,168,106,.4);background:rgba(201,168,106,.10);}
.chip--niche{color:var(--bone-300);border-color:var(--ink-line-2);background:var(--ink-700);}

/* status select — colored by lead state (Setting Tracker) */
select.set-status{font-weight:600;}
select.set-status--neutral{color:var(--bone-300);}
select.set-status--amber{color:var(--amber-300);border-color:rgba(183,132,47,.45);background-color:rgba(183,132,47,.10);}
select.set-status--garnet{color:var(--garnet-300);border-color:rgba(155,63,63,.45);background-color:rgba(155,63,63,.10);}
select.set-status--emerald{color:var(--emerald-300);border-color:rgba(62,126,94,.5);background-color:rgba(62,126,94,.14);}
select.set-status--slate{color:var(--slate-300);border-color:rgba(92,114,136,.4);background-color:rgba(92,114,136,.10);}
select.set-status--dead{color:var(--bone-500);}

/* subtle full-row tint echoing the status (booked = green) */
table.grid tbody tr.drow--emerald{background:rgba(62,126,94,.09);}
table.grid tbody tr.drow--garnet{background:rgba(155,63,63,.06);}
table.grid tbody tr.drow--amber{background:rgba(183,132,47,.05);}
table.grid tbody tr.drow--slate{background:rgba(92,114,136,.06);}
table.grid tbody tr.drow:hover{background:var(--ink-700);}

/* ============================================================
   TOOLBAR / FILTERS
   ============================================================ */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0;}
.toolbar .grow{flex:1;min-width:160px;}
.search{position:relative;flex:1;min-width:200px;max-width:360px;}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--bone-500);stroke-width:1.5;fill:none;pointer-events:none;}
.search input{width:100%;padding-left:34px;}

/* ============================================================
   KANBAN (Pipeline)
   ============================================================ */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:288px;gap:14px;overflow-x:auto;padding-bottom:12px;align-items:start;}
.kcol{background:var(--ink-850);border:1px solid var(--ink-line);border-radius:var(--radius-lg);display:flex;flex-direction:column;min-height:120px;}
.kcol__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--ink-line);}
.kcol__head .s-eyebrow{margin:0;}
.kcol__head .count{font:600 12px/1 var(--font-sans);color:var(--bone-300);}
.kcol--won .kcol__head{position:relative;}
.kcol--won .kcol__head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-rule);}
.kcol__body{padding:10px;display:flex;flex-direction:column;gap:10px;min-height:40px;}
.kcard{background:var(--ink-800);border:1px solid var(--ink-line);border-radius:var(--radius-md);padding:12px;
  cursor:pointer;box-shadow:var(--edge-light);transition:border-color var(--dur-fast) var(--ease-brand),transform var(--dur-fast) var(--ease-brand);}
.kcard:hover{border-color:var(--ink-line-2);transform:translateY(-1px);}
.kcard.dragging{opacity:.5;}
.kcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px;}
.kcard__name{font:600 14px/1.2 var(--font-sans);color:var(--bone-50);}
.kcard__ig{font-size:11.5px;color:var(--bone-500);}
.kcard__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;}
.kcard__owner{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--bone-300);}
.kcard__owner .avatar{width:20px;height:20px;font-size:10px;border-radius:var(--radius-sm);}
.kcol.drop-target{outline:1px dashed var(--gold-500);outline-offset:-4px;}
.kempty{color:var(--bone-500);font-size:12px;text-align:center;padding:14px 6px;}

/* ============================================================
   DRAWER (lead detail) + MODAL (§9.9)
   ============================================================ */
.overlay{position:fixed;inset:0;background:rgba(9,9,11,.66);z-index:100;opacity:0;animation:fade var(--dur) var(--ease-brand) forwards;}
@keyframes fade{to{opacity:1;}}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,100%);background:var(--ink-800);
  border-left:1px solid var(--ink-line);box-shadow:var(--shadow-lg);z-index:101;display:flex;flex-direction:column;
  transform:translateX(16px);opacity:0;animation:slidein var(--dur-slow) var(--ease-brand) forwards;}
@keyframes slidein{to{transform:translateX(0);opacity:1;}}
.drawer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--ink-line);}
.drawer__head h2{font:600 19px/1.25 var(--font-sans);color:var(--bone-50);}
.drawer__head .sub{font-size:12.5px;color:var(--bone-500);margin-top:3px;}
.drawer__body{padding:18px 22px 28px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:22px;}
.drawer__foot{padding:14px 22px;border-top:1px solid var(--ink-line);display:flex;gap:10px;justify-content:space-between;align-items:center;background:var(--ink-850);}
.iconbtn{width:34px;height:34px;display:grid;place-content:center;background:transparent;border:1px solid var(--ink-line);border-radius:var(--radius-md);cursor:pointer;color:var(--bone-300);transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand);}
.iconbtn:hover{background:var(--ink-700);color:var(--bone-50);}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;}

.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,calc(-50% + 8px));opacity:0;
  background:var(--ink-800);border:1px solid var(--ink-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  z-index:101;width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  animation:modalin var(--dur-slow) var(--ease-brand) forwards;}
.modal--lg{width:min(760px,calc(100vw - 32px));}
.modal--lg .tv-frame{border-radius:var(--radius-md);border:1px solid var(--ink-line);}
@keyframes modalin{to{transform:translate(-50%,-50%);opacity:1;}}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 12px;border-bottom:1px solid var(--ink-line);}
.modal__head h2{font:600 18px/1.2 var(--font-sans);color:var(--bone-50);}
.modal__head .s-eyebrow{margin-bottom:6px;}
.modal__body{padding:18px 22px;overflow-y:auto;}
.modal__foot{padding:14px 22px;border-top:1px solid var(--ink-line);display:flex;gap:10px;justify-content:flex-end;background:var(--ink-850);}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.form-grid .full{grid-column:1 / -1;}
.fld{display:flex;flex-direction:column;gap:6px;}
.fld label{font:500 12.5px/1.2 var(--font-sans);color:var(--bone-300);}
.fld .hint{font-size:11px;color:var(--bone-500);}
.fld .field{width:100%;}

/* detail rows in drawer */
.dl{display:grid;grid-template-columns:128px 1fr;gap:6px 14px;font-size:13.5px;}
.dl dt{color:var(--bone-500);}
.dl dd{margin:0;color:var(--bone-100);word-break:break-word;}
.dl dd a{word-break:break-all;}
.section-label{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
.section-label .s-eyebrow{margin:0;}
.section-label .s-rule{width:40px;}

.note{background:var(--ink-850);border:1px solid var(--ink-line);border-left:2px solid var(--gold-500);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;color:var(--bone-100);line-height:1.5;}
.note + .note{margin-top:8px;}
.note .meta{display:block;color:var(--bone-500);font-size:11px;margin-bottom:4px;}

/* stage tracker (drawer) */
.stage-track{display:flex;gap:6px;flex-wrap:wrap;}
.stage-pill{font:600 11px/1 var(--font-sans);padding:7px 9px;border-radius:var(--radius-sm);border:1px solid var(--ink-line);
  color:var(--bone-500);background:transparent;cursor:pointer;transition:all var(--dur-fast) var(--ease-brand);}
.stage-pill:hover{color:var(--bone-100);border-color:var(--ink-line-2);}
.stage-pill.done{color:var(--bone-100);border-color:var(--ink-line-2);background:var(--ink-700);}
.stage-pill.current{color:var(--gold-500);border-color:var(--gold-500);background:rgba(201,168,106,.08);}

/* toast */
.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:120;display:flex;flex-direction:column;gap:10px;}
.toast{background:var(--ink-700);border:1px solid var(--ink-line);border-left:2px solid var(--gold-500);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);padding:12px 16px;font-size:13px;color:var(--bone-100);min-width:240px;max-width:340px;
  transform:translateY(8px);opacity:0;animation:toastin var(--dur) var(--ease-brand) forwards;}
.toast.emerald{border-left-color:var(--emerald-500);}
.toast.garnet{border-left-color:var(--garnet-500);}
@keyframes toastin{to{transform:translateY(0);opacity:1;}}

/* empty state */
.empty{text-align:center;padding:64px 20px;}
.empty h3{font-family:var(--font-serif);color:var(--bone-50);font-size:24px;font-weight:500;margin-bottom:8px;}
.empty p{color:var(--bone-500);font-size:14px;max-width:380px;margin:0 auto 18px;}

/* niche distribution mini */
.dist{display:flex;flex-direction:column;gap:10px;}
.dist__row{display:grid;grid-template-columns:140px 1fr 34px;align-items:center;gap:12px;font-size:13px;}
.dist__bar{height:8px;background:var(--ink-700);border-radius:var(--radius-sm);overflow:hidden;}
.dist__fill{height:100%;background:var(--bone-500);}
.dist__fill.gold{background:var(--gold-500);}
.dist__val{text-align:right;color:var(--bone-300);font-size:12px;}

/* two-col dashboard layout */
.cols-2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start;}
.stack{display:flex;flex-direction:column;gap:16px;}
.row-actions{display:flex;gap:8px;align-items:center;}

/* helper text + inline labels */
.inline-status{display:flex;align-items:center;gap:8px;}
.tag-row{display:flex;gap:6px;flex-wrap:wrap;}

@media (max-width:1040px){
  .cols-2{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"topbar" "sidebar" "main";}
  .brand{display:none;}
  .sidebar{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--ink-line);padding:10px;}
  .sidebar__section,.sidebar__spacer,.sidebar__foot{display:none;}
  .nav-item{width:auto;border-left:0;border-bottom:2px solid transparent;border-radius:var(--radius-md);}
  .nav-item.active{border-left:0;border-bottom-color:var(--gold-500);}
  .form-grid{grid-template-columns:1fr;}
  .view{padding:20px 16px 48px;}
  /* topbar: let the pickers/buttons wrap onto their own line under the title */
  .topbar{flex-wrap:wrap;padding:10px 16px;}
  .topbar__right{width:100%;justify-content:flex-start;}
}
@media (max-width:560px){
  .picker{flex:1 1 auto;}
  .picker .field{max-width:none;flex:1 1 auto;}
  .view__head h2.serif{font-size:24px;}
  .row-actions{flex-wrap:wrap;}
}

/* ── campaign manager modal ──────────────────────────────── */
.camp-list{display:flex;flex-direction:column;gap:8px;}
.camp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--ink-line);border-radius:8px;background:var(--ink-800);}
.camp-row__main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.camp-row__main b{color:var(--bone-50);}
.camp-row--archived{opacity:.55;}
.check-list{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto;
  border:1px solid var(--ink-line);border-radius:8px;padding:10px 12px;background:var(--ink-900);}
.check-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--bone-100);}
.check-row input{accent-color:var(--gold-500);width:16px;height:16px;flex:0 0 auto;}
.check-row small{margin-left:4px;}

/* ============================================================
   TRAINING MODULES (video library)
   ============================================================ */
.chip--muted{color:var(--bone-500);border-color:var(--ink-line);background:var(--ink-800);}
.chip--muted svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5;}
.view__head-actions{display:flex;align-items:center;gap:10px;}

.tmod-cat{margin-top:26px;}
.tmod-cat:first-of-type{margin-top:18px;}
.tmod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-top:14px;}

.tmod{display:flex;flex-direction:column;background:var(--ink-800);border:1px solid var(--ink-line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;
  transition:border-color var(--dur) var(--ease-brand),transform var(--dur) var(--ease-brand);}
.tmod:hover{border-color:var(--ink-line-2);transform:translateY(-2px);}
.tmod--draft{border-style:dashed;}

.tv-frame{position:relative;aspect-ratio:16/9;width:100%;background:var(--ink-850);
  border-bottom:1px solid var(--ink-line);}
.tv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.tv-frame--flat{display:flex;align-items:center;justify-content:center;}

.tmod__body{display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px;flex:1;}
.tmod__tags{display:flex;flex-wrap:wrap;gap:6px;}
.tmod__title{font:600 16px/1.35 var(--font-sans);color:var(--bone-50);letter-spacing:0;}
.tmod__desc{color:var(--bone-300);font-size:14px;line-height:1.55;margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.tmod__desc--modal{color:var(--bone-300);font-size:14.5px;line-height:1.65;white-space:pre-wrap;margin:0;}
.tmod__res{display:flex;flex-direction:column;gap:6px;margin-top:2px;
  border-top:1px solid var(--ink-line);padding-top:12px;}
.tmod__reslink{display:inline-flex;align-items:center;gap:7px;color:var(--gold-500);
  font-size:13px;text-decoration:none;}
.tmod__reslink:hover{color:var(--gold-300);text-decoration:underline;text-underline-offset:2px;}
.tmod__reslink svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;flex:0 0 auto;}
.tmod__reslink span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tmod__actions{display:flex;gap:8px;margin-top:auto;padding-top:12px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* print / export → parchment letterhead (§8.4, §10) */
@media print{
  body{background:#fff;color:var(--ink-text);}
  .sidebar,.topbar,.brand,.toolbar,.drawer__foot,#topbar-progress{display:none !important;}
}

/* ============================================================
   ASCENSION CLIENT PORTAL — additions on top of the shared
   Saulna tokens/components above. Same rules: tokens only,
   one gold emphasis per view, radii <= 8px, calm motion.
   ============================================================ */

/* notices (in-app notification layer) */
.notices{display:flex;flex-direction:column;gap:10px;margin:14px 0 20px;}
.notice{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--ink-800);
  border:1px solid var(--ink-line);border-left:2px solid var(--bone-500);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm),var(--edge-light);}
.notice--gold{border-left-color:var(--gold-500);}
.notice--amber{border-left-color:var(--amber-500);}
.notice--garnet{border-left-color:var(--garnet-500);}
.notice__text{flex:1;min-width:0;}
.notice__text b{display:block;font:600 14px/1.3 var(--font-sans);color:var(--bone-50);}
.notice__text span{font-size:12.5px;color:var(--bone-500);}
.notice .btn{flex-shrink:0;}

/* 13-week progress strip (the advancing line, §8.6) */
.weekstrip{display:flex;gap:4px;align-items:flex-end;}
.weekstrip__cell{flex:1;display:flex;flex-direction:column;gap:6px;align-items:center;cursor:pointer;
  background:transparent;border:0;padding:0;}
.weekstrip__bar{width:100%;height:6px;background:var(--ink-700);border:1px solid var(--ink-line);
  border-radius:var(--radius-sm);position:relative;overflow:hidden;}
.weekstrip__cell.done .weekstrip__bar{background:var(--gold-700);border-color:var(--gold-700);}
.weekstrip__cell.current .weekstrip__bar{background:rgba(201,168,106,.15);border-color:var(--gold-500);}
.weekstrip__cell.current .weekstrip__bar::after{content:"";position:absolute;inset:0;width:0;
  background:var(--gold-rule);animation:s-advance 480ms cubic-bezier(0.4,0,0.2,1) forwards;}
@keyframes s-advance{to{width:100%;}}
.weekstrip__num{font:600 10.5px/1 var(--font-sans);color:var(--bone-500);letter-spacing:.04em;}
.weekstrip__cell.current .weekstrip__num{color:var(--gold-500);}
.weekstrip__cell.done .weekstrip__num{color:var(--bone-300);}

/* goal progress track (§9.5 benchmark variant) */
.goaltrack{display:flex;flex-direction:column;gap:5px;min-width:150px;}
.goaltrack__bar{height:2px;background:var(--ink-line);border-radius:1px;overflow:hidden;}
.goaltrack__fill{height:100%;background:var(--gold-500);width:0;
  transition:width 480ms cubic-bezier(0.4,0,0.2,1);}
.goaltrack__label{font-size:11px;color:var(--bone-500);}
.goaltrack__label b{color:var(--bone-300);font-weight:600;}

/* bottleneck diagnostic panel (§9.12) */
.diag{display:flex;flex-direction:column;gap:10px;}
.diag__stage{display:grid;grid-template-columns:170px 1fr 120px;align-items:center;gap:14px;}
.diag__name{font-size:13px;color:var(--bone-300);}
.diag__name.weak{color:var(--garnet-300);}
.diag__bar{height:22px;background:var(--ink-700);border:1px solid var(--ink-line);
  border-radius:var(--radius-sm);position:relative;overflow:hidden;}
.diag__fill{height:100%;background:linear-gradient(90deg,rgba(201,194,178,.28),rgba(201,194,178,.10));
  border-right:2px solid var(--bone-500);transition:width var(--dur-slow) var(--ease-brand);}
.diag__stage.weak .diag__fill{background:linear-gradient(90deg,rgba(155,63,63,.35),rgba(155,63,63,.12));border-right-color:var(--garnet-500);}
.diag__target{position:absolute;top:0;bottom:0;width:1px;background:var(--gold-500);opacity:.8;}
.diag__val{text-align:right;font-size:13px;color:var(--bone-100);}
.diag__val small{display:block;color:var(--bone-500);font-size:11px;}
.diag__finding{padding:12px 14px;border:1px solid var(--ink-line);border-left:2px solid var(--garnet-500);
  border-radius:var(--radius-sm);background:var(--ink-850);font-size:13.5px;color:var(--bone-100);line-height:1.55;}
.diag__finding b{color:var(--garnet-300);}
.diag__finding ul{margin:6px 0 0;padding-left:18px;color:var(--bone-300);font-size:12.5px;}
.diag__finding li{margin:2px 0;}
.diag__ok{padding:12px 14px;border:1px solid var(--ink-line);border-left:2px solid var(--emerald-500);
  border-radius:var(--radius-sm);background:var(--ink-850);font-size:13.5px;color:var(--bone-100);}

/* tracker week editor */
.wk-open{color:var(--gold-500);font-weight:600;font-size:12.5px;}
tr.wk-current td{background:rgba(201,168,106,.05);}
tr.wk-future td{opacity:.5;}
.wk-badge{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-sans);color:var(--bone-500);}
.wk-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-line-2);}
.wk-badge--done{color:var(--emerald-300);} .wk-badge--done .dot{background:var(--emerald-500);}
.wk-badge--due{color:var(--gold-500);} .wk-badge--due .dot{background:var(--gold-500);}

/* program roadmap */
.roadmap{display:flex;flex-direction:column;gap:0;position:relative;}
.phase{display:grid;grid-template-columns:74px 1fr;gap:0 22px;position:relative;padding-bottom:26px;}
.phase__wk{display:flex;flex-direction:column;align-items:center;gap:8px;}
.phase__wk b{font-family:var(--font-serif);font-size:21px;color:var(--bone-300);font-weight:500;line-height:1.1;text-align:center;}
.phase__wk small{font:600 10px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-500);}
.phase__line{flex:1;width:1px;background:var(--ink-line);min-height:22px;}
.phase.current .phase__wk b{color:var(--gold-500);}
.phase.current .phase__line{background:var(--gold-700);}
.phase.done .phase__wk b{color:var(--bone-500);}
.phase__card{margin-bottom:0;}
.phase.current .panel{border-color:var(--gold-700);}
.phase__focus{color:var(--bone-300);font-size:14px;line-height:1.6;margin-top:6px;}
.phase__list{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;}
.phase__list li{display:flex;gap:10px;font-size:13.5px;color:var(--bone-100);line-height:1.5;}
.phase__list li::before{content:"";width:14px;height:1px;background:var(--gold-700);flex-shrink:0;margin-top:10px;}
.phase__vids{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.vid-link{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 var(--font-sans);
  color:var(--gold-500);border:1px solid var(--ink-line);border-radius:var(--radius-sm);
  padding:8px 11px;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-brand),background var(--dur-fast) var(--ease-brand);}
.vid-link:hover{border-color:var(--gold-700);background:rgba(201,168,106,.06);text-decoration:none;color:var(--gold-300);}
.vid-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;}
.phase__kpi{margin-top:12px;font-size:12px;color:var(--bone-500);}
.phase__kpi b{color:var(--bone-300);font-weight:600;}

/* goals table extras */
.due-chip{white-space:nowrap;}
.goal-name{display:flex;flex-direction:column;gap:3px;}
.goal-name b{font-weight:600;color:var(--bone-50);}
.goal-name small{color:var(--bone-500);font-size:11.5px;}
tr.goal-done td{opacity:.55;}
tr.goal-done .goal-name b{text-decoration:line-through;text-decoration-color:var(--bone-500);}

/* settings grid */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 16px;}

/* client switcher pill row (manager) */
.client-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--bone-500);}

@media (max-width:760px){
  .diag__stage{grid-template-columns:110px 1fr 86px;}
  .phase{grid-template-columns:54px 1fr;gap:0 14px;}
  .weekstrip{flex-wrap:wrap;}
  .weekstrip__cell{min-width:44px;}
}