/* ═══════════════════════════════════════════════════════════════════════════
   NexusLayer design tokens and UI kit, v2 (2026-10-21)

   DO NOT EDIT THIS FILE IN A PRODUCT REPO.
   Source: ~/Corporations/NexusLayer/Layer/DesignKit/nexuslayer-tokens.css
   Same language as nexuslayer.eu, Identity and ModelRouter: dusk navy, teal, the
   product spectrum, Figtree for text and Unbounded for headings.

   v2 keeps every variable name from v1, so components written against v1 pick up
   the new look unchanged. It also adds:
     - .nl-* classes for the shared brand bar, sign-in screen and buttons (NexusUI)
     - a light-theme adapter for dark-first Tailwind classes (text-white, bg-slate-800 …)
   Theme: <html data-theme="light|dark">, set before first paint by the snippet in
   DesignKit/README.md (saved choice in localStorage "nl-theme", else the system).
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ── Brand ramp (theme-independent hues) ──────────────────── */
  --jade-300: #7FD5C6;
  --jade-400: #2BC8AE;
  --jade-500: #1DA9A0;
  --jade-600: #0A8F7C;
  --jade-700: #087565;

  --peri-300: #A9BCFF;
  --peri-400: #7C9BF7;
  --peri-500: #5B7FEF;
  --peri-600: #3563E9;

  --sky-400:   #4CC9FF;
  --amber-400: #FFC56B;
  --amber-500: #E89A2C;
  --rose-400:  #F59EAF;

  /* The spectrum: the products' own colours, as on nexuslayer.eu */
  --c-teal: #2BC8AE; --c-blue: #7C9BF7; --c-violet: #B48CF8; --c-rose: #F59EAF; --c-amber: #FFC56B;
  --spectrum: linear-gradient(90deg, var(--c-teal), var(--c-blue), var(--c-violet), var(--c-rose), var(--c-amber));

  --dusk: #0A1626;
  --dusk-2: #12223A;
  --dusk-3: #1A2D4A;
  --dusk-line: #22344F;
  --dusk-ink: #E8EEF6;
  --dusk-ink-2: #A3B2C7;

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: 'Unbounded', 'Figtree', system-ui, sans-serif;
  --font-sans:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.4rem, 6vw, 4.6rem);
  --fs-h1:      clamp(1.9rem, 4vw, 3rem);
  --fs-h2:      clamp(1.4rem, 2.6vw, 2rem);
  --fs-h3:      clamp(1.1rem, 1.8vw, 1.3rem);
  --fs-lead:    clamp(1rem, 1.4vw, 1.12rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.78rem;
  --fs-mono-label: 0.72rem;

  /* ── Rhythm ───────────────────────────────────────────────── */
  --gut:    clamp(16px, 4vw, 40px);
  --sec-y:  clamp(48px, 7vw, 96px);
  --maxw:   1180px;
  --maxw-prose: 68ch;
  --nav-h:  64px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast:  0.18s;
  --dur:       0.3s;
  --dur-slow:  0.6s;

  /* ── Per-product hues (for small marks only; actions use --pc) ── */
  --pc-teal: #2BC8AE;     --pc-teal-rgb: 43,200,174;
  --pc-violet: #B48CF8;   --pc-violet-rgb: 180,140,248;
  --pc-amber: #FFC56B;    --pc-amber-rgb: 255,197,107;
  --pc-crimson: #F59EAF;  --pc-crimson-rgb: 245,158,175;
  --pc-purple: #B48CF8;   --pc-purple-rgb: 180,140,248;
  --pc-sky: #7C9BF7;      --pc-sky-rgb: 124,155,247;
  --pc-emerald: #2BC8AE;  --pc-emerald-rgb: 43,200,174;
  --pc-orange: #FFC56B;   --pc-orange-rgb: 255,197,107;
  --pc-indigo: #7C9BF7;   --pc-indigo-rgb: 124,155,247;
  --pc-rose: #F59EAF;     --pc-rose-rgb: 245,158,175;
  --pc-lime: #2BC8AE;     --pc-lime-rgb: 43,200,174;
}

/* ═══ DARK (dusk) ═══════════════════════════════════════════════ */
/* Theme blocks use :root[data-theme=…] (specificity 0,2,0) so a product's own leftover
   `:root { --bg: … }` cannot override them. */
