/* ============================================================
   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:"Bodoni Moda","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;
}
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:var(--topbar-h) 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:0 24px;gap:16px;}
.topbar__title{display:flex;align-items:baseline;gap:14px;min-width: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;}

/* role + member pickers */
.picker{display:flex;align-items:center;gap:8px;}
.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 */
.main{grid-area:main;overflow-y:auto;background:var(--ink-900);}
.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(220px,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);}

/* ============================================================
   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:15px;letter-spacing:.06em;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;}

/* 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 .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: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;}
@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:var(--topbar-h) 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;}
}

@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;}
}