/* ============================================================
   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;}

/* mobile nav toggle: hidden on desktop, shown only under the 860px breakpoint
   where the sidebar collapses into an expand/collapse panel (see media query below) */
.menu-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--ink-800);border:1px solid var(--ink-line);border-radius:var(--radius-sm);color:var(--bone-100);cursor:pointer;}
.menu-toggle svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;}
.menu-toggle:hover{background:var(--ink-700);color:var(--bone-50);}

/* 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;}

/* Dialer / Pipeline / All Leads / Team KPIs: the table or board is the tall,
   growing part of the view, so it gets its own scrollbar. The header and
   filters above it stay pinned instead of scrolling away with the list. */
.view--split{display:flex;flex-direction:column;height:100%;overflow:hidden;}
.view--split > .view__head,
.view--split > .toolbar,
.view--split > .assign-bar{flex-shrink:0;}
.view--split > .kanban{flex:1;min-height:0;overflow-y:auto;}
.view--split > .tw-split{flex:1;min-height: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;
  box-shadow:0 6px 10px -6px rgba(0,0,0,.55);}
table.grid thead th.num{text-align:right;}

/* the scrollable table's native scrollbar spans the whole box (header included);
   tint its track to the row background instead of the header's, so the strip
   beside the header reads as part of the scrolling body, not the header itself */
.table-wrap::-webkit-scrollbar-track{background:var(--ink-800);}

/* .tw-split: the real, interactive header lives in .tw-head and never scrolls;
   .tw-body scrolls (both axes) on its own. app.js clones an invisible copy of
   the header into .tw-body so the table's own column-width math keeps both in
   lockstep, then copies the resulting pixel widths onto the visible header ·
   so the scrollbar for the list genuinely starts under the header, not beside it. */
.tw-split{display:flex;flex-direction:column;overflow:hidden;}
/* Match the header cells' fill so the ~10px the body scrollbar reserves on the
   right (the head table is sized to the body table's width, which excludes the
   scrollbar) reads as part of the header rather than the track running up past it. */
.tw-head{flex-shrink:0;overflow:hidden;position:relative;z-index:1;background:var(--ink-850);box-shadow:0 6px 10px -6px rgba(0,0,0,.55);}
.tw-head table{border-collapse:collapse;}
.tw-head thead th{box-shadow:none;}
.tw-body{flex:1;min-height:0;overflow:auto;}
.tw-body::-webkit-scrollbar-track{background:var(--ink-800);}
/* The ghost header exists only to sync column widths into the scrolling body;
   collapse it to zero height (touching vertical metrics only, so horizontal
   width math stays identical) so it leaves no empty bar under the real header
   and the list · and its scrollbar · starts flush beneath the header. */
.tw-body thead.tw-ghost th{visibility:hidden;height:0;line-height:0;padding-top:0;padding-bottom:0;border-top:0;border-bottom:0;}
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: sentinel row that streams the next page of leads in as you scroll */
table.grid tbody tr.dial-more{cursor:default;background:transparent;}
table.grid tbody tr.dial-more:hover{background:transparent;}
table.grid tbody tr.dial-more td{text-align:center;color:var(--bone-500);font-size:12px;
  letter-spacing:.04em;padding:14px;border-bottom:0;}

/* 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: click-to-copy phone number · gold on hover, "Copy" tip after a 1s hover, "Copied" flash on click */
.cell-phone[data-copy]{cursor:pointer;transition:color var(--dur-fast) var(--ease-brand);}
.cell-phone[data-copy]:hover{color:var(--gold-500);}
.cell-phone--flash{color:var(--gold-300);}
/* inline-block so its box hugs the number (not the cell padding) · app.js measures it to place the tip */
.copy-wrap{display:inline-block;}
/* the tip lives on <body>, position:fixed, so the scrolling table body can't clip it.
   translate(-50%,-100%) centers it over the number and lifts it fully above the point
   app.js sets, which is one number-height up · so the gap ≈ the number's own height. */
