@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* --- Source: tokens.css --- */
/* =============================================================
   ikmal — Colors & Type
   Dark-first design system. Light mode supported via [data-theme="light"]
   ============================================================= */

/* ---------- Fonts (Google Fonts CDN — swap to local woff2 in /fonts for prod) ---------- */


:root {
  /* ============================================================
     COLOR SCALES
     ============================================================ */

  /* Violet — brand accent (the Obsidian purple) */
  --violet-50: #f1eefb;
  --violet-100: #dad2f4;
  --violet-200: #bfb1ec;
  --violet-300: #a89be8;
  --violet-400: #8e80df;
  --violet-500: #7b6cd9; /* primary accent */
  --violet-600: #6253c0;
  --violet-700: #4b3f9c;
  --violet-800: #352c72;
  --violet-900: #1f1a45;

  /* Slate — cool neutrals for dark mode */
  --slate-0: #15141a; /* deepest — popover bg */
  --slate-1: #1e1e22; /* surface 0 (canvas) */
  --slate-2: #25252b; /* surface 1 (card) */
  --slate-3: #2d2d34; /* surface 2 (hover) */
  --slate-4: #3a3a42; /* border-1 */
  --slate-5: #4f4f58; /* border-2 */
  --slate-6: #76767f; /* fg-4 (most muted) */
  --slate-7: #9c9ca4; /* fg-3 */
  --slate-8: #c5c5cb; /* fg-2 */
  --slate-9: #e8e8ec; /* fg-1 (primary text) */

  /* Cream — warm neutrals for light mode */
  --cream-0: #fffefb; /* popover bg */
  --cream-1: #f7f5f0; /* surface 0 (canvas) */
  --cream-2: #efebe0; /* surface 1 (card) */
  --cream-3: #e5e0d2; /* surface 2 (hover) */
  --cream-4: #d6cfbc; /* border-1 */
  --cream-5: #b8af96; /* border-2 */
  --cream-6: #8a8472; /* fg-4 */
  --cream-7: #5f5b4f; /* fg-3 */
  --cream-8: #3a372f; /* fg-2 */
  --cream-9: #1c1b17; /* fg-1 */

  /* Semantic — notebook colors (desaturated, never alarming) */
  --amber-500: #e0a458; /* due-soon */
  --amber-50: #faf1e2;
  --terracotta-500: #d67560; /* overdue */
  --terracotta-50: #f8e6e0;
  --sage-500: #6fa37c; /* completed */
  --sage-50: #e4f0e5;
  --steel-500: #6b8aaf; /* informational */
  --steel-50: #e2ebf3;

  /* ============================================================
     SEMANTIC TOKENS — DARK (default)
     ============================================================ */
  --bg-0: var(--slate-1);
  --bg-1: var(--slate-2);
  --bg-2: var(--slate-3);
  --bg-pop: var(--slate-0);

  --fg-1: var(--slate-9);
  --fg-2: var(--slate-8);
  --fg-3: var(--slate-7);
  --fg-4: var(--slate-6);

  --border-1: var(--slate-4);
  --border-2: var(--slate-5);

  --accent: var(--violet-500);
  --accent-hover: var(--violet-400);
  --accent-press: var(--violet-600);
  --accent-soft: rgba(123, 108, 217, 0.14);
  --accent-fg: #ffffff;

  --due-soon: var(--amber-500);
  --due-soon-soft: rgba(224, 164, 88, 0.16);
  --overdue: var(--terracotta-500);
  --overdue-soft: rgba(214, 117, 96, 0.16);
  --completed: var(--sage-500);
  --completed-soft: rgba(111, 163, 124, 0.16);
  --info: var(--steel-500);

  /* ============================================================
     RADII
     ============================================================ */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-pill: 999px;

  /* ============================================================
     SPACING (4px base grid)
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ============================================================
     SHADOWS — floating UI only
     ============================================================ */
  --shadow-pop: 0 8px 24px -4px rgba(20, 18, 38, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-drag: 0 16px 40px -8px rgba(20, 18, 38, 0.7), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --shadow-focus: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-default: cubic-bezier(0.2, 0, 0, 1);
  /* Motion */
  --dur-press: 80ms;
  --dur-fast: 160ms;
  --dur-default: 240ms;
  --dur-modal-in: 240ms;
  --dur-modal-out: 320ms;
  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "IBM Plex Serif", "Iowan Old Style", "Charter", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============================================================
     TYPE — semantic scale
     ============================================================ */
  --t-display-size: 56px; /* marketing hero */
  --t-display-leading: 1.02;
  --t-display-tracking: -0.025em;
  --t-display-weight: 700;

  --t-h1-size: 32px;
  --t-h1-leading: 1.12;
  --t-h1-tracking: -0.02em;
  --t-h1-weight: 700;

  --t-h2-size: 22px;
  --t-h2-leading: 1.2;
  --t-h2-tracking: -0.015em;
  --t-h2-weight: 600;

  --t-h3-size: 17px;
  --t-h3-leading: 1.3;
  --t-h3-tracking: -0.01em;
  --t-h3-weight: 600;

  --t-overline-size: 11px;
  --t-overline-leading: 1.2;
  --t-overline-tracking: 0.08em;
  --t-overline-weight: 600;

  --t-body-size: 15px; /* standalone app */
  --t-body-leading: 1.5;
  --t-body-weight: 400;

  --t-body-compact-size: 14px; /* plugin pane */
  --t-body-compact-leading: 1.45;

  --t-caption-size: 13px;
  --t-caption-leading: 1.4;

  --t-meta-size: 12px; /* pills, metadata */
  --t-meta-leading: 1.3;
  --t-meta-weight: 500;
  --t-meta-tracking: 0.01em;

  --t-mono-size: 12px; /* metadata mono, code */
  --t-mono-leading: 1.4;
  --t-mono-weight: 500;
}

/* ============================================================
   LIGHT THEME OVERRIDE
   ============================================================ */
[data-theme="light"] {
  --bg-0: var(--cream-1);
  --bg-1: var(--cream-2);
  --bg-2: var(--cream-3);
  --bg-pop: var(--cream-0);

  --fg-1: var(--cream-9);
  --fg-2: var(--cream-8);
  --fg-3: var(--cream-7);
  --fg-4: var(--cream-6);

  --border-1: var(--cream-4);
  --border-2: var(--cream-5);

  --accent: var(--violet-600); /* slightly darker for AA on cream */
  --accent-hover: var(--violet-500);
  --accent-press: var(--violet-700);
  --accent-soft: rgba(98, 83, 192, 0.1);
  --accent-fg: #ffffff;
  --violet-300: var(--violet-600); /* overlines/labels: readable accent on cream */

  --due-soon-soft: rgba(224, 164, 88, 0.22);
  --overdue-soft: rgba(214, 117, 96, 0.2);
  --completed-soft: rgba(111, 163, 124, 0.2);

  --shadow-pop: 0 8px 24px -4px rgba(48, 38, 18, 0.16), 0 0 0 1px rgba(48, 38, 18, 0.04);
  --shadow-drag: 0 16px 40px -8px rgba(48, 38, 18, 0.24), 0 0 0 1px rgba(48, 38, 18, 0.06);
  --shadow-focus: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);
}

/* Dark reasserted explicitly (not only the :root default) so theme can be
   overridden at any nesting depth — required for the catalog, where dark and
   light tiles coexist on one page. */
[data-theme="dark"] {
  --bg-0: var(--slate-1);
  --bg-1: var(--slate-2);
  --bg-2: var(--slate-3);
  --bg-pop: var(--slate-0);
  --fg-1: var(--slate-9);
  --fg-2: var(--slate-8);
  --fg-3: var(--slate-7);
  --fg-4: var(--slate-6);
  --border-1: var(--slate-4);
  --border-2: var(--slate-5);
  --accent: var(--violet-500);
  --accent-hover: var(--violet-400);
  --accent-press: var(--violet-600);
  --accent-soft: rgba(123, 108, 217, 0.14);
  --accent-fg: #ffffff;
  --due-soon-soft: rgba(224, 164, 88, 0.16);
  --overdue-soft: rgba(214, 117, 96, 0.16);
  --completed-soft: rgba(111, 163, 124, 0.16);
  --shadow-pop: 0 8px 24px -4px rgba(20, 18, 38, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-drag: 0 16px 40px -8px rgba(20, 18, 38, 0.7), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* ============================================================
   BASE — applied semantically
   ============================================================ */
html,
body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-leading);
  color: var(--fg-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03"; /* Inter alternates */
}

.t-display {
  font-family: var(--font-serif);
  font-size: var(--t-display-size);
  line-height: var(--t-display-leading);
  letter-spacing: var(--t-display-tracking);
  font-weight: var(--t-display-weight);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-leading);
  letter-spacing: var(--t-h1-tracking);
  font-weight: var(--t-h1-weight);
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-leading);
  letter-spacing: var(--t-h2-tracking);
  font-weight: var(--t-h2-weight);
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-leading);
  letter-spacing: var(--t-h3-tracking);
  font-weight: var(--t-h3-weight);
  color: var(--fg-1);
}

.t-overline {
  font-family: var(--font-serif);
  font-size: var(--t-overline-size);
  line-height: var(--t-overline-leading);
  letter-spacing: var(--t-overline-tracking);
  font-weight: var(--t-overline-weight);
  font-style: italic;
  color: var(--fg-3);
  text-transform: uppercase;
}

.t-body {
  font-size: var(--t-body-size);
  line-height: var(--t-body-leading);
  color: var(--fg-1);
}
.t-body-compact {
  font-size: var(--t-body-compact-size);
  line-height: var(--t-body-compact-leading);
  color: var(--fg-1);
}
.t-caption {
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-leading);
  color: var(--fg-3);
}
.t-meta {
  font-family: var(--font-sans);
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-leading);
  letter-spacing: var(--t-meta-tracking);
  font-weight: var(--t-meta-weight);
  color: var(--fg-3);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  line-height: var(--t-mono-leading);
  font-weight: var(--t-mono-weight);
}


/* --- Source: substrate.css --- */
/* ============================================================================
   ikmal — SUBSTRATE
   A relief primitive system layered on top of the glass foundation.

   THESIS — "give the glass a reason to exist."
   Liquid glass floats over a void: a sheet of glass implies something worth
   seeing through, but flat UI has nothing beneath. So here we build the thing
   that was always missing: TERRAIN. One continuous continental surface with
   elevation, hillshade and contour. Regions are plateaus on that surface;
   boundaries are geological features (shelf, rift, slope, contour); and the
   glass becomes a LAKE — water pooled in the low places, magnifying and cooling
   the terrain it sits on. The glass stays. It just earns its transparency.

   Everything below DERIVES from the existing tokens in colors_and_type.css
   (--bg-*, the rgba(20,18,38) shadow tint, the inset-specular edge idea,
   --radius-*, --space-*). Dialects (dialects.css) only re-fill the SLOTS
   defined here; they never redefine the math.
   ============================================================================ */

:root {
  /* ---- MASTER CONTROLS (the panel drives these) -------------------------- */
  --rel-intensity: 0.5;     /* 0..1  global relief strength                   */
  --rel-light-deg: 132;     /* sun azimuth (cartographic NW convention)       */
  --rel-contour-on: 1;      /* 0/1   topographic banding on the Contour terrain */

  /* Light VECTOR — the panel resolves the azimuth into a unit vector so every
     shadow + highlight in the system points the same way. (JS sets these; the
     fallbacks below describe light from the upper-left.) */
  --rel-dx: -0.67;          /* cos(light)  →  shadow throw on x                */
  --rel-dy:  0.74;          /* sin(light)  →  shadow throw on y (screen-down)  */

  /* ---- DERIVED SCALARS — one knob (intensity) fans out to the whole system  */
  --rel-cast:  calc(13px * var(--rel-intensity));   /* shadow throw distance   */
  --rel-blur:  calc(30px * var(--rel-intensity));   /* shadow softness         */
  --rel-lift:  calc(0.14 * var(--rel-intensity));   /* crest highlight alpha   */
  --rel-sink:  calc(0.62 * var(--rel-intensity));   /* basin shadow alpha      */
  --rel-step:  calc(7px  * var(--rel-intensity));   /* contour interval depth  */

  /* Resolved offsets (px). Shadow falls WITH the light vector; the lit crest
     highlight sits OPPOSITE it. */
  --rel-sx: calc(var(--rel-dx) *  var(--rel-cast));
  --rel-sy: calc(var(--rel-dy) *  var(--rel-cast));
  --rel-hx: calc(var(--rel-dx) * -0.6 * var(--rel-cast));
  --rel-hy: calc(var(--rel-dy) * -0.6 * var(--rel-cast));

  /* ---- MATERIAL COLORS — reuse the glass shadow tint, add a sky highlight --
     --rel-shadow is exactly the violet-black the glass shadows already cast
     (rgba(20,18,38)); --rel-glow is the sky/sun fill. Themed below. */
  --rel-shadow: 20, 18, 38;
  --rel-glow: 255, 255, 255;
  --rel-sky:   190, 205, 235;   /* cool ambient skylight on shadowed faces     */

  /* ---- HYPSOMETRIC RAMP — elevation → color (the Monterey filled-relief idea)
     A region declares --rel-z (0=canyon floor … 3=high plateau); its fill is
     interpolated between --rel-low and --rel-high. The DEFAULT ramp is barely
     perceptible slate (it just lifts the glass surfaces apart); PALETTES in
     dialects.css swap --rel-low/--rel-high for dramatic bathymetric range. */
  --rel-low:  var(--bg-0);
  --rel-high: color-mix(in oklab, var(--bg-2), var(--rel-glow-c, #ffffff) 6%);
  --rel-glow-c: #ffffff;

  /* contour line color + spacing on the terrain */
  --rel-contour-col: rgba(var(--rel-glow), 0.05);
  --rel-contour-gap: 26px;
  --rel-contour-origin: 18% 8%;   /* the "seamount" the contours ring         */

  /* ---- EDGE SLOTS — dialects fill THESE, components only read them ----------
     Defaults below = the "Shelf" dialect, so the system is usable even before a
     [data-dialect] is set. */
  --edge-raise:                                          /* a raised terrace   */
    var(--rel-sx) var(--rel-sy) var(--rel-blur) calc(var(--rel-blur) * -0.45) rgba(var(--rel-shadow), var(--rel-sink)),
    inset 0 1px 0 rgba(var(--rel-glow), var(--rel-lift));
  --edge-inset:                                          /* a carved hollow    */
    inset var(--rel-sx) var(--rel-sy) var(--rel-blur) rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.7)),
    inset var(--rel-hx) var(--rel-hy) calc(var(--rel-blur) * 0.5) rgba(var(--rel-glow), calc(var(--rel-lift) * 0.7));
  --edge-fill: transparent;                              /* extra surface tint */

  /* Seam: the boundary BETWEEN two regions. A strip element (.seam) reads its
     background + shadow from these. Default = a shelf: lit crest, shadowed toe. */
  --seam-w: 2px;
  --seam-inset: 0px;     /* >0 bridges the boundary at top & bottom (the isthmus) */
  --seam-radius: 0px;    /* rounds the boundary feature's ends                  */
  --seam-bg: linear-gradient(90deg,
              rgba(var(--rel-glow), var(--rel-lift)),
              rgba(var(--rel-shadow), var(--rel-sink)));
  --seam-shadow:
    var(--rel-sx) 0 var(--rel-blur) calc(var(--rel-blur) * -0.4) rgba(var(--rel-shadow), var(--rel-sink));

  /* Lake: glass-over-terrain. By default just the glass specular edges; the
     "Tide" dialect turns these into a wet shoreline + refraction. */
  --lake-edge:
    inset 0 1px 0 rgba(var(--rel-glow), 0.10),
    inset 0 -1px 0 rgba(var(--rel-glow), 0.05),
    0 8px 24px -6px rgba(var(--rel-shadow), 0.5);
  --lake-fill: color-mix(in oklab, var(--bg-1), transparent 8%);
  --lake-blur: 2px;
}

