/* JENNi Partner API portal: the account area (JEN-274, redesigned in JEN-509).
 *
 * Two surfaces live here:
 *   .authbtn  the "Sign in / Your account" control in the documentation topbar
 *   .pa       the full-page overlay: sign-in screens when signed out, the partner
 *             workspace when signed in (portal-auth.js renders both)
 *
 * Colour follows the binding JENNi recipe, not the documentation's HSL bridge: navy
 * #001635 text on #FAFCFF in light. Dark mode is near-black with blue as the accent
 * (Caleb, 2026-09-29): #DCF1FF text on navy-tinted near-blacks, #0C0F14 / #161A21 /
 * #23272F with #292E37 rules (the spec allows no pure grey, §15.1), which portal.css
 * gives the documentation and the reference too. Brand blue #1DA4FF is a fill, border
 * and focus colour in light (as text it is 2.7:1 on white). In dark it reads too light
 * for a fill (Caleb, 2026-09-28), so dark mode keeps it for focus rings and link
 * underlines only: buttons, rings, meters and selected borders use the deeper
 * --ws-accent #0A74DA with white text (4.6:1), and links are light-blue text.
 * The dark values are a brand deviation pending the brand owner's sign-off (JEN-532).
 * Red, success and warning never carry text: status is a tint, a dot and ordinary text.
 *
 * The theme is portal.js's: `data-theme` on <html> when the reader picked one, the OS
 * preference otherwise. Every value resolves through the --ws-* tokens below, so light
 * and dark differ in exactly one place each.
 */

/* ---------------------------------------------------------------- topbar control */