.copy-fixed{
  position:fixed;z-index:200;padding:4px 9px;
  background:var(--ink-800);border:1px solid var(--gold-700);border-radius:var(--radius-sm);
  color:var(--bone-50);font:600 11px/1.4 var(--font-sans);letter-spacing:.04em;white-space:nowrap;
  box-shadow:var(--shadow-sm);pointer-events:none;opacity:0;transform:translate(-50%,-100%);
  transition:opacity var(--dur-fast) var(--ease-brand);}
.copy-fixed.is-visible{opacity:1;}

/* 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);}

/* Goals board: completed goals recede; goals you can't edit aren't clickable */
table.grid tbody tr.goal-done td{opacity:.62;}
table.grid tbody tr.goal-done .cell-name b{text-decoration:line-through;text-decoration-color:var(--bone-500);}
table.grid tbody tr.goal-readonly{cursor:default;}

/* ============================================================
   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;}
  .menu-toggle{display:inline-flex;}
  /* Nav + the vertical/role/view pickers are collapsed by default on mobile ·
     together they were permanently eating 400-500px of an ~800px viewport on
     every single view. They now only appear when the hamburger opens them
     (.shell.nav-open below), and close again automatically because every nav
     click / picker change already triggers a full render() that rebuilds the
     shell HTML without the nav-open class. */
  .sidebar{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--ink-line);padding:10px;
    display:none;}
  .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;display:none;}
  .shell.nav-open .topbar__right,
  .shell.nav-open .sidebar{display:flex;}
  /* view header action buttons must wrap, or the 4 "All Leads" buttons overflow
     the viewport and get clipped by body{overflow-x:hidden} (unreachable) */
  .view__head{gap:12px;}
  .row-actions{flex-wrap:wrap;}

  /* ── Mobile: unfreeze the split views ──────────────────────────────
     On desktop .view--split pins the header/filters and gives the table its own
     scroll inside a fixed 100vh box. On a phone the header chrome (lede + action
     buttons + filter bar + assign bar) eats almost all that height, leaving the
     table a tiny sliver. Let the whole view flow and scroll with the page (main)
     instead; the table keeps its horizontal scroll contained to its own wrapper. */
  .view--split{display:block;height:auto;overflow:visible;padding-bottom:32px;}
  .tw-split{display:block;overflow:visible;}
  /* body grows to natural height (page scrolls vertically) but still scrolls
     horizontally on its own; JS keeps the fixed header aligned & scroll-synced */
  .view--split > .tw-split > .tw-body{flex:none;min-height:0;overflow-x:auto;overflow-y:visible;}
  /* pipeline board: let it size to content and scroll the page, not an inner box */
  .view--split > .kanban{flex:none;min-height:0;overflow-y:visible;}
}
@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;}
}

/* split views manage their own bottom spacing inside the scrolling table/board,
   so they don't need the page's trailing scroll padding at any breakpoint */
.view--split{padding-bottom:20px;}

/* ── vertical 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;}
/* training order: grip, lifted card, sliding neighbours */
.tmod-grid{position:relative;}
.tmod-grid > .tmod{transition:transform 180ms var(--ease-brand), border-color var(--dur);}
.tmod__grip{margin-left:auto;width:30px;height:26px;display:grid;place-content:center;padding:0;cursor:grab;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--bone-500);touch-action:none;}
.tmod__grip svg{width:18px;height:18px;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;fill:none;}
.tmod__grip:hover,.tmod__grip:focus-visible{color:var(--gold-300);border-color:var(--ink-line-2);}
.tmod.tmod--lifted{transition:none;z-index:5;cursor:grabbing;border-color:var(--gold-600);
  box-shadow:0 18px 40px rgba(0,0,0,.55);}
