/* Self-hosted font (SIL Open Font License, see static/fonts/PlusJakartaSans-OFL.txt). */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-400-normal.503e7cbdb484.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-500-normal.e5e6761eaecb.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-600-normal.79e62f3332cd.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-700-normal.5b629bd8abb4.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-800-normal.408ecc6630e8.woff2") format("woff2");
}

/* Northstep design system — tokens and base components.
   Phone-first. Calm navy, amber "north star" accent, green for done. No money imagery.
   Change values here (tokens), not in templates. */

:root {
  --ns-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Color tokens (light) — all text pairs meet WCAG AA 4.5:1 */
  --ns-bg: #F5F6F8;
  --ns-surface: #FFFFFF;
  --ns-surface-strong: #0F1E33;   /* navy: hero cards, primary buttons */
  --ns-ink: #0F1E33;
  --ns-ink-muted: #56627A;
  --ns-ink-on-strong: #FFFFFF;
  --ns-ink-on-strong-muted: #DCE3EF;
  --ns-border: #E3E7EE;
  --ns-divider: #EEF1F5;
  --ns-accent: #F2B544;           /* amber: next step, progress */
  --ns-accent-ink: #0F1E33;
  --ns-accent-soft: #FDF1D8;
  --ns-accent-soft-ink: #7A4E0C;
  --ns-success: #2A7F62;
  --ns-success-soft: #E8F3EE;
  --ns-success-ink: #1F6B50;
  --ns-link: #1F5D8C;
  --ns-track: #E3E7EE;
  --ns-track-on-strong: #33415C;

  /* Type scale */
  --ns-text-xs: 12px;
  --ns-text-sm: 13px;
  --ns-text-md: 15px;
  --ns-text-lg: 18px;
  --ns-text-xl: 22px;
  --ns-text-2xl: 26px;

  /* Spacing (4px grid) */
  --ns-space-1: 4px;
  --ns-space-2: 8px;
  --ns-space-3: 12px;
  --ns-space-4: 16px;
  --ns-space-5: 20px;
  --ns-space-6: 24px;

  /* Shape */
  --ns-radius-sm: 12px;
  --ns-radius-md: 16px;
  --ns-radius-lg: 20px;
  --ns-radius-pill: 999px;
  --ns-tap: 44px;                 /* minimum touch target */
  --ns-shadow-float: 0 6px 18px rgba(15, 30, 51, 0.22);
  --ns-content-max: 560px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ns-bg: #0B1524;
    --ns-surface: #14223A;
    --ns-surface-strong: #1C2E4D;
    --ns-ink: #EEF2F8;
    --ns-ink-muted: #A9B4C7;
    --ns-ink-on-strong-muted: #C9D3E3;
    --ns-border: #26375A;
    --ns-divider: #1F2F4D;
    --ns-accent-soft: #3A2E14;
    --ns-accent-soft-ink: #F6D38F;
    --ns-success: #4DB892;
    --ns-success-soft: #173A2F;
    --ns-success-ink: #7FD6B4;
    --ns-link: #8DB9E6;
    --ns-track: #26375A;
    --ns-track-on-strong: #2E4268;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ns-font);
  font-size: var(--ns-text-md);
  line-height: 1.45;
  color: var(--ns-ink);
  background: var(--ns-bg);
}
a { color: var(--ns-link); }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--ns-link); outline-offset: 2px; }
.ns-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Shell ---------- */
.ns-shell { min-height: 100vh; display: flex; flex-direction: column; }
.ns-main {
  flex: 1;
  width: 100%;
  max-width: var(--ns-content-max);
  margin: 0 auto;
  padding: var(--ns-space-6) var(--ns-space-5) 120px;
  display: flex; flex-direction: column; gap: var(--ns-space-5);
}
.ns-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--ns-surface);
  border-top: 1px solid var(--ns-border);
  padding: var(--ns-space-2) var(--ns-space-3) calc(var(--ns-space-2) + env(safe-area-inset-bottom));
}
.ns-nav ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--ns-content-max);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.ns-nav a {
  min-height: 52px; text-decoration: none; color: var(--ns-ink-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: var(--ns-text-xs); font-weight: 600;
}
.ns-nav a[aria-current="page"] { color: var(--ns-ink); font-weight: 700; }

/* ---------- Page header ---------- */
.ns-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3); }
.ns-eyebrow { font-size: var(--ns-text-sm); font-weight: 500; color: var(--ns-ink-muted); }
.ns-title { font-size: var(--ns-text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.ns-section-title { font-size: 16px; font-weight: 700; }
.ns-avatar {
  width: var(--ns-tap); height: var(--ns-tap); border-radius: 50%;
  background: var(--ns-surface-strong); color: var(--ns-ink-on-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--ns-text-md); flex-shrink: 0;
}

/* ---------- Cards ---------- */
.ns-card {
  background: var(--ns-surface); border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius-md); padding: var(--ns-space-4);
  display: flex; flex-direction: column; gap: var(--ns-space-3);
}
.ns-card--hero {
  background: var(--ns-surface-strong); border-color: transparent;
  border-radius: var(--ns-radius-lg); color: var(--ns-ink-on-strong); text-decoration: none;
}
.ns-card--hero .ns-kicker { color: var(--ns-accent); }
.ns-card--hero .ns-muted { color: var(--ns-ink-on-strong-muted); }
.ns-kicker { font-size: var(--ns-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ns-muted { color: var(--ns-ink-muted); font-size: var(--ns-text-sm); }
.ns-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3); }
.ns-big { font-size: var(--ns-text-xl); font-weight: 800; }

/* ---------- Progress ---------- */
.ns-steps { display: flex; gap: 6px; }
.ns-steps span { flex: 1; height: 8px; border-radius: 4px; background: var(--ns-track-on-strong); }
.ns-steps span.is-done { background: var(--ns-accent); }
.ns-bar { height: 8px; border-radius: 4px; background: var(--ns-track); overflow: hidden; }
.ns-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--ns-accent); }
.ns-bar--success > span { background: var(--ns-success); }

