/* ============================================================
   MIKA Productions · Internal Platform — Design System
   Company: MIKA. Brandmark: Bovaro (the bull).
   Brand palette pulled from /Branding Elements:
     #1A1A1A · #B993E0 · #E2DAC9
   Marks: Bovaro Brandmark (Black/Purple), Conscious Seal (Black/Purple).
   ============================================================ */

/* -- Fonts ---------------------------------------------------- */
@font-face { font-family: 'Neue Haas'; font-weight: 100; font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayXXThin.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 100; font-style: italic;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayXXThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 200; font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayThin.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 200; font-style: italic;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 250; font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayXThin.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 250; font-style: italic;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayXThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 300; font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayLight.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 300; font-style: italic;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 400; font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayRoman.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 400; font-style: italic;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayRomanItalic.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 500; font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayMediu.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 500; font-style: italic;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayMediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 700; font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayBold.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 700; font-style: italic;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 900; font-style: normal;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayBlack.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-weight: 900; font-style: italic;
  font-display: swap;
  src: url('assets/fonts/NeueHaasDisplayBlackItalic.ttf') format('truetype'); }

/* v0.12.13 — Neue Haas is the ONLY font in this app. Every element on
   every surface inherits it. Buttons, inputs, textareas, selects, code,
   pre, kbd, and any third-party widget all fall back to Neue Haas; the
   stack below keeps system fonts only as a render-before-load shield. */
:root {
  --font-display: 'Neue Haas', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Neue Haas', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Neue Haas', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Neue Haas', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*, *::before, *::after {
  font-family: 'Neue Haas', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* -- Tokens --------------------------------------------------- */
:root {
  /* ============================================================
     Bovaro brand atoms (do not edit; matched to Branding Elements).
     ONE brand: black canvas, purple accent, bone text. No light
     theme variant — the data-theme="light" block below is kept as
     an alias so the toggle button still resolves but visually
     renders identical to dark.
     ============================================================ */
  --bovaro-black:   #1A1A1A;
  --bovaro-purple:  #B993E0;
  --bovaro-cream:   #E2DAC9;  /* the bone color */

  /* Canvas — always pure brand black. */
  --black:        #1A1A1A;

  /* Lifted neutral surfaces above the canvas. Pure neutral grays
     so nothing tints purple by accident; the purple accent should
     come from the accent color itself, not the surface. */
  --ink:          #1F1F1F;
  --surface:      #262626;
  --surface-2:    #2F2F2F;

  /* Borders — bone with alpha so they read as low-contrast bone
     against the black canvas rather than purple-gray. */
  --line:         rgba(226, 218, 201, 0.12);
  --line-soft:    rgba(226, 218, 201, 0.06);

  /* Text + muted — bone, with a darker variant for body / soft text
     and an alpha bone for muted labels. Replaces the prior off-whites. */
  --text:         #E2DAC9;
  --text-soft:    #B5AC9C;
  --muted:        rgba(226, 218, 201, 0.55);

  /* Cream alias — kept for any callsite that explicitly references
     "cream" (e.g. confetti palette, brand chips). */
  --cream:        #E2DAC9;
  --cream-soft:   #C5BCA8;

  /* Accent — Bovaro purple in three intensities. */
  --purple:       #B993E0;
  --purple-bright:#CFB2EB;
  --purple-deep:  #7E55B8;
  --purple-glow:  rgba(185, 147, 224, 0.18);

  --success:      #7DC68A;
  --warn:         #E5C79B;
  --danger:       #E59B9B;

  /* Type scale */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 14px;
  --t-md:   16px;
  --t-lg:   20px;
  --t-xl:   28px;
  --t-2xl:  40px;
  --t-3xl:  56px;
  --t-4xl:  80px;

  /* Spacing — 4 base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* Radius */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 999px;

  /* Shadow ramp */
  --sh-1: 0 1px 0 rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px var(--line);
  --sh-3: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px var(--line);
  --sh-glow: 0 0 0 3px var(--purple-glow);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 56px;
}

/* Light theme — v0.10.5 restored. The cream side of the Bovaro brand:
   bone canvas, brand-black ink, purple accent stays. Cards are warm
   off-whites raised over the cream; hairlines are inked alpha. Everything
   else (purple, success/warn/danger) carries over so component logic
   doesn't have to branch. The earlier v0.10.2 "one brand = dark only"
   stance is relaxed; cream is part of the brand bible, just less common. */
[data-theme="light"] {
  --black:        #1A1A1A;
  --canvas:       #E2DAC9;
  --ink:          #F1E9D7;
  --surface:      #EFE6D2;
  --surface-2:    #E8DEC6;
  --line:         rgba(26, 26, 26, 0.10);
  --line-soft:    rgba(26, 26, 26, 0.05);
  --muted:        rgba(26, 26, 26, 0.50);
  --text:         #1A1A1A;
  --text-soft:    #4B4640;
  --cream:        #E2DAC9;
  --cream-soft:   #C5BCA8;
  --purple:       #7E55B8;
  --purple-bright:#B993E0;
  --purple-deep:  #5A3895;
  --purple-glow:  rgba(126, 85, 184, 0.16);
}
/* Light theme: switch the body canvas to cream too. */
[data-theme="light"] body { background: var(--canvas); color: var(--text); }
[data-theme="light"] .main, [data-theme="light"] .topbar { background: var(--canvas); }
[data-theme="light"] ::selection { background: var(--purple); color: #FFFFFF; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(26,26,26,0.15); border: 2px solid var(--canvas); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* -- Reset ---------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--black);
  color: var(--text);
  font-family: 'Neue Haas', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--t-base);
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
input, textarea, select {
  background: transparent; border: none; outline: none;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--purple); color: var(--black); }

/* -- Scrollbar ------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid var(--black); }
::-webkit-scrollbar-thumb:hover { background: var(--purple-deep); }

/* ============================================================
   Shell
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height: 100vh;
}

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background: var(--ink);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-4) var(--s-4);
  position: relative;
  overflow: hidden;
}
.sidebar-brand {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-6);
}
/* Legacy class retained as a no-op for any third-party embeds; modern lockup
   uses .brand-mark + .lockup. */
.sidebar-brand .skull-mini { width: 28px; height: 22px; opacity: .95; }
.sidebar-brand .word {
  font-weight: 900; letter-spacing: 0.04em; font-size: var(--t-md);
  color: var(--purple);
}
.sidebar-brand .word b { color: var(--text); font-weight: 900; font-size: 11px; letter-spacing: 0.16em; display:block; opacity: .55; margin-top: 2px;}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-section { font-size: var(--t-xs); letter-spacing: 0.14em; color: var(--muted);
  text-transform: uppercase; padding: var(--s-5) var(--s-3) var(--s-2); font-weight: 500; }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  color: var(--text-soft);
  font-size: var(--t-sm); font-weight: 400;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  position: relative;
  cursor: pointer;
  user-select: none;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--surface); color: var(--purple); }
.nav-item.active::before {
  content: ''; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 2px;
  background: var(--purple); border-radius: 2px;
}
.nav-item .ic { width: 16px; height: 16px; opacity: .8; flex-shrink:0; }
.nav-item.active .ic { opacity: 1; }

.sidebar-footer {
  border-top: 1px solid var(--line);
  padding: var(--s-4) var(--s-3) var(--s-2);
  display: flex; align-items: center; gap: var(--s-3);
}
.avatar {
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  display: grid; place-items: center;
  color: var(--black); font-weight: 700; font-size: var(--t-sm);
  cursor: pointer;
}
.user-meta { font-size: var(--t-sm); line-height: 1.2; flex: 1; min-width: 0; }
.user-meta b { display:block; color: var(--text); font-weight: 500; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta span { color: var(--muted); font-size: var(--t-xs); }

/* Topbar */
.topbar {
  grid-area: topbar;
  background: var(--black);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 var(--s-6);
  gap: var(--s-4);
}
.crumb { color: var(--muted); font-size: var(--t-sm); display: flex; align-items: center; gap: var(--s-2); }
.crumb b { color: var(--text); font-weight: 500; }
.topbar-spacer { flex: 1; }
.cmdk-trigger {
  display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-size: var(--t-sm);
  min-width: 240px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cmdk-trigger:hover { border-color: var(--purple-deep); }
.cmdk-trigger kbd {
  margin-left: auto;
  font-family: 'Neue Haas'; font-size: 11px;
  padding: 2px 6px; border-radius: var(--r-1);
  background: var(--ink); color: var(--text-soft);
  border: 1px solid var(--line);
}
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-2);
  display: grid; place-items: center;
  color: var(--text-soft);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover { background: var(--surface); color: var(--text); }

/* Main */
.main {
  grid-area: main;
  overflow-y: auto;
  background: var(--black);
  position: relative;
}
/* v0.12.10 — page fills the entire viewport, scaling padding with width.
   Previously capped at 1400px which left a large dead gutter on big
   monitors. Now full-width with clamp()ed horizontal padding that
   grows on wider screens and shrinks on narrower ones. */
.page {
  padding: var(--s-7) clamp(20px, 3.5vw, 64px);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--s-7); gap: var(--s-5); flex-wrap: wrap;
}
.page-head h1 { font-weight: 900; font-size: var(--t-2xl); letter-spacing: -0.02em; line-height: 1; }
.page-head h1 em { font-style: normal; color: var(--purple); }
.page-head p.lede { color: var(--text-soft); font-size: var(--t-md); margin-top: var(--s-3); max-width: 60ch; font-weight: 300; }

/* ============================================================
   Components
   ============================================================ */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 10px 16px; border-radius: var(--r-2);
  font-size: var(--t-sm); font-weight: 500;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line);
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer; user-select: none;
}
.btn:hover { background: var(--surface-2); border-color: var(--line); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--sh-glow); }
.btn-primary { background: var(--purple); color: var(--black); border-color: var(--purple); font-weight: 700; }
.btn-primary:hover { background: var(--purple-bright); border-color: var(--purple-bright); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface); color: var(--text); }
.btn-sm { padding: 6px 10px; font-size: var(--t-xs); }
.btn-lg { padding: 14px 22px; font-size: var(--t-md); }

/* Cards */
.card {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--line); }
.card-tight { padding: var(--s-5); }
.card h3 { font-size: var(--t-md); font-weight: 500; letter-spacing: -0.005em; margin-bottom: var(--s-2); }
.card .meta { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; }

.kpi {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: var(--s-5);
  position: relative; overflow: hidden;
}
.kpi .label { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; }
.kpi .value { font-size: var(--t-2xl); font-weight: 900; letter-spacing: -0.025em; margin-top: var(--s-3); line-height: 1; }
.kpi .delta { font-size: var(--t-xs); margin-top: var(--s-2); color: var(--success); }
.kpi .delta.down { color: var(--danger); }

.grid { display: grid; gap: var(--s-5); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-2-sidebar { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 500; }
.field .ctl, .input, textarea.input, select.input {
  background: var(--surface); border: 1px solid var(--line);
  padding: 10px 12px; border-radius: var(--r-2);
  color: var(--text); font-size: var(--t-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  font-family: inherit;
}
.input:focus, textarea.input:focus, select.input:focus {
  border-color: var(--purple-deep); box-shadow: var(--sh-glow);
}
textarea.input { min-height: 80px; resize: vertical; }
.field-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
.field-row-3 { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr 1fr; }

/* Pills / chips — liquid glass */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 500;
  background: var(--glass-bg-subtle);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  color: var(--text-soft);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(226, 218, 201, 0.04);
}
.pill .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--purple); }
.pill.success { color: var(--success); border-color: rgba(125, 198, 138, 0.3); }
.pill.success .dot { background: var(--success); }
.pill.warn { color: var(--warn); border-color: rgba(229, 199, 155, 0.3); }
.pill.warn .dot { background: var(--warn); }
.pill.danger { color: var(--danger); border-color: rgba(229, 155, 155, 0.3); }
.pill.danger .dot { background: var(--danger); }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.table th { color: var(--muted); font-weight: 500; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.1em; }
.table tr { transition: background var(--dur-fast); }
.table tbody tr:hover { background: var(--surface); }

/* ============================================================
   Command Palette
   ============================================================ */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.cmdk-overlay.open { opacity: 1; pointer-events: auto; }
.cmdk {
  width: min(640px, 90vw);
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  overflow: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-out);
}
.cmdk-overlay.open .cmdk { transform: translateY(0) scale(1); }
.cmdk-input-wrap {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.cmdk-input-wrap svg { color: var(--muted); }
.cmdk-input { flex: 1; font-size: var(--t-md); background: transparent;
  color: var(--text); padding: 0; }
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: var(--s-2); }
.cmdk-group-title { padding: var(--s-3) var(--s-4) var(--s-2);
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted); font-weight: 500; }
.cmdk-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  cursor: pointer;
}
.cmdk-item.selected { background: var(--surface); }
.cmdk-item .ico { width: 18px; height: 18px; color: var(--purple); }
.cmdk-item .label { flex: 1; }
.cmdk-item .hint { color: var(--muted); font-size: var(--t-xs); }
.cmdk-empty { padding: var(--s-7) var(--s-5); text-align:center; color: var(--muted); }
.cmdk-footer {
  display: flex; gap: var(--s-4); padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--muted);
}
.cmdk-footer kbd {
  font-family: 'Neue Haas'; padding: 1px 6px; border-radius: var(--r-1);
  background: var(--surface); border: 1px solid var(--line); margin-right: 4px;
}

/* ============================================================
   Invoice / PO Builder
   ============================================================ */
.builder {
  display: grid;
  grid-template-columns: minmax(360px, 480px) 1fr;
  gap: var(--s-7);
  align-items: flex-start;
}
@media (max-width: 1100px) { .builder { grid-template-columns: 1fr; } }

.line-items { display: flex; flex-direction: column; gap: var(--s-2); }
.line-item {
  display: grid;
  grid-template-columns: 1fr 80px 100px 32px;
  gap: var(--s-2);
  align-items: center;
}
.line-item .input { padding: 8px 10px; font-size: var(--t-sm); }
.line-item .row-rm {
  width: 32px; height: 32px; border-radius: var(--r-2);
  display: grid; place-items: center;
  color: var(--muted); transition: all var(--dur-fast);
}
.line-item .row-rm:hover { color: var(--danger); background: var(--surface); }

/* PDF Preview */
.preview-wrap {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: var(--s-4);
  position: sticky; top: var(--s-5);
}
.preview-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-2) var(--s-3) var(--s-4);
}
.preview-toolbar .title { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 500; }
.preview-page {
  background: var(--cream);
  color: var(--black);
  aspect-ratio: 8.5 / 11;
  padding: 48px 56px;
  border-radius: var(--r-2);
  font-size: 11px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 32px rgba(0,0,0,0.6);
}
.preview-page header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-bottom: 24px; border-bottom: 1px solid #E5E2D9;
  margin-bottom: 28px;
}
.preview-page h2 { font-weight: 900; font-size: 28px; letter-spacing: -0.02em; color: #1A1A1A; }
.preview-page .doctype { font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em;
  color: #7E55B8; font-weight: 700; margin-top: 6px;}
.preview-page .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.preview-page .meta-grid h4 { font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em; color: #8A8A8A; font-weight: 500; margin-bottom: 6px;}
.preview-page .meta-grid p { font-size: 10px; line-height: 1.5; }
.preview-page table.lines { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.preview-page table.lines th, .preview-page table.lines td { padding: 10px 8px; text-align: left; font-size: 9px; border-bottom: 1px solid #E5E2D9; }
.preview-page table.lines th { font-size: 8px; text-transform: uppercase; letter-spacing: 0.12em; color: #8A8A8A; font-weight: 500; border-bottom-color: #1A1A1A;}
.preview-page table.lines td.r, .preview-page table.lines th.r { text-align: right; }
.preview-page .totals { margin-left: auto; width: 240px; font-size: 10px; }
.preview-page .totals .row { display: flex; justify-content: space-between; padding: 4px 0; }
.preview-page .totals .row.grand { border-top: 1px solid #1A1A1A; margin-top: 8px; padding-top: 10px; font-weight: 900; font-size: 14px; }
.preview-page footer {
  position: absolute; bottom: 32px; left: 56px; right: 56px;
  border-top: 1px solid #E5E2D9; padding-top: 14px;
  font-size: 8px; color: #8A8A8A; line-height: 1.4;
  display: flex; justify-content: space-between; gap: 24px;
}
.preview-page .skull-print { width: 36px; height: 28px; }

/* History list */
.history {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-7);
}
.history-row {
  display: grid;
  grid-template-columns: 130px 1fr 110px 100px 36px;
  gap: var(--s-4); align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--ink);
  transition: border-color var(--dur-fast);
  cursor: pointer;
}
.history-row:hover { border-color: var(--purple-deep); }
.history-row .num { font-weight: 700; color: var(--purple); letter-spacing: 0.04em; }
.history-row .who { color: var(--text); }
.history-row .amt { font-weight: 700; text-align: right; }
.history-row .when { color: var(--muted); font-size: var(--t-xs); }
.history-row .row-rm {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  width: 32px; height: 32px; border-radius: var(--r-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--dur-fast);
}
.history-row .row-rm:hover { color: var(--danger); border-color: var(--line); background: var(--surface); }

/* Empty states */
.empty {
  border: 1px dashed var(--line); border-radius: var(--r-3);
  padding: var(--s-7); text-align: center; color: var(--muted);
  background: var(--ink);
}
.empty h3 { color: var(--text); font-size: var(--t-md); font-weight: 500; margin-bottom: var(--s-2); }
.empty p { font-size: var(--t-sm); max-width: 420px; margin: 0 auto var(--s-4); line-height: 1.5; }

/* CRUD list rows */
.list-row {
  display: grid; grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr 80px;
  gap: var(--s-4); align-items: center;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.list-row:first-child { border-top: none; }
.list-row.head { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; padding: var(--s-2) var(--s-4); }
.list-row .actions { display: flex; gap: var(--s-2); justify-content: flex-end; }
.list-row .icon-btn { background: transparent; border: 1px solid transparent; color: var(--muted); width: 28px; height: 28px; border-radius: var(--r-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--dur-fast); }
.list-row .icon-btn:hover { color: var(--text); border-color: var(--line); background: var(--surface); }
.list-row .icon-btn.danger:hover { color: var(--danger); }

/* Status indicator badge variant */
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); }
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.status-badge.healthy .dot, .status-badge.on_track .dot, .status-badge.complete .dot { background: var(--success); }
.status-badge.watching .dot, .status-badge.in_progress .dot, .status-badge.concept .dot { background: var(--purple); }
.status-badge.at_risk .dot { background: var(--warn); }
.status-badge.paused .dot { background: var(--danger); }

/* Toast */
.toast-stack {
  position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: 200;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.toast {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: var(--s-4) var(--s-5);
  box-shadow: var(--sh-3); min-width: 280px;
  display: flex; align-items: center; gap: var(--s-3);
  animation: toast-in 240ms var(--ease-out);
}
.toast .ic { color: var(--purple); flex-shrink:0; }
.toast b { display:block; font-weight: 500; font-size: var(--t-sm); }
.toast span { color: var(--muted); font-size: var(--t-xs); }
@keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Achievement / win card */
.win-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.9);
  background: linear-gradient(135deg, var(--ink) 0%, #2A1F3D 100%);
  border: 1px solid var(--purple-deep);
  border-radius: var(--r-4); padding: var(--s-9) var(--s-9);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--purple-deep);
  text-align: center; z-index: 250;
  opacity: 0; pointer-events: none;
  transition: all 360ms var(--ease-out);
  min-width: 360px;
}
.win-card.show { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto; }
.win-card .badge { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--purple); font-weight: 700; }
.win-card h2 { font-size: var(--t-xl); font-weight: 900; margin: var(--s-3) 0 var(--s-2); letter-spacing: -0.01em; }
.win-card p { color: var(--text-soft); margin-bottom: var(--s-5); }
/* Win card brandmark; v0.4 uses .brand-mark.purple.size-md inline. Old class kept for any references. */
.win-card .skull-big { width: 80px; height: 64px; margin: 0 auto var(--s-4); }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s linear infinite;
  border-radius: var(--r-2);
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Page transitions */
.view {
  animation: view-in 320ms var(--ease-out);
}
.view.hidden { display: none; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Helper layouts */
.hstack { display:flex; align-items:center; gap: var(--s-3); }
.vstack { display:flex; flex-direction: column; gap: var(--s-3); }
.between { justify-content: space-between; }
.muted { color: var(--muted); }
.t-eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); font-weight: 500; }
.divider { border-top: 1px solid var(--line); margin: var(--s-6) 0; }

/* Switcher */
.role-switcher {
  display: inline-flex; padding: 4px; background: var(--surface); border-radius: var(--r-pill);
  border: 1px solid var(--line); gap: 2px;
}
.role-switcher button {
  padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--t-xs);
  color: var(--text-soft); transition: all var(--dur-fast);
}
.role-switcher button.active { background: var(--purple); color: var(--black); font-weight: 600; }

/* Dashboard widgets */
.widget {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: var(--s-5);
}
.widget h4 { font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s-4); display:flex; align-items:center; justify-content: space-between; }
.widget h4 .t-eyebrow { font-size: 10px; }
.widget-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm);
}
.widget-row:last-child { border-bottom: 0; }

/* Progress */
.progress { background: var(--surface); border-radius: var(--r-pill); height: 6px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--purple); border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out); }

/* Hero strip */
.hero-strip {
  background: linear-gradient(135deg, var(--ink) 0%, #2A1F3D 100%);
  border: 1px solid var(--line); border-radius: var(--r-4);
  padding: var(--s-7) var(--s-7);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-7); align-items: center;
  margin-bottom: var(--s-7);
  position: relative; overflow: hidden;
}
.hero-strip::after {
  content:''; position:absolute; right:-80px; top:-40px; width: 360px; height: 360px;
  background: radial-gradient(circle, var(--purple-glow) 0%, transparent 60%);
  pointer-events:none;
}
.hero-strip h2 { font-size: var(--t-2xl); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.hero-strip h2 em { font-style: normal; color: var(--purple); }
.hero-strip p { color: var(--text-soft); margin-top: var(--s-3); max-width: 56ch; font-weight: 300; }
.hero-skull { width: 220px; height: 160px; opacity: .9; }

/* Density */
[data-density="compact"] {
  --s-3: 8px; --s-4: 12px; --s-5: 14px; --s-6: 18px; --s-7: 22px;
}

/* Drag handle */
.drag-handle {
  cursor: grab; color: var(--muted); padding: 0 var(--s-2);
  opacity: 0; transition: opacity var(--dur-fast);
}
.widget:hover .drag-handle { opacity: 1; }
.widget.dragging { opacity: 0.4; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; z-index: 150;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: var(--s-7); min-width: 420px; max-width: 560px; box-shadow: var(--sh-3);
  max-height: 85vh; overflow-y: auto;
}
.modal h3 { font-size: var(--t-lg); margin-bottom: var(--s-5); font-weight: 700; letter-spacing: -0.01em; }
.modal .actions { display: flex; gap: var(--s-3); justify-content: flex-end; margin-top: var(--s-5); }

/* ============================================================
   v0.3 components: kanban, finance, chat, mood board, brand
   ============================================================ */

/* Kanban */
.kanban {
  display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: var(--s-4); margin-top: var(--s-5); overflow-x: auto;
}
.kanban-col {
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: var(--s-4); min-height: 360px;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.kanban-col.drop-target { border-color: var(--purple); background: var(--surface); }
.kanban-col h4 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); display: flex; justify-content: space-between; align-items: center;
  font-weight: 500; margin-bottom: var(--s-1);
}
.kanban-col h4 .count {
  background: var(--surface); color: var(--text-soft);
  padding: 2px 8px; border-radius: var(--r-pill); font-size: 10px;
}
.task-card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-2); padding: var(--s-3) var(--s-4);
  cursor: grab; transition: all var(--dur-fast); user-select: none;
}
.task-card:hover { border-color: var(--purple-deep); transform: translateY(-1px); }
.task-card.dragging { opacity: 0.5; cursor: grabbing; }
.task-card .title { font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s-2); }
.task-card .meta { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.task-card .priority { padding: 2px 6px; border-radius: var(--r-pill); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--line); }
.task-card .priority.critical { color: var(--danger); border-color: rgba(229, 155, 155, 0.3); }
.task-card .priority.high { color: var(--warn); border-color: rgba(229, 199, 155, 0.3); }
.task-card .priority.low { color: var(--muted); }

/* Project list */
.project-row {
  display: grid; grid-template-columns: 24px 1.6fr 0.8fr 0.8fr 0.6fr 0.8fr 80px;
  gap: var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line-soft); cursor: pointer;
  transition: background var(--dur-fast);
}
.project-row:hover { background: var(--surface); }
.project-row.selected { background: var(--surface); border-left: 2px solid var(--purple); }
.project-row.head { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; padding: var(--s-2) var(--s-4); cursor: default; }
.project-row.head:hover { background: transparent; }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; }
.priority-dot.critical { background: var(--danger); }
.priority-dot.high { background: var(--warn); }
.priority-dot.medium { background: var(--purple); }
.priority-dot.low { background: var(--muted); }

/* Finance */
.finance-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-5); }
@media (max-width: 1100px) { .finance-grid { grid-template-columns: 1fr 1fr; } }
.fin-card { background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); }
.fin-stat { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin-top: var(--s-2); }
.fin-stat.up { color: var(--success); }
.fin-stat.down { color: var(--danger); }
.bar-chart { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.bar-row { display: grid; grid-template-columns: 130px 1fr 80px; align-items: center; gap: var(--s-3); font-size: 12px; }
.bar-track { height: 8px; background: var(--surface); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); border-radius: var(--r-pill); transition: width 360ms var(--ease-out); }
.bar-fill.over { background: linear-gradient(90deg, var(--warn), var(--danger)); }
.bar-row .amt { text-align: right; color: var(--text-soft); }

/* Chat */
.chat-shell { display: grid; grid-template-columns: 220px 1fr; gap: 0; height: calc(100vh - 220px); min-height: 480px;
  border: 1px solid var(--line); border-radius: var(--r-3); background: var(--ink); overflow: hidden; }
.chat-channels { border-right: 1px solid var(--line); padding: var(--s-4) var(--s-2); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.chat-channels h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); padding: 0 var(--s-3); margin-bottom: var(--s-2); margin-top: var(--s-2); font-weight: 500; }
.chat-channel {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-2); cursor: pointer;
  font-size: var(--t-sm); color: var(--text-soft); display: flex; align-items: center; gap: 8px;
}
.chat-channel:hover { background: var(--surface); color: var(--text); }
.chat-channel.active { background: var(--surface); color: var(--text); }
.chat-channel .hash { color: var(--muted); }
.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-header { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.chat-header h3 { font-size: var(--t-md); font-weight: 500; }
.chat-header p { color: var(--muted); font-size: var(--t-xs); margin-top: 2px; }
.chat-stream { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.chat-msg { display: flex; gap: var(--s-3); }
.chat-msg .avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.chat-msg .body { flex: 1; min-width: 0; }
.chat-msg .body .who { font-weight: 500; font-size: var(--t-sm); }
.chat-msg .body .when { color: var(--muted); font-size: 11px; margin-left: 8px; }
.chat-msg .body .text { font-size: var(--t-sm); color: var(--text-soft); white-space: pre-wrap; word-wrap: break-word; margin-top: 4px; line-height: 1.5; }
.chat-input {
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); display: flex; gap: var(--s-3); align-items: flex-end;
}
.chat-input textarea { resize: none; min-height: 40px; max-height: 120px; flex: 1; }

/* Mood board */
.mood-grid {
  columns: 4 240px; column-gap: var(--s-4);
}
.mood-item {
  break-inside: avoid; margin-bottom: var(--s-4);
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3);
  overflow: hidden; transition: all var(--dur-fast); position: relative;
}
.mood-item:hover { border-color: var(--purple-deep); transform: translateY(-2px); }
.mood-item img { display: block; width: 100%; height: auto; }
.mood-item .swatch { display: block; width: 100%; height: 160px; }
.mood-item .meta { padding: var(--s-3) var(--s-4); }
.mood-item h5 { font-size: var(--t-sm); font-weight: 500; }
.mood-item p { font-size: 11px; color: var(--muted); margin-top: 2px; }
.mood-item .pin { position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: var(--r-pill); background: rgba(0,0,0,0.6); color: var(--purple); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.mood-item .actions { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur-fast); }
.mood-item:hover .actions { opacity: 1; }
.mood-item .actions button {
  background: rgba(0,0,0,0.7); color: var(--text); border: 1px solid var(--line);
  padding: 4px 8px; font-size: 11px; border-radius: var(--r-2); cursor: pointer;
}
.mood-item .actions button:hover { background: var(--surface); }

/* Brand kit */
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.token-tile { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-2); padding: var(--s-3); }
.token-tile .swatch { height: 56px; border-radius: var(--r-2); margin-bottom: var(--s-2); }
.token-tile .name { font-size: var(--t-xs); font-weight: 500; }
.token-tile .val { font-size: 10px; color: var(--muted); font-family: var(--font-mono, 'Neue Haas'); margin-top: 2px; }
.type-row { padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
.type-row:first-child { border-top: none; }
.type-row .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 6px; }

/* Profile */
.profile-hero {
  background: linear-gradient(135deg, var(--ink), #2A1F3D); border: 1px solid var(--purple-deep);
  border-radius: var(--r-4); padding: var(--s-7); display: flex; gap: var(--s-5); align-items: center;
}
.profile-hero .avatar { width: 88px; height: 88px; font-size: 32px; }
.profile-hero h2 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.01em; }
.profile-hero p { color: var(--text-soft); margin-top: 4px; }
.profile-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); font-size: 12px; color: var(--text-soft); }
.profile-meta .k { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.12em; }

/* AI tip */
/* Connection chip in topbar */
.conn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; letter-spacing: 0.04em;
  border: 1px solid var(--line); color: var(--muted);
  background: var(--ink);
}
.conn-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.conn-chip.cloud { color: var(--success); border-color: rgba(125, 198, 138, 0.3); }
.conn-chip.cloud .dot { background: var(--success); }

/* ============================================================
   Bovaro brand helpers (v0.4)
   ============================================================ */

/* Brand mark images (load Bovaro SVG via background; theme-swappable) */
.brand-mark { display: inline-block; vertical-align: middle; }
.brand-mark.purple {
  background-image: url('assets/brand/mika-skull.svg');
  background-repeat: no-repeat; background-size: contain; background-position: center;
}
.brand-mark.black {
  background-image: url('assets/brand/mika-skull-light.svg');
  background-repeat: no-repeat; background-size: contain; background-position: center;
}
[data-theme="light"] .brand-mark.adaptive { background-image: url('assets/brand/mika-skull-light.svg'); }
[data-theme="dark"]  .brand-mark.adaptive { background-image: url('assets/brand/mika-skull.svg'); }