.tmod-grid--sorting iframe{pointer-events:none;}
.tmod-grid--sorting .tmod{cursor:grabbing;}
.tmod-grid--saving .tmod__grip{cursor:progress;opacity:.5;}
body.is-tsorting{user-select:none;-webkit-user-select:none;cursor:grabbing;}

.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;}
/* training text formatting (# ## ### headings, **bold**, __underline__) */
.tfmt .tfmt-p{white-space:pre-wrap;margin:0 0 12px;}
.tfmt .tfmt-p:last-child{margin-bottom:0;}
.tfmt strong{color:var(--bone-50);font-weight:600;}
.tfmt u{text-underline-offset:3px;text-decoration-thickness:1px;}
.tfmt-h1,.tfmt-h2,.tfmt-h3{color:var(--bone-50);margin:22px 0 10px;}
.tfmt > :first-child{margin-top:0;}
.tfmt-h1{font:600 24px/1.25 var(--font-serif);letter-spacing:-0.01em;padding-bottom:8px;
  border-bottom:1px solid transparent;border-image:var(--gold-rule) 1;}
.tfmt-h2{font:600 19px/1.3 var(--font-serif);}
.tfmt-h3{font:600 12.5px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);}
.tfmt-bar{display:flex;align-items:center;gap:4px;margin-bottom:6px;}
.tfmt-btn{height:28px;min-width:34px;padding:0 8px;border-radius:var(--radius-sm,6px);border:1px solid var(--ink-line);
  background:var(--ink-850);color:var(--bone-300);font:600 12px/1 var(--font-sans);cursor:pointer;}
.tfmt-btn:hover{border-color:var(--ink-line-2);color:var(--bone-50);}
.tfmt-sep{width:1px;height:18px;background:var(--ink-line);margin:0 4px;}
.tfmt-src{font-family:var(--font-mono);font-size:13px;line-height:1.55;resize:vertical;}
.tfmt-preview{max-height:320px;overflow:auto;padding:14px 16px;border:1px solid var(--ink-line);
  border-radius:var(--radius-md);background:var(--ink-850);color:var(--bone-300);font-size:14.5px;line-height:1.65;}
.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;}
}

/* ---- Booking modal: embedded Calendly + manual fallback (§ book & hand off) ---- */
.calendly-embed{
  margin-top:12px;min-width:280px;height:470px;max-height:52vh;min-height:420px;
  border:1px solid var(--ink-line);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bone-50); /* Calendly renders light; sit it on a clean card */
}
.calendly-embed iframe{width:100%;height:100%;border:0;display:block;}

/* Read-only lead recap pinned above the calendar, so the setter keeps the row's
   details in view while booking. */
.book-lead{
  background:var(--ink-850);border:1px solid var(--ink-line);
  border-radius:var(--radius-md);padding:12px 14px;
}
.book-lead__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.book-lead__head h3{font:600 15px/1.25 var(--font-sans);color:var(--bone-50);}
.book-lead__sub{font:400 12px/1.4 var(--font-sans);color:var(--bone-500);margin-top:2px;}
.book-lead__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px 16px;margin-top:10px;
}
.book-lead dl{margin:0;}
.book-lead dd{margin:0;}
.book-lead dt{
  font:600 10px/1.4 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-500);
}
.book-lead dd{font:400 13px/1.4 var(--font-sans);color:var(--bone-100);word-break:break-word;}
.book-lead__block{margin-top:10px;}
.book-lead__block dd{
  color:var(--bone-300);max-height:66px;overflow-y:auto;white-space:pre-wrap;
}
/* hover-to-copy on every detail in the recap · same device as the dialer's phone cell:
   gold on hover, a "Copy" tip after a 1s hover, a "Copied" flash on click.
   Two-class selectors so they outrank .book-lead dd / .book-lead__head h3 above. */