:root,
:root[data-theme='dark'],
[data-theme='dark'] {
  color-scheme: dark;

  --bg:            #0B1424;
  --bg-deep:       #0A1626;
  --surface-1:     #111E33;
  --surface-2:     #172742;
  --surface-3:     #1F2E47;
  --surface-glass: rgba(17, 30, 51, 0.82);

  --text:          #E8EEF6;
  --text-rgb:      232, 238, 246;
  --text-strong:   #FFFFFF;
  --text-muted:    #A9B6C8;
  --text-faint:    #7F8EA5;

  --border:        #1F2E47;
  --border-strong: #2C3F5E;

  --brand:          #2BC8AE;
  --brand-strong:   #7FD5C6;
  --brand-contrast: #04201B;
  --brand-soft:     rgba(43, 200, 174, 0.14);
  --brand-line:     rgba(43, 200, 174, 0.38);
  --brand-rgb:      43, 200, 174;

  --accent:      #7C9BF7;
  --accent-soft: rgba(124, 155, 247, 0.16);
  --accent-rgb:  124, 155, 247;

  --warm:        #FFC56B;
  --warm-soft:   rgba(255, 197, 107, 0.15);
  --warm-rgb:    255, 197, 107;

  --danger:      #FF7A93;
  --danger-soft: rgba(255, 122, 147, 0.14);
  --success:     #2BC8AE;

  --grad-brand: linear-gradient(115deg, #2BC8AE 0%, #7C9BF7 100%);
  --grad-warm:  linear-gradient(115deg, #FFC56B 0%, #F59EAF 100%);

  --slow:      #7F8EA5;
  --slow-soft: rgba(127, 142, 165, 0.2);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 14px 36px -16px rgba(43, 200, 174, 0.45);

  --aurora:
    radial-gradient(900px 600px at 85% -10%, rgba(43, 200, 174, 0.08), transparent 60%),
    radial-gradient(800px 600px at 0% 110%, rgba(53, 99, 233, 0.10), transparent 60%);
  --grain-opacity: 0;
  --grid-line: rgba(255, 255, 255, 0.04);
}

/* ═══ LIGHT (paper) ═════════════════════════════════════════════ */
:root[data-theme='light'],
[data-theme='light'] {
  color-scheme: light;

  --bg:            #F4F6F9;
  --bg-deep:       #EEF2F6;
  --surface-1:     #FFFFFF;
  --surface-2:     #EEF2F6;
  --surface-3:     #E3E9F0;
  --surface-glass: rgba(255, 255, 255, 0.86);

  --text:          #0D1B2A;
  --text-rgb:      13, 27, 42;
  --text-strong:   #0D1B2A;
  --text-muted:    #45546A;
  --text-faint:    #6F7D92;

  --border:        #DCE2EA;
  --border-strong: #C5CFDB;

  --brand:          #0A8F7C;
  --brand-strong:   #087565;
  --brand-contrast: #FFFFFF;
  --brand-soft:     rgba(10, 143, 124, 0.10);
  --brand-line:     rgba(10, 143, 124, 0.32);
  --brand-rgb:      10, 143, 124;

  --accent:      #3563E9;
  --accent-soft: rgba(53, 99, 233, 0.10);
  --accent-rgb:  53, 99, 233;

  --warm:        #B86A12;
  --warm-soft:   rgba(184, 106, 18, 0.12);
  --warm-rgb:    184, 106, 18;

  --danger:      #C2334F;
  --danger-soft: rgba(194, 51, 79, 0.10);
  --success:     #0A8F7C;

  --grad-brand: linear-gradient(115deg, #0A8F7C 0%, #3563E9 100%);
  --grad-warm:  linear-gradient(115deg, #E89A2C 0%, #C2334F 100%);

  --slow:      #97A2B3;
  --slow-soft: rgba(151, 162, 179, 0.22);

  --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow-md: 0 1px 2px rgba(13, 27, 42, 0.06), 0 10px 26px -14px rgba(13, 27, 42, 0.2);
  --shadow-lg: 0 30px 60px -30px rgba(13, 27, 42, 0.28);
  --shadow-brand: 0 14px 36px -16px rgba(10, 143, 124, 0.4);

  --aurora: none;
  --grain-opacity: 0;
  --grid-line: rgba(13, 27, 42, 0.05);

  /* Product hues, darkened for contrast on paper */
  --pc-teal: #0A8F7C;     --pc-teal-rgb: 10,143,124;
  --pc-violet: #7C53E0;   --pc-violet-rgb: 124,83,224;
  --pc-amber: #B86A12;    --pc-amber-rgb: 184,106,18;
  --pc-crimson: #C2334F;  --pc-crimson-rgb: 194,51,79;
  --pc-purple: #7C53E0;   --pc-purple-rgb: 124,83,224;
  --pc-sky: #3563E9;      --pc-sky-rgb: 53,99,233;
  --pc-emerald: #0A8F7C;  --pc-emerald-rgb: 10,143,124;
  --pc-orange: #B86A12;   --pc-orange-rgb: 184,106,18;
  --pc-indigo: #3563E9;   --pc-indigo-rgb: 53,99,233;
  --pc-rose: #C2334F;     --pc-rose-rgb: 194,51,79;
  --pc-lime: #0A8F7C;     --pc-lime-rgb: 10,143,124;
}

/* Every product acts in the one NexusLayer teal. (Products set --pc on :root; this wins.)
   --on-pc is the text colour on a --pc fill. */
:root[data-theme] { --pc: var(--brand); --pc-rgb: var(--brand-rgb); --on-pc: var(--brand-contrast); }
:root:not([data-theme]) { --pc: var(--brand); --pc-rgb: var(--brand-rgb); --on-pc: var(--brand-contrast); }

/* ═══ Base ═════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
body, :root[data-theme] body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme] { background: var(--bg); }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
h1.font-bold, h2.font-bold, h1.font-semibold, h2.font-semibold { font-weight: 500; }
code, kbd, pre, .font-mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-soft); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

/* Text on a --pc fill (buttons written as `bg-[var(--pc)] text-white`). */
.text-white[class~="bg-[var(--pc)]"], [class~="bg-[var(--pc)]"] .text-white,
.text-white[class~="bg-[var(--brand)]"], [class~="bg-[var(--brand)]"] .text-white { color: var(--on-pc); }
[class~="bg-[var(--pc)]"]:hover:not(:disabled), [class~="hover:bg-[var(--pc)]"]:hover:not(:disabled) { filter: brightness(1.08); }

/* ═══ Light-theme adapter for dark-first Tailwind classes ══════
   Many screens were written for a dark background with literal Tailwind colours.
   On paper these map to the theme tokens; anything on a coloured fill keeps its colour. */
[data-theme='light'] .text-white:not([class*="bg-"]):not([class*="from-"]) { color: var(--text-strong); }
[data-theme='light'] [class*="text-gray-1"], [data-theme='light'] [class*="text-gray-2"],
[data-theme='light'] [class*="text-slate-1"], [data-theme='light'] [class*="text-slate-2"],
[data-theme='light'] [class*="text-zinc-1"], [data-theme='light'] [class*="text-zinc-2"] { color: var(--text); }
[data-theme='light'] [class*="text-gray-3"], [data-theme='light'] [class*="text-gray-4"],
[data-theme='light'] [class*="text-slate-3"], [data-theme='light'] [class*="text-slate-4"],
[data-theme='light'] [class*="text-zinc-3"], [data-theme='light'] [class*="text-zinc-4"] { color: var(--text-muted); }
[data-theme='light'] [class*="text-gray-5"], [data-theme='light'] [class*="text-slate-5"], [data-theme='light'] [class*="text-zinc-5"] { color: var(--text-faint); }
[data-theme='light'] [class*="bg-gray-9"], [data-theme='light'] [class*="bg-slate-9"], [data-theme='light'] [class*="bg-zinc-9"],
[data-theme='light'] [class*="bg-black"], [data-theme='light'] [class*="bg-neutral-9"] { background-color: var(--surface-1); }
[data-theme='light'] [class*="bg-gray-8"], [data-theme='light'] [class*="bg-slate-8"], [data-theme='light'] [class*="bg-zinc-8"],
[data-theme='light'] [class*="bg-gray-7"], [data-theme='light'] [class*="bg-slate-7"], [data-theme='light'] [class*="bg-zinc-7"],
[data-theme='light'] [class*="bg-neutral-8"] { background-color: var(--surface-2); }
[data-theme='light'] [class*="hover:bg-gray-7"]:hover, [data-theme='light'] [class*="hover:bg-slate-7"]:hover,
[data-theme='light'] [class*="hover:bg-gray-8"]:hover, [data-theme='light'] [class*="hover:bg-slate-8"]:hover { background-color: var(--surface-3); }
[data-theme='light'] [class*="border-gray-6"], [data-theme='light'] [class*="border-gray-7"], [data-theme='light'] [class*="border-gray-8"],
[data-theme='light'] [class*="border-slate-6"], [data-theme='light'] [class*="border-slate-7"], [data-theme='light'] [class*="border-slate-8"],
[data-theme='light'] [class*="border-zinc-7"], [data-theme='light'] [class*="border-zinc-8"],
[data-theme='light'] [class*="divide-gray-8"] > *, [data-theme='light'] [class*="divide-slate-8"] > * { border-color: var(--border); }
[data-theme='light'] [class*="bg-white/5"], [data-theme='light'] [class*="bg-white/10"] { background-color: var(--surface-2); }
[data-theme='light'] [class*="border-white/"] { border-color: var(--border); }
[data-theme='light'] [class*="placeholder-gray"]::placeholder, [data-theme='light'] [class*="placeholder-slate"]::placeholder { color: var(--text-faint); }
[data-theme='light'] input, [data-theme='light'] textarea, [data-theme='light'] select { color: var(--text); }

/* ═══ NexusUI components (.nl-*) ═══════════════════════════════ */
.nl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-family: var(--font-display); font-size: 1rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.nl-brand svg { width: 26px; height: 26px; flex: none; }
.nl-brand small { font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0; }
.nl-dusk .nl-brand small, .nl-auth-story .nl-brand small { color: var(--dusk-ink-2); }

.nl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid transparent;
  font: 600 0.95rem/1.1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s, border-color .18s, color .18s, filter .18s;
}
.nl-btn:disabled { opacity: .55; cursor: default; }
.nl-btn-primary { background: var(--brand); color: var(--brand-contrast); }
.nl-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.nl-btn-quiet { background: transparent; border-color: var(--border-strong); color: var(--text); }
.nl-btn-quiet:hover:not(:disabled) { border-color: var(--text-faint); }
.nl-btn-block { width: 100%; }

.nl-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); cursor: pointer;
}
.nl-icon-btn:hover { color: var(--text); border-color: var(--text-faint); }
.nl-icon-btn svg { width: 17px; height: 17px; }

.nl-account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nl-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--brand-soft); color: var(--text); font: 500 0.75rem/1 var(--font-display);
}
.nl-account-text { min-width: 0; display: grid; }
.nl-account-text b { font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.nl-account-text span { font-size: 0.75rem; color: var(--text-faint); }

/* Sign-in screen */
.nl-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); font-family: var(--font-sans); }
.nl-auth-story {
  position: relative; overflow: hidden; background: var(--dusk); color: var(--dusk-ink);
  padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 28px;
}
.nl-auth-story::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 50% at 72% 58%, rgba(43, 200, 174, 0.14), transparent 70%),
    radial-gradient(45% 45% at 12% 100%, rgba(53, 99, 233, 0.22), transparent 70%);
}
.nl-auth-story > * { position: relative; }
.nl-auth-story h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 300; line-height: 1.08; max-width: 15ch; color: var(--dusk-ink); margin: 0; }
.nl-auth-story .nl-lead { color: var(--dusk-ink-2); font-size: 1.05rem; max-width: 46ch; margin: 16px 0 0; line-height: 1.55; }
.nl-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 480px; }
.nl-points li {
  display: grid; grid-template-columns: 10px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; border-radius: 14px; background: var(--dusk-2); border: 1px solid var(--dusk-line);
}
.nl-points li i { width: 10px; height: 10px; border-radius: 3px; margin-top: 6px; background: var(--hue, var(--c-teal)); }
.nl-points b { display: block; font-weight: 600; color: var(--dusk-ink); }
.nl-points span { color: var(--dusk-ink-2); font-size: 0.9rem; line-height: 1.45; }
.nl-auth-foot { margin-top: auto; font-size: 0.85rem; color: var(--dusk-ink-2); }
.nl-auth-form { background: var(--bg); display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 64px) var(--gut); }
.nl-auth-card { width: 100%; max-width: 400px; display: grid; gap: 20px; }
.nl-auth-card h2 { font-size: 1.6rem; margin: 0; color: var(--text); }
.nl-auth-card .nl-lead { color: var(--text-muted); margin: 8px 0 0; line-height: 1.55; }
.nl-fine { font-size: 0.84rem; color: var(--text-faint); line-height: 1.6; margin: 0; }
.nl-fine a, .nl-auth-card a { color: var(--brand); }
.nl-error { color: var(--danger); font-size: 0.9rem; margin: 0; }
@media (max-width: 860px) {
  .nl-auth { grid-template-columns: 1fr; }
  .nl-points, .nl-auth-foot { display: none; }
  .nl-auth-story { gap: 16px; padding-bottom: 28px; }
  .nl-auth-story h1 { font-size: 1.7rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

.nl-auth-story .nl-icon-btn { border-color: var(--dusk-line); color: var(--dusk-ink-2); }
.nl-auth-story .nl-icon-btn:hover { color: var(--dusk-ink); border-color: var(--dusk-ink-2); }

.nl-plan-banner {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: min(420px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 14px;
  font: 400 0.88rem/1.45 var(--font-sans); color: var(--text);
  background: var(--surface-1); border: 1px solid var(--brand-line); box-shadow: var(--shadow-lg);
}
.nl-plan-banner a { color: var(--brand); font-weight: 600; }
.nl-plan-banner button { background: none; border: 0; color: var(--text-faint); font-size: 1.2rem; line-height: 1; padding: 0 4px; cursor: pointer; }
.nl-plan-banner button:hover { color: var(--text); }
.nl-plan-banner-limit { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.nl-plan-banner-limit a { color: var(--danger); }

/* Sidebar shell used by most services */
.nl-sidebar-head { display: grid; gap: 4px; padding: 18px 16px 14px; border-bottom: 1px solid var(--border); }
.nl-sidebar-head p { margin: 0; font-size: 0.8rem; color: var(--text-faint); }
.nl-sidebar-foot { display: grid; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border); }
.nl-sidebar-foot .nl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nl-sidebar-foot a { color: var(--text-muted); font-size: 0.82rem; text-decoration: none; }
.nl-sidebar-foot a:hover { color: var(--text); }
.nl-brand-compact { font-size: 1.08rem; }

/* Dark tinted panels (bg-purple-900/30 …) read as mud on paper: show them as plain surfaces
   and let their coloured border carry the hue. */
[data-theme='light'] [class*="bg-"][class*="-900/"], [data-theme='light'] [class*="bg-"][class*="-950/"] { background-color: var(--surface-1); }

/* Tailwind cannot apply an opacity modifier to a CSS variable (`bg-[var(--pc)]/20` renders
   nothing), so the common accent tints are defined here. */
[class~="bg-[var(--pc)]/5"], [class~="bg-[var(--pc)]/10"], [class~="bg-[var(--pc)]/15"], [class~="bg-[var(--pc)]/20"],
[class~="bg-[var(--pc)]/25"], [class~="bg-[var(--pc)]/30"],
[class~="bg-[var(--brand)]/10"], [class~="bg-[var(--brand)]/20"] { background-color: var(--brand-soft); }
[class~="hover:bg-[var(--pc)]/10"]:hover, [class~="hover:bg-[var(--pc)]/20"]:hover, [class~="hover:bg-[var(--pc)]/30"]:hover { background-color: var(--brand-soft); }
[class~="border-[var(--pc)]/20"], [class~="border-[var(--pc)]/30"], [class~="border-[var(--pc)]/40"], [class~="border-[var(--pc)]/50"] { border-color: var(--brand-line); }
[class~="text-black"][class~="bg-[var(--pc)]"] { color: var(--on-pc); }

.nl-linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 0.86rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.nl-linkish:hover { color: var(--text); }
.nl-form { display: grid; gap: 12px; }
.nl-field { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--text); }
.nl-field em { font-style: normal; font-weight: 400; color: var(--text-faint); }
.nl-input {
  width: 100%; padding: 10px 12px; border-radius: var(--r-sm); font: 400 0.95rem/1.3 var(--font-sans);
  background: var(--surface-1); color: var(--text); border: 1px solid var(--border-strong);
}
.nl-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* Light-coloured fills (jade, sky, amber) need dark text, not white. */
.text-white[class*="bg-[var(--jade-3"], .text-white[class*="bg-[var(--jade-4"],
.text-white[class*="bg-[var(--sky-4"], .text-white[class*="bg-[var(--amber-4"],
:root:not([data-theme='light']) .text-white[class*="bg-[var(--warm)]"] { color: #0A1626; }
/* Surface-coloured buttons written with text-white follow the theme text colour. */
[data-theme='light'] .text-white[class*="bg-[var(--surface"], [data-theme='light'] .text-white[class*="bg-[var(--bg"] { color: var(--text); }