/* ---------- Buttons ---------- */
.ns-button {
  min-height: 52px; padding: 0 var(--ns-space-5); border-radius: 14px; border: none;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ns-space-2);
  text-decoration: none;
}
.ns-button--primary { background: var(--ns-surface-strong); color: var(--ns-ink-on-strong); }
.ns-button--accent { background: var(--ns-accent); color: var(--ns-accent-ink); }
.ns-button--ghost { background: transparent; color: var(--ns-link); min-height: var(--ns-tap); padding: 0; }
.ns-fab {
  position: fixed; right: var(--ns-space-5); bottom: calc(96px + env(safe-area-inset-bottom));
  min-width: 56px; height: 56px; border-radius: 28px; padding: 0 var(--ns-space-5);
  box-shadow: var(--ns-shadow-float);
}

/* ---------- Chips and pills ---------- */
.ns-chips { display: flex; flex-wrap: wrap; gap: var(--ns-space-2); }
.ns-chip {
  min-height: 36px; padding: 0 14px; border-radius: var(--ns-radius-pill);
  border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-ink);
  font: inherit; font-size: var(--ns-text-sm); font-weight: 600;
}
.ns-chip[aria-pressed="true"] { background: var(--ns-surface-strong); color: var(--ns-ink-on-strong); border-color: transparent; }
.ns-pill { white-space: nowrap; padding: 4px 10px; border-radius: var(--ns-radius-pill); font-size: var(--ns-text-xs); font-weight: 700; }
.ns-pill--due { background: var(--ns-accent-soft); color: var(--ns-accent-soft-ink); }
.ns-pill--done { background: var(--ns-success-soft); color: var(--ns-success-ink); }

/* ---------- Lists ---------- */
.ns-list { list-style: none; margin: 0; padding: 0; background: var(--ns-surface);
  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); }
.ns-list > li { display: flex; align-items: center; gap: var(--ns-space-3); padding: var(--ns-space-3) 14px; }
.ns-list > li + li { border-top: 1px solid var(--ns-divider); }

/* ---------- Grids ---------- */
.ns-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ns-stat { padding: 14px var(--ns-space-3); gap: 6px; }
.ns-stat .ns-big small { font-size: 14px; font-weight: 600; color: var(--ns-ink-muted); }

/* ---------- Empty state ---------- */
.ns-empty { text-align: left; gap: var(--ns-space-3); padding: var(--ns-space-5); }
.ns-footnote { font-size: var(--ns-text-xs); color: var(--ns-ink-muted); margin: 0; }

.ns-icon { width: 22px; height: 22px; flex-shrink: 0; }
.ns-section { display: flex; flex-direction: column; gap: 10px; }
.ns-empty p, .ns-card p { margin: 0; }

/* ---------- Forms ---------- */
.ns-auth { gap: var(--ns-space-5); padding-top: var(--ns-space-6); }
.ns-brand { display: flex; align-items: center; gap: var(--ns-space-2); font-weight: 800; font-size: var(--ns-text-lg); color: var(--ns-ink); text-decoration: none; }
.ns-brand-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--ns-surface-strong); color: var(--ns-accent); display: inline-flex; align-items: center; justify-content: center; }
.ns-form { display: flex; flex-direction: column; gap: var(--ns-space-4); }
.ns-field { display: flex; flex-direction: column; gap: 6px; }
.ns-field > label, .ns-field legend { font-size: var(--ns-text-sm); font-weight: 700; padding: 0; }
.ns-field input[type="text"], .ns-field input[type="email"], .ns-field input[type="password"], .ns-field input[type="number"], .ns-field input[type="tel"], .ns-field input[type="url"], .ns-field select {
  min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--ns-border);
  background: var(--ns-surface); color: var(--ns-ink); font: inherit; font-size: 16px; width: 100%;
}
.ns-reveal { position: relative; display: block; }
.ns-reveal input { padding-right: 76px !important; }
.ns-reveal__button { position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 64px; min-height: 44px;
  border: none; border-radius: 10px; background: transparent; color: var(--ns-link); font: inherit;
  font-size: var(--ns-text-sm); font-weight: 700; cursor: pointer; }