.book-lead .copyable{cursor:pointer;transition:color var(--dur-fast) var(--ease-brand);}
.book-lead .copyable:hover{color:var(--gold-500);}
.book-lead .copyable--flash,.book-lead .copyable--flash:hover{color:var(--gold-300);}
.booking-manual{margin-top:14px;border-top:1px solid var(--ink-line);padding-top:10px;}
.booking-manual>summary{
  cursor:pointer;list-style:none;color:var(--bone-500);
  font:600 12px/1.4 var(--font-sans);letter-spacing:.04em;
}
.booking-manual>summary::-webkit-details-marker{display:none;}
.booking-manual>summary:hover{color:var(--bone-300);}
.booking-manual[open]>summary{color:var(--bone-300);margin-bottom:2px;}

/* ---- Show-up rate (Discovery / Acq. Meet) · pending-outcome card flag ---- */
/* a past meeting with no recorded outcome · the card asks for it */
.kcard--pending{border-color:rgba(183,132,47,.55);box-shadow:0 0 0 1px rgba(183,132,47,.25), 0 0 14px rgba(183,132,47,.12);}
.kcard__pendchip{margin-top:8px;display:inline-flex;}

/* ---- No-show notifications on the Goals board ---- */
/* the pinned goal shines a subtle red until the setter marks it done */
@keyframes noshow-shine{
  0%,100%{background:rgba(155,63,63,.10);box-shadow:inset 3px 0 0 var(--garnet-500);}
  50%{background:rgba(155,63,63,.20);box-shadow:inset 3px 0 0 var(--garnet-300);}
}
tr.goal-noshow{animation:noshow-shine 2.6s ease-in-out infinite;}
tr.goal-noshow td{border-bottom-color:rgba(155,63,63,.30);}
@media (prefers-reduced-motion:reduce){ tr.goal-noshow{animation:none;background:rgba(155,63,63,.14);box-shadow:inset 3px 0 0 var(--garnet-500);} }

/* ---- Post-Booked SOP tasks on the Goals board ---- */
/* a task that's due shines a subtle green until the setter marks it done */
@keyframes task-shine{
  0%,100%{background:rgba(62,126,94,.10);box-shadow:inset 3px 0 0 var(--emerald-500);}
  50%{background:rgba(62,126,94,.20);box-shadow:inset 3px 0 0 var(--emerald-300);}
}
tr.goal-postbooked{animation:task-shine 2.6s ease-in-out infinite;}
tr.goal-postbooked td{border-bottom-color:rgba(62,126,94,.30);}
@media (prefers-reduced-motion:reduce){ tr.goal-postbooked{animation:none;background:rgba(62,126,94,.14);box-shadow:inset 3px 0 0 var(--emerald-500);} }

/* a task still in its warning window · a small "coming up" notice, not yet a goal */
tr.goal-warning td{padding-top:7px;padding-bottom:7px;background:rgba(62,126,94,.05);}
tr.goal-warning .cell-name{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
tr.goal-warning .cell-name b{font-weight:600;font-size:13px;color:var(--bone-300);}
tr.goal-warning .cell-name small{margin-left:6px;}

/* pre-filled SOP text inside the rebook popup */
.sop-copy pre{
  white-space:pre-wrap;word-break:break-word;margin:0;padding:12px 14px;
  font:13px/1.55 var(--font-sans);color:var(--bone-300);
  background:rgba(62,126,94,.07);border:1px solid rgba(62,126,94,.28);border-radius:8px;
}

/* red notification count on the Goals nav item */
@keyframes nav-alert-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(155,63,63,.45);}
  60%{box-shadow:0 0 0 6px rgba(155,63,63,0);}
}
.nav-alert{
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  font:700 11px/1 var(--font-sans);color:var(--bone-50);
  background:var(--garnet-500);animation:nav-alert-pulse 2.2s ease-out infinite;
}
.nav-item .nav-alert + .count{margin-left:6px;}
@media (prefers-reduced-motion:reduce){ .nav-alert{animation:none;} }