[data-theme="light"] {
  --rel-shadow: 48, 38, 18;       /* warm sediment shadow (matches glass)      */
  --rel-glow: 255, 255, 255;
  --rel-sky: 150, 170, 205;
  --rel-sink: calc(0.30 * var(--rel-intensity));   /* light scatters more      */
  --rel-lift: calc(0.85 * var(--rel-intensity));
  --rel-contour-col: rgba(var(--rel-shadow), 0.06);
  --rel-glow-c: #ffffff;
}

/* Dark reasserted as an explicit block (not just the :root default) so theme is
   overridable at ANY nesting level — a dark catalog tile renders dark even when
   it sits inside a light page, and vice-versa. */
[data-theme="dark"] {
  --rel-shadow: 20, 18, 38;
  --rel-glow: 255, 255, 255;
  --rel-sky: 190, 205, 235;
  --rel-sink: calc(0.62 * var(--rel-intensity));
  --rel-lift: calc(0.14 * var(--rel-intensity));
  --rel-contour-col: rgba(var(--rel-glow), 0.05);
  --rel-glow-c: #ffffff;
}

/* ============================================================================
   COMPONENTS — read the slots above. These are the only classes the markup uses.
   ============================================================================ */

/* THE TERRAIN — the substrate everything rests on. Two layers:
   (1) a hillshade ramp lit from the live light vector, (2) the base fill.
   NOTE: contour banding is deliberately NOT drawn here. Contour is sub-surface
   bathymetry — it only appears where you can actually see beneath the land:
   through a .lake (refraction) or where the Contour dialect steps the ground
   open. Opaque land stays clean. Opt any surface in with .has-contour. */
.terrain {
  position: relative;
  background:
    linear-gradient(calc(var(--rel-light-deg) * 1deg),
      rgba(var(--rel-glow), calc(var(--rel-lift) * 0.5)),
      transparent 42%,
      rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5))),
    var(--rel-low);
}
/* the bathymetric contour layer, as an opt-in (the Contour dialect applies it
   to .terrain automatically; lakes refract their own copy). */
.has-contour {
  background-image:
    repeating-radial-gradient(circle at var(--rel-contour-origin),
      transparent 0,
      transparent calc(var(--rel-contour-gap) - 1.5px),
      color-mix(in oklab, var(--rel-contour-col), transparent calc((1 - var(--rel-contour-on)) * 100%)) calc(var(--rel-contour-gap) - 1.5px),
      transparent var(--rel-contour-gap)),
    linear-gradient(calc(var(--rel-light-deg) * 1deg),
      rgba(var(--rel-glow), calc(var(--rel-lift) * 0.5)),
      transparent 42%,
      rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)));
}

/* A REGION — a plateau at elevation --rel-z. Fill comes off the hypsometric ramp.
   The continental move: regions sit edge-to-edge (no gutter), so the SEAM does
   the separating, not a gap + a floating card. */
.region {
  --rel-z: 1;
  position: relative;
  background: color-mix(in oklab, var(--rel-low), var(--rel-high) calc(var(--rel-z) / 3 * 100%));
}

/* SEAM — the boundary BETWEEN two regions. The continent stays whole: the seam
   itself has ZERO width, so the two plateaus actually abut (one landmass). The
   boundary *feature* is drawn by ::before as an overlay carved into the junction
   — which means it can be inset from the ends (--seam-inset) so the regions stay
   joined at top & bottom. No gap, no void, no floating sheet. */
.seam {
  position: relative;
  flex: 0 0 0;
  width: 0;
  align-self: stretch;
  z-index: 2;
  overflow: visible;
}
.seam::before {
  content: "";
  position: absolute;
  top: var(--seam-inset);
  bottom: var(--seam-inset);
  left: 50%;
  width: var(--seam-w);
  transform: translateX(-50%);
  background: var(--seam-bg);
  box-shadow: var(--seam-shadow);
  border-radius: var(--seam-radius);
  -webkit-backdrop-filter: blur(var(--seam-blur, 0px));
  backdrop-filter: blur(var(--seam-blur, 0px));
  -webkit-mask-image: var(--seam-mask, none);
  mask-image: var(--seam-mask, none);
  z-index: 2;
  transition: box-shadow var(--dur-default) var(--ease-default),
              top var(--dur-default) var(--ease-default),
              bottom var(--dur-default) var(--ease-default),
              width var(--dur-default) var(--ease-default);
}
.seam.is-horizontal::before {
  top: 50%; bottom: auto; left: var(--seam-inset); right: var(--seam-inset);
  width: auto; height: var(--seam-w);
  transform: translateY(-50%);
}

/* TERRACE — a small surface raised (or carved) out of its region: task rows,
   calendar blocks, the buckets. The relief language applied at the small scale. */
.terrace {
  --rel-z: 2;
  position: relative;
  border-radius: var(--radius-2);
  background: color-mix(in oklab, var(--rel-low), var(--rel-high) calc(var(--rel-z) / 3 * 100%));
  box-shadow: var(--edge-raise);
  transition: box-shadow var(--dur-default) var(--ease-default),
              transform var(--dur-fast) var(--ease-default);
}
.terrace.is-sunk { box-shadow: var(--edge-inset); }

/* SCARP — an interior hairline replacement: a soft relief groove/crest used for
   bucket rules and list dividers. Lighter than a seam. */
.scarp {
  height: 0;
  border: 0;
  position: relative;
  margin: 0;
  box-shadow:
    0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.9)),
    0 calc(var(--rel-step) * -0.5) calc(var(--rel-step)) calc(var(--rel-step) * -0.5) rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)) inset;
  background: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.6)) 12%, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.6)) 88%, transparent);
  height: 1px;
}

/* LAKE — glass, but logical. It pools on the terrain, refracts the contour
   beneath it, and rims with a wet caustic edge. The detail sheet, quick-add,
   popovers and the active calendar block are lakes. */
.lake {
  position: relative;
  isolation: isolate;
  background: var(--lake-fill);
  -webkit-backdrop-filter: blur(var(--lake-blur)) saturate(118%);
  backdrop-filter: blur(var(--lake-blur)) saturate(118%);
  box-shadow: var(--lake-edge);
  transition: box-shadow var(--dur-default) var(--ease-default);
}
/* (Removed: lakes no longer refract contour rings. Drawing contour beneath the
   glass read as a visual artifact rather than depth — the glass already reads
   as glass through its specular edge + blur, so the arcs added noise, not
   logic. The lake's identity lives entirely in --lake-edge / --lake-fill.) */

/* hover life — the terrace catches a little more sun */
.terrace.is-live:hover {
  transform: translateY(-1px);
  box-shadow:
    calc(var(--rel-sx) * 1.4) calc(var(--rel-sy) * 1.4) calc(var(--rel-blur) * 1.3) calc(var(--rel-blur) * -0.4) rgba(var(--rel-shadow), calc(var(--rel-sink) * 1.1)),
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 1.3));
}

@media (prefers-reduced-motion: reduce) {
  .terrain, .region, .terrace, .seam, .lake { transition: none; }
}


/* --- Source: system.css --- */
/* ============================================================================
   CONTINENTAL — System
   Global axes and scales that sit ABOVE components: elevation, density, motion,
   plus the high-contrast theme, focus/a11y, and RTL. Load after substrate.css
   and before components. None of this is per-component — it's the connective
   tissue every component reads.
   ============================================================================ */

:root {
  /* ---- ELEVATION SCALE (z0–z5) -----------------------------------------------
     Formal named relief steps. A surface sets its level with .elev-N (or the
     --elev var) and gets a shadow whose throw + lift scale with both the level
     AND the global --rel-intensity, all pointing along the live light vector.
     z0 = flush with terrain · z5 = floating lake/modal. */
  --elev-0: none;
  --elev-1:
    calc(var(--rel-dx) * 2px)  calc(var(--rel-dy) * 2px)  6px  -2px rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.7)),
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.8));
  --elev-2:
    calc(var(--rel-dx) * 4px)  calc(var(--rel-dy) * 4px)  12px -3px rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.8)),
    inset 0 1px 0 rgba(var(--rel-glow), var(--rel-lift));
  --elev-3:
    calc(var(--rel-dx) * 7px)  calc(var(--rel-dy) * 7px)  20px -5px rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.9)),
    inset 0 1px 0 rgba(var(--rel-glow), var(--rel-lift));
  --elev-4:
    calc(var(--rel-dx) * 12px) calc(var(--rel-dy) * 12px) 34px -8px rgba(var(--rel-shadow), var(--rel-sink)),
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 1.1));
  --elev-5:
    calc(var(--rel-dx) * 20px) calc(var(--rel-dy) * 20px) 60px -12px rgba(var(--rel-shadow), var(--rel-sink)),
    0 4px 12px -4px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 1.2));

  /* ---- DENSITY ---------------------------------------------------------------
     One axis that rescales control geometry + spacing. data-density="compact"
     tightens everything; "comfortable" is the default. */
  --d-scale: 1;                       /* multiplied into control heights/pads   */
  --ctl-h: calc(38px * var(--d-scale));
  --ctl-h-sm: calc(30px * var(--d-scale));
  --ctl-h-lg: calc(46px * var(--d-scale));
  --pad-x: calc(16px * var(--d-scale));
  --row-y: calc(12px * var(--d-scale));
  --stack-gap: calc(var(--space-3) * var(--d-scale));

  /* ---- MOTION ----------------------------------------------------------------
     Named durations/easings so components animate consistently and the
     "living light" can be tuned in one place. */
  --motion-fast: 120ms;
  --motion: 200ms;
  --motion-slow: 360ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --living-speed: 9;                  /* deg/sec for sun drift (JS reads this)   */
}

[data-density="compact"]     { --d-scale: 0.84; --stack-gap: calc(var(--space-2) * 1); }
[data-density="comfortable"] { --d-scale: 1; }
[data-density="spacious"]    { --d-scale: 1.14; }

/* elevation utility classes */
.elev-0 { box-shadow: var(--elev-0); }
.elev-1 { box-shadow: var(--elev-1); }
.elev-2 { box-shadow: var(--elev-2); }
.elev-3 { box-shadow: var(--elev-3); }
.elev-4 { box-shadow: var(--elev-4); }
.elev-5 { box-shadow: var(--elev-5); }

/* ---- FOCUS / A11Y -----------------------------------------------------------
   One visible, palette-aware focus ring for keyboard users everywhere. */
:where(a, button, input, select, textarea, [tabindex], .cnt-menu-item, .cnt-tab, .cnt-list-item):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);
  border-radius: var(--radius-1);
}
.cnt-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cnt-skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-160%);
  padding: 10px 16px; border-radius: var(--radius-2); background: var(--accent); color: var(--accent-fg);
  font: 600 14px/1 var(--font-sans); text-decoration: none; transition: transform var(--motion) var(--ease-out);
}
.cnt-skip-link:focus { transform: translateY(0); }

/* ---- HIGH-CONTRAST THEME ----------------------------------------------------
   An accessibility override layered on either mode: stronger relief, opaque
   surfaces, brighter text, and a 1px structural edge so boundaries never rely
   on shadow alone. Set data-contrast="high" alongside data-theme. */
[data-contrast="high"] {
  --rel-intensity: 0.85;
  --fg-1: var(--slate-9); --fg-2: var(--slate-9); --fg-3: var(--slate-8); --fg-4: var(--slate-7);
  --cnt-hollow: color-mix(in oklab, var(--rel-low), #000 12%);
}
[data-contrast="high"][data-theme="light"] {
  --fg-1: #000; --fg-2: #1a1814; --fg-3: #2c2820; --fg-4: #45402f;
}
[data-contrast="high"] .cnt-card,
[data-contrast="high"] .cnt-btn,
[data-contrast="high"] .cnt-input,
[data-contrast="high"] .cnt-tag,
[data-contrast="high"] .cnt-list-item {
  outline: 1px solid color-mix(in oklab, var(--fg-4), transparent 55%);
  outline-offset: -1px;
}
[data-contrast="high"] .cnt-btn.is-primary { outline-color: var(--accent-press); }

/* ---- REDUCED MOTION ---------------------------------------------------------
   Belt-and-suspenders: kill nonessential motion globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- ENTRANCE MOTION --------------------------------------------------------
   "Rise from the terrain": elements tagged [data-cnt-rise] start sunk + dim and
   lift into place when continental.js adds .is-risen (on scroll-into-view). The
   visible END state is the base style, so no-JS / print / reduced-motion all
   show content normally — we only animate FROM hidden when JS opts in.
   Stagger children with --rise-i (an index) for a cascading reveal. */
@media (prefers-reduced-motion: no-preference) {
  [data-cnt-rise].is-risen { animation: cnt-rise var(--motion-slow) var(--ease-out) backwards; animation-delay: calc(var(--rise-i, 0) * 60ms); }
  [data-cnt-rise]:not(.is-risen) { opacity: 0; }
}
@keyframes cnt-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ---- RTL --------------------------------------------------------------------
   The relief light vector is physical, so it should NOT mirror; but logical
   layout, icon flips, and directional components should. Set dir="rtl". */
[dir="rtl"] .cnt-btn-group .cnt-btn:first-child { border-radius: 0 var(--cnt-radius) var(--cnt-radius) 0; }
[dir="rtl"] .cnt-btn-group .cnt-btn:last-child  { border-radius: var(--cnt-radius) 0 0 var(--cnt-radius); }
[dir="rtl"] .cnt-inputwrap .cnt-input { padding-left: 12px; padding-right: 36px; }
[dir="rtl"] .cnt-inputwrap .cnt-adorn { left: auto; right: 12px; }
[dir="rtl"] .cnt-select { padding-right: 12px; padding-left: 34px; background-position: left 12px center; }
[dir="rtl"] .cnt-switch input:checked + .track .thumb { transform: translateX(-18px); }
[dir="rtl"] .cnt-breadcrumb .sep,
[dir="rtl"] .cnt-chevron { transform: scaleX(-1); }
[dir="rtl"] .cnt-menu-item .cnt-spacer ~ * { margin-left: 0; margin-right: auto; }


/* --- Source: dialects.css --- */
/* ============================================================================
   ikmal — DIALECTS & PALETTES
   Continental shelves come in variety, so the boundary is not one language but
   five. Each dialect ONLY re-fills the slots declared in substrate.css
   (--edge-raise, --seam-*, --lake-*, contour params). Same primitives, five
   accents. Palettes are orthogonal: they swap the hypsometric ramp + accent so
   the same relief can read as slate, seafloor, sediment, or something synthetic.
   ============================================================================ */

/* ───────────────────────── 1 · SHELF ──────────────────────────────────────
   The continental shelf / waterfall lip. One region sits higher and casts a
   soft, DIRECTIONAL graded shadow down onto its lower neighbour. The most
   familiar reading — and the literal heir to the glass drop-shadow. */
[data-dialect="shelf"] {
  --seam-w: 1px;
  --seam-bg: linear-gradient(90deg, rgba(var(--rel-glow), calc(var(--rel-lift) * 1.2)), rgba(var(--rel-shadow), var(--rel-sink)));
  --seam-shadow:
    calc(var(--rel-sx) * 2) 0 calc(var(--rel-blur) * 1.7) calc(var(--rel-blur) * -0.25) rgba(var(--rel-shadow), calc(var(--rel-sink) * 1.05));
  --edge-raise:
    var(--rel-sx) var(--rel-sy) var(--rel-blur) calc(var(--rel-blur) * -0.45) rgba(var(--rel-shadow), var(--rel-sink)),
    inset 0 1px 0 rgba(var(--rel-glow), var(--rel-lift));
}
/* real elevation: the list is the RAISED plateau; the outer rail sits lower and
   lies in its cast shadow — a clear shadow-distance between the two */
[data-dialect="shelf"] .rail {
  box-shadow: inset -16px 0 26px -14px rgba(var(--rel-shadow), calc(var(--rel-sink) * 1.15));
}
[data-dialect="shelf"] .list {
  box-shadow: inset 1px 0 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 1.1));
}

