/* ============================================================
   tapestree — Ph1 Mockup Shell
   Shared chrome + tokens for clickable mockup set
   ============================================================ */

:root {
  /* Legacy palette names retained as aliases — values retargeted to brand-canonical
     families (Sindoor, Kesari, Hari, Chakra). Per docs/brand/tapestree-brand-guidelines.md §4.2.
     Mrittika → Sindoor · Haldi → Kesari · Vana / Pallava → Hari · Nila → Chakra. */
  --color-mrittika-50:  #FBEEEC;
  --color-mrittika-100: #F5D2CE;
  --color-mrittika-200: #ECA8A1;
  --color-mrittika-300: #DC7670;
  --color-mrittika-400: #C84A43;
  --color-mrittika-500: #B7322C;

  --color-haldi-50:  #FCF1E2;
  --color-haldi-100: #F7DBB2;
  --color-haldi-200: #F1C07F;
  --color-haldi-300: #EAA655;
  --color-haldi-400: #E59537;
  --color-haldi-500: #E08A2A;

  --color-vana-50:  #E8F4ED;
  --color-vana-100: #C2E1CF;
  --color-vana-200: #8FC6A6;
  --color-vana-300: #5BA77F;
  --color-vana-400: #338C5F;
  --color-vana-500: #1A7A47;

  --color-pallava-50:  #E8F4ED;
  --color-pallava-100: #C2E1CF;
  --color-pallava-200: #8FC6A6;
  --color-pallava-300: #5BA77F;
  --color-pallava-400: #338C5F;
  --color-pallava-500: #1A7A47;

  --color-nila-50:  #E5E8F0;
  --color-nila-100: #BFC7DA;
  --color-nila-200: #8E9BBE;
  --color-nila-300: #5C6E9F;
  --color-nila-400: #344A80;
  --color-nila-500: #1B2C5B;

  --color-khadi-50:  #FDFCF8;
  --color-khadi-75:  #FBF8F1;
  --color-khadi-100: #FAF6EC;
  --color-khadi-200: #F5F0E6;
  --color-khadi-300: #EAE2CD;
  --color-khadi-400: #D5C8A8;
  --color-khadi-500: #B5A584;

  --color-kohl-50:  #F0EEEA;
  --color-kohl-100: #C8C3BC;
  --color-kohl-200: #918A80;
  --color-kohl-300: #5C544A;
  --color-kohl-400: #332D26;
  --color-kohl-500: #1A1612;

  /* Brand-canonical families (per docs/brand/tapestree-brand-guidelines.md §4.2) */
  --color-sindoor-50:  #FBEEEC;
  --color-sindoor-100: #F5D2CE;
  --color-sindoor-200: #ECA8A1;
  --color-sindoor-300: #DC7670;
  --color-sindoor-400: #C84A43;
  --color-sindoor-500: #B7322C;

  --color-kesari-50:  #FCF1E2;
  --color-kesari-100: #F7DBB2;
  --color-kesari-200: #F1C07F;
  --color-kesari-300: #EAA655;
  --color-kesari-400: #E59537;
  --color-kesari-500: #E08A2A;

  --color-hari-50:  #E8F4ED;
  --color-hari-100: #C2E1CF;
  --color-hari-200: #8FC6A6;
  --color-hari-300: #5BA77F;
  --color-hari-400: #338C5F;
  --color-hari-500: #1A7A47;

  --color-chakra-50:  #E5E8F0;
  --color-chakra-100: #BFC7DA;
  --color-chakra-200: #8E9BBE;
  --color-chakra-300: #5C6E9F;
  --color-chakra-400: #344A80;
  --color-chakra-500: #1B2C5B;

  --rope-t-first: #1A7A47;   /* Hari 500 — first 't' */
  --rope-tapes: #B7322C;     /* Sindoor 500 — 'apes' / 'r' */
  --rope-trunk: #1A1612;     /* Kohl 500 — tree trunk */
  --rope-ree: #344A80;       /* Chakra 400 — 'e' */
  --rope-ree-end: #5C6E9F;   /* Chakra 300 — final 'e' */

  --surface-canvas: var(--color-khadi-75);   /* warm Khadi paper ground */
  --surface-card: #FDFDFC;         /* Paper — input / inner tile (lighter pull) */
  --surface-card-elev: #FAF6EC;    /* Khadi 100 — widget / card base */
  --surface-border: #EAE2CD;       /* Khadi 300 */
  --surface-sidebar: #F5F0E6;      /* Khadi 200 — sidebar ground */
  --surface-sidebar-hover: rgba(44,40,32,0.04);
  --surface-sidebar-active: #FAF6EC; /* Khadi 100 — active nav tile */

  --text-strong: #2C2820;
  --text-body: #332D26;
  --text-secondary: #5C544A;
  --text-tertiary: #918A80;
  --text-inverse: #2C2820;
  --text-inverse-secondary: #5C544A;

  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 8px;

  --shadow-1: 0 1px 2px rgba(44,40,32,0.06);
  --shadow-2: 0 4px 12px rgba(44,40,32,0.08), 0 1px 2px rgba(44,40,32,0.04);
  --shadow-3: 0 24px 64px rgba(44,40,32,0.16), 0 8px 16px rgba(44,40,32,0.08);

  --duration-base: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --sidenav-width: 232px;
  --header-height: 64px;

  /* ── Task 0.6: additional semantic tokens ───────────────────────────── */

  /* Accent text (use on any accent/dark surface instead of bare #fff) */
  --text-on-accent: #fff;
  /* Deep amber — WCAG AA text on a light Kesari (-50/-100) tint.
     Kesari-500 (#E08A2A) fails AA on those tints; this is its accessible pair. */
  --text-on-warn: #8A5314;

  /* Heatmap / RAG status tokens — derived from existing palette ramps */
  --heat-ok:     var(--color-hari-500);    /* #1A7A47 — green pass */
  --heat-warn:   var(--color-kesari-400);  /* #E59537 — amber caution */
  --heat-danger: var(--color-sindoor-500); /* #B7322C — red alert */

  /* Loyalty tier — Gold */
  --loyalty-gold-bg:   #FFF8E1; /* light gold tint — chip / badge surface */
  --loyalty-gold-bd:   #B8860B; /* dark goldenrod — accessible border / text */
  --loyalty-gold-fg:   #7A5800; /* deep amber — WCAG AA on light bg */
  --loyalty-gold-grad: linear-gradient(135deg, #FFF3CD 0%, #FFE082 60%, #FFC107 100%);

  /* WhatsApp brand token */
  --wa-green: #1A7A47; /* matches plan module colour map */

  /* ── Spacing scale (8pt base / 4pt sub-steps — §8.2) ───────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii additions (§8.3) ─────────────────────────────────────────── */
  --radius-flat: 0px; /* ledger / table / bar — bahi-khata reference */

  /* ── Type-scale tokens (§5.5) ───────────────────────────────────────── */
  --text-xs:      11px;
  --text-sm:      12px;
  --text-md:      13px;  /* body default */
  --text-lg:      15px;
  --text-xl:      18px;
  --text-display: 24px;

  /* ── Motion additions ───────────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-slow: 420ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Data-viz series palette (colour-blind-safe order — §4.7) ───────── */
  --series-1: var(--color-chakra-500);  /* #1B2C5B — deep blue */
  --series-2: var(--color-sindoor-500); /* #B7322C — sindoor red */
  --series-3: var(--color-hari-500);    /* #1A7A47 — hari green */
  --series-4: var(--color-kesari-500);  /* #E08A2A — kesari amber */
  --series-5: var(--color-chakra-300);  /* #5C6E9F — mid blue */
  --series-6: var(--color-hari-300);    /* #5BA77F — mid green */

  /* ── Focus ring (§4.6 / accessibility) ─────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--color-sindoor-50), 0 0 0 4px var(--color-sindoor-400);
}

[data-theme="dark"] {

  /* ── Surfaces ─────────────────────────────────────────────── */
  --surface-canvas:        #08080A;  /* page ground — near true black */
  --surface-sidebar:       #050506;
  --surface-sidebar-hover: rgba(255,255,255,0.045);
  --surface-sidebar-active:#1B1B20;
  --surface-card:          #131316;  /* inner tile / input */
  --surface-card-elev:     #1B1B20;  /* widget / card base (one step up) */
  --surface-border:        #29292F;

  /* ── Text ─────────────────────────────────────────────────── */
  --text-strong:           #F6F6F8;
  --text-body:             #CFCFD6;
  --text-secondary:        #A8A8B0;
  --text-tertiary:         #83838E;
  --text-inverse:          #F6F6F8;
  --text-inverse-secondary:#A8A8B0;
  --text-on-accent:        #FFFFFF;
  --text-on-warn:          #FFC961;  /* bright amber — legible on dark Kesari tint */

  /* ── Sindoor → electric rose (primary action · danger) ───── */
  --color-sindoor-50:  #2A0F1A;   --color-mrittika-50:  #2A0F1A;
  --color-sindoor-100: #3D1626;   --color-mrittika-100: #3D1626;
  --color-sindoor-200: #5E2238;   --color-mrittika-200: #5E2238;
  --color-sindoor-300: #FF93B0;   --color-mrittika-300: #FF93B0;
  --color-sindoor-400: #FF7A9F;   --color-mrittika-400: #FF7A9F;
  --color-sindoor-500: #FF5C8A;   --color-mrittika-500: #FF5C8A;

  /* ── Kesari → bright gold (state · caution) ──────────────── */
  --color-kesari-50:  #2A2008;    --color-haldi-50:  #2A2008;
  --color-kesari-100: #3D2F0C;    --color-haldi-100: #3D2F0C;
  --color-kesari-200: #5E4915;    --color-haldi-200: #5E4915;
  --color-kesari-300: #FFD37A;    --color-haldi-300: #FFD37A;
  --color-kesari-400: #FFC961;    --color-haldi-400: #FFC961;
  --color-kesari-500: #FFC247;    --color-haldi-500: #FFC247;

  /* ── Hari → mint (state · success) ───────────────────────── */
  --color-hari-50:  #06231D;   --color-vana-50:  #06231D;  --color-pallava-50:  #06231D;
  --color-hari-100: #0A3329;   --color-vana-100: #0A3329;  --color-pallava-100: #0A3329;
  --color-hari-200: #125043;   --color-vana-200: #125043;  --color-pallava-200: #125043;
  --color-hari-300: #5BF0D4;   --color-vana-300: #5BF0D4;  --color-pallava-300: #5BF0D4;
  --color-hari-400: #3EEAC9;   --color-vana-400: #3EEAC9;  --color-pallava-400: #3EEAC9;
  --color-hari-500: #2EE6C0;   --color-vana-500: #2EE6C0;  --color-pallava-500: #2EE6C0;

  /* ── Chakra → electric violet (institutional anchor) ─────── */
  --color-chakra-50:  #16122A;   --color-nila-50:  #16122A;
  --color-chakra-100: #201A3D;   --color-nila-100: #201A3D;
  --color-chakra-200: #332A5E;   --color-nila-200: #332A5E;
  --color-chakra-300: #B7A0FF;   --color-nila-300: #B7A0FF;
  --color-chakra-400: #A88CFF;   --color-nila-400: #A88CFF;
  --color-chakra-500: #9D7BFF;   --color-nila-500: #9D7BFF;

  /* ── Khadi → dark neutral surfaces + borders ─────────────── */
  /* -50/-100/-200 = surfaces (dark) · -300/-400 = borders/dividers (lighter) */
  --color-khadi-50:  #1B1B20;
  --color-khadi-75:  #161619;
  --color-khadi-100: #161619;
  --color-khadi-200: #131316;
  --color-khadi-300: #29292F;
  --color-khadi-400: #34343B;
  --color-khadi-500: #4A4A52;

  /* ── Kohl → inverted ink (low = dark surface, high = bright text) ── */
  --color-kohl-50:  #161619;
  --color-kohl-100: #29292F;
  --color-kohl-200: #83838E;
  --color-kohl-300: #A8A8B0;
  --color-kohl-400: #CFCFD6;
  --color-kohl-500: #F6F6F8;

  /* ── Shadows → true black on dark ────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.5);

  /* ── Data-viz series — re-pointed to the bright accents ──── */
  --series-1: var(--color-chakra-300);
  --series-2: var(--color-sindoor-300);
  --series-3: var(--color-hari-300);
  --series-4: var(--color-kesari-300);
  --series-5: var(--color-chakra-400);
  --series-6: var(--color-hari-400);

  /* ── tapAdvisor mark gradient stays gold→rose (reads on dark) ── */
}

/* ── Module-accent button overrides (dark mode only) ────────────── */
[data-theme="dark"] .btn-primary {
  background:    var(--module-accent, var(--color-sindoor-500));
  border-color:  var(--module-accent, var(--color-sindoor-500));
  color:         var(--text-on-accent);
}
[data-theme="dark"] .btn-secondary {
  background:    transparent;
  border-color:  var(--module-accent, var(--color-sindoor-500));
  color:         var(--module-accent, var(--color-sindoor-500));
}
[data-theme="dark"] .btn-destructive {
  border-color:  var(--module-accent, var(--color-sindoor-500));
  color:         var(--module-accent, var(--color-sindoor-500));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-body);
  background: var(--surface-canvas);
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  display: flex;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* visually hidden, still read by screen readers (a11y label primitive) */
.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ——— App shell ——— */
.app-shell { display: flex; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }

/* ——— Sidebar ——— */
.sidebar {
  width: var(--sidenav-width);
  min-width: var(--sidenav-width);
  background: var(--surface-sidebar);
  border-inline-end: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
  z-index: 10;
  position: relative;
  overflow: visible;
}
.sidebar-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--surface-sidebar);
  border-bottom: 1px solid var(--color-khadi-300);
  border-inline-end: 1px solid var(--surface-border);
  gap: 8px;
}
.sidebar-header .sidebar-version { color: var(--text-secondary); }
.wordmark-full {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}
.wm-t1 { color: var(--rope-t-first); }
.wm-tapes { color: var(--rope-tapes); }
.wm-tree { display:inline-block; width:12px; height:18px; vertical-align:-2px; }
.wm-ree { color: var(--rope-ree); }
.wm-ree-end { color: var(--rope-ree-end); }