.brand-mark.size-mini  { width: 22px; height: 16px; }
.brand-mark.size-sm    { width: 32px; height: 24px; }
.brand-mark.size-md    { width: 56px; height: 40px; }
.brand-mark.size-lg    { width: 120px; height: 86px; }
.brand-mark.size-xl    { width: 240px; height: 172px; }

/* Sidebar wordmark; uses the Bovaro mark + clean BOVARO type lockup */
.sidebar-brand .lockup {
  display: flex; align-items: center; gap: var(--s-3);
}
.sidebar-brand .lockup .word { line-height: 1; }
.sidebar-brand .lockup .word .name {
  display: block; font-weight: 900; letter-spacing: 0.14em;
  font-size: 16px; color: var(--text);
}
.sidebar-brand .lockup .word .sub {
  display: block; margin-top: 4px;
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.sidebar-brand .lockup .word .sub .dot {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--purple); vertical-align: middle; margin: 0 6px;
}

/* Conscious Seal (secondary mark) used as decorative anchor */
.conscious-seal {
  width: 36px; height: 100px;
  background-image: url('assets/brand/conscious-seal-purple.svg');
  background-repeat: no-repeat; background-size: contain; background-position: center;
  opacity: 0.9;
}
[data-theme="light"] .conscious-seal { background-image: url('assets/brand/conscious-seal-black.svg'); }

/* Brand chip used in Brand Kit + topbar */
.brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 6px; border-radius: var(--r-pill);
  background: var(--ink); border: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft);
}
.brand-chip .brand-mark { flex-shrink: 0; }

/* Hero strip refresh; richer purple wash + seal accent */
.hero-strip { background: linear-gradient(135deg, var(--ink) 0%, #2A1F3D 60%, #1F1A2A 100%); }
.hero-strip .hero-skull { /* replaced visually with brandmark; keep slot working */
  width: 220px; height: 158px;
  background-image: url('assets/brand/mika-skull.svg');
  background-repeat: no-repeat; background-size: contain; background-position: right center;
}

/* ============================================================
   Canonical tab style — used everywhere (Finance, Projects,
   Dashboard, etc.). v0.10.14.10: scaled ~20% larger and made
   the single source of truth so every tab on the site is
   visually consistent. Aliased: .proj-tabs, .dash-tabs.
   ============================================================ */
.view-tabs,
.proj-tabs,
.dash-tabs {
  display: inline-flex; padding: 5px; background: var(--ink); border-radius: var(--r-pill);
  border: 1px solid var(--line); gap: 3px; flex-wrap: wrap;
}
.view-tabs button,
.proj-tabs button,
.dash-tabs button {
  padding: 8px 18px; border-radius: var(--r-pill); font-size: var(--t-sm);
  color: var(--text-soft); transition: all var(--dur-fast); letter-spacing: 0.04em;
  border: none; background: transparent; cursor: pointer; font-weight: 500;
}
.view-tabs button.active,
.proj-tabs button.active,
.dash-tabs button.active { background: var(--purple); color: var(--bovaro-black); font-weight: 600; }
.view-tabs button:hover:not(.active),
.proj-tabs button:hover:not(.active),
.dash-tabs button:hover:not(.active) { color: var(--text); background: var(--surface); }

/* Subtask list */
.subtask-list { margin-top: var(--s-3); border-top: 1px solid var(--line-soft); padding-top: var(--s-3); }
.subtask-row {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center;
  padding: 6px 0; font-size: var(--t-sm);
}
.subtask-row input[type="checkbox"] { accent-color: var(--purple); cursor: pointer; }
.subtask-row.done .label { color: var(--muted); text-decoration: line-through; }
.subtask-row .label { color: var(--text-soft); }
.subtask-row .meta { color: var(--muted); font-size: 11px; }

/* Task detail drawer */
.detail-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(520px, 100%);
  background: var(--ink); border-left: 1px solid var(--line); box-shadow: var(--sh-3);
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out);
  z-index: 180; overflow-y: auto; padding: var(--s-6) var(--s-7);
}
.detail-drawer.open { transform: translateX(0); }
.detail-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
  z-index: 175; display: none;
}
.detail-drawer-overlay.open { display: block; }
.detail-drawer h2 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.01em; margin-bottom: var(--s-2); }
/* v0.12.9 — .detail-drawer .x-close sizing/positioning now lives in the
   single .x-close block near the bottom of styles.css. Older rules here
   removed to stop the higher-specificity override from drifting the hit
   target off the visible glyph. */
.comment-thread { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.comment {
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r-2);
  background: var(--surface);
}
.comment .who { font-size: var(--t-xs); color: var(--purple); font-weight: 600; }
.comment .when { color: var(--muted); font-size: 11px; margin-left: 8px; }
.comment .body { font-size: var(--t-sm); color: var(--text-soft); margin-top: 4px; line-height: 1.5; }

/* Finance widgets v2 */
.runway-card {
  background: linear-gradient(135deg, var(--ink), #2A1F3D);
  border: 1px solid var(--purple-deep); border-radius: var(--r-3);
  padding: var(--s-6);
}
.runway-card .stat { font-size: 40px; font-weight: 900; letter-spacing: -0.025em; line-height: 1; }
.runway-card .meta { color: var(--text-soft); font-size: 12px; margin-top: 6px; }
.month-strip {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: var(--s-4);
}
.month-strip .cell {
  height: 48px; border-radius: var(--r-1); background: var(--surface);
  position: relative; overflow: hidden;
}
.month-strip .cell::after {
  content: attr(data-label); position: absolute; bottom: 4px; left: 0; right: 0;
  text-align: center; font-size: 9px; color: var(--muted); letter-spacing: 0.08em;
}
.month-strip .cell .fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, var(--purple), var(--purple-deep));
  border-radius: var(--r-1);
}

/* Toggle pill */
.toggle-pill {
  display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); gap: 0;
}
.toggle-pill button {
  padding: 4px 12px; border-radius: var(--r-pill); font-size: 11px;
  color: var(--text-soft); letter-spacing: 0.04em; text-transform: uppercase;
}
.toggle-pill button.active { background: var(--purple); color: var(--bovaro-black); font-weight: 700; }

/* Print PDF preview header brandmark */
.preview-page .brand-print {
  width: 36px; height: 26px;
  background-image: url('assets/brand/mika-skull-light.svg');
  background-repeat: no-repeat; background-size: contain; background-position: left center;
  margin-right: 10px;
}

/* ============================================================
   Auth shell — sign-in screen shown until Supabase Auth resolves
   a session. Drives visibility off <html data-auth="..."> so the
   workspace never flashes before the gate.
   ============================================================ */

/* Boot-time visibility states; pending/out hides .app, in/offline hides shell.
   We use [hidden] on .auth-shell for screen-readers + the no-Supabase case;
   data-auth handles the no-flash gate while session check is in flight. */
html[data-auth="pending"] .app,
html[data-auth="out"]     .app { display: none !important; }
html[data-auth="pending"] #auth-shell,
html[data-auth="out"]     #auth-shell { display: grid !important; }

.auth-shell {
  /* Hidden by default; revealed only by html[data-auth="pending"|"out"] above. */
  display: none;
  position: fixed; inset: 0; z-index: 300;
  place-items: center; min-height: 100vh;
  padding: var(--s-6);
  background:
    radial-gradient(circle at 30% 20%, rgba(185,147,224,0.18), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(126,85,184,0.10), transparent 60%),
    var(--black);
  animation: auth-fade-in 220ms ease-out;
}
@keyframes auth-fade-in { from { opacity: 0; } to { opacity: 1; } }

.auth-card {
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-4);
  padding: var(--s-8) var(--s-8) var(--s-7);
  width: min(420px, 92vw); box-shadow: var(--sh-3); text-align: center;
}
.auth-card .lock-mark {
  width: 56px; height: 40px; margin: 0 auto var(--s-4);
  background-image: url('assets/brand/mika-skull.svg');
  background-repeat: no-repeat; background-size: contain; background-position: center;
}
.auth-eyebrow { color: var(--muted); margin: 0 0 var(--s-2); }
.auth-title {
  font-size: 28px; font-weight: 600; margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}
.auth-sub {
  color: var(--muted); font-size: 13px; margin: 0 0 var(--s-6);
}
.auth-form { display: flex; flex-direction: column; gap: var(--s-4); text-align: left; }
.auth-form .field { margin: 0; }
.auth-form .field label {
  display: block; font-size: 12px; color: var(--muted);
  margin-bottom: var(--s-1); letter-spacing: 0.02em;
}
.auth-form .input { width: 100%; }
.auth-form .field[hidden] { display: none; }

.auth-error {
  background: rgba(220, 80, 80, 0.10);
  border: 1px solid rgba(220, 80, 80, 0.35);
  color: #E58A8A;
  border-radius: var(--r-2);
  padding: 10px 12px; font-size: 13px;
  text-align: left;
}
[data-theme="light"] .auth-error { color: #B23A3A; background: rgba(220,80,80,0.06); }

.auth-notice {
  background: rgba(185, 147, 224, 0.10);
  border: 1px solid rgba(185, 147, 224, 0.30);
  color: var(--purple);
  border-radius: var(--r-2);
  padding: 10px 12px; font-size: 13px;
  text-align: left;
}

.auth-submit {
  width: 100%; padding: 12px 16px;
  margin-top: var(--s-2);
  font-weight: 600;
}
.auth-submit[disabled] { opacity: 0.6; cursor: progress; }

.auth-link {
  background: none; border: none;
  color: var(--purple); font-size: 13px;
  cursor: pointer; padding: var(--s-2);
  text-align: center;
  border-radius: var(--r-1);
  transition: color 0.15s ease;
}
.auth-link:hover { color: var(--purple-bright); }
.auth-link[disabled] { opacity: 0.5; cursor: progress; }

.auth-foot {
  color: var(--muted); font-size: 12px;
  margin: var(--s-6) 0 0;
}

/* Sign-out button in the sidebar footer */
.sign-out-btn {
  margin-left: auto;
  width: 28px; height: 28px;
  color: var(--muted);
}
.sign-out-btn:hover { color: var(--purple); }

/* ============================================================
   v0.6 — Product Builder, Production Schedule, Samples,
   Content Calendar, Channels & Analytics.
   ============================================================ */

/* Product gallery */
.product-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.product-card {
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3);
  overflow: hidden; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  border-color: var(--purple-deep);
}
.product-cover {
  width: 100%; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: grid; place-items: center;
}
.product-cover-empty {
  color: var(--muted); font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.product-body { padding: var(--s-4); }
.product-meta {
  margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: 6px;
}
.product-meta span {
  font-size: 11px; padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
  letter-spacing: 0.02em;
}

/* Product editor — photo grid */
.product-form .field-row { gap: var(--s-4); }
.photo-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  margin-top: 4px;
}
.photo-tile {
  position: relative; aspect-ratio: 1 / 1;
  background-color: var(--surface); background-size: cover; background-position: center;
  border-radius: var(--r-2); border: 1px solid var(--line);
}
.photo-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: var(--text); border: none;
  font-size: 16px; line-height: 18px; cursor: pointer;
}
.photo-add {
  aspect-ratio: 1 / 1; display: grid; place-items: center; gap: 4px;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-2);
  cursor: pointer; color: var(--muted);
  transition: all 0.15s ease;
}
.photo-add:hover { color: var(--purple); border-color: var(--purple-deep); background: var(--surface-2); }
.photo-add-plus { font-size: 24px; line-height: 1; font-weight: 300; }
.photo-add-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Production schedule rows */
.schedule-rows { display: flex; flex-direction: column; gap: 10px; }
.schedule-row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-2);
  cursor: pointer; transition: border-color 0.15s ease;
}
.schedule-row:hover { border-color: var(--purple-deep); }
.schedule-date {
  display: flex; flex-direction: column; align-items: center;
  width: 48px; flex: 0 0 48px;
  padding: 6px 0; border-radius: var(--r-2);
  background: var(--ink); border: 1px solid var(--line);
}
.schedule-date b { font-size: 18px; line-height: 1; }
.schedule-date span { font-size: 10px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.schedule-countdown {
  font-size: 11px; padding: 4px 10px; border-radius: var(--r-pill);
  font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
}
.schedule-countdown.tone-ok    { background: rgba(126,85,184,0.15); color: var(--purple); }
.schedule-countdown.tone-soon  { background: rgba(232, 188, 92, 0.15); color: #E8BC5C; }
.schedule-countdown.tone-late  { background: rgba(220, 80, 80, 0.15); color: #E58A8A; }

/* Generic data table reused by Samples + future list views */
.data-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.data-table thead th {
  text-align: left; font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.data-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody td { padding: 12px 10px; vertical-align: middle; }
.data-table tbody tr:hover { background: var(--surface); }

/* Content calendar rows */
.content-rows { display: flex; flex-direction: column; gap: 8px; }
.content-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  cursor: pointer; transition: border-color 0.15s ease;
}
.content-row:hover { border-color: var(--purple-deep); }
.channel-pill {
  font-size: 11px; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(126,85,184,0.15); color: var(--purple);
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}

/* Channels & Analytics card hover */
.channel-card { transition: transform 0.15s ease, border-color 0.15s ease; }
.channel-card:hover { transform: translateY(-1px); border-color: var(--purple-deep); }

/* Density tweaks */
[data-density="compact"] .kanban-col { padding: var(--s-3); }
[data-density="compact"] .task-card { padding: var(--s-2) var(--s-3); }

/* Light mode polish */
/* (v0.10.5) Removed the legacy `[data-theme="light"] body { background: var(--black); }`
   override that fought the new cream canvas. body background is now set
   by the v0.10.5 light tokens block earlier in the file. */
[data-theme="light"] .preview-page { box-shadow: 0 4px 32px rgba(46,24,8,0.10); background: #FFFFFF; color: #1A1A1A; }
[data-theme="light"] .hero-strip {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--cream) 60%, #EFE3D0 100%);
  border-color: var(--line);
}
[data-theme="light"] .hero-strip .hero-skull { background-image: url('assets/brand/mika-skull-light.svg'); }
[data-theme="light"] .runway-card {
  background: linear-gradient(135deg, var(--ink), #F1E7FF);
}
[data-theme="light"] .preview-page .doctype { color: var(--purple-deep); }
[data-theme="light"] ::-webkit-scrollbar-thumb { border-color: var(--black); }

/* ============================================================
   v0.5 additions — dashboard tabs, Weekly 3, departments, calendar,
   permissions table, AI chat. Append-only; safe to update without
   touching the v0.4 design system above.
   ============================================================ */

/* Dashboard tab toggle — inherits canonical .view-tabs styling.
   v0.10.14.10: standardized everywhere; this block now only carries
   the light-theme active-text override that was site-specific. */
[data-theme="light"] .dash-tabs button.active { color: var(--text); }

/* Department lane card grid (Team tab) */
.dept-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
.dept-card {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 18px; min-height: 150px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dept-card:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,0.2); }
.dept-card h3 { font-size: 15px; margin: 0; font-weight: 600; }
.dept-tile {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 16px; min-height: 110px;
}
.dept-tile .value { font-size: 32px; font-weight: 800; margin-top: 8px; letter-spacing: -0.02em; }
.dept-section { }
.chip-task {
  display: inline-block; max-width: 100%;
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text-soft); cursor: pointer;
}
.chip-task:hover { background: var(--purple-deep); color: var(--text); border-color: var(--purple); }

/* ============================================================
   Weekly 3 hero + cards — v0.10.14.11
   Treat the Weekly 3 as a high-status ritual block: ornate slot
   numerals, persistent glow, a "charging" pulse on each completion,
   and a screen-filling explosion when all three are done.
   ============================================================ */
.weekly-3-hero {
  position: relative;
  background:
    linear-gradient(135deg, rgba(40, 28, 56, 1), rgba(22, 16, 30, 1));
  border: 1px solid rgba(185, 147, 224, 0.32);
  border-radius: 18px; padding: 24px 24px 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 22px rgba(126, 85, 184, 0.18);
}
.weekly-3-hero::before {
  /* Persistent ambient halo BEHIND the hero — radiates outward from the
     edges only; the panel itself is opaque so the glow can't bleed
     through onto the surface. */
  content: '';
  position: absolute; inset: -50px;
  background:
    radial-gradient(45% 55% at 25% 50%, rgba(185, 147, 224, 0.42), transparent 70%),
    radial-gradient(45% 55% at 75% 50%, rgba(126, 85, 184, 0.36), transparent 70%);
  filter: blur(44px);
  border-radius: inherit;
  z-index: -1; pointer-events: none;
}
.weekly-3-hero h2 {
  background: linear-gradient(180deg, #fff, var(--purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
}
[data-theme="light"] .weekly-3-hero h2 {
  background: linear-gradient(180deg, #2e1808, var(--purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.weekly-3-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px;
}

.weekly-card {
  position: relative; overflow: visible;
  background:
    linear-gradient(180deg, rgba(185, 147, 224, 0.08), rgba(0, 0, 0, 0.20)),
    rgba(26, 19, 36, 0.92);
  border: 1px solid rgba(185, 147, 224, 0.30);
  border-radius: 14px;
  padding: 18px 16px 16px; min-height: 160px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.50),
    0 6px 18px rgba(126, 85, 184, 0.18),
    0 0 0 0 rgba(185, 147, 224, 0);
  transition:
    transform 0.18s cubic-bezier(.25,.8,.25,1),
    border-color 0.18s, box-shadow 0.28s ease;
}
[data-theme="light"] .weekly-card {
  background:
    linear-gradient(180deg, rgba(126, 85, 184, 0.06), rgba(82, 64, 40, 0.06)),
    rgba(255, 250, 236, 0.92);
  border-color: rgba(126, 85, 184, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(82, 64, 40, 0.18),
    0 6px 18px rgba(126, 85, 184, 0.12);
}
/* Always-on outer aura — using box-shadow instead of a blurred pseudo
   keeps this cheap to composite during dashboard scroll. */
.weekly-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.50),
    0 6px 18px rgba(126, 85, 184, 0.18),
    0 0 28px -4px rgba(185, 147, 224, 0.45);
}
.weekly-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.50),
    0 10px 26px rgba(126, 85, 184, 0.28),
    0 0 36px -4px rgba(185, 147, 224, 0.60);
}
.weekly-card:hover { transform: translateY(-2px); border-color: rgba(185, 147, 224, 0.50); }

.weekly-card .slot {
  /* Ornate slot numeral — large, in the card's top-right corner with its own glow. */
  position: absolute; top: -10px; right: -10px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff; font-weight: 900; font-size: 16px;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 4px 12px rgba(185, 147, 224, 0.45);
}
.weekly-card .title { font-weight: 700; font-size: 15px; line-height: 1.35; }
.weekly-card.empty {
  border-style: dashed; opacity: 0.92;
  background: rgba(20, 14, 28, 0.50);
}
[data-theme="light"] .weekly-card.empty {
  background: rgba(255, 250, 236, 0.55);
}

/* Done state — a calm but unmistakable charged-up look. */
.weekly-card.done {
  border-color: rgba(125, 198, 138, 0.60);
  background:
    linear-gradient(180deg, rgba(125, 198, 138, 0.14), rgba(125, 198, 138, 0.04) 60%),
    rgba(22, 30, 24, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(125, 198, 138, 0.30),
    0 0 24px rgba(125, 198, 138, 0.30);
}
[data-theme="light"] .weekly-card.done {
  background:
    linear-gradient(180deg, rgba(125, 198, 138, 0.16), rgba(125, 198, 138, 0.04) 60%),
    rgba(255, 252, 240, 0.95);
}
.weekly-card.done .title { text-decoration: line-through; color: var(--muted); }
.weekly-card.done .slot {
  background: linear-gradient(135deg, #7DC68A, #4F9B61);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 4px 14px rgba(125, 198, 138, 0.55);
}

/* Charging pulse — fires for ~700ms each time a slot is checked. */
.weekly-card.flash-done { animation: w3charge 700ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes w3charge {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(185,147,224,0.55), 0 0 0 0 rgba(125,198,138,0.0); }
  30%  { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(185,147,224,0.40), 0 0 32px rgba(125,198,138,0.55); }
  60%  { transform: scale(1.02); box-shadow: 0 0 0 24px rgba(185,147,224,0.00), 0 0 40px rgba(125,198,138,0.60); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(185,147,224,0.00), 0 0 24px rgba(125,198,138,0.30); }
}

/* Full-charge state — added to all three cards (+ hero) when 3/3 done.
   Stays on with a shimmering border and a slow internal pulse. */
.weekly-3-hero.fully-charged {
  border-color: rgba(125, 198, 138, 0.55);
  animation: w3hero-pulse 2.6s ease-in-out infinite;
}
.weekly-3-hero.fully-charged::before {
  background: radial-gradient(60% 60% at 50% 40%, rgba(125, 198, 138, 0.30), rgba(185, 147, 224, 0.20) 50%, transparent 75%);
}
@keyframes w3hero-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 22px rgba(125, 198, 138, 0.25); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 36px rgba(125, 198, 138, 0.50); }
}
.weekly-card.fully-charged {
  animation: w3card-shimmer 3s ease-in-out infinite;
}
@keyframes w3card-shimmer {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(125, 198, 138, 0.32), 0 0 22px rgba(125, 198, 138, 0.30); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 2px rgba(125, 198, 138, 0.50), 0 0 38px rgba(125, 198, 138, 0.55); }
}

/* Explosion — radial shockwave + sparks burst from the center of the hero. */
.w3-explosion {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px;
  margin-left: -10px; margin-top: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(185, 147, 224, 0.65) 40%, rgba(125, 198, 138, 0.40) 70%, transparent);
  pointer-events: none;
  z-index: 2;
  animation: w3-explode 1100ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes w3-explode {
  0%   { transform: scale(0.4); opacity: 1; filter: blur(0); }
  40%  { transform: scale(18); opacity: 0.85; filter: blur(2px); }
  100% { transform: scale(60); opacity: 0; filter: blur(8px); }
}
.w3-explosion-ring {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px;
  margin-left: -15px; margin-top: -15px;
  border-radius: 50%;
  border: 2px solid rgba(185, 147, 224, 0.85);
  pointer-events: none;
  z-index: 2;
  animation: w3-ring 1200ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes w3-ring {
  0%   { transform: scale(0.4); opacity: 1; border-width: 3px; }
  100% { transform: scale(22); opacity: 0; border-width: 1px; }
}

.w3-check {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 9px; border: 1.5px solid var(--line);
  background: var(--surface); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; transition: all 0.15s ease;
}
.w3-check:hover { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(185,147,224,0.22); }
.w3-check.on {
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff; border-color: var(--purple);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 14px rgba(185, 147, 224, 0.55);
}

.weekly-card .spark {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple); pointer-events: none;
  box-shadow: 0 0 10px rgba(185, 147, 224, 0.75);
  animation: w3spark 1000ms ease-out forwards;
  --dx: 0px; --dy: 0px;
}
@keyframes w3spark {
  0%   { transform: translate(0, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .weekly-card.flash-done,
  .weekly-3-hero.fully-charged,
  .weekly-card.fully-charged,
  .w3-explosion,
  .w3-explosion-ring,
  .weekly-card .spark { animation: none !important; }
}

/* North-star goal rows */
.goal-row {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--surface); margin-bottom: 10px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.goal-row:hover { border-color: var(--purple); background: rgba(185,147,224,0.06); }
.goal-row .kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--purple); margin-bottom: 4px;
}
.goal-row .title { font-weight: 700; font-size: 14px; line-height: 1.4; }

/* Compact monthly calendar */
.cal-week-head {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  font-size: 10px; color: var(--muted); text-align: center;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-cell {
  aspect-ratio: 1; padding: 4px 6px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--line);
  position: relative; min-height: 44px;
}
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cell.today { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.cal-cell.has-task { background: rgba(185, 147, 224, 0.10); }
.cal-cell .num { font-size: 12px; font-weight: 600; }
.cal-cell .dot-row { position: absolute; bottom: 5px; left: 6px; display: flex; gap: 3px; }
.cal-cell .dot-row .d { width: 5px; height: 5px; border-radius: 50%; background: var(--purple); }

/* Admin permission grid */
.perm-table { width: 100%; }
.perm-table th { text-align: center; font-size: 10px; padding: 14px 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
.perm-table td { padding: 12px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.perm-table .rotated { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.perm-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--purple); cursor: pointer; }
.perm-toggle input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* AI chat message highlight */
.chat-msg.is-ai .body { border-left: 2px solid var(--purple); padding-left: 10px; }
.chat-msg.is-ai .who::before { content: '✦ '; color: var(--purple); }

/* Brand chip refinement (used in profile + admin) */
.brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; color: var(--text-soft);
}
.brand-chip .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ============================================================
   v0.5.1 additions — condensed dashboards: 3 Reasons Why hero,
   calendar with event chips, notification center, sticky-note
   board, brand banner.
   ============================================================ */

/* 3 Reasons Why hero */
.reasons-hero {
  position: relative;
  background:
    var(--glass-gradient),
    var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--r-3); padding: 22px 24px;
  box-shadow:
    inset 0 1px 0 rgba(226, 218, 201, 0.06),
    0 4px 18px rgba(0, 0, 0, 0.25);
}
/* Plaque variant — etched, permanent, non-interactive
   v0.10.14.13 — opaque granite slab so the halo sits cleanly
   behind it (no bleed-through onto the surface). */
.reasons-plaque {
  position: relative;
  background:
    linear-gradient(160deg, #2c2438, #161020),
    radial-gradient(120% 80% at 50% 0%, rgba(226, 218, 201, 0.08), transparent 60%);
  border: 1px solid rgba(226, 218, 201, 0.14);
  border-radius: 16px;
  padding: 28px 28px 30px;
  /* v0.10.14.15 — cancel any inherited backdrop-filter from .reasons-hero;
     the slab is opaque and would needlessly re-blur the page on scroll. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 60px rgba(0, 0, 0, 0.35),
    0 10px 36px rgba(0, 0, 0, 0.40);
}
.reasons-plaque::before {
  /* Soft ambient purple halo behind the slab — only visible at the edges. */
  content: '';
  position: absolute; inset: -50px;
  background:
    radial-gradient(45% 55% at 25% 50%, rgba(185, 147, 224, 0.38), transparent 70%),
    radial-gradient(45% 55% at 75% 50%, rgba(126, 85, 184, 0.32), transparent 70%);
  filter: blur(44px);
  border-radius: inherit;
  z-index: -1; pointer-events: none;
}
[data-theme="light"] .reasons-plaque {
  background:
    linear-gradient(160deg, rgba(220, 210, 196, 0.85), rgba(186, 174, 156, 0.95)),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.30), transparent 60%);
  border-color: rgba(82, 64, 40, 0.20);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(82, 64, 40, 0.20),
    inset 0 0 60px rgba(82, 64, 40, 0.12),
    0 10px 28px rgba(82, 64, 40, 0.18);
}
.reasons-plaque h2 {
  font-family: var(--font-display, inherit);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(185, 147, 224, 0.75));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .reasons-plaque h2 {
  background: linear-gradient(180deg, rgba(60, 40, 80, 0.95), rgba(126, 85, 184, 0.85));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.50);
}
.reasons-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.reason-card {
  position: relative;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: 18px 16px 18px 56px; min-height: 130px;
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.reason-card:hover { transform: translateY(-1px); border-color: var(--purple); }
.reason-card.empty { border-style: dashed; cursor: default; padding: 18px 16px; text-align: center; }
.reason-card.empty:hover { transform: none; border-color: var(--line); }
.reason-card .num {
  position: absolute; left: 14px; top: 18px;
  width: 30px; height: 30px; line-height: 28px; text-align: center;
  border-radius: 8px; background: var(--purple); color: var(--black);
  font-weight: 800; font-size: 14px;
}
.reason-card.empty .num {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px; background: var(--surface); color: var(--muted);
  border: 1px solid var(--line);
}
.reason-card .title { font-weight: 700; font-size: 14px; line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; }
.reason-card .desc { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Plaque card variant — chiseled stone slab, no hover lift.
   v0.10.14.11 — significantly larger title and a more pronounced
   etched/engraved feel. Each card is its own little tablet. */
.reason-card.plaque {
  cursor: default;
  min-height: 180px;
  padding: 26px 22px 26px 26px;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.45)),
    radial-gradient(120% 100% at 50% 0%, rgba(185, 147, 224, 0.10), transparent 70%),
    #1a1320;
  border: 1px solid rgba(226, 218, 201, 0.14);
  border-radius: 14px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.60),
    inset 0 0 30px rgba(0, 0, 0, 0.40),
    0 4px 14px rgba(0, 0, 0, 0.35);
}
.reason-card.plaque::after {
  /* Carved bevel — a faint, scratchy inner border to mimic chisel marks. */
  content: '';
  position: absolute; inset: 6px;
  border: 1px solid rgba(226, 218, 201, 0.06);
  border-radius: 9px;
  pointer-events: none;
}
.reason-card.plaque:hover { transform: none; border-color: rgba(226, 218, 201, 0.20); }
[data-theme="light"] .reason-card.plaque {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(82, 64, 40, 0.10)),
    radial-gradient(120% 100% at 50% 0%, rgba(126, 85, 184, 0.08), transparent 70%),
    #d8cdb6;
  border-color: rgba(82, 64, 40, 0.22);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(82, 64, 40, 0.25),
    inset 0 0 30px rgba(82, 64, 40, 0.10),
    0 4px 14px rgba(82, 64, 40, 0.16);
}
[data-theme="light"] .reason-card.plaque::after { border-color: rgba(82, 64, 40, 0.10); }