/* ───────────────────────── 2 · RIFT ───────────────────────────────────────
   Silfra — diving between two plates. The surfaces don't step; they pull APART,
   falling into a recessed dark seam with a faint keystone of light at the floor.
   Symmetric, carved, tectonic. Interior dividers become grooves. */
[data-dialect="rift"] {
  /* a fine recessed groove that DISSOLVES into the land at top & bottom (soft
     mask, no hard bridge, no rounded caps) — the "pulling apart" read kept to a
     whisper, never a floating capsule */
  --seam-w: 4px;
  --seam-inset: 0px;
  --seam-radius: 0px;
  --seam-mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  --seam-bg: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.6)) 50%, transparent);
  --seam-shadow:
    inset 0 0 0 1px rgba(var(--rel-glow), calc(var(--rel-lift) * 0.22)),
    0 0 5px rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.35));
  --edge-raise:
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.55)),
    inset 0 -1px 0 rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.28));
}
[data-dialect="rift"] .scarp {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.55)) 18%, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.55)) 82%, transparent);
  box-shadow: 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.45));
}

/* ───────────────────────── 3 · HILLSHADE ──────────────────────────────────
   No line anywhere. Boundaries are slopes — a smooth light→dark ramp lit from
   the sun. The gentlest, most analog reading: regions melt into each other the
   way a hillside meets a valley. */
[data-dialect="hillshade"] {
  /* the INVERSION of cave: the panel junction is a shaded VALLEY. Both panels
     darken toward the shared seam and lighten outward over a long full-panel
     diffusion — so nothing reads as two tones meeting. */
  --seam-w: 1px;
  --seam-bg: transparent;
  --seam-shadow: none;
  --edge-raise: inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.18));
}
[data-dialect="hillshade"] .rail {
  background-image: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.55)));
}
[data-dialect="hillshade"] .list {
  background-image: linear-gradient(90deg, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.55)), transparent 70%);
}
[data-dialect="hillshade"] .terrace {
  background-image: none;
}
[data-dialect="hillshade"] .scarp {
  box-shadow: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.28)) 25%, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.28)) 75%, transparent);
}

/* ───────────────────────── 4 · CONTOUR ────────────────────────────────────
   The Monterey filled-relief map made structural. Elevation is drawn by stacked
   contour lines; a boundary is where the lines BUNCH (steep ground). Terraces
   become little islands ringed by isobaths. */
[data-dialect="contour"] {
  /* calmer terrain (wider interval, lower contrast); steps are now SOFT, faded
     shadows rather than hard isobath lines */
  --rel-contour-gap: 36px;
  --rel-contour-col: rgba(var(--rel-glow), calc(0.03 + var(--rel-lift) * 0.16));
  --seam-w: 14px;
  --seam-bg: repeating-linear-gradient(90deg,
              transparent 0 3px,
              rgba(var(--rel-glow), calc(var(--rel-lift) * 0.4)) 3px 4px,
              transparent 4px 7px,
              rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.35)) 7px 8px);
  --seam-shadow: none;
  /* soft faded elevation steps — the levels of light & dark you liked, without
     the hard 0-blur lines */
  --edge-raise:
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.7)),
    0 2px 6px -2px rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.22)),
    0 7px 14px -6px rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.1));
}
[data-dialect="contour"] .scarp {
  height: 2px;
  background: repeating-linear-gradient(90deg,
              transparent 0 3px,
              rgba(var(--rel-glow), calc(var(--rel-lift) * 0.45)) 3px 3.5px,
              transparent 3.5px 7px,
              rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.3)) 7px 7.5px);
  box-shadow: none;
}
/* Contour is the one dialect that exposes the bathymetry on opaque land — it
   draws the contour rings onto the terrain, reading as a relief map. */
[data-dialect="contour"] .terrain {
  background-image:
    repeating-radial-gradient(circle at var(--rel-contour-origin),
      transparent 0,
      transparent calc(var(--rel-contour-gap) - 1.5px),
      color-mix(in oklab, var(--rel-contour-col), transparent calc((1 - var(--rel-contour-on)) * 100%)) calc(var(--rel-contour-gap) - 1.5px),
      transparent var(--rel-contour-gap)),
    linear-gradient(calc(var(--rel-light-deg) * 1deg),
      rgba(var(--rel-glow), calc(var(--rel-lift) * 0.5)),
      transparent 42%,
      rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)));
}
   caustic line where water laps onto land. .lake elements are pools: they
   refract the contour beneath and glint at the near lip. This is the one that
   answers "why is it glass?" — because there is water here, lying on terrain. */
[data-dialect="tide"] {
  --lake-on: 1;
  --lake-blur: 6px;
  --lake-fill: color-mix(in oklab, var(--rel-high), transparent 24%);
  /* dialed WAY back from the first pass — a calm wet sheen, not a lightbox */
  --lake-edge:
    inset 0 1px 0 rgba(var(--rel-glow), 0.22),
    inset 0 0 0 1px rgba(var(--rel-sky), 0.09),
    inset 0 -12px 18px -12px rgba(var(--rel-sky), 0.12),
    0 10px 26px -10px rgba(var(--rel-shadow), 0.5);
  --seam-w: 2px;
  --seam-bg: linear-gradient(90deg, transparent, rgba(var(--rel-glow), 0.28) 50%, transparent);
  --seam-shadow: 0 0 7px rgba(var(--rel-sky), 0.12), var(--rel-sx) 0 var(--rel-blur) calc(var(--rel-blur) * -0.5) rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.6));
  --edge-raise:
    inset 0 1px 0 rgba(var(--rel-glow), 0.18),
    inset 0 -6px 10px -9px rgba(var(--rel-sky), 0.08),
    0 6px 16px -9px rgba(var(--rel-shadow), var(--rel-sink));
}
[data-dialect="tide"] .scarp {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rel-glow), 0.2) 20%, rgba(var(--rel-glow), 0.2) 80%, transparent);
  box-shadow: 0 1px 4px rgba(var(--rel-sky), 0.1);
}

/* ───────────────────────── 6 · BASIN (inverted cave) ──────────────────────
   Cave turned inside-out: the light source moves to the app's RIM — the
   perimeter catches the sun while the interior settles into shade — and the
   panels are parted by a calm tide line down the middle rather than a glow. */
[data-dialect="basin"] {
  --seam-w: 2px;
  --seam-bg: linear-gradient(90deg, transparent, rgba(var(--rel-sky), 0.16) 50%, transparent);
  --seam-shadow:
    var(--rel-sx) 0 var(--rel-blur) calc(var(--rel-blur) * -0.5) rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.38));
  --edge-raise:
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.5)),
    0 4px 12px -9px rgba(var(--rel-shadow), var(--rel-sink));
}
/* each panel is its own lit basin: light catches ALL FOUR edges and darkens
   toward the panel's own centre */
[data-dialect="basin"] .rail,
[data-dialect="basin"] .list {
  background-image: radial-gradient(125% 130% at 50% 50%, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.7)) 0%, transparent 60%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--rel-sky), calc(0.06 + var(--rel-lift) * 0.45)),
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.7)),
    inset 0 0 36px -8px rgba(var(--rel-sky), calc(0.08 + var(--rel-lift) * 0.6));
}
[data-dialect="basin"] .stage {
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.7);
}
[data-dialect="basin"] .scarp {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rel-sky), 0.16) 30%, rgba(var(--rel-sky), 0.16) 70%, transparent);
}

/* ───────────────────────── 7 · ISLAND CHAIN ───────────────────────────────
   The inversion: glass is no longer the panel, it is the CHANNEL between them.
   Two bright shorelines face a strait of refracting water; the panels are
   opaque islands. The empty space becomes the feature. */
[data-dialect="island"] {
  /* calmed to a quiet strait: soft shorelines, gentle refraction, narrow channel
     — reads right at default intensity, not only at low */
  --seam-w: 14px;
  --seam-blur: 3px;
  --seam-bg:
    linear-gradient(90deg,
      rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.4)),
      rgba(var(--rel-sky), 0.1) 50%,
      rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.4)));
  --seam-shadow:
    inset 3px 0 7px -3px rgba(var(--rel-glow), calc(var(--rel-lift) * 0.55)),
    inset -3px 0 7px -3px rgba(var(--rel-glow), calc(var(--rel-lift) * 0.55)),
    inset 0 0 14px rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.28));
  /* islands carry a soft coastline: faint lit crest, gentle beach to the water */
  --edge-raise:
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.7)),
    0 4px 10px -8px rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.7));
}
/* each island carries a full coastline: a soft light diffuses around ALL sides,
   not only the channel edge */
[data-dialect="island"] .rail,
[data-dialect="island"] .list {
  box-shadow:
    inset 0 0 0 1px rgba(var(--rel-sky), calc(var(--rel-lift) * 0.45)),
    inset 0 0 48px -16px rgba(var(--rel-sky), calc(0.08 + var(--rel-lift) * 0.65));
}
[data-dialect="island"] .scarp {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)) 16%, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)) 84%, transparent);
  box-shadow: 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.7));
}

/* ───────────────────────── 8 · CAVE ───────────────────────────────────────
   A Caribbean cenote: dramatically different surfaces — shadowed cavern and
   sunstruck opening — joined not by a line but by a wide band of diffusing
   sunlight. Maximum contrast, softest possible blend. */
[data-dialect="cave"] {
  /* a cenote, calmed further: light POOLS at the shared edge and washes
     symmetrically onto both panels — a soft pathway down the middle. */
  --seam-w: 30px;
  --seam-bg: linear-gradient(90deg, transparent, rgba(var(--rel-sky), calc(0.1 + var(--rel-lift) * 0.45)) 50%, transparent);
  --seam-shadow: none;
  --edge-raise:
    inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.5)),
    0 5px 14px -10px rgba(var(--rel-shadow), var(--rel-sink));
}
/* both panels glow from the shared seam, MIRRORED */
[data-dialect="cave"] .rail {
  background-image: linear-gradient(90deg, transparent 55%, rgba(var(--rel-sky), calc(0.03 + var(--rel-lift) * 0.3)));
}
[data-dialect="cave"] .list {
  background-image: linear-gradient(90deg, rgba(var(--rel-sky), calc(0.03 + var(--rel-lift) * 0.3)), transparent 45%);
}
[data-dialect="cave"] .scarp {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rel-sky), 0.1) 30%, rgba(var(--rel-sky), 0.1) 70%, transparent);
}

/* ============================================================================
   PALETTES — orthogonal to dialect. Swap the hypsometric ramp + accent + sky.
   1 neutral · 2 natural · 2 synthetic · 1 chart, per the brief's "more variety".
   Each tunes DARK; a light override lifts the same hue onto the cream canvas.
   ============================================================================ */