.authbtn {
  --ab-cta-bg: var(--brand-dark-blue);
  --ab-cta-fg: var(--brand-light-blue);
  --ab-cta-hover: #0B254A;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button);
  background: transparent;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: var(--scale-sm);
  cursor: pointer;
  transition: background var(--motion-quick) var(--ease-jenni),
              border-color var(--motion-quick) var(--ease-jenni);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .authbtn {
    --ab-cta-bg: #0A74DA;
    --ab-cta-fg: var(--brand-white);
    --ab-cta-hover: #0968C7;
  }
}
:root[data-theme='dark'] .authbtn {
  --ab-cta-bg: #0A74DA;
  --ab-cta-fg: var(--brand-white);
  --ab-cta-hover: #0968C7;
}
.authbtn:hover { background: var(--alpha-blue-08); border-color: var(--brand-blue); }
.authbtn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.authbtn[aria-expanded='true'] { border-color: var(--brand-blue); }
/* Signed out, the control is the page's call to action: the primary button recipe. */
.authbtn[data-state='out'] {
  border-color: var(--ab-cta-bg);
  background: var(--ab-cta-bg);
  color: var(--ab-cta-fg);
}
.authbtn[data-state='out']:hover { background: var(--ab-cta-hover); border-color: var(--ab-cta-hover); }
.authbtn__label { font-weight: 600; white-space: nowrap; }
.authbtn__state {
  font-family: var(--mono);
  font-size: var(--scale-xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--alpha-blue-15);
  color: hsl(var(--foreground));
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.authbtn__state[hidden] { display: none; }
/* `hidden` must win over the display rule above: on a plain static host (config.js
 * sets no JENNI_PORTAL_API) portal-auth.js leaves the toggle hidden, and an
 * author `display` would otherwise put "Sign in / Sign up" on a page with nothing
 * to sign in to. */
.authbtn[hidden] { display: none; }

@media (max-width: 1000px) {
  /* Same rule as .accessbtn in portal.css: one row, two ends, and the brand text on the
   * left must never sit under the controls. The control keeps its STATE only (the
   * signed-in email, or a two-word "Sign in"), because at 375px the full label put the
   * button under the brand link and the click landed on the brand. */
  .authbtn { padding: 0 10px; gap: 0; }
  .authbtn__label { display: none; }
  .authbtn[data-state='out']::before { content: 'Sign in'; font-weight: 600; white-space: nowrap; }
  .authbtn__state { max-width: 140px; }
}
@media (max-width: 860px) {
  .authbtn__state { max-width: 96px; }
}
@media (max-width: 520px) {
  /* Below ~520px the topbar row cannot hold a third control: the access button and the
   * theme button leave no room beside the brand link. The control leaves the row and
   * sits under it at the right edge, over the empty right half of the reference header. */
  .authbtn {
    position: fixed;
    top: 61px;
    right: var(--space-1);
    z-index: 15;
    height: 30px;
    background: hsl(var(--background));
    box-shadow: var(--e1);
  }
  .authbtn[data-state='out'] { background: var(--ab-cta-bg); }
  .authbtn__state { max-width: 160px; }
}

/* ---------------------------------------------------------------- theme tokens */

.pa {
  color-scheme: light;
  --ws-canvas: var(--paper);
  --ws-surface: var(--brand-white);
  --ws-surface-2: var(--paper-2);
  --ws-sunken: var(--paper-2);
  --ws-input: var(--brand-white);
  --ws-text: var(--brand-dark-blue);
  --ws-text-2: var(--ink-2);
  --ws-muted: var(--ink-3);
  --ws-faint: var(--ink-4);
  --ws-control-line: var(--ink-3);
  --ws-line: var(--line);
  --ws-line-2: var(--line-2);
  --ws-link: var(--brand-dark-blue);
  --ws-link-line: var(--brand-blue);
  --ws-focus: var(--brand-dark-blue);
  --ws-halo: 0 0 0 4px var(--alpha-blue-20);
  --ws-input-ring: 0 0 0 3px var(--alpha-blue-20);
  --ws-primary-bg: var(--brand-dark-blue);
  --ws-primary-fg: var(--brand-light-blue);
  --ws-primary-hover: #0B254A;
  --ws-secondary-bg: var(--brand-white);
  --ws-secondary-line: var(--line);
  --ws-secondary-hover: var(--paper-2);
  --ws-ghost-hover: var(--alpha-navy-04);
  --ws-danger-bg: var(--brand-red);
  --ws-danger-fg: var(--brand-dark-blue);
  --ws-nav-bg: var(--brand-white);
  --ws-nav-hover: var(--alpha-navy-04);
  --ws-nav-active: rgba(29,164,255,0.12);
  --ws-top-bg: rgba(250,252,255,0.86);
  --ws-hero-bg: var(--brand-dark-blue);
  --ws-hero-line: var(--brand-dark-blue);
  --ws-hero-fg: var(--brand-light-blue);
  --ws-hero-muted: rgba(220,241,255,0.74);
  --ws-code-bg: var(--paper-2);
  --ws-scrim: var(--alpha-navy-55);
  --ws-shadow-1: 0 1px 2px rgba(0,22,53,0.06), 0 1px 3px rgba(0,22,53,0.06);
  --ws-shadow-2: var(--e2);
  --ws-shadow-3: var(--e4);
  --ws-ok-tint: rgba(45,190,137,0.14);
  --ws-warn-tint: rgba(245,166,35,0.18);
  --ws-bad-tint: rgba(229,75,75,0.12);
  --ws-info-tint: rgba(29,164,255,0.12);
  --ws-none-tint: var(--alpha-navy-04);
  --ws-ok: var(--success);
  --ws-warn: var(--warning);
  --ws-bad: var(--danger);
  --ws-info: var(--brand-blue);
  --ws-none: var(--ink-4);
  --ws-accent: var(--brand-blue);
  --ws-accent-halo: var(--alpha-blue-15);
  --ws-hero-primary-bg: var(--brand-blue);
  --ws-hero-primary-fg: var(--brand-dark-blue);
  --ws-hero-primary-hover: #3CB3FF; /* JENNi spec §8.1 blue hover */
  --ws-hero-glow: rgba(29,164,255,0.30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .pa {
    color-scheme: dark;
    --ws-canvas: #0C0F14;
    --ws-surface: #161A21;
    --ws-surface-2: #23272F;
    --ws-sunken: #0C0F14;
    --ws-input: #0C0F14;
    --ws-text: var(--brand-light-blue);
    --ws-text-2: rgba(220,241,255,0.84);
    --ws-muted: var(--alpha-light-65);
    --ws-faint: rgba(220,241,255,0.42);
    --ws-control-line: rgba(220,241,255,0.42);
    --ws-line: #292E37;
    --ws-line-2: var(--alpha-light-08);
    --ws-link: var(--brand-light-blue);
    --ws-link-line: var(--brand-blue);
    --ws-focus: var(--brand-blue);
    --ws-halo: 0 0 0 4px rgba(29,164,255,0.28);
    --ws-input-ring: 0 0 0 3px rgba(29,164,255,0.28);
    --ws-primary-bg: #0A74DA;
    --ws-primary-fg: var(--brand-white);
    --ws-primary-hover: #0968C7;
    --ws-secondary-bg: var(--alpha-light-04);
    --ws-secondary-line: rgba(220,241,255,0.20);
    --ws-secondary-hover: var(--alpha-light-08);
    --ws-ghost-hover: var(--alpha-light-08);
    --ws-danger-bg: var(--brand-red);
    --ws-danger-fg: var(--brand-dark-blue);
    --ws-nav-bg: #0C0F14;
    --ws-nav-hover: var(--alpha-light-04);
    --ws-nav-active: var(--alpha-light-08);
    --ws-top-bg: rgba(12,15,20,0.86);
    --ws-hero-bg: #161A21;
    --ws-hero-line: #292E37;
    --ws-hero-fg: var(--brand-light-blue);
    --ws-hero-muted: rgba(220,241,255,0.72);
    --ws-code-bg: #0C0F14;
    --ws-scrim: rgba(0,8,20,0.66);
    --ws-shadow-1: inset 0 1px 0 rgba(220,241,255,0.05), 0 2px 6px rgba(0,0,0,0.30);
    --ws-shadow-2: inset 0 1px 0 rgba(220,241,255,0.07), 0 10px 24px rgba(0,0,0,0.40);
    --ws-shadow-3: inset 0 1px 0 rgba(220,241,255,0.10), 0 28px 56px rgba(0,0,0,0.60);
    --ws-ok-tint: rgba(45,190,137,0.18);
    --ws-warn-tint: rgba(245,166,35,0.18);
    --ws-bad-tint: rgba(229,75,75,0.20);
    --ws-info-tint: var(--alpha-blue-08);
    --ws-none-tint: var(--alpha-light-08);
    --ws-none: rgba(220,241,255,0.45);
    --ws-info: #0A74DA;
    --ws-accent: #0A74DA;
    --ws-accent-halo: rgba(10,116,218,0.34);
    --ws-hero-primary-bg: #0A74DA;
    --ws-hero-primary-fg: var(--brand-white);
    --ws-hero-primary-hover: #0968C7;
    --ws-hero-glow: rgba(10,116,218,0.20);
  }
}
:root[data-theme='dark'] .pa {
  color-scheme: dark;
  --ws-canvas: #0C0F14;
  --ws-surface: #161A21;
  --ws-surface-2: #23272F;
  --ws-sunken: #0C0F14;
  --ws-input: #0C0F14;
  --ws-text: var(--brand-light-blue);
  --ws-text-2: rgba(220,241,255,0.84);
  --ws-muted: var(--alpha-light-65);
  --ws-faint: rgba(220,241,255,0.42);
  --ws-control-line: rgba(220,241,255,0.42);
  --ws-line: #292E37;
  --ws-line-2: var(--alpha-light-08);
  --ws-link: var(--brand-light-blue);
  --ws-link-line: var(--brand-blue);
  --ws-focus: var(--brand-blue);
  --ws-halo: 0 0 0 4px rgba(29,164,255,0.28);
  --ws-input-ring: 0 0 0 3px rgba(29,164,255,0.28);
  --ws-primary-bg: #0A74DA;
  --ws-primary-fg: var(--brand-white);
  --ws-primary-hover: #0968C7;
  --ws-secondary-bg: var(--alpha-light-04);
  --ws-secondary-line: rgba(220,241,255,0.20);
  --ws-secondary-hover: var(--alpha-light-08);
  --ws-ghost-hover: var(--alpha-light-08);
  --ws-danger-bg: var(--brand-red);
  --ws-danger-fg: var(--brand-dark-blue);
  --ws-nav-bg: #0C0F14;
  --ws-nav-hover: var(--alpha-light-04);
  --ws-nav-active: var(--alpha-light-08);
  --ws-top-bg: rgba(12,15,20,0.86);
  --ws-hero-bg: #161A21;
  --ws-hero-line: #292E37;
  --ws-hero-fg: var(--brand-light-blue);
  --ws-hero-muted: rgba(220,241,255,0.72);
  --ws-code-bg: #0C0F14;
  --ws-scrim: rgba(0,8,20,0.66);
  --ws-shadow-1: inset 0 1px 0 rgba(220,241,255,0.05), 0 2px 6px rgba(0,0,0,0.30);
  --ws-shadow-2: inset 0 1px 0 rgba(220,241,255,0.07), 0 10px 24px rgba(0,0,0,0.40);
  --ws-shadow-3: inset 0 1px 0 rgba(220,241,255,0.10), 0 28px 56px rgba(0,0,0,0.60);
  --ws-ok-tint: rgba(45,190,137,0.18);
  --ws-warn-tint: rgba(245,166,35,0.18);
  --ws-bad-tint: rgba(229,75,75,0.20);
  --ws-info-tint: var(--alpha-blue-08);
  --ws-none-tint: var(--alpha-light-08);
  --ws-none: rgba(220,241,255,0.45);
  --ws-info: #0A74DA;
  --ws-accent: #0A74DA;
  --ws-accent-halo: rgba(10,116,218,0.34);
  --ws-hero-primary-bg: #0A74DA;
  --ws-hero-primary-fg: var(--brand-white);
  --ws-hero-primary-hover: #0968C7;
  --ws-hero-glow: rgba(10,116,218,0.20);
}

/* ---------------------------------------------------------------- overlay */

.pa {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--ws-canvas);
  color: var(--ws-text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.pa[hidden] { display: none; }
/* The documentation page behind the overlay must not scroll under it. */
html:has(.pa:not([hidden])) { overflow: hidden; }
.pa *, .pa *::before, .pa *::after { box-sizing: border-box; }
/* Resets carry no specificity, so a component's own margin or padding (.wa-points, .ws-list)
   is never silently cancelled by them. */
:where(.pa) :where(h1, h2, h3, h4, p, dl, dd, ol, ul, figure) { margin: 0; }
:where(.pa) :where(h1, h2, h3, h4) { color: var(--ws-text); letter-spacing: var(--tracking); }
:where(.pa) :where(ol, ul) { padding: 0; }
/* Element defaults carry no specificity, so a component class (.ws-btn--primary, .ws-linkbtn)
   always sets its own font and colour instead of inheriting the text colour. */
:where(.pa) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.pa img, .pa svg { display: block; }
.pa [hidden] { display: none !important; }

:where(.pa) a { color: var(--ws-link); text-decoration: underline; text-decoration-color: var(--ws-link-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:where(.pa) a:hover { text-decoration-color: currentColor; }

.pa :focus { outline: none; }
.pa :focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 2px; box-shadow: var(--ws-halo); }
.pa .ws-main:focus-visible, .pa .wa-main:focus-visible { outline: none; box-shadow: none; }

.ws-i { width: 18px; height: 18px; flex: none; }
.ws-i--sm { width: 16px; height: 16px; }
.ws-i--lg { width: 22px; height: 22px; }

.ws-sr, .pa-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ws-grow { flex: 1 1 auto; min-width: 0; }
.ws-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

.ws-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--ws-muted);
  font: 600 11.5px/1.2 var(--mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.ws-mono { font-family: var(--mono); font-size: 0.86em; letter-spacing: 0; overflow-wrap: anywhere; }
.ws-muted { color: var(--ws-muted); }
.ws-small { font-size: var(--scale-sm); }

/* ---------------------------------------------------------------- buttons */

.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  max-width: 100%;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: none;
  font-size: var(--scale-sm);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-quick) var(--ease-jenni),
              border-color var(--motion-quick) var(--ease-jenni),
              color var(--motion-quick) var(--ease-jenni),
              filter var(--motion-quick) var(--ease-jenni),
              transform var(--motion-instant) var(--ease-jenni);
}
.pa a.ws-btn { text-decoration: none; }
.ws-btn:active:not(:disabled):not([aria-disabled='true']) { transform: translateY(1px); }
.ws-btn:disabled, .ws-btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.ws-btn--primary { background: var(--ws-primary-bg); border-color: var(--ws-primary-bg); color: var(--ws-primary-fg); }
.pa a.ws-btn--primary { color: var(--ws-primary-fg); }
.ws-btn--primary:hover:not(:disabled):not([aria-disabled='true']) { background: var(--ws-primary-hover); border-color: var(--ws-primary-hover); }
.ws-btn--secondary { background: var(--ws-secondary-bg); border-color: var(--ws-secondary-line); color: var(--ws-text); }
.pa a.ws-btn--secondary { color: var(--ws-text); }
.ws-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) { background: var(--ws-secondary-hover); border-color: var(--ws-info); }
.ws-btn--ghost { color: var(--ws-text); }
.pa a.ws-btn--ghost { color: var(--ws-text); }
.ws-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) { background: var(--ws-ghost-hover); }
.ws-btn--danger { background: var(--ws-danger-bg); border-color: var(--ws-danger-bg); color: var(--ws-danger-fg); }
.ws-btn--danger:hover:not(:disabled):not([aria-disabled='true']) { filter: brightness(1.1); } /* JENNi spec §8.1 accent hover */
.ws-btn--quiet-danger { border-color: var(--ws-secondary-line); background: var(--ws-secondary-bg); color: var(--ws-text); }
.ws-btn--quiet-danger:hover:not(:disabled):not([aria-disabled='true']) { border-color: var(--ws-bad); background: var(--ws-bad-tint); }
.ws-btn--sm { min-height: 32px; padding: 4px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.ws-btn--block { width: 100%; }
.ws-btn .ws-i { width: 16px; height: 16px; }

.ws-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: none;
  color: var(--ws-text);
  cursor: pointer;
  transition: background-color var(--motion-quick) var(--ease-jenni), border-color var(--motion-quick) var(--ease-jenni);
}
.ws-iconbtn:hover { background: var(--ws-ghost-hover); border-color: var(--ws-line); }