.reason-card.plaque .title {
  /* Big chiseled words that fill the slab. */
  color: #efe7d8;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 0 rgba(0, 0, 0, 0.75),
    0 4px 8px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .reason-card.plaque .title {
  color: #2e1808;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 0 rgba(82, 64, 40, 0.18);
}
.reason-card.plaque .desc {
  margin-top: 10px;
  color: rgba(226, 218, 201, 0.62);
  font-size: 13px; line-height: 1.55;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .reason-card.plaque .desc {
  color: rgba(82, 64, 40, 0.78);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.reason-card.plaque .num {
  position: absolute; left: 16px; top: 16px;
  width: 36px; height: 36px; line-height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff; font-weight: 900; font-size: 17px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 3px 8px rgba(126, 85, 184, 0.45);
}
.reason-card.plaque {
  /* Push the title down a bit so the corner num chip doesn't crowd it. */
  padding-left: 26px;
  padding-top: 62px;
}
.reason-card.plaque.empty {
  border-style: solid;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.25)),
    #15101e;
  text-align: left;
}
.reason-card.plaque.empty .num {
  background: rgba(226, 218, 201, 0.10);
  color: rgba(226, 218, 201, 0.55);
  box-shadow: none;
  border: 1px solid rgba(226, 218, 201, 0.18);
}

/* Profile-page plaque rows (same intent, simpler layout — no num chip) */
.goal-row.plaque-row {
  cursor: default;
  background:
    linear-gradient(180deg, rgba(226, 218, 201, 0.03), rgba(0, 0, 0, 0.14)),
    transparent;
  border: 1px solid rgba(226, 218, 201, 0.10);
  border-radius: var(--r-2);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow:
    inset 0 1px 0 rgba(226, 218, 201, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.goal-row.plaque-row .title {
  color: var(--text); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  font-size: 13px; line-height: 1.4;
}
.goal-row.plaque-row .kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); margin-bottom: 4px; font-weight: 500;
}

/* Calendar v2: bigger cells, chip-style items, clickable empties */
.cal-grid.month {
  grid-template-rows: repeat(auto-fill, minmax(70px, 1fr));
}
.cal-grid.month .cal-cell {
  aspect-ratio: auto; min-height: 78px;
  display: flex; flex-direction: column;
  cursor: pointer; padding: 6px 6px 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cal-grid.month .cal-cell:hover { border-color: var(--purple); background: rgba(185, 147, 224, 0.08); }
.cal-grid.month .cal-cell.empty { cursor: default; }
.cal-grid.month .cal-cell.empty:hover { border-color: transparent; background: transparent; }
.cal-grid.month .cal-cell .num { font-size: 11px; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; }
.cal-grid.month .cal-cell.today .num { color: var(--purple); }
.cal-items { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-item {
  display: block; max-width: 100%;
  padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
  cursor: pointer;
}
.cal-item:hover { filter: brightness(1.15); }
.cal-more { font-size: 10px; color: var(--muted); padding: 2px 6px; }

/* Notification center */
.announcement {
  padding: 14px 16px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--line);
}
.announcement.pinned { border-color: var(--purple); background: rgba(185, 147, 224, 0.07); }
.announcement h5 { font-size: 14px; font-weight: 700; }
.announcement .pin-tag {
  display: inline-block; padding: 1px 6px; margin-right: 6px;
  border-radius: 4px; background: var(--purple); color: var(--black);
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.ann-atts { display: flex; flex-direction: column; gap: 6px; }
.ann-att {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  background: var(--ink); border: 1px solid var(--line);
  text-decoration: none; color: var(--text); font-size: 12px;
  transition: border-color 0.15s ease;
}
.ann-att:hover { border-color: var(--purple); }
.ann-att .ic { color: var(--purple); display: inline-flex; }

/* Bottom brand banner; replaces the old hero strip on the team tab */
.brand-banner {
  display: grid; grid-template-columns: auto 1fr; gap: 32px;
  align-items: center;
  padding: 32px 36px;
  background: linear-gradient(135deg, var(--ink), var(--surface));
  border: 1px solid var(--line); border-radius: var(--r-3);
  position: relative; overflow: hidden;
}
.brand-banner-mark { display: flex; align-items: center; }
.brand-banner-copy h2 {
  font-size: 28px; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em;
}
.brand-banner-copy h2 em { color: var(--purple); font-style: normal; font-weight: 900; }

/* Sticky note board */
.sticky-board {
  position: relative;
  min-height: 460px; height: 480px;
  margin: 12px -16px -16px;
  background:
    linear-gradient(rgba(185,147,224,0.04), rgba(185,147,224,0.04)),
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,0.02) 22px 23px);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-3) var(--r-3);
  overflow: auto;
  user-select: none;
}
.sticky-empty {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--muted); font-size: 13px;
}
.sticky-note {
  position: absolute;
  border-radius: 4px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    0 8px 24px rgba(0,0,0,0.24);
  display: flex; flex-direction: column;
  font-family: inherit; color: #1A1A1A;
  transform: rotate(-0.5deg);
  transition: box-shadow 0.15s ease;
}
.sticky-note:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.28); }
.sticky-note .sn-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; cursor: grab;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sticky-note .sn-head:active { cursor: grabbing; }
.sn-palette { display: inline-flex; gap: 4px; }
.sn-palette .sw {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18);
  cursor: pointer;
}
.sn-palette .sw:hover { transform: scale(1.15); }
.sn-del {
  background: transparent; border: none; cursor: pointer;
  color: rgba(0,0,0,0.4);
  width: 22px; height: 22px; line-height: 22px;
}
.sn-del:hover { color: rgba(0,0,0,0.8); }
.sn-body {
  flex: 1; resize: none; border: none; outline: none;
  padding: 8px 10px;
  background: transparent;
  font: 400 13px/1.5 'Caveat', 'Permanent Marker', 'Marker Felt', system-ui;
  color: #1A1A1A;
}
.sn-resize {
  position: absolute; right: 2px; bottom: 2px;
  width: 12px; height: 12px;
  cursor: se-resize;
  background:
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.2) 52%, rgba(0,0,0,0.2) 60%, transparent 62%, transparent 70%, rgba(0,0,0,0.2) 72%, rgba(0,0,0,0.2) 80%, transparent 82%);
}

/* Mobile */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar { display: none; }
  .kanban { grid-template-columns: repeat(5, 280px); overflow-x: auto; padding-bottom: var(--s-4); }
  .builder { grid-template-columns: 1fr !important; }
  .page { padding: var(--s-5) var(--s-4); }
  .detail-drawer { width: 100%; }
  .chat-shell { grid-template-columns: 1fr; }
  .chat-channels { display: none; }
  .weekly-3-grid { grid-template-columns: 1fr; }
  .reasons-grid  { grid-template-columns: 1fr; }
  .dept-grid { grid-template-columns: 1fr 1fr; }
  .brand-banner { grid-template-columns: 1fr; text-align: center; }
}

/* ============================================================
   v0.7 — Liquid Glass design pass
   Adds an ambient accent glow behind the whole app and replaces
   every primary surface with a frosted-glass treatment. Hover
   lifts replace flat hover states; transitions ease smoothly.
   These are append-only overrides on existing selectors so the
   v0.4 design system above stays intact.
   ============================================================ */

:root {
  /* Liquid-glass tokens — clear with an ever-so-slight purple hue.
     Every surface reads as a faintly violet pane of frosted glass
     over the black canvas. */
  --glass-bg:           rgba(185, 147, 224, 0.05);
  --glass-bg-strong:    rgba(185, 147, 224, 0.09);
  --glass-bg-subtle:    rgba(185, 147, 224, 0.03);
  --glass-border:       rgba(185, 147, 224, 0.14);
  --glass-border-hover: rgba(185, 147, 224, 0.34);
  --glass-blur:         blur(24px) saturate(180%);
  --glass-blur-strong:  blur(36px) saturate(190%);
  --glass-blur-soft:    blur(14px) saturate(160%);
  --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.32),
                        inset 0 1px 0 rgba(226, 218, 201, 0.06);
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.42),
                        0 0 0 1px rgba(185, 147, 224, 0.24),
                        inset 0 1px 0 rgba(226, 218, 201, 0.10);
  --glass-shadow-press: 0 4px 16px rgba(0, 0, 0, 0.4);
  /* Default gradient layer for any liquid-glass surface; layered over
     the bg token so every surface picks up a soft purple-bone tint. */
  --glass-gradient:
    radial-gradient(ellipse at top left, rgba(185, 147, 224, 0.08), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(126, 85, 184, 0.05), transparent 65%);
  --ease-glass:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light theme is locked to dark as of the v0.10.1 brand pass; tokens
   mirror :root so the toggle (if it ever fires) renders identical. */
/* v0.10.5 — light-theme glass tokens. Glass on cream needs inked
   alpha for borders and a soft sand tint for surface fills; shadows
   are warm cocoa rather than black so they don't read as bruises. */
[data-theme="light"] {
  --glass-bg:           rgba(26, 26, 26, 0.025);
  --glass-bg-strong:    rgba(26, 26, 26, 0.04);
  --glass-bg-subtle:    rgba(26, 26, 26, 0.015);
  --glass-border:       rgba(26, 26, 26, 0.10);
  --glass-border-hover: rgba(126, 85, 184, 0.45);
  --glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 0 0 1px rgba(26, 26, 26, 0.05) inset,
    0 12px 32px -18px rgba(46, 24, 8, 0.22),
    0 2px 6px rgba(46, 24, 8, 0.06);
  --glass-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.70) inset,
    0 0 0 1px rgba(126, 85, 184, 0.25) inset,
    0 22px 44px -22px rgba(46, 24, 8, 0.30),
    0 4px 10px rgba(46, 24, 8, 0.08);
  --glass-shadow-press: 0 2px 6px rgba(46, 24, 8, 0.18);
  --glass-gradient:
    radial-gradient(140% 90% at 100% 0%, rgba(126, 85, 184, 0.05), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(126, 85, 184, 0.03), transparent 60%);
  --glass-blur:         blur(14px) saturate(120%);
  --glass-blur-strong:  blur(20px) saturate(125%);
  --glass-blur-soft:    blur(10px) saturate(115%);
}

/* Ambient accent glow behind everything */
body {
  position: relative;
  overflow: hidden; /* page scroll moves to .main below */
}
body::before {
  /* v0.10.14.15 — static ambient wash. The previous version animated
     a full-viewport fixed pseudo, forcing the compositor to repaint on
     every frame; static gradient is essentially free. */
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px circle at 12% 18%, rgba(185, 147, 224, 0.22), transparent 55%),
    radial-gradient(800px circle at 88% 84%, rgba(126, 85, 184, 0.18), transparent 50%),
    radial-gradient(700px circle at 50% 50%, rgba(226, 218, 201, 0.04), transparent 60%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(1100px circle at 8% 12%,  rgba(126, 85, 184, 0.07), transparent 55%),
    radial-gradient(900px circle  at 92% 88%, rgba(126, 85, 184, 0.05), transparent 50%),
    radial-gradient(800px circle  at 50% 50%, rgba(255, 245, 220, 0.18), transparent 60%);
  filter: saturate(105%);
}
.app { position: relative; z-index: 1; }

/* Sidebar — liquid glass (clear with slight purple hue) */
.sidebar {
  position: relative;
  background:
    var(--glass-gradient),
    var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border-right: 1px solid var(--glass-border);
  box-shadow:
    inset -1px 0 0 rgba(226, 218, 201, 0.04),
    4px 0 24px rgba(0, 0, 0, 0.35);
  overflow: hidden; /* corners stay clean; nav owns its own scroll */
}
.sidebar::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(226, 218, 201, 0.04) 45%, rgba(255, 255, 255, 0.05) 50%, rgba(226, 218, 201, 0.04) 55%, transparent 70%);
  background-size: 220% 220%;
  animation: liquid-sheen 14s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }
.sidebar nav {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* required so the flex child can actually scroll */
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(185, 147, 224, 0.3) transparent;
}
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; border: none; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(185, 147, 224, 0.25);
  border-radius: 3px; border: none;
}
.sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(185, 147, 224, 0.5); }
.sidebar-brand, .sidebar-footer { flex: 0 0 auto; }

/* Nav item — sliding active indicator + smoother hover */
.nav-item {
  position: relative;
  transition:
    background var(--dur-fast) var(--ease-glass),
    color var(--dur-fast) var(--ease-glass),
    transform var(--dur-fast) var(--ease-glass);
}
.nav-item::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 2px; height: 0;
  background: linear-gradient(180deg, var(--purple) 0%, var(--purple-deep) 100%);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height var(--dur-fast) var(--ease-glass);
  box-shadow: 0 0 12px rgba(185, 147, 224, 0.6);
}
.nav-item:hover {
  background: rgba(185, 147, 224, 0.06);
  color: var(--text);
  transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(185, 147, 224, 0.16) 0%, rgba(185, 147, 224, 0.02) 100%);
  color: var(--text);
}
.nav-item.active::before { height: 60%; }
.nav-item.active .ic { color: var(--purple); }

/* Topbar — liquid glass */
.topbar {
  background:
    var(--glass-gradient),
    var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow:
    inset 0 -1px 0 rgba(226, 218, 201, 0.04),
    0 4px 18px rgba(0, 0, 0, 0.28);
}

/* Main scroll area (body no longer scrolls so we own it here) */
.main { overflow-y: auto; overflow-x: hidden; }

/* Cards — full liquid glass with hover lift.
   v0.10.14.15 — backdrop-filter removed for scroll perf. The card's
   own background already provides the glass tint; running a 24px
   blur on dozens of card backdrops every scroll frame was the main
   source of scroll lag. */
.card {
  position: relative;
  background:
    var(--glass-gradient),
    var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  transition:
    transform 0.25s var(--ease-glass),
    box-shadow 0.25s var(--ease-glass),
    border-color 0.25s var(--ease-glass);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-hover);
  border-color: var(--glass-border-hover) !important;
}

/* Surfaces inside cards or pages that deserve their own lift */
.kanban-col, .dept-card, .dept-tile, .runway-card,
.schedule-row, .content-row, .channel-card, .product-card, .task-card,
.widget-card {
  position: relative;
  background:
    var(--glass-gradient),
    var(--glass-bg-subtle) !important;
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(226, 218, 201, 0.05),
    0 2px 12px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.22s var(--ease-glass),
    box-shadow 0.22s var(--ease-glass),
    border-color 0.22s var(--ease-glass);
}
.kanban-col:hover, .dept-card:hover, .dept-tile:hover,
.schedule-row:hover, .content-row:hover, .channel-card:hover,
.product-card:hover, .task-card:hover, .widget-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
  border-color: var(--glass-border-hover) !important;
}
.product-card:hover { transform: translateY(-4px) scale(1.005); }

/* Modal — glass + spring drop */
.modal {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.modal-overlay {
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
.modal-overlay.open .modal {
  animation: modal-drop 0.36s var(--ease-spring);
}
@keyframes modal-drop {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Buttons — subtle glass + press feedback */
.btn {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-border) !important;
  transition:
    transform 0.15s var(--ease-glass),
    background 0.15s var(--ease-glass),
    border-color 0.15s var(--ease-glass),
    box-shadow 0.15s var(--ease-glass) !important;
}
.btn:hover:not([disabled]) {
  transform: translateY(-1px);
  border-color: var(--glass-border-hover) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.btn:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: var(--glass-shadow-press);
}
.btn-primary {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%) !important;
  color: var(--black);
  border-color: rgba(185, 147, 224, 0.5) !important;
  box-shadow:
    0 4px 14px rgba(126, 85, 184, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover:not([disabled]) {
  box-shadow:
    0 10px 26px rgba(126, 85, 184, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-ghost { background: transparent !important; border-color: transparent !important; }
.btn-ghost:hover:not([disabled]) {
  background: rgba(185, 147, 224, 0.08) !important;
  border-color: var(--glass-border-hover) !important;
}

/* Inputs — glass with focus glow */
.input {
  background: var(--glass-bg-subtle) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border) !important;
  transition: all 0.15s var(--ease-glass);
}
.input:hover { border-color: rgba(185, 147, 224, 0.18) !important; }
.input:focus,
textarea.input:focus,
select.input:focus {
  background: var(--glass-bg) !important;
  border-color: var(--purple) !important;
  box-shadow:
    0 0 0 3px rgba(185, 147, 224, 0.16),
    inset 0 0 0 1px rgba(185, 147, 224, 0.18) !important;
}

/* Win card — liquid glass with extra purple bloom */
.win-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, rgba(185, 147, 224, 0.18), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(126, 85, 184, 0.14), transparent 65%),
    var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(185, 147, 224, 0.28) !important;
  box-shadow:
    0 24px 64px rgba(126, 85, 184, 0.32),
    inset 0 1px 0 rgba(226, 218, 201, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}
.win-card::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(226, 218, 201, 0.06) 45%, rgba(255, 255, 255, 0.09) 50%, rgba(226, 218, 201, 0.06) 55%, transparent 70%);
  background-size: 220% 220%;
  animation: liquid-sheen 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.win-card > * { position: relative; z-index: 1; }

/* Toast stack — glass pills */
.toast {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}

/* Command palette — liquid glass */
.cmdk {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top left, rgba(185, 147, 224, 0.12), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(126, 85, 184, 0.08), transparent 60%),
    var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(185, 147, 224, 0.20) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(226, 218, 201, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}
.cmdk::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(226, 218, 201, 0.05) 45%, rgba(255, 255, 255, 0.07) 50%, rgba(226, 218, 201, 0.05) 55%, transparent 70%);
  background-size: 220% 220%;
  animation: liquid-sheen 10s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.cmdk > * { position: relative; z-index: 1; }
.cmdk-overlay {
  /* v0.10.14.14 — match the unified pop-up dim+blur backdrop. */
  background: rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
}

/* Auth card — liquid glass */
.auth-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, rgba(185, 147, 224, 0.14), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(126, 85, 184, 0.10), transparent 65%),
    var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(185, 147, 224, 0.22) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(226, 218, 201, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}
.auth-card::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(226, 218, 201, 0.05) 45%, rgba(255, 255, 255, 0.07) 50%, rgba(226, 218, 201, 0.05) 55%, transparent 70%);
  background-size: 220% 220%;
  animation: liquid-sheen 11s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.auth-card > * { position: relative; z-index: 1; }

/* Detail drawer — liquid glass side panel */
.detail-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top left, rgba(185, 147, 224, 0.12), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(126, 85, 184, 0.08), transparent 60%),
    var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-left: 1px solid rgba(185, 147, 224, 0.18) !important;
  box-shadow:
    -24px 0 60px rgba(0, 0, 0, 0.55),
    inset 1px 0 0 rgba(226, 218, 201, 0.08);
}
.detail-drawer::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(226, 218, 201, 0.05) 45%, rgba(255, 255, 255, 0.07) 50%, rgba(226, 218, 201, 0.05) 55%, transparent 70%);
  background-size: 220% 220%;
  animation: liquid-sheen 10s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  z-index: 0;
}
.detail-drawer > * { position: relative; z-index: 1; }
.detail-drawer-overlay {
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

/* Reduced-motion: kill the sheen drift for users who prefer no animation */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.drawer-mode .modal::after,
  .win-card::after,
  .cmdk::after,
  .auth-card::after,
  .detail-drawer::after { animation: none; }
}

/* Tabs / toggles — solid glass tint (no backdrop blur). v0.10.14.15:
   backdrop-filter removed because tabs render in the scroll area and
   re-blurred the page behind them on every scroll frame. */
.dash-tabs, .toggle-pill, .view-tabs, .proj-tabs {
  background: var(--glass-bg-subtle) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Status badge — slight inner glow. backdrop-filter dropped (scroll perf). */
.status-badge {
  background: var(--glass-bg-subtle);
  border: 1px solid var(--glass-border);
}

/* Avatar — soft purple glow */
.avatar {
  box-shadow:
    0 4px 14px rgba(185, 147, 224, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Conn chip — glass pill. v0.10.14.15: backdrop-filter removed (scroll perf). */
.conn-chip {
  background: var(--glass-bg-subtle) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Icon buttons — liquid glass surface. v0.10.14.15: backdrop-filter
   removed (icon buttons appear all over the scroll area). */
.icon-btn {
  background: var(--glass-bg-subtle) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-2);
  transition:
    background 0.15s var(--ease-glass),
    color 0.15s var(--ease-glass),
    border-color 0.15s var(--ease-glass),
    transform 0.15s var(--ease-glass);
}
.icon-btn:hover {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border-hover) !important;
  color: var(--purple) !important;
  transform: translateY(-1px);
}

/* View transitions */
.view { animation: view-fade-in 0.35s var(--ease-glass); }
@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Photo tiles — gentle scale-on-hover */
.photo-tile, .photo-add {
  border-color: var(--glass-border) !important;
  transition: transform 0.18s var(--ease-glass), border-color 0.18s var(--ease-glass);
}
.photo-tile:hover { transform: scale(1.03); }

/* Role-switcher (admin preview) buttons — glass pills */
.role-switcher {
  background: var(--glass-bg-subtle);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 4px;
  display: inline-flex; gap: 2px;
}

/* Hero strip already gradient; layer in a subtle glass */
.hero-strip {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Cmdk trigger in topbar — match the topbar glass */
.cmdk-trigger {
  background: var(--glass-bg-subtle) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border) !important;
  transition: all 0.15s var(--ease-glass);
}
.cmdk-trigger:hover {
  border-color: var(--glass-border-hover) !important;
  background: var(--glass-bg) !important;
}

/* ============================================================
   v0.10.1 → updated to centered popup with liquid-glass shimmer
   ----------------------------------------------------------------
   openFormModal renders into #form-modal / #form-modal-body. The
   modal is centered in the viewport at ~880px wide with rounded
   corners and an animated diagonal sheen overlay so it reads as
   liquid glass — bone-tinted reflections drifting across a frosted
   purple-and-charcoal panel. Internal scroll inside the body
   when content exceeds 85vh.
   ============================================================ */
.modal-overlay.drawer-mode {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.50);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  padding: 32px;
}
.modal-overlay.drawer-mode.open { display: flex; }

.modal-overlay.drawer-mode .modal {
  position: relative;
  background:
    radial-gradient(ellipse at top left, rgba(185, 147, 224, 0.14), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(126, 85, 184, 0.10), transparent 60%),
    radial-gradient(ellipse at center, rgba(226, 218, 201, 0.04), transparent 70%),
    var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(185, 147, 224, 0.20) !important;
  border-radius: 20px !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(226, 218, 201, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  width: min(880px, 100%);
  max-width: 880px;
  min-width: 0;
  max-height: 85vh;
  height: auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: popup-rise 0.36s var(--ease-spring);
}

/* Animated liquid-glass sheen — a soft diagonal band that drifts
   across the panel. Sits above the background but below the form
   content via pointer-events: none + the natural stacking context. */
.modal-overlay.drawer-mode .modal::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(226, 218, 201, 0.05) 45%,
      rgba(255, 255, 255, 0.07) 50%,
      rgba(226, 218, 201, 0.05) 55%,
      transparent 70%
    );
  background-size: 220% 220%;
  background-position: 0% 0%;
  animation: liquid-sheen 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  z-index: 0;
}
.drawer-head, .drawer-form { position: relative; z-index: 1; }

@keyframes popup-rise {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes liquid-sheen {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 14px 24px;
  border-bottom: 1px solid var(--glass-border);
  gap: 12px;
  flex-shrink: 0;
}
.drawer-head h3 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0;
  color: var(--text);
}
/* v0.12.9 — .drawer-head .x-close sizing/positioning now lives in the
   single .x-close block near the bottom of styles.css. */

.drawer-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.drawer-body {
  flex: 1 1 auto; min-height: 0;
  padding: 18px 24px 28px 24px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 14px;
}
.drawer-body::-webkit-scrollbar { width: 8px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: rgba(185, 147, 224, 0.18); border-radius: 4px; }
.drawer-body::-webkit-scrollbar-thumb:hover { background: rgba(185, 147, 224, 0.32); }

.drawer-body .field { margin-bottom: 0; }
.drawer-body .field label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.10em; color: var(--muted); margin-bottom: 6px; font-weight: 600;
}
.drawer-body .field .input,
.drawer-body .field input.input,
.drawer-body .field select.input,
.drawer-body .field textarea.input {
  width: 100%;
  display: block;
}
.drawer-body .field textarea.input { min-height: 96px; resize: vertical; }
.drawer-body .field-help {
  font-size: 12px; color: var(--muted); margin: 6px 0 0 0; line-height: 1.4;
}

.drawer-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 24px;
  border-top: 1px solid var(--glass-border);
  background: var(--glass-bg-subtle);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  flex-shrink: 0;
}

/* Dependency picker chips inside the drawer */
.dep-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px;
  min-height: 38px;
  border: 1px dashed var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg-subtle);
}
.dep-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: rgba(185, 147, 224, 0.14);
  border: 1px solid rgba(185, 147, 224, 0.28);
  color: var(--text); font-size: 12px;
}
.dep-chip button {
  border: none; background: transparent; color: var(--muted);
  font-size: 14px; line-height: 1; padding: 0 0 0 2px; cursor: pointer;
}
.dep-chip button:hover { color: var(--text); }
.dep-chip.dep-blocks { background: rgba(232, 184, 119, 0.14); border-color: rgba(232, 184, 119, 0.28); }

/* The mini DAG visualization */
.dep-dag {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg-subtle);
  font-size: 12px;
}
.dep-dag svg { width: 100%; height: auto; display: block; }
.dep-dag .node-self rect { fill: rgba(185, 147, 224, 0.32); stroke: var(--purple); }
.dep-dag .node-blocker rect { fill: rgba(232, 184, 119, 0.18); stroke: rgba(232, 184, 119, 0.55); }
.dep-dag .node-blocks rect { fill: rgba(120, 200, 160, 0.18); stroke: rgba(120, 200, 160, 0.55); }
.dep-dag text { fill: var(--text); font-size: 10px; }
.dep-dag .edge { stroke: var(--glass-border-hover); fill: none; stroke-width: 1.3; }

/* Attachments list in the drawer */
.attach-list { display: flex; flex-direction: column; gap: 6px; }
.attach-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg-subtle);
  font-size: 12px;
}
.attach-row a { color: var(--text); text-decoration: none; flex: 1 1 auto; min-width: 0; }
.attach-row a:hover { color: var(--purple); }
.attach-row .meta { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.attach-row button { border: none; background: transparent; color: var(--muted); cursor: pointer; }
.attach-row button:hover { color: var(--danger, #ef6b6b); }
.attach-drop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px;
  border: 1px dashed var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg-subtle);
  font-size: 12px; color: var(--muted);
  cursor: pointer;
  transition: all 0.15s var(--ease-glass);
}
.attach-drop:hover, .attach-drop.dragover {
  border-color: var(--purple);
  color: var(--text);
  background: rgba(185, 147, 224, 0.08);
}

/* ============================================================
   v0.10.1 — Button press ripple + click lift
   ============================================================ */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 70%);
  animation: btn-ripple 0.55s ease-out forwards;
}
@keyframes btn-ripple {
  to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

.card-clicked { animation: card-lift 0.42s var(--ease-spring); }
@keyframes card-lift {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-4px) scale(1.012); box-shadow: var(--glass-shadow-hover); }
  100% { transform: translateY(0) scale(1); }
}

/* Status pill color crossfade — already inherited from glass, but make explicit */
.status-badge, .pill {
  transition:
    background 0.32s var(--ease-glass),
    color 0.32s var(--ease-glass),
    border-color 0.32s var(--ease-glass);
}

/* Inline estimate confirm flash (Finance income statement) */
.est-saved { animation: est-flash 0.9s ease-out; }
@keyframes est-flash {
  0%   { background: transparent; }
  20%  { background: rgba(120, 200, 160, 0.28); }
  100% { background: transparent; }
}

/* Kanban card FLIP move animation */
.kanban-col .task-card { transition: transform 0.35s var(--ease-spring), opacity 0.2s ease; }
.kanban-col .task-card.flip-in { animation: card-flip-in 0.36s var(--ease-spring); }
@keyframes card-flip-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   v0.10.1 — Sidebar enrichment: collapsible sections + activity dots
   ============================================================ */
.nav-section {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s var(--ease-glass);
}
.nav-section .chev {
  width: 12px; height: 12px;
  transition: transform 0.2s var(--ease-glass);
  opacity: 0.55;
  flex-shrink: 0;
}
.nav-section:hover { color: var(--text); }
.nav-section:hover .chev { opacity: 1; }
.nav-section.collapsed .chev { transform: rotate(-90deg); }
.nav-item.collapsed-hidden { display: none !important; }

.nav-item .activity-dot {
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 6px rgba(185, 147, 224, 0.6);
  animation: dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 0.55; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateY(-50%) scale(1.15); }
}
.nav-item { position: relative; }

/* ============================================================
   v0.10.1 — Timeline / Gantt view for Projects
   ============================================================ */
.timeline-wrap {
  margin-top: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-bg-subtle);
  overflow: hidden;
}
.timeline-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 13px;
}
.timeline-zoom { display: flex; gap: 4px; }
.timeline-zoom button {
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s var(--ease-glass);
}
.timeline-zoom button.active,
.timeline-zoom button:hover {
  color: var(--text);
  border-color: var(--glass-border-hover);
  background: var(--glass-bg);
}
.timeline-scroll {
  overflow-x: auto;
  position: relative;
}
.timeline-grid {
  position: relative;
  min-width: 720px;
}
.timeline-axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(40px, 1fr);
  border-bottom: 1px solid var(--glass-border);
}
.timeline-axis .tick {
  padding: 6px 4px;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  border-right: 1px solid var(--glass-border);
  white-space: nowrap;
}
.timeline-row {
  display: grid; grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--glass-border);
  min-height: 44px;
  align-items: center;
}
.timeline-row.group-row {
  background: var(--glass-bg-subtle);
}
.timeline-row.group-row .timeline-label {
  font-weight: 700;
  color: var(--text);
}
.timeline-label {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-soft);
  border-right: 1px solid var(--glass-border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.timeline-track {
  position: relative;
  height: 44px;
}
.timeline-bar {
  position: absolute;
  top: 10px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(185, 147, 224, 0.32), rgba(126, 85, 184, 0.40));
  border: 1px solid rgba(185, 147, 224, 0.55);
  padding: 0 8px;
  display: flex; align-items: center;
  font-size: 11px; color: var(--text);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform 0.15s var(--ease-glass), box-shadow 0.15s var(--ease-glass);
}
.timeline-bar:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(126, 85, 184, 0.32); }
.timeline-bar.status-done   { background: linear-gradient(135deg, rgba(120, 200, 160, 0.28), rgba(60, 140, 100, 0.34)); border-color: rgba(120, 200, 160, 0.55); }
.timeline-bar.status-blocked{ background: linear-gradient(135deg, rgba(232, 110, 110, 0.28), rgba(180, 60, 60, 0.34)); border-color: rgba(232, 110, 110, 0.55); }
.timeline-bar.status-review { background: linear-gradient(135deg, rgba(232, 184, 119, 0.28), rgba(180, 120, 60, 0.34)); border-color: rgba(232, 184, 119, 0.55); }
.timeline-today {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--purple);
  box-shadow: 0 0 6px rgba(185, 147, 224, 0.5);
  pointer-events: none;
  z-index: 2;
}
.timeline-today::after {
  content: 'today';
  position: absolute;
  top: 2px; left: 4px;
  font-size: 9px;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* ============================================================
   v0.10.4 — remove the animated diagonal "liquid-sheen" shimmer
   from the sidebar and every pop-up surface. The underlying static
   gradients (purple radial washes + glass tint) stay, so the
   surfaces still read as glass — they just no longer move. The
   sheen ::after layers used to drift diagonally on a 9-14 second
   loop; we hide them entirely.
   ============================================================ */
.sidebar::after,
.win-card::after,
.cmdk::after,
.auth-card::after,
.detail-drawer::after,
.modal-overlay.drawer-mode .modal::after {
  display: none !important;
  animation: none !important;
  content: none !important;
}

/* The sidebar previously layered its sheen above the static
   background; now that the sheen is gone, layer a soft top-to-bottom
   purple gradient so the sidebar has a tiny bit more depth than a
   flat glass tint. */
.sidebar {
  background:
    linear-gradient(180deg, rgba(185, 147, 224, 0.10) 0%, rgba(185, 147, 224, 0.04) 50%, rgba(126, 85, 184, 0.06) 100%),
    var(--glass-bg-strong) !important;
}

/* ============================================================
   v0.10.4 — surface consistency pass.

   Bring every container surface (.widget, .fin-card, .weekly-3-hero)
   onto the same purple liquid-glass treatment that .card uses, so the
   dashboard, finance, and personal sections all share the same
   "soft purple hue + frosted glass" look.

   The earlier `.widget` and `.fin-card` rules sit way above this
   block in the stylesheet, so these overrides win on cascade order.
   ============================================================ */
.widget,
.fin-card {
  position: relative;
  background:
    var(--glass-gradient),
    var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  transition:
    transform 0.25s var(--ease-glass),
    box-shadow 0.25s var(--ease-glass),
    border-color 0.25s var(--ease-glass);
}
.widget:hover,
.fin-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-hover);
  border-color: var(--glass-border-hover) !important;
}