/* slate — the current system, unchanged. The control. */
[data-palette="slate"] {
  --rel-low: var(--bg-0);
  --rel-high: color-mix(in oklab, var(--bg-2), #ffffff 6%);
  --rel-sky: 190, 205, 235;
  --lake-fill: color-mix(in oklab, var(--bg-1), transparent 8%);
}

/* bathymetric — natural. Abyssal indigo rising to a teal shelf. The chart. */
[data-palette="bathymetric"] {
  --rel-low: #07101f;
  --rel-high: #15565c;
  --rel-sky: 120, 205, 212;
  --rel-contour-col: rgba(140, 230, 235, 0.08);
  --accent: #34c6c0;
  --accent-hover: #54d6d0;
  --accent-press: #1ea49e;
  --accent-soft: rgba(52, 198, 192, 0.16);
  --lake-fill: color-mix(in oklab, #15565c, transparent 30%);
  --violet-300: #6fe0d8;
}
[data-theme="light"][data-palette="bathymetric"] {
  --rel-low: #dbe8ec; --rel-high: #8fc7c4; --rel-sky: 40, 120, 125;
  --accent: #0f7f79; --accent-hover: #0c6a65; --accent-press: #0a5854;
  --violet-600: #0f7f79; --violet-300: #0c6a65; --lake-fill: color-mix(in oklab, #b6dad6, transparent 22%);
}

/* sediment — natural. Warm strata: deep loam up to sunlit sandstone. */
[data-palette="sediment"] {
  --rel-low: #1b1410;
  --rel-high: #5e3f27;
  --rel-sky: 240, 205, 160;
  --rel-contour-col: rgba(235, 200, 150, 0.08);
  --accent: #db8a44;
  --accent-hover: #e6a05f;
  --accent-press: #c0712f;
  --accent-soft: rgba(219, 138, 68, 0.16);
  --lake-fill: color-mix(in oklab, #5e3f27, transparent 30%);
  --violet-300: #e7b079;
}
[data-theme="light"][data-palette="sediment"] {
  --rel-low: #efe6d6; --rel-high: #cba878; --rel-sky: 150, 110, 60;
  --accent: #a8631f; --accent-hover: #8f5419; --accent-press: #784715;
  --violet-600: #a8631f; --violet-300: #8f5419; --lake-fill: color-mix(in oklab, #ddc6a0, transparent 22%);
}

/* ultraviolet — synthetic. Not of this earth: black-violet basin, electric
   magenta plateau. The brief asked NOT to fall into natural tones. */
[data-palette="ultraviolet"] {
  --rel-low: #0f0820;
  --rel-high: #3a1670;
  --rel-sky: 215, 160, 255;
  --rel-contour-col: rgba(205, 150, 255, 0.10);
  --accent: #b07cff;
  --accent-hover: #c79bff;
  --accent-press: #9560ee;
  --accent-soft: rgba(176, 124, 255, 0.18);
  --lake-fill: color-mix(in oklab, #3a1670, transparent 30%);
  --violet-300: #cba6ff;
}
[data-theme="light"][data-palette="ultraviolet"] {
  --rel-low: #ece3fb; --rel-high: #b69af0; --rel-sky: 110, 60, 190;
  --accent: #7b3fe4; --accent-hover: #6a32cc; --accent-press: #5827ad;
  --violet-600: #7b3fe4; --violet-300: #6a32cc; --lake-fill: color-mix(in oklab, #cdb8f5, transparent 22%);
}

/* aurora — synthetic. A green-to-violet shimmer over polar dark. */
[data-palette="aurora"] {
  --rel-low: #06140f;
  --rel-high: #14463a;
  --rel-sky: 150, 255, 205;
  --rel-contour-col: rgba(140, 255, 205, 0.10);
  --accent: #4fe0a0;
  --accent-hover: #74ecb6;
  --accent-press: #2fbf83;
  --accent-soft: rgba(79, 224, 160, 0.16);
  --lake-fill: color-mix(in oklab, #14463a, transparent 30%);
  --violet-300: #7df0c0;
}
[data-theme="light"][data-palette="aurora"] {
  --rel-low: #dcefe4; --rel-high: #84c9a8; --rel-sky: 30, 120, 90;
  --accent: #128a5e; --accent-hover: #0f744f; --accent-press: #0c6142;
  --violet-600: #128a5e; --violet-300: #0f744f; --lake-fill: color-mix(in oklab, #aadcc2, transparent 22%);
}

/* parchment — the chart. The Monterey nautical-chart feel: aged paper with
   sepia ink contours. Pairs with Contour for the relief-map read; works under
   any dialect. Inspiration, not skeuomorphism. */
[data-palette="parchment"] {
  --rel-low: #261f15;       /* aged leather dark */
  --rel-high: #6a5733;      /* tobacco */
  --rel-sky: 232, 210, 158;
  --rel-contour-col: rgba(230, 202, 142, 0.13);   /* ink-gold isobaths */
  --accent: #c98a3c;
  --accent-hover: #d89f56;
  --accent-press: #ad722c;
  --accent-soft: rgba(201, 138, 60, 0.16);
  --lake-fill: color-mix(in oklab, #6a5733, transparent 28%);
  --violet-300: #e3b878;
}
[data-theme="light"][data-palette="parchment"] {
  --rel-low: #efe3c5;       /* paper */
  --rel-high: #d6bd87;      /* tan */
  --rel-sky: 120, 88, 48;
  --rel-contour-col: rgba(120, 82, 40, 0.15);      /* sepia ink */
  --accent: #9c5a23;
  --accent-hover: #84481a;
  --accent-press: #6f3c14;
  --accent-soft: rgba(156, 90, 35, 0.14);
  --violet-600: #9c5a23;
  --violet-300: #84481a;
  --lake-fill: color-mix(in oklab, #e4d3a6, transparent 18%);
}


/* --- Source: layout.css --- */
/* ============================================================================
   CONTINENTAL — Layout primitives
   Composable spacing/structure helpers so screens are built from a consistent
   rhythm instead of bespoke margins. All gaps derive from --d-scale so they
   tighten with density. Logical properties throughout (RTL-safe).
   ============================================================================ */

/* container — centered max-width with responsive gutters */
.l-container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.l-container.is-narrow { max-width: 760px; }
.l-container.is-wide { max-width: 1440px; }

/* stack — vertical flow with a single gap token */
.l-stack { display: flex; flex-direction: column; gap: var(--stack-gap); }
.l-stack.is-1 { gap: calc(var(--space-1) * var(--d-scale)); }
.l-stack.is-2 { gap: calc(var(--space-2) * var(--d-scale)); }
.l-stack.is-4 { gap: calc(var(--space-4) * var(--d-scale)); }
.l-stack.is-6 { gap: calc(var(--space-6) * var(--d-scale)); }

/* cluster — horizontal group that wraps; for toolbars, tag rows, button rows */
.l-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space-2) * var(--d-scale)); }
.l-cluster.is-between { justify-content: space-between; }
.l-cluster.is-end { justify-content: flex-end; }
.l-cluster.is-tight { gap: calc(var(--space-1) * var(--d-scale)); }

/* inline — label + control on one line, control fills */
.l-inline { display: flex; align-items: center; gap: calc(var(--space-3) * var(--d-scale)); }
.l-inline > .grow { flex: 1; min-width: 0; }

/* grid — auto-fit responsive cards */
.l-grid { display: grid; gap: calc(var(--space-4) * var(--d-scale)); grid-template-columns: repeat(auto-fit, minmax(var(--col, 240px), 1fr)); }
.l-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.l-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.l-grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .l-grid.c2, .l-grid.c3, .l-grid.c4 { grid-template-columns: 1fr; } }

/* sidebar — fixed rail + fluid main, collapses on small screens */
.l-sidebar { display: grid; grid-template-columns: var(--rail, 260px) 1fr; gap: 0; }
@media (max-width: 860px) { .l-sidebar { grid-template-columns: 1fr; } }

/* split — two equal regions parted by a seam (continental's signature) */
.l-split { display: flex; align-items: stretch; }
.l-split > * { min-width: 0; }

/* spacer + dividers */
.l-spacer { flex: 1 1 auto; }
.l-pad { padding: calc(var(--space-5) * var(--d-scale)); }
.l-pad-4 { padding: calc(var(--space-4) * var(--d-scale)); }

/* aspect + center helpers */
.l-center { display: grid; place-items: center; }
.l-aspect { position: relative; }
.l-aspect > * { position: absolute; inset: 0; }


/* --- Source: components.css --- */
/* ============================================================================
   CONTINENTAL — Components
   A framework-agnostic UI library expressed in the relief language.

   Every component reads only TWO things:
     1. the relief SLOTS  (--edge-raise, --edge-inset, --lake-*, --seam-*, .scarp)
     2. the semantic TOKENS (--fg-*, --bg-*, --accent, --radius-*, --space-*, …)

   It therefore inherits all THREE axes for free:
     data-dialect  ×  data-theme  ×  data-palette
   Pick a dialect (the edge language), a mode (light/dark), and a palette
   (the colorway); the entire component set re-skins with zero per-component work.

   Namespace: .cnt-*   ·   State hooks: .is-*   ·   never transitions `background`
   (color-mix(var()) + background-transition freezes on token swaps).
   ============================================================================ */

:root {
  /* ---- semantic intent → existing notebook tokens ----------------------- */
  --cnt-primary: var(--accent);
  --cnt-primary-fg: var(--accent-fg);
  --cnt-primary-soft: var(--accent-soft);
  --cnt-success: var(--completed);    --cnt-success-soft: var(--completed-soft);
  --cnt-warning: var(--due-soon);     --cnt-warning-soft: var(--due-soon-soft);
  --cnt-danger: var(--overdue);       --cnt-danger-soft: var(--overdue-soft);
  --cnt-info: var(--info);            --cnt-info-soft: rgba(107, 138, 175, 0.16);

  /* ---- control geometry -------------------------------------------------- */
  --cnt-radius: var(--radius-2);
  --cnt-radius-lg: var(--radius-3);
  --cnt-h: 38px;          /* default control height (buttons, inputs)        */
  --cnt-gap: var(--space-2);

  /* surface fills derived from the hypsometric ramp so they track the palette */
  --cnt-surface: color-mix(in oklab, var(--rel-low), var(--rel-high) 62%);
  --cnt-surface-hi: color-mix(in oklab, var(--rel-low), var(--rel-high) 88%);
  --cnt-hollow: color-mix(in oklab, var(--rel-low), transparent 22%);
}

/* ════════════════════════════ BUTTON ════════════════════════════════════ */
.cnt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--cnt-h); padding: 0 16px; border: 0; border-radius: var(--cnt-radius);
  font: 500 14px/1 var(--font-sans); letter-spacing: 0.005em; white-space: nowrap;
  color: var(--fg-1); background: var(--cnt-surface); cursor: pointer; user-select: none;
  box-shadow: var(--edge-raise);
  transition: transform var(--dur-fast) var(--ease-default),
              box-shadow var(--dur-fast) var(--ease-default),
              color var(--dur-fast) var(--ease-default);
}
.cnt-btn:hover { background: var(--cnt-surface-hi); }
.cnt-btn:active { transform: translateY(1px); box-shadow: var(--edge-inset); }
.cnt-btn:focus-visible { outline: none; box-shadow: var(--edge-raise), 0 0 0 3px var(--cnt-primary-soft), 0 0 0 1px var(--accent); }
.cnt-btn .cnt-icon { width: 16px; height: 16px; flex: 0 0 auto; }

.cnt-btn.is-primary { background: var(--accent); color: var(--accent-fg); }
.cnt-btn.is-primary:hover { background: var(--accent-hover); }
.cnt-btn.is-primary:active { background: var(--accent-press); }
.cnt-btn.is-danger { background: var(--cnt-danger); color: #fff; }
.cnt-btn.is-danger:hover { filter: brightness(1.07); }
.cnt-btn.is-subtle { background: var(--cnt-primary-soft); color: var(--accent); box-shadow: none; }
.cnt-btn.is-subtle:hover { background: color-mix(in oklab, var(--cnt-primary-soft), var(--accent) 14%); }
.cnt-btn.is-ghost { background: transparent; box-shadow: none; color: var(--fg-2); }
.cnt-btn.is-ghost:hover { background: var(--cnt-primary-soft); color: var(--fg-1); }
.cnt-btn.is-link { background: transparent; box-shadow: none; color: var(--accent); padding: 0 4px; height: auto; }
.cnt-btn.is-link:hover { text-decoration: underline; }

.cnt-btn.is-sm { height: 30px; padding: 0 12px; font-size: 13px; }
.cnt-btn.is-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.cnt-btn.is-icon { width: var(--cnt-h); padding: 0; }
.cnt-btn.is-icon.is-sm { width: 30px; }
.cnt-btn.is-icon.is-lg { width: 46px; }
.cnt-btn.is-block { display: flex; width: 100%; }
.cnt-btn:disabled, .cnt-btn.is-disabled { opacity: 0.45; pointer-events: none; }

.cnt-btn-group { display: inline-flex; }
.cnt-btn-group .cnt-btn { border-radius: 0; }
.cnt-btn-group .cnt-btn:first-child { border-radius: var(--cnt-radius) 0 0 var(--cnt-radius); }
.cnt-btn-group .cnt-btn:last-child { border-radius: 0 var(--cnt-radius) var(--cnt-radius) 0; }
.cnt-btn-group .cnt-btn + .cnt-btn { margin-left: 1px; }

/* ════════════════════════════ INPUT / FIELD ═════════════════════════════ */
.cnt-input, .cnt-textarea, .cnt-select {
  width: 100%; height: var(--cnt-h); padding: 0 12px; border: 0; border-radius: var(--cnt-radius);
  font: 400 14px/1.4 var(--font-sans); color: var(--fg-1);
  background: var(--cnt-hollow); box-shadow: var(--edge-inset); outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-default);
}
.cnt-input::placeholder, .cnt-textarea::placeholder { color: var(--fg-4); }
.cnt-input:focus, .cnt-textarea:focus, .cnt-select:focus {
  box-shadow: var(--edge-inset), 0 0 0 3px var(--cnt-primary-soft), inset 0 0 0 1px var(--accent);
}
.cnt-input:disabled, .cnt-textarea:disabled, .cnt-select:disabled { opacity: 0.5; pointer-events: none; }
.cnt-input.is-invalid, .cnt-textarea.is-invalid { box-shadow: var(--edge-inset), inset 0 0 0 1px var(--cnt-danger); }
.cnt-textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.cnt-select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* input adornments */
.cnt-inputwrap { position: relative; display: flex; align-items: center; }
.cnt-inputwrap .cnt-input { padding-left: 36px; }
.cnt-inputwrap .cnt-adorn { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--fg-4); pointer-events: none; }

.cnt-field { display: flex; flex-direction: column; gap: 6px; }
.cnt-label { font: 500 13px/1.2 var(--font-sans); color: var(--fg-2); }
.cnt-label .cnt-req { color: var(--cnt-danger); margin-left: 2px; }
.cnt-help { font: 400 12px/1.4 var(--font-sans); color: var(--fg-4); }
.cnt-help.is-error { color: var(--cnt-danger); }

/* ════════════════════════════ CHECKBOX / RADIO / SWITCH ═════════════════ */
.cnt-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font: 400 14px/1 var(--font-sans); color: var(--fg-1); user-select: none; }
.cnt-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cnt-check .box {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px; display: grid; place-content: center;
  background: var(--cnt-hollow); box-shadow: var(--edge-inset); color: transparent;
  transition: box-shadow var(--dur-fast) var(--ease-default), color var(--dur-fast);
}
.cnt-check .box.is-radio { border-radius: 50%; }
.cnt-check .box svg { width: 12px; height: 12px; }
.cnt-check input:checked + .box { background: var(--accent); box-shadow: var(--edge-raise); color: #fff; }
.cnt-check input:focus-visible + .box { box-shadow: var(--edge-inset), 0 0 0 3px var(--cnt-primary-soft); }
.cnt-check input:disabled ~ * { opacity: 0.5; }

.cnt-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font: 400 14px/1 var(--font-sans); color: var(--fg-1); }
.cnt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cnt-switch .track {
  width: 42px; height: 24px; border-radius: 999px; padding: 3px; flex: 0 0 auto;
  background: var(--cnt-hollow); box-shadow: var(--edge-inset);
  transition: box-shadow var(--dur-default) var(--ease-default);
}
.cnt-switch .thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--cnt-surface-hi);
  box-shadow: var(--edge-raise); transition: transform var(--dur-default) var(--ease-default);
}
.cnt-switch input:checked + .track { background: var(--accent); }
.cnt-switch input:checked + .track .thumb { transform: translateX(18px); background: #fff; }
.cnt-switch input:focus-visible + .track { box-shadow: var(--edge-inset), 0 0 0 3px var(--cnt-primary-soft); }

/* ════════════════════════════ SEGMENTED ═════════════════════════════════ */
.cnt-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--cnt-radius); background: var(--cnt-hollow); box-shadow: var(--edge-inset); }
.cnt-segmented button {
  border: 0; background: transparent; color: var(--fg-3); cursor: pointer; height: 30px; padding: 0 14px;
  border-radius: calc(var(--cnt-radius) - 1px); font: 500 13px/1 var(--font-sans);
  transition: color var(--dur-fast), box-shadow var(--dur-fast);
}
.cnt-segmented button:hover { color: var(--fg-1); }
.cnt-segmented button.is-active { color: var(--fg-1); background: var(--cnt-surface-hi); box-shadow: var(--edge-raise); }