.sidebar-version {
  margin-inline-start:auto;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-inverse-secondary);
}

.sidebar-scroll { flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width: none; }
.sidebar-scroll::-webkit-scrollbar { display: none; }

.nav-section { padding: 8px 0 4px; }
.nav-label {
  padding: 6px 14px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background var(--duration-base), color var(--duration-base);
  position: relative;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.nav-item:hover { background: var(--surface-sidebar-hover); color: var(--text-strong); }
.nav-item.active {
  background: var(--surface-sidebar-active);
  color: var(--color-kohl-500);
  font-weight: 700;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-sindoor-500);
}
.nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.nav-text { flex:1; }
.nav-badge {
  background: var(--color-sindoor-500);
  color: var(--color-khadi-50);
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--surface-border);
  padding: 8px 0;
}

/* ——— Main ——— */
.main { flex:1; min-width:0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; background: var(--surface-canvas); }

.topbar {
  height: var(--header-height);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  background: var(--surface-canvas);
}
.topbar-module {
  display: flex;
  align-items: center;
  gap: 8px;
}
.module-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mod-color, #52C4C4);
}
.topbar-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.topbar-crumb {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-inline-start: 4px;
}
.topbar-search {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
}
.topbar-search kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--surface-canvas);
  border: 1px solid var(--surface-border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-inline-start: auto;
  color: var(--text-tertiary);
}
.topbar-actions { display:flex; gap:6px; align-items:center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  min-block-size: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--duration-base);
}
.btn-primary {
  background: var(--color-sindoor-500);
  color: var(--color-khadi-50);
  border-color: var(--color-sindoor-500);
}
.btn-secondary {
  background: var(--color-kohl-500);
  color: var(--color-khadi-100);
  border-color: var(--color-kohl-500);
}
.btn-secondary:hover { filter: brightness(1.1); }
.btn-destructive {
  background: transparent;
  color: var(--color-sindoor-500);
  border: 1px solid var(--color-sindoor-500);
}
.btn-destructive:hover { background: var(--color-sindoor-50); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--surface-border); }
.btn-ghost:hover { background: var(--surface-card); }
.btn-tertiary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--color-khadi-300);
}
.btn-tertiary:hover { background: var(--surface-card); color: var(--text-strong); }
.btn-icon { padding: 6px 8px; letter-spacing: 0; text-transform: none; }