.ws-linkbtn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ws-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ws-link-line);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ws-linkbtn:hover { text-decoration-color: currentColor; }

.ws-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-actions--end { justify-content: flex-end; }
.ws-actions--spaced { margin-top: 12px; }
.ws-footnote { margin-top: 12px; }

/* ---------------------------------------------------------------- badges */

.ws-badge {
  --dot: var(--ws-none);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 10px 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--ws-none-tint);
  color: var(--ws-text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.ws-badge::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--dot); }
.ws-badge[data-tone='ok'] { --dot: var(--ws-ok); background: var(--ws-ok-tint); }
.ws-badge[data-tone='warn'] { --dot: var(--ws-warn); background: var(--ws-warn-tint); }
.ws-badge[data-tone='bad'] { --dot: var(--ws-bad); background: var(--ws-bad-tint); }
.ws-badge[data-tone='info'] { --dot: var(--ws-info); background: var(--ws-info-tint); }

.ws-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--ws-line);
  border-radius: var(--radius-pill);
  color: var(--ws-text-2);
  font: 500 12px/1.6 var(--mono);
  white-space: nowrap;
}
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------------------------------------------------------- workspace shell */

.ws { min-height: 100%; display: flex; flex-direction: column; }

.ws-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ws-line);
  background: var(--ws-top-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}
.ws-top__spacer { flex: 1 1 auto; min-width: 0; }
.ws-menu { display: none; }

.ws-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ws-text);
  text-decoration: none;
}
.pa a.ws-brand { color: var(--ws-text); text-decoration: none; }
.ws-brand__tile {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--brand-dark-blue);
  box-shadow: inset 0 0 0 1px rgba(29,164,255,0.35);
}
.ws-brand__tile img { width: 20px; height: 20px; }
.ws-brand__name { font-size: 17px; font-weight: 800; letter-spacing: var(--tracking-tight); }
.ws-brand__sub { color: var(--ws-muted); font-size: var(--scale-sm); font-weight: 600; white-space: nowrap; }
html[data-profile="brand"] .ws-brand__logo { height: 28px; width: auto; display: block; }
.ws-brand__divider { width: 1px; height: 18px; background: var(--ws-line); }

.ws-env {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  font: 600 11px/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ws-text);
}
.ws-env::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ws-env[data-env='sandbox'] { background: var(--ws-warn-tint); }
.ws-env[data-env='sandbox']::before { background: var(--ws-warn); }
.ws-env[data-env='prod'] { background: var(--ws-ok-tint); }
.ws-env[data-env='prod']::before { background: var(--ws-ok); }

.ws-toplink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-button);
  font-size: var(--scale-sm);
  font-weight: 600;
  white-space: nowrap;
}
.pa a.ws-toplink { color: var(--ws-text); text-decoration: none; }
.ws-toplink:hover { background: var(--ws-ghost-hover); }

.ws-user { position: relative; }
.ws-user__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: 260px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--ws-line);
  border-radius: var(--radius-pill);
  background: var(--ws-surface);
  color: var(--ws-text);
  cursor: pointer;
}
.ws-user__btn:hover { border-color: var(--ws-info); }
.ws-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-dark-blue);
  color: var(--brand-light-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(29,164,255,0.40);
}
.ws-user__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--scale-sm); font-weight: 600; }
.ws-user__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 288px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border: 1px solid var(--ws-line);
  border-radius: var(--radius-md);
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-3);
  animation: ws-pop var(--motion-quick) var(--ease-jenni);
}
.ws-user__who { display: grid; gap: 2px; padding: 10px 12px 12px; border-bottom: 1px solid var(--ws-line-2); }
.ws-user__who strong { font-size: 15px; }
.ws-user__who span { color: var(--ws-muted); font-size: 13px; overflow-wrap: anywhere; }
.ws-user__facts { display: grid; gap: 6px; padding: 12px; border-bottom: 1px solid var(--ws-line-2); font-size: 13px; }
.ws-user__facts div { display: flex; justify-content: space-between; gap: 12px; }
.ws-user__facts dt { color: var(--ws-muted); }
.ws-user__facts dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ws-menuitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ws-text);
  font-size: var(--scale-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ws-menuitem:hover { background: var(--ws-ghost-hover); }

.ws-body { flex: 1 1 auto; display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start; }

.ws-nav {
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: calc(100vh - 64px);
  padding: 20px 12px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--ws-line);
  background: var(--ws-nav-bg);
}
.ws-nav__org { display: grid; gap: 2px; padding: 4px 12px 16px; margin-bottom: 4px; border-bottom: 1px solid var(--ws-line-2); }
.ws-nav__org strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.ws-nav__org span { color: var(--ws-muted); font-size: 13px; }
.ws-nav__label {
  margin: 16px 12px 6px;
  color: var(--ws-muted);
  font: 600 11px/1.2 var(--mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.ws-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ws-text-2);
  font-size: var(--scale-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--motion-quick) var(--ease-jenni), color var(--motion-quick) var(--ease-jenni);
}
.ws-nav a .ws-i { color: var(--ws-muted); }
.ws-nav a:hover { background: var(--ws-nav-hover); color: var(--ws-text); }
.ws-nav a[aria-current='page'] { background: var(--ws-nav-active); color: var(--ws-text); font-weight: 650; }
.ws-nav a[aria-current='page'] .ws-i { color: var(--ws-text); }
.ws-nav a[aria-current='page']::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ws-accent);
}
.ws-nav__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ws-line-2); }
.ws-nav__skeleton { display: grid; gap: 8px; padding: 8px 12px; }

.ws-scrim {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  z-index: 8;
  background: var(--ws-scrim);
  animation: ws-fade var(--motion-default) var(--ease-jenni);
}