/* ════════════════════════════ SURFACES: CARD / PANEL / SHEET ════════════ */
.cnt-card { background: var(--cnt-surface); border-radius: var(--cnt-radius-lg); box-shadow: var(--edge-raise); }
.cnt-card.is-pad { padding: var(--space-5); }
.cnt-card-head { padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-3); }
.cnt-card-title { font: 600 16px/1.3 var(--font-serif); color: var(--fg-1); margin: 0; }
.cnt-card-body { padding: var(--space-5); }
.cnt-card-foot { padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.cnt-card-head + .cnt-card-body, .cnt-card-body + .cnt-card-foot { padding-top: 0; }

.cnt-panel { background: color-mix(in oklab, var(--rel-low), var(--rel-high) 30%); border-radius: var(--cnt-radius-lg); }
.cnt-sheet { background: var(--lake-fill); -webkit-backdrop-filter: blur(var(--lake-blur)) saturate(118%); backdrop-filter: blur(var(--lake-blur)) saturate(118%); box-shadow: var(--lake-edge); border-radius: var(--cnt-radius-lg); }

/* ════════════════════════════ TAG / BADGE / DOT / PILL ══════════════════ */
.cnt-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 6px; font: 500 12px/1 var(--font-sans); background: var(--cnt-hollow); color: var(--fg-2); box-shadow: var(--edge-inset); }
.cnt-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cnt-tag.is-primary { background: var(--cnt-primary-soft); color: var(--accent); box-shadow: none; }
.cnt-tag.is-success { background: var(--cnt-success-soft); color: var(--cnt-success); box-shadow: none; }
.cnt-tag.is-warning { background: var(--cnt-warning-soft); color: var(--cnt-warning); box-shadow: none; }
.cnt-tag.is-danger { background: var(--cnt-danger-soft); color: var(--cnt-danger); box-shadow: none; }
.cnt-tag.is-info { background: var(--cnt-info-soft); color: var(--cnt-info); box-shadow: none; }

.cnt-badge { display: inline-grid; place-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cnt-danger); color: #fff; font: 600 11px/1 var(--font-mono); }
.cnt-badge.is-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }

.cnt-avatar { display: inline-grid; place-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cnt-surface-hi); box-shadow: var(--edge-raise); color: var(--fg-2); font: 600 14px/1 var(--font-sans); overflow: hidden; }
.cnt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cnt-avatar.is-sm { width: 26px; height: 26px; font-size: 11px; }
.cnt-avatar.is-lg { width: 48px; height: 48px; font-size: 18px; }
.cnt-avatar-stack { display: inline-flex; }
.cnt-avatar-stack .cnt-avatar + .cnt-avatar { margin-left: -10px; }

/* ════════════════════════════ ALERT / CALLOUT ══════════════════════════ */
.cnt-alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--cnt-radius); background: var(--cnt-surface); box-shadow: var(--edge-raise); }
.cnt-alert .cnt-alert-ico { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--fg-3); }
.cnt-alert-title { font: 600 14px/1.3 var(--font-sans); color: var(--fg-1); margin: 0 0 2px; }
.cnt-alert-text { font: 400 13px/1.5 var(--font-sans); color: var(--fg-2); margin: 0; }
.cnt-alert.is-info { background: var(--cnt-info-soft); box-shadow: none; } .cnt-alert.is-info .cnt-alert-ico { color: var(--cnt-info); }
.cnt-alert.is-success { background: var(--cnt-success-soft); box-shadow: none; } .cnt-alert.is-success .cnt-alert-ico { color: var(--cnt-success); }
.cnt-alert.is-warning { background: var(--cnt-warning-soft); box-shadow: none; } .cnt-alert.is-warning .cnt-alert-ico { color: var(--cnt-warning); }
.cnt-alert.is-danger { background: var(--cnt-danger-soft); box-shadow: none; } .cnt-alert.is-danger .cnt-alert-ico { color: var(--cnt-danger); }

/* ════════════════════════════ LIST / MENU ══════════════════════════════ */
.cnt-list { display: flex; flex-direction: column; }
.cnt-list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.cnt-list-item + .cnt-list-item { position: relative; }
.cnt-list-item + .cnt-list-item::before { content: ""; position: absolute; top: 0; left: var(--space-4); right: var(--space-4); height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.55)) 10%, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.55)) 90%, transparent); box-shadow: 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.7)); }
.cnt-list-item .grow { flex: 1; min-width: 0; }
.cnt-list-title { font: 500 14px/1.3 var(--font-sans); color: var(--fg-1); }
.cnt-list-sub { font: 400 12px/1.3 var(--font-sans); color: var(--fg-4); margin-top: 2px; }

.cnt-menu { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); }
.cnt-menu-item { display: flex; align-items: center; gap: var(--space-3); padding: 9px 12px; border-radius: var(--cnt-radius); color: var(--fg-2); font: 500 14px/1 var(--font-sans); cursor: pointer; text-decoration: none; transition: color var(--dur-fast), box-shadow var(--dur-fast); }
.cnt-menu-item .cnt-icon { width: 17px; height: 17px; opacity: 0.8; }
.cnt-menu-item:hover { color: var(--fg-1); background: var(--cnt-primary-soft); }
.cnt-menu-item.is-active { color: var(--fg-1); background: var(--cnt-surface-hi); box-shadow: var(--edge-raise); }
.cnt-menu-label { padding: 10px 12px 4px; font: 600 11px/1 var(--font-sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-4); }

/* ════════════════════════════ TABLE ════════════════════════════════════ */
.cnt-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--font-sans); }
.cnt-table thead th { text-align: left; font: 600 12px/1 var(--font-sans); letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-4); padding: 12px 14px; background: var(--cnt-surface); }
.cnt-table thead th:first-child { border-radius: var(--cnt-radius) 0 0 0; }
.cnt-table thead th:last-child { border-radius: 0 var(--cnt-radius) 0 0; }
.cnt-table tbody td { padding: 12px 14px; color: var(--fg-1); }
.cnt-table tbody tr { position: relative; }
.cnt-table tbody tr + tr td { box-shadow: 0 -1px 0 rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.4)), 0 0 0 rgba(var(--rel-glow), 0); }
.cnt-table tbody tr:hover td { background: var(--cnt-primary-soft); }

/* ════════════════════════════ TABS ═════════════════════════════════════ */
.cnt-tabs { display: flex; gap: 4px; position: relative; }
.cnt-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)), transparent); }
.cnt-tab { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; padding: 11px 14px; font: 500 14px/1 var(--font-sans); color: var(--fg-3); transition: color var(--dur-fast); }
.cnt-tab:hover { color: var(--fg-1); }
.cnt-tab.is-active { color: var(--accent); }
.cnt-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--cnt-primary-soft); }

/* ════════════════════════════ BREADCRUMB ═══════════════════════════════ */
.cnt-breadcrumb { display: flex; align-items: center; gap: 8px; font: 400 13px/1 var(--font-sans); color: var(--fg-4); }
.cnt-breadcrumb a { color: var(--fg-3); text-decoration: none; }
.cnt-breadcrumb a:hover { color: var(--accent); }
.cnt-breadcrumb .sep { opacity: 0.5; }
.cnt-breadcrumb .is-current { color: var(--fg-1); }

/* ════════════════════════════ PROGRESS / METER ═════════════════════════ */
.cnt-progress { height: 8px; border-radius: 999px; background: var(--cnt-hollow); box-shadow: var(--edge-inset); overflow: hidden; }
.cnt-progress > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); box-shadow: 0 0 8px var(--cnt-primary-soft); }
.cnt-progress.is-success > i { background: var(--cnt-success); }
.cnt-progress.is-warning > i { background: var(--cnt-warning); }

.cnt-slider { position: relative; height: 24px; display: flex; align-items: center; }
.cnt-slider .rail { width: 100%; height: 6px; border-radius: 999px; background: var(--cnt-hollow); box-shadow: var(--edge-inset); }
.cnt-slider .fill { position: absolute; left: 0; height: 6px; border-radius: 999px; background: var(--accent); }
.cnt-slider .knob { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--cnt-surface-hi); box-shadow: var(--edge-raise); transform: translateX(-50%); }

/* ════════════════════════════ TOOLTIP / POPOVER ════════════════════════ */
.cnt-tooltip { display: inline-block; padding: 6px 10px; border-radius: var(--cnt-radius); background: var(--lake-fill); -webkit-backdrop-filter: blur(var(--lake-blur)); backdrop-filter: blur(var(--lake-blur)); box-shadow: var(--lake-edge); font: 500 12px/1.3 var(--font-sans); color: var(--fg-1); }
.cnt-popover { padding: var(--space-4); border-radius: var(--cnt-radius-lg); background: var(--lake-fill); -webkit-backdrop-filter: blur(var(--lake-blur)) saturate(118%); backdrop-filter: blur(var(--lake-blur)) saturate(118%); box-shadow: var(--lake-edge); max-width: 280px; }

/* ════════════════════════════ MODAL ════════════════════════════════════ */
.cnt-scrim { position: fixed; inset: 0; background: rgba(var(--rel-shadow), 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: grid; place-items: center; padding: var(--space-6); z-index: 100; }
.cnt-modal { width: min(520px, 100%); background: var(--lake-fill); -webkit-backdrop-filter: blur(calc(var(--lake-blur) + 4px)) saturate(120%); backdrop-filter: blur(calc(var(--lake-blur) + 4px)) saturate(120%); box-shadow: var(--lake-edge), 0 40px 100px -30px rgba(0,0,0,0.6); border-radius: var(--cnt-radius-lg); overflow: hidden; }
.cnt-modal-head { padding: var(--space-5) var(--space-5) 0; }
.cnt-modal-title { font: 700 20px/1.2 var(--font-serif); color: var(--fg-1); margin: 0; }
.cnt-modal-body { padding: var(--space-4) var(--space-5); color: var(--fg-2); font: 400 14px/1.6 var(--font-sans); }
.cnt-modal-foot { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; gap: var(--space-2); justify-content: flex-end; }

.cnt-toast { display: flex; align-items: center; gap: var(--space-3); padding: 12px 16px; border-radius: var(--cnt-radius); background: var(--lake-fill); -webkit-backdrop-filter: blur(var(--lake-blur)); backdrop-filter: blur(var(--lake-blur)); box-shadow: var(--lake-edge); font: 500 14px/1.3 var(--font-sans); color: var(--fg-1); }

/* ════════════════════════════ DIVIDER / KBD / STAT ═════════════════════ */
.cnt-divider { display: flex; align-items: center; gap: 14px; margin: var(--space-4) 0; color: var(--fg-4); font: 500 12px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }
.cnt-divider::before, .cnt-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)), transparent); box-shadow: 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.6)); }
.cnt-divider.is-plain::before, .cnt-divider.is-plain::after { box-shadow: none; }

.cnt-kbd { display: inline-grid; place-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 5px; background: var(--cnt-surface-hi); box-shadow: var(--edge-raise); font: 600 11px/1 var(--font-mono); color: var(--fg-2); }

.cnt-stat { display: flex; flex-direction: column; gap: 4px; }
.cnt-stat-label { font: 500 12px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-4); }
.cnt-stat-value { font: 700 30px/1 var(--font-serif); color: var(--fg-1); letter-spacing: -0.02em; }
.cnt-stat-delta { font: 500 12px/1 var(--font-mono); }
.cnt-stat-delta.is-up { color: var(--cnt-success); }
.cnt-stat-delta.is-down { color: var(--cnt-danger); }

/* ════════════════════════════ DENSITY AXIS ══════════════════════════════
   data-density="compact" tightens the whole system at once (control height +
   the key paddings). A fourth orthogonal axis, on top of dialect×theme×palette. */
[data-density="compact"] { --cnt-h: 32px; }
[data-density="compact"] .cnt-btn { padding: 0 13px; font-size: 13px; }
[data-density="compact"] .cnt-btn.is-sm { height: 26px; }
[data-density="compact"] .cnt-card-head,
[data-density="compact"] .cnt-card-body,
[data-density="compact"] .cnt-card-foot { padding: 12px 16px; }
[data-density="compact"] .cnt-list-item { padding: 8px 12px; }
[data-density="compact"] .cnt-table thead th,
[data-density="compact"] .cnt-table tbody td { padding: 8px 12px; }
[data-density="compact"] .cnt-menu-item { padding: 7px 10px; }

/* ════════════════════════════ DISCLOSURE (collapse) ═════════════════════ */
.cnt-collapse { display: flex; flex-direction: column; }
.cnt-collapse-item { position: relative; }
.cnt-collapse-item + .cnt-collapse-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.55)) 8%, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.55)) 92%, transparent); box-shadow: 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.7)); }
.cnt-collapse-head { display: flex; align-items: center; gap: 10px; padding: 15px 4px; cursor: pointer; font: 600 14px/1.3 var(--font-sans); color: var(--fg-1); user-select: none; }
.cnt-collapse-head .chev { margin-left: auto; width: 16px; height: 16px; color: var(--fg-4); transition: transform var(--dur-default) var(--ease-default); }
.cnt-collapse-item.is-open .chev { transform: rotate(90deg); }
.cnt-collapse-body { padding: 0 4px 15px; color: var(--fg-3); font: 400 14px/1.6 var(--font-sans); display: none; }
.cnt-collapse-item.is-open .cnt-collapse-body { display: block; }

/* ════════════════════════════ STEPS ════════════════════════════════════ */
.cnt-steps { display: flex; }
.cnt-step { flex: 1; display: flex; flex-direction: column; gap: 8px; position: relative; }
.cnt-step .node { width: 28px; height: 28px; border-radius: 50%; display: grid; place-content: center; background: var(--cnt-hollow); box-shadow: var(--edge-inset); font: 600 12px/1 var(--font-mono); color: var(--fg-4); z-index: 1; }
.cnt-step .node svg { width: 14px; height: 14px; }
.cnt-step.is-active .node { background: var(--accent); color: #fff; box-shadow: var(--edge-raise); }
.cnt-step.is-done .node { background: color-mix(in oklab, var(--accent), var(--rel-low) 30%); color: #fff; box-shadow: var(--edge-raise); }
.cnt-step .step-t { font: 600 13px/1.2 var(--font-sans); color: var(--fg-2); }
.cnt-step .step-s { font: 400 12px/1.3 var(--font-sans); color: var(--fg-4); }
.cnt-step::after { content: ""; position: absolute; top: 14px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; border-radius: 2px; background: rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)); box-shadow: 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.6)); }
.cnt-step.is-done::after { background: var(--accent); box-shadow: none; }
.cnt-step:last-child::after { display: none; }