/* ——— Status badge ——— */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-body);
}
.pill-success { background: var(--color-hari-50); color: var(--color-hari-500); }
.pill-warn { background: var(--color-kesari-50); color: var(--text-on-warn); }
.pill-danger { background: var(--color-sindoor-50); color: var(--color-sindoor-500); }
.pill-info { background: var(--color-chakra-50); color: var(--color-chakra-500); }
/* ── Task 0.6: new pill + btn classes ───────────────────────────────── */
/* .pill-ok — success alias (same look as .pill-success; --color-hari-700 absent) */
.pill-ok   { background: var(--color-hari-50); color: var(--color-hari-500); }
/* .pill-gold — hospitality loyalty Gold tier */
.pill-gold { background: var(--loyalty-gold-grad); color: var(--loyalty-gold-fg); border: 1px solid var(--loyalty-gold-bd); }
/* .btn-wa — WhatsApp-styled CTA (44px min block-size, logical CSS) */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 10px;
  padding-inline: 16px;
  min-block-size: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--wa-green);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--duration-base);
}
.btn-wa:hover { filter: brightness(1.08); }
.pill-neutral { background: var(--color-khadi-300); color: var(--color-kohl-400); }
.pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ——— Heatmap load cells (RAG utilisation) ——— */
.heat-cell {
  border-radius: 3px;
  padding: 4px;
  text-align: center;
}
.heat-cell-danger { background: var(--color-sindoor-200); color: var(--color-sindoor-500); }
.heat-cell-warn   { background: var(--color-kesari-200);  color: var(--text-on-warn); }
.heat-cell-ok     { background: var(--color-hari-200);    color: var(--color-hari-500); }

/* ——— Card / content ——— */
.content {
  flex: 1;
  display: flex;
  overflow: hidden;
}
/* Full-width detail: collapse the record list so the deal detail spans the whole width. */
.content.list-collapsed .recordlist { display: none; }
.workspace {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.workspace h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.workspace .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 14px;
}
.card {
  background: var(--surface-card-elev);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
}
.card-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title .label-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-inline-start: auto;
  font-weight: 500;
}
.kpi-row { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
.kpi-row--5 { grid-template-columns: repeat(5, 1fr); }
.kpi--clickable { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.kpi--clickable:hover { border-color: var(--mod-color, var(--color-chakra-500)); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.kpi--clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kpi {
  background: var(--surface-card-elev);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.kpi .v {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.kpi .l {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.kpi .d { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.kpi .d.up { color: var(--color-hari-500); }
.kpi .d.down { color: var(--color-sindoor-500); }

/* ——— Conversation panel (woven comms) ——— */
.convo {
  width: 380px;
  min-width: 380px;
  border-inline-start: 1px solid var(--surface-border);
  background: var(--surface-canvas);
  display: flex;
  flex-direction: column;
}
.convo-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.convo-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.convo-filters { display:flex; gap:4px; margin-inline-start:auto; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  min-block-size: 30px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--surface-border);
  color: var(--text-tertiary);
  cursor: pointer;
  background: transparent;
  font-family: var(--font-body);
}
.chip.active { background: var(--mod-color, #52C4C4); border-color: var(--mod-color, #52C4C4); color: #fff; }

/* ── Module filter-row equal-width grid ─────────────────────────────────────
   Scope: [role="tablist"] or [data-toggle-group] containers whose direct
   children are .chip elements (module object-switcher / status-filter rows).
   Exclusions: .convo-filters (conversation-pane), .tier-toggle (feature tier),
   .compose-mode and .channel-toggle (compose-bar toggles).
   Containers that also hold .btn siblings use the same grid; non-chip children
   auto-size via width:auto so only .chip cells equalize.
   ─────────────────────────────────────────────────────────────────────────── */
:is([role="tablist"], [data-toggle-group]):not(.convo-filters):not(.tier-toggle):not(.compose-mode):not(.channel-toggle):has(> .chip) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  min-block-size: 44px;
  align-items: center;
}
:is([role="tablist"], [data-toggle-group]):not(.convo-filters):not(.tier-toggle):not(.compose-mode):not(.channel-toggle):has(> .chip) > .chip {
  display: flex;
  justify-content: center;
  align-items: center;
  min-inline-size: max-content;
  min-block-size: 44px;
}
/* Non-chip siblings (e.g. .btn) inside a filter row must not stretch to 1fr */
:is([role="tablist"], [data-toggle-group]):not(.convo-filters):not(.tier-toggle):not(.compose-mode):not(.channel-toggle):has(> .chip) > :not(.chip) {
  justify-self: start;
  min-inline-size: max-content;
}

.timeline {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.tl {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  position: relative;
}
.tl::before {
  content: '';
  position: absolute;
  inset-inline-start: 14px;
  top: 32px;
  bottom: -10px;
  width: 1px;
  background: var(--surface-border);
}
.tl:last-child::before { display: none; }
.tl-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--color-nila-100);
  color: var(--color-nila-500);
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
}
.tl-av.internal { background: var(--color-pallava-100); color: var(--color-pallava-500); }
.tl-av.email { background: var(--color-haldi-100); color: var(--color-haldi-500); }
.tl-av.wa { background: #DCF8C6; color: #1a7a47; }
.tl-av.sms { background: var(--color-nila-100); color: var(--color-nila-500); }
.tl-av.decision { background: var(--color-nila-50); color: var(--color-nila-400); border: 1px solid var(--color-nila-200); }
.tl-av.task { background: var(--color-pallava-50); color: var(--color-pallava-500); border:1px solid var(--color-pallava-200); }
.tl-av.event { background: var(--color-mrittika-50); color: var(--color-mrittika-400); border:1px solid var(--color-mrittika-200); }
.tl-av.system { background: var(--surface-card); color: var(--text-tertiary); }
.tl-av.ai { background: transparent; border: none; padding: 0; overflow: visible; }
.tl-av.ai .tt-adv-mark { width: 100%; height: 100%; }
.tl-body { flex:1; min-width: 0; }
.tl-row1 { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.tl-name { font-size: 12px; font-weight: 600; color: var(--text-strong); }
.tl-ch {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-body);
}
.ch-internal { background: var(--color-pallava-50); color: var(--color-pallava-500); }
.ch-email { background: var(--color-haldi-50); color: var(--color-haldi-500); }
.ch-wa { background: #DCF8C6; color: #1a7a47; }
.ch-sms { background: var(--color-nila-50); color: var(--color-nila-500); }
.ch-decision { background: var(--color-nila-50); color: var(--color-nila-400); }
.ch-task { background: var(--color-pallava-50); color: var(--color-pallava-500); }
.ch-event { background: var(--color-mrittika-50); color: var(--color-mrittika-400); }
.ch-ai { background: linear-gradient(90deg, var(--color-nila-50), var(--color-pallava-50)); color: var(--color-nila-500); }
.ch-system { background: var(--surface-card); color: var(--text-tertiary); }
.tl-time { font-size: 10px; color: var(--text-tertiary); margin-inline-start: auto; font-family: var(--font-mono); }
.tl-content { font-size: 12px; color: var(--text-body); line-height: 1.5; }
.tl-content strong { color: var(--text-strong); font-weight: 600; }
.tl-content.box-decision { background: var(--color-nila-50); border: 1px solid var(--color-nila-100); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 4px; }
.tl-content.box-task { background: var(--color-pallava-50); border: 1px solid var(--color-pallava-100); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 4px; display:flex; align-items:center; gap:8px; }
.tl-content.box-event { background: var(--color-mrittika-50); border: 1px solid var(--color-mrittika-100); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 4px; }
.tl-content.box-ai { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 4px; }

/* Compose */
.compose {
  border-top: 1px solid var(--surface-border);
  padding: 10px 14px;
  background: var(--surface-canvas);
}
.compose-mode {
  display: flex;
  gap: 0;
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  padding: 2px;
  width: fit-content;
  margin-bottom: 8px;
}
.cm-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-body);
}
.cm-btn.active { background: var(--surface-canvas); color: var(--text-strong); box-shadow: var(--shadow-1); }
.compose-ext {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.channel-toggle { display:flex; gap:4px; margin-inline-start:auto; }
.channel-btn {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-border);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--font-body);
}
.channel-btn.active { background: var(--mod-color, #52C4C4); border-color: var(--mod-color, #52C4C4); color: #fff; }
.compose-input {
  width: 100%;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-body);
  background: var(--surface-card-elev);
  font-family: var(--font-body);
  outline: none;
  resize: none;
  min-height: 48px;
  line-height: 1.5;
}
.compose-input:focus { border-color: var(--mod-color, #52C4C4); }
.compose-footer { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }

/* ——— Form controls (shared modal/entity-form inputs) ——— */
.mk-input {
  inline-size: 100%;
  box-sizing: border-box;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding-block: 10px;
  padding-inline: 12px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-card-elev);
  min-block-size: 44px;
}
.mk-input:focus { outline: none; border-color: var(--mod-color, var(--color-sindoor-500)); }
select.mk-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238A8276' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-inline-end: 34px;
}
input[type=number].mk-input { -moz-appearance: textfield; }
input[type=number].mk-input::-webkit-outer-spin-button,
input[type=number].mk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ——— Entity form (2-column grid inside modals) ——— */
.mk-entity-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  max-block-size: 62vh;
  overflow: auto;
  padding-block-start: 4px;
}
.mk-entity-form .mk-field { margin-block-end: 0; display: flex; flex-direction: column; }
.mk-entity-form .mk-field .field-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-block-end: 5px;
}
.mk-field--full { grid-column: 1 / -1; }
.mk-err { font-size: 11px; color: var(--color-sindoor-500); margin-block-start: 4px; min-block-size: 14px; }

/* ——— Table (ledger style) ——— */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl thead th {
  text-align: start;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--surface-border);
}
.tbl tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-border);
  color: var(--text-body);
}
.tbl tbody tr:hover td { background: var(--surface-card-elev); }
.tbl .num { font-family: var(--font-mono); text-align: end; font-variant-numeric: tabular-nums; }
.tbl .strong { color: var(--text-strong); font-weight: 600; }

/* ——— Section header ——— */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 10px;
}
.section-head h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.section-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.section-head .right { margin-inline-start: auto; display:flex; gap:6px; }