.ns-reveal__button:focus-visible { outline: 3px solid var(--ns-link); outline-offset: 1px; }
.ns-field input:focus-visible { outline: 3px solid var(--ns-link); outline-offset: 1px; }
.ns-field fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ns-field fieldset > div { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ns-field fieldset label {
  display: flex; align-items: center; gap: var(--ns-space-3); min-height: 52px; padding: var(--ns-space-3) 14px;
  border: 1px solid var(--ns-border); border-radius: 14px; background: var(--ns-surface); font-weight: 600; cursor: pointer;
}
.ns-field fieldset input[type="radio"] { width: 20px; height: 20px; accent-color: var(--ns-surface-strong); flex-shrink: 0; }
.ns-help { font-size: var(--ns-text-xs); color: var(--ns-ink-muted); }
.ns-error { font-size: var(--ns-text-sm); font-weight: 600; color: #B42318; margin: 0; padding: 0; list-style: none; }
@media (prefers-color-scheme: dark) { .ns-error { color: #FF9C8F; } }
.ns-alert { padding: var(--ns-space-3) 14px; border-radius: var(--ns-radius-sm); background: var(--ns-accent-soft); color: var(--ns-accent-soft-ink); font-size: var(--ns-text-sm); font-weight: 600; }
.ns-center { text-align: center; }
.ns-button--block { width: 100%; }
a.ns-avatar { text-decoration: none; }

/* ---------- Onboarding ---------- */
.ns-setup-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--ns-tap); }
.ns-setup-right { display: flex; align-items: center; gap: 12px; }
.ns-setup-right form { margin: 0; }
.ns-setup-step { margin-top: -8px; }
.ns-welcome-mark { width: 72px; height: 72px; border-radius: 22px; background: var(--ns-surface-strong); color: var(--ns-accent);
  display: inline-flex; align-items: center; justify-content: center; }
.ns-lead { font-size: 17px; color: var(--ns-ink-muted); margin: 0; }
.ns-promise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ns-space-3); }
.ns-promise li { display: flex; gap: var(--ns-space-3); align-items: flex-start; font-weight: 600; }
.ns-promise-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--ns-accent-soft); color: var(--ns-accent-soft-ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ns-promise small { display: block; font-weight: 500; color: var(--ns-ink-muted); font-size: var(--ns-text-sm); }

/* One-tap choice cards (each is a submit button) */
.ns-choices { display: flex; flex-direction: column; gap: var(--ns-space-3); }
.ns-choice {
  display: flex; align-items: center; gap: var(--ns-space-4); width: 100%; min-height: 76px; text-align: left;
  padding: var(--ns-space-4); border-radius: var(--ns-radius-md); border: 2px solid var(--ns-border);
  background: var(--ns-surface); color: var(--ns-ink); font: inherit; cursor: pointer;
}
.ns-choice:hover { border-color: var(--ns-ink-muted); }
.ns-choice[aria-pressed="true"] { border-color: var(--ns-surface-strong); box-shadow: inset 0 0 0 1px var(--ns-surface-strong); }
.ns-choice-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--ns-bg); color: var(--ns-ink);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ns-choice strong { display: block; font-size: 16px; }
.ns-choice span.ns-muted { display: block; margin-top: 2px; }
.ns-choice-arrow { margin-left: auto; color: var(--ns-ink-muted); flex-shrink: 0; }