.ws-main { min-width: 0; padding: 32px clamp(16px, 4vw, 48px) 72px; }
.ws-page { max-width: 1120px; margin: 0 auto; }

.ws-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}
.ws-pagehead__text { min-width: 0; flex: 1 1 420px; }
.ws-pagehead h1 { font-size: clamp(24px, 3.2vw, var(--scale-h3)); line-height: 1.2; font-weight: 750; letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.ws-lede { max-width: 68ch; margin-top: 8px; color: var(--ws-muted); font-size: 15.5px; }
.ws-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: var(--scale-sm); font-weight: 600; }
.pa a.ws-back { color: var(--ws-muted); text-decoration: none; }
.pa a.ws-back:hover { color: var(--ws-text); }

.ws-section { margin-top: 32px; }
.ws-section:first-child { margin-top: 0; }
.ws-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.ws-section__head h2 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.ws-section__head p { color: var(--ws-muted); font-size: var(--scale-sm); }

/* ---------------------------------------------------------------- surfaces */

.ws-card {
  min-width: 0;
  padding: 20px 24px;
  border: 1px solid var(--ws-line);
  border-radius: var(--radius-md);
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-1);
}
.ws-card + .ws-card { margin-top: 16px; }
.ws-grid > .ws-card + .ws-card, .ws-stack > .ws-card + .ws-card, .ws-endpoints > .ws-card + .ws-card { margin-top: 0; }
.ws-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.ws-card__head > div:first-child { flex: 1 1 240px; min-width: 0; }
.ws-card__head h2, .ws-card__head h3, .ws-card > h2, .ws-card > h3 { font-size: 16px; line-height: 1.35; font-weight: 700; }
.ws-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ws-line-2); }
.ws-card p + p { margin-top: 8px; }
.ws-card--flush { padding: 0; overflow: hidden; }
.ws-card--accent { border-color: var(--ws-info); box-shadow: var(--ws-shadow-2), 0 0 0 1px var(--ws-info) inset; }

.ws-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ws-grid--home { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
.ws-stack { display: grid; gap: 16px; align-content: start; }

.ws-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 28px 24px;
  border: 1px solid var(--ws-hero-line);
  border-radius: var(--radius-md);
  background: var(--ws-hero-bg);
  color: var(--ws-hero-fg);
  box-shadow: var(--ws-shadow-2);
  /* The hero is dark in both themes: controls inside it take the dark palette. */
  --ws-text: var(--ws-hero-fg);
  --ws-link: var(--brand-light-blue);
  --ws-link-line: rgba(220,241,255,0.55);
  --ws-focus: var(--brand-light-blue);
  --ws-primary-bg: var(--ws-hero-primary-bg);
  --ws-primary-fg: var(--ws-hero-primary-fg);
  --ws-primary-hover: var(--ws-hero-primary-hover);
  --ws-secondary-bg: rgba(220,241,255,0.06);
  --ws-secondary-line: rgba(220,241,255,0.32);
  --ws-secondary-hover: rgba(220,241,255,0.12);
  --ws-ghost-hover: rgba(220,241,255,0.10);
}
.ws-hero::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ws-hero-glow), transparent);
  pointer-events: none;
}
.ws-hero > * { position: relative; z-index: 1; }
.ws-hero .ws-eyebrow { color: var(--ws-hero-muted); }
.ws-hero h2 { max-width: 34ch; color: var(--ws-hero-fg); font-size: 22px; line-height: 1.3; font-weight: 750; }
.ws-hero p { max-width: 60ch; margin-top: 8px; color: var(--ws-hero-muted); }
.ws-hero .ws-actions { margin-top: 20px; }
.ws-hero__progress { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--ws-hero-muted); font-size: 13px; }
.ws-meter { flex: 1 1 auto; max-width: 240px; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(220,241,255,0.16); }
.ws-meter span { display: block; height: 100%; border-radius: inherit; background: var(--ws-accent); }
.ws-meter--plain { background: var(--ws-line-2); }
.ws-quota { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }

/* ---------------------------------------------------------------- checklist */

.ws-steps { list-style: none; }
.ws-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-top: 1px solid var(--ws-line-2);
}
.ws-step:first-child { border-top: 0; padding-top: 4px; }
.ws-step:last-child { padding-bottom: 0; }
.ws-step__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ws-line);
  border-radius: 50%;
  color: var(--ws-muted);
  font: 700 13px/1 var(--font);
}
.ws-step__mark .ws-i { width: 16px; height: 16px; stroke-width: 2.25; }
.ws-step__body { min-width: 0; }
.ws-step__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.ws-step__text { margin-top: 4px; color: var(--ws-muted); font-size: var(--scale-sm); }
.ws-step__extra { margin-top: 12px; }
.ws-step .ws-actions { margin-top: 12px; }
.ws-step[data-step-state='done'] .ws-step__mark { border-color: var(--success); background: var(--success); color: var(--brand-dark-blue); }
.ws-step[data-step-state='done'] .ws-step__title { color: var(--ws-text-2); }
.ws-step[data-step-state='current'] .ws-step__mark { border-color: var(--ws-accent); color: var(--ws-text); box-shadow: 0 0 0 4px var(--ws-accent-halo); }
.ws-step[data-step-state='waiting'] .ws-step__mark { border-color: var(--warning); color: var(--ws-text); }
.ws-step[data-step-state='blocked'] .ws-step__mark { border-color: var(--danger); color: var(--ws-text); }
.ws-step[data-step-state='optional'] .ws-step__mark { border-style: dashed; }

/* ---------------------------------------------------------------- production tracker */

.ws-track { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ws-track__step {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--ws-line);
  border-radius: var(--radius-md);
  background: var(--ws-surface);
}
.ws-track__step .ws-step__mark { margin-bottom: 8px; }
.ws-track__step strong { font-size: 15px; line-height: 1.35; }
.ws-track__step p { color: var(--ws-muted); font-size: var(--scale-sm); }
.ws-track__step .ws-actions { margin-top: 10px; }
.ws-track__step[data-step-state='done'] .ws-step__mark { border-color: var(--success); background: var(--success); color: var(--brand-dark-blue); }
.ws-track__step[data-step-state='current'] { border-color: var(--ws-accent); box-shadow: 0 0 0 1px var(--ws-accent) inset; }
.ws-track__step[data-step-state='current'] .ws-step__mark { border-color: var(--ws-accent); color: var(--ws-text); box-shadow: 0 0 0 4px var(--ws-accent-halo); }
.ws-track__step[data-step-state='waiting'] .ws-step__mark { border-color: var(--warning); color: var(--ws-text); }
.ws-track__step[data-step-state='blocked'] .ws-step__mark { border-color: var(--danger); color: var(--ws-text); }

.ws-quote {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--ws-info);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--ws-info-tint);
}
.ws-quote strong { display: block; margin-bottom: 2px; font-size: 13px; }

.ws-details { margin-top: 16px; border: 1px solid var(--ws-line); border-radius: var(--radius-sm); background: var(--ws-surface); }
.ws-details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  font-size: var(--scale-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.ws-details summary::-webkit-details-marker { display: none; }
.ws-details summary .ws-i { transition: transform var(--motion-quick) var(--ease-jenni); }
.ws-details[open] summary .ws-i { transform: rotate(90deg); }
.ws-details__body { display: grid; gap: 12px; padding: 14px 16px 16px; border-top: 1px solid var(--ws-line-2); }
.ws-details .ws-tablewrap { box-shadow: none; }
.ws-pre {
  margin: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--ws-line-2);
  color: var(--ws-text-2);
  font: 13px/1.6 var(--font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- notices and callouts */

.ws-notice {
  --tone: var(--ws-info);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--ws-line);
  border-left: 4px solid var(--tone);
  border-radius: var(--radius-button);
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-1);
  animation: ws-rise var(--motion-default) var(--ease-jenni);
}
.ws-notice > .ws-i { margin-top: 2px; color: var(--ws-text); }
.ws-notice__text { flex: 1 1 auto; min-width: 0; }
.ws-notice__text strong { display: block; }
.ws-notice[data-tone='ok'] { --tone: var(--success); }
.ws-notice[data-tone='warn'] { --tone: var(--warning); }
.ws-notice[data-tone='bad'] { --tone: var(--danger); }
.ws-notice .ws-iconbtn { width: 32px; height: 32px; margin: -4px -6px -4px 0; }