.split-row { display: grid; gap: 14px; }
.split-2 { grid-template-columns: 1fr 1fr; }
.split-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ——— Module tile (launcher) ——— */
.tile {
  background: var(--surface-card-elev);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 18px;
  cursor: pointer;
  transition: transform var(--duration-base), box-shadow var(--duration-base), border-color var(--duration-base);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--tile-color); }
.tile::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 3px;
  background: var(--tile-color, var(--color-nila-300));
}
.tile-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -0.015em;
}
.tile-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tile-color);
  font-weight: 500;
}
.tile-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.tile-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
}

/* ——— Record list (left rail variant) ——— */
.recordlist {
  width: 290px;
  min-width: 290px;
  border-inline-end: 1px solid var(--surface-border);
  background: var(--surface-card-elev);
  display: flex;
  flex-direction: column;
}
.recordlist-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-border);
  display:flex; align-items:center; gap:8px;
}
.recordlist-head input {
  flex:1;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--text-body);
  outline: none;
}
.recordlist-scroll { flex:1; overflow-y:auto; }
.record {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-border);
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}
.record:hover { background: var(--surface-card); }
.record.active { background: var(--surface-canvas); border-inline-start: 3px solid var(--mod-color, #52C4C4); }
.record-name { font-weight: 600; font-size: 13px; color: var(--text-strong); margin-bottom: 2px; }
.record-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); display:flex; gap:6px; align-items:center; font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -0.005em; }
.record-preview {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Detail rail */
.detail { flex:1; display:flex; flex-direction: column; overflow:hidden; }
.detail-head {
  padding: 14px 20px 8px;
  border-bottom: 1px solid var(--surface-border);
}
.detail-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.detail-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.detail-meta-item { font-size: 12px; color: var(--text-secondary); display:flex; align-items:center; gap:5px; }
.detail-meta-item strong { color: var(--text-body); font-weight: 600; }
.tabs { display: flex; border-bottom: 1px solid var(--surface-border); padding: 0 20px; background: var(--surface-canvas); }
.tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  min-block-size: 44px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  background: transparent;
  border-top: none;
  border-inline: none;
  font-family: var(--font-body);
}
.tab:hover { color: var(--text-body); }
.tab.active { color: var(--mod-color, #52C4C4); border-bottom-color: var(--mod-color, #52C4C4); }
.detail-body { flex:1; display:flex; overflow:hidden; }
.detail-fields { flex:1; overflow-y:auto; padding: 16px 20px; }

.field-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 14px; }
.field-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-bottom: 3px;
}
.field-value { font-size: 13px; color: var(--text-body); }
.field-value.large { font-size: 18px; font-weight: 600; color: var(--text-strong); }
.field-value.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ——— Misc ——— */
.divider { border-bottom: 1px solid var(--surface-border); margin: 12px 0; }
.muted { color: var(--text-tertiary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.tab-panel { display: contents; }
.tab-panel[hidden] { display: none; }


/* ─── Nav icon images + hover scale ─── */
.nav-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(.2,.7,.3,1.3);
}
.nav-item:hover .nav-icon img { transform: scale(2); }
/* ─── Documents SVG icon (no PNG available) ─── */
.nav-icon .doc-icon {
  display: block;
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(.2,.7,.3,1.3);
}
.nav-item:hover .nav-icon .doc-icon { transform: scale(2); }

/* ─── Dual logo: full for expanded sidebar, mini for collapsed ─── */
.wordmark-full { gap: 6px; min-width: 0; }
.wordmark-full .logo-full { height: 44px; width: auto; max-width: 100%; display: block; object-fit: contain; }
.wordmark-full .logo-mini { height: 68px; width: 68px; max-width: 100%; display: none; object-fit: contain; }
.sidebar.collapsed .wordmark-full { justify-content: center; width: 100%; }
.sidebar.collapsed .wordmark-full .logo-full { display: none; }
.sidebar.collapsed .wordmark-full .logo-mini { display: block; }

/* ─── Sidebar collapse toggle ─── */
.sidebar-toggle {
  position: absolute;
  inset-inline-end: -11px;
  top: calc(var(--header-height) / 2);
  transform: translateY(-50%);
  z-index: 20;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-khadi-300);
  background: var(--surface-canvas);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.sidebar-toggle:hover { color: var(--text-strong); background: var(--surface-card); }
.sidebar.collapsed .sidebar-toggle { transform: translateY(-50%) rotate(180deg); }

/* ─── Collapsed sidebar state ─── */
.sidebar.collapsed { width: 80px; min-width: 80px; }
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .sidebar-version,
.sidebar.collapsed .pill {
  display: none;
}
.sidebar.collapsed .nav-item { justify-content: center; padding: 9px 6px; }
.sidebar.collapsed .sidebar-header { padding: 0; justify-content: center; }
.sidebar.collapsed .sidebar-header .wordmark-full { justify-content: center; }
.sidebar.collapsed .sidebar-footer .nav-item { padding: 9px 6px; }

/* ─── MEDDIC chip strip + dialogs ─── */
.meddic-strip {
  display: flex;
  gap: 6px;
  padding: 10px 20px 14px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-canvas);
  flex-wrap: wrap;
}
.meddic-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  min-block-size: 44px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-inline-size: 120px;
}
.meddic-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.meddic-chip .mc-letter {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  background: var(--color-pallava-300);
  color: #fff;
  flex-shrink: 0;
}
.meddic-chip.partial .mc-letter { background: var(--color-haldi-400); }
.meddic-chip.empty .mc-letter { background: var(--color-khadi-300); color: var(--text-secondary); }
.meddic-chip .mc-body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.meddic-chip .mc-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.meddic-chip .mc-status {
  font-size: 11px;
  color: var(--text-strong);
  font-weight: 500;
  margin-top: 2px;
}
.meddic-chip.partial .mc-status { color: var(--color-haldi-400); }
.meddic-chip.empty .mc-status { color: var(--text-tertiary); font-style: italic; }