/* ════════════════════════════ PAGINATION ═══════════════════════════════ */
.cnt-pagination { display: inline-flex; gap: 4px; }
.cnt-page { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: var(--cnt-radius); background: var(--cnt-surface); color: var(--fg-2); box-shadow: var(--edge-raise); cursor: pointer; font: 500 13px/1 var(--font-sans); display: grid; place-content: center; transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.cnt-page:hover { background: var(--cnt-surface-hi); }
.cnt-page:active { transform: translateY(1px); box-shadow: var(--edge-inset); }
.cnt-page.is-active { background: var(--accent); color: var(--accent-fg); }
.cnt-page:disabled { opacity: 0.4; pointer-events: none; }

/* ════════════════════════════ TIMELINE ═════════════════════════════════ */
.cnt-timeline { display: flex; flex-direction: column; padding-left: 4px; }
.cnt-tl-item { display: flex; gap: 16px; position: relative; padding-bottom: 20px; }
.cnt-tl-item .node { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: var(--edge-raise); margin-top: 3px; flex: 0 0 auto; }
.cnt-tl-item.is-muted .node { background: var(--cnt-surface-hi); }
.cnt-tl-item::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: -2px; width: 2px; background: rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.45)); }
.cnt-tl-item:last-child::before { display: none; }
.cnt-tl-item .tl-t { font: 600 14px/1.3 var(--font-sans); color: var(--fg-1); }
.cnt-tl-item .tl-time { font: 500 12px/1 var(--font-mono); color: var(--fg-4); margin-top: 2px; }

/* ════════════════════════════ SKELETON ═════════════════════════════════ */
.cnt-skeleton { display: block; background: var(--cnt-hollow); box-shadow: var(--edge-inset); border-radius: 6px; position: relative; overflow: hidden; }
.cnt-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(var(--rel-glow), 0.07), transparent); animation: cnt-shimmer 1.5s infinite; }
@keyframes cnt-shimmer { to { transform: translateX(100%); } }
.cnt-skeleton.is-text { height: 12px; }
.cnt-skeleton.is-title { height: 22px; width: 52%; }
.cnt-skeleton.is-avatar { width: 40px; height: 40px; border-radius: 50%; }

/* ════════════════════════════ EMPTY STATE ══════════════════════════════ */
.cnt-empty { text-align: center; padding: 44px 24px; }
.cnt-empty .cnt-empty-ico { width: 44px; height: 44px; display: grid; place-content: center; margin: 0 auto 14px; border-radius: 50%; background: var(--cnt-hollow); box-shadow: var(--edge-inset); color: var(--fg-4); }
.cnt-empty-title { font: 600 15px/1.3 var(--font-sans); color: var(--fg-2); margin: 0 0 4px; }
.cnt-empty-text { font: 400 13px/1.5 var(--font-sans); color: var(--fg-4); margin: 0 auto 16px; max-width: 38ch; }

/* ════════════════════════════ BANNER ═══════════════════════════════════ */
.cnt-banner { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 18px; border-radius: var(--cnt-radius); background: var(--cnt-surface); box-shadow: var(--edge-raise); }
.cnt-banner.is-accent { background: var(--cnt-primary-soft); box-shadow: none; }
.cnt-banner .grow { flex: 1; min-width: 0; }
.cnt-banner-title { font: 600 14px/1.3 var(--font-sans); color: var(--fg-1); }
.cnt-banner-text { font: 400 13px/1.4 var(--font-sans); color: var(--fg-3); margin-top: 1px; }

/* ════════════════════════════ CHIP / TOKEN ═════════════════════════════ */
.cnt-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 11px; border-radius: 999px; background: var(--cnt-surface-hi); box-shadow: var(--edge-raise); font: 500 13px/1 var(--font-sans); color: var(--fg-1); }
.cnt-chip .x { width: 18px; height: 18px; display: grid; place-content: center; border-radius: 50%; cursor: pointer; color: var(--fg-4); }
.cnt-chip .x:hover { background: var(--cnt-danger-soft); color: var(--cnt-danger); }
.cnt-chipfield { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px 10px; min-height: var(--cnt-h); border-radius: var(--cnt-radius); background: var(--cnt-hollow); box-shadow: var(--edge-inset); }
.cnt-chipfield input { flex: 1; min-width: 80px; border: 0; background: transparent; outline: none; color: var(--fg-1); font: 400 14px/1 var(--font-sans); height: 24px; }

/* ════════════════════════════ DESCRIPTION LIST ═════════════════════════ */
.cnt-desc { display: grid; grid-template-columns: max-content 1fr; gap: 11px 24px; margin: 0; }
.cnt-desc dt { font: 500 13px/1.4 var(--font-sans); color: var(--fg-4); }
.cnt-desc dd { margin: 0; font: 400 14px/1.4 var(--font-sans); color: var(--fg-1); }

/* ════════════════════════════ CODE ═════════════════════════════════════ */
.cnt-code { display: block; padding: 14px 16px; border-radius: var(--cnt-radius); background: var(--cnt-hollow); box-shadow: var(--edge-inset); font: 400 13px/1.6 var(--font-mono); color: var(--fg-2); white-space: pre; overflow-x: auto; }
.cnt-code .tok-tag { color: var(--accent); }
.cnt-code .tok-attr { color: var(--cnt-info); }
.cnt-code .tok-str { color: var(--cnt-success); }
code.cnt-inline { font: 500 0.9em/1 var(--font-mono); color: var(--accent); background: var(--cnt-primary-soft); padding: 2px 6px; border-radius: 5px; }

/* ════════════════════════════ DROPDOWN / DRAWER ════════════════════════ */
.cnt-dropdown { padding: 6px; border-radius: var(--cnt-radius); background: var(--lake-fill); -webkit-backdrop-filter: blur(var(--lake-blur)) saturate(118%); backdrop-filter: blur(var(--lake-blur)) saturate(118%); box-shadow: var(--lake-edge); min-width: 200px; }
.cnt-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(400px, 92vw); background: var(--lake-fill); -webkit-backdrop-filter: blur(calc(var(--lake-blur) + 4px)) saturate(120%); backdrop-filter: blur(calc(var(--lake-blur) + 4px)) saturate(120%); box-shadow: var(--lake-edge), -30px 0 90px -30px rgba(0,0,0,0.6); z-index: 110; padding: var(--space-5); }

/* ════════════════════════════ UTILITIES ════════════════════════════════ */
.cnt-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.cnt-row { display: flex; align-items: center; gap: var(--space-2); }
.cnt-row.is-wrap { flex-wrap: wrap; }
.cnt-spacer { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .cnt-btn, .cnt-switch .thumb, .cnt-segmented button, .cnt-check .box,
  .cnt-collapse-head .chev, .cnt-page { transition: none; }
  .cnt-skeleton::after { animation: none; }
}


/* --- Source: components-ext.css --- */
/* ============================================================================
   CONTINENTAL — Components, extended
   The second wave: richer, often interactive components. Same rules — read the
   relief slots + semantic tokens, animate everything EXCEPT background, namespace
   .cnt-*, state hooks .is-*. Behaviors live in continental.js (progressive
   enhancement; the markup is styled and usable without it where possible).
   ============================================================================ */

/* ════════════════════════════ DROPDOWN / POPUP MENU ═════════════════════ */
.cnt-dropdown { position: relative; display: inline-block; }
.cnt-pop {
  position: absolute; z-index: 60; min-width: 200px; margin-top: 6px;
  padding: var(--space-2); border-radius: var(--cnt-radius-lg);
  background: var(--lake-fill); -webkit-backdrop-filter: blur(var(--lake-blur)) saturate(118%);
  backdrop-filter: blur(var(--lake-blur)) saturate(118%); box-shadow: var(--lake-edge), var(--elev-4);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top center;
  pointer-events: none; transition: opacity var(--motion) var(--ease-out), transform var(--motion) var(--ease-out);
}
.cnt-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.cnt-pop.is-end { right: 0; }
.cnt-pop-item {
  display: flex; align-items: center; gap: var(--space-3); padding: 9px 12px; border-radius: var(--cnt-radius);
  color: var(--fg-2); font: 500 14px/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  border: 0; background: transparent; width: 100%; text-align: start;
}
.cnt-pop-item .cnt-icon { width: 16px; height: 16px; opacity: 0.75; }
.cnt-pop-item .cnt-spacer { flex: 1; }
.cnt-pop-item kbd { font: 600 11px/1 var(--font-mono); color: var(--fg-4); }
.cnt-pop-item:hover, .cnt-pop-item.is-active { color: var(--fg-1); background: var(--cnt-primary-soft); }
.cnt-pop-item.is-danger { color: var(--cnt-danger); }
.cnt-pop-item.is-danger:hover { background: var(--cnt-danger-soft); }
.cnt-pop-sep { height: 1px; margin: 6px 8px; background: linear-gradient(90deg, transparent, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)), transparent); box-shadow: 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.6)); }

/* ════════════════════════════ COMBOBOX / AUTOCOMPLETE ═══════════════════ */
.cnt-combo { position: relative; }
.cnt-combo .cnt-pop { left: 0; right: 0; min-width: 0; max-height: 280px; overflow-y: auto; }
.cnt-combo-empty { padding: 16px 12px; text-align: center; color: var(--fg-4); font: 400 13px/1.4 var(--font-sans); }
.cnt-multiselect { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: var(--ctl-h); padding: 5px 10px; border-radius: var(--cnt-radius); background: var(--cnt-hollow); box-shadow: var(--edge-inset); }
.cnt-multiselect .cnt-tag { box-shadow: none; background: var(--cnt-primary-soft); color: var(--accent); }
.cnt-multiselect .cnt-tag button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; display: grid; place-content: center; opacity: 0.7; }
.cnt-multiselect input { flex: 1; min-width: 80px; border: 0; outline: 0; background: transparent; color: var(--fg-1); font: 400 14px/1 var(--font-sans); height: 26px; }

/* ════════════════════════════ COMMAND PALETTE (⌘K) ══════════════════════ */
.cnt-cmdk-scrim { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; padding-top: 14vh; background: rgba(var(--rel-shadow), 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--motion) var(--ease-out); }
.cnt-cmdk-scrim.is-open { opacity: 1; pointer-events: auto; }
.cnt-cmdk { width: min(620px, 92vw); border-radius: var(--cnt-radius-lg); overflow: hidden; background: var(--lake-fill); -webkit-backdrop-filter: blur(calc(var(--lake-blur) + 6px)) saturate(122%); backdrop-filter: blur(calc(var(--lake-blur) + 6px)) saturate(122%); box-shadow: var(--lake-edge), var(--elev-5); transform: translateY(-8px) scale(0.99); transition: transform var(--motion) var(--ease-spring); }
.cnt-cmdk-scrim.is-open .cnt-cmdk { transform: none; }
.cnt-cmdk-search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.cnt-cmdk-search svg { width: 18px; height: 18px; color: var(--fg-4); flex: 0 0 auto; }
.cnt-cmdk-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--fg-1); font: 400 17px/1 var(--font-sans); }
.cnt-cmdk-search input::placeholder { color: var(--fg-4); }
.cnt-cmdk-search kbd { font: 600 11px/1 var(--font-mono); color: var(--fg-4); }
.cnt-cmdk-list { max-height: 50vh; overflow-y: auto; padding: 6px; border-top: 1px solid rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.45)); }
.cnt-cmdk-group { font: 600 11px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-4); padding: 12px 12px 6px; }
.cnt-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--cnt-radius); cursor: pointer; color: var(--fg-2); font: 500 14px/1 var(--font-sans); }
.cnt-cmdk-item .cnt-icon { width: 17px; height: 17px; opacity: 0.8; }
.cnt-cmdk-item .cnt-spacer { flex: 1; }
.cnt-cmdk-item kbd { font: 600 11px/1 var(--font-mono); color: var(--fg-4); }
.cnt-cmdk-item.is-active { color: var(--fg-1); background: var(--cnt-primary-soft); box-shadow: var(--edge-raise); }

/* ════════════════════════════ CALENDAR / DATE PICKER ═══════════════════ */
.cnt-calendar { width: 280px; padding: var(--space-4); border-radius: var(--cnt-radius-lg); background: var(--cnt-surface); box-shadow: var(--edge-raise); }
.cnt-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cnt-cal-title { flex: 1; text-align: center; font: 600 14px/1 var(--font-serif); color: var(--fg-1); }
.cnt-cal-nav { width: 28px; height: 28px; border: 0; border-radius: var(--cnt-radius); background: transparent; color: var(--fg-3); cursor: pointer; display: grid; place-content: center; }
.cnt-cal-nav:hover { background: var(--cnt-primary-soft); color: var(--fg-1); }
.cnt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cnt-cal-dow { text-align: center; font: 600 10px/1 var(--font-mono); color: var(--fg-4); padding: 4px 0 8px; }
.cnt-cal-day { aspect-ratio: 1; border: 0; border-radius: var(--cnt-radius); background: transparent; color: var(--fg-2); font: 500 13px/1 var(--font-sans); cursor: pointer; display: grid; place-content: center; }
.cnt-cal-day:hover { background: var(--cnt-primary-soft); color: var(--fg-1); }
.cnt-cal-day.is-muted { color: var(--fg-4); opacity: 0.5; }
.cnt-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.cnt-cal-day.is-selected { background: var(--accent); color: var(--accent-fg); box-shadow: var(--edge-raise); }
.cnt-cal-day.is-range { background: var(--cnt-primary-soft); border-radius: 0; color: var(--fg-1); }
.cnt-cal-day.is-range.is-start { border-radius: var(--cnt-radius) 0 0 var(--cnt-radius); }
.cnt-cal-day.is-range.is-end { border-radius: 0 var(--cnt-radius) var(--cnt-radius) 0; }

/* ════════════════════════════ ACCORDION / COLLAPSE ═════════════════════ */
.cnt-accordion { display: flex; flex-direction: column; border-radius: var(--cnt-radius-lg); overflow: hidden; background: var(--cnt-surface); box-shadow: var(--edge-raise); }
.cnt-acc-item + .cnt-acc-item { box-shadow: inset 0 1px 0 rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.45)), inset 0 2px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.5)); }
.cnt-acc-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 18px; border: 0; background: transparent; color: var(--fg-1); font: 600 15px/1.2 var(--font-sans); cursor: pointer; text-align: start; }
.cnt-acc-head .cnt-spacer { flex: 1; }
.cnt-chevron { width: 16px; height: 16px; color: var(--fg-4); transition: transform var(--motion) var(--ease-out); }
.cnt-acc-item.is-open .cnt-chevron { transform: rotate(180deg); }
.cnt-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion) var(--ease-out); }
.cnt-acc-item.is-open .cnt-acc-body { grid-template-rows: 1fr; }
.cnt-acc-body > div { overflow: hidden; }
.cnt-acc-body p { margin: 0; padding: 0 18px 16px; color: var(--fg-2); font: 400 14px/1.6 var(--font-sans); }