.ws-callout {
  --tone: var(--ws-info);
  --tint: var(--ws-info-tint);
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-button);
  background: var(--tint);
  color: var(--ws-text);
  font-size: var(--scale-sm);
}
.ws-callout > .ws-i { margin-top: 1px; }
.ws-callout[data-tone='warn'] { --tint: var(--ws-warn-tint); }
.ws-callout[data-tone='ok'] { --tint: var(--ws-ok-tint); }
.ws-callout[data-tone='bad'] { --tint: var(--ws-bad-tint); }
.ws-callout + .ws-callout, .ws-card .ws-callout { margin-top: 12px; }

/* ---------------------------------------------------------------- states */

.ws-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 24px auto;
  padding: 40px 24px;
  border: 1px dashed var(--ws-line);
  border-radius: var(--radius-md);
  text-align: center;
}
.ws-state__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--ws-info-tint);
  color: var(--ws-text);
}
.ws-state[data-state='denied'] .ws-state__icon, .ws-state[data-state='error'] .ws-state__icon { background: var(--ws-bad-tint); }
.ws-state[data-state='feature-off'] .ws-state__icon, .ws-state[data-state='not-offered'] .ws-state__icon { background: var(--ws-warn-tint); }
.ws-state h2 { font-size: 18px; line-height: 1.35; }
.ws-state p { max-width: 48ch; color: var(--ws-muted); }
.ws-state .ws-actions { justify-content: center; margin-top: 8px; }

.ws-skeleton {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ws-line-2) 0%, var(--ws-line) 50%, var(--ws-line-2) 100%);
  background-size: 200% 100%;
  animation: ws-shimmer 1.4s linear infinite;
}
.ws-skeleton--title { width: 40%; height: 22px; }
.ws-skeleton--line { width: 90%; }
.ws-skeleton--short { width: 55%; }
.ws-loading { display: grid; gap: 14px; }
.ws-loading .ws-card { display: grid; gap: 12px; }

/* ---------------------------------------------------------------- facts and tables */

.ws-facts { display: grid; gap: 0; }
.ws-facts > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 4px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--ws-line-2);
}
.ws-facts > div:first-child { border-top: 0; padding-top: 0; }
.ws-facts dt { color: var(--ws-muted); font-size: var(--scale-sm); }
.ws-facts dd { min-width: 0; overflow-wrap: anywhere; }
.ws-facts .ws-facts { margin-top: 4px; }
.ws-facts .ws-facts > div { padding: 6px 0; }
.ws-facts > .ws-facts__row--wide { grid-template-columns: minmax(0, 1fr); }
/* The button stays on the value's first line however long the value is. */
.ws-copyrow { display: inline-grid; grid-template-columns: minmax(0, max-content) auto; align-items: center; gap: 8px; max-width: 100%; }
.ws-copyrow code { min-width: 0; overflow-wrap: anywhere; }
.ws-list { display: grid; gap: 4px; padding-left: 18px; }

.ws-tablewrap { overflow-x: auto; border: 1px solid var(--ws-line); border-radius: var(--radius-md); background: var(--ws-surface); box-shadow: var(--ws-shadow-1); }
.ws-table { width: 100%; border-collapse: collapse; font-size: var(--scale-sm); }
.ws-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ws-line);
  background: var(--ws-surface);
  color: var(--ws-muted);
  font: 600 11px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.ws-table td { padding: 12px 16px; border-top: 1px solid var(--ws-line-2); vertical-align: middle; overflow-wrap: anywhere; }
.ws-table tbody tr:first-child td { border-top: 0; }
.ws-table tbody tr:hover td { background: var(--ws-nav-hover); }
.ws-table td.ws-cell-actions { text-align: right; white-space: nowrap; }
.ws-table td.ws-cell-actions .ws-actions { justify-content: flex-end; flex-wrap: nowrap; }
.ws-cell-primary > strong { display: block; font-weight: 650; }
.ws-cell-primary > span { display: block; color: var(--ws-muted); font-size: 12.5px; }
.ws-cell-primary .ws-chip { margin-left: 8px; vertical-align: 1px; }
.ws-tablefoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ws-line); color: var(--ws-muted); font-size: 13px; }

/* ---------------------------------------------------------------- forms */

.ws-form { display: grid; gap: 18px; }
.ws-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.ws-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.ws-field__label { font-size: var(--scale-sm); font-weight: 650; }
.ws-field__label small { margin-left: 4px; color: var(--ws-muted); font-weight: 500; }
.ws-field__hint { color: var(--ws-muted); font-size: 13px; }
/* The words carry the error; red only marks it, never carries the text. */
.ws-field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--ws-text); font-size: 13px; font-weight: 600; line-height: 1.4; }
.ws-field__error .ws-i { flex: none; margin-top: 1px; color: var(--danger); }
.ws-field--inline { display: flex; align-items: center; gap: 8px; }
.ws-field--inline .ws-select { width: auto; min-width: 150px; }
.ws-input, .ws-select, .ws-textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--ws-line);
  border-radius: var(--radius-sm);
  background: var(--ws-input);
  color: var(--ws-text);
  font-size: 15px;
  transition: border-color var(--motion-quick) var(--ease-jenni), box-shadow var(--motion-quick) var(--ease-jenni);
}
.ws-textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.ws-input::placeholder, .ws-textarea::placeholder { color: var(--ws-faint); }
.ws-input:hover, .ws-select:hover, .ws-textarea:hover { border-color: var(--ws-faint); }
.pa .ws-input:focus-visible, .pa .ws-select:focus-visible, .pa .ws-textarea:focus-visible,
.pa .ws-input:focus, .pa .ws-select:focus, .pa .ws-textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: var(--ws-input-ring);
}
.ws-input[aria-invalid='true'], .ws-textarea[aria-invalid='true'] { border-color: var(--danger); }
.ws-counter { justify-self: end; color: var(--ws-muted); font: 500 12px/1.3 var(--mono); }
.ws-counter[data-over='true'] { color: var(--ws-text); font-weight: 700; }
.ws-counter[data-over='true']::before { content: '\25B2  '; color: var(--danger); }

.ws-fieldset { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ws-fieldset legend { padding: 0; margin-bottom: 4px; font-size: var(--scale-sm); font-weight: 650; }
.ws-fieldset[data-invalid='true'] .ws-choice { border-color: var(--danger); }
.ws-choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.ws-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--ws-line);
  border-radius: var(--radius-button);
  background: var(--ws-surface);
  cursor: pointer;
  transition: border-color var(--motion-quick) var(--ease-jenni), background-color var(--motion-quick) var(--ease-jenni);
}
.ws-choice:hover { border-color: var(--ws-faint); }
.ws-choice:has(input:checked) { border-color: var(--ws-accent); background: var(--ws-info-tint); box-shadow: 0 0 0 1px var(--ws-accent) inset; }
.ws-choice:has(input:focus-visible) { box-shadow: 0 0 0 1px var(--brand-blue) inset, var(--ws-input-ring); }
/* Drawn from the theme tokens: an unchecked control never shows the browser's grey fill on the
   dark surfaces, and a checked one matches the primary button. Borders keep 3:1 on the surface. */