/* Dialog */
.meddic-dialog {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 0;
  max-width: 540px;
  width: calc(100vw - 80px);
  box-shadow: var(--shadow-3, 0 16px 48px rgba(0,0,0,0.18));
  background: var(--surface-card);
  color: var(--text-body);
}
.meddic-dialog::backdrop { background: rgba(20, 14, 8, 0.5); }
.meddic-form { display: flex; flex-direction: column; }
.meddic-form header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--color-khadi-50);
}
.meddic-form .md-letter {
  width: 28px; height: 28px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  background: var(--color-pallava-300);
  color: #fff;
}
.meddic-form .md-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-strong);
  flex: 1;
}
.meddic-form .md-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0 4px;
}
.meddic-form .md-close:hover { color: var(--text-strong); }
.meddic-form .md-body {
  padding: 16px 18px;
  max-height: 60vh;
  overflow-y: auto;
}
.meddic-form .md-body .field-grid { gap: 10px 14px; margin-bottom: 12px; }
.meddic-form .md-label {
  display: block;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 8px;
  margin-bottom: 4px;
}
.meddic-form .md-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-strong);
  background: var(--surface-canvas);
  resize: vertical;
}
.meddic-form .md-input:focus { outline: 2px solid var(--color-nila-300); outline-offset: -1px; }
.meddic-form .md-list {
  margin: 0 0 12px 18px;
  padding: 0;
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.6;
}
.meddic-form .md-warn {
  padding: 8px 10px;
  background: var(--color-haldi-50);
  border: 1px solid var(--color-haldi-200);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-haldi-400);
  margin: 8px 0;
}
.meddic-form .md-empty {
  padding: 12px;
  background: var(--color-khadi-100);
  border: 1px dashed var(--color-khadi-300);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: 10px;
}
.meddic-form footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--surface-border);
  background: var(--color-khadi-50);
}

/* ============================================================
   v2 — workspace-led shell additions
   New components for mockup v2 (workspace nav, two-view tier
   model, tapAdvisor, cross-lens weave, workspace overview,
   landing). Brand tokens only; logical CSS for RTL.
   ============================================================ */

/* ─── Workspace nav (clickable workspace header + nested modules) ─── */
.nav-ws {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 7px;
  padding-inline: 14px 12px;
  margin-block-start: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color var(--duration-base), background var(--duration-base);
}
.nav-ws:hover { color: var(--text-strong); background: var(--surface-sidebar-hover); }
.nav-ws .nav-ws-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ws-color, var(--color-kohl-200));
  flex-shrink: 0;
}
.nav-ws .nav-ws-text { flex: 1; }
.nav-ws .nav-ws-caret { font-size: 9px; color: var(--text-tertiary); transition: transform var(--duration-base); }
.nav-ws.active { color: var(--color-kohl-500); }
.nav-ws.active .nav-ws-caret { transform: rotate(90deg); }
.nav-sub { padding-block-end: 4px; }
.nav-sub .nav-item { padding-inline-start: 26px; font-size: 12.5px; }
.nav-sub .nav-item .nav-icon { width: 16px; height: 16px; }

/* ─── Tier toggle (MVP live · Roadmap) ─── */
.tier-toggle {
  display: inline-flex;
  gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.tier-toggle .tt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
}
.tier-toggle .tt-btn.active { background: var(--surface-canvas); color: var(--text-strong); box-shadow: var(--shadow-1); }
.tier-toggle .tt-btn .tt-dot { width: 6px; height: 6px; border-radius: 50%; }
.tier-toggle .tt-btn[data-tier="mvp"] .tt-dot { background: var(--color-hari-500); }
.tier-toggle .tt-btn[data-tier="roadmap"] .tt-dot { background: var(--color-kohl-200); }

/* ─── Roadmap / coming-soon card (no fabricated data) ─── */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.roadmap-card {
  position: relative;
  background: repeating-linear-gradient(
      135deg,
      var(--color-khadi-100),
      var(--color-khadi-100) 10px,
      var(--surface-card-elev) 10px,
      var(--surface-card-elev) 20px);
  border: 1px dashed var(--color-khadi-400);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roadmap-card .rc-head { display: flex; align-items: center; gap: 8px; }
.roadmap-card .rc-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 1;
}
.roadmap-card .rc-promise { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }
.roadmap-card .rc-foot { margin-block-start: auto; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.chip-roadmap {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--color-khadi-300);
  color: var(--color-kohl-300);
}
.chip-roadmap::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--color-kohl-200); }
.chip-adr {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em;
  color: var(--text-tertiary); border: 1px solid var(--surface-border);
  border-radius: 3px; padding: 1px 5px;
}
.roadmap-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-block: 22px 12px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--surface-border);
}
.roadmap-section-head h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--text-secondary); letter-spacing: -0.01em;
}
.roadmap-section-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }

/* ─── tapAdvisor card (with-vs-without · flagship) ─── */
.advisor-card {
  border: 1px solid var(--color-kesari-200);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-kesari-50), var(--surface-canvas) 60%);
  overflow: hidden;
  margin-block-end: 14px;
}
.advisor-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-block-end: 1px solid var(--color-kesari-100);
}
.adv-mark{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.advisor-head .adv-title { font-size: 13px; font-weight: 600; color: var(--text-strong); flex: 1; }
.adv-context{padding-inline:16px}
.chip-recommend {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--color-hari-50); color: var(--color-hari-500);
}
.chip-provision {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.02em;
  color: var(--color-chakra-500); background: var(--color-chakra-50);
  border-radius: 3px; padding: 2px 6px;
}
/* Balanced two-column compare — both columns equal weight + tinted, so the
   ₹ delta reads at a glance. .advisor-split kept as a back-compat alias. */
.adv-cols, .advisor-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--surface-border); }
.adv-col, .advisor-split .adv-col {
  display: flex; flex-direction: column;
  padding-block: 12px; padding-inline: 16px;
}
/* "Without action" — danger-tinted (Sindoor / danger-50) */
.adv-col.without, .advisor-split .adv-col.without { background: var(--color-sindoor-50); }
/* "With action" — positive-tinted (Hari green) */
.adv-col.with, .advisor-split .adv-col.with { background: var(--color-hari-50); }
.adv-col-head, .advisor-split .adv-col-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600; margin-block-end: 8px; min-block-size: 14px;
}
.adv-col.without .adv-col-head, .advisor-split .adv-col.without .adv-col-label { color: var(--color-sindoor-500); }
.adv-col.with .adv-col-head, .advisor-split .adv-col.with .adv-col-label { color: var(--color-hari-500); }
.adv-line, .advisor-split .adv-line { font-size: 12px; color: var(--text-body); line-height: 1.55; }
/* ₹ figures: identical size, right-aligned, tabular — delta reads instantly.
   margin-block-start:auto pins both amounts to a shared baseline at column foot. */