/* The ladder */
.ns-ladder { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 8px; }
.ns-ladder::before { content: ""; position: absolute; left: 29px; top: 28px; bottom: 28px; width: 3px; border-radius: 2px; background: var(--ns-track); }
.ns-rung {
  position: relative; display: flex; align-items: center; gap: var(--ns-space-4); width: 100%; min-height: 64px;
  padding: var(--ns-space-2) var(--ns-space-3) var(--ns-space-2) 0; background: none; border: none; text-align: left;
  font: inherit; color: var(--ns-ink); cursor: pointer; border-radius: var(--ns-radius-sm);
}
.ns-rung:hover .ns-rung-name { text-decoration: underline; }
.ns-rung-dot { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ns-track); background: var(--ns-surface);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; font-weight: 800; font-size: 13px; color: var(--ns-ink-muted); }
.ns-rung-name { font-weight: 700; font-size: 16px; }
.ns-rung small { display: block; color: var(--ns-ink-muted); font-size: var(--ns-text-sm); font-weight: 500; }
.ns-rung.is-reached .ns-rung-dot { background: var(--ns-success); border-color: var(--ns-success); color: #FFFFFF; }
.ns-rung.is-current .ns-rung-dot { background: var(--ns-surface-strong); border-color: var(--ns-surface-strong); color: var(--ns-accent); }
.ns-rung.is-next .ns-rung-dot { border-color: var(--ns-accent); color: var(--ns-accent-soft-ink); }
.ns-rung-tag { margin-left: auto; }

/* Steppers */
.ns-stepper-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3); padding: var(--ns-space-3) 0; }
.ns-stepper-row + .ns-stepper-row { border-top: 1px solid var(--ns-divider); }
.ns-stepper-row label { font-weight: 700; }
.ns-stepper-row small { display: block; color: var(--ns-ink-muted); font-size: var(--ns-text-sm); font-weight: 500; }
.ns-stepper { display: flex; align-items: center; gap: var(--ns-space-2); flex-shrink: 0; }
.ns-stepper button {
  width: var(--ns-tap); height: var(--ns-tap); border-radius: 50%; border: 1px solid var(--ns-border); background: var(--ns-surface);
  color: var(--ns-ink); font: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
}
.ns-stepper input {
  width: 72px; min-height: var(--ns-tap); text-align: center; border-radius: 12px; border: 1px solid var(--ns-border);
  background: var(--ns-surface); color: var(--ns-ink); font: inherit; font-size: 18px; font-weight: 800;
  -moz-appearance: textfield;
}
.ns-stepper input::-webkit-outer-spin-button, .ns-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ns-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-space-2); }
.ns-preset {
  min-height: 64px; border-radius: 14px; border: 2px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-ink);
  font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px;
}
.ns-preset strong { font-size: 15px; }
.ns-preset span { font-size: var(--ns-text-xs); color: var(--ns-ink-muted); }
.ns-preset[aria-pressed="true"] { border-color: var(--ns-surface-strong); }
.ns-check { display: flex; align-items: center; gap: var(--ns-space-3); min-height: 52px; font-weight: 700; cursor: pointer; }
.ns-check input { width: 24px; height: 24px; accent-color: var(--ns-surface-strong); }
.ns-actions { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ns-soon { align-items: flex-start; }
.ns-center-self { align-self: center; }
.ns-kicker--muted { color: var(--ns-ink-muted); }
.ns-card--hero a { color: var(--ns-ink-on-strong); font-weight: 700; }

/* ---------- Toasts ---------- */
.ns-toasts { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ns-toast { padding: var(--ns-space-3) 14px; border-radius: var(--ns-radius-sm); font-size: var(--ns-text-sm); font-weight: 600;
  background: var(--ns-success-soft); color: var(--ns-success-ink); }
.ns-toast--error { background: var(--ns-accent-soft); color: var(--ns-accent-soft-ink); }

/* ---------- Prospects ---------- */
.ns-search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px;
  background: var(--ns-surface); border: 1px solid var(--ns-border); color: var(--ns-ink-muted); }
.ns-search input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--ns-ink); min-height: 46px; }
a.ns-chip { display: inline-flex; align-items: center; text-decoration: none; }
a.ns-chip[aria-current="true"] { background: var(--ns-surface-strong); color: var(--ns-ink-on-strong); border-color: transparent; }
.ns-pcard { text-decoration: none; color: var(--ns-ink); }
.ns-pcard:hover { border-color: var(--ns-ink-muted); }
.ns-avatar--soft { background: var(--ns-bg); color: var(--ns-ink); border: 1px solid var(--ns-border); }
.ns-pcard-next { font-size: 14px; color: var(--ns-ink-muted); }
.ns-pcard-next b { color: var(--ns-ink); }
.ns-actions-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-2); }
.ns-actions-row form, .ns-actions-row .ns-button { width: 100%; }
.ns-button--soft { background: var(--ns-surface); color: var(--ns-ink); border: 1px solid var(--ns-border); }
.ns-button--sm { min-height: var(--ns-tap); font-size: 14px; padding: 0 14px; border-radius: 12px; }
.ns-stage-form { display: flex; flex-wrap: wrap; gap: var(--ns-space-2); }
.ns-stage-form .ns-chip { cursor: pointer; }
.ns-field textarea, .ns-field input[type="date"], .ns-field input[type="time"] {
  min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ns-border);
  background: var(--ns-surface); color: var(--ns-ink); font: inherit; font-size: 16px; width: 100%;
}
.ns-icon-button { width: var(--ns-tap); height: var(--ns-tap); border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--ns-success-soft); color: var(--ns-success-ink); flex-shrink: 0; }
.ns-list a.ns-list-link { display: flex; align-items: center; gap: var(--ns-space-3); flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ns-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-overdue { color: var(--ns-accent-soft-ink); font-weight: 700; }
.ns-grow { flex: 1; min-width: 0; }
.ns-push { margin-left: auto; }
.ns-preline { white-space: pre-line; }
.ns-block { display: block; }
.ns-card--hero .ns-button--ghost { color: var(--ns-ink-on-strong); }
.ns-inline { display: flex; gap: var(--ns-space-2); }
.ns-inline input { flex: 1; min-width: 0; min-height: var(--ns-tap); padding: 0 12px; border-radius: 12px; border: 1px solid var(--ns-border);
  background: var(--ns-surface); color: var(--ns-ink); font: inherit; font-size: 16px; }

/* ---------- Targets ---------- */
.ns-ladder-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-2); }
.ns-ladder-strip li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--ns-radius-pill);
  background: var(--ns-surface); border: 1px solid var(--ns-border); color: var(--ns-ink-muted); font-size: var(--ns-text-sm); font-weight: 600; }