/* ============================================================
   Browser dialer (Twilio Voice) · additive
   Scoped entirely to .cell-dial / .dial-* / #dialbar-root, so nothing here can
   restyle an existing component. Obsidian + one thread of gold per the brand
   bible; the live-call state is the only place colour is allowed to shout.
   ============================================================ */

/* --- Call cell in the dialer table --- */
/* Standing notice while Twilio refuses calls account-wide. Garnet edge, not a
   filled garnet slab: this sits above a dense table and must read as a state, not
   an error dialog. */
.dial-blocked{
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  margin:0 0 12px;padding:10px 14px;
  border:1px solid var(--ink-line-2);border-left:2px solid var(--garnet-500);
  border-radius:var(--radius-md);background:var(--ink-600);
}
.dial-blocked b{font:600 12.5px/1.35 var(--font-sans);color:var(--garnet-300);
  letter-spacing:.02em;text-transform:uppercase;}
.dial-blocked span{font:400 13px/1.45 var(--font-sans);color:var(--bone-300);}

.cell-dial{white-space:nowrap;}
.dial-na{color:var(--bone-500);}

.dial-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;
  font:500 12px/1 var(--font-sans);letter-spacing:.02em;
  color:var(--bone-50);
  background:var(--ink-700);
  border:1px solid var(--ink-line-2);
  border-radius:var(--radius-md);
  cursor:pointer;
  box-shadow:var(--edge-light);
  transition:background var(--dur-fast) var(--ease-brand),
             border-color var(--dur-fast) var(--ease-brand),
             color var(--dur-fast) var(--ease-brand);
}
.dial-btn svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto;}
.dial-btn:hover:not(:disabled){
  color:var(--ink-900);
  background:var(--gold-500);
  border-color:var(--gold-600);
}
.dial-btn:focus-visible{outline:none;box-shadow:var(--focus-gold);}
.dial-btn:disabled{opacity:.35;cursor:default;}

/* --- Floating call bar --- */
#dialbar-root{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;justify-content:center;pointer-events:none;}
#dialbar-root:empty{display:none;}

.dialbar{
  pointer-events:auto;
  width:min(680px,calc(100vw - 32px));
  margin:0 16px 18px;
  padding:12px 16px 10px;
  background:var(--ink-850);
  border:1px solid var(--ink-line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}
/* the single thread of gold: a hairline along the top edge of the bar */
.dialbar::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--gold-rule);opacity:.85;}

.dialbar__main{display:flex;align-items:center;gap:10px;min-width:0;}
.dialbar__state{font:600 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-300);flex:0 0 auto;}
.dialbar__who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;}
.dialbar__who b{font:600 14px/1.2 var(--font-sans);color:var(--bone-50);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dialbar__who small{font-size:12px;color:var(--bone-500);letter-spacing:.04em;}
.dialbar__timer{
  flex:0 0 auto;font-size:15px;color:var(--bone-100);
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.04em;
}

/* status dot · amber while it is still trying, emerald once truly answered */
.dialbar__dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--bone-500);}
.dialbar--connecting .dialbar__dot,
.dialbar--ringing .dialbar__dot{background:var(--amber-300);animation:dialpulse 1.1s var(--ease-brand) infinite;}
.dialbar--open .dialbar__dot{background:var(--emerald-300);}
.dialbar--reconnecting .dialbar__dot{background:var(--garnet-300);animation:dialpulse .7s var(--ease-brand) infinite;}
@keyframes dialpulse{0%,100%{opacity:1;}50%{opacity:.28;}}
@media (prefers-reduced-motion:reduce){
  .dialbar--connecting .dialbar__dot,.dialbar--ringing .dialbar__dot,.dialbar--reconnecting .dialbar__dot{animation:none;}
}