.adv-amount, .advisor-split .adv-amount {
  font-family: var(--font-mono); font-size: 22px; font-weight: 500;
  font-variant-numeric: tabular-nums; text-align: end;
  margin-block-start: auto; padding-block-start: 8px;
}
.adv-col.without .adv-amount, .advisor-split .adv-col.without .adv-amount { color: var(--color-sindoor-500); }
.adv-col.with .adv-amount, .advisor-split .adv-col.with .adv-amount { color: var(--color-hari-500); }
.advisor-provision {
  padding: 9px 16px;
  font-size: 11px; color: var(--text-secondary); line-height: 1.5;
  border-block-start: 1px solid var(--color-kesari-100);
  background: var(--surface-card);
}
.advisor-provision strong { color: var(--text-body); font-weight: 600; }
.advisor-provision a { color: var(--color-chakra-500); text-decoration: none; }
.advisor-disclaimer {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-size: 11px; color: var(--text-on-warn); line-height: 1.5;
  background: var(--color-kesari-50);
  border-block-start: 1px solid var(--color-kesari-100);
}
.advisor-cta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
  border-block-start: 1px solid var(--color-kesari-100);
}
.advisor-cta .adv-status { margin-inline-start: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }

/* Module label + deadline urgency chip — used on advisor cards */
.adv-mod-label {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-tertiary);
}
.chip-deadline {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.chip-deadline.urgent { background: var(--color-sindoor-50); color: var(--color-sindoor-500); }
.chip-deadline.warn   { background: var(--color-kesari-50); color: var(--text-on-warn); }
.chip-deadline.ok     { background: var(--color-chakra-50); color: var(--color-chakra-500); }

/* ─── Pipeline / deal-stage palette (Task 0.7) ───────────────────────────
   Calm tonal progression keyed to deal health: neutral stone → cool → warm
   → won-green. NO saturated reds (sindoor reserved for danger/loss only).
   Each tint pairs a light -50/-100 background with a dark same-hue -500
   text/dot for WCAG AA contrast in both light and dark themes.
     discovery   Khadi   (neutral paper-stone — no signal yet)
     qualified   Chakra  (cool blue — interest confirmed, still cool)
     proposal    Kesari-50  (warming amber — in motion)
     negotiation Kesari-100 (deeper amber — hot, not alarm-red)
     won         Hari    (green — the positive end of the ramp) */
.stage {
  display: inline-flex; align-items: center; gap: 6px;
  padding-block: 3px; padding-inline: 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--color-khadi-200); color: var(--color-kohl-400);
}
.stage .stage-dot { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; }
.stage--discovery         { background: var(--color-khadi-200);     color: var(--color-kohl-400); }
.stage--needs-established { background: var(--color-mrittika-50);   color: var(--color-mrittika-500); }
.stage--qualified         { background: var(--color-chakra-50);     color: var(--color-chakra-500); }
.stage--proposal          { background: var(--color-kesari-50);     color: var(--text-on-warn); }
.stage--negotiation       { background: var(--color-kesari-100);    color: var(--text-on-warn); }
.stage--won               { background: var(--color-hari-50);       color: var(--color-hari-500); }

/* ── Standard input field classes (tap-field / tap-capture) ───────────────── */
/* .tap-field  — single-line text input: full-width, rounded, bordered */
.tap-field {
  display: block;
  inline-size: 100%;
  block-size: 38px;
  padding-block: 0;
  padding-inline: 12px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-size: 13px;
  color: var(--text-body);
  font-family: inherit;
  outline: none;
}
.tap-field:focus {
  border-color: var(--color-sindoor-400);
  box-shadow: 0 0 0 2px var(--color-sindoor-50);
}
/* .tap-capture — full-width quick-capture bar: tapAdvisor mark + input + send button */
.tap-capture__mark {
  inline-size: 20px;
  block-size: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tap-capture__mark .tt-adv-mark { inline-size: 100%; block-size: 100%; }
.tap-capture {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding-block: 0;
  padding-inline: 14px;
  block-size: 48px;
}
.tap-capture:focus-within {
  border-color: var(--color-sindoor-400);
  box-shadow: 0 0 0 2px var(--color-sindoor-50);
}
.tap-capture__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text-body);
  block-size: 100%;
  min-inline-size: 0;
}
.tap-capture__input::placeholder { color: var(--text-tertiary); }
.tap-capture__send {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-block: 0;
  padding-inline: 0;
  background: none;
  color: var(--text-strong);
  font-size: 16px;
  line-height: 1;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tap-capture__send:hover { color: var(--color-sindoor-500); }

/* tapAdvisor tray (Money roll-up widget) */
.advisor-tray {
  border: 1px solid var(--color-kesari-200);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-kesari-50), var(--surface-canvas) 70%);
  padding: 14px 16px;
  margin-block-end: 14px;
}
.advisor-tray .at-head { display: flex; align-items: center; gap: 10px; }
.advisor-tray .at-mark {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.advisor-tray .at-mark .tt-adv-mark { inline-size: 100%; block-size: 100%; }
.advisor-tray .at-title { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--text-strong); }
.advisor-tray .at-amount { margin-inline-start: auto; font-family: var(--font-mono); font-size: 20px; font-weight: 500; color: var(--color-sindoor-500); font-variant-numeric: tabular-nums; }
.advisor-tray .at-sub { font-size: 12px; color: var(--text-secondary); margin-block-start: 6px; }

/* ─── Cross-lens weave (same row, two workspaces) ─── */
.weave {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-card-elev);
  overflow: hidden;
  margin-block-end: 14px;
}
.weave-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  border-block-end: 1px solid var(--surface-border);
}
.weave-head .wv-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-strong); }
.weave-head .label-eyebrow { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-inline-start: auto; }
.weave-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--surface-canvas);
  border-block-end: 1px solid var(--surface-border);
}
.weave-row .wv-av {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  background: var(--color-chakra-100); color: var(--color-chakra-500);
}
.weave-row .wv-name { font-weight: 600; font-size: 13px; color: var(--text-strong); }
.weave-row .wv-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.weave-lenses { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.weave-lens { padding: 14px 16px; }
.weave-lens + .weave-lens { border-inline-start: 1px solid var(--surface-border); }
.weave-lens .wl-head { display: flex; align-items: center; gap: 8px; margin-block-end: 8px; }
.weave-lens .wl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lens-color, var(--color-kohl-200)); }
.weave-lens .wl-ws {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-tertiary); font-weight: 700;
}
.weave-lens .wl-title { font-size: 12px; font-weight: 600; color: var(--text-strong); }
.weave-lens .wl-body { font-size: 12px; color: var(--text-secondary); line-height: 1.55; }