.ns-ladder-strip li.is-reached { background: var(--ns-success-soft); color: var(--ns-success-ink); border-color: transparent; font-weight: 700; }
.ns-ladder-strip li.is-target { background: var(--ns-surface-strong); color: var(--ns-ink-on-strong); border-color: transparent; font-weight: 700; }
.ns-req { display: flex; gap: var(--ns-space-3); padding: var(--ns-space-3) 0; border-top: 1px solid var(--ns-divider); }
.ns-req-body { display: flex; flex-direction: column; gap: 6px; }
.ns-req-mark { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ns-track); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.ns-req.is-met .ns-req-mark { background: var(--ns-success); border-color: var(--ns-success); color: #FFFFFF; }
.ns-req.is-met strong { color: var(--ns-ink-muted); }
.ns-req-num { font-weight: 800; white-space: nowrap; }
.ns-details summary { cursor: pointer; color: var(--ns-link); font-weight: 600; font-size: var(--ns-text-sm); min-height: 32px; display: flex; align-items: center; }
.ns-details p { margin: 4px 0 0; font-size: var(--ns-text-sm); color: var(--ns-ink-muted); }
details.ns-card summary { font-weight: 700; color: var(--ns-ink); font-size: 16px; }
.ns-plain { margin: 0; padding-left: 20px; color: var(--ns-ink-muted); }
.ns-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-space-2); }
.ns-plan-grid > div { display: flex; flex-direction: column; }

/* ---------- Teams ---------- */
.ns-input { min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--ns-border);
  background: var(--ns-bg); color: var(--ns-ink); font: inherit; font-size: 15px; width: 100%; }