.dialbar__actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.dial-ctl{
  flex:1 1 auto;min-width:88px;
  padding:8px 12px;
  font:500 12.5px/1 var(--font-sans);letter-spacing:.02em;
  color:var(--bone-100);
  background:var(--ink-700);
  border:1px solid var(--ink-line-2);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand);
}
.dial-ctl:hover:not(:disabled){background:var(--ink-600);}
.dial-ctl:focus-visible{outline:none;box-shadow:var(--focus-gold);}
.dial-ctl:disabled{opacity:.35;cursor:default;}
.dial-ctl.is-on{color:var(--ink-900);background:var(--gold-500);border-color:var(--gold-600);}
.dial-ctl--end{color:#fff;background:var(--garnet-500);border-color:var(--garnet-500);flex:0 0 auto;min-width:104px;}
.dial-ctl--end:hover:not(:disabled){background:var(--garnet-300);border-color:var(--garnet-300);color:var(--ink-900);}

.dialbar__keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;}
.dial-key{
  padding:10px 0;
  font-size:15px;color:var(--bone-50);
  background:var(--ink-700);border:1px solid var(--ink-line-2);border-radius:var(--radius-md);
  cursor:pointer;
  font-variant-numeric:tabular-nums lining-nums;
}
.dial-key:hover{background:var(--ink-600);}
.dial-key:active{color:var(--ink-900);background:var(--gold-500);border-color:var(--gold-600);}
.dial-key:focus-visible{outline:none;box-shadow:var(--focus-gold);}

.dialbar__cid{margin:9px 0 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-500);}

@media (max-width:560px){
  .dialbar{margin:0 8px 10px;padding:10px 12px 8px;}
  .dialbar__timer{font-size:14px;}
  .dial-ctl{min-width:0;}
}

/* ── Session expired · blocking overlay ────────────────────────────────────────
   Deliberately NOT a toast. A signed-out tab keeps rendering the lead list and
   accepting edits, and the fading "Save failed" notice it used to show is exactly
   what let a setter dial for half an hour into a dead session on 2026-08-27. This
   sits above everything (the dial bar and toasts are z-index 120) and has no way
   out except signing back in. */
.sessgone{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:rgba(9,9,11,.86);backdrop-filter:blur(3px);
  animation:fade var(--dur) var(--ease-brand) forwards;}
.sessgone__card{width:min(460px,calc(100vw - 32px));padding:26px 28px;text-align:center;
  background:var(--ink-800);border:1px solid var(--ink-line);border-top:2px solid var(--garnet-500);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);}
.sessgone__card h2{font:600 22px/1.2 var(--font-serif);color:var(--bone-50);margin:6px 0 12px;}
.sessgone__card p{font:400 14px/1.6 var(--font-sans);color:var(--bone-300);}
.sessgone__card strong{color:var(--bone-50);font-weight:600;}
.sessgone__warn{margin-top:10px;color:var(--garnet-300) !important;}
.sessgone__card .btn{margin-top:20px;}

/* unsaved-changes banner · up for as long as the outbox holds work the server has not confirmed */
.outbox-banner{position:fixed;top:0;left:0;right:0;z-index:390;padding:10px 16px;text-align:center;
  font:600 13px/1.4 var(--font-sans);color:var(--bone-50);background:var(--garnet-500);
  box-shadow:var(--shadow-md);}

/* ============================================================
   Setter Pipeline tab (2026-10-14): the setter's Master Lead CRM rows,
   the "needs you" strip (no-shows + Post-Booked SOP steps), the CRM-row drawer.
   Tints use color-mix() on the tokens so the Saulna Software look (theme.css)
   reskins them too; the rgba() line before each is the fallback.
   ============================================================ */
.pipe-toolbar .segmented button .s-num{opacity:.7;margin-left:4px;font-size:12px;}
.pipe-toolbar .search{flex:1;min-width:200px;}
.pipe-note{font-size:13px;margin:6px 0 0;}
.pipe-note--bad{color:var(--garnet-300);}