.ws-choice input {
  appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1.5px solid var(--ws-control-line);
  border-radius: 5px;
  background: var(--ws-input);
  cursor: pointer;
  transition: border-color var(--motion-quick) var(--ease-jenni), background-color var(--motion-quick) var(--ease-jenni);
}
.ws-choice input[type='radio'] { border-radius: 50%; }
.ws-choice input::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ws-primary-fg);
  transform: scale(0);
  transition: transform var(--motion-quick) var(--ease-jenni);
}
.ws-choice input[type='radio']::before { width: 8px; height: 8px; border-radius: 50%; }
.ws-choice input[type='checkbox']::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }
.ws-choice:hover input:not(:checked) { border-color: var(--ws-text-2); }
.ws-choice input:checked { border-color: var(--ws-primary-bg); background: var(--ws-primary-bg); }
.ws-choice input:checked::before { transform: scale(1); }
.ws-choice__text { display: grid; gap: 2px; min-width: 0; }
.ws-choice__text strong { font-size: var(--scale-sm); line-height: 1.35; }
.ws-choice__text small { color: var(--ws-muted); font-size: 13px; line-height: 1.4; }
.ws-choices--inline .ws-choice { padding: 10px 12px; }

.ws-switchrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ws-line-2); }
.ws-switchrow:first-of-type { border-top: 0; }
.ws-switchrow strong { display: block; font-size: 15px; }
.ws-switchrow span { color: var(--ws-muted); font-size: var(--scale-sm); }
.ws-switch { position: relative; flex: none; width: 44px; height: 26px; }
.ws-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ws-switch span {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--ws-line);
  transition: background-color var(--motion-quick) var(--ease-jenni);
  pointer-events: none;
}
.ws-switch span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-white);
  box-shadow: 0 1px 2px rgba(0,22,53,0.25);
  transition: transform var(--motion-quick) var(--ease-jenni);
}
.ws-switch input:checked + span { background: var(--ws-accent); }
.ws-switch input:checked + span::after { transform: translateX(18px); }
.ws-switch input:focus-visible + span { box-shadow: var(--ws-input-ring); outline: 2px solid var(--ws-focus); outline-offset: 2px; }
.ws-switch input[aria-disabled='true'] { cursor: progress; }
.ws-switch input[aria-disabled='true'] + span { opacity: 0.6; }

.ws-composer { margin-bottom: 24px; animation: ws-rise var(--motion-default) var(--ease-jenni); }
.ws-composer .ws-form { margin-top: 4px; }

/* ---------------------------------------------------------------- secrets and dialogs */

.ws-secret {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border: 1px dashed var(--ws-info);
  border-radius: var(--radius-button);
  background: var(--ws-code-bg);
}
.ws-secret code { flex: 1 1 auto; min-width: 0; font: 500 14px/1.5 var(--mono); overflow-wrap: anywhere; user-select: all; }

.ws-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.ws-modal__backdrop { position: fixed; inset: 0; background: var(--ws-scrim); animation: ws-fade var(--motion-default) var(--ease-jenni); }
.ws-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--ws-line);
  border-radius: var(--radius-lg);
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-3);
  animation: ws-pop var(--motion-default) var(--ease-jenni);
}
.ws-dialog__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--ws-info-tint);
  color: var(--ws-text);
}
.ws-dialog[data-tone='bad'] .ws-dialog__icon { background: var(--ws-bad-tint); }
.ws-dialog[data-tone='warn'] .ws-dialog__icon { background: var(--ws-warn-tint); }
.ws-dialog h2 { font-size: 20px; line-height: 1.3; font-weight: 750; }
.ws-dialog > p { margin-top: 8px; color: var(--ws-text-2); }
.ws-dialog .ws-secret { margin-top: 20px; }
.ws-dialog .ws-facts { margin-top: 16px; font-size: var(--scale-sm); }
.ws-dialog .ws-callout { margin-top: 16px; }
.ws-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* ---------------------------------------------------------------- webhooks */

.ws-endpoints { display: grid; gap: 12px; }
.ws-endpoint__url { font: 500 13.5px/1.5 var(--mono); overflow-wrap: anywhere; }
.ws-endpoint__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; color: var(--ws-muted); font-size: 13px; }
.ws-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ws-line-2); }
.ws-panel h3 { margin-bottom: 4px; font-size: 14px; font-weight: 700; }
.ws-panel p { color: var(--ws-muted); font-size: var(--scale-sm); }
.ws-panel .ws-actions { margin-top: 12px; }
.ws-panel .ws-tablewrap { margin-top: 12px; box-shadow: none; }

/* ---------------------------------------------------------------- health */

.ws-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; padding: 14px 18px; border: 1px solid var(--ws-line); border-radius: var(--radius-md); background: var(--ws-surface); }
.ws-summary strong { font-size: 15px; }
.ws-summary span.ws-muted { font-size: 13px; }
.ws-signal h3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------------------------------------------------------------- sign-in screens */

.wa { min-height: 100%; display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); }
.wa-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  overflow: hidden;
  background: radial-gradient(120% 70% at 0% 0%, rgba(29,164,255,0.22), transparent 62%),
              radial-gradient(90% 60% at 100% 100%, rgba(29,164,255,0.10), transparent 60%),
              var(--brand-dark-blue);
  color: var(--brand-light-blue);
  /* The panel is dark in both themes, so its links and focus ring are too. */
  --ws-link: var(--brand-light-blue);
  --ws-link-line: rgba(220,241,255,0.55);
  --ws-focus: var(--brand-light-blue);
}
/* In dark mode the panel is a near-black surface beside the page, not a navy block:
 * blue stays a faint corner accent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .wa-brand {
    background: radial-gradient(120% 70% at 0% 0%, var(--alpha-blue-08), transparent 62%), var(--ws-surface);
    box-shadow: var(--wa-edge, inset -1px 0 0) var(--ws-line);
  }
}
:root[data-theme='dark'] .wa-brand {
  background: radial-gradient(120% 70% at 0% 0%, var(--alpha-blue-08), transparent 62%), var(--ws-surface);
  box-shadow: var(--wa-edge, inset -1px 0 0) var(--ws-line);
}
.wa-brand .ws-brand, .pa .wa-brand a.ws-brand { color: var(--brand-light-blue); }
.wa-brand .ws-brand__sub { color: rgba(220,241,255,0.72); }
.wa-brand .ws-brand__divider { background: rgba(220,241,255,0.24); }
.wa-brand__copy { margin-block: auto; }
.wa-brand h2 { max-width: 16ch; color: var(--brand-light-blue); font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: var(--tracking-tight); }
.wa-brand__copy > p { max-width: 36ch; margin-top: 12px; color: rgba(220,241,255,0.74); }
.wa-points { display: grid; gap: 16px; margin-top: 32px; list-style: none; }
.wa-points li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.wa-points .ws-i { width: 20px; height: 20px; }
.wa-points__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(29,164,255,0.16); box-shadow: inset 0 0 0 1px rgba(29,164,255,0.30); }
.wa-points strong { display: block; color: var(--brand-light-blue); font-size: 15px; }
.wa-points span { color: rgba(220,241,255,0.72); font-size: var(--scale-sm); }
.wa-brand__foot { color: rgba(220,241,255,0.60); font-size: 12.5px; }

.wa-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px clamp(16px, 5vw, 64px) 48px; }
.wa-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wa-center { flex: 1 1 auto; display: grid; place-items: center; padding: 32px 0; }
.wa-card { width: min(440px, 100%); }
.wa-card h1 { font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: var(--tracking-tight); }
.wa-lede { margin-top: 8px; color: var(--ws-muted); }
.wa-card .ws-notice { margin: 20px 0 0; }
.wa-card .ws-form { margin-top: 24px; }
.wa-card .ws-btn--primary { width: 100%; min-height: 46px; font-size: 15px; }
.wa-alt { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ws-line-2); color: var(--ws-muted); font-size: var(--scale-sm); text-align: center; }
.wa-alt p + p { margin-top: 8px; }
.wa-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wa-labelrow .ws-linkbtn { font-size: 13px; }
.wa-password { position: relative; }
.wa-password .ws-input { padding-right: 48px; }
.wa-password .ws-iconbtn { position: absolute; top: 50%; right: 2px; width: 40px; height: 36px; min-height: 0; transform: translateY(-50%); }
.wa-return { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ws-info-tint); font-size: 13.5px; }

/* ---------------------------------------------------------------- motion */