/* ════════════════════════════ PAGINATION ═══════════════════════════════ */
.cnt-pagination { display: inline-flex; align-items: center; gap: 4px; }
.cnt-page { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: var(--cnt-radius); background: transparent; color: var(--fg-2); font: 500 14px/1 var(--font-sans); cursor: pointer; display: grid; place-content: center; }
.cnt-page:hover { background: var(--cnt-primary-soft); color: var(--fg-1); }
.cnt-page.is-active { background: var(--cnt-surface-hi); color: var(--fg-1); box-shadow: var(--edge-raise); }
.cnt-page:disabled { opacity: 0.4; pointer-events: none; }
.cnt-page-ellipsis { color: var(--fg-4); padding: 0 4px; }

/* ════════════════════════════ TREE ═════════════════════════════════════ */
.cnt-tree { font: 500 14px/1 var(--font-sans); }
.cnt-tree-node > .cnt-tree-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--cnt-radius); cursor: pointer; color: var(--fg-2); }
.cnt-tree-row:hover { background: var(--cnt-primary-soft); color: var(--fg-1); }
.cnt-tree-row.is-active { background: var(--cnt-surface-hi); color: var(--fg-1); box-shadow: var(--edge-raise); }
.cnt-tree-toggle { width: 16px; height: 16px; display: grid; place-content: center; color: var(--fg-4); transition: transform var(--motion) var(--ease-out); flex: 0 0 auto; }
.cnt-tree-node.is-open > .cnt-tree-row .cnt-tree-toggle { transform: rotate(90deg); }
.cnt-tree-row .cnt-icon { width: 16px; height: 16px; opacity: 0.8; }
.cnt-tree-children { margin-inline-start: 16px; padding-inline-start: 8px; border-inline-start: 1px solid rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.4)); display: none; }
.cnt-tree-node.is-open > .cnt-tree-children { display: block; }

/* ════════════════════════════ TIMELINE / STEPS ═════════════════════════ */
.cnt-timeline { display: flex; flex-direction: column; }
.cnt-tl-item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.cnt-tl-rail { display: flex; flex-direction: column; align-items: center; }
.cnt-tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--cnt-surface-hi); box-shadow: var(--edge-raise); margin-top: 3px; flex: 0 0 auto; }
.cnt-tl-dot.is-done { background: var(--accent); }
.cnt-tl-dot.is-active { background: var(--accent); box-shadow: 0 0 0 4px var(--cnt-primary-soft); }
.cnt-tl-line { flex: 1; width: 2px; background: linear-gradient(180deg, rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)), transparent); margin: 4px 0; }
.cnt-tl-body { padding-bottom: 22px; }
.cnt-tl-time { font: 600 11px/1 var(--font-mono); color: var(--fg-4); }
.cnt-tl-title { font: 600 14px/1.3 var(--font-sans); color: var(--fg-1); margin: 3px 0 2px; }
.cnt-tl-text { font: 400 13px/1.5 var(--font-sans); color: var(--fg-3); }

.cnt-steps { display: flex; align-items: flex-start; gap: 0; }
.cnt-step { display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center; position: relative; }
.cnt-step:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.5)); }
.cnt-step.is-done::after { background: var(--accent); }
.cnt-step-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-content: center; background: var(--cnt-surface-hi); box-shadow: var(--edge-raise); color: var(--fg-3); font: 600 13px/1 var(--font-mono); z-index: 1; }
.cnt-step.is-active .cnt-step-dot { background: var(--accent); color: var(--accent-fg); box-shadow: var(--edge-raise), 0 0 0 4px var(--cnt-primary-soft); }
.cnt-step.is-done .cnt-step-dot { background: var(--accent); color: var(--accent-fg); }
.cnt-step-label { font: 500 12px/1.3 var(--font-sans); color: var(--fg-3); margin-top: 8px; }
.cnt-step.is-active .cnt-step-label { color: var(--fg-1); }

/* ════════════════════════════ SKELETON / SHIMMER ═══════════════════════ */
.cnt-skeleton { position: relative; overflow: hidden; border-radius: var(--cnt-radius); background: var(--cnt-hollow); box-shadow: var(--edge-inset); }
.cnt-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(var(--rel-glow), calc(0.06 + var(--rel-lift) * 0.5)), transparent); animation: cnt-shimmer 1.5s var(--ease-in-out) infinite; }
.cnt-skeleton.is-text { height: 12px; margin: 6px 0; }
.cnt-skeleton.is-title { height: 18px; width: 50%; }
.cnt-skeleton.is-circle { border-radius: 50%; }
@keyframes cnt-shimmer { to { transform: translateX(100%); } }

/* ════════════════════════════ EMPTY STATE ══════════════════════════════ */
.cnt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 6px; }
.cnt-empty-ill { width: 76px; height: 76px; border-radius: 50%; display: grid; place-content: center; background: var(--cnt-hollow); box-shadow: var(--edge-inset); color: var(--fg-4); margin-bottom: 10px; }
.cnt-empty-ill svg { width: 34px; height: 34px; }
.cnt-empty-title { font: 700 17px/1.2 var(--font-serif); color: var(--fg-1); }
.cnt-empty-text { font: 400 14px/1.5 var(--font-sans); color: var(--fg-3); max-width: 38ch; }

/* ════════════════════════════ DRAWER / SIDE-SHEET ═════════════════════ */
.cnt-drawer-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(var(--rel-shadow), 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--motion) var(--ease-out); }
.cnt-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.cnt-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 92vw); z-index: 111; background: var(--lake-fill); -webkit-backdrop-filter: blur(calc(var(--lake-blur) + 4px)) saturate(120%); backdrop-filter: blur(calc(var(--lake-blur) + 4px)) saturate(120%); box-shadow: var(--lake-edge), var(--elev-5); transform: translateX(100%); transition: transform var(--motion-slow) var(--ease-out); display: flex; flex-direction: column; }
[dir="rtl"] .cnt-drawer { transform: translateX(-100%); }
.cnt-drawer.is-open { transform: none; }
.cnt-drawer.is-start { inset-inline: 0 auto; transform: translateX(-100%); }
.cnt-drawer.is-start.is-open { transform: none; }
.cnt-drawer-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px; }
.cnt-drawer-title { flex: 1; font: 700 18px/1.2 var(--font-serif); color: var(--fg-1); margin: 0; }
.cnt-drawer-body { flex: 1; overflow-y: auto; padding: 0 22px 22px; }
.cnt-drawer-foot { padding: 16px 22px; display: flex; gap: 8px; justify-content: flex-end; box-shadow: inset 0 1px 0 rgba(var(--rel-shadow), calc(var(--rel-sink) * 0.4)), inset 0 2px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 0.5)); }

/* ════════════════════════════ FILE DROPZONE ════════════════════════════ */
.cnt-dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px; border-radius: var(--cnt-radius-lg); background: var(--cnt-hollow); box-shadow: var(--edge-inset); cursor: pointer; text-align: center; transition: box-shadow var(--motion) var(--ease-out); }
.cnt-dropzone:hover, .cnt-dropzone.is-drag { box-shadow: var(--edge-inset), inset 0 0 0 2px var(--accent); }
.cnt-dropzone svg { width: 30px; height: 30px; color: var(--fg-4); }
.cnt-dropzone-title { font: 600 14px/1.3 var(--font-sans); color: var(--fg-1); }
.cnt-dropzone-title b { color: var(--accent); }
.cnt-dropzone-sub { font: 400 12px/1.3 var(--font-sans); color: var(--fg-4); }
.cnt-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--cnt-radius); background: var(--cnt-surface); box-shadow: var(--edge-raise); }
.cnt-file-ico { width: 34px; height: 34px; border-radius: var(--cnt-radius); display: grid; place-content: center; background: var(--cnt-primary-soft); color: var(--accent); flex: 0 0 auto; }
.cnt-file .grow { flex: 1; min-width: 0; }
.cnt-file-name { font: 500 13px/1.3 var(--font-sans); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnt-file-meta { font: 400 11px/1.3 var(--font-mono); color: var(--fg-4); }

/* ════════════════════════════ TOAST STACK ══════════════════════════════ */
.cnt-toast-stack { position: fixed; z-index: 130; inset-block-end: 24px; inset-inline-end: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.cnt-toast-stack .cnt-toast { pointer-events: auto; min-width: 260px; box-shadow: var(--lake-edge), var(--elev-4); animation: cnt-toast-in var(--motion-slow) var(--ease-spring); }
.cnt-toast .cnt-toast-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.cnt-toast.is-success .cnt-toast-ico { color: var(--cnt-success); }
.cnt-toast.is-danger .cnt-toast-ico { color: var(--cnt-danger); }
.cnt-toast .grow { flex: 1; }
.cnt-toast button { border: 0; background: none; color: var(--fg-4); cursor: pointer; padding: 2px; }
@keyframes cnt-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }

/* ════════════════════════════ BANNER ═══════════════════════════════════ */
.cnt-banner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: var(--cnt-radius); background: var(--cnt-primary-soft); color: var(--fg-1); font: 500 14px/1.4 var(--font-sans); }
.cnt-banner .cnt-spacer { flex: 1; }
.cnt-banner svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }

/* ════════════════════════════ CHART (hypsometric bars/area) ═════════════
   Pure-CSS data viz that reads the palette's elevation ramp — bars and an area
   chart whose fill is the same low→high gradient as the terrain, so data viz
   belongs to the same world. Heights set inline via --v (0..1). */
.cnt-chart { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding: 14px; border-radius: var(--cnt-radius-lg); background: var(--cnt-surface); box-shadow: var(--edge-raise); }
.cnt-bar { flex: 1; border-radius: var(--cnt-radius) var(--cnt-radius) 2px 2px; background: linear-gradient(180deg, color-mix(in oklab, var(--rel-low), var(--rel-high) 95%), color-mix(in oklab, var(--rel-low), var(--rel-high) 45%)); box-shadow: inset 0 1px 0 rgba(var(--rel-glow), calc(var(--rel-lift) * 1.2)); height: calc(var(--v, 0.5) * 100%); position: relative; transition: height var(--motion-slow) var(--ease-out); }
.cnt-bar.is-accent { background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent), transparent 45%)); }
.cnt-sparkline { position: relative; height: 64px; border-radius: var(--cnt-radius); overflow: hidden; }
.cnt-sparkline svg { width: 100%; height: 100%; display: block; }
.cnt-sparkline .area { fill: url(#cntGrad); opacity: 0.85; }
.cnt-sparkline .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.cnt-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 500 12px/1 var(--font-sans); color: var(--fg-3); }
.cnt-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-end: 6px; vertical-align: -1px; }


/* --- Source: continental-demo.css --- */
/* Shared relief primitives for marketing cameos, composed with the .cnt-*
   library so they read as the same material as the ikmal apps. */

/* ══════════════ before / after cameo ══════════════ */
.ba{--rel-z:2;padding:28px 30px;border-radius:var(--cnt-radius-lg,16px);display:flex;flex-direction:column;gap:16px}
.ba-src{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ba-before,.ba-after{margin:0;font-family:var(--font-serif);font-size:19px;line-height:1.6;transition:opacity .6s var(--ease-default,ease)}
.ba-before{color:var(--fg-4)}
.ba-before span{text-decoration:underline wavy var(--accent);text-decoration-thickness:1.6px;text-underline-offset:5px}
.ba-after{color:var(--fg-1);display:flex;gap:11px}
.ba-after::before{content:"→";color:var(--fg-4);font-family:var(--font-mono);font-size:15px;flex:0 0 auto}
.ba-dots{display:flex;gap:6px;margin-top:2px}
.ba-dots i{width:5px;height:5px;border-radius:50%;background:var(--cnt-hollow,var(--bg-2));box-shadow:var(--edge-inset);transition:background .3s var(--ease-default,ease)}
.ba-dots i.on{background:var(--accent);box-shadow:none}
.ba.swapping .ba-before,.ba.swapping .ba-after{opacity:0}

/* ══════════════ style-guide cameo ══════════════ */
.sg{--rel-z:1;border-radius:var(--cnt-radius-lg,16px);overflow:hidden}
.sg-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:13px;font-weight:600;color:var(--fg-2)}
.sg-head em{font-family:var(--font-mono);font-size:10px;font-style:normal;color:var(--fg-4)}
.sg-rows{padding:0 11px 12px;display:flex;flex-direction:column;gap:8px}
.sg-row{--rel-z:2;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--cnt-radius,10px);font-size:14px;color:var(--fg-2)}
.sg-row .ext{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--fg-4)}
.sg-row .n{flex:1}
.sg-row .c{font-family:var(--font-mono);font-size:11px;color:var(--fg-4)}

/* ══════════════ menu-bar pull-down ══════════════ */
.menubar{width:308px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-window);position:relative}
.mb-head{display:flex;align-items:center;gap:10px;padding:13px 14px}
.mb-head .mk{width:24px;height:24px;flex:0 0 auto}
.mb-head strong{display:block;font-size:12.5px;font-weight:600;color:var(--fg-1)}
.mb-head small{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;color:var(--completed)}
.mb-head .cnt-tag{margin-left:auto}
.mb-body{padding:8px}
.mb-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:var(--cnt-radius,10px);font-size:13px;color:var(--fg-2)}
.mb-item em{font-family:var(--font-mono);font-size:10px;font-style:normal;color:var(--fg-4)}
.mb-item.is-live:hover{color:var(--fg-1)}
.mb-hint{padding:2px 10px 8px;font-size:11.5px;color:var(--fg-4);line-height:1.45}
.mb-services{padding:8px 10px 4px;display:flex;flex-direction:column;gap:7px}
.mb-svc{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--fg-3)}
.mb-svc i{width:6px;height:6px;border-radius:50%;background:var(--completed);box-shadow:0 0 7px rgba(111,163,124,.6);flex:0 0 auto}
.mb-svc i.warn{background:var(--due-soon);box-shadow:0 0 7px rgba(224,164,88,.6)}
.mb-svc em{margin-left:auto;font-family:var(--font-mono);font-size:10px;font-style:normal;color:var(--fg-4)}
.mb-foot{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-4)}


/* --- Source: site-consumer.css --- */
/* ikmal editor — consumer site. Tokens + primitives from ../styles/site.css. */

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 32px;background:color-mix(in oklab,var(--bg-0) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:-.035em}
.brand em{font-style:normal;font-weight:400;color:var(--fg-3)}
.brand .mark{width:26px;height:26px}
.brand .mark svg{width:100%;height:100%}
.navlinks{display:flex;gap:26px;font-size:14px;color:var(--fg-3)}
.navlinks a:hover{color:var(--fg-1)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-right .btn{height:34px;padding:0 16px;font-size:14px;border-radius:var(--radius-2)}
.iconbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-2);background:transparent;border:1px solid var(--border-1);color:var(--fg-3)}
.iconbtn:hover{background:var(--bg-1);color:var(--fg-1)}
.iconbtn svg{width:16px;height:16px}
@media(max-width:1000px){.navlinks{display:none}}