/* ─── Workspace overview page ─── */
.ws-hero { margin-block-end: 18px; }
.ws-hero .ws-eyebrow {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ws-color, var(--text-tertiary)); font-weight: 600; margin-block-end: 6px;
}
.ws-hero h1 {
  font-family: var(--font-display); font-size: 30px; font-weight: 400;
  color: var(--text-strong); letter-spacing: -0.025em; line-height: 1.1;
}
.ws-hero .ws-story { font-size: 14px; color: var(--text-secondary); margin-block-start: 6px; max-width: 60ch; line-height: 1.55; }
.ws-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ws-mod-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-card-elev);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform var(--duration-base), box-shadow var(--duration-base), border-color var(--duration-base);
}
.ws-mod-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--mod-color); }
.ws-mod-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--mod-color, var(--color-kohl-200)); }
.ws-mod-card .wm-top { display: flex; align-items: center; gap: 10px; }
.ws-mod-card .wm-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mod-color) 14%, transparent);
}
.ws-mod-card .wm-icon img { width: 18px; height: 18px; object-fit: contain; }
.ws-mod-card .wm-name { font-family: var(--font-display); font-size: 17px; font-weight: 400; color: var(--text-strong); letter-spacing: -0.015em; }
.ws-mod-card .wm-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.ws-mod-card .wm-meta { margin-block-start: auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.ws-mod-card .wm-stat { display: flex; gap: 6px; align-items: center; }

/* ─── Landing (Home positioning) ─── */
.landing-hero {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--color-khadi-100), transparent 55%),
    var(--surface-card-elev);
  padding: 28px 28px 24px;
  margin-block-end: 18px;
}
.landing-hero .lh-tagline {
  font-family: var(--font-display); font-size: 38px; font-weight: 300;
  color: var(--text-strong); letter-spacing: -0.03em; line-height: 1.05;
}
.landing-hero .lh-tagline .dot { color: var(--color-sindoor-500); }
.landing-hero .lh-sub { font-size: 15px; color: var(--text-secondary); margin-block-start: 10px; max-width: 64ch; line-height: 1.55; }
.landing-hero .lh-pos { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-tertiary); margin-block-start: 12px; }
.ws-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ws-map-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-card-elev);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform var(--duration-base), box-shadow var(--duration-base), border-color var(--duration-base);
}
.ws-map-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--ws-color); }
.ws-map-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--ws-color, var(--color-kohl-200)); }
.ws-map-card .wmc-name { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--text-strong); letter-spacing: -0.015em; }
.ws-map-card .wmc-story { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.ws-map-card .wmc-mods { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); margin-block-start: 4px; }

/* MVP tier hint rail (top of a module's live section) */
.tier-rail {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-hari-50);
  border: 1px solid var(--color-hari-100);
  font-size: 11px; color: var(--color-hari-500);
  margin-block-end: 14px;
}
.tier-rail .tr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-hari-500); }
.tier-rail.roadmap { background: var(--color-khadi-100); border-color: var(--color-khadi-300); color: var(--text-secondary); }
.tier-rail.roadmap .tr-dot { background: var(--color-kohl-200); }

@media (max-width: 720px) {
  .advisor-split, .weave-lenses { grid-template-columns: 1fr; }
}

/* ============================================================
   mockup.js UI — Toast + Modal
   Uses logical CSS only (inset-inline-*, inset-block-*, etc.)
   Token inventory: --radius-md, --shadow-3, --surface-card,
   --surface-border, --text-strong, --text-secondary.
   ============================================================ */

/* ---- Toast ---- */
.mk-toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  background: var(--text-strong);
  color: #fff;
  padding-block: 10px;
  padding-inline: 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  font-size: 13px;
  font-weight: 500;
  z-index: 9000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.mk-toast.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Modal (uses native <dialog>) ---- */
.mk-modal {
  margin: auto;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-3);
  padding-block: 28px;
  padding-inline: 28px;
  max-inline-size: 600px;
  inline-size: calc(100vw - 48px);
  max-block-size: calc(100dvh - 64px);
  overflow: auto;
  color: var(--text-strong);
  z-index: 8000;
}
.mk-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}
.mk-modal h3 {
  margin-block-end: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
}
.mk-modal-body {
  margin-block-end: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.mk-action-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-end: 14px;
}
.mk-action-meta span {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: var(--color-khadi-100);
  color: var(--text-secondary);
  padding-block: 3px;
  padding-inline: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.mk-modal-body p + p { margin-block-start: 8px; }
.mk-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.mk-modal-actions .btn {
  min-block-size: 44px;
  padding-block: 10px;
  padding-inline: 16px;
}
.tt-adv-mark{width:100%;height:100%;display:block;transform-origin:center;transition:transform .18s cubic-bezier(.2,.7,.3,1.3)}
.tt-adv-mark rect{fill:var(--color-sindoor-500)}
.tt-adv-mark image{filter:brightness(0) invert(1)}
.nav-item:hover .tt-adv-mark{transform:scale(2)}

/* ============================================================
   Responsive shell (handoff: "Responsive mobile design")
   Pinned sidebar ≥1440px (canonical desktop, untouched);
   off-canvas hamburger drawer + scrim below 1440px. Viewport
   media queries — these are full-viewport mockup pages, not
   container-embedded frames. ponytail: media queries over
   container queries; add @container only if a page gets embedded.
   ============================================================ */

/* Hamburger + scrim are injected once by shell.js. Hidden on desktop. */
.nav-hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; min-block-size: 40px;
  margin-inline-end: 2px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer; flex-shrink: 0;
}
.nav-hamburger:hover { color: var(--text-strong); }
.nav-hamburger svg { display: block; }

.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(35, 31, 26, 0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms var(--ease-out);
  z-index: 40;
}
.nav-scrim.show { opacity: 1; pointer-events: auto; }

/* shell.js wraps the nav rail(s) — .sidebar (app switcher) and, on built-out
   modules, aside.module-nav (section rail) — in .nav-drawer. On desktop the
   wrapper is display:contents so the canonical flex layout is untouched; below
   1440 it becomes the single off-canvas two-tier drawer (switcher above rail). */
.nav-drawer { display: contents; }

@media (max-width: 1439.98px) {
  .nav-hamburger { display: inline-flex; }

  .nav-drawer {
    position: fixed;
    inset-block: 0; inset-inline-start: 0;
    inline-size: 288px;
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface-sidebar);
    transform: translateX(-100%);
    transition: transform 260ms var(--ease-out);
    box-shadow: var(--shadow-3);
    z-index: 50;
  }
  [dir="rtl"] .nav-drawer { transform: translateX(100%); }
  .nav-drawer.open { transform: translateX(0); }

  /* Rails inside the drawer (the app switcher + whatever section rail was
     adopted, regardless of its class): static, full width, no own chrome. */
  .nav-drawer > :not(.app-launcher) {
    position: static;
    inline-size: 100%; min-inline-size: 0; width: 100%;
    flex: none;
    border-inline-end: none;
    box-shadow: none;
  }
  .nav-drawer .sidebar-toggle,
  .nav-drawer .mn-nav-toggle,
  .nav-drawer .hr-rail-collapse { display: none; }

  /* A drawer is always full-label — undo any leftover collapsed-rail state. */
  .nav-drawer .sidebar.collapsed,
  .nav-drawer .module-nav.is-collapsed { inline-size: 100%; padding-inline: 0; }
  .nav-drawer .sidebar.collapsed .nav-text,
  .nav-drawer .sidebar.collapsed .nav-label,
  .nav-drawer .sidebar.collapsed .nav-badge,
  .nav-drawer .sidebar.collapsed .sidebar-version,
  .nav-drawer .sidebar.collapsed .pill,
  .nav-drawer .module-nav.is-collapsed .mn-wordmark,
  .nav-drawer .module-nav.is-collapsed .mn-body,
  .nav-drawer .module-nav.is-collapsed .mn-count,
  .nav-drawer .module-nav.is-collapsed .mn-grouphdr { display: revert !important; }
  .nav-drawer .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 7px 12px; }
  .nav-drawer .sidebar.collapsed .wordmark-full .logo-full { display: block; }
  .nav-drawer .sidebar.collapsed .wordmark-full .logo-mini { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer { transition: none; }
}