.ns-button--secondary { background: var(--ns-surface); color: var(--ns-ink); border: 1px solid var(--ns-border); }
.ns-button--danger { color: #B42318; }
@media (prefers-color-scheme: dark) { .ns-button--danger { color: #FF9C8F; } }
.ns-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ns-checks li { position: relative; padding-left: 30px; font-size: var(--ns-text-sm); line-height: 1.45; }
.ns-checks li::before { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.ns-checks li.is-yes::before { content: "✓"; background: var(--ns-success-soft); color: var(--ns-success-ink); }
.ns-checks li.is-no::before { content: "✕"; background: var(--ns-track); color: var(--ns-ink-muted); }
.ns-checks li.is-todo::before { content: ""; border: 2px solid var(--ns-track); box-sizing: border-box; }
.ns-team-glance { display: flex; flex-direction: row; text-align: left; align-items: center; justify-content: space-between; gap: var(--ns-space-3); color: var(--ns-ink); text-decoration: none; }
.ns-team-glance .ns-kicker { color: var(--ns-ink-muted); }

/* ---------- Team playbook ---------- */
.ns-pb { list-style: none; margin: 0; padding: 0; }
.ns-pb-item { display: flex; gap: var(--ns-space-3); padding: var(--ns-space-3) 0; border-top: 1px solid var(--ns-divider); }
.ns-pb-item:first-child { border-top: 0; padding-top: 0; }
.ns-pb-box { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--ns-track); background: var(--ns-surface);
  color: #FFFFFF; font-weight: 800; font-size: 18px; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.ns-pb-box.is-static { cursor: default; border-style: dashed; }
.ns-pb-item.is-done .ns-pb-box { background: var(--ns-success); border-color: var(--ns-success); border-style: solid; }
.ns-pb-item.is-done strong { color: var(--ns-ink-muted); }
.ns-field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }

/* ---------- Learn ---------- */
.ns-lesson-hero { gap: var(--ns-space-2); }
.ns-lesson-go { color: var(--ns-accent); font-weight: 700; margin-top: var(--ns-space-2); }
.ns-lesson-num { width: 36px; height: 36px; border-radius: 50%; background: var(--ns-track); color: var(--ns-ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.ns-lesson-num.is-done { background: var(--ns-success); color: #FFFFFF; }
.ns-audio audio { width: 100%; }
.ns-prose { font-size: 17px; line-height: 1.65; }
.ns-prose h2 { font-size: var(--ns-text-lg); margin: var(--ns-space-5) 0 var(--ns-space-2); }
.ns-prose p { margin: 0 0 var(--ns-space-3); }
.ns-quiz { gap: var(--ns-space-4); }
.ns-question { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ns-question legend { font-weight: 700; margin-bottom: var(--ns-space-2); padding: 0; }
.ns-option { display: flex; align-items: center; gap: var(--ns-space-3); min-height: var(--ns-tap); padding: 10px 14px;
  border: 1px solid var(--ns-border); border-radius: 14px; background: var(--ns-surface); cursor: pointer; }
.ns-option input { width: 20px; height: 20px; accent-color: var(--ns-surface-strong); flex-shrink: 0; margin: 0; }
.ns-option:has(input:checked) { border-color: var(--ns-surface-strong); box-shadow: inset 0 0 0 1px var(--ns-surface-strong); }
.ns-option.is-right, .ns-option.is-right:has(input:checked) { border-color: var(--ns-success); background: var(--ns-success-soft); box-shadow: none; }
.ns-option.is-wrong, .ns-option.is-wrong:has(input:checked) { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; }
.ns-explain { margin: 0; font-size: var(--ns-text-sm); color: var(--ns-ink-muted); }
.ns-alert--success { background: var(--ns-success-soft); color: var(--ns-success-ink); }

/* ---------- Compliance check ---------- */
.ns-checked-text { padding: var(--ns-space-3) 14px; border-radius: 14px; background: var(--ns-bg); line-height: 1.6; overflow-wrap: anywhere; }
.ns-mark { border-radius: 4px; padding: 0 2px; color: inherit; }
.ns-mark--fix { background: #FCD9D5; box-shadow: inset 0 -2px 0 #B42318; }
.ns-mark--check { background: var(--ns-accent-soft); box-shadow: inset 0 -2px 0 var(--ns-accent); }
.ns-finding { border-left: 4px solid var(--ns-track); padding: 2px 0 2px 12px; display: flex; flex-direction: column; gap: 4px; }
.ns-finding p { margin: 0; font-size: var(--ns-text-sm); color: var(--ns-ink-muted); }
.ns-finding .ns-finding-fix { color: var(--ns-ink); font-weight: 600; }
.ns-finding-words { font-size: var(--ns-text-sm); font-weight: 600; }
.ns-finding.is-fix { border-color: #B42318; }
.ns-finding.is-check { border-color: var(--ns-accent); }
.ns-finding.is-approval { border-color: var(--ns-link); }
.ns-field textarea { min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-ink); font: inherit; font-size: 16px; width: 100%; }
@media (prefers-color-scheme: dark) { .ns-mark--fix { background: #5A1E19; } }

/* ---------- Library ---------- */
.ns-list > li.ns-lib-item { display: flex; flex-direction: column; align-items: stretch; gap: var(--ns-space-2); padding: var(--ns-space-3) var(--ns-space-4); }
.ns-lib-item audio { width: 100%; height: 40px; }
.ns-lib-item .ns-button--ghost { min-height: var(--ns-tap); padding: 0 4px; }
.ns-field input[type="file"] { font: inherit; font-size: 15px; padding: 12px; border: 1px dashed var(--ns-border); border-radius: 14px; background: var(--ns-bg); width: 100%; }
.ns-lib-item .ns-row { width: 100%; }
.ns-lib-item .ns-grow { flex: 1; min-width: 0; text-align: left; }
.ns-lib-form .ns-field:has(input[type="checkbox"]) { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--ns-space-3); min-height: var(--ns-tap); }
.ns-lib-form .ns-field:has(input[type="checkbox"]) > label { font-size: 16px; font-weight: 600; }
.ns-lib-form input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--ns-surface-strong); margin: 0; }

/* ---------- Materials ---------- */
.ns-pill--bad { background: #FCD9D5; color: #8A1C12; }
.ns-pill--wait { background: var(--ns-track); color: var(--ns-ink-muted); }
@media (prefers-color-scheme: dark) { .ns-pill--bad { background: #5A1E19; color: #FFC2BA; } }
.ns-alert--bad { background: #FCD9D5; color: #8A1C12; }
@media (prefers-color-scheme: dark) { .ns-alert--bad { background: #5A1E19; color: #FFC2BA; } }
.ns-attention { border-color: var(--ns-accent); }
.ns-plainlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ns-plainlist a { color: var(--ns-ink); text-decoration: none; min-height: var(--ns-tap); font-weight: 600; }
.ns-facts { margin: 0; display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ns-facts > div { display: flex; justify-content: space-between; gap: var(--ns-space-3); }
.ns-facts dt { color: var(--ns-ink-muted); }
.ns-facts dd { margin: 0; font-weight: 700; text-align: right; }
.ns-list-link .ns-pill { flex-shrink: 0; }
.ns-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-3); }
.ns-tool { color: var(--ns-ink); text-decoration: none; gap: var(--ns-space-1, 4px); }
.ns-tool .ns-kicker { color: var(--ns-ink-muted); }
.ns-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Recruiting ---------- */
.ns-pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-space-2); }
.ns-pipeline li { display: flex; flex-direction: column; padding: var(--ns-space-2) var(--ns-space-3); border-radius: 12px; background: var(--ns-bg); }
.ns-pipeline li.has .ns-big { color: var(--ns-ink); }
.ns-pipeline li:not(.has) .ns-big { color: var(--ns-ink-muted); }
.ns-pipeline .ns-muted { font-size: var(--ns-text-xs); }

/* ---------- Coaching flags ---------- */
.ns-flag { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: var(--ns-radius-pill); font-size: var(--ns-text-xs); font-weight: 700; }
.ns-flag--good { background: var(--ns-success-soft); color: var(--ns-success-ink); }
.ns-flag--warn { background: var(--ns-accent-soft); color: var(--ns-accent-soft-ink); }
.ns-checks li.is-warn::before { content: "!"; background: var(--ns-accent-soft); color: var(--ns-accent-soft-ink); }

/* ---------- Opportunities Radar ---------- */
.ns-opp p { margin: 0; }
.ns-opp-who { color: var(--ns-ink); text-decoration: none; }
.ns-opp-kind { display: inline-block; margin-top: 2px; font-size: var(--ns-text-sm); font-weight: 700; color: var(--ns-success-ink); }
.ns-opp-kind--cold { color: var(--ns-accent-soft-ink); }
.ns-opp-kind--referral { color: var(--ns-link); }
.ns-opp-clue { font-style: italic; }

/* ---------- Contacts import ---------- */
.ns-steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--ns-text-sm); color: var(--ns-ink-muted); }
.ns-pick { display: flex; align-items: center; gap: var(--ns-space-3); width: 100%; min-height: var(--ns-tap); cursor: pointer; }
.ns-pick input { width: 22px; height: 22px; accent-color: var(--ns-surface-strong); flex-shrink: 0; margin: 0; }
.ns-pick .ns-grow { min-width: 0; }
.ns-sticky-bottom { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); box-shadow: 0 6px 20px rgba(15, 30, 51, 0.18); }
.ns-import-link { font-weight: 600; align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; }
.ns-opp-kind--birthday, .ns-opp-kind--anniversary { color: var(--ns-accent-soft-ink); }
.ns-check-inline { display: flex; align-items: center; gap: var(--ns-space-2); min-height: var(--ns-tap); font-weight: 600; }
.ns-check-inline input { width: 22px; height: 22px; accent-color: var(--ns-surface-strong); margin: 0; }
.ns-card textarea { min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-ink); font: inherit; font-size: 16px; width: 100%; }

/* ---------- Weekly recap ---------- */
.ns-table { width: 100%; border-collapse: collapse; font-size: var(--ns-text-sm); }
.ns-table th, .ns-table td { padding: 10px 4px; text-align: right; border-bottom: 1px solid var(--ns-divider); }
.ns-table th[scope="row"], .ns-table thead th:first-child { text-align: left; font-weight: 600; }
.ns-table thead th { color: var(--ns-ink-muted); font-weight: 600; }
.ns-table tr:last-child th, .ns-table tr:last-child td { border-bottom: 0; }
.ns-up { color: var(--ns-success); font-size: 11px; }
.ns-kudos { display: flex; flex-direction: row; text-align: left; align-items: center; justify-content: space-between; gap: var(--ns-space-3); border-color: var(--ns-success); }

/* ---------- Practice conversations ---------- */
.ns-chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ns-bubble { max-width: 85%; padding: 10px 14px; border-radius: 18px; line-height: 1.45; }
.ns-bubble.is-them { background: var(--ns-surface); border: 1px solid var(--ns-border); align-self: flex-start; border-bottom-left-radius: 6px; }
.ns-bubble.is-me { background: var(--ns-surface-strong); color: var(--ns-ink-on-strong); align-self: flex-end; border-bottom-right-radius: 6px; }
.ns-chat-form textarea { min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-ink); font: inherit; font-size: 16px; width: 100%; }

/* ---------- Team extras ---------- */
.ns-board > li { gap: var(--ns-space-3); }
.ns-board > li.is-me { background: var(--ns-success-soft); }
.ns-board-rank { width: 28px; height: 28px; border-radius: 50%; background: var(--ns-bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--ns-text-sm); flex-shrink: 0; }
.ns-script-body { margin: var(--ns-space-2) 0 0; font-size: 16px; line-height: 1.6; color: var(--ns-ink); }
.ns-script + .ns-script { border-top: 1px solid var(--ns-divider); padding-top: var(--ns-space-3); }
.ns-field input[type="datetime-local"] { min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-ink); font: inherit; font-size: 16px; width: 100%; }
.ns-linkrow { display: flex; flex-wrap: wrap; gap: var(--ns-space-4); }
.ns-linkrow a { min-height: var(--ns-tap); display: inline-flex; align-items: center; }

/* ---------- Learning Radar, News, Events (T-041) ---------- */
.ns-feed { display: flex; flex-direction: column; gap: var(--ns-space-2); margin: 0; padding: 0; }
.ns-feed-item { display: flex; flex-direction: column; gap: 4px; }
.ns-feed-item.is-done { opacity: .72; }
.ns-feed-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.ns-feed-link strong { color: var(--ns-ink); line-height: 1.3; }
.ns-feed-link:hover strong { text-decoration: underline; }
.ns-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--ns-text-sm); }
.ns-feed-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.ns-feed-actions .ns-button--ghost { font-size: var(--ns-text-sm); }

/* ---------- Schedule (T-043) ---------- */
.ns-day { margin-top: var(--ns-space-3); }
.ns-day h2 { font-size: var(--ns-text-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--ns-ink-muted); margin: 0 0 6px; }
.ns-slot { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; min-height: var(--ns-tap); }
.ns-slot-time { font-weight: 700; font-size: var(--ns-text-sm); }
.ns-slot-kind { font-size: var(--ns-text-xs); font-weight: 700; color: var(--ns-ink-muted); }
.ns-slot-kind--client { color: #1E6B52; }
.ns-slot-kind--training, .ns-slot-kind--team { color: #7A4E0C; }
@media (prefers-color-scheme: dark) { .ns-slot-kind--client { color: #7FD4B0; } .ns-slot-kind--training, .ns-slot-kind--team { color: #F6D38F; } }
.ns-plan-grid.ns-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ns-module summary { display: flex; align-items: center; gap: 12px; min-height: var(--ns-tap); cursor: pointer; list-style: none; }
.ns-module summary::-webkit-details-marker { display: none; }
.ns-module summary::after { content: "›"; transform: rotate(90deg); transition: transform .15s; font-size: 20px; color: var(--ns-ink-muted); }
.ns-module[open] summary::after { transform: rotate(-90deg); }
.ns-module .ns-lessons { margin-top: var(--ns-space-2); }
.ns-prose ul, .ns-prose ol { padding-left: 20px; margin: 0 0 12px; }
.ns-prose li { margin-bottom: 6px; }
.ns-recap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-space-2); margin: 8px 0; }
.ns-recap-grid > div { display: flex; flex-direction: column; }
.ns-recap p { margin: 6px 0 0; font-size: var(--ns-text-sm); }
.ns-recap-focus { color: var(--ns-accent-soft-ink); }
[hidden] { display: none !important; }
.ns-day ul.ns-card { padding: 6px 16px; }
.ns-course-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--ns-space-3); }
.ns-step summary { display: flex; align-items: center; gap: 12px; min-height: var(--ns-tap); cursor: pointer; list-style: none; font-weight: 700; }
.ns-step summary::-webkit-details-marker { display: none; }
.ns-step summary::after { content: "›"; margin-left: auto; transform: rotate(90deg); transition: transform .15s; font-size: 20px; color: var(--ns-ink-muted); }
.ns-step[open] summary::after { transform: rotate(-90deg); }
.ns-step > div { margin-top: 8px; }
.ns-lib-item video { width: 100%; max-height: 260px; border-radius: 12px; background: #000; }
.ns-danger-link { color: #B42318; font-weight: 600; display: inline-flex; min-height: var(--ns-tap); align-items: center; }
.ns-danger-fill { background: #B42318 !important; color: #fff !important; }
@media (prefers-color-scheme: dark) { .ns-danger-link { color: #FF9C8F; } }
.ns-tour-list { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.ns-tour-list li span { display: block; color: var(--ns-ink-muted); font-size: var(--ns-text-sm); }
.ns-compose summary { display: flex; align-items: center; min-height: var(--ns-tap); cursor: pointer; list-style: none; }
.ns-compose summary::-webkit-details-marker { display: none; }
.ns-compose[open] summary { margin-bottom: 8px; }
.ns-compose .ns-input { margin-bottom: 8px; }
.ns-compose-body { min-height: 120px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.ns-report-row { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.ns-report-row .ns-bar { margin: 2px 0; }
.ns-plans { display: grid; gap: var(--ns-space-3); }
@media (min-width: 640px) { .ns-plans { grid-template-columns: 1fr 1fr; } }
.ns-plan { display: flex; flex-direction: column; gap: 10px; }
.ns-plan--leader { border-color: var(--ns-surface-strong); }
.ns-plan form { margin-top: auto; }
.ns-report-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.ns-report-link.is-static { cursor: default; }

/* Team colors (T-064): a leader picks one; it replaces the amber accent for the team. All pass 4.5:1. */
body[data-team-color="teal"] { --ns-accent: #2BB3A3; --ns-accent-soft: #DDF4F1; --ns-accent-soft-ink: #0B5E55; }
body[data-team-color="blue"] { --ns-accent: #5B9BF0; --ns-accent-soft: #E3EEFD; --ns-accent-soft-ink: #1F4E8C; }
body[data-team-color="green"] { --ns-accent: #4CBF73; --ns-accent-soft: #E2F5E8; --ns-accent-soft-ink: #1C6B37; }
body[data-team-color="coral"] { --ns-accent: #F2836B; --ns-accent-soft: #FDE7E2; --ns-accent-soft-ink: #8A3423; }
body[data-team-color="purple"] { --ns-accent: #A98BF0; --ns-accent-soft: #EEE8FD; --ns-accent-soft-ink: #5232A0; }
@media (prefers-color-scheme: dark) {
  body[data-team-color="teal"] { --ns-accent-soft: #123733; --ns-accent-soft-ink: #8FE0D6; }
  body[data-team-color="blue"] { --ns-accent-soft: #16263F; --ns-accent-soft-ink: #A9C9F7; }
  body[data-team-color="green"] { --ns-accent-soft: #153424; --ns-accent-soft-ink: #9EE0B4; }
  body[data-team-color="coral"] { --ns-accent-soft: #3A1F19; --ns-accent-soft-ink: #F7B6A8; }
  body[data-team-color="purple"] { --ns-accent-soft: #261E3D; --ns-accent-soft-ink: #CDBDF7; }
}
.ns-team-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: var(--ns-surface); flex-shrink: 0; }
.ns-team-banner { display: flex; align-items: center; gap: var(--ns-space-3); }
.ns-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--ns-space-2); }
.ns-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.ns-welcome-card { white-space: pre-line; }
[data-swatch="amber"] { background: #F2B544; }
[data-swatch="teal"] { background: #2BB3A3; }
[data-swatch="blue"] { background: #5B9BF0; }
[data-swatch="green"] { background: #4CBF73; }
[data-swatch="coral"] { background: #F2836B; }
[data-swatch="purple"] { background: #A98BF0; }
fieldset.ns-field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.ns-field > legend { font-weight: 700; font-size: var(--ns-text-sm); margin-bottom: var(--ns-space-2); padding: 0; }