/* v0.10.14.13 — old glass treatment for these surfaces was creating a
   stacking context via backdrop-filter, which trapped the new
   "behind-the-box" ambient halos inside the panel and made the panels
   themselves look like they were glowing. The hero and inner cards now
   manage their own opaque surfaces above (lines ~1390 and ~1429); only
   keep position: relative here so the bespoke ::before halos anchor
   correctly. No background / backdrop-filter / border overrides. */
.weekly-3-hero,
.weekly-card,
.reason-card {
  position: relative;
}
.weekly-card.empty,
.reason-card.empty {
  /* keep the dashed empty-state hint, just on top of the glass surface */
  border-style: dashed;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ============================================================
   v0.10.4 — Aesthetic refresh + profiles + mentions + notifications
   ------------------------------------------------------------
   Goals of this block:
     1. Sharpen the visual system. The earlier liquid-glass pass
        was correct in spirit but read a bit "fuzzy" — too much
        purple in the surface tint, gradients heavy enough to
        look low-res on Retina. We rebalance the glass tokens
        toward bone/cream borders, reduce the ambient saturation,
        and tighten the radial-glow alphas. Linear gradients on
        surfaces are replaced with clean solids + an inset
        hairline; remaining gradients are softer radials.
     2. Add the v0.10.4 profile surfaces: cover banner, big avatar
        with photo support, skills tags, social rail, status pill.
     3. Add @-mention chip + autocomplete dropdown styling.
     4. Add notification bell + panel styling.
   These rules are append-only overrides of the v0.7 glass block
   and v0.4 design system. Earlier surfaces continue to render;
   the diff is purely visual sharpening.
   ============================================================ */

:root {
  /* Sharper glass tokens — borders shift from purple-tinted toward
     bone so cards read as paper-on-glass rather than tinted plastic. */
  --glass-border:       rgba(226, 218, 201, 0.12);
  --glass-border-hover: rgba(226, 218, 201, 0.24);
  --glass-bg:           rgba(226, 218, 201, 0.025);
  --glass-bg-strong:    rgba(226, 218, 201, 0.05);
  --glass-bg-subtle:    rgba(226, 218, 201, 0.015);
  --glass-blur:         blur(20px) saturate(140%);
  --glass-blur-strong:  blur(28px) saturate(150%);
  --glass-blur-soft:    blur(12px) saturate(130%);
  --glass-shadow:
    0 1px 0 rgba(226, 218, 201, 0.04) inset,
    0 0 0 1px rgba(226, 218, 201, 0.06) inset,
    0 18px 40px -20px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.18);
  --glass-shadow-hover:
    0 1px 0 rgba(226, 218, 201, 0.08) inset,
    0 0 0 1px rgba(185, 147, 224, 0.18) inset,
    0 28px 56px -22px rgba(0, 0, 0, 0.62),
    0 4px 12px rgba(0, 0, 0, 0.22);
  /* Subtler radial accent layer; replaces the v0.7 double-radial gradient */
  --glass-gradient:
    radial-gradient(140% 90% at 100% 0%, rgba(185, 147, 224, 0.06), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(126, 85, 184, 0.04), transparent 60%);

  /* Tabular numerals for finance + counters */
  --num-font-feat: "tnum" 1, "lnum" 1, "cv11" 1;
}

/* Body rendering pass — tighter kerning, OS-level subpixel hints */
body {
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: -0.005em;
}
.fin-amount, .kpi .value, .stat-num, kbd, .mono, .num {
  font-feature-settings: var(--num-font-feat);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Tone down the body::before ambient drift — old values were borderline
   "low-res gradient soup" on dark Retina; halve the alphas. */
body::before {
  background:
    radial-gradient(1100px circle at 8% 12%,  rgba(185, 147, 224, 0.10), transparent 55%),
    radial-gradient(900px circle  at 92% 88%, rgba(126, 85, 184, 0.07), transparent 50%),
    radial-gradient(800px circle  at 50% 50%, rgba(226, 218, 201, 0.025), transparent 60%);
  filter: saturate(110%);
}

/* Sidebar — keep glass, drop the diagonal sheen ::after that looked dated */
.sidebar { background: var(--glass-gradient), rgba(20, 20, 22, 0.6) !important; backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong); }
.sidebar::after { display: none !important; }

/* Topbar — solid panel + hairline; no purple wash */
.topbar {
  background: rgba(20, 20, 22, 0.78) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(226, 218, 201, 0.04) inset;
}

/* Cards — solid charcoal + faint radial; no full-card linear gradient.
   v0.10.14.15 — backdrop-filter dropped for scroll perf (see .card
   block above; same reasoning). */
.card {
  background: var(--glass-gradient), rgba(28, 28, 32, 0.72) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.card:hover { border-color: var(--glass-border-hover) !important; box-shadow: var(--glass-shadow-hover); }

/* KPIs, widgets, fin-cards inherit the card treatment.
   v0.10.14.13 — .weekly-3-hero, .weekly-card and .reason-card removed
   from this group; they now define their own opaque backgrounds so
   their ambient halos can sit cleanly BEHIND each panel without
   bleeding through the semi-transparent glass surface. */
.kpi, .widget, .fin-card {
  background: var(--glass-gradient), rgba(28, 28, 32, 0.7) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.kpi:hover, .widget:hover, .fin-card:hover { border-color: var(--glass-border-hover) !important; }

/* SVG icons — make every stroke crisp on Retina */
svg { stroke-linecap: round; stroke-linejoin: round; }

/* Buttons — slightly more contrast on default, sharper borders */
.btn { border-color: var(--glass-border); background: rgba(28, 28, 32, 0.7); }
.btn:hover { background: rgba(40, 40, 44, 0.85); border-color: var(--glass-border-hover); }
.btn-primary { background: var(--purple); border-color: var(--purple); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 18px rgba(185,147,224,0.22); }
.btn-primary:hover { background: var(--purple-bright); border-color: var(--purple-bright); }

/* Inputs — bone-tinted hairline; remove the soft purple wash */
.input {
  background: rgba(20, 20, 22, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2);
}
.input:focus { border-color: rgba(185, 147, 224, 0.55); box-shadow: 0 0 0 3px rgba(185,147,224,0.16); }

/* Scrollbar — finer, less neon */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(226, 218, 201, 0.14); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(185, 147, 224, 0.45); background-clip: padding-box; }

/* ============================================================
   v0.10.4 — Avatar with image support
   ============================================================ */
.avatar {
  position: relative;
  background: linear-gradient(135deg, rgba(185, 147, 224, 0.95), rgba(126, 85, 184, 0.95));
  color: var(--black);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 0 0 1px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.has-photo { background: var(--ink); }
.avatar.clickable { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.avatar.clickable:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(185,147,224,0.55), 0 6px 14px rgba(0,0,0,0.4); }
.avatar .presence-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 30%; height: 30%; min-width: 8px; min-height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(20, 20, 22, 0.95);
  background: var(--muted);
}
.avatar .presence-dot.active { background: var(--success); }
.avatar .presence-dot.away   { background: var(--warn); }
.avatar .presence-dot.focus  { background: var(--purple); }
.avatar .presence-dot.off    { background: rgba(226,218,201,0.35); }

/* Avatar size helpers */
.avatar.size-xs { width: 22px; height: 22px; font-size: 10px; }
.avatar.size-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.size-md { width: 40px; height: 40px; font-size: 14px; }
.avatar.size-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.size-xl { width: 96px; height: 96px; font-size: 32px; }
.avatar.size-2xl { width: 132px; height: 132px; font-size: 44px; }

/* Avatar stack (used on Team cards / project rosters) */
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar:not(:first-child) { margin-left: -8px; box-shadow: 0 0 0 2px var(--ink); }
.avatar-stack .avatar-more {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: rgba(226,218,201,0.08); color: var(--text-soft);
  font-size: 10px; font-weight: 600;
  margin-left: -8px; box-shadow: 0 0 0 2px var(--ink);
}

/* ============================================================
   v0.10.4 — Profile page
   ============================================================ */
.profile-cover {
  position: relative;
  height: 220px;
  border-radius: var(--r-4);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(185, 147, 224, 0.32), transparent 60%),
    radial-gradient(100% 80% at 80% 90%, rgba(126, 85, 184, 0.22), transparent 60%),
    rgba(28, 28, 32, 0.85);
  border: 1px solid var(--glass-border);
  margin-bottom: 0;
}
.profile-cover.has-image { background: none; }
.profile-cover .cover-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.profile-cover .cover-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20,20,22,0.75) 100%);
}
.profile-cover .cover-edit {
  position: absolute; top: 12px; right: 12px;
  background: rgba(20,20,22,0.6);
  border: 1px solid var(--glass-border);
  color: var(--text-soft);
  padding: 6px 10px; border-radius: var(--r-2);
  font-size: var(--t-xs); cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.profile-cover .cover-edit:hover { color: var(--text); border-color: var(--glass-border-hover); }

.profile-card {
  margin-top: -68px;
  position: relative;
  background: var(--glass-gradient), rgba(28, 28, 32, 0.92) !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-4);
  padding: var(--s-7);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-6);
  align-items: flex-start;
  box-shadow: var(--glass-shadow);
}
.profile-card .avatar.size-2xl {
  border: 4px solid rgba(20, 20, 22, 0.95);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.profile-card .identity h2 {
  font-size: var(--t-2xl); font-weight: 900; letter-spacing: -0.025em; line-height: 1;
  margin: 8px 0 4px;
}
.profile-card .identity .title {
  color: var(--text-soft); font-size: var(--t-md); margin-bottom: var(--s-3);
}
.profile-card .identity .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.profile-card .identity .bio {
  color: var(--text); font-size: var(--t-base); line-height: 1.55;
  max-width: 64ch; margin-top: var(--s-3); font-weight: 300;
}
.profile-card .actions { display: flex; flex-direction: column; gap: 8px; }

/* Status pill (sits next to the name) */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 500;
  background: rgba(226,218,201,0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-soft);
}
.status-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
}
.status-pill.active .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(125,198,138,0.18); }
.status-pill.away   .dot { background: var(--warn); }
.status-pill.focus  .dot { background: var(--purple); box-shadow: 0 0 0 3px rgba(185,147,224,0.18); }
.status-pill.off    .dot { background: rgba(226,218,201,0.35); }

/* Profile detail grid (the rows of metadata under the hero) */
.profile-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.profile-detail .pd-cell {
  background: rgba(20, 20, 22, 0.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
}
.profile-detail .pd-cell .k {
  color: var(--muted); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 600; margin-bottom: 4px;
}
.profile-detail .pd-cell .v {
  color: var(--text); font-size: var(--t-sm); line-height: 1.4;
  word-break: break-word;
}
.profile-detail .pd-cell a { color: var(--purple); }

/* Skills row */
.skills-row { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(185,147,224,0.08);
  border: 1px solid rgba(185,147,224,0.20);
  color: var(--text);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.005em;
}
.skill-chip.editable { cursor: text; }
.skill-chip .x {
  background: none; border: none; color: var(--muted);
  margin-left: 2px; padding: 0; font-size: 11px; cursor: pointer;
  line-height: 1;
}
.skill-chip .x:hover { color: var(--danger); }

/* Social rail */
.social-rail { display: flex; flex-wrap: wrap; gap: 8px; }
.social-rail a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-2);
  background: rgba(20, 20, 22, 0.4);
  border: 1px solid var(--glass-border);
  color: var(--text-soft); font-size: var(--t-xs);
  transition: all var(--dur-fast) var(--ease-out);
}
.social-rail a:hover { color: var(--text); border-color: var(--glass-border-hover); background: rgba(28, 28, 32, 0.7); }
.social-rail svg { opacity: 0.85; }

/* Team card refresh */
.team-card {
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.team-card:hover { transform: translateY(-2px); border-color: var(--glass-border-hover) !important; }
.team-card .cover-strip {
  height: 56px; border-radius: var(--r-2) var(--r-2) 0 0;
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-4);
  background:
    radial-gradient(80% 60% at 30% 30%, rgba(185, 147, 224, 0.25), transparent 70%),
    rgba(28, 28, 32, 0.6);
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}
.team-card .cover-strip.has-image { background-size: cover; background-position: center; }
.team-card .cover-strip::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(20,20,22,0.5) 100%);
}

/* ============================================================
   v0.10.4 — Mention chip + autocomplete dropdown
   ============================================================ */
.mention-chip {
  display: inline-flex; align-items: baseline;
  padding: 1px 6px 2px;
  background: rgba(185, 147, 224, 0.14);
  border: 1px solid rgba(185, 147, 224, 0.32);
  border-radius: 4px;
  color: var(--purple-bright);
  font-weight: 600;
  font-size: 0.92em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.mention-chip:hover { background: rgba(185, 147, 224, 0.22); }
.mention-chip::before { content: '@'; opacity: 0.7; margin-right: 1px; }

.mention-autocomplete {
  position: absolute;
  z-index: 1200;
  min-width: 240px; max-width: 320px;
  max-height: 280px; overflow-y: auto;
  padding: 6px;
  background: rgba(20, 20, 22, 0.94);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--r-3);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  font-size: var(--t-sm);
}
.mention-autocomplete .mention-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-2);
  cursor: pointer; user-select: none;
}
.mention-autocomplete .mention-row.selected,
.mention-autocomplete .mention-row:hover { background: rgba(185, 147, 224, 0.12); }
.mention-autocomplete .mention-row .who { font-weight: 600; color: var(--text); }
.mention-autocomplete .mention-row .role { color: var(--muted); font-size: 11px; }
.mention-autocomplete .empty {
  padding: 12px; color: var(--muted); font-size: 12px; text-align: center;
}

/* ============================================================
   v0.10.4 — Notification bell + panel
   ============================================================ */
.notif-bell { position: relative; }
.notif-bell .bell-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: #1A1A1A;
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid rgba(20,20,22,0.95);
  font-feature-settings: "tnum" 1;
}
.notif-bell.unread { color: var(--text); }
.notif-bell.unread svg { animation: bell-pulse 2.6s ease-in-out infinite; }
@keyframes bell-pulse {
  0%, 100% { transform: rotate(0deg); }
  6%, 14%  { transform: rotate(-10deg); }
  10%, 18% { transform: rotate(10deg); }
  20%, 100%{ transform: rotate(0deg); }
}

.notif-panel {
  /* v0.10.14.14 — frosted glass surface to match the unified pop-up family. */
  position: fixed; top: 60px; right: 16px;
  width: 380px; max-height: 70vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at top left,     rgba(185, 147, 224, 0.12), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(126,  85, 184, 0.08), transparent 60%),
    rgba(28, 22, 38, 0.86);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(185, 147, 224, 0.20);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(226, 218, 201, 0.10);
  z-index: 1100;
  opacity: 0; transform: translateY(-6px) scale(0.985);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.notif-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.notif-panel .head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--glass-border);
}
.notif-panel .head h4 { margin: 0; font-size: var(--t-md); font-weight: 600; }
.notif-panel .head .mark-all {
  background: none; border: none; color: var(--text-soft);
  font-size: var(--t-xs); padding: 4px 8px; border-radius: var(--r-2);
  cursor: pointer;
}
.notif-panel .head .mark-all:hover { color: var(--text); background: rgba(226,218,201,0.06); }
.notif-panel .list {
  flex: 1; overflow-y: auto; padding: 6px;
}
.notif-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 10px; padding: 10px 12px;
  border-radius: var(--r-2);
  cursor: pointer;
  align-items: flex-start;
  transition: background var(--dur-fast) var(--ease-out);
}
.notif-row:hover { background: rgba(226,218,201,0.04); }
.notif-row.unread { background: rgba(185,147,224,0.06); }
.notif-row.unread:hover { background: rgba(185,147,224,0.10); }
.notif-row .when { color: var(--muted); font-size: 11px; white-space: nowrap; }
.notif-row .title { font-weight: 600; font-size: var(--t-sm); color: var(--text); margin-bottom: 2px; }
.notif-row .body  { color: var(--text-soft); font-size: var(--t-xs); line-height: 1.45;
                    overflow: hidden; text-overflow: ellipsis;
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-panel .empty {
  padding: 32px 16px; text-align: center; color: var(--muted); font-size: var(--t-sm);
}

/* Hide/show by aria-hidden — for accessibility-friendly toggling */
.notif-panel[aria-hidden="true"] { display: none; }

/* ============================================================
   v0.10.4 — Member/profile edit drawer extras
   ============================================================ */
.upload-preview {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  background: rgba(20,20,22,0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-3);
  margin-bottom: 10px;
}
.upload-preview .preview-tile {
  width: 72px; height: 72px;
  border-radius: var(--r-2);
  background-size: cover; background-position: center;
  background-color: rgba(226,218,201,0.05);
  border: 1px solid var(--glass-border);
  display: grid; place-items: center;
  color: var(--muted); font-size: 10px;
}
.upload-preview .preview-tile.round { border-radius: 50%; }
.upload-preview .preview-actions { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.upload-preview label.btn { cursor: pointer; }
.upload-preview .file-meta { font-size: 11px; color: var(--muted); }

/* Tag input (skills) */
.tag-input {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; min-height: 42px;
  background: rgba(20,20,22,0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2);
  cursor: text;
}
.tag-input input {
  flex: 1; min-width: 100px; background: transparent;
  border: none; outline: none; color: var(--text); font-size: var(--t-sm);
  padding: 4px 0;
}
.tag-input:focus-within { border-color: rgba(185,147,224,0.45); }

/* ============================================================
   v0.10.4 — Mood gradient cleanup (Figma/Canva placeholder tiles
   still need a wash; everything else gets a calmer fallback) */
.bar-fill { background: linear-gradient(90deg, var(--purple-deep), var(--purple)); }

/* ============================================================
   v0.10.5 — Light theme surface pass + Drive integration styles
   ------------------------------------------------------------
   The v0.10.4 aesthetic block hard-coded charcoal rgba()s on cards,
   the topbar, the notification panel, etc. — that was correct on
   the dark canvas but wrecks the cream side. We re-tune every
   first-class surface here so a single data-theme="light" flip
   reads cleanly without rewriting any HTML.
   ============================================================ */
[data-theme="light"] .sidebar {
  background:
    var(--glass-gradient),
    rgba(245, 240, 226, 0.65) !important;
  border-right: 1px solid var(--glass-border);
  box-shadow: inset -1px 0 0 rgba(26,26,26,0.04), 4px 0 24px rgba(46,24,8,0.06);
}
[data-theme="light"] .topbar {
  background: rgba(241, 233, 215, 0.85) !important;
  border-bottom: 1px solid var(--glass-border);
}
[data-theme="light"] .nav-item { color: var(--text-soft); }
[data-theme="light"] .nav-item:hover { background: rgba(26,26,26,0.05); color: var(--text); }
[data-theme="light"] .nav-item.active {
  background: linear-gradient(90deg, rgba(126,85,184,0.14) 0%, rgba(126,85,184,0.02) 100%);
  color: var(--text);
}
[data-theme="light"] .nav-item.active .ic { color: var(--purple); }

[data-theme="light"] .card,
[data-theme="light"] .kpi,
[data-theme="light"] .widget,
[data-theme="light"] .fin-card {
  background: var(--glass-gradient), rgba(255, 250, 236, 0.78) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
/* v0.10.14.13 — .weekly-3-hero, .weekly-card, .reason-card light-theme
   surfaces are defined in their own blocks; not part of the glass
   sweep here (would re-introduce the stacking context that traps the
   behind-the-box halos). */
[data-theme="light"] .card:hover { border-color: var(--glass-border-hover) !important; }

[data-theme="light"] .btn {
  background: rgba(255, 250, 236, 0.85);
  border: 1px solid var(--glass-border);
  color: var(--text);
}
[data-theme="light"] .btn:hover { background: #FFFFFF; border-color: var(--glass-border-hover); }
[data-theme="light"] .btn-primary {
  background: var(--purple);
  border-color: var(--purple);
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 14px rgba(126,85,184,0.25);
}
[data-theme="light"] .btn-primary:hover { background: var(--purple-deep); border-color: var(--purple-deep); }
[data-theme="light"] .btn-ghost { color: var(--text-soft); }
[data-theme="light"] .btn-ghost:hover { background: rgba(26,26,26,0.04); color: var(--text); }

[data-theme="light"] .input {
  background: #FFFFFF;
  border: 1px solid var(--glass-border);
  color: var(--text);
}
[data-theme="light"] .input::placeholder { color: rgba(26,26,26,0.35); }
[data-theme="light"] .input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(126,85,184,0.15); }

[data-theme="light"] kbd {
  background: rgba(255,250,236,0.9);
  color: var(--text);
  border: 1px solid var(--glass-border);
}
[data-theme="light"] .cmdk-trigger {
  background: rgba(255,250,236,0.85);
  border-color: var(--glass-border);
  color: var(--text-soft);
}
[data-theme="light"] .cmdk-trigger:hover { border-color: var(--purple); }
[data-theme="light"] .cmdk-trigger svg { color: var(--text-soft); }

[data-theme="light"] .cmdk {
  background: rgba(252, 247, 235, 0.96) !important;
  border-color: var(--glass-border);
  box-shadow: 0 22px 60px rgba(46,24,8,0.18);
  color: var(--text);
}
[data-theme="light"] .cmdk-input { color: var(--text); }
[data-theme="light"] .cmdk-input::placeholder { color: rgba(26,26,26,0.4); }
[data-theme="light"] .cmdk-item.selected { background: rgba(126,85,184,0.12); }

/* Notification bell + panel in light mode */
[data-theme="light"] .notif-panel {
  background: rgba(252, 247, 235, 0.97);
  border-color: var(--glass-border);
  box-shadow: 0 22px 60px rgba(46,24,8,0.20), 0 0 0 1px rgba(26,26,26,0.04) inset;
}
[data-theme="light"] .notif-row:hover { background: rgba(26,26,26,0.04); }
[data-theme="light"] .notif-row.unread { background: rgba(126,85,184,0.08); }
[data-theme="light"] .notif-row.unread:hover { background: rgba(126,85,184,0.14); }
[data-theme="light"] .notif-bell .bell-count {
  background: var(--purple);
  color: #FFFFFF;
  border-color: var(--canvas);
}

/* Mention chips + autocomplete */
[data-theme="light"] .mention-chip {
  background: rgba(126,85,184,0.12);
  border-color: rgba(126,85,184,0.32);
  color: var(--purple-deep);
}
[data-theme="light"] .mention-chip:hover { background: rgba(126,85,184,0.20); }
[data-theme="light"] .mention-autocomplete {
  background: rgba(252,247,235,0.97);
  border-color: var(--glass-border);
  box-shadow: 0 18px 48px rgba(46,24,8,0.18);
}
[data-theme="light"] .mention-autocomplete .mention-row.selected,
[data-theme="light"] .mention-autocomplete .mention-row:hover { background: rgba(126,85,184,0.12); }

/* Profile surfaces */
[data-theme="light"] .profile-cover {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(126,85,184,0.24), transparent 60%),
    radial-gradient(100% 80% at 80% 90%, rgba(126,85,184,0.14), transparent 60%),
    rgba(255, 250, 236, 0.95);
  border-color: var(--glass-border);
}
[data-theme="light"] .profile-cover .cover-fade {
  background: linear-gradient(180deg, transparent 40%, rgba(241,233,215,0.85) 100%);
}
[data-theme="light"] .profile-cover .cover-edit {
  background: rgba(255,250,236,0.85);
  border-color: var(--glass-border);
  color: var(--text);
}
[data-theme="light"] .profile-card {
  background: var(--glass-gradient), rgba(255, 250, 236, 0.94) !important;
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
[data-theme="light"] .profile-card .avatar.size-2xl {
  border-color: rgba(241,233,215,0.95);
  box-shadow: 0 8px 24px rgba(46,24,8,0.18);
}
[data-theme="light"] .profile-detail .pd-cell {
  background: rgba(255,250,236,0.55);
  border-color: var(--glass-border);
}
[data-theme="light"] .pd-cell .v { color: var(--text); }
[data-theme="light"] .pd-cell a { color: var(--purple); }

[data-theme="light"] .skill-chip {
  background: rgba(126,85,184,0.10);
  border-color: rgba(126,85,184,0.24);
  color: var(--text);
}
[data-theme="light"] .social-rail a {
  background: rgba(255,250,236,0.7);
  border-color: var(--glass-border);
  color: var(--text-soft);
}
[data-theme="light"] .social-rail a:hover { color: var(--text); background: #FFFFFF; }
[data-theme="light"] .status-pill {
  background: rgba(26,26,26,0.04);
  border-color: var(--glass-border);
  color: var(--text-soft);
}

/* Team / dashboard cards */
[data-theme="light"] .team-card .cover-strip {
  background:
    radial-gradient(80% 60% at 30% 30%, rgba(126,85,184,0.22), transparent 70%),
    rgba(255,250,236,0.6);
  border-color: var(--glass-border);
}

/* Avatar fallback tint should remain readable on cream */
[data-theme="light"] .avatar:not(.has-photo) { color: #FFFFFF; }
[data-theme="light"] .avatar .presence-dot { border-color: var(--canvas); }

/* Tag input + upload preview on cream */
[data-theme="light"] .tag-input {
  background: #FFFFFF;
  border-color: var(--glass-border);
}
[data-theme="light"] .upload-preview {
  background: rgba(255,250,236,0.65);
  border-color: var(--glass-border);
}
[data-theme="light"] .upload-preview .preview-tile {
  background-color: rgba(26,26,26,0.05);
  border-color: var(--glass-border);
  color: var(--text-soft);
}

/* Chat thread tweaks for light mode */
[data-theme="light"] .chat-channels { background: rgba(255,250,236,0.5); }
[data-theme="light"] .chat-channel:hover { background: rgba(26,26,26,0.04); }
[data-theme="light"] .chat-channel.active { background: rgba(126,85,184,0.10); color: var(--text); }
[data-theme="light"] .chat-msg .who { color: var(--text); }
[data-theme="light"] .chat-msg .when { color: var(--muted); }
[data-theme="light"] .chat-msg.is-ai .avatar { color: #FFFFFF; }

/* Pills + status badges contrast tune */
[data-theme="light"] .pill { color: var(--text-soft); background: rgba(255,250,236,0.7); border-color: var(--glass-border); }
[data-theme="light"] .status-badge { color: var(--text); }

/* Drawer + modal surfaces */
[data-theme="light"] .detail-drawer,
[data-theme="light"] .modal,
[data-theme="light"] #form-modal-body {
  background: rgba(252, 247, 235, 0.97) !important;
  color: var(--text);
}
[data-theme="light"] .detail-drawer label,
[data-theme="light"] .modal label { color: var(--text-soft); }

/* Mood board / brand kit tile placeholders */
[data-theme="light"] .mood-item { background: rgba(255,250,236,0.85); border-color: var(--glass-border); }
[data-theme="light"] .swatch { border-color: var(--glass-border); }

/* ============================================================
   v0.10.7 — Local upload cards (replaces v0.10.5 Drive UI)
   ------------------------------------------------------------
   .attach-card        — wrapper around the uploader on Brand Kit / etc.
   .attach-grid        — tile grid of uploaded files
   .attach-tile        — single file tile (thumbnail or mime glyph)
   .attach-drop        — drag-and-drop hint zone
   ============================================================ */
.attach-card {
  margin-top: var(--s-5);
}
.attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.attach-tile {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, border-color .15s ease;
}
[data-theme="light"] .attach-tile {
  background: rgba(255,250,236,0.65);
}
.attach-tile:hover { transform: translateY(-2px); border-color: var(--glass-border-hover); }
.attach-tile .thumb {
  height: 112px; background: rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
}
.attach-tile .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-tile .mime-glyph {
  font-size: 32px; opacity: 0.85;
}
.attach-tile .meta { padding: 10px 12px; }
.attach-tile .name {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-tile .sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.attach-tile .actions {
  padding: 8px 10px; display: flex; gap: 6px;
  border-top: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.15);
}
[data-theme="light"] .attach-tile .actions { background: rgba(255,255,255,0.4); }
.attach-drop.drag,
.attach-drop.dragover {
  border-color: var(--purple);
  background: rgba(185,147,224,0.10);
  color: var(--text);
}

/* ============================================================
   v0.10.7 — Theme rebalance + compact KPIs + Projects rebuild
   ------------------------------------------------------------
   1. Dark canvas lifted a notch (less ink-black, more readable
      neutral-charcoal) and light canvas deepened a notch
      (warmer mid-cream instead of bright bone). Both bumps are
      modest so existing surfaces continue to read correctly.
   2. New .kpi-compact variant — half-height of the default .kpi.
   3. New components for the Projects page rebuild:
      .kpi-strip, .project-chips, .project-chip,
      .project-workspace, .project-workspace-head,
      .project-workspace-body, .list-frame.
   ============================================================ */

/* --- 1. Theme token re-balance ------------------------------ */
:root {
  /* Dark canvas lifted: brand black stays as the brand atom, but the
     surfaces the user actually looks at are bumped up so the UI feels
     less inky. Cards still read as lifted above the canvas. */
  --black:        #222222;
  --ink:          #2A2A2A;
  --surface:      #333333;
  --surface-2:    #3C3C3C;
  /* Slightly stronger hairlines to compensate for the lifted canvas. */
  --line:         rgba(226, 218, 201, 0.14);
  --line-soft:    rgba(226, 218, 201, 0.08);
}

[data-theme="light"] {
  /* Cream canvas deepened to a mid-cream so the cards (now slightly
     darker too) still lift above it. Less bright than the v0.10.5
     bone — sits between cream and clay. */
  --canvas:       #D6CDB8;
  --ink:          #E0D7C2;
  --surface:      #DCD2BD;
  --surface-2:    #D2C8B3;
  --line:         rgba(26, 26, 26, 0.12);
  --line-soft:    rgba(26, 26, 26, 0.07);
}

/* --- 2. Compact KPI variant -------------------------------- */
/*  The default .kpi card uses --t-2xl (40px) for the number and
    var(--s-5) (20px) padding — fine for the dashboard hero, but
    too heavy as a Projects-page status strip. The compact variant
    is roughly 55% of the visual mass.  */
.kpi.kpi-compact {
  padding: 12px 14px;
  border-radius: 10px;
}
.kpi.kpi-compact .label {
  font-size: 10px;
  letter-spacing: 0.12em;
}
.kpi.kpi-compact .value {
  font-size: 24px;
  margin-top: 6px;
  font-weight: 800;
}
.kpi.kpi-compact .delta {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.85;
}

/* --- 3. Projects page: KPI strip layout -------------------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* --- 4. Projects page: project chip rail ------------------- */
/*  Replaces the multi-column project list table. Every project is a
    horizontal pill; the active one carries the brand accent. The rail
    wraps onto multiple lines on narrower screens.  */
.project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding: 0;
}
.project-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  font-size: 13px;
  color: var(--text);
  max-width: 340px;
}
.project-chip:hover {
  background: var(--surface);
  border-color: var(--line);
  transform: translateY(-1px);
}
.project-chip.selected {
  border-color: var(--purple);
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--purple-glow);
}
.project-chip .name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.project-chip .chip-status {
  font-size: 10px;
  padding: 2px 8px;
}
.project-chip .chip-avatar {
  display: inline-flex;
  align-items: center;
}

/* --- 5. Projects page: workspace card --------------------- */
/*  The selected-project header (title, owner, due, view toggle, saved
    views, edit/delete) and the kanban/list/timeline body share one
    framed card so the page stops feeling like three disconnected
    blocks stacked vertically.  */
.project-workspace {
  margin-top: 18px;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.project-workspace-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.project-workspace-head .proj-head-left {
  min-width: 0; /* allow truncation inside flex children */
}
.project-workspace-head .proj-head-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
@media (max-width: 900px) {
  .project-workspace-head {
    grid-template-columns: 1fr;
  }
  .project-workspace-head .proj-head-right {
    align-items: flex-start;
  }
}
.project-workspace-body {
  /* Kanban and list views render directly inside this region; no
     extra inner card so the workspace reads as one frame.           */
  padding-top: 4px;
}
.project-workspace-body .kanban {
  /* Drop the bottom padding that the standalone kanban carries; the
     workspace card already provides the surrounding padding.        */
  padding: 0;
}

/* --- 6. List view: drop the inner-card wrapper ------------- */
/*  When inside the workspace, the task list renders inside .list-frame
    which is a borderless region so the workspace card frames it.   */
.list-frame {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.list-frame .list-row.head {
  background: var(--surface);
}

/* --- 7. Light-theme tweaks for the new components ----------*/
[data-theme="light"] .project-chip {
  background: var(--ink);
}
[data-theme="light"] .project-chip:hover {
  background: var(--surface);
}
[data-theme="light"] .project-chip.selected {
  border-color: var(--purple-deep);
  box-shadow: 0 0 0 2px var(--purple-glow);
}

/* ============================================================
   v0.10.9 — Every popup is centered, matching openFormModal
   ------------------------------------------------------------
   Dillon's screenshot pinned the "New project" popup as the
   canonical modal style: centered, ~880px wide, liquid-glass
   surface, soft rise-in animation. v0.10.7's form modal already
   met that bar, but the task / profile detail drawer was still
   anchored to the right edge and slid in horizontally.

   This block re-skins .detail-drawer so it pops up dead-center
   with the same surface, border, radius, max-width, max-height,
   and rise-in animation as .modal-overlay.drawer-mode .modal.
   No HTML change; no app.js change; the existing `.open` toggle
   still works (we just redefine what "open" looks like).
   ============================================================ */

/* The backdrop becomes a centered dim+blur layer. We don't make
   the overlay a flex container (the drawer is a sibling, not a
   child), but we do harmonize its blur with the form modal's. */
.detail-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.50);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  z-index: 175;
}

/* The drawer itself: centered modal, NOT a side-anchored panel. */
.detail-drawer {
  /* Cancel the right-anchored geometry from earlier blocks. */
  right: auto !important;
  bottom: auto !important;
  border-left: none !important;
  /* Centered, capped to the same width as the form modal. */
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  width: min(880px, calc(100vw - 64px)) !important;
  max-width: 880px !important;
  height: auto !important;
  max-height: calc(100vh - 64px);
  /* Identical surface + glass treatment to .modal-overlay.drawer-mode .modal. */
  background:
    radial-gradient(ellipse at top left, rgba(185, 147, 224, 0.14), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(126, 85, 184, 0.10), transparent 60%),
    radial-gradient(ellipse at center, rgba(226, 218, 201, 0.04), transparent 70%),
    var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(185, 147, 224, 0.20) !important;
  border-radius: 20px !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(226, 218, 201, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  overflow-y: auto;
  padding: 24px 28px 28px;
  /* Closed state: invisible + sunken a bit, ready to rise. */
  transform: translate(-50%, calc(-50% + 14px)) scale(0.97);
  opacity: 0;
  transition: transform 0.36s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              opacity   0.22s ease-out;
  pointer-events: none;
}
.detail-drawer.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* The animated diagonal sheen — identical to the form modal so the two
   feel like a single template. Drawer content already runs at z-index 1
   via the v0.10.4 block, so the sheen sits below it. */
.detail-drawer::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(226, 218, 201, 0.05) 45%,
      rgba(255, 255, 255, 0.07) 50%,
      rgba(226, 218, 201, 0.05) 55%,
      transparent 70%
    );
  background-size: 220% 220%;
  background-position: 0% 0%;
  animation: liquid-sheen 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  z-index: 0;
}

/* v0.12.9 — task-drawer X-close positioning unified with the form modal
   via the single .x-close block near the bottom of styles.css. */

/* Reduced motion: kill the rise and sheen for users who prefer none. */
@media (prefers-reduced-motion: reduce) {
  .detail-drawer {
    transition: opacity 0.18s linear;
    transform: translate(-50%, -50%) scale(1);
  }
  .detail-drawer.open { transform: translate(-50%, -50%) scale(1); }
  .detail-drawer::after { animation: none; }
}

/* Mobile: full-bleed minus 16px margin, so the modal doesn't get crushed. */
@media (max-width: 720px) {
  .detail-drawer {
    width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px);
    padding: 20px 18px 24px;
  }
}