table.pipe-grid td,table.pipe-grid th{white-space:nowrap;}
table.pipe-grid td.pipe-name,table.pipe-grid th.pipe-name{min-width:190px;white-space:normal;}
table.pipe-grid tbody tr{cursor:pointer;}
table.pipe-grid .chip{font-size:11px;}
tr.prow--noshow{background:rgba(155,63,63,.10);background:color-mix(in srgb,var(--garnet-500) 10%,transparent);box-shadow:inset 3px 0 0 var(--garnet-500);}
tr.prow--task{background:rgba(62,126,94,.08);background:color-mix(in srgb,var(--emerald-500) 9%,transparent);box-shadow:inset 3px 0 0 var(--emerald-500);}

.pipe-alerts{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px;}
.pipe-alerts > .s-eyebrow{margin:0 0 2px;}
.pipe-alert{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;
  padding:8px 12px;border:1px solid var(--ink-line);border-radius:var(--radius-md);background:var(--ink-850);cursor:pointer;}
.pipe-alert__what{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.pipe-alert__what b{font-weight:600;color:var(--bone-50);}
.pipe-alert__what small{color:var(--bone-500);font-size:12px;}
.pipe-alert .row-actions{flex-wrap:wrap;}
.pipe-alert--noshow{border-color:rgba(155,63,63,.45);border-color:color-mix(in srgb,var(--garnet-500) 45%,transparent);
  animation:noshow-shine 2.6s ease-in-out infinite;}
.pipe-alert--task{border-color:rgba(62,126,94,.45);border-color:color-mix(in srgb,var(--emerald-500) 45%,transparent);
  animation:task-shine 2.6s ease-in-out infinite;}
.pipe-alert--soon{padding-top:7px;padding-bottom:7px;}
.pipe-alert--soon .pipe-alert__what b{font-size:13px;color:var(--bone-300);}
.pipe-alert--done{animation:none;opacity:.75;box-shadow:none;}
.drawer .pipe-alert{cursor:default;}
.drawer .pipe-alert + .pipe-alert{margin-top:8px;}
@media (prefers-reduced-motion:reduce){ .pipe-alert--noshow,.pipe-alert--task{animation:none;} }

.pipe-notes{display:flex;flex-direction:column;gap:12px;margin-top:10px;}
.pipe-notes__lab,.pipe-prop__lab{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-500);margin-bottom:4px;}
.pipe-notes__text{white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.5;color:var(--bone-100);
  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;}
.pipe-page summary{cursor:pointer;font-size:13px;color:var(--bone-300);margin-bottom:8px;}
.pipe-page .pipe-notes__text{max-height:320px;overflow:auto;border-left-color:var(--ink-line-2);}
.pipe-addnote{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.pipe-addnote textarea{width:100%;min-height:84px;resize:vertical;}
.pipe-props{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:10px;}
.pipe-prop__val{font-size:13px;color:var(--bone-100);word-break:break-word;}
@media (max-width:560px){ .pipe-props{grid-template-columns:1fr;} .pipe-toolbar .segmented{overflow-x:auto;max-width:100%;} }
/* The pipeline table's box: a constant height, nearly the whole screen, with its own
   scroll (header pinned inside it). The page above it scrolls normally, so however many
   alerts are in the strip, scrolling down always brings the full box into view. These
   selectors outrank the phone rule that unfreezes .tw-split. */
.pipe-box{margin-top:4px;}
.pipe-box > .tw-split{display:flex;flex-direction:column;overflow:hidden;
  height:clamp(320px, calc(100vh - 150px), 1100px);height:clamp(320px, calc(100dvh - 150px), 1100px);}
.pipe-box > .tw-split > .tw-body{flex:1;min-height:0;overflow:auto;}
@media (max-width:900px){ .pipe-box > .tw-split{height:calc(100vh - 110px);height:calc(100dvh - 110px);min-height:300px;} }

/* Paid Ads drawer · the Meta form answers from the lead's CRM page */
.paid-qa{margin:0;display:flex;flex-direction:column;gap:10px;}
.paid-qa dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-500);}
.paid-qa dd{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--bone-100);white-space:pre-wrap;word-break:break-word;}