@keyframes ws-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ws-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ws-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .ws-grid--home { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .ws-menu { display: inline-grid; }
  .ws-body { grid-template-columns: minmax(0, 1fr); }
  .ws-nav {
    position: fixed;
    top: 64px;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: min(304px, 86vw);
    height: auto;
    border-right: 1px solid var(--ws-line);
    box-shadow: var(--ws-shadow-3);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--motion-default) var(--ease-jenni), visibility 0s linear var(--motion-default);
  }
  .ws[data-nav-open='true'] .ws-nav {
    transform: none;
    visibility: visible;
    transition: transform var(--motion-default) var(--ease-jenni);
  }
  .ws[data-nav-open='true'] .ws-scrim { display: block; }
  .ws-track { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ws-track__step { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
  .ws-track__step > * { grid-column: 2; }
  .ws-track__step > .ws-step__mark { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .wa { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* Stacked, the dark panel's edge is its bottom, not its right. */
  .wa-brand { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; --wa-edge: inset 0 -1px 0; }
  .wa-brand__copy, .wa-brand__foot { display: none; }
}

@media (max-width: 760px) {
  .ws-top { gap: 8px; height: 60px; padding: 0 12px; }
  .ws-nav { top: 60px; }
  .ws-scrim { inset: 60px 0 0 0; }
  .ws-brand__sub, .ws-brand__divider, .ws-user__name, .ws-user__btn > .ws-i { display: none; }
  .ws-user__btn { padding: 4px; }
  .ws-toplink { display: none; }
  .ws-main { padding: 24px 16px 56px; }
  .ws-pagehead { align-items: stretch; }
  .ws-pagehead .ws-actions { width: 100%; }
  .ws-card { padding: 18px 16px; }
  .ws-hero { padding: 22px 18px 20px; }
  .ws-hero h2 { font-size: 20px; }
  .ws-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ws-btn, .ws-iconbtn, .ws-menuitem, .ws-toplink, .ws-nav a, .ws-user__btn { min-height: 44px; }
  .ws-iconbtn { width: 44px; height: 44px; }
  .ws-brand { min-height: 44px; }
  .ws-back { min-height: 44px; margin-bottom: 4px; }
  .wa-password .ws-input { padding-right: 52px; }
  .wa-password .ws-iconbtn { right: 0; width: 44px; height: 44px; }
  .ws-btn--sm { min-height: 44px; padding: 8px 14px; font-size: var(--scale-sm); }
  .ws-input, .ws-select, .ws-textarea { min-height: 44px; font-size: 16px; }
  .ws-dialog { padding: 22px 18px; border-radius: var(--radius-md); }
  .ws-dialog__actions .ws-btn { flex: 1 1 auto; }
  .ws-secret { flex-wrap: wrap; }
  .ws-secret code { flex-basis: 100%; }
  .ws-secret .ws-btn { margin-left: auto; }

  /* Tables become one card per row at phone width; each cell names its column. */
  .ws-tablewrap { overflow: visible; border: 0; background: none; box-shadow: none; }
  .ws-table, .ws-table tbody, .ws-table tr, .ws-table td { display: block; width: 100%; }
  .ws-table thead { display: none; }
  .ws-table tr {
    margin-bottom: 12px;
    padding: 6px 16px;
    border: 1px solid var(--ws-line);
    border-radius: var(--radius-md);
    background: var(--ws-surface);
    box-shadow: var(--ws-shadow-1);
  }
  .ws-table td { display: grid; grid-template-columns: minmax(96px, 0.4fr) minmax(0, 1fr); justify-items: start; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ws-line-2); }
  .ws-table tbody tr:first-child td { border-top: 1px solid var(--ws-line-2); }
  .ws-table td:first-child, .ws-table tbody tr:first-child td:first-child { border-top: 0; }
  .ws-table td::before { content: attr(data-label); color: var(--ws-muted); font-size: 12.5px; }
  .ws-table td:empty { display: none; }
  .ws-table td.ws-cell-primary, .ws-table td.ws-cell-actions { grid-template-columns: minmax(0, 1fr); }
  .ws-table td.ws-cell-primary::before, .ws-table td.ws-cell-actions::before { content: none; }
  .ws-table td.ws-cell-actions { text-align: left; white-space: normal; }
  .ws-table td.ws-cell-actions .ws-actions { justify-content: flex-start; flex-wrap: wrap; }
  .ws-table tbody tr:hover td { background: none; }
  .ws-panel .ws-tablewrap { margin-top: 8px; }
  .ws-tablefoot { padding: 4px 0; border: 0; }

  .wa-main { padding: 12px 16px 40px; }
  .wa-center { padding: 20px 0; place-items: start center; }
  .wa-card h1 { font-size: 24px; }
}

/* Below 400px the top bar cannot hold the wordmark beside the environment badge (PRODUCTION ran
   16px into it at 375px, 71px at 320px). The tile carries the brand; the link keeps its name. */
@media (max-width: 400px) {
  .ws-top .ws-brand__name { display: none; }
  .ws-top .ws-brand { min-width: 44px; justify-content: center; }
}
@media (max-width: 360px) {
  .ws-top { gap: 4px; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pa *, .pa *::before, .pa *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .ws-skeleton { animation: none; }
}

@media (forced-colors: active) {
  .ws-badge::before, .ws-env::before { forced-color-adjust: none; }
  .ws-nav a[aria-current='page'] { outline: 2px solid CanvasText; }
  .ws-choice input { appearance: auto; }
}

/* ---------------------------------------------------------------- brand profile (JEN-727) */
/* Only the brands host renders these. Colors come from the workspace tokens, so dark mode is
   the navy theme and there is no literal grey. */

.br-steps { counter-reset: br-step; }
.br-step__n {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; margin-right: 10px;
  border-radius: 50%;
  background: var(--ws-info-tint); color: var(--ws-text);
  font-size: 13px; font-weight: 600; vertical-align: 1px;
}
.br-step[data-state='done'] .br-step__n { background: var(--ws-ok-tint); }
.br-step[data-state='locked'] { opacity: 0.8; }
.br-step .ws-card__head h2 { font-size: 16px; }
.br-origins { margin: 8px 0 16px; padding: 0; list-style: none; display: grid; gap: 6px; }
.br-snippet { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--ws-line); border-radius: var(--radius-sm, 8px); background: var(--ws-code-bg); color: var(--ws-text); font: 13px/1.6 var(--font-mono, ui-monospace, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
.br-accent { display: flex; align-items: center; gap: 12px; }
.br-accent__input { width: 56px; height: 40px; padding: 2px; border: 1px solid var(--ws-control-line); border-radius: 8px; background: var(--ws-input); cursor: pointer; }
.br-swatch { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 1px solid var(--ws-line); border-radius: 4px; vertical-align: -2px; }
.br-stats { display: grid; gap: 16px; margin-bottom: 24px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.br-stat { padding: 16px 20px; border: 1px solid var(--ws-line); border-radius: var(--radius-md); background: var(--ws-surface); }
.br-stat__label { color: var(--ws-muted); font-size: 13px; }
.br-stat__value { margin: 4px 0; color: var(--ws-text); font-size: 28px; font-weight: 600; line-height: 1.2; }
.br-stat__sub { color: var(--ws-muted); font-size: 13px; }
.br-preview { --br-accent: var(--brand-blue); display: grid; gap: 8px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--ws-line); border-top: 4px solid var(--br-accent); border-radius: var(--radius-md); background: var(--ws-sunken); }
.br-preview span { color: var(--ws-muted); font-size: 14px; }
.br-preview .br-preview__btn { justify-self: start; padding: 8px 16px; border-radius: 8px; background: var(--br-accent); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------------------------------------
   Brand profile: merchant-login look (JEN-727)

   Scoped to html[data-profile="brand"] (set by index.html before first paint on a host whose
   first label is "brands"), so the partner portal is untouched. Mirrors Jenni_Console
   src/styles/login.css and Login.tsx: a navy hero beside a card on a pale surface, Figtree and
   JetBrains Mono (both self-hosted, allowed by the CSP font-src 'self'), 10px controls, navy
   primary button, blue focus ring. The brand profile is light only, so no prefers-color-scheme
   rule is needed here. Breakpoints match the merchant: 640px card, 1280px split, 1440px wide.
   --------------------------------------------------------------------------------------------- */

html[data-profile="brand"] .wa {
  --lp-navy: #001635;
  --lp-navy-mid: #082249;
  --lp-blue: #1DA4FF;
  --lp-blue-deep: #0E7DD8;
  --lp-ink: #0E1B36;
  --lp-muted: #5B6B82;
  --lp-line: #E2E8F1;
  --lp-bg: #F6F8FB;
  --lp-placeholder: #9AA7BC;
  --lp-error: #C62828;
  --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  background: #FFFFFF;
  color: var(--lp-ink);
  font-family: 'Figtree', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Left panel: a compact navy band by default (wordmark plus a one-line tagline). */
html[data-profile="brand"] .wa-brand {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: 28px 24px;
  background: linear-gradient(160deg, #001635 0%, #082249 100%);
  color: #FFFFFF;
  --ws-link: #FFFFFF;
  --ws-link-line: rgba(255,255,255,0.55);
  --ws-focus: #FFFFFF;
}
html[data-profile="brand"] .wa-brand > :not(.wa-sparkle) { position: relative; z-index: 1; }
html[data-profile="brand"] .wa-sparkle {
  position: absolute;
  bottom: -90px;
  right: -90px;
  width: min(60%, 520px);
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
}
html[data-profile="brand"] .wa-wordmark { height: 30px; width: auto; align-self: flex-start; }
html[data-profile="brand"] .wa-brand__tag { margin: 14px 0 0; max-width: 40ch; color: #B8D4F0; font-size: 15px; line-height: 1.45; }
html[data-profile="brand"] .wa-brand__copy,
html[data-profile="brand"] .wa-stats,
html[data-profile="brand"] .wa-livefoot { display: none; }

/* Hero copy (shown from 1280px) */
html[data-profile="brand"] .wa-eyebrow {
  margin-bottom: 10px;
  font-family: var(--lp-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-blue);
}
html[data-profile="brand"] .wa-brand .wa-eyebrow { margin-bottom: 14px; }
html[data-profile="brand"] .wa-brand h2 {
  max-width: none;
  color: #FFFFFF;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.08;
}
html[data-profile="brand"] .wa-brand__copy > p { max-width: 42ch; margin-top: 16px; color: #B8D4F0; font-size: 16px; line-height: 1.55; }
html[data-profile="brand"] .wa-points strong { color: #FFFFFF; }
html[data-profile="brand"] .wa-points span { color: #B8D4F0; }
html[data-profile="brand"] .wa-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 480px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-profile="brand"] .wa-stat__value { font-size: 22px; font-weight: 800; letter-spacing: -0.012em; color: #FFFFFF; }
html[data-profile="brand"] .wa-stat__label {
  margin-top: 2px;
  font-family: var(--lp-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8FB8E0;
}
html[data-profile="brand"] .wa-livefoot {
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  margin-top: 32px;
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6E96C4;
}
html[data-profile="brand"] .wa-livedot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 999px;
  background: #2BBF82;
  animation: waPulse 2s ease-in-out infinite;
}
@keyframes waPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Right: flat white on mobile, the form card on a pale surface from 640px. */
html[data-profile="brand"] .wa-main { background: #FFFFFF; padding: 40px 24px 56px; }
html[data-profile="brand"] .wa-bar { display: none; }
html[data-profile="brand"] .wa-center { place-items: start center; padding: 0; }
html[data-profile="brand"] .wa-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
html[data-profile="brand"] .wa-card h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--lp-navy);
}
html[data-profile="brand"] .wa-lede { margin-top: 8px; font-size: 15px; color: var(--lp-muted); }
html[data-profile="brand"] .wa-card .ws-form { margin-top: 28px; gap: 18px; }
html[data-profile="brand"] .wa .ws-field__label { font-size: 13px; font-weight: 700; color: var(--lp-navy); }
html[data-profile="brand"] .wa .ws-field__hint { color: var(--lp-muted); }
html[data-profile="brand"] .wa-help { margin-top: 28px; font-size: 13px; color: var(--lp-placeholder); }
html[data-profile="brand"] .wa-help a { color: var(--lp-muted); text-decoration: underline; }

/* Inputs */
html[data-profile="brand"] .wa .ws-input {
  min-height: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  color: var(--lp-ink);
  background: #FFFFFF;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  transition: border-color 150ms var(--lp-ease), box-shadow 150ms var(--lp-ease);
}
html[data-profile="brand"] .wa .ws-input::placeholder { color: var(--lp-placeholder); }
html[data-profile="brand"] .wa .ws-input:hover { border-color: var(--lp-line); }
html[data-profile="brand"] .wa .ws-input:focus,
html[data-profile="brand"] .wa .ws-input:focus-visible {
  outline: none;
  border-color: var(--lp-blue);
  box-shadow: 0 0 0 3px rgba(29, 164, 255, 0.20);
}
html[data-profile="brand"] .wa .ws-input[aria-invalid='true'] { border-color: var(--lp-error); }
html[data-profile="brand"] .wa .ws-field__error { color: var(--lp-error); }
html[data-profile="brand"] .wa .ws-field__error .ws-i { color: var(--lp-error); }

/* Primary button */
html[data-profile="brand"] .wa-card .ws-btn--primary {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--lp-navy);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  transition: background 150ms var(--lp-ease), transform 150ms var(--lp-ease);
}
html[data-profile="brand"] .wa-card .ws-btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--lp-navy-mid);
  border-color: var(--lp-navy-mid);
  transform: translateY(-1px);
}
html[data-profile="brand"] .wa-card .ws-btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 164, 255, 0.35);
}

/* Links and the alternate-action rows */
html[data-profile="brand"] .wa-alt { margin-top: 24px; padding-top: 0; border-top: 0; text-align: left; font-size: 14px; color: var(--lp-muted); }
html[data-profile="brand"] .wa .ws-linkbtn {
  font-family: inherit;
  font-weight: 700;
  color: var(--lp-blue);
  text-decoration: none;
}
html[data-profile="brand"] .wa .ws-linkbtn:hover { color: var(--lp-blue-deep); text-decoration: underline; }
html[data-profile="brand"] .wa .ws-linkbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29, 164, 255, 0.35); border-radius: 6px; }

@media (min-width: 640px) {
  html[data-profile="brand"] .wa-brand { padding: 36px 40px; }
  html[data-profile="brand"] .wa-main { background: var(--lp-bg, #F6F8FB); padding: 56px 32px 64px; }
  html[data-profile="brand"] .wa-card {
    background: #FFFFFF;
    border: 1px solid var(--lp-line);
    border-radius: 22px;
    padding: 44px 48px;
    box-shadow: 0 16px 32px rgba(0, 22, 53, 0.06);
  }
  html[data-profile="brand"] .wa-card h1 { font-size: 32px; }
}

/* Desktop: the split layout. The navy panel is pinned, full height, on the left half. */
@media (min-width: 1280px) {
  html[data-profile="brand"] .wa { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
  html[data-profile="brand"] .wa-brand {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 48px 56px;
  }
  html[data-profile="brand"] .wa-wordmark { height: 34px; }
  html[data-profile="brand"] .wa-brand__tag { display: none; }
  html[data-profile="brand"] .wa-brand__copy { display: block; margin-block: auto; }
  html[data-profile="brand"] .wa-stats { display: grid; align-self: stretch; }
  html[data-profile="brand"] .wa-livefoot { display: flex; }
  html[data-profile="brand"] .wa-points { margin-top: 32px; }
  html[data-profile="brand"] .wa-main { padding: 48px 40px; }
  html[data-profile="brand"] .wa-center { place-items: center; }
}
@media (min-width: 1440px) {
  html[data-profile="brand"] .wa-card { max-width: 560px; padding: 52px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-profile="brand"] .wa-livedot { animation: none; }
  html[data-profile="brand"] .wa-card .ws-btn--primary:hover:not(:disabled):not([aria-disabled='true']) { transform: none; }
}