/* ---------- section furniture ---------- */
.sechead{max-width:680px;margin:0 auto;text-align:center}
.sechead .overline{display:block;margin-bottom:14px}
.sechead h2{font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-.032em;font-weight:700;margin-bottom:16px;text-wrap:balance}
.sechead p{color:var(--fg-3);font-size:17.5px;line-height:1.65;text-wrap:pretty}
.sechead.center{margin:0 auto;text-align:center}
.bg-deep-sec{background:var(--bg-deep);border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}

/* ---------- hero ---------- */
.hero{padding:146px 0 108px;overflow:hidden;text-align:center}
.hero-inner{position:relative;max-width:900px;margin:0 auto}
.hero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.05;letter-spacing:-.04em;font-weight:700;margin:24px 0 24px;text-wrap:balance}
.hero h1 .accent{color:var(--accent)}
.hero .lead{max-width:56ch;margin:0 auto 32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.hero-note{margin-top:20px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;color:var(--fg-4)}

/* ---------- demo surfaces live in continental-demo.css (Continental relief) ---------- */

/* ---------- scatter (the problem) ---------- */
.scatter{margin-top:52px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:940px;margin-left:auto;margin-right:auto}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--bg-1);border:1px solid var(--hair);border-radius:var(--radius-3);padding:12px 17px;font-size:14.5px;color:var(--fg-3);box-shadow:var(--shadow-float);animation:float 15s var(--ease) infinite}
.chip .x{color:var(--overdue);font-size:13px}
.chip:nth-child(2n){animation-duration:18s;animation-delay:-5s}
.chip:nth-child(3n){animation-duration:21s;animation-delay:-11s}
.chip:nth-child(5n){animation-duration:24s;animation-delay:-8s}
@keyframes float{50%{transform:translateY(-9px)}}
.scatter-line{display:block;width:100%;text-align:center;margin-top:26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4)}
@media(prefers-reduced-motion:reduce){.chip{animation:none}}

/* ---------- feature rows ---------- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.frow+.frow{margin-top:112px}
.frow.flip .fvis{order:-1}
.frow h3{font-size:clamp(24px,2.4vw,32px);line-height:1.12;letter-spacing:-.028em;font-weight:700;margin-bottom:14px;text-wrap:balance}
.frow p{color:var(--fg-3);font-size:16.5px;line-height:1.65;text-wrap:pretty}
.frow .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block}
.frow ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px}
.frow li{display:flex;gap:11px;font-size:15px;color:var(--fg-2);line-height:1.5}
.frow li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:8px}
@media(max-width:900px){.frow{grid-template-columns:1fr;gap:36px}.frow.flip .fvis{order:0}.frow+.frow{margin-top:80px}}

/* before → after cycler */
.ba{background:var(--bg-1);border:1px solid var(--hair);border-radius:var(--radius-4);padding:30px 32px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-float)}
.ba-src{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ba-before,.ba-after{font-family:var(--font-serif);font-size:19px;line-height:1.6;transition:opacity .4s var(--ease)}
.ba-before{color:var(--fg-4)}
.ba-before span{text-decoration:underline wavy var(--accent);text-decoration-thickness:1.6px;text-underline-offset:5px}
.ba-after{color:var(--fg-1);display:flex;gap:11px}
.ba-after::before{content:"→";color:var(--fg-4);font-family:var(--font-mono);font-size:15px;flex:0 0 auto}
.ba-dots{display:flex;gap:6px;margin-top:4px}
.ba-dots i{width:5px;height:5px;border-radius:50%;background:var(--border-1);transition:background .3s var(--ease)}
.ba-dots i.on{background:var(--accent)}
.ba.swapping .ba-before,.ba.swapping .ba-after{opacity:0}
.ba-before,.ba-after{transition:opacity .6s var(--ease)}
.ba.swapping .ba-before,.ba.swapping .ba-after{opacity:0}

/* app chips */
.apps{display:flex;flex-wrap:wrap;gap:10px}
.app-chip{display:flex;align-items:center;gap:9px;background:var(--bg-1);border:1px solid var(--hair);border-radius:var(--radius-pill);padding:9px 16px 9px 13px;font-size:14px;color:var(--fg-2)}
.app-chip i{width:6px;height:6px;border-radius:50%;background:var(--completed);box-shadow:0 0 8px rgba(111,163,124,.6);flex:0 0 auto}

/* style-guide cameo */
.sg{background:var(--bg-1);border:1px solid var(--hair);border-radius:var(--radius-4);overflow:hidden;box-shadow:var(--shadow-float)}
.sg-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--hair);font-size:13px;font-weight:600}
.sg-head em{font-family:var(--font-mono);font-size:10px;font-style:normal;color:var(--fg-4)}
.sg-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--hair-soft);font-size:14px;color:var(--fg-2)}
.sg-row:last-child{border-bottom:0}
.sg-row .ext{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--fg-4);background:var(--bg-2);border-radius:var(--radius-1);padding:3px 7px}
.sg-row .n{flex:1}
.sg-row .c{font-family:var(--font-mono);font-size:11px;color:var(--fg-4)}
.sg-row .sw{width:32px;height:18px;border-radius:var(--radius-pill);background:var(--accent);position:relative;flex:0 0 auto}
.sg-row .sw::after{content:"";position:absolute;top:2px;left:16px;width:12px;height:12px;border-radius:50%;background:#fff}
.sg-row.off .sw{background:var(--bg-2);border:1px solid var(--border-1)}
.sg-row.off .sw::after{left:2px;background:var(--fg-4)}

/* ---------- technology stack ---------- */
.stack{display:flex;flex-direction:column;gap:12px;margin-top:56px;position:relative}
.layer{display:grid;grid-template-columns:150px 1fr auto;gap:26px;align-items:start;background:var(--bg-1);border:1px solid var(--hair);border-radius:var(--radius-4);padding:22px 26px;opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s var(--ease)}
.layer.in{opacity:1;transform:none}
.layer:hover{border-color:var(--border-2)}
.layer .lnum{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.layer h4{font-size:16.5px;font-weight:600;letter-spacing:-.015em;margin-bottom:7px}
.layer p{font-size:14.5px;color:var(--fg-3);line-height:1.6;max-width:62ch;text-wrap:pretty}
.layer .tags{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.layer .tag{white-space:nowrap}
.layer.opt{background:transparent;border-style:dashed}
.layer.opt .lnum{color:var(--fg-4)}
@media(max-width:900px){.layer{grid-template-columns:1fr;gap:12px}.layer .tags{flex-direction:row;align-items:flex-start;flex-wrap:wrap}}
.stack-note{margin:26px auto 0;text-align:center;font-size:14.5px;color:var(--fg-4);line-height:1.65;max-width:74ch;text-wrap:pretty}
.stack-note a{color:var(--accent)}

/* ---------- privacy ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.pcard{background:var(--bg-1);border:1px solid var(--hair);border-radius:var(--radius-4);padding:24px 26px}
.pcard strong{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.pcard p{font-size:14.5px;color:var(--fg-3);line-height:1.6;text-wrap:pretty}
@media(max-width:820px){.pcards{grid-template-columns:1fr}}
.optout{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---------- command blocks ---------- */
.cmd{display:flex;align-items:center;gap:12px;background:var(--bg-1);border:1px solid var(--hair);border-radius:var(--radius-3);padding:11px 11px 11px 15px;max-width:100%}
.cmd code{font-family:var(--font-mono);font-size:13px;color:var(--fg-2);white-space:nowrap;overflow:auto;flex:1}
.cmd code i{font-style:normal;color:var(--accent);margin-right:10px;user-select:none}
.cmd .copy{flex:0 0 auto;appearance:none;background:var(--bg-2);border:1px solid var(--hair);color:var(--fg-2);border-radius:var(--radius-2);padding:6px 11px;font-family:var(--font-sans);font-size:12px;font-weight:600}
.cmd .copy:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- install ---------- */
.plats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.plat{background:var(--bg-1);border:1px solid var(--hair);border-radius:var(--radius-4);padding:26px 26px 24px;display:flex;flex-direction:column;gap:14px}
.plat-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plat h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.plat-top em{font-family:var(--font-mono);font-size:10px;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4)}
.plat p{font-size:13.5px;color:var(--fg-4);line-height:1.55}
.plat .btn{align-self:flex-start;margin-top:auto}
@media(max-width:900px){.plats{grid-template-columns:1fr}}
.adv{margin-top:24px;border:1px solid var(--hair);border-radius:var(--radius-4);background:var(--bg-1);overflow:hidden}
.adv summary{list-style:none;cursor:pointer;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:500}
.adv summary::-webkit-details-marker{display:none}
.adv summary::after{content:"+";font-family:var(--font-mono);font-size:16px;color:var(--fg-4)}
.adv[open] summary::after{content:"–";color:var(--accent)}
.adv .advbody{padding:4px 24px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:14px}
.advcard{border:1px solid var(--hair);border-radius:var(--radius-3);padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:var(--bg-0)}
.advcard h4{font-size:14px;font-weight:600}
.advcard pre{margin:0;overflow:auto}
.advcard pre code{font-family:var(--font-mono);font-size:11.5px;line-height:1.7;color:var(--fg-2);white-space:pre}
.advcard pre code i{font-style:normal;color:var(--fg-4);user-select:none}
.advcard pre code b{font-weight:400;color:var(--accent)}
.advcard p{font-size:12.5px;color:var(--fg-4);line-height:1.5}

/* ---------- faq ---------- */
.faq{max-width:820px;margin-top:44px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:16.5px;font-weight:500;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:17px;color:var(--fg-4);flex:0 0 auto}
.faq details[open] summary::after{content:"–";color:var(--accent)}
.faq .ans{padding:0 0 22px;font-size:15px;line-height:1.7;color:var(--fg-3);max-width:66ch;text-wrap:pretty}
.faq .ans code{font-family:var(--font-mono);font-size:13px;color:var(--violet-300)}
.faq .ans b{color:var(--fg-1);font-weight:600}

/* ---------- cta ---------- */
.cta{text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:720px;height:340px;background:radial-gradient(ellipse,var(--accent-glow),transparent 70%);filter:blur(60px);opacity:.6;pointer-events:none}
.cta h2{position:relative;font-size:clamp(34px,4vw,54px);line-height:1.05;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.cta p{position:relative;margin:18px auto 30px;max-width:52ch;color:var(--fg-3);font-size:17.5px;line-height:1.6}
.cta-row{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-sub{position:relative;margin-top:18px;font-family:var(--font-mono);font-size:11.5px;color:var(--fg-4);letter-spacing:.02em}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--hair);padding:56px 0 60px;background:var(--bg-deep)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;margin-bottom:40px}
.footer-links{display:flex;gap:40px;flex-wrap:wrap}
.footer-links div{display:flex;flex-direction:column;gap:9px}
.footer-links b{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);font-weight:500}
.footer-links a{font-size:13.5px;color:var(--fg-3)}
.footer-links a:hover{color:var(--fg-1)}
.disclaimer{font-size:12.5px;line-height:1.7;color:var(--fg-4);max-width:78ch;padding-top:26px;border-top:1px solid var(--hair);text-wrap:pretty}
a{color:inherit}
a.link{color:var(--accent)}a.link:hover{color:var(--accent-hover)}
@media(prefers-reduced-motion:reduce){.chip,.layer{opacity:1;transform:none}}



/* =============================================================
   ikmal editor — Consumer Marketing Layout & Polish Additions
   ============================================================= */

:root {
  --bg-deep: var(--slate-0);
  --hair: rgba(255, 255, 255, 0.08);
  --hair-soft: rgba(255, 255, 255, 0.04);
  --accent-glow: rgba(123, 108, 217, 0.28);
  --shadow-window: 0 32px 80px -20px rgba(8, 7, 24, 0.75), 0 0 0 1px var(--hair);
  --shadow-float: 0 16px 36px -8px rgba(8, 7, 24, 0.55), 0 0 0 1px var(--hair-soft);
  --shadow-glow: 0 0 50px rgba(123, 108, 217, 0.25);
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="light"] {
  --bg-deep: #efebe0;
  --hair: rgba(0, 0, 0, 0.08);
  --hair-soft: rgba(0, 0, 0, 0.04);
  --accent-glow: rgba(123, 108, 217, 0.16);
  --shadow-window: 0 24px 60px -16px rgba(40, 30, 60, 0.18), 0 0 0 1px var(--hair);
  --shadow-float: 0 12px 28px -6px rgba(40, 30, 60, 0.12), 0 0 0 1px var(--hair-soft);
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-pad {
  padding: 108px 0;
}
@media (max-width: 768px) {
  .section-pad {
    padding: 64px 0;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: all 0.16s var(--ease-default, ease);
  border: 1px solid transparent;
  padding: 10px 20px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff !important;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(123, 108, 217, 0.3);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #ffffff !important;
  transform: translateY(-1px);
}
.btn-primary:active {
  background: var(--accent-press);
}

.btn-ghost {
  background: var(--bg-1);
  color: var(--fg-2);
  border-color: var(--border-1);
}
.btn-ghost:hover {
  background: var(--bg-2);
  color: var(--fg-1);
  border-color: var(--border-2);
}

.btn-lg {
  height: 48px;
  padding: 0 26px;
  font-size: 15.5px;
  border-radius: var(--radius-3);
}

.btn-sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--radius-1);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  background: var(--bg-1);
  border: 1px solid var(--hair);
  color: var(--fg-3);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--completed);
  box-shadow: 0 0 8px rgba(111, 163, 124, 0.6);
  flex: 0 0 auto;
}

.lead {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--fg-3);
  text-wrap: pretty;
}

.accent {
  color: var(--accent);
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-default, ease), transform 0.6s var(--ease-default, ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Pricing Section */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 56px auto 0;
}
@media (max-width: 720px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-card {
  background: var(--bg-1);
  border: 1px solid var(--hair);
  border-radius: var(--radius-4);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-float);
  position: relative;
  transition: border-color 0.2s var(--ease);
}
.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--accent);
}
.pricing-card:hover {
  border-color: var(--border-2);
}
.pricing-card.featured:hover {
  border-color: var(--accent-hover);
}

.pricing-header {
  margin-bottom: 20px;
}
.pricing-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 8px;
}
.pricing-card.featured .pricing-tag {
  color: var(--accent);
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 16px;
}
.pricing-num {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  line-height: 1;
}
.pricing-period {
  font-size: 14px;
  color: var(--fg-4);
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.45;
}
.pricing-features li::before {
  content: "✓";
  color: var(--completed);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

/* Downloads Section */
.download-box {
  background: var(--bg-1);
  border: 1px solid var(--hair);
  border-radius: var(--radius-4);
  padding: 48px 36px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow-float);
}
.download-box h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
}
.download-box p {
  font-size: 16px;
  color: var(--fg-3);
  max-width: 48ch;
  margin: 0 auto 24px;
}
.download-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}