/* ============================================================
   v0.10.11 — Segmented topbar theme toggle
   ------------------------------------------------------------
   The single `.icon-btn` that swapped a moon ↔ sun icon is
   retired. A 2-slot pill now shows both icons side-by-side; the
   active slot is filled with the brand purple, the inactive slot
   is muted. Click either slot to set that theme directly.
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink);
  height: 32px;
}
.theme-toggle .theme-slot {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out);
}
.theme-toggle .theme-slot:hover { color: var(--text); }
.theme-toggle .theme-slot.active {
  background: var(--purple);
  color: var(--canvas, var(--black));
}
.theme-toggle .theme-slot:active { transform: scale(0.94); }

/* Light-theme tweak so the active slot's icon stays legible
   (the canvas variable resolves to cream there). */
[data-theme="light"] .theme-toggle .theme-slot.active {
  color: var(--canvas);
}

/* ============================================================
   v0.10.12 — No flat fills. Buttons + backgrounds get gradients.
   ------------------------------------------------------------
   Dillon's rule: nothing — button or background — should render
   as a solid color. Everything gets a subtle gradient.

   Approach: introduce gradient tokens (--grad-canvas, --grad-ink,
   --grad-surface, --grad-btn, --grad-btn-primary, --grad-input)
   and override the surfaces that were `background: var(--token)`
   solids. Modals + drawers already use radial liquid-glass
   gradients (v0.10.4 + v0.10.7 + v0.10.9), so they're left
   untouched. Same for the kanban / win-card / runway / hero
   strips that already carry their own gradients.

   Direction: 180deg ("lit from above") on flat surfaces;
   135deg for the primary purple button so it reads as the
   accented call-to-action.
   ============================================================ */