/* Topbar: drop the centre search + tighten padding on narrow widths. */
@media (max-width: 700px) {
  .topbar-search { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
  .workspace { padding: 16px 14px; }
}

/* Content grids reflow: 4/5-up KPI → 2-up → 1-up; 2-col splits stack. */
@media (max-width: 880px) {
  .kpi-row, .kpi-row--5 { grid-template-columns: repeat(2, 1fr); }
  .split-2, .split-3 { grid-template-columns: 1fr; }
  .mk-entity-form, .crm-rl-detgrid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .kpi-row, .kpi-row--5 { grid-template-columns: 1fr; }
}

/* ============================================================
   Two-tier app launcher inside the drawer (handoff: searchable,
   grouped, pinnable app switcher). Drawer-only — hidden ≥1440.
   Built by shell.js from the existing sidebar app list, so it
   shows the app tier; the section rail (module-nav) sits below.
   ============================================================ */
.app-launcher {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-block-end: 1px solid var(--surface-border);
}
.al-mono {
  inline-size: 26px; block-size: 26px;
  flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--surface-border);
  border-radius: 7px;
  background: var(--color-khadi-100);
}
.al-mono img, .al-mono svg { inline-size: 16px; block-size: 16px; object-fit: contain; }

.al-current {
  display: flex; align-items: center; gap: 10px;
  inline-size: 100%; min-block-size: 44px;
  padding: 8px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-card);
  color: var(--text-strong);
  cursor: pointer; text-align: start;
}
.al-name { flex: 1; font-family: var(--font-display); font-size: 15px; letter-spacing: -0.01em; }
.al-switch {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.al-switch svg { transition: transform 0.2s var(--ease-out); }
.al-current.open .al-switch svg { transform: rotate(180deg); }

.al-pinned { display: flex; flex-wrap: wrap; gap: 6px; }
.al-chip {
  display: flex; align-items: center; gap: 6px;
  min-block-size: 34px; padding: 4px 10px 4px 5px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font-size: 12px; color: var(--text-body); text-decoration: none;
}
.al-chip.active { border-color: var(--color-sindoor-300); color: var(--color-kohl-500); font-weight: 600; }
.al-chip .al-mono { inline-size: 20px; block-size: 20px; border-radius: 5px; }
.al-chip .al-mono img, .al-chip .al-mono svg { inline-size: 13px; block-size: 13px; }

.al-panel { display: flex; flex-direction: column; gap: 8px; }
.al-search input {
  inline-size: 100%; min-block-size: 40px;
  padding: 8px 12px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: var(--surface-canvas);
  font: inherit; font-size: 13px; color: var(--text-strong);
}
.al-list { display: flex; flex-direction: column; gap: 10px; max-block-size: 46vh; overflow-y: auto; }
.al-group { display: flex; flex-direction: column; gap: 2px; }
.al-grouphdr {
  padding: 6px 6px 2px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary);
}
.al-row {
  display: flex; align-items: center; gap: 10px;
  min-block-size: 44px; padding: 6px;
  border-radius: 8px; text-decoration: none; color: var(--text-body);
}
.al-row:hover { background: var(--surface-sidebar-hover); }
.al-row.active { background: var(--surface-sidebar-active); color: var(--color-kohl-500); font-weight: 600; }
.al-row .al-label { flex: 1; font-size: 13px; }
.al-badge {
  background: var(--color-sindoor-500); color: #fff;
  font-size: 10px; font-weight: 700;
  min-inline-size: 17px; block-size: 17px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.al-pin {
  flex: none; inline-size: 32px; block-size: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--text-tertiary); border-radius: 6px;
}
.al-pin:hover { background: var(--surface-card); color: var(--text-secondary); }
.al-pin[aria-pressed="true"] { color: var(--color-haldi-400); }

@media (max-width: 1439.98px) {
  .nav-drawer .app-launcher { display: flex; order: 1; }
  .nav-drawer > :not(.app-launcher):not(.sidebar) { order: 2; }  /* adopted section rail */
  .nav-drawer > .sidebar { order: 3; }
  /* Launcher replaces the raw app rail; keep the footer (Settings + user). */
  .nav-drawer > .sidebar > .sidebar-header,
  .nav-drawer > .sidebar > .sidebar-scroll { display: none; }
}

/* ============================================================
   Overflow containment below desktop. .main is overflow-x:hidden,
   so any child wider than the column gets clipped ("spills off the
   right edge"). Wide blocks must scroll inside their own box, and
   the top bar must wrap rather than clip its action buttons.
   ============================================================ */
@media (max-width: 1100px) {
  /* Data tables scroll horizontally instead of clipping. */
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-inline-size: 100%; }
  .tbl > thead, .tbl > tbody { display: table; inline-size: 100%; }
  /* Any explicit horizontal scroller / wide flex toolbar keeps min-width sane. */
  .workspace { overflow-x: hidden; }
}

@media (max-width: 700px) {
  /* Top bar wraps to a second row so action buttons stay reachable. */
  .topbar { height: auto; min-block-size: var(--header-height); flex-wrap: wrap; row-gap: 6px; padding-block: 8px; }
  .topbar-module { min-inline-size: 0; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
}

/* Master→detail record layout: the .content flex row (record list + .detail)
   stacks below 880px so the detail pane gets full width instead of being
   pushed off-screen and clipped. (README: list/detail split only ≥ 880px.) */
@media (max-width: 880px) {
  .content:has(> .detail) { flex-direction: column; }
  .content > .detail { min-inline-size: 0; }
  .content > .detail .detail-meta { flex-wrap: wrap; }
}

/* ============================================================
   Equal-column grids injected with inline styles by the dashboard
   components (repeat(N,1fr) / "1fr 1fr 1fr") don't reflow on their
   own and clip against .main below desktop. Collapse them: 1-up on
   phones, 2-up on small tablets. Inline styles need attribute
   selectors + !important to override. Children get min-width:0 so
   content can shrink instead of forcing the column wider.
   ============================================================ */
.main [style*="1fr 1fr"] > *,
.main [style*="repeat("] > * { min-inline-size: 0; }

@media (max-width: 560px) {
  .main [style*="repeat(2,1fr)"],
  .main [style*="repeat(3,1fr)"],
  .main [style*="repeat(4,1fr)"],
  .main [style*="repeat(2, 1fr)"],
  .main [style*="repeat(3, 1fr)"],
  .main [style*="repeat(4, 1fr)"],
  .main [style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (min-width: 561px) and (max-width: 880px) {
  .main [style*="repeat(3,1fr)"],
  .main [style*="repeat(4,1fr)"],
  .main [style*="repeat(3, 1fr)"],
  .main [style*="repeat(4, 1fr)"],
  .main [style*="1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}

/* More shared-class containers that clip below desktop. */
@media (max-width: 880px) {
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .detail-body { flex-direction: column; }          /* fields + convo stack */
  .detail-body > * { min-inline-size: 0; }
}
@media (max-width: 700px) {
  .section-head { flex-wrap: wrap; row-gap: 8px; }
}

/* tapAdvisor head: title + provision chip wrap instead of clipping. */
@media (max-width: 880px) {
  .advisor-head { flex-wrap: wrap; row-gap: 6px; }
}

/* Card wrapping a fixed-column grid "table" (e.g. projects portfolio lists):
   scroll horizontally below desktop instead of clipping; floor the grid rows
   so columns stay aligned while scrolling. Add class="card tbl-card". */
@media (max-width: 880px) {
  .tbl-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-card > [style*="grid-template-columns"] { min-inline-size: 560px; }
}

/* Header/toolbar flex rows (title + trailing pills/eyebrow/actions) wrap on
   narrow widths instead of pushing their trailing chips off the right edge. */
@media (max-width: 700px) {
  .card-title { flex-wrap: wrap; row-gap: 6px; }
}

/* Class-based equal grids (.split-2/.split-3) and record cards: let grid/flex
   children shrink so a wide child can't force the collapsed track past the
   viewport (min-content overflow). */
@media (max-width: 880px) {
  .split-2 > *, .split-3 > *,
  .record, .record-name, .record-name > * { min-inline-size: 0; }
}