@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ════════════════════════════════════════════════════════════
   CosmoKundli — Cursor-derived theme layer

   Loaded after styles.css. It re-points the design-token layer rather than
   rewriting components, so all 6,000 lines of layout inherit the new system
   untouched. Two themes ship: a warm-cream editorial canvas and a warm
   near-black counterpart derived from the same ink hue.

   Scope rule: this file only sets colour, background, border, shadow,
   typography and radius. It never touches width, height, padding, margin,
   display or grid — so the existing responsive behaviour is unaffected.

   House note: cards carry a subtle blue hairline in both themes rather than
   the neutral one the source system uses.
   ════════════════════════════════════════════════════════════ */

/* ═══ Brand constants — identical in both themes ═══ */
:root {
  --ck-orange: #f54e00;
  --ck-orange-active: #d04200;
  --ck-on-primary: #ffffff;

  /* AI-timeline pastels. Scoped to progress/stage indicators only. */
  --ck-tl-thinking: #dfa88f;
  --ck-tl-grep: #9fc9a2;
  --ck-tl-read: #9fbbe0;
  --ck-tl-edit: #c0a8dd;
  --ck-tl-done: #c08532;

  --ck-success: #1f8a65;
  --ck-error: #cf2d56;

  /* Type. CursorGothic is licensed; Inter at 400 with negative tracking is
     the documented substitute. JetBrains Mono carries every numeric surface —
     degrees, coordinates and chart tables read as data, not prose. */
  --ck-sans: 'Inter', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ck-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --ck-track-mega: -2.16px;
  --ck-track-lg: -0.72px;
  --ck-track-md: -0.325px;
  --ck-track-sm: -0.11px;

  /* Radius scale */
  --ck-r-xs: 4px;
  --ck-r-sm: 6px;
  --ck-r-md: 8px;
  --ck-r-lg: 12px;
  --ck-r-xl: 16px;
  --ck-r-pill: 9999px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT — the warm cream editorial canvas
   ═══════════════════════════════════════════════════════════ */
:root,
:root[data-theme='light'] {
  --ck-canvas: #f7f7f4;
  --ck-canvas-soft: #fafaf7;
  --ck-surface: #ffffff;
  --ck-surface-strong: #e6e5e0;
  --ck-surface-sunken: #f2f1ec;

  --ck-ink: #26251e;
  --ck-body-text: #5a5852;
  --ck-muted: #807d72;
  --ck-muted-soft: #a09c92;

  --ck-hairline: #e6e5e0;
  --ck-hairline-strong: #cfcdc4;

  /* The blue lining. Desaturated enough to stay a hairline, not a highlight. */
  --ck-line-blue: #d3e0f0;
  --ck-line-blue-strong: #b4cbe6;
  --ck-line-blue-glow: rgba(159, 187, 224, 0.28);

  --ck-focus-ring: rgba(159, 187, 224, 0.55);
  --ck-overlay: rgba(38, 37, 30, 0.42);

  /* ── Map the app's own tokens onto the palette ── */
  --color-text: var(--ck-ink);
  --color-text-muted: var(--ck-muted);
  --color-text-dim: var(--ck-muted-soft);
  --color-text-secondary: var(--ck-body-text);
  --color-text-tertiary: var(--ck-body-text);
  --color-text-table: var(--ck-ink);
  --color-text-inactive: var(--ck-muted-soft);
  --color-link-blue: #3a6ea8;

  --color-orange: var(--ck-orange);
  --color-red: var(--ck-error);
  --color-red-dark: #a8213f;
  --color-red-bright: var(--ck-error);
  --color-yellow: #b5730a;
  --color-blue: #3a6ea8;
  --color-blue-dark: #2b5480;
  --color-green: var(--ck-success);
  --color-purple: #6b4fa8;
  --color-accent-red: var(--ck-error);
  --color-accent-blue: #3a6ea8;

  /* Graha colours, darkened for a cream ground. The dark-theme originals
     were tuned against navy and several of them vanish on cream. */
  --planet-sun: #d2521f;
  --planet-moon: #2f7fae;
  --planet-mars: #c62828;
  --planet-mercury: #0f7d5c;
  --planet-jupiter: #b5730a;
  --planet-venus: #c2185b;
  --planet-saturn: #5348d6;
  --planet-rahu: #5f636e;
  --planet-ketu: #8c2f47;
  --planet-ascendant: #96693c;

  --planet-sun-sec: #f7e2d7;
  --planet-moon-sec: #dceaf3;
  --planet-mars-sec: #f7dcdc;
  --planet-mercury-sec: #d5ece4;
  --planet-jupiter-sec: #f5e7cd;
  --planet-venus-sec: #f7dbe7;
  --planet-saturn-sec: #e0ddf7;
  --planet-rahu-sec: #e3e4e7;
  --planet-ketu-sec: #efd9df;
  --planet-ascendant-sec: #f0e5d8;

  --glass-border: var(--ck-line-blue);
  --glass-shadow: none;
  --gm-bg: var(--ck-surface);
  --gm-highlight: transparent;
  --gm-shadow: none;

  --gradient-avatar: linear-gradient(147.77deg, #f54e00 19.03%, #f5762d 82.62%);
  --gradient-cta: var(--ck-orange);
}

/* ═══════════════════════════════════════════════════════════
   DARK — the same ink hue taken to the floor.
   Not documented by the source system, so it is derived: warm near-black
   canvas, a lifted card surface, warm off-white ink. Same hairline logic,
   same scarce orange.
   ═══════════════════════════════════════════════════════════ */
:root[data-theme='dark'] {
  --ck-canvas: #1a1a17;
  --ck-canvas-soft: #201f1c;
  --ck-surface: #232320;
  --ck-surface-strong: #33322d;
  --ck-surface-sunken: #1e1e1a;

  --ck-ink: #f4f3ee;
  --ck-body-text: #c3c1b8;
  --ck-muted: #948f83;
  --ck-muted-soft: #6f6b61;

  --ck-hairline: #35342e;
  --ck-hairline-strong: #46443d;

  --ck-line-blue: #35455c;
  --ck-line-blue-strong: #4a5f7d;
  --ck-line-blue-glow: rgba(159, 187, 224, 0.16);

  --ck-focus-ring: rgba(159, 187, 224, 0.45);
  --ck-overlay: rgba(10, 10, 8, 0.6);

  --color-text: var(--ck-ink);
  --color-text-muted: var(--ck-muted);
  --color-text-dim: var(--ck-muted-soft);
  --color-text-secondary: var(--ck-body-text);
  --color-text-tertiary: var(--ck-body-text);
  --color-text-table: var(--ck-ink);
  --color-text-inactive: var(--ck-muted-soft);
  --color-link-blue: #9fbbe0;

  --color-orange: var(--ck-orange);
  --color-red: #e8557a;
  --color-red-dark: #cf2d56;
  --color-red-bright: #e8557a;
  --color-yellow: #e0a53c;
  --color-blue: #9fbbe0;
  --color-blue-dark: #6d8fbc;
  --color-green: #4cb894;
  --color-purple: #b39ae0;
  --color-accent-red: #e8557a;
  --color-accent-blue: #9fbbe0;

  /* The original graha palette already reads well on a dark ground. */
  --planet-sun: #E85D2A;
  --planet-moon: #7fd4ec;
  --planet-mars: #ff4d4d;
  --planet-mercury: #23c993;
  --planet-jupiter: #F59E0B;
  --planet-venus: #EC4899;
  --planet-saturn: #8f88ff;
  --planet-rahu: #9aa0ad;
  --planet-ketu: #cc6d86;
  --planet-ascendant: #D9B38C;

  --planet-sun-sec: #4a2c1c;
  --planet-moon-sec: #1f3b45;
  --planet-mars-sec: #4a2020;
  --planet-mercury-sec: #143b30;
  --planet-jupiter-sec: #43330f;
  --planet-venus-sec: #451c30;
  --planet-saturn-sec: #2b2952;
  --planet-rahu-sec: #2e3035;
  --planet-ketu-sec: #43222b;
  --planet-ascendant-sec: #413425;

  --glass-border: var(--ck-line-blue);
  --glass-shadow: none;
  --gm-bg: var(--ck-surface);
  --gm-highlight: transparent;
  --gm-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   Shared structural tokens
   ═══════════════════════════════════════════════════════════ */
:root {
  --card-radius: var(--ck-r-lg);
  --standard-radius: var(--ck-r-md);
  --control-radius: var(--ck-r-md);
  --pill-radius: var(--ck-r-pill);
  --card-heading-icon-radius: var(--ck-r-sm);

  --font-heading: var(--ck-sans);
  --font-body: var(--ck-sans);
  --font-label: var(--ck-sans);
  --font-display: var(--ck-sans);
  --font-display-legacy: var(--ck-sans);
  --font-mono: var(--ck-mono);

  --standard-border: 1px solid var(--ck-line-blue);
  --standard-border-muted: 1px solid var(--ck-hairline);
  --card-heading-icon-bg: var(--ck-surface-strong);
}

/* ═══════════════════════════════════════════════════════════
   Canvas
   ═══════════════════════════════════════════════════════════ */
body {
  /* The source system is emphatic that depth comes from hairlines, not
     imagery or shadow, so the cosmic backdrop is retired in both themes. */
  background-image: none;
  background-color: var(--ck-canvas);
  color: var(--ck-ink);
  font-family: var(--ck-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The distortion filter existed to sell the glass. Flat surfaces don't need it. */
.gm-filters { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   Surfaces — glass becomes hairline
   ═══════════════════════════════════════════════════════════ */
.gm-container {
  background: var(--ck-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--ck-line-blue);
}

.gm-container::before,
.gm-container::after {
  display: none !important;
}

/* Cards carry the blue lining a touch stronger — it is the one place the
   house style departs from the source system's neutral hairline. */
.ck-card,
.ck-card.gm-container {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-blue);
  border-radius: var(--ck-r-lg);
  box-shadow: none;
}

.ck-pill,
.ck-pill.gm-container {
  background: var(--ck-surface-strong);
  border: 1px solid var(--ck-line-blue);
  color: var(--ck-ink);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   Typography — display stays at 400, tracked negative
   ═══════════════════════════════════════════════════════════ */
h1, h2, h3,
.ck-heading-title,
.clients-heading,
.lg-title {
  font-family: var(--ck-sans);
  font-weight: 400;
  letter-spacing: var(--ck-track-md);
  color: var(--ck-ink);
}

h1, .lg-title { letter-spacing: var(--ck-track-lg); }

h4, h5, h6,
.ck-heading-title {
  font-weight: 600;
  letter-spacing: 0;
}

.client-field-label,
.mlp-geo-label,
.ct-thead th,
.grc-table thead th {
  font-family: var(--ck-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--ck-muted);
}

/* Numbers are data: degrees, coordinates, times and chart tables all read
   in mono so columns align and glyphs stay unambiguous. */
.mlp-geo-value,
.grc-table td,
.ct-cell--dob,
.ct-cell--phone,
.ck-client-detail {
  font-family: var(--ck-mono);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   Buttons — one brand voltage, used scarcely
   ═══════════════════════════════════════════════════════════ */
.ck-btn--hero,
.ck-btn--hero.gm-container {
  background: var(--ck-orange);
  border: 1px solid var(--ck-orange);
  border-radius: var(--ck-r-md);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ck-btn--hero button,
.ck-btn--hero > button i,
.ck-btn--hero button i {
  color: var(--ck-on-primary);
  font-family: var(--ck-sans);
  font-weight: 500;
  letter-spacing: 0;
}

.ck-btn--hero:hover { background: var(--ck-orange-active); border-color: var(--ck-orange-active); }
.ck-btn--hero:active { background: var(--ck-orange-active); }

.ck-btn,
.ck-btn.gm-container {
  background: var(--ck-surface);
  border: 1px solid var(--ck-hairline-strong);
  border-radius: var(--ck-r-md);
  color: var(--ck-ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 500;
}

.ck-btn button,
.ck-btn button i { color: var(--ck-ink); }
.ck-btn:hover { border-color: var(--ck-line-blue-strong); }

.lg-btn {
  background: var(--ck-orange);
  border: 1px solid var(--ck-orange);
  border-radius: var(--ck-r-md);
  color: var(--ck-on-primary);
  font-family: var(--ck-sans);
  font-weight: 500;
  box-shadow: none;
}
.lg-btn:hover { background: var(--ck-orange-active); border-color: var(--ck-orange-active); }

/* ═══════════════════════════════════════════════════════════
   Inputs
   ═══════════════════════════════════════════════════════════ */
.ck-input,
.ck-input.gm-container,
.mlp-box-input,
.lg-input-wrap {
  background: var(--ck-surface);
  border: 1px solid var(--ck-hairline-strong);
  border-radius: var(--ck-r-md);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ck-input:focus-within,
.mlp-box-input:focus-within,
.lg-input-wrap:focus-within {
  border-color: var(--ck-line-blue-strong);
  box-shadow: 0 0 0 3px var(--ck-focus-ring);
}

input, select, textarea {
  color: var(--ck-ink);
  font-family: var(--ck-sans);
  background: transparent;
}

input::placeholder, textarea::placeholder { color: var(--ck-muted-soft); }
select option { background: var(--ck-surface); color: var(--ck-ink); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ck-ink) !important;
  caret-color: var(--ck-ink) !important;
}

/* The date picker glyph was inverted for a dark ground; only invert on dark. */
input[type='date']::-webkit-calendar-picker-indicator,
input[type='week']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator { filter: none; }

:root[data-theme='dark'] input[type='date']::-webkit-calendar-picker-indicator,
:root[data-theme='dark'] input[type='week']::-webkit-calendar-picker-indicator,
:root[data-theme='dark'] input[type='month']::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ═══════════════════════════════════════════════════════════
   Chrome — navbar, sidebar, headers
   ═══════════════════════════════════════════════════════════ */
.top-navbar,
.top-navbar.gm-container {
  background: var(--ck-canvas);
  border: none;
  border-bottom: 1px solid var(--ck-hairline);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app-sidebar,
.app-sidebar.gm-container {
  background: var(--ck-canvas);
  border: none;
  border-right: 1px solid var(--ck-hairline);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.client-header {
  background: var(--ck-canvas);
  border-bottom: 1px solid var(--ck-hairline);
}

.nav-pill,
.navbar-search,
.navbar-search.gm-container {
  background: var(--ck-surface);
  border: 1px solid var(--ck-hairline-strong);
  border-radius: var(--ck-r-md);
  color: var(--ck-body-text);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-pill:hover { border-color: var(--ck-line-blue-strong); }

.navbar-avatar,
.ck-profile-avatar,
.mobile-profile-trigger,
.client-avatar,
.ck-client-avatar {
  background: var(--ck-orange);
  color: var(--ck-on-primary);
  font-family: var(--ck-sans);
  font-weight: 600;
  border: none;
  box-shadow: none;
}

.sidebar-link {
  color: var(--ck-body-text);
  font-family: var(--ck-sans);
  font-weight: 500;
  border-radius: var(--ck-r-sm);
}
.sidebar-link:hover { background: var(--ck-surface-sunken); color: var(--ck-ink); }
.sidebar-link.active {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-blue);
  color: var(--ck-ink);
  font-weight: 600;
}

.sidebar-group-title {
  color: var(--ck-muted);
  font-family: var(--ck-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
}

/* The icon set was drawn for a navy ground and its mid-tones disappear on
   cream. Rendering each glyph as a flat silhouette — collapse to black, then
   invert for dark — gives a predictable result whatever colours the source
   PNG happens to use, and suits the monochrome editorial voice. */
.sidebar-link img,
.navbar-logo ~ img {
  filter: brightness(0) saturate(100%);
  opacity: 0.6;
}
.sidebar-link:hover img { opacity: 0.85; }
.sidebar-link.active img { opacity: 1; }

:root[data-theme='dark'] .sidebar-link img {
  filter: brightness(0) saturate(100%) invert(1);
  opacity: 0.65;
}
:root[data-theme='dark'] .sidebar-link:hover img { opacity: 0.9; }
:root[data-theme='dark'] .sidebar-link.active img { opacity: 1; }

/* Card-heading glyphs get the same treatment so they sit on the tinted tile. */
.ck-heading-icon img { filter: brightness(0) saturate(100%); opacity: 0.75; }
:root[data-theme='dark'] .ck-heading-icon img { filter: brightness(0) saturate(100%) invert(1); opacity: 0.8; }

/* The wordmark is brand art and stays as drawn; it only needs lifting off
   the dark canvas. */
:root[data-theme='dark'] .navbar-logo,
:root[data-theme='dark'] .lg-logo { filter: brightness(1.08); }

.sidebar-overlay { background: var(--ck-overlay); }

/* ═══════════════════════════════════════════════════════════
   Dropdowns
   ═══════════════════════════════════════════════════════════ */
.ck-dropdown-menu {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-blue);
  border-radius: var(--ck-r-lg);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ck-ink);
}
.ck-dropdown-item { color: var(--ck-body-text); font-family: var(--ck-sans); }
.ck-dropdown-item:hover { background: var(--ck-surface-sunken); color: var(--ck-ink); }
.ck-dropdown-item--active { color: var(--ck-ink); font-weight: 600; }
.ck-dropdown-item--logout { color: var(--ck-error); }
.ck-dropdown-divider { background: var(--ck-hairline); }
.ck-profile-name { color: var(--ck-ink); }
.ck-profile-email { color: var(--ck-muted); }

.client-context-menu {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-blue);
  border-radius: var(--ck-r-md);
  box-shadow: none;
}
.client-context-item { color: var(--ck-body-text); }
.client-context-item--delete { color: var(--ck-error); }
.client-context-divider { background: var(--ck-hairline); }

/* ═══════════════════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════════════════ */
.ct-row,
.ct-row.gm-container {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-blue);
  border-radius: var(--ck-r-lg);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ct-row:hover { border-color: var(--ck-line-blue-strong); }
.ct-cell { color: var(--ck-body-text); }
.ct-name { color: var(--ck-ink); font-weight: 600; }
.ct-thead th { color: var(--ck-muted); }

.grc-table thead th { color: var(--ck-muted); border-bottom: 1px solid var(--ck-hairline); }
.grc-table td { color: var(--ck-ink); border-bottom: 1px solid var(--ck-hairline-soft, var(--ck-hairline)); }
.grc-table tr:last-child td { border-bottom: none; }

.divider, hr.divider { background: var(--ck-hairline); border: none; }

/* ═══════════════════════════════════════════════════════════
   Login
   ═══════════════════════════════════════════════════════════ */
.page-center { background: var(--ck-canvas); }

.lg-card,
.lg-card.gm-container {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-blue);
  border-radius: var(--ck-r-xl);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lg-accent { background: var(--ck-orange); }
.lg-icon-tile { background: var(--ck-surface-sunken); border: 1px solid var(--ck-hairline); box-shadow: none; }
.lg-title { color: var(--ck-ink); font-weight: 400; }
.lg-subtitle, .lg-checkbox-label, .lg-signup { color: var(--ck-muted); }
.lg-link, .lg-signup a { color: var(--ck-orange); }
.lg-divider { background: var(--ck-hairline); }
.lg-input { color: var(--ck-ink); }
.lg-input-icon, .lg-password-toggle { color: var(--ck-muted); }

/* ═══════════════════════════════════════════════════════════
   Headings & badges
   ═══════════════════════════════════════════════════════════ */
.ck-heading-icon {
  background: var(--ck-surface-strong);
  color: var(--ck-ink);
  border-radius: var(--ck-r-sm);
  box-shadow: none;
}
.ck-heading-icon--red { background: var(--ck-surface-strong); color: var(--ck-orange); }
.ck-heading-title { color: var(--ck-ink); }

.clients-total,
.badge-pill {
  background: var(--ck-surface-strong);
  color: var(--ck-ink);
  border-radius: var(--ck-r-pill);
  font-family: var(--ck-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.88px;
  text-transform: uppercase;
}

.required { color: var(--ck-orange); }

.client-gender-btn,
.client-gender-btn.gm-container {
  background: var(--ck-surface);
  border: 1px solid var(--ck-hairline-strong);
  border-radius: var(--ck-r-md);
  color: var(--ck-body-text);
  box-shadow: none;
  backdrop-filter: none;
}
.client-gender-btn:has(input:checked) {
  border-color: var(--ck-orange);
  color: var(--ck-ink);
  font-weight: 600;
}

.ck-lang-btn { background: transparent; border: 1px solid var(--ck-hairline-strong); color: var(--ck-body-text); border-radius: var(--ck-r-sm); }
.ck-lang-btn--active { background: var(--ck-ink); border-color: var(--ck-ink); color: var(--ck-canvas); }

.icon-btn, .navbar-sidebar-toggle, .client-row-menu {
  background: transparent;
  border: none;
  color: var(--ck-body-text);
  box-shadow: none;
}
.icon-btn:hover, .client-row-menu:hover { color: var(--ck-ink); }

/* ═══════════════════════════════════════════════════════════
   Runtime additions (ck-runtime.css) re-pointed at the theme
   ═══════════════════════════════════════════════════════════ */
.ckx-suggest {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-blue);
  border-radius: var(--ck-r-lg);
  box-shadow: 0 8px 24px var(--ck-line-blue-glow);
}
.ckx-suggest-item:hover, .ckx-suggest-item:focus-visible { background: var(--ck-surface-sunken); }
.ckx-suggest-name { color: var(--ck-ink); }
.ckx-suggest-meta, .ckx-suggest-empty { color: var(--ck-muted); }
.ckx-empty { color: var(--ck-muted); }

.ckx-notice { border-radius: var(--ck-r-md); font-family: var(--ck-sans); }
.ckx-notice[data-tone='error'] {
  color: var(--ck-error);
  background: color-mix(in srgb, var(--ck-error) 8%, transparent);
  border-color: color-mix(in srgb, var(--ck-error) 30%, transparent);
}
.ckx-notice[data-tone='success'] {
  color: var(--ck-success);
  background: color-mix(in srgb, var(--ck-success) 8%, transparent);
  border-color: color-mix(in srgb, var(--ck-success) 30%, transparent);
}

/* ═══════════════════════════════════════════════════════════
   Theme toggle (injected by ck-runtime.js)
   ═══════════════════════════════════════════════════════════ */
.ckx-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--ck-surface);
  border: 1px solid var(--ck-hairline-strong);
  border-radius: var(--ck-r-md);
  color: var(--ck-body-text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.ckx-theme-toggle:hover { border-color: var(--ck-line-blue-strong); color: var(--ck-ink); }
.ckx-theme-toggle .bi { display: block; }

/* In the mobile profile menu it sits as a full-width row instead. */
.ck-dropdown-menu .ckx-theme-toggle {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  height: auto;
  padding: 9px 12px;
  border: none;
  background: transparent;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   Timeline pastels — scoped to stage/progress indicators only,
   never used as system action colours.
   ═══════════════════════════════════════════════════════════ */
.ckx-stage {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ck-r-pill);
  padding: 4px 10px;
  font-family: var(--ck-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: #26251e;
}
.ckx-stage--thinking { background: var(--ck-tl-thinking); }
.ckx-stage--grep { background: var(--ck-tl-grep); }
.ckx-stage--read { background: var(--ck-tl-read); }
.ckx-stage--edit { background: var(--ck-tl-edit); }
.ckx-stage--done { background: var(--ck-tl-done); color: #ffffff; }

/* ═══════════════════════════════════════════════════════════
   Scrollbars
   ═══════════════════════════════════════════════════════════ */
* { scrollbar-color: var(--ck-hairline-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ck-hairline-strong); border-radius: var(--ck-r-pill); border: 3px solid var(--ck-canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--ck-muted-soft); }


/* ═══════════════════════════════════════════════════════════
   Stragglers — surfaces that carried literal colours rather than tokens
   ═══════════════════════════════════════════════════════════ */
.ck-client-sep { color: var(--ck-hairline-strong); }

.pagination-info { color: var(--ck-muted); font-weight: 400; }

.page-btn {
  background: var(--ck-surface);
  border: 1px solid var(--ck-hairline-strong);
  border-radius: var(--ck-r-md);
  color: var(--ck-body-text);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 500;
}
.page-btn:hover:not(:disabled) { border-color: var(--ck-line-blue-strong); color: var(--ck-ink); }

/* The current page inverts to ink rather than taking a colour — the source
   system signals "selected" by inversion, keeping orange for actions only. */
.page-btn.active {
  background: var(--ck-ink);
  border-color: var(--ck-ink);
  color: var(--ck-canvas);
  box-shadow: none;
}

.clients-total { border: 1px solid var(--ck-hairline); }

/* ═══════════════════════════════════════════════════════════
   Literal-white text, re-pointed

   These rules in styles.css set `color: white` directly rather than through a
   token, so they survived the token remap and rendered white-on-white. Listed
   explicitly rather than swept with a blanket rule, so each stays legible in
   both themes and nothing is caught that shouldn't be.
   ═══════════════════════════════════════════════════════════ */
.navbar-brand small,
.dd-upload-hint,
.ad-upload-hint,
.ffr-subtitle { color: var(--ck-muted); }

.ffr-title,
.gc-dasha-table td,
.client-context-item { color: var(--ck-ink); }

.gc-dasha-table th { color: var(--ck-muted); }

.gc-ctrl-btn,
.gc-date-input {
  background: var(--ck-surface);
  border: 1px solid var(--ck-hairline-strong);
  border-radius: var(--ck-r-md);
  color: var(--ck-ink);
  box-shadow: none;
}
.gc-ctrl-btn:hover { border-color: var(--ck-line-blue-strong); }

.navbar-sidebar-toggle { color: var(--ck-body-text); }

/* Chart axis labels sit on the card surface, not on a bar. */
.sbg-y-axis { color: var(--ck-muted); font-family: var(--ck-mono); }
.sbg-bar-label { color: var(--ck-ink); font-family: var(--ck-mono); }

/* Labels that sit *on* a filled bar or badge keep white — the fill behind
   them is a saturated colour in both themes. */
.lg-checkbox:checked::after,
.cvp-tier-badge { color: #ffffff; }

/* The separator is structural, not text: hairline weight, not body weight. */
.ck-client-sep { color: var(--ck-muted-soft); opacity: 0.6; }

/* ═══════════════════════════════════════════════════════════
   Relationship badges (five-fold)

   A diverging scale: great friend → friend → neutral → enemy → great enemy.
   The source system reserves its pastel set for agent-timeline stages, so
   this scale is built from the documented semantic pair instead, varying
   tint strength to carry the two degrees on each side.
   ═══════════════════════════════════════════════════════════ */
.ffr-rel-badge {
  border-radius: var(--ck-r-pill);
  font-family: var(--ck-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.ffr-badge--gfriend {
  background: color-mix(in srgb, var(--ck-success) 16%, transparent);
  border-color: color-mix(in srgb, var(--ck-success) 34%, transparent);
  color: var(--ck-success);
}
.ffr-badge--friend {
  background: color-mix(in srgb, var(--ck-success) 8%, transparent);
  border-color: color-mix(in srgb, var(--ck-success) 20%, transparent);
  color: var(--ck-success);
}
.ffr-badge--neutral {
  background: var(--ck-surface-strong);
  border-color: var(--ck-hairline-strong);
  color: var(--ck-muted);
}
.ffr-badge--enemy {
  background: color-mix(in srgb, var(--ck-error) 8%, transparent);
  border-color: color-mix(in srgb, var(--ck-error) 20%, transparent);
  color: var(--ck-error);
}
.ffr-badge--genemy {
  background: color-mix(in srgb, var(--ck-error) 16%, transparent);
  border-color: color-mix(in srgb, var(--ck-error) 34%, transparent);
  color: var(--ck-error);
}

/* ═══════════════════════════════════════════════════════════
   Chart SVGs

   The kundli, gochar and melapak charts were drawn against a navy ground and
   paint their structural parts — zodiac ring labels, tick marks, the
   ascendant ring artwork — in literal white. As a CSS property, `fill`
   overrides the presentation attribute, so pointing those at currentColor
   lets the whole chart follow the theme without touching the drawing code.

   Graha glyphs set their fill from the palette tokens and are untouched by
   this, so they keep their own identity colours in both themes.
   ═══════════════════════════════════════════════════════════ */
svg [fill='white'],
svg [fill='#FFFFFF'],
svg [fill='#ffffff'],
svg [fill='#FEFEFD'],
svg [fill='#FEFCFC'] { fill: currentColor; }

svg [stroke='white'],
svg [stroke='#FFFFFF'],
svg [stroke='#ffffff'] { stroke: currentColor; }

/* Clip paths ignore fill, but keep them out of the rule for clarity. */
clipPath [fill='white'] { fill: #ffffff; }