/* --- Gradient tokens — dark theme defaults ---------------- */
:root {
  --grad-canvas:
    linear-gradient(180deg, #262626 0%, #1E1E1E 100%);
  --grad-ink:
    linear-gradient(180deg, #2E2E2E 0%, #242424 100%);
  --grad-surface:
    linear-gradient(180deg, #383838 0%, #2E2E2E 100%);
  --grad-surface-2:
    linear-gradient(180deg, #424242 0%, #363636 100%);
  --grad-input:
    linear-gradient(180deg, #1F1F1F 0%, #262626 100%);
  --grad-btn:
    linear-gradient(180deg, #353535 0%, #2A2A2A 100%);
  --grad-btn-hover:
    linear-gradient(180deg, #404040 0%, #333333 100%);
  --grad-btn-primary:
    linear-gradient(135deg, #CFB2EB 0%, #B993E0 45%, #7E55B8 100%);
  --grad-btn-primary-hover:
    linear-gradient(135deg, #DCC2F1 0%, #C9A4E6 45%, #8E62C6 100%);
  --grad-pill:
    linear-gradient(180deg, #353535 0%, #2A2A2A 100%);
  --grad-sidebar:
    linear-gradient(180deg, #2A2A2A 0%, #1F1F1F 100%);
  --grad-status-badge:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.10) 100%);
}

/* --- Gradient tokens — light theme overrides -------------- */
[data-theme="light"] {
  --grad-canvas:
    linear-gradient(180deg, #DCD3BE 0%, #CFC5AF 100%);
  --grad-ink:
    linear-gradient(180deg, #E8DEC8 0%, #DBD0BA 100%);
  --grad-surface:
    linear-gradient(180deg, #E2D8C3 0%, #D2C8B3 100%);
  --grad-surface-2:
    linear-gradient(180deg, #DCD2BD 0%, #C8BEA8 100%);
  --grad-input:
    linear-gradient(180deg, #EEE5D0 0%, #E2D8C3 100%);
  --grad-btn:
    linear-gradient(180deg, #E6DCC7 0%, #D5CBB6 100%);
  --grad-btn-hover:
    linear-gradient(180deg, #EFE6D2 0%, #DED5BF 100%);
  --grad-btn-primary:
    linear-gradient(135deg, #B993E0 0%, #9772CC 45%, #7E55B8 100%);
  --grad-btn-primary-hover:
    linear-gradient(135deg, #CAA8EA 0%, #A684D6 45%, #8E62C6 100%);
  --grad-pill:
    linear-gradient(180deg, #E6DCC7 0%, #D5CBB6 100%);
  --grad-sidebar:
    linear-gradient(180deg, #DDD3BE 0%, #CFC5AF 100%);
  --grad-status-badge:
    linear-gradient(180deg, rgba(26,26,26,0.04) 0%, rgba(26,26,26,0.10) 100%);
}

/* --- Page chrome -------------------------------------------*/
body                          { background: var(--grad-canvas); }
.main                         { background: var(--grad-canvas); }
.topbar                       { background: var(--grad-canvas); }
.sidebar                      { background: var(--grad-sidebar); }

[data-theme="light"] body     { background: var(--grad-canvas); }
[data-theme="light"] .main    { background: var(--grad-canvas); }
[data-theme="light"] .topbar  { background: var(--grad-canvas); }

/* --- Cards + widgets that were flat ------------------------*/
/* Many cards already carry the v0.10.4 glass radial gradient via
   !important — don't fight those. We only touch the ones that
   were rendering as flat var(--ink). */
.card-tight,
.fin-card,
.weekly-card,
.reason-card,
.kpi,
.widget,
.runway-card-flat {
  background: var(--grad-ink);
}

/* The .card class already has heavy glass overrides; for any
   .card that wasn't covered by those, layer a soft gradient
   underneath using `background-image`. */
.card { background-image: var(--grad-ink); }

/* --- Buttons -----------------------------------------------*/
.btn {
  background: var(--grad-btn);
}
.btn:hover {
  background: var(--grad-btn-hover);
}
.btn-primary {
  background: var(--grad-btn-primary);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 2px 8px rgba(126, 85, 184, 0.30);
}
.btn-primary:hover {
  background: var(--grad-btn-primary-hover);
}
.btn-ghost {
  background: transparent;
}
.btn-ghost:hover {
  background: var(--grad-btn);
}
.icon-btn {
  background: var(--grad-btn);
}
.icon-btn:hover {
  background: var(--grad-btn-hover);
}

/* --- Form inputs -------------------------------------------*/
.field-input,
.field-textarea,
.field-select,
.est-input,
input[type="text"]:not(.no-grad),
input[type="email"]:not(.no-grad),
input[type="number"]:not(.no-grad),
input[type="search"]:not(.no-grad),
input[type="password"]:not(.no-grad),
input[type="date"]:not(.no-grad),
input[type="month"]:not(.no-grad),
input[type="time"]:not(.no-grad),
input[type="url"]:not(.no-grad),
textarea:not(.no-grad),
select:not(.no-grad) {
  background: var(--grad-input);
}

/* --- Pills + chips + segmented controls --------------------*/
.pill,
.brand-chip,
.toggle-pill,
.view-tabs,
.proj-tabs,
.dash-tabs,
.theme-toggle,
.period-pills button:not(.active),
.period-picker .pp-today,
.period-picker .pp-nav,
.project-chip {
  background: var(--grad-pill);
}
.status-badge {
  background-image: var(--grad-status-badge);
}

/* --- Kanban + list surfaces --------------------------------*/
.kanban-col {
  background: var(--grad-ink);
}
.kanban-col.drop-target {
  background: var(--grad-surface);
}
.task-card {
  background: var(--grad-surface);
}
.list-frame .list-row.head {
  background: var(--grad-surface);
}
.project-row {
  background: var(--grad-ink);
}
.project-row:hover,
.project-row.selected {
  background: var(--grad-surface);
}

/* --- Active states retain the brand purple gradient -------*/
.theme-toggle .theme-slot.active,
.toggle-pill button.active,
.view-tabs button.active,
.proj-tabs button.active,
.dash-tabs button.active,
.period-pills button.active,
.project-chip.selected {
  background: var(--grad-btn-primary);
  color: #FFFFFF;
  border-color: transparent;
}

/* --- Tables / rows ----------------------------------------*/
.table tbody tr:hover,
.history-row:hover,
.line-item:hover {
  background: var(--grad-surface);
}

/* --- Chat surfaces ----------------------------------------*/
.chat-channel { background: transparent; }
.chat-channel:hover,
.chat-channel.active {
  background: var(--grad-surface);
}

/* --- Progress bars ----------------------------------------*/
.progress {
  background: var(--grad-surface);
}
.bar-track {
  background: var(--grad-surface);
}

/* --- Comments / glass-light surfaces ----------------------*/
.comment {
  background: var(--grad-surface);
}
.token-tile {
  background: var(--grad-surface);
}

/* --- Sidebar nav items hover state ------------------------*/
.nav-item:hover,
.nav-item.active {
  background: var(--grad-surface);
}

/* --- Scrollbar thumb — gentle gradient too -----------------*/
::-webkit-scrollbar-thumb {
  background: var(--grad-surface);
}

/* --- Accessibility: high-contrast / forced-colors mode ----*/
/* If the OS is in a high-contrast / forced-colors mode, fall back
   to flat fills so the OS palette can take over. */
@media (forced-colors: active) {
  .btn, .btn-primary, .icon-btn, .card, .kpi, .widget,
  .project-chip, .pill, .kanban-col, .task-card,
  body, .main, .topbar, .sidebar {
    background: ButtonFace !important;
    background-image: none !important;
  }
}

/* ============================================================
   v0.10.13 — Sweep the remaining solid-purple fills.
   ------------------------------------------------------------
   v0.10.12 caught .btn-primary + the segmented active states,
   but Dillon spotted the numbered "Reasons Why" badges + the
   Personal / Team dash tab pill still rendering as flat purple.
   This block hunts the rest:

     • .reason-card .num             — numbered badge on Reasons
     • .dash-tabs button.active      — Personal / Team tab pill
     • .role-switcher button.active  — view-as switcher
     • .w3-check.on                  — Weekly 3 checkbox
     • .announcement .pin-tag        — pinned-tag chip
     • .notif-bell .bell-count       — notification count badge
     • [data-theme="light"] .btn-primary — light theme override
       (was declared *after* v0.10.12's --grad-btn-primary, so
       it was winning the cascade)

   Tiny ≤8px dots (priority dots, presence dots, status dots,
   activity dots) are intentionally left as solid because a
   gradient at that size is invisible. Same for ::selection
   and scrollbar thumbs.
   ============================================================ */

.reason-card .num,
.reason-card.plaque .num {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
}

.dash-tabs button.active {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
}

.role-switcher button.active {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
}

.w3-check.on {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

.announcement .pin-tag {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
}

.notif-bell .bell-count,
[data-theme="light"] .notif-bell .bell-count {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
}

/* Light theme: the v0.10.5 block redeclares .btn-primary *after*
   v0.10.12's grad, so the cascade kept the flat purple. Re-apply
   the gradient with explicit !important for light. */
[data-theme="light"] .btn-primary {
  background: var(--grad-btn-primary) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
[data-theme="light"] .btn-primary:hover {
  background: var(--grad-btn-primary-hover) !important;
}

/* Catch any remaining purple-filled "chip" / "tag" surfaces. */
.chip-task,
[data-theme="light"] .chip-task {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* Forced-colors fallback — keep flat for OS palette to win. */
@media (forced-colors: active) {
  .reason-card .num,
  .dash-tabs button.active,
  .role-switcher button.active,
  .w3-check.on,
  .announcement .pin-tag,
  .notif-bell .bell-count,
  .chip-task {
    background: ButtonFace !important;
    color: ButtonText !important;
    background-image: none !important;
  }
}

/* ============================================================
   v0.10.14 — Admin Command Center
   ------------------------------------------------------------
   New surface that lets admins customize the platform from
   inside the app. Reuses .card / .btn / .input where possible
   and adds a small set of bespoke classes for the tab strip,
   list rail, row editor, dept grid, and entry-point card.
   ============================================================ */

/* Entry-point card on the profile (admins only). Slightly punchier
   than a generic card so it draws the eye. */
.acmd-entry-card {
  border: 1px solid rgba(185, 147, 224, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(185, 147, 224, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .acmd-entry-card {
  border-color: rgba(126, 85, 184, 0.30) !important;
  box-shadow:
    0 0 0 1px rgba(126, 85, 184, 0.06),
    0 8px 24px rgba(40, 28, 64, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

/* Page shell. */
.admin-command-shell h1 { margin: 0; }

/* Tab strip — segmented look, single row that wraps on small screens. */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 22px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--grad-pill, var(--surface));
}
.admin-tab {
  flex: 1 1 0;
  min-width: 160px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.admin-tab .lbl  { display: block; font-weight: 600; font-size: 14px; color: inherit; }
.admin-tab .hint { display: block; font-size: 11px; opacity: 0.7; margin-top: 2px; }
.admin-tab:hover { background: var(--grad-surface, var(--surface-2)); color: var(--text); }
.admin-tab.active {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(126, 85, 184, 0.35);
}
.admin-tab.active .hint { color: rgba(255, 255, 255, 0.85); }
.admin-tab:active { transform: scale(0.98); }

/* Tab body sits below; just a vertical stack. */
.admin-tab-body { display: flex; flex-direction: column; gap: 4px; }

/* --- Tab 1: Dropdowns -------------------------------------- */
.acmd-split {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 3fr);
  gap: 18px;
}
@media (max-width: 720px) { .acmd-split { grid-template-columns: 1fr; } }

.acmd-list-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--grad-ink, var(--ink));
  align-self: start;
}
.acmd-list-item {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.16s ease, transform 0.12s ease;
}
.acmd-list-item:hover { background: var(--grad-surface, var(--surface)); }
.acmd-list-item.active {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
}
.acmd-list-item.active .acmd-list-hint { color: rgba(255, 255, 255, 0.80); }
.acmd-list-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.acmd-list-hint { font-size: 11px; opacity: 0.75; margin-top: 2px; }

/* The "this list is customized" indicator (purple dot). */
.badge-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--purple, #B993E0);
}

.acmd-editor {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--grad-ink, var(--ink));
}
.acmd-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.acmd-row {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 90px 110px 40px;
  gap: 10px;
  align-items: center;
}
.acmd-row-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 4px;
}
.acmd-row .acmd-input { padding: 8px 10px; font-size: 13px; }
.acmd-order { display: flex; gap: 4px; }
.acmd-order .icon-btn { width: 32px; height: 32px; }
@media (max-width: 720px) {
  .acmd-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .acmd-row-head { display: none; }
}

/* --- Tab 2: Departments ----------------------------------- */
.acmd-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.acmd-dept-card {
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--grad-ink, var(--ink));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.acmd-dept-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.acmd-dept-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 4px;
}

/* --- Tab 3: Permissions ----------------------------------- */
.acmd-batch-card {
  background: var(--grad-ink, var(--ink));
}
.acmd-batch-card .field label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 6px;
  display: block;
}

/* --- Tab 5: Branding -------------------------------------- */
.acmd-color-swatch {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.acmd-color-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.acmd-color-swatch::-webkit-color-swatch { border: 0; border-radius: 6px; }
.acmd-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: var(--grad-btn, var(--surface));
  font-size: 13px;
  transition: background 0.16s ease;
}
.acmd-radio:hover { background: var(--grad-btn-hover, var(--surface-2)); }
.acmd-radio input { accent-color: var(--purple, #B993E0); }
.acmd-radio.active {
  background: var(--grad-btn-primary) !important;
  color: #FFFFFF !important;
  border-color: transparent;
}

/* Forced-colors fallback for the new surfaces. */
@media (forced-colors: active) {
  .admin-tab.active,
  .acmd-list-item.active,
  .acmd-radio.active {
    background: ButtonFace !important;
    color: ButtonText !important;
    background-image: none !important;
  }
}

/* ============================================================
   v0.10.14.2 — Login page reskin
   ------------------------------------------------------------
   Layered stage:
     1. .auth-shell      — full-viewport dim canvas with a soft
                           radial purple wash (kept from earlier).
                           Overrides the original `place-items: center`
                           to push the sign-in card into the bottom
                           right corner so the centered skull is
                           never occluded.
     2. .auth-stage      — absolute background layer; holds the
                           skull. Sits BEHIND the card.
     3. .auth-skull      — large Bovaro mark, centered, low-opacity,
                           with an extremely subtle breathing pulse
                           (~7s) — barely perceptible motion only.
     4. .auth-card       — already-existing liquid-glass card,
                           reasserted on top with a tighter blur
                           so the skull behind it feels frosted.

   Reduced-motion gates every animation off via the existing
   prefers-reduced-motion block at the top of the v0.10.4 section.
   ============================================================ */

/* Re-dress the shell so it's a stage. Same dim/wash; push the card
   to the bottom-right corner so the full skull stays in view. */
.auth-shell {
  position: fixed; inset: 0;
  overflow: hidden;             /* clip skull edges that bleed past */
  place-items: end end !important; /* bottom-right anchor for the card */
  padding: clamp(24px, 4vw, 56px) !important;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(126, 85, 184, 0.20), transparent 55%),
    radial-gradient(ellipse at 20% 10%, rgba(185, 147, 224, 0.10), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(126, 85, 184, 0.08), transparent 60%),
    #0A0A0A !important;          /* deeper than var(--black) so the skull pops */
}

/* The stage holds every decorative layer. */
.auth-stage {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* The skull itself — large, centered, with a barely-there pulse. */
.auth-skull {
  position: absolute;
  top: 50%; left: 50%;
  width: min(96vh, 88vw);        /* big — but leaves a little room */
  aspect-ratio: 903.66 / 652.12;
  transform: translate(-50%, -50%) scale(1);
  background-image: url('assets/brand/mika-skull.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.20;
  filter:
    drop-shadow(0 0 80px rgba(185, 147, 224, 0.35))
    drop-shadow(0 0 24px rgba(126, 85, 184, 0.50));
  animation: auth-skull-breathe 7s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Ever-so-slight breath — tiny scale delta + tiny opacity delta. */
@keyframes auth-skull-breathe {
  0%   { transform: translate(-50%, -50%) scale(1.000); opacity: 0.19; }
  50%  { transform: translate(-50%, -50%) scale(1.006); opacity: 0.21; }
  100% { transform: translate(-50%, -50%) scale(1.000); opacity: 0.19; }
}

/* The card sits on its own stacking context, above the stage. */
.auth-card {
  position: relative;
  z-index: 1;
}

/* Tune the existing liquid-glass card a touch — slightly stronger blur
   so the wild background behind it reads as "frosted" rather than
   "competing with the form". The v0.10.4 glass treatment from line
   ~2155 already wins via !important; we just nudge the blur up. */
.auth-shell .auth-card {
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  backdrop-filter:         blur(36px) saturate(190%);
  border: 1px solid rgba(185, 147, 224, 0.28) !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.65),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(226, 218, 201, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32) !important;
}

/* Light-theme tuning — the skull stays purple, the wash warms. */
[data-theme="light"] .auth-shell {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(126, 85, 184, 0.18), transparent 55%),
    radial-gradient(ellipse at 20% 10%, rgba(185, 147, 224, 0.10), transparent 60%),
    var(--canvas) !important;
}
[data-theme="light"] .auth-skull { opacity: 0.16; }

/* Reduced motion — kill the breathing entirely. The skull still
   renders, just static; the card stays still on its glass. */
@media (prefers-reduced-motion: reduce) {
  .auth-skull { animation: none; transform: translate(-50%, -50%) scale(1); }
}

/* Narrow viewports — phones / small windows. Bottom-right corner
   placement gets cramped on a phone, so re-center the card and
   pull the skull tight to stay readable behind it. */
@media (max-width: 540px) {
  .auth-shell  { place-items: center !important; padding: 20px !important; }
  .auth-skull  { width: min(90vh, 110vw); opacity: 0.14; }
}

/* ============================================================
   v0.10.14.3 — Calendar rebuild
   ------------------------------------------------------------
   Sunday-first weekly grid, bigger cells, weekend columns tinted
   so Sat/Sun read as the weekend at a glance. Overrides the
   compact-calendar block at line ~1478 and the v2 block at
   line ~1635 via !important on the size axes only.
   ============================================================ */

/* Beefier header — readable letters, brand-purple weekend pop.
   minmax(0, 1fr) is critical: with plain 1fr the columns would
   auto-grow to fit their widest content (event chip titles), which
   makes the columns unequal. Forcing the minimum to 0 keeps every
   column the same width regardless of content. */
.cal-week-head {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  margin-bottom: 10px !important;
  gap: 6px !important;
  text-align: center !important;
}
.cal-week-head > span {
  display: block;
  min-width: 0;
}
.cal-week-head .weekend {
  color: var(--purple);
  opacity: 0.85;
}

/* Bigger month grid — taller cells, equal column widths via
   minmax(0, 1fr) so long event titles never widen their column. */
.cal-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

/* EVERY cell — empty or full — gets the same visible box so the grid
   reads as a uniform 7-column matrix. Empty cells (leading/trailing
   spillover from neighbouring months) just fade their box back so it
   reads as "off-month" without disappearing. */
.cal-grid.month .cal-cell {
  min-height: 108px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.cal-grid.month .cal-cell.empty {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  opacity: 0.35 !important;
}

/* Day number — centered horizontally so it sits directly under the
   centered header label for the column. */
.cal-grid.month .cal-cell .num {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
  text-align: center !important;
  align-self: stretch !important;
}
.cal-grid.month .cal-cell.today {
  border-color: var(--purple) !important;
  box-shadow: inset 0 0 0 2px var(--purple), 0 0 24px rgba(185, 147, 224, 0.18) !important;
}
.cal-grid.month .cal-cell.today .num {
  color: var(--purple) !important;
  font-size: 17px !important;
}

/* Weekend columns — subtle warm/cool tint so Sat & Sun stand out. */
.cal-grid.month .cal-cell.weekend {
  background: rgba(185, 147, 224, 0.06) !important;
}
.cal-grid.month .cal-cell.weekend.has-task {
  background: rgba(185, 147, 224, 0.14) !important;
}
.cal-grid.month .cal-cell.empty.weekend {
  background: rgba(185, 147, 224, 0.04) !important;
}

/* Items inside the cell — truncate cleanly so a long title can't
   widen its column. */
.cal-grid.month .cal-item {
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
.cal-grid.month .cal-items {
  min-width: 0 !important;
}

/* Narrow screens — pull the cell height back so the calendar
   stays usable on phones and small windows. */
@media (max-width: 720px) {
  .cal-grid.month .cal-cell {
    min-height: 72px !important;
    padding: 6px !important;
  }
  .cal-grid.month .cal-cell .num { font-size: 13px !important; }
  .cal-week-head { font-size: 10px !important; letter-spacing: 0.12em !important; }
}

/* v0.10.14.5 — Smart Suggestions feature removed entirely. The
   inline .ai-tip card and the corner-bubble .ai-assistant FAB +
   panel are both retired. The Cmd-K palette AI search remains as
   the only AI surface. */

/* ============================================================
   v0.10.14.6 — Attachments upload field
   ------------------------------------------------------------
   Generic `type: 'attachments'` field used in openFormModal.
   Renders a list of currently-attached files + an "Add file"
   button. Multi-file, drag-to-pick supported. Replaces the old
   "one per line; name|url" textarea pattern.
   ============================================================ */
.attach-field {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attach-list { display: flex; flex-direction: column; gap: 6px; }
.attach-list:empty { display: none; }
.attach-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ink);
  border: 1px solid var(--line-soft);
}
.attach-row .attach-ico { color: var(--purple); flex-shrink: 0; display: flex; }
.attach-row .attach-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.attach-row .attach-name:hover { color: var(--purple); text-decoration: underline; }
.attach-row .attach-size {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.attach-row .attach-remove {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.attach-row .attach-remove:hover { color: var(--danger); background: rgba(255,255,255,0.04); }
.attach-add { align-items: center; gap: 6px; }
.attach-field .file-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* ============================================================
   v0.10.7 — Sharp modal pass.
   ------------------------------------------------------------
   The v0.10.9 modal stacked three radial-gradient layers + a 28px
   backdrop blur + an animated diagonal sheen on top of the glass
   surface. The combination read as muddy / grainy. This block
   overrides the modal surface to a single solid tone with a crisp
   hairline border and zero backdrop blur — Linear / Stripe-style.
   Spring rise-in animation stays.
   ============================================================ */

/* ============================================================
   v0.10.14.14 — Unified pop-up surface
   Every modal/drawer/popover now wears the same frosted-glass
   look as the task detail drawer: dark dim+blur backdrop, glassy
   panel with soft purple radial wash, hairline border, deep
   shadow. The earlier flat "Linear/Stripe" override is gone.
   ============================================================ */

/* The dim+blur backdrop applies to every overlay. */
.modal-overlay,
.detail-drawer-overlay {
  background: rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
}

/* The panel itself — glassy charcoal with subtle purple wash. */
.modal-overlay .modal {
  background:
    radial-gradient(ellipse at top left,     rgba(185, 147, 224, 0.14), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(126,  85, 184, 0.10), transparent 60%),
    radial-gradient(ellipse at center,       rgba(226, 218, 201, 0.04), transparent 70%),
    rgba(28, 22, 38, 0.86) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(185, 147, 224, 0.20) !important;
  border-radius: 18px !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(226, 218, 201, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30) !important;
}
[data-theme="light"] .modal-overlay .modal {
  background:
    radial-gradient(ellipse at top left,     rgba(126,  85, 184, 0.12), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(82,   64,  40, 0.10), transparent 60%),
    radial-gradient(ellipse at center,       rgba(255, 250, 236, 0.40), transparent 70%),
    rgba(255, 250, 236, 0.80) !important;
  border: 1px solid rgba(26, 26, 26, 0.10) !important;
  box-shadow:
    0 32px 80px rgba(46, 24, 8, 0.22),
    0 2px 8px rgba(46, 24, 8, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(46, 24, 8, 0.10) !important;
}

/* ============================================================
   v0.10.7 — On-brand custom dropdown (.mika-select).
   ------------------------------------------------------------
   A drop-in visual replacement for native <select>. The real
   <select> is kept (display:none) so form submission + values
   logic in openFormModal stays unchanged; the .mika-select
   wrapper renders the trigger + panel and writes back to the
   underlying select on pick.
   ============================================================ */

.mika-select {
  position: relative;
  width: 100%;
  font: inherit;
}
.mika-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
[data-theme="light"] .mika-select__trigger {
  background: rgba(255, 250, 236, 0.60);
}
.mika-select__trigger:hover,
.mika-select.open .mika-select__trigger {
  border-color: rgba(185, 147, 224, 0.45);
  background: rgba(185, 147, 224, 0.06);
}
.mika-select__value {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mika-select__value.placeholder { color: var(--muted); }
.mika-select__chevron {
  flex-shrink: 0; width: 12px; height: 12px;
  transition: transform 0.18s ease;
  color: var(--muted);
}
.mika-select.open .mika-select__chevron { transform: rotate(180deg); }

.mika-select__panel {
  /* v0.10.14.14 — frosted glass surface to match the unified pop-up family. */
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 9999;
  max-height: 280px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at top left,     rgba(185, 147, 224, 0.12), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(126,  85, 184, 0.08), transparent 60%),
    rgba(28, 22, 38, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(185, 147, 224, 0.18);
  border-radius: 12px;
  padding: 4px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(226, 218, 201, 0.10);
  opacity: 0; transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
[data-theme="light"] .mika-select__panel {
  background:
    radial-gradient(ellipse at top left,     rgba(126, 85, 184, 0.10), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(82,  64, 40, 0.08),  transparent 60%),
    rgba(255, 250, 236, 0.85);
  border: 1px solid rgba(26, 26, 26, 0.10);
  box-shadow:
    0 20px 40px rgba(46, 24, 8, 0.22),
    0 2px 8px rgba(46, 24, 8, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);
}
.mika-select.open .mika-select__panel {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.mika-select__option {
  display: block; width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.mika-select__option:hover,
.mika-select__option.focused {
  background: rgba(185, 147, 224, 0.10);
}
.mika-select__option.selected {
  background: rgba(185, 147, 224, 0.16);
  color: var(--text);
}
/* Hide the underlying native select once the wrapper is mounted. */
.mika-select select { display: none !important; }

/* ============================================================
   v0.10.7 — Projects page rebuild (single-project workspace).
   ============================================================ */

.proj-switcher {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.proj-switcher__select { min-width: 260px; max-width: 360px; }
.proj-switcher__crumb {
  font-size: 12px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.proj-switcher__all {
  margin-left: auto;
}

.proj-workspace {
  margin-top: 18px;
}
.proj-workspace__head {
  padding: 20px 24px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 14px 14px 0 0;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: none;
}
[data-theme="light"] .proj-workspace__head {
  background: rgba(255, 250, 236, 0.45);
}
.proj-workspace__title-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.proj-workspace__title {
  font-size: 24px; font-weight: 700;
  line-height: 1.15; letter-spacing: -0.01em;
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: text;
  transition: background 0.12s ease;
}
.proj-workspace__title:hover { background: rgba(185, 147, 224, 0.08); }
.proj-workspace__title-input {
  font: inherit; font-size: 24px; font-weight: 700;
  letter-spacing: -0.01em;
  background: rgba(185, 147, 224, 0.08);
  border: 1px solid rgba(185, 147, 224, 0.35);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--text);
  outline: none;
  width: 100%; max-width: 540px;
}

.proj-meta-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.proj-meta-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 12px; color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-theme="light"] .proj-meta-chip { background: rgba(255, 250, 236, 0.55); }
.proj-meta-chip:hover {
  background: rgba(185, 147, 224, 0.10);
  border-color: rgba(185, 147, 224, 0.35);
}
.proj-meta-chip .label { color: var(--muted); font-size: 11px; }
.proj-meta-chip .priority-dot { width: 7px; height: 7px; }

.proj-workspace__toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  border: 1px solid var(--glass-border);
  border-top: none;
  border-bottom: none;
  background: rgba(0, 0, 0, 0.10);
  flex-wrap: wrap;
}
[data-theme="light"] .proj-workspace__toolbar { background: rgba(46, 24, 8, 0.04); }
.proj-workspace__body {
  padding: 20px 24px 24px;
  border: 1px solid var(--glass-border);
  border-top: none;
  border-radius: 0 0 14px 14px;
}

/* All-projects card grid (toggle view). */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.proj-grid__card {
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
[data-theme="light"] .proj-grid__card { background: rgba(255, 250, 236, 0.55); }
.proj-grid__card:hover {
  transform: translateY(-2px);
  border-color: rgba(185, 147, 224, 0.40);
  background: rgba(185, 147, 224, 0.06);
}
.proj-grid__card h4 {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.proj-grid__card .sub {
  color: var(--muted); font-size: 12px; margin-top: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ============================================================
   v0.10.7 — Weekly 3 picker popover.
   ============================================================ */

.w3-popover {
  /* v0.10.14.14 — frosted glass surface to match the unified pop-up family. */
  position: absolute;
  z-index: 9999;
  min-width: 320px; max-width: 380px;
  background:
    radial-gradient(ellipse at top left,     rgba(185, 147, 224, 0.14), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(126,  85, 184, 0.10), transparent 60%),
    rgba(28, 22, 38, 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(185, 147, 224, 0.20);
  border-radius: 14px;
  padding: 6px;
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(226, 218, 201, 0.10);
  max-height: 360px;
  overflow-y: auto;
}
[data-theme="light"] .w3-popover {
  background:
    radial-gradient(ellipse at top left,     rgba(126, 85, 184, 0.10), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(82,  64, 40, 0.08),  transparent 60%),
    rgba(255, 250, 236, 0.85);
  border: 1px solid rgba(26, 26, 26, 0.10);
  box-shadow:
    0 24px 50px rgba(46, 24, 8, 0.22),
    0 2px 8px rgba(46, 24, 8, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);
}
.w3-popover__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted);
}
.w3-popover__option {
  display: block; width: 100%;
  padding: 9px 12px;
  background: transparent; border: none;
  border-radius: 8px;
  color: var(--text);
  font: inherit; text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.w3-popover__option:hover { background: rgba(185, 147, 224, 0.10); }
.w3-popover__option .t { font-size: 13px; font-weight: 500; }
.w3-popover__option .s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.w3-popover__custom {
  border-top: 1px solid var(--glass-border);
  margin-top: 4px; padding-top: 4px;
}
.w3-popover__empty {
  padding: 14px 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ============================================================
   v0.10.7 — Projects page two-tab rebuild
   ============================================================ */

/* .proj-tabs visual rules now inherit from the canonical .view-tabs
   block above (v0.10.14.10). Only layout-specific overrides remain. */
.proj-tabs { margin-top: 14px; }

/* ---- Overview tab ---- */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 920px) {
  .overview-grid { grid-template-columns: 1fr; }
}
.overview-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
}
[data-theme="light"] .overview-card { background: rgba(255, 250, 236, 0.55); }
.overview-card__head {
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--glass-border);
}
.overview-card__head h3 {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
}
.overview-card__body {
  padding: 6px;
  max-height: 440px;
  overflow-y: auto;
}

.deadline-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.deadline-row:hover { background: rgba(185, 147, 224, 0.08); }
.deadline-row__left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.deadline-row__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.deadline-kind {
  font-size: 9px; font-weight: 700; letter-spacing: 0.10em;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(185, 147, 224, 0.15);
  color: var(--purple);
  flex-shrink: 0;
}
.deadline-kind.task { background: rgba(125, 198, 138, 0.15); color: var(--success); }
.deadline-meat { min-width: 0; }
.deadline-meat .title {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deadline-meat .sub {
  font-size: 11px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deadline-due {
  font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums;
}
.deadline-due.overdue { color: var(--danger); font-weight: 500; }

/* ---- Project icon grid ---- */
.proj-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 14px;
}
.proj-icon-tile {
  display: flex; gap: 12px; align-items: flex-start;
  text-align: left;
  padding: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  color: inherit; font: inherit;
}
[data-theme="light"] .proj-icon-tile { background: rgba(255, 250, 236, 0.65); }
.proj-icon-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(185, 147, 224, 0.40);
  background: rgba(185, 147, 224, 0.06);
}
.proj-icon-tile__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, #B993E0 0%, #7E55B8 100%);
}
.proj-icon-tile__icon.priority-low      { background: linear-gradient(135deg, #6B7C99 0%, #4A5870 100%); }
.proj-icon-tile__icon.priority-medium   { background: linear-gradient(135deg, #CFB2EB 0%, #7E55B8 100%); }
.proj-icon-tile__icon.priority-high     { background: linear-gradient(135deg, #E5A86A 0%, #B36A2C 100%); }
.proj-icon-tile__icon.priority-critical { background: linear-gradient(135deg, #E6817A 0%, #B83A33 100%); }
.proj-icon-tile__body { flex: 1; min-width: 0; }
.proj-icon-tile__name {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proj-icon-tile__meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.proj-icon-tile__sub {
  font-size: 11px; margin-top: 6px;
}

/* ---- Tracker tab (Asana-style spreadsheet) ---- */
.tracker {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .tracker { background: rgba(255, 250, 236, 0.45); }
.tracker-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
}
.tracker-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.tracker-grid { font-size: 13px; }
.tracker-row {
  display: grid;
  grid-template-columns: var(--tracker-cols, minmax(280px,1.6fr) repeat(4, minmax(120px,0.7fr)));
  align-items: stretch;
  border-bottom: 1px solid var(--glass-border);
  min-height: 38px;
}
.tracker-row:last-child { border-bottom: none; }
.tracker-row:hover .tracker-cell { background: rgba(185, 147, 224, 0.03); }
.tracker-row--head {
  background: rgba(0, 0, 0, 0.18);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600;
}
[data-theme="light"] .tracker-row--head { background: rgba(46, 24, 8, 0.06); }
.tracker-row--head:hover .tracker-cell { background: rgba(0, 0, 0, 0.18); }
[data-theme="light"] .tracker-row--head:hover .tracker-cell { background: rgba(46, 24, 8, 0.06); }
.tracker-cell {
  display: flex; align-items: center;
  padding: 8px 12px;
  border-right: 1px solid var(--glass-border);
  color: var(--text);
  overflow: hidden;
  min-width: 0;
}
.tracker-cell:last-child { border-right: none; }
.tracker-cell--head { color: var(--muted); }
.tracker-cell--name { gap: 8px; }
.tracker-cell__editable {
  display: inline-block; width: 100%;
  padding: 2px 6px; margin: -2px -6px;
  border-radius: 4px;
  cursor: text;
  transition: background 0.12s ease;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tracker-cell__editable:hover { background: rgba(185, 147, 224, 0.10); }
.tracker-cell__editable.overdue { color: var(--danger); font-weight: 500; }
.tracker-cell__input {
  width: 100%;
  background: rgba(185, 147, 224, 0.10);
  border: 1px solid rgba(185, 147, 224, 0.40);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit; font-size: 13px;
  color: var(--text);
  outline: none;
}
.tracker-cell--add { color: var(--muted); cursor: pointer; font-style: italic; }
.tracker-cell--add:hover { color: var(--purple); }
.tracker-row--add:hover .tracker-cell { background: rgba(185, 147, 224, 0.04); }

.tracker-check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--glass-border);
  border-radius: 50%;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tracker-check:hover { border-color: var(--purple); }
.tracker-check.on {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.tracker-group__head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.10);
  border-bottom: 1px solid var(--glass-border);
  font-weight: 600;
  font-size: 13px;
}
[data-theme="light"] .tracker-group__head { background: rgba(46, 24, 8, 0.04); }
.tracker-group__toggle {
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
}
.tracker-group__toggle:hover { background: rgba(185, 147, 224, 0.12); color: var(--text); }
.tracker-group__name {
  color: var(--text);
  cursor: text;
  padding: 2px 6px;
  margin: -2px 0;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.tracker-group__name:hover { background: rgba(185, 147, 224, 0.10); }
.tracker-group__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tracker-group__head:hover .tracker-group__actions { opacity: 1; }

/* v0.10.14.9 — Tracker view-mode toggle (List / Kanban / Timeline) */
.tracker-view-toggle button,
.tracker-zoom-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tracker-view-toggle svg { opacity: 0.85; }

/* Expand icon button — used on project group headers and task rows */
.icon-btn.tracker-expand {
  width: 26px; height: 26px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.icon-btn.tracker-expand:hover {
  background: rgba(185, 147, 224, 0.14);
  border-color: rgba(185, 147, 224, 0.30);
  color: var(--text);
}

/* Trailing cell now holds Delete + Expand side-by-side, both hidden
   until row hover. v0.12.14 — drag handle uses grab cursor on rows
   so the affordance is discoverable; group headers highlight when a
   task is dragged over them. */
.tracker-cell--expand {
  justify-content: center;
  padding: 4px 4px;
  gap: 2px;
  display: flex; align-items: center;
}
.tracker-row .tracker-cell--expand .tracker-expand,
.tracker-row .tracker-cell--expand .tracker-row-delete { opacity: 0; transition: opacity 0.12s ease; }
.tracker-row:hover .tracker-cell--expand .tracker-expand,
.tracker-row:hover .tracker-cell--expand .tracker-row-delete { opacity: 1; }
.icon-btn.tracker-row-delete {
  width: 26px; height: 26px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.icon-btn.tracker-row-delete:hover {
  background: rgba(229, 138, 138, 0.14);
  border-color: rgba(229, 138, 138, 0.35);
  color: #E58A8A;
}

/* Drag affordance: grab cursor on tracker task rows, a slight opacity
   while dragging, and a clear purple-tinted highlight on any project
   header that accepts the drop. */
.tracker-row[data-task-drag-id] { cursor: grab; }
.tracker-row[data-task-drag-id]:active { cursor: grabbing; }
.tracker-row.dragging { opacity: 0.5; }
.tracker-group__head[data-proj-drop] { transition: background 0.12s ease, box-shadow 0.12s ease; }
.tracker-group__head[data-proj-drop].drag-over {
  background: rgba(185, 147, 224, 0.20);
  box-shadow: inset 0 0 0 2px var(--purple);
}

/* Kanban / Timeline mode containers inside the Tracker */
.tracker--kanban .tracker-group__body,
.tracker--timeline .tracker-group__body {
  padding: 12px 14px 18px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.01);
}
[data-theme="light"] .tracker--kanban .tracker-group__body,
[data-theme="light"] .tracker--timeline .tracker-group__body {
  background: rgba(255, 250, 236, 0.20);
}
.tracker--kanban .kanban { margin: 0; }
.tracker--timeline .timeline { margin: 0; }
.tracker-kanban-wrap .tracker-group:last-child .tracker-group__body,
.tracker-timeline-wrap .tracker-group:last-child .tracker-group__body { border-bottom: none; }

/* Project drawer task summary row (pop-up window from expand button) */
.pdrawer-task-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.pdrawer-task-row:hover { background: rgba(185, 147, 224, 0.08); }
.pdrawer-task-row .priority-dot.low      { background: #6B7C99; }
.pdrawer-task-row .priority-dot.medium   { background: #CFB2EB; }
.pdrawer-task-row .priority-dot.high     { background: #E5A86A; }
.pdrawer-task-row .priority-dot.critical { background: #E6817A; }

.priority-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
}
.priority-pill.priority-low      { background: rgba(107, 124, 153, 0.20); color: #93A4C0; }
.priority-pill.priority-medium   { background: rgba(207, 178, 235, 0.22); color: #CFB2EB; }
.priority-pill.priority-high     { background: rgba(229, 168, 106, 0.22); color: #E5A86A; }
.priority-pill.priority-critical { background: rgba(230, 129, 122, 0.22); color: #E6817A; }
[data-theme="light"] .priority-pill.priority-low      { background: rgba(74, 88, 112, 0.15); color: #4A5870; }
[data-theme="light"] .priority-pill.priority-medium   { background: rgba(126, 85, 184, 0.15); color: #7E55B8; }
[data-theme="light"] .priority-pill.priority-high     { background: rgba(179, 106, 44, 0.15); color: #B36A2C; }
[data-theme="light"] .priority-pill.priority-critical { background: rgba(184, 58, 51, 0.15); color: #B83A33; }

/* ============================================================
   v0.10.14.15 — Ambient panel glow (cheap, GPU-composited)
   Previous halo used `filter: blur(36px)` on a ::before for
   every panel, which forced CPU rasterization on each scroll
   frame across dozens of elements and made the dashboard feel
   sluggish. We get the same "soft glow behind the box" look
   from a layered box-shadow — the shadow is rasterized once
   and composited cheaply on every subsequent frame.
   ============================================================ */
.widget,
.card,
.kpi,
.fin-card,
.overview-card,
.tracker {
  position: relative;
  box-shadow:
    0 0 0 1px var(--glass-border),
    0 12px 32px -8px rgba(126, 85, 184, 0.28),
    0 4px 14px -4px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.25s ease;
}
.widget:hover,
.card:hover,
.kpi:hover,
.fin-card:hover,
.overview-card:hover,
.tracker:hover {
  box-shadow:
    0 0 0 1px var(--glass-border-hover, var(--glass-border)),
    0 18px 44px -10px rgba(126, 85, 184, 0.45),
    0 6px 18px -4px rgba(0, 0, 0, 0.40);
}
[data-theme="light"] .widget,
[data-theme="light"] .card,
[data-theme="light"] .kpi,
[data-theme="light"] .fin-card,
[data-theme="light"] .overview-card,
[data-theme="light"] .tracker {
  box-shadow:
    0 0 0 1px var(--glass-border),
    0 12px 28px -8px rgba(126, 85, 184, 0.20),
    0 4px 12px -4px rgba(46, 24, 8, 0.12);
}

/* ============================================================
   v0.12.9 — X-close hit-target rewrite (definitive)
   The previous patches stacked conflicting rules across v0.10.x
   (1036, 2682, 4182, 5869) that resized the button without re-
   positioning it, so the visible glyph drifted off the click box.
   This rewrite is the single source of truth: every .x-close
   anywhere in the app is pinned to the top-right corner of its
   nearest positioned ancestor (modal / drawer / popover), gets a
   generous 44x44 hit area (Apple HIG minimum), and visually
   centers a 16px glyph inside that area.
   ============================================================ */
.x-close,
button.x-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  color: var(--muted);
  cursor: pointer;
  z-index: 5 !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  /* Defeat any inherited transform-on-hover from .icon-btn-like rules so
     the click area stays perfectly aligned with the visible glyph. */
  transform: none !important;
}
.x-close > * { pointer-events: none !important; }
.x-close svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
.x-close:hover {
  background: var(--glass-bg, var(--surface)) !important;
  color: var(--text);
  border-color: var(--glass-border, var(--line)) !important;
  transform: none !important;
}
/* Ensure modal / drawer / popover bodies are positioned so the absolute
   close button anchors correctly inside them rather than the page.
   NOTE: .detail-drawer is intentionally omitted here — v0.10.9 sets it to
   position: fixed for the centered-modal layout, and position: fixed
   already creates a positioning context for absolute children, so the
   X-close anchors correctly without forcing relative (which would knock
   the drawer back into document flow and hide it below the page). */
.modal-overlay.drawer-mode .modal,
.modal,
.drawer-head { position: relative !important; }
/* Give modal headers enough right-padding so the title text never sits
   under the now-larger 44px close-button hit area. */
.drawer-head { padding-right: 64px !important; }



/* ============================================================
   v0.11.0 — MARKETING INFRASTRUCTURE
   ------------------------------------------------------------
   Six-tab command center: Strategy, Pipeline, Calendar, Library,
   Channels, Outreach. All marketing styles are namespaced `mk-`
   so they coexist with the existing project / finance systems.
   Tokens come from :root; both dark and light themes inherit
   automatically.
   ============================================================ */

/* In-page tab strip shared by every marketing page. Lives just
   under the breadcrumb so the section feels like one product. */
.mk-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.mk-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.mk-tab:hover { color: var(--text); background: var(--surface-2); }
.mk-tab.active {
  background: var(--purple-glow);
  color: var(--purple-bright);
  box-shadow: inset 0 0 0 1px var(--purple-glow);
}
[data-theme="light"] .mk-tab.active { color: var(--purple-deep); }

/* Page wrapper — a hair more breathing room than .page default */
.mk-page { padding-bottom: 60px; }
.mk-page .mk-head { align-items: flex-start; margin-bottom: 22px; }
.mk-page .mk-sub { max-width: 580px; margin-top: 6px; font-size: 13px; line-height: 1.55; }
.mk-card-pad { padding: 22px; }

/* ============================================================
   STRATEGY — command bridge
   ============================================================ */

.mk-bridge {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) { .mk-bridge { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .mk-bridge { grid-template-columns: 1fr; } }

.mk-bridge-cell {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.mk-bridge-cell .t-eyebrow { margin: 0 0 8px; opacity: 0.7; }
.mk-bridge-cell h2 {
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1;
  color: var(--text);
}
.mk-bridge-phase {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--phase-accent, var(--purple)) 18%, var(--surface)) 0%,
    var(--surface) 65%);
  border-color: color-mix(in srgb, var(--phase-accent, var(--purple)) 28%, var(--line-soft));
}
.mk-bridge-phase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right,
    color-mix(in srgb, var(--phase-accent, var(--purple)) 22%, transparent), transparent 60%);
  pointer-events: none;
}
.mk-bridge-phase h2 {
  color: var(--phase-accent, var(--purple-bright));
  font-weight: 700;
}
.mk-beat {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
  position: relative;
  z-index: 1;
  max-width: 280px;
}
.mk-big-number {
  font-size: 36px !important;
  font-weight: 700;
  font-feature-settings: "tnum";
}
.mk-big-number .mk-of {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
  vertical-align: middle;
}

/* Progress bars (used across Strategy, KPIs, phase arc) */
.mk-progress {
  width: 100%;
  height: 6px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 12px;
}
.mk-progress-thin { height: 4px; }
.mk-progress-fill {
  height: 100%;
  background: var(--purple);
  border-radius: 99px;
  transition: width 0.4s var(--ease-spring, ease);
}

/* The root question gets its own line, serif-feeling */
.mk-root-question {
  background: linear-gradient(180deg, var(--surface), transparent);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 18px;
}
.mk-root-question .t-eyebrow { margin: 0 0 10px; }
.mk-rq {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  font-style: italic;
  max-width: 80ch;
}

.mk-grid-bridge {
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) { .mk-grid-bridge { grid-template-columns: 1fr; } }

/* KPI tile grid */
.mk-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.mk-kpi-tile {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.mk-kpi-tile:hover {
  border-color: var(--purple-glow);
  transform: translateY(-1px);
}
.mk-kpi-tile .t-eyebrow { margin: 0 0 6px; font-size: 10px; }
.mk-kpi-value {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
}
.mk-kpi-value span {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.mk-kpi-target { margin: 2px 0 8px; font-size: 11px; }

/* Phase arc rows */
.mk-phase-arc { display: flex; flex-direction: column; gap: 14px; }
.mk-phase-row {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  transition: border-color 0.2s ease;
}
.mk-phase-row.current {
  border-color: color-mix(in srgb, var(--phase-accent) 50%, transparent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--phase-accent) 10%, var(--surface)),
    var(--surface));
}
.mk-phase-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.mk-phase-tag {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
}
.mk-phase-weeks { font-size: 11px; }
.mk-phase-count {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: "tnum";
}
.mk-phase-beat {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
}

/* Gates list */
.mk-gates .mk-gate {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.mk-gates .mk-gate:hover { border-color: var(--purple-glow); }
.mk-gate input[type="checkbox"] { display: none; }
.mk-gate-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: transparent;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: all 0.18s ease;
}
.mk-gate.passed .mk-gate-check {
  background: var(--success);
  border-color: var(--success);
}
.mk-gate.passed .mk-gate-check::after {
  content: '';
  position: absolute;
  inset: 3px 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  border-radius: 1px;
}
.mk-gate-body { display: flex; flex-direction: column; gap: 2px; }
.mk-gate-phase {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mk-gate.passed .mk-gate-phase { color: var(--success); }
.mk-gate-label { font-size: 13px; line-height: 1.4; color: var(--text); }
.mk-gate.passed .mk-gate-label { color: var(--text-soft); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--muted); }

/* Manifesto preview card */
.mk-manifesto-card { margin-top: 18px; }
.mk-manifesto-preview p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 70ch;
}

/* ============================================================
   PIPELINE — kanban
   ============================================================ */

.mk-type-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mk-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  color: var(--text-soft);
}
.mk-type-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
}
.mk-type-content    .dot { background: #7c5cff; }
.mk-type-experience .dot { background: #d4a04a; }
.mk-type-milestone  .dot { background: #33b39b; }
.mk-type-pr         .dot { background: #5b8def; }
.mk-type-seeding    .dot { background: #ff7a90; }

.mk-legend-count {
  margin-left: auto;
  font-size: 12px;
}

.mk-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  min-height: 60vh;
}
@media (max-width: 1200px) { .mk-kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mk-kanban { grid-template-columns: 1fr; } }

.mk-kanban-col {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
}
.mk-kanban-col::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--phase-accent, var(--purple));
  border-radius: 14px 14px 0 0;
  opacity: 0.85;
}
.mk-kanban-col.drop-target {
  border-color: var(--phase-accent, var(--purple));
  background: color-mix(in srgb, var(--phase-accent, var(--purple)) 8%, var(--surface));
}
.mk-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 4px 4px;
}
.mk-col-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  margin-right: 6px;
}
.mk-col-weeks { font-size: 11px; }
.mk-col-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 99px;
  font-feature-settings: "tnum";
}
.mk-col-beat {
  margin: 4px 4px 12px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  font-style: italic;
}
.mk-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}
.mk-col-empty {
  appearance: none;
  border: 1.5px dashed var(--line);
  background: transparent;
  color: var(--muted);
  padding: 18px 12px;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.18s, color 0.18s;
}
.mk-col-empty:hover {
  border-color: var(--phase-accent, var(--purple));
  color: var(--text);
}
.mk-col-foot-add {
  appearance: none;
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mk-col-foot-add:hover { background: var(--surface-2); color: var(--text); }

/* Pipeline card */
.mk-pl-card {
  background: var(--canvas, var(--bg, #1a1a1a));
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: grab;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="light"] .mk-pl-card { background: #fff; }
.mk-pl-card:hover {
  border-color: var(--purple-glow);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.25);
}
.mk-pl-card.dragging { opacity: 0.5; cursor: grabbing; }
.mk-pl-card-head { margin-bottom: 6px; }
.mk-pl-wk {
  font-size: 10px;
  font-feature-settings: "tnum";
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.mk-pl-title {
  margin: 4px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.mk-pl-notes {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.4;
}
.mk-pl-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.mk-pl-channel,
.mk-pl-date { font-size: 10px; }

/* ============================================================
   CALENDAR — cadence + macro
   ============================================================ */

.mk-mode-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: 3px;
  border-radius: 10px;
}
.mk-mode {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mk-mode:hover { color: var(--text); }
.mk-mode.active {
  background: var(--purple);
  color: #fff;
}
[data-theme="light"] .mk-mode.active { color: #fff; }

/* Cadence: a 7-cell grid representing M → Sun */
.mk-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .mk-week-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .mk-week-grid { grid-template-columns: repeat(2, 1fr); } }

.mk-day {
  appearance: none;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 14px;
  min-height: 160px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s ease, transform 0.18s ease;
  font: inherit;
  color: var(--text);
}
.mk-day:hover {
  border-color: var(--purple-glow);
  transform: translateY(-2px);
}
.mk-day.silent {
  background: transparent;
  border-style: dashed;
}
.mk-day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mk-day-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.mk-silence { color: var(--muted); font-size: 18px; }
.mk-day-format {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.mk-day-note {
  margin: 0;
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.45;
}
.mk-day.silent .mk-day-format,
.mk-day.silent .mk-day-name { color: var(--muted); }
.mk-day.silent .mk-day-note { color: var(--muted); font-style: italic; }

.mk-cadence-totals { margin-top: 18px; }
.mk-totals-line { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); }
.mk-totals-hint { margin: 0; font-size: 12px; }

/* Macro grid: 16 columns scrolling horizontally */
.mk-macro-wrap {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px;
  overflow-x: auto;
}
.mk-macro-grid {
  display: grid;
  grid-template-columns: repeat(16, minmax(140px, 1fr));
  gap: 8px;
  min-width: 100%;
}
.mk-macro-col {
  background: var(--canvas, var(--bg, #1a1a1a));
  border-top: 3px solid var(--phase-accent, var(--purple));
  border-radius: 8px;
  padding: 8px 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 220px;
}
[data-theme="light"] .mk-macro-col { background: #fff; }
.mk-macro-col:hover {
  background: color-mix(in srgb, var(--phase-accent) 5%, var(--canvas, #1a1a1a));
}
[data-theme="light"] .mk-macro-col:hover {
  background: color-mix(in srgb, var(--phase-accent) 4%, #fff);
}
.mk-macro-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line-soft);
}
.mk-macro-week { font-size: 11px; font-weight: 700; color: var(--text); font-feature-settings: "tnum"; }
.mk-macro-phase {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mk-macro-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mk-macro-card {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.mk-macro-card:hover { border-color: var(--purple); }
.mk-macro-card-type { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mk-macro-card-title { font-size: 11px; color: var(--text); line-height: 1.3; }
.mk-macro-empty {
  color: var(--muted);
  font-size: 20px;
  font-weight: 300;
  align-self: center;
  margin-top: auto;
  opacity: 0.5;
}
.mk-macro-hint { font-size: 12px; }

/* ============================================================
   LIBRARY — sub-tabs + questions + manifesto + vocab
   ============================================================ */

.mk-sub-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.mk-sub-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  padding: 12px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}
.mk-sub-tab::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--purple);
  border-radius: 99px 99px 0 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mk-sub-tab:hover { color: var(--text); }
.mk-sub-tab.active { color: var(--purple-bright); }
[data-theme="light"] .mk-sub-tab.active { color: var(--purple-deep); }
.mk-sub-tab.active::after { opacity: 1; }

.mk-lib-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.mk-lib-head .t-eyebrow { margin: 0 0 4px; }
.mk-lib-meta { margin: 0; font-size: 13px; color: var(--text-soft); }

.mk-q-clusters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.mk-q-cluster {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 18px;
}
.mk-q-cluster-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mk-q-cluster-tag {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
}
.mk-q-cluster-blurb { font-size: 11px; font-style: italic; flex: 1; }
.mk-q-cluster-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 99px;
  font-feature-settings: "tnum";
}
.mk-q-list { display: flex; flex-direction: column; gap: 6px; }
.mk-q-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--canvas, var(--bg, #1a1a1a));
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}
[data-theme="light"] .mk-q-card { background: #fff; }
.mk-q-card:hover { border-color: var(--cluster-accent, var(--purple)); }
.mk-q-check {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line);
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  margin-top: 1px;
}
.mk-q-card.used .mk-q-check {
  background: var(--cluster-accent, var(--success));
  border-color: var(--cluster-accent, var(--success));
}
.mk-q-body { flex: 1; min-width: 0; }
.mk-q-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.mk-q-card.used .mk-q-text {
  color: var(--text-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--muted);
}
.mk-q-used { margin: 4px 0 0; font-size: 10px; }
.mk-q-edit { flex-shrink: 0; opacity: 0; transition: opacity 0.15s ease; }
.mk-q-card:hover .mk-q-edit { opacity: 1; }
.mk-q-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 12px 14px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}

/* Manifesto editor */
.mk-mani-editor textarea.mk-mani-textarea {
  width: 100%;
  min-height: 480px;
  border: 0;
  background: transparent;
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  padding: 8px 0;
  resize: vertical;
}
.mk-mani-editor textarea.mk-mani-textarea:focus { outline: none; box-shadow: none; }

/* Vocab grid */
.mk-vocab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) { .mk-vocab-grid { grid-template-columns: 1fr; } }
.mk-vocab-col .t-eyebrow { margin: 0 0 6px; font-size: 12px; }
.mk-vocab-hint { font-size: 12px; margin: 0 0 12px; }
.mk-vocab-textarea {
  width: 100%;
  min-height: 280px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.65;
}
.mk-vocab-use { border-top: 3px solid var(--success); }
.mk-vocab-avoid { border-top: 3px solid #e0786a; }

/* ============================================================
   CHANNELS — per-platform cards
   ============================================================ */

.mk-ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.mk-ch-card {
  padding: 20px 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.18s ease, transform 0.18s ease;
  min-height: 200px;
}
.mk-ch-card:hover {
  border-color: var(--purple-glow);
  transform: translateY(-2px);
}
.mk-ch-card.auto { border-style: dashed; opacity: 0.85; }
.mk-ch-card.auto:hover { opacity: 1; }
.mk-ch-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.mk-ch-pill { font-size: 11px; }
.mk-ch-auto {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1px dashed var(--line);
  border-radius: 99px;
}
.mk-ch-followers {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
}
.mk-ch-followers span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  margin-left: 2px;
  display: block;
}
.mk-ch-handle {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.mk-ch-restraint {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.55;
  flex: 1;
}
.mk-ch-foot {
  display: flex;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.mk-ch-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mk-ch-stat b {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
}
.mk-ch-stat span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   OUTREACH — pipeline columns for folio + press
   ============================================================ */

.mk-outreach-grid {
  grid-template-columns: 1fr;
  gap: 28px;
}
.mk-outreach-col {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 20px;
}
.mk-outreach-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.mk-outreach-col-head h3 { margin: 0; font-size: 16px; }
.mk-outreach-col-head .muted { font-size: 12px; }

.mk-pipe {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  overflow-x: auto;
}
.mk-outreach-col:nth-child(2) .mk-pipe { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .mk-pipe { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .mk-outreach-col:nth-child(2) .mk-pipe { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}
@media (max-width: 640px) {
  .mk-pipe,
  .mk-outreach-col:nth-child(2) .mk-pipe { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

.mk-pipe-col {
  background: var(--canvas, var(--bg, #1a1a1a));
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="light"] .mk-pipe-col { background: #fff; }
.mk-pipe-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 8px;
  border-bottom: 1px dashed var(--line-soft);
}
.mk-pipe-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
.mk-pipe-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-2);
  padding: 1px 8px;
  border-radius: 99px;
  font-feature-settings: "tnum";
}
.mk-pipe-body { display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
.mk-pipe-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.mk-pipe-card:hover {
  border-color: var(--purple);
  transform: translateY(-1px);
}
.mk-pipe-card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.mk-pipe-card-meta { margin: 2px 0 0; font-size: 10px; color: var(--text-soft); line-height: 1.4; }
.mk-pipe-card-loc { margin: 2px 0 0; font-size: 10px; color: var(--muted); line-height: 1.4; }
.mk-pipe-empty {
  margin: auto;
  color: var(--muted);
  font-size: 16px;
  opacity: 0.4;
}

/* Drawer footer delete button (used across all four modals) */
.drawer-foot .drawer-delete {
  margin-right: auto;
  color: var(--text-soft);
}
.drawer-foot .drawer-delete:hover {
  color: #e0786a;
  border-color: rgba(224, 120, 106, 0.4);
}

/* ============================================================
   END v0.11.0 MARKETING INFRASTRUCTURE
   ============================================================ */


/* ============================================================
   v0.11.1 — MARKETING INLINE EDITOR
   ------------------------------------------------------------
   Per-section cards on the Strategy page. Every section has a
   header with a pencil button; section bodies render lists of
   editable rows. Hover affordances make it obvious that every
   cell, row, and badge is a click target.
   ============================================================ */

/* Empty-state banner that prompts setup */
.mk-empty-banner {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 20px;
}
.mk-empty-banner .t-eyebrow { margin: 0 0 6px; }
.mk-empty-banner h3 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--text);
}
.mk-empty-banner p { margin: 0; font-size: 13px; line-height: 1.55; max-width: 64ch; }

/* Section card layout */
.mk-section-card {
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.mk-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--line-soft);
  gap: 12px;
}
.mk-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.mk-section-sub {
  margin: 4px 0 0;
  font-size: 12px;
  max-width: 60ch;
}
.mk-section-edit {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.mk-section-edit:hover {
  background: var(--surface-2);
  border-color: var(--line-soft);
  color: var(--text);
}
.mk-section-body {
  padding: 16px 22px 22px;
}

/* Key-value grid used by Brand & Timeline sections */
.mk-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
}
.mk-kv-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  align-items: baseline;
}
.mk-kv-row.full { grid-column: 1 / -1; }
.mk-kv-row:hover { background: var(--surface-2); }
.mk-kv-row:focus { outline: 1px solid var(--purple-glow); background: var(--surface-2); }
.mk-kv-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.mk-kv-value {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
.mk-kv-row.empty .mk-kv-value { color: var(--muted); }

/* List rows used by Phases / KPIs / Gates */
.mk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mk-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
}
.mk-list-row:hover {
  border-color: var(--purple-glow);
  transform: translateY(-1px);
}
.mk-list-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mk-list-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.mk-list-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.mk-list-row-meta { font-size: 11px; }
.mk-list-row-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.45;
}
.mk-list-row-stat {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: 99px;
  font-feature-settings: "tnum";
  flex-shrink: 0;
}
.mk-list-row-edit {
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}
.mk-list-row:hover .mk-list-row-edit { opacity: 1; color: var(--text-soft); }

.mk-list-empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.mk-list-add {
  appearance: none;
  border: 1.5px dashed var(--line);
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  margin-top: 8px;
  width: 100%;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.mk-list-add:hover {
  border-color: var(--purple);
  color: var(--text);
  background: var(--surface);
}

/* Phase list row gets a colored bar on the left */
.mk-phase-list-row {
  padding-left: 8px;
}
.mk-phase-swatch {
  width: 4px;
  height: 36px;
  border-radius: 2px;
  background: var(--phase-accent, var(--purple));
  flex-shrink: 0;
}
.mk-phase-list-row.current {
  border-color: color-mix(in srgb, var(--phase-accent) 50%, transparent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--phase-accent) 8%, var(--surface)),
    var(--surface) 60%);
}

/* KPI list */
.mk-kpi-list-row {
  align-items: stretch;
  padding: 14px 16px;
}
.mk-kpi-list-row .mk-list-row-body { gap: 4px; }
.mk-kpi-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 4px;
}
.mk-kpi-actual {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
}
.mk-kpi-actual span {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}

/* Gate list (rewrites previous .mk-gate styles to use new row pattern) */
.mk-gate-list-row { padding: 10px 14px 10px 12px; gap: 12px; }
.mk-gate-list-row .mk-gate-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-top: 2px;
  padding: 0;
  appearance: none;
}
.mk-gate-list-row .mk-gate-check.on {
  background: var(--success);
  border-color: var(--success);
}
.mk-gate-list-row .mk-gate-check.on::after {
  content: '';
  position: absolute;
  inset: 3px 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  border-radius: 1px;
}
.mk-gate-list-row .mk-gate-phase {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 2px;
  display: block;
}
.mk-gate-list-row.passed .mk-list-row-sub {
  color: var(--text-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--muted);
}

/* Vocab preview pair shown on Strategy page */
.mk-vocab-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 700px) { .mk-vocab-preview { grid-template-columns: 1fr; } }
.mk-vocab-preview .t-eyebrow { margin: 0 0 6px; }
.mk-vocab-preview-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* Drawer form: visual-only field types (header / help block) */
.field-header {
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--line-soft);
  margin: 6px 0 4px;
}
.field-header h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.field-header + .field { margin-top: 8px; }
.field-help-block { margin-top: -4px; }
.field-help-block p { margin: 0; font-size: 12px; line-height: 1.5; }

/* ============================================================
   END v0.11.1 INLINE EDITOR STYLES
   ============================================================ */


/* ============================================================
   v0.12.0 — MULTI-CAMPAIGN BAR + CADENCE SLOTS
   ------------------------------------------------------------
   Shared bar that lives on every marketing page right under the
   page head, plus the rebuilt cadence-day card (which now holds
   any number of slots per day).
   ============================================================ */

/* Campaign bar — strip of chips + add button. Sticks under the header. */
.mk-campaign-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.mk-campaign-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.mk-campaign-chip {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  padding: 7px 12px 7px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  max-width: 240px;
}
.mk-campaign-chip:hover {
  background: var(--surface-2);
  color: var(--text);
}
.mk-campaign-chip.active {
  background: color-mix(in srgb, var(--campaign-accent, var(--purple)) 16%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--campaign-accent, var(--purple)) 40%, transparent);
}
.mk-campaign-chip.archived { opacity: 0.5; }
.mk-campaign-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--campaign-accent, var(--purple));
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.mk-campaign-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-campaign-arch {
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mk-campaign-add {
  appearance: none;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.mk-campaign-add:hover {
  border-color: var(--purple);
  color: var(--text);
  background: var(--surface);
}

.mk-campaign-actions { display: flex; gap: 4px; flex-shrink: 0; }
.mk-campaign-menu {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted);
}
.mk-campaign-menu:hover { color: var(--text); background: var(--surface-2); }

/* Popover menu attached to the kebab */
.mk-campaign-popover {
  position: fixed;
  z-index: 999;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}
.mk-campaign-popover button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
}
.mk-campaign-popover button:hover { background: var(--surface-2); }
.mk-campaign-popover button.danger { color: #e0786a; }
.mk-campaign-popover button.danger:hover { background: rgba(224, 120, 106, 0.12); }
.mk-campaign-popover svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Big empty-state banner used by the no-campaigns landing */
.mk-empty-big {
  padding: 36px 30px;
  text-align: center;
}
.mk-empty-big h3 { font-size: 22px; }
.mk-empty-big p { margin: 8px auto 18px; max-width: 56ch; }
.mk-empty-big button { margin: 0 auto; }

/* ===== Cadence — day card with multiple slots ===== */
.mk-day-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s ease;
}
.mk-day-card:hover { border-color: var(--purple-glow); }
.mk-day-card.silent { background: transparent; border-style: dashed; }

.mk-day-card .mk-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 8px;
  margin: 0;
}
.mk-day-card .mk-day-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mk-day-add {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.mk-day-add svg { width: 12px; height: 12px; }
.mk-day-add:hover { border-color: var(--purple); color: var(--text); background: var(--surface-2); }

.mk-day-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.mk-day-body[data-mk-day-empty] { cursor: pointer; }
.mk-day-empty {
  margin: auto 0;
  color: var(--muted);
  font-style: italic;
  font-size: 11px;
  text-align: center;
}

.mk-slot {
  appearance: none;
  text-align: left;
  background: var(--canvas, var(--bg, #1a1a1a));
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-theme="light"] .mk-slot { background: #fff; }
.mk-slot:hover { border-color: var(--purple); transform: translateY(-1px); }
.mk-slot-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mk-slot-format {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.mk-slot-note {
  margin: 0;
  font-size: 10px;
  color: var(--text-soft);
  line-height: 1.4;
}

/* Cluster edit button rendered inside cluster header */
.mk-cluster-edit-btn {
  width: 28px;
  height: 28px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.mk-q-cluster:hover .mk-cluster-edit-btn { opacity: 1; }

/* ============================================================
   END v0.12.0 STYLES
   ============================================================ */


/* ============================================================
   v0.12.2 — Sidebar wordmark lockup
   ------------------------------------------------------------
   The Bovaro skull has been retired from the sidebar lockup;
   the MIKA wordmark SVG sits there now with the Internal·version
   sub line directly underneath. Auth screen + Brand Kit still
   show the skull.
   ============================================================ */

.sidebar-brand .lockup-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  line-height: 1;
}
.sidebar-brand .lockup-stacked .brand-wordmark {
  display: block;
  width: 112px;
  height: auto;
  /* No filter — the SVG already carries the brand purple. */
}
.sidebar-brand .lockup-stacked .sub {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.sidebar-brand .lockup-stacked .sub .dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--purple);
  vertical-align: middle;
  margin: 0 6px;
}


/* ============================================================
   v0.12.3 — LIGHT MODE SWEEP
   ------------------------------------------------------------
   The Weekly 3 hero container, the Reasons plaque ambient halo,
   and a few stragglers that hardcoded dark fills never got
   proper light-mode overrides. This block closes those gaps and
   harmonizes the dashboard with the cream canvas.
   ============================================================ */

/* --- Weekly 3 hero: the container that wraps the three cards.
   Originally locked to a dark purple linear-gradient. The h2 had
   a light override but the container itself didn't — so in light
   mode the cream cards floated on a dark panel and the empty
   slots read as gray. */
[data-theme="light"] .weekly-3-hero {
  background:
    linear-gradient(160deg, rgba(255, 252, 242, 0.92), rgba(232, 222, 198, 0.95)),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.45), transparent 60%);
  border-color: rgba(82, 64, 40, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(82, 64, 40, 0.18),
    0 8px 24px rgba(126, 85, 184, 0.10),
    0 4px 14px rgba(82, 64, 40, 0.10);
}
/* The ambient halo behind the panel — soft purple in light, not the
   high-contrast violet from dark mode. */
[data-theme="light"] .weekly-3-hero::before {
  background:
    radial-gradient(45% 55% at 25% 50%, rgba(126, 85, 184, 0.22), transparent 70%),
    radial-gradient(45% 55% at 75% 50%, rgba(185, 147, 224, 0.20), transparent 70%);
  filter: blur(48px);
}

/* Empty cards (the gray-looking ones in the screenshot) — sit on the
   warmed panel with a dashed border. The 0.55 alpha was too translucent;
   bumped to 0.85 so the cream comes through cleanly. */
[data-theme="light"] .weekly-card.empty {
  background: rgba(255, 252, 242, 0.85);
  border-color: rgba(82, 64, 40, 0.20);
  border-style: dashed;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(82, 64, 40, 0.10),
    0 4px 14px rgba(82, 64, 40, 0.08);
}
[data-theme="light"] .weekly-card.empty:hover {
  border-color: rgba(126, 85, 184, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 6px 18px rgba(126, 85, 184, 0.16),
    0 0 0 1px rgba(126, 85, 184, 0.20);
}
/* Filled cards — make sure the body text is on-brand in light mode
   (the dark mode text-soft is too bone-y for cream). */
[data-theme="light"] .weekly-card .title { color: var(--text); }
[data-theme="light"] .weekly-card.empty .title,
[data-theme="light"] .weekly-card .empty-line { color: rgba(46, 24, 8, 0.55); }
/* Slot numerals on the empty cards in light mode — currently the
   purple gradient reads fine; nothing to do. */

/* The full-charge animation paint — bumped contrast for cream canvas. */
[data-theme="light"] .weekly-card.fully-charged {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(46, 145, 87, 0.40),
    0 0 22px rgba(46, 145, 87, 0.20);
}

/* --- Reasons plaque ambient halo had no light override; the dark
   purple radial bled through visibly behind the plaque on the cream
   canvas. */
[data-theme="light"] .reasons-plaque::before {
  background:
    radial-gradient(45% 55% at 25% 50%, rgba(126, 85, 184, 0.18), transparent 70%),
    radial-gradient(45% 55% at 75% 50%, rgba(185, 147, 224, 0.14), transparent 70%);
  filter: blur(48px);
}

/* --- Notification toast text in light mode (toasts sit on dark cards
   regardless of theme; leave the colorways alone, but make sure muted
   labels inside them stay legible). */
[data-theme="light"] .toast { color: #1A1A1A; background: rgba(255, 252, 242, 0.96); border: 1px solid rgba(82, 64, 40, 0.18); }
[data-theme="light"] .toast b { color: #1A1A1A; }

/* --- Marketing surfaces. Most use var(--surface) which is already
   theme-aware. A handful needed tightening so the cream canvas reads
   cohesive. */
[data-theme="light"] .mk-day-card {
  background: var(--surface);
  border-color: rgba(82, 64, 40, 0.14);
}
[data-theme="light"] .mk-day-card.silent {
  background: rgba(255, 252, 242, 0.55);
  border-style: dashed;
}
[data-theme="light"] .mk-day-add {
  background: #fff;
  border-color: rgba(82, 64, 40, 0.20);
  color: rgba(46, 24, 8, 0.55);
}
[data-theme="light"] .mk-day-add:hover { border-color: var(--purple); color: var(--text); }
[data-theme="light"] .mk-campaign-bar {
  background: rgba(255, 252, 242, 0.92);
  border-color: rgba(82, 64, 40, 0.14);
}
[data-theme="light"] .mk-campaign-popover {
  background: rgba(255, 252, 242, 0.98);
  border-color: rgba(82, 64, 40, 0.22);
  box-shadow: 0 18px 48px rgba(46, 24, 8, 0.20);
}
[data-theme="light"] .mk-empty-banner {
  background: rgba(255, 252, 242, 0.85);
  border-color: rgba(82, 64, 40, 0.18);
}
[data-theme="light"] .mk-bridge-cell { background: var(--surface); }
[data-theme="light"] .mk-section-card { background: var(--surface); }
[data-theme="light"] .mk-section-card .mk-section-head { border-bottom-color: rgba(82, 64, 40, 0.10); }
[data-theme="light"] .mk-kv-row:hover { background: rgba(82, 64, 40, 0.05); }
[data-theme="light"] .mk-list-row {
  background: #fff;
  border-color: rgba(82, 64, 40, 0.14);
}
[data-theme="light"] .mk-list-row:hover {
  border-color: var(--purple);
  box-shadow: 0 4px 14px rgba(126, 85, 184, 0.12);
}
[data-theme="light"] .mk-list-row-stat {
  background: rgba(82, 64, 40, 0.08);
  color: var(--text);
}
[data-theme="light"] .mk-list-empty {
  border-color: rgba(82, 64, 40, 0.18);
  color: rgba(46, 24, 8, 0.50);
  background: rgba(255, 252, 242, 0.55);
}
[data-theme="light"] .mk-list-add {
  border-color: rgba(82, 64, 40, 0.22);
  color: rgba(46, 24, 8, 0.55);
  background: rgba(255, 252, 242, 0.50);
}
[data-theme="light"] .mk-list-add:hover {
  border-color: var(--purple);
  color: var(--text);
  background: #fff;
}
[data-theme="light"] .mk-kpi-tile {
  background: #fff;
  border-color: rgba(82, 64, 40, 0.14);
}
[data-theme="light"] .mk-phase-row {
  background: #fff;
  border-color: rgba(82, 64, 40, 0.14);
}
[data-theme="light"] .mk-gates .mk-gate {
  background: #fff;
  border-color: rgba(82, 64, 40, 0.14);
}
[data-theme="light"] .mk-q-cluster {
  background: var(--surface);
  border-color: rgba(82, 64, 40, 0.14);
}
[data-theme="light"] .mk-q-cluster-count {
  background: rgba(82, 64, 40, 0.08);
  color: var(--text);
}
[data-theme="light"] .mk-q-empty {
  border-color: rgba(82, 64, 40, 0.18);
  color: rgba(46, 24, 8, 0.45);
}
[data-theme="light"] .mk-ch-card { background: var(--surface); }
[data-theme="light"] .mk-pipe { /* outreach pipeline columns container */ }
[data-theme="light"] .mk-outreach-col { background: var(--surface); border-color: rgba(82, 64, 40, 0.14); }
[data-theme="light"] .mk-pipe-card {
  background: #fff;
  border-color: rgba(82, 64, 40, 0.14);
}
[data-theme="light"] .mk-pipe-count {
  background: rgba(82, 64, 40, 0.08);
  color: var(--text);
}
[data-theme="light"] .mk-kanban-col { background: var(--surface); border-color: rgba(82, 64, 40, 0.10); }
[data-theme="light"] .mk-col-count {
  background: rgba(82, 64, 40, 0.08);
  color: var(--text);
}
[data-theme="light"] .mk-col-empty {
  border-color: rgba(82, 64, 40, 0.22);
  color: rgba(46, 24, 8, 0.50);
}
[data-theme="light"] .mk-col-foot-add {
  color: rgba(46, 24, 8, 0.55);
}
[data-theme="light"] .mk-col-foot-add:hover { background: rgba(82, 64, 40, 0.06); color: var(--text); }
[data-theme="light"] .mk-type-chip {
  background: #fff;
  border-color: rgba(82, 64, 40, 0.14);
  color: rgba(46, 24, 8, 0.65);
}
[data-theme="light"] .mk-progress { background: rgba(82, 64, 40, 0.10); }
[data-theme="light"] .mk-vocab-preview-line { color: rgba(46, 24, 8, 0.70); }

/* Outreach: pipe-col background already overridden at line ~6887.
   Reinforce empty placeholder and column heads. */
[data-theme="light"] .mk-pipe-col {
  border-color: rgba(82, 64, 40, 0.14);
}

/* Drawer (form modal) in light mode. The header / body / footer surfaces
   inherit from .card which is already themed; just make sure the delete
   button picks up enough contrast and the field-header borders read. */
[data-theme="light"] .drawer-foot .drawer-delete {
  color: rgba(46, 24, 8, 0.65);
}
[data-theme="light"] .drawer-foot .drawer-delete:hover {
  color: #b34b3d;
  border-color: rgba(179, 75, 61, 0.40);
}
[data-theme="light"] .field-header { border-bottom-color: rgba(82, 64, 40, 0.14); }
[data-theme="light"] .field-header h4 { color: rgba(46, 24, 8, 0.50); }

/* ============================================================
   END v0.12.3 LIGHT MODE SWEEP
   ============================================================ */

/* ============================================================
   v0.12.4 — Dashboard polish, Notes legibility, Product Builder,
   Tech Pack Generator, Production Schedule, breadcrumb removal.
   Appended at the bottom so it overrides earlier declarations.
   ============================================================ */

/* --- Topbar: hide MIKA › PageName breadcrumb and Shortcuts help button.
   Sidebar already highlights the active page. */
.topbar .crumb { display: none !important; }
.topbar #btn-help { display: none !important; }

/* --- 3 Reasons plaque — deeper etched feel, centered text. */
.reasons-plaque h2 {
  text-align: center;
}
.reason-card.plaque {
  /* Reset the asymmetric padding so the centered title actually centers. */
  padding: 60px 22px 32px !important;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.reason-card.plaque .num {
  /* Move the slot number up to a centered chip above the title. */
  position: absolute !important;
  left: 50% !important;
  top: 14px !important;
  transform: translateX(-50%);
}
.reason-card.plaque .title {
  text-align: center;
  width: 100%;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* Deeper carved-into-stone effect: top inner highlight + sharp bottom shadow
     + soft diffuse drop for ambient depth + faint chisel outline. */
  color: #d4cab5;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 1px rgba(0, 0, 0, 0.85),
    0 3px 6px rgba(0, 0, 0, 0.55),
    inset 0 1px 2px rgba(0, 0, 0, 0.7);
  background:
    linear-gradient(180deg,
      rgba(195, 180, 150, 0.22) 0%,
      rgba(70, 55, 35, 0.45) 45%,
      rgba(150, 130, 100, 0.18) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55))
          drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.85));
}
[data-theme="light"] .reason-card.plaque .title {
  color: #3a2818;
  background:
    linear-gradient(180deg,
      rgba(82, 64, 40, 0.85) 0%,
      rgba(46, 24, 8, 0.95) 50%,
      rgba(82, 64, 40, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.70))
          drop-shadow(0 -1px 0 rgba(82, 64, 40, 0.40));
  text-shadow: none;
}
.reason-card.plaque .desc {
  text-align: center;
  width: 100%;
  margin-top: 10px;
}
.reason-card.plaque.empty {
  align-items: center; justify-content: center;
  padding: 60px 22px 32px !important;
}
.reason-card.plaque.empty .num {
  position: absolute !important;
  left: 50% !important; top: 14px !important;
  transform: translateX(-50%);
}

/* --- Notes ("Note board") — restore legibility on dark mode + italic Neue Haas.
   The v0.10.12 gradient sweep applied --grad-input to every textarea, which
   in dark mode made the sticky-note textarea dark with dark text. We force
   the textarea transparent over the pastel sticky background, and switch
   the body font to NeueHaasDisplayThinItalic. */
.sn-body {
  background: transparent !important;
  background-image: none !important;
  color: #1A1A1A !important;
  font: italic 200 14px/1.55 'Neue Haas', system-ui, sans-serif !important;
  font-style: italic !important;
  letter-spacing: 0.01em;
  caret-color: #1A1A1A;
}
.sn-body::placeholder {
  color: rgba(26, 26, 26, 0.45);
  font-style: italic;
}

/* --- Product Builder — expanded form layout (sections + multi-select). */
.product-form .form-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.product-form .form-section:first-of-type {
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
}
.product-form .form-section h4 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.product-form .multi-pick {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px; border: 1px solid var(--line); border-radius: 10px;
  max-height: 140px; overflow-y: auto;
  background: var(--grad-input);
}
.product-form .multi-pick label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; cursor: pointer;
  background: var(--surface);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.product-form .multi-pick label:hover { border-color: var(--purple); }
.product-form .multi-pick input[type="checkbox"] { accent-color: var(--purple); }
.product-form .multi-pick label.checked {
  background: var(--grad-btn-primary, var(--purple));
  color: #fff; border-color: transparent;
}
.product-form .cost-row {
  display: grid; grid-template-columns: 1fr 90px 36px; gap: 8px; align-items: center;
  margin-bottom: 6px;
}
.product-form .photo-grid .photo-tile.primary {
  outline: 3px solid var(--purple);
  outline-offset: -2px;
}
.product-form .photo-grid .photo-tile {
  position: relative;
}
.product-form .photo-tile .photo-primary {
  position: absolute; left: 4px; top: 4px;
  background: rgba(0,0,0,0.55); color: #fff;
  border: none; padding: 3px 8px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
.product-form .photo-tile .photo-primary.active {
  background: var(--purple); color: #fff;
}

/* --- Production Schedule — expandable per-product disclosures. */
.prod-disclosure {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  margin-bottom: 14px;
  background: var(--grad-ink, var(--ink));
  overflow: hidden;
}
.prod-disclosure-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  cursor: pointer; user-select: none;
  transition: background 0.12s ease;
}
.prod-disclosure-head:hover { background: var(--surface); }
.prod-disclosure-head .chev {
  width: 14px; height: 14px;
  transition: transform 0.18s ease;
  color: var(--muted);
}
.prod-disclosure.open > .prod-disclosure-head .chev { transform: rotate(90deg); }
.prod-disclosure-head .pd-title { flex: 1; min-width: 0; }
.prod-disclosure-head .pd-title b { font-size: 15px; }
.prod-disclosure-head .pd-title p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.prod-disclosure-head .pd-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.prod-disclosure-body {
  display: none;
  padding: 18px 22px 22px;
  border-top: 1px solid var(--line);
  background: var(--grad-surface, var(--surface));
}
.prod-disclosure.open > .prod-disclosure-body { display: block; }
.prod-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
  margin-bottom: 18px;
}
.prod-detail-grid .pd-cell label {
  display: block;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.prod-detail-grid .pd-cell .v { font-size: 13px; color: var(--text); }
.milestone-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
}
.milestone-row {
  display: grid;
  grid-template-columns: 24px 1fr 140px 120px 32px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink);
  transition: border-color 0.12s ease;
}
.milestone-row:hover { border-color: var(--purple); }
.milestone-row.done {
  opacity: 0.7;
}
.milestone-row.done .ms-label { text-decoration: line-through; }
.milestone-row .ms-check {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--line); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: transparent; transition: all 0.12s ease;
}
.milestone-row .ms-check.on {
  background: var(--purple); border-color: var(--purple); color: #fff;
}
.milestone-row .ms-label {
  background: transparent; border: none; outline: none;
  font: inherit; color: var(--text);
  padding: 4px 0;
}
.milestone-row .ms-label:focus { outline: 1px solid var(--purple); border-radius: 4px; padding: 4px; }
.milestone-row input.ms-date,
.milestone-row select.ms-status {
  background: transparent; border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 8px; font: inherit; font-size: 12px; color: var(--text);
}
.milestone-row .ms-rm {
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 16px;
  padding: 2px 4px;
}
.milestone-row .ms-rm:hover { color: #e58a8a; }
.add-milestone-row {
  display: flex; gap: 8px;
  margin-top: 10px;
}

/* --- Tech Pack Generator. */
.techpack-page .tp-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.tp-card {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px;
  background: var(--grad-ink, var(--ink));
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.tp-card:hover { transform: translateY(-1px); border-color: var(--purple); }
.tp-card h4 { margin: 0 0 4px; font-size: 14px; }
.tp-card p.meta { margin: 0; font-size: 11px; color: var(--muted); }
.tp-editor {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px;
}
@media (max-width: 960px) {
  .tp-editor { grid-template-columns: 1fr; }
}
.tp-editor .tp-section {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px;
  background: var(--grad-ink, var(--ink));
  margin-bottom: 14px;
}
.tp-editor .tp-section h4 {
  margin: 0 0 10px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.pom-table {
  width: 100%; border-collapse: collapse;
}
.pom-table th, .pom-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px; text-align: left;
}
.pom-table th { font-weight: 600; color: var(--muted); }
.pom-table input {
  background: transparent; border: none; outline: none;
  font: inherit; color: var(--text); width: 100%;
  padding: 4px 0;
}
.pom-table input:focus { outline: 1px solid var(--purple); border-radius: 4px; padding: 4px; }
.pom-table .pom-rm {
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 14px;
}
.pom-table .pom-rm:hover { color: #e58a8a; }
.tp-preview {
  position: sticky; top: 84px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px;
  background: #fefcf6; color: #1a1a1a;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
[data-theme="light"] .tp-preview { background: #ffffff; }
.tp-preview h2, .tp-preview h3, .tp-preview h4 { color: #1a1a1a; }
.tp-preview .tp-prev-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 8px;
  font-size: 12px; padding: 3px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.tp-preview .tp-prev-row b { font-weight: 600; color: #555; text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; }
.tp-preview table.tp-prev-pom {
  width: 100%; border-collapse: collapse; font-size: 11px;
  margin-top: 6px;
}
.tp-preview table.tp-prev-pom th,
.tp-preview table.tp-prev-pom td {
  border: 1px solid rgba(0,0,0,0.12); padding: 4px 6px; text-align: left;
}
.tp-preview table.tp-prev-pom th { background: #f4eedd; font-weight: 700; }

/* --- Inline "New task" row on My Open Tasks. */
.me-tasks-quickadd {
  display: flex; gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
  background: var(--surface);
  align-items: center;
  flex-wrap: wrap;
}
.me-tasks-quickadd input.input,
.me-tasks-quickadd select.input {
  flex: 1; min-width: 120px;
  background: transparent !important;
  background-image: none !important;
  border: none; padding: 4px 6px;
  font-size: 13px;
}
.me-tasks-quickadd input.input:focus,
.me-tasks-quickadd select.input:focus {
  outline: 1px solid var(--purple); border-radius: 4px;
}
.me-tasks-quickadd .qa-title { flex: 2; }

/* --- Suppliers expanded card — match Manufacturer density. */
.supplier-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px;
  margin-top: 10px;
}
.supplier-meta-grid label {
  display: block;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.supplier-meta-grid span { font-size: 12px; color: var(--text-soft); }

/* End v0.12.4 */

/* ============================================================
   v0.12.5 — Unified popup styling, Product Profile page, Figma
   mood board, Brand Kit rebuild, Marketing expanded form, Material
   List rename. Appended at the bottom so it overrides everything.
   ============================================================ */

/* --- All popups (modal + drawer) share the same big, readable
   liquid-glass shell. 75% of viewport, generous padding, large
   title, clear sectioning. The form-modal is the source of truth
   for product / task / supplier / manufacturer editors. */
.modal-overlay {
  background: rgba(0, 0, 0, 0.62) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  z-index: 200 !important;
}

.modal-overlay .modal {
  /* Size: 75% of viewport width, max 1200px, generous min so single-column
     forms still feel substantial. */
  width: 75vw !important;
  max-width: 1200px !important;
  min-width: min(560px, 92vw) !important;
  max-height: 88vh !important;
  padding: 32px 40px !important;
  border-radius: 20px !important;
  overflow-y: auto !important;
  /* Same glass surface as the detail-drawer for visual consistency. */
  background:
    radial-gradient(ellipse at top left,     rgba(185, 147, 224, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(126,  85, 184, 0.14), transparent 60%),
    radial-gradient(ellipse at center,       rgba(226, 218, 201, 0.05), transparent 70%),
    rgba(28, 22, 38, 0.92) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(185, 147, 224, 0.24) !important;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.60),
    0 4px 12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(226, 218, 201, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
  color: #efe7d8 !important;
}
[data-theme="light"] .modal-overlay .modal {
  background:
    radial-gradient(ellipse at top left,     rgba(126,  85, 184, 0.14), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(82,   64,  40, 0.12), transparent 60%),
    radial-gradient(ellipse at center,       rgba(255, 250, 236, 0.45), transparent 70%),
    rgba(255, 250, 236, 0.92) !important;
  border: 1px solid rgba(26, 26, 26, 0.14) !important;
  color: #2e1808 !important;
}
.modal-overlay .modal h3 {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  margin: 0 0 8px !important;
  line-height: 1.15;
}
.modal-overlay .modal h3 + p,
.modal-overlay .modal .modal-lede {
  font-size: 14px;
  color: rgba(226, 218, 201, 0.62);
  margin: 0 0 22px;
  line-height: 1.55;
}
[data-theme="light"] .modal-overlay .modal h3 + p,
[data-theme="light"] .modal-overlay .modal .modal-lede {
  color: rgba(46, 24, 8, 0.62);
}
.modal-overlay .modal .field label,
.modal-overlay .modal label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(226, 218, 201, 0.78);
  font-weight: 600;
}
[data-theme="light"] .modal-overlay .modal .field label,
[data-theme="light"] .modal-overlay .modal label {
  color: rgba(46, 24, 8, 0.78);
}
.modal-overlay .modal .field-header h4 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(185, 147, 224, 0.85);
  margin: 8px 0 4px;
}
.modal-overlay .modal .input,
.modal-overlay .modal textarea,
.modal-overlay .modal select {
  font-size: 14px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
}
.modal-overlay .modal .actions {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(226, 218, 201, 0.10);
}
[data-theme="light"] .modal-overlay .modal .actions {
  border-top-color: rgba(46, 24, 8, 0.10);
}
@media (max-width: 800px) {
  .modal-overlay .modal {
    width: 94vw !important;
    padding: 24px 22px !important;
  }
  .modal-overlay .modal h3 { font-size: 22px !important; }
}

/* --- Multi-select widgets shared across forms (already styled in
   v0.12.4 .multi-pick — we just make the modal-context bigger). */
.modal-overlay .modal .multi-pick { max-height: 200px; }

/* --- Product Profile page — built like a team profile but for products. */
.product-profile {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  margin-top: 8px;
}
@media (max-width: 1000px) {
  .product-profile { grid-template-columns: 1fr; }
}
.product-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at top left, rgba(185, 147, 224, 0.10), transparent 55%),
    var(--grad-ink, var(--ink));
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  .product-hero { grid-template-columns: 1fr; }
}
.product-hero-cover {
  width: 100%; aspect-ratio: 4/5; border-radius: 12px;
  background: #2a2031 center/cover no-repeat;
  border: 1px solid var(--line);
}
.product-hero-cover.empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px;
}
.product-hero h1 { font-size: 32px; margin: 0 0 6px; letter-spacing: -0.01em; }
.product-hero .meta-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.product-hero .meta-row .pill {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 11px;
  background: var(--grad-pill, var(--surface));
}
.product-hero .stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 16px;
}
.product-hero .stat-grid .stat {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.20);
  border: 1px solid var(--line-soft);
}
.product-hero .stat-grid .stat label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  display: block;
}
.product-hero .stat-grid .stat .v { font-size: 16px; font-weight: 700; }
.product-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 18px;
  background: var(--grad-ink, var(--ink));
}
.product-section h3 {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.product-sidebar .pb-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--grad-ink, var(--ink));
  margin-bottom: 14px;
}
.product-sidebar .pb-card h4 {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
.product-sidebar .pb-card .pill-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}

/* Product card on the index now reads as "open profile" not "edit". */
.product-card { cursor: pointer; }

/* --- Mood Board · Figma surface. */
.figma-shell { margin-top: 14px; }
.figma-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 0;
  background: var(--grad-ink, var(--ink));
  margin-bottom: 18px;
}
.figma-card h3 { margin: 0 0 6px; font-size: 15px; }
.figma-card .meta { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.figma-card .figma-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1320;
  border: 1px solid var(--line);
}
.figma-card .figma-frame-wrap iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.figma-card .figma-actions {
  display: flex; gap: 8px; padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 14px;
}

/* --- Brand Kit · v0.12.5 editable + simplified. */
.brand-kit-page .bk-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
  background: var(--grad-ink, var(--ink));
}
.brand-kit-page .bk-section > h3 {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.brand-kit-page .bk-logo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.brand-kit-page .bk-logo-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(0,0,0,0.18);
  position: relative;
  text-align: center;
}
.brand-kit-page .bk-logo-tile .bk-mark {
  width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border-radius: 10px; padding: 14px;
}
.brand-kit-page .bk-logo-tile .bk-mark img,
.brand-kit-page .bk-logo-tile .bk-mark svg { max-width: 100%; max-height: 100%; }
.brand-kit-page .bk-logo-tile .bk-mark-label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.brand-kit-page .bk-color-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.brand-kit-page .bk-color {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.brand-kit-page .bk-color .swatch { height: 84px; }
.brand-kit-page .bk-color .body { padding: 10px 12px; }
.brand-kit-page .bk-color .body input.input { font-size: 12px; padding: 4px 6px; }
.brand-kit-page .bk-font-row {
  display: grid; grid-template-columns: 220px 1fr 44px; gap: 12px;
  align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.brand-kit-page .bk-font-row:last-child { border-bottom: 0; }
.brand-kit-page .bk-font-sample {
  font-size: 24px; line-height: 1.1; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Materials list page (renamed). */
.material-list-page .data-table td.ml-product-col { font-size: 12px; color: var(--muted); }

/* End v0.12.5 */

/* ============================================================
   v0.12.6 — Outreach (Promo + Press database) + Chat sidebar
   (DMs / Groups / AI button).
   ============================================================ */

/* --- Outreach tables. */
.outreach-page .data-table.outreach-table {
  width: 100%;
  border-collapse: collapse;
}
.outreach-page .data-table.outreach-table th,
.outreach-page .data-table.outreach-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  vertical-align: top;
}
.outreach-page .data-table.outreach-table th {
  background: var(--surface);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.outreach-page .data-table.outreach-table tbody tr {
  transition: background 0.12s ease;
}
.outreach-page .data-table.outreach-table tbody tr:hover {
  background: rgba(185, 147, 224, 0.06);
}

/* --- Chat sidebar v2 (DMs / Groups / AI). */
.chat-sidebar-v2 {
  padding-top: 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-ai-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(185, 147, 224, 0.18), rgba(126, 85, 184, 0.10)),
    var(--grad-ink, var(--ink));
  cursor: pointer;
  margin: 4px 8px 12px;
  font: inherit;
  color: var(--text);
  text-align: left;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.chat-ai-btn:hover { transform: translateY(-1px); border-color: var(--purple); }
.chat-ai-btn.active {
  background:
    linear-gradient(135deg, rgba(185, 147, 224, 0.35), rgba(126, 85, 184, 0.25)),
    var(--grad-ink, var(--ink));
  border-color: var(--purple);
}
.chat-ai-btn .ai-glyph {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-deep, #7E55B8), var(--purple, #B993E0));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #1A1A1A; flex-shrink: 0;
}
.chat-ai-btn .ai-label { display: flex; flex-direction: column; line-height: 1.2; }

.chat-group {
  display: flex; flex-direction: column;
}
.chat-group-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  cursor: pointer; user-select: none;
}
.chat-group-head:hover { color: var(--text); }
.chat-group-head .chev {
  width: 12px; height: 12px;
  transition: transform 0.15s ease;
  color: var(--muted);
}
.chat-group.collapsed > .chat-group-head .chev { transform: rotate(0deg); }
.chat-group:not(.collapsed) > .chat-group-head .chev { transform: rotate(90deg); }
.chat-group-body { display: flex; flex-direction: column; }
.chat-group.collapsed > .chat-group-body { display: none; }

/* Channel rows inside a group are tighter. */
.chat-sidebar-v2 .chat-channel {
  padding: 6px 12px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 6px;
  margin: 0 6px;
  cursor: pointer;
  transition: background 0.12s ease;
  font-size: 13px;
}
.chat-sidebar-v2 .chat-channel:hover { background: var(--surface); }
.chat-sidebar-v2 .chat-channel.active {
  background: var(--grad-btn-primary, var(--purple));
  color: #fff;
}
.chat-sidebar-v2 .chat-channel.active .hash,
.chat-sidebar-v2 .chat-channel.active .muted { color: rgba(255,255,255,0.8) !important; }
.chat-sidebar-v2 .chat-channel .hash {
  color: var(--muted);
  width: 16px; text-align: center; flex-shrink: 0;
}
.chat-sidebar-v2 .chat-channel .chat-rename {
  opacity: 0; transition: opacity 0.12s ease;
  background: transparent !important; border: none !important;
  padding: 2px 4px;
}
.chat-sidebar-v2 .chat-channel:hover .chat-rename,
.chat-sidebar-v2 .chat-channel.active .chat-rename { opacity: 1; }

/* End v0.12.6 */

/* ============================================================
   v0.12.7 — 3 Reasons type fix + Weekly 3 readability + inline
   dropdown editing + Brainstorm page polish.
   ============================================================ */

/* --- 3 Reasons plaque: purple text, no number bubbles, centered. */
.reason-card.plaque .num,
.reason-card.plaque.empty .num {
  display: none !important;
}
.reason-card.plaque {
  /* The num is hidden now — push the title down a hair less so it sits
     vertically centered in the slab. */
  padding: 36px 24px !important;
  text-align: center;
}
.reason-card.plaque .title {
  /* Solid purple text with a subtle dark stroke and inner highlight for
     the "carved in stone" look. No more gradient text-fill (which was
     rendering dark on dark in some themes). */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--purple, #B993E0) !important;
  filter: none !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.65),
    0 3px 8px rgba(0, 0, 0, 0.45) !important;
  font-size: 22px !important;
  letter-spacing: 0.06em !important;
}
[data-theme="light"] .reason-card.plaque .title {
  color: var(--purple-deep, #7E55B8) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 0 rgba(82, 64, 40, 0.18) !important;
}

/* --- Weekly 3 cards: bigger task title text. */
.weekly-card .title {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .weekly-card .title { font-size: 16px !important; }
}

/* --- Make obvious-clickable rows feel clickable. */
.widget-row[data-go-task],
.widget-row[data-pp-task],
.widget-row[data-go-project],
.widget-row[data-go-profile] {
  cursor: pointer;
  transition: background 0.12s ease;
}
.widget-row[data-go-task]:hover,
.widget-row[data-pp-task]:hover,
.widget-row[data-go-project]:hover,
.widget-row[data-go-profile]:hover {
  background: var(--surface);
}

/* --- Mika-select dropdown: "Add new option" entry at the bottom. */
.mika-select__panel .mika-select__add {
  border-top: 1px solid var(--line-soft);
  padding: 10px 14px;
  display: flex; gap: 8px; align-items: center;
  cursor: pointer;
  color: var(--purple);
  font-size: 13px;
  background: rgba(185, 147, 224, 0.06);
  transition: background 0.12s ease;
}
.mika-select__panel .mika-select__add:hover { background: rgba(185, 147, 224, 0.14); }

/* End v0.12.7 */

/* ============================================================
   v0.12.9 — Apple-friendly pass
   Clickable text affordance + global kebab/More menu + cleaner
   page-head defaults.
   ============================================================ */

/* .link-text — any inline text element that routes somewhere on click
   (product names, etc.). Subtle by default; underlines + brightens on
   hover so the affordance is unmistakable but not loud. */
.link-text {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.link-text:hover,
.link-text:focus-visible {
  color: var(--purple);
  border-bottom-color: rgba(185, 147, 224, 0.55);
  outline: none;
}

/* --- Kebab / "More" dropdown menu ----------------------------
   Used on every page-head to collapse secondary actions behind a
   single icon button. The trigger is .menu-trigger; the popover
   is .menu-popover. JS toggles `.open` on the parent .menu wrap
   and computes positioning. */
.menu { position: relative; display: inline-flex; }
.menu-trigger {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-bg, var(--surface));
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.menu-trigger:hover {
  background: var(--glass-bg-strong, var(--surface-2));
  color: var(--text);
  border-color: rgba(185, 147, 224, 0.35);
}
.menu-trigger svg { pointer-events: none; }
.menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-width: 280px;
  background: var(--glass-bg-strong, var(--ink));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.menu.open .menu-popover {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background 0.12s ease;
}
.menu-item:hover,
.menu-item:focus-visible {
  background: rgba(185, 147, 224, 0.12);
  color: var(--text);
  outline: none;
}
.menu-item svg { flex-shrink: 0; color: var(--text-soft); }
.menu-item.danger { color: #E58A8A; }
.menu-item.danger:hover { background: rgba(229, 138, 138, 0.10); }
.menu-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 4px 2px;
}

/* ============================================================
   v0.12.10 — Drag/drop affordances, project chip rail, inline
   task delete buttons, dropdown "+ Add new" footer.
   ============================================================ */

/* Project switcher rail at the top of a project drill-down. */
.proj-chip-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-subtle);
  border-radius: 12px;
}
.proj-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.proj-chip:hover { color: var(--text); border-color: var(--purple); }
.proj-chip.active {
  background: rgba(185, 147, 224, 0.18);
  border-color: var(--purple);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(185, 147, 224, 0.18);
}
.proj-chip.drag-over {
  border-color: var(--purple);
  background: rgba(185, 147, 224, 0.25);
  transform: scale(1.03);
}
.proj-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
}
.proj-chip__dot.priority-high   { background: #E58A8A; }
.proj-chip__dot.priority-medium { background: var(--purple); }
.proj-chip__dot.priority-low    { background: #88C8A8; }
.proj-chip__label {
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Drag handle for Weekly 3 drop zones + dragged-row visual state. */
.w3-drop.drag-over {
  outline: 2px dashed var(--purple);
  outline-offset: -6px;
  background: rgba(185, 147, 224, 0.10);
}
.task-row-drag {
  cursor: grab;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.task-row-drag.dragging { opacity: 0.55; cursor: grabbing; }
.task-row-drag:hover .task-row-delete { opacity: 1; }
.task-row-delete {
  opacity: 0.35;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.task-row-delete:hover { color: #E58A8A; background: rgba(229, 138, 138, 0.12); opacity: 1; }

/* Kanban card now has an absolute trash button in the top-right corner. */
.task-card { position: relative; }
.task-card .task-card-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  opacity: 0;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.task-card:hover .task-card-delete { opacity: 0.8; }
.task-card .task-card-delete:hover { color: #E58A8A; background: rgba(229, 138, 138, 0.12); opacity: 1; }
.task-card .task-card-delete svg { width: 14px; height: 14px; }

/* "+ Add new" footer option inside our enhanced selects. The native
   <option> element supports this in the dropdown; we lean on its
   data attribute hook (handled in JS) and just visually distinguish
   it via the styled-select wrapper if used. */
select option.opt-add-new {
  color: var(--purple);
  font-weight: 600;
  font-style: italic;
}

/* --- v0.12.11 — Research page (Operations) ---
   Branded research-report builder. List view + two-pane editor. */
.research-page .research-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; margin-top: 18px;
}
.research-card {
  text-align: left; background: var(--grad-ink, var(--ink));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  color: var(--text);
}
.research-card:hover { transform: translateY(-1px); border-color: var(--purple); box-shadow: 0 8px 30px -18px rgba(126, 85, 184, 0.5); }
.research-card__topline { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.research-card__title { margin: 0; font-size: 16px; line-height: 1.3; }
.research-card__sub  { margin: 0; font-size: 13px; line-height: 1.4; }
.research-card__meta { margin: 0; font-size: 11px; letter-spacing: 0.04em; }
.research-card__author { margin: auto 0 0; font-size: 11px; }

/* ============================================================
   v0.12.14 — Research, Google Docs-style editor
   Top bar (title, status, export) + formatting toolbar +
   sidebar (Documents) + gray canvas with centered white paper.
   ============================================================ */

/* The editor takes the full viewport below the topbar. We strip the
   stock .view padding so the doc bar pins flush. */
.view:has(.rdoc) { padding: 0 !important; }

.rdoc {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h, 56px));
  min-height: 600px;
  background: var(--surface);
  color: var(--text);
}

/* -- Top doc bar -------------------------------------------------- */
.rdoc-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.rdoc-bar__left {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.rdoc-bar__right {
  display: flex; align-items: center; gap: 8px;
}
.rdoc-back {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rdoc-title {
  flex: 1; min-width: 0;
  background: transparent; border: 1px solid transparent;
  font-size: 17px; font-weight: 500;
  color: var(--text);
  padding: 6px 10px; border-radius: 6px;
  outline: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rdoc-title:hover { background: rgba(255,255,255,0.04); }
.rdoc-title:focus { background: rgba(185,147,224,0.08); border-color: rgba(185,147,224,0.35); }
.rdoc-status {
  font-size: 11px; padding: 4px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); outline: none;
}
.rdoc-saved {
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.04em;
  min-width: 72px; text-align: right;
}
.rdoc-saved.is-pending { color: var(--purple); }

/* -- Formatting toolbar ------------------------------------------ */
.rdoc-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.rdoc-tb {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text); cursor: pointer;
  font-size: 13px; font-weight: 600;
  position: relative;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.rdoc-tb:hover { background: rgba(185,147,224,0.10); }
.rdoc-tb:active { background: rgba(185,147,224,0.20); }
.rdoc-tb b, .rdoc-tb i, .rdoc-tb u, .rdoc-tb s { font-style: normal; font-weight: 700; line-height: 1; }
.rdoc-tb i { font-style: italic; font-weight: 500; }
.rdoc-tb u { text-decoration: underline; font-weight: 500; }
.rdoc-tb s { text-decoration: line-through; font-weight: 500; }
.rdoc-tb-select {
  height: 30px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text);
  font-size: 13px; cursor: pointer; outline: none;
}
.rdoc-tb-select:hover { background: rgba(185,147,224,0.10); }
.rdoc-tb-size { min-width: 60px; }
.rdoc-tb-sep {
  width: 1px; height: 18px;
  background: var(--line);
  margin: 0 6px;
}
.rdoc-tb-color {
  position: relative; cursor: pointer; padding: 0 4px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
}
.rdoc-tb-color__a { font-weight: 700; font-size: 13px; line-height: 1; }
.rdoc-tb-color__bar { width: 20px; height: 3px; background: #1a1a1a; border-radius: 2px; margin-top: 2px; }
.rdoc-tb-color input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

/* -- Body layout: sidebar + canvas ------------------------------- */
.rdoc-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
}
@media (max-width: 900px) {
  .rdoc-body { grid-template-columns: 1fr; }
  .rdoc-side { display: none; }
}

/* -- Sidebar (Documents) ----------------------------------------- */
.rdoc-side {
  border-right: 1px solid var(--line);
  background: var(--ink);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rdoc-side__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 8px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.rdoc-side__title { font-weight: 600; }
.rdoc-side__add {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--text);
}
.rdoc-side__list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.rdoc-tab {
  text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--text); font-size: 13px;
  transition: background 0.1s ease, border-color 0.1s ease;
  width: 100%;
}
.rdoc-tab:hover { background: rgba(185,147,224,0.06); }
.rdoc-tab.is-active {
  background: rgba(185,147,224,0.14);
  border-color: rgba(185,147,224,0.30);
}
.rdoc-tab__icon { color: var(--muted); display: inline-flex; }
.rdoc-tab.is-active .rdoc-tab__icon { color: var(--purple); }
.rdoc-tab__name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rdoc-side__panel {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.rdoc-side__panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 14px 8px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.rdoc-side__attachments {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 8px;
  max-height: 220px; overflow-y: auto;
}
.rdoc-attach {
  display: grid; grid-template-columns: 26px 1fr auto;
  gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.rdoc-attach:hover { background: rgba(185,147,224,0.06); }
.rdoc-attach__icon {
  width: 26px; height: 26px; border-radius: 5px;
  background: rgba(126,85,184,0.18); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
}
.rdoc-attach__name {
  font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none;
}
.rdoc-attach__name:hover { color: var(--purple); text-decoration: underline; }
.rdoc-attach__rm { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }

/* -- Canvas (gray bg) + white paper ------------------------------ */
.rdoc-canvas {
  background: #e9eaee; /* google-docs neutral gray */
  overflow-y: auto;
  padding: 28px 24px 80px;
  display: flex; justify-content: center;
}
.rdoc-paper {
  width: 100%;
  max-width: 816px; /* 8.5in @ 96dpi */
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 1px 3px rgba(60,64,67,0.15), 0 4px 12px rgba(60,64,67,0.10);
  min-height: 1056px; /* 11in @ 96dpi */
  margin: 0 auto;
  border-radius: 2px;
}
.rdoc-paper-inner {
  padding: 96px;
  outline: none;
  min-height: 1056px;
  font-family: 'Neue Haas';
  font-size: 11pt; line-height: 1.5; color: #202124;
  caret-color: #1a1a1a;
}
.rdoc-paper-inner:focus { outline: none; }
.rdoc-paper-inner p     { margin: 0 0 8pt; }
.rdoc-paper-inner h1    { font-size: 26pt; font-weight: 700; line-height: 1.2; margin: 12pt 0 6pt; color: #1a1a1a; }
.rdoc-paper-inner h2    { font-size: 20pt; font-weight: 600; line-height: 1.25; margin: 14pt 0 4pt; color: #1a1a1a; }
.rdoc-paper-inner h3    { font-size: 14pt; font-weight: 600; line-height: 1.3;  margin: 14pt 0 4pt; color: #1a1a1a; }
.rdoc-paper-inner ul, .rdoc-paper-inner ol { margin: 0 0 8pt 24pt; padding: 0; }
.rdoc-paper-inner li    { margin: 0 0 4pt; }
.rdoc-paper-inner blockquote {
  margin: 12pt 0; padding: 4pt 14pt;
  border-left: 3px solid #7E55B8; color: #555; font-style: italic;
}
.rdoc-paper-inner pre {
  margin: 12pt 0; padding: 10pt 14pt;
  background: #f3f4f6; border-radius: 4px;
  font-size: 10pt; white-space: pre-wrap;
}
.rdoc-paper-inner a     { color: #1a73e8; text-decoration: underline; }
.rdoc-paper-inner img   { max-width: 100%; height: auto; }
.rdoc-paper-inner figure { margin: 12pt 0; }
.rdoc-paper-inner figcaption { font-size: 9pt; color: #888; text-align: center; margin-top: 4pt; }
.rdoc-paper-inner hr    { border: none; border-top: 1px solid #d8d2c2; margin: 14pt 0; }


/* ============================================================
   v0.12.17 — Upside-down-L chrome + sidebar "manage pages".
   The sidebar (vertical) and topbar (horizontal) share one flat
   panel color and meet with no hairline, forming an upside-down
   L. The main content + body take the darker canvas tone the
   header used to carry. Flat solid fills (no glass) so the two
   surfaces read as one continuous shape.
   ============================================================ */
.sidebar,
.topbar {
  background: #1F1F1F !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.sidebar::after,
.sidebar::before { display: none !important; }

body,
.main {
  background: #151516 !important;
  background-image: none !important;
}

/* Light theme: header's current cream becomes the canvas; the L takes the
   slightly-lifted cream surface. */
[data-theme="light"] .sidebar,
[data-theme="light"] .topbar {
  background: #EFE6D2 !important;
}
[data-theme="light"] body,
[data-theme="light"] .main {
  background: #E2DAC9 !important;
}

/* ---- Sidebar "manage pages" panel ---- */
#nav-manager-root { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; }
#nav-manager-root[hidden] { display: none !important; }
.navmgr-scrim { position: absolute; inset: 0; background: rgba(8,8,10,.62); backdrop-filter: blur(3px); }
.navmgr-modal {
  position: relative; z-index: 1; width: min(440px, calc(100vw - 32px)); max-height: 84vh; overflow: auto;
  background: #1F1F1F; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85);
  animation: ocPop .22s cubic-bezier(.2,.8,.3,1);
}
.navmgr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; }
.navmgr-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.navmgr-head p { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; max-width: 320px; }
.navmgr-x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: #ddd; font-size: 19px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.navmgr-x:hover { background: rgba(255,255,255,.1); }
.navmgr-body { padding: 4px 14px 8px; }
.navmgr-group { margin-bottom: 12px; }
.navmgr-group-name { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 6px 6px 4px; }
.navmgr-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.navmgr-row:hover { background: rgba(255,255,255,.04); }
.navmgr-label { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text); }
.navmgr-row.is-off .navmgr-label { color: var(--muted); }
.navmgr-row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.navmgr-switch { width: 38px; height: 22px; border-radius: 99px; background: rgba(255,255,255,.12); position: relative; flex: 0 0 auto; transition: background .16s ease; }
.navmgr-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #e8e8e8; transition: transform .16s ease; }
.navmgr-row input:checked ~ .navmgr-switch { background: var(--purple); }
.navmgr-row input:checked ~ .navmgr-switch::after { transform: translateX(16px); }
.navmgr-foot { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
[data-theme="light"] .navmgr-modal { background: #EFE6D2; }

@keyframes ocPop { from { opacity:0; transform: translateY(10px) scale(.98); } to { opacity:1; transform:none; } }