/* The Branding settings page — every rule the page used to carry in its
   inline <style> block (moved 2026-09-03, names unchanged; the block was
   already on the settings- charter prefix). Loaded from base.html after
   payment-settings.css so the cascade position the inline block had (after
   every linked sheet) is preserved. */

/* Each section is a white card on the hub's gray surface, matching
   .settings-profile-card and the other settings pages (var(--surface-raised)
   so it still themes in dark/branded mode). The margin-top provides
   the gap between stacked cards; the `:first-of-type` reset is
   intentionally OUT — with Logos extracted to its own panel above,
   Colors (the first .settings-branding-section) needs the same top gap. */
.settings-branding-section {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-mdlg) var(--spacing-lg);
  margin-top: var(--spacing-lg);
}
.settings-branding-section__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-md); padding-bottom: var(--spacing-md);
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  margin-bottom: var(--spacing-md);
}
.settings-branding-section__title {
  font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0; line-height: 1;
}
.settings-branding-section__actions { display: flex; align-items: center; gap: var(--spacing-sm); }

/* === BRAND COLOR CARDS — sample-chip / paint-sample treatment ===
   Four cards (Primary / Secondary / Accent / Highlight)
   laid out in a 2×2 grid. Inside each card:
   left column = swatch on top + hex/dropper directly
   beneath; right column = role label, hint, Light/Dark
   toggle. The swatch is a passive paint-sample (no
   click target). The eyedropper button to the right of
   the hex input is the sole entry point to the OS
   color picker — it proxies click() to a hidden sibling
   <input type="color">. Decoupling preview from edit
   keeps the cards safe to scan without accidentally
   opening the picker. */
.settings-brand-colors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-smd);
}
/* A lone card — cap its width so it reads as one card left-aligned, not a
   stretched full-width row. */
.settings-brand-colors--single {
  grid-template-columns: minmax(0, 320px);
}
/* The background card trails the 2×2 palette grid inside the same section,
   so it needs the gap the grid gives its own rows. Wider than the plain
   single cap because its meta column also carries the scope switch. */
.settings-brand-colors--background {
  grid-template-columns: minmax(0, 380px);
  margin-top: var(--spacing-smd);
}
.settings-brand-color {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: color-mix(in srgb, currentColor 2.5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  border-radius: var(--radius-card-lg);
  transition: border-color 200ms ease;
  flex-direction: row;
  align-items: stretch;
}
.settings-brand-color:focus-within {
  border-color: color-mix(in srgb, var(--color-focus-ring) 32%, transparent);
}
/* Visual column — swatch + hex/dropper stacked on the left. */
.settings-brand-color__visual {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsm);
  flex: 0 0 96px;
  min-width: 0;
}
/* Swatch — passive paint-sample. No cursor, no click target. */
.settings-brand-color__swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  margin: 0;
  /* Inset hairline so a near-white swatch still reads as an object. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
}
.settings-brand-color__sample {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 2.25rem; /* type specimen, not a heading — display tokens are for public surfaces */
  line-height: 1;
  letter-spacing: -0.02em;
  user-select: none;
  pointer-events: none;
  transition: color 200ms ease;
}

/* Hex row — directly under the swatch. Width matches the
   swatch so the visual column reads as one composed unit.
   The dropper button sits flush against the hex input
   (zero gap) per Nick's spec. */
.settings-brand-color__hex-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 96px;
}
.settings-brand-color__hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-xsm);
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  flex: 1;
  min-width: 0;
  max-width: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.settings-brand-color__hex:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-focus-ring) 50%, transparent);
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.settings-brand-color__dropper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  padding: 0;
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.settings-brand-color__dropper:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: currentColor;
}
.settings-brand-color__dropper:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}
.settings-brand-color__dropper .bi { font-size: var(--font-size-sm); }
.settings-brand-color__picker {
  /* Hidden native picker — kept in document flow so click()
     proxying works on Safari. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  border: 0;
  padding: 0;
}

/* Meta column — role label, hint, Light/Dark toggle on the right. */
.settings-brand-color__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 0;
}
.settings-brand-color__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.settings-brand-color__role {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1;
}
.settings-brand-color__hint {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, currentColor 60%, transparent);
  line-height: 1.3;
}
.settings-brand-color__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}
.settings-brand-color__field-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1;
}
/* Pills — segmented control for text-color choice. Native radios
   drive the form submit; sibling label is the visible button. */
.settings-brand-color__pills {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: var(--radius-md);
  width: fit-content;
}
.settings-brand-color__pill-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settings-brand-color__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: color-mix(in srgb, currentColor 65%, transparent);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: background 140ms ease, color 140ms ease;
}
.settings-brand-color__pill:hover {
  color: currentColor;
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.settings-brand-color__pill-radio:checked + .settings-brand-color__pill {
  background: var(--brand-primary, currentColor);
  color: var(--brand-primary-fg, #fff);
  font-weight: var(--font-weight-medium);
}
.settings-brand-color__pill-radio:focus-visible + .settings-brand-color__pill {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .settings-brand-colors { grid-template-columns: 1fr; }
  .settings-brand-color { padding: var(--spacing-smd); gap: var(--spacing-smd); }
  .settings-brand-color__visual { flex: 0 0 80px; }
  .settings-brand-color__swatch { width: 80px; height: 80px; }
  .settings-brand-color__hex-row { width: 80px; }
  .settings-brand-color__sample { font-size: var(--font-size-display); }
}

/* Info icon on the COLORS section header — circular, quiet,
   expands an inline help block on click (no tooltip). The
   block sits directly under the section's bottom border so
   the explanation lives in the same visual scope as the
   cards it describes. */
.settings-brand-section__info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.settings-brand-section__info-toggle:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: currentColor;
}
.settings-brand-section__info-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.settings-brand-section__info-toggle .bi { font-size: var(--font-size-sm); }
.settings-brand-section__info-toggle.is-open {
  background: var(--brand-primary, currentColor);
  border-color: var(--brand-primary, currentColor);
  color: var(--brand-primary-fg, #fff);
}
.settings-brand-section__info {
  margin: -0.5rem 0 var(--spacing-md);
  padding: var(--spacing-md);
  background: color-mix(in srgb, currentColor 3%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  border-radius: var(--radius-card-lg);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: color-mix(in srgb, currentColor 75%, transparent);
}
.settings-brand-section__info dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
}
.settings-brand-section__info dt:first-child { margin-top: 0; }
.settings-brand-section__info dd {
  margin: 0.15rem 0 0;
}

/* === Typography "specimen card" — 2-column compressed layout ===
   Left column: role eyebrow + font select + Advanced toggle
   (+ collapsed advanced grid). Right column: live preview.
   Compresses page height vs the previous stacked layout. */
.settings-typo-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  border-radius: var(--radius-card-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, currentColor 4%, transparent) 0%,
    color-mix(in srgb, currentColor 1.5%, transparent) 100%
  );
  margin-bottom: var(--spacing-smd);
  transition: border-color 200ms ease;
}
.settings-typo-row:hover { border-color: color-mix(in srgb, currentColor 14%, transparent); }
.settings-typo-row__main {
  display: flex; flex-direction: column;
  gap: var(--spacing-sm); min-width: 0;
}
.settings-typo-row__role {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-2xs); letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  line-height: 1;
}
/* Preview stage — sits in the right column at the same
   vertical level as the controls. */
.settings-typo-row__preview {
  background: var(--color-card-bg);
  border: 1px solid color-mix(in srgb, currentColor 7%, transparent);
  border-radius: var(--radius-card-lg);
  padding: var(--spacing-md) var(--spacing-mdlg);
  min-height: 64px;
  display: flex; align-items: center;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
    0 1px 2px color-mix(in srgb, currentColor 4%, transparent);
  transition: box-shadow 220ms ease;
}
.settings-typo-row__preview > * { margin: 0; line-height: 1.25; word-break: break-word; }
.settings-typo-row__preview.is-pulsing {
  animation: settings-typo-preview-pulse 380ms ease-out;
}
@keyframes settings-typo-preview-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-primary, #0f1116) 24%, transparent); }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand-primary, #0f1116) 0%, transparent),
                     inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
                     0 1px 2px color-mix(in srgb, currentColor 4%, transparent); }
}
/* Controls row: select grows, Advanced toggle is fixed-width
   (locked across the toggled state — see HTML for the
   stacked-label width-lock trick). */
.settings-typo-row__controls {
  display: flex; align-items: stretch;
  gap: var(--spacing-sm);
}
.settings-typo-row__select {
  appearance: none; -webkit-appearance: none;
  flex: 1 1 auto; min-width: 0;
  background: var(--color-card-bg)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 0.75rem center;
  padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-smd);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg); line-height: 1.3;
  min-height: 40px;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.settings-typo-row__select:hover {
  border-color: color-mix(in srgb, currentColor 24%, transparent);
  background-color: color-mix(in srgb, var(--brand-primary, #0f1116) 2.5%, var(--color-card-bg));
}
.settings-typo-row__select:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: var(--shadow-focus-ring);
}
/* === Quick controls strip ===
   Always-visible row of compact controls below the font
   select: Bold toggle (B), Italic toggle (I), 4-segment
   transform control, letter-spacing dropdown, line-height
   dropdown. Each control demonstrates what it does via
   its own typography (B is bold, I is italic, AB is
   uppercase, etc.) — no text labels needed. */
.settings-typo-quick {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--spacing-xsm);
  margin-top: var(--spacing-2xs);
}
/* Single toggle button (Bold / Italic). The glyph is
   rendered in the *style it represents* — B is heavy,
   I is italic — so the button itself is the legend. */
.settings-typo-quick__toggle {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 34px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, currentColor 2%, transparent);
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-family: ui-serif, Georgia, "Iowan Old Style", "Apple Garamond", serif;
  font-size: var(--font-size-lg); line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
              color 120ms ease, box-shadow 120ms ease;
}
.settings-typo-quick__toggle:hover {
  border-color: color-mix(in srgb, currentColor 26%, transparent);
  color: var(--brand-primary, #0f1116);
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.settings-typo-quick__toggle.is-active {
  background: var(--brand-primary, #0f1116);
  border-color: var(--brand-primary, #0f1116);
  color: var(--brand-primary-fg, #fff);
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000 20%, transparent);
}
.settings-typo-quick__toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}
.settings-typo-quick__toggle.is-active:focus-visible {
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, #000 20%, transparent),
    0 0 0 3px color-mix(in srgb, var(--brand-primary, #0f1116) 32%, transparent);
}
.settings-typo-quick__glyph--bold { font-weight: 800; letter-spacing: -0.02em; }
.settings-typo-quick__glyph--italic { font-style: italic; font-weight: 500; padding-right: 2px; }

/* Segmented control (transform) — 4 cells joined as a
   single pill. Native radios are visually-hidden but
   remain in the DOM so the change event fires natively
   and HTMX autosaves. Each segment renders its glyph in
   its own case so the button shows what it does. */
.settings-typo-quick__segment {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, currentColor 2%, transparent);
  overflow: hidden;
}
.settings-typo-quick__radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.settings-typo-quick__seg-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px;
  padding: 0 var(--spacing-sm);
  margin: 0;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  line-height: 1;
  color: color-mix(in srgb, currentColor 65%, transparent);
  cursor: pointer;
  border-right: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  transition: background-color 120ms ease, color 120ms ease;
  user-select: none;
}
.settings-typo-quick__seg-opt:last-of-type { border-right: none; }
.settings-typo-quick__seg-opt:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
  color: var(--brand-primary, #0f1116);
}
.settings-typo-quick__radio:checked + .settings-typo-quick__seg-opt {
  background: var(--brand-primary, #0f1116);
  color: var(--brand-primary-fg, #fff);
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
}
.settings-typo-quick__radio:focus-visible + .settings-typo-quick__seg-opt {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}
.settings-typo-quick__seg-opt--none { font-family: ui-sans-serif, system-ui, sans-serif; opacity: 0.7; }
.settings-typo-quick__seg-opt--cap { text-transform: capitalize; }
.settings-typo-quick__seg-opt--up { text-transform: uppercase; }
.settings-typo-quick__seg-opt--low { text-transform: lowercase; }

/* Compact dropdown for letter-spacing + line-height. */
.settings-typo-quick__select {
  appearance: none; -webkit-appearance: none;
  height: 34px;
  background: var(--color-card-bg)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 0.5rem center;
  padding: 0 var(--spacing-lg) 0 var(--spacing-smd);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm); line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  max-width: 130px;
}
.settings-typo-quick__select:hover {
  border-color: color-mix(in srgb, currentColor 26%, transparent);
}
.settings-typo-quick__select:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: var(--shadow-focus-ring);
}
@media (max-width: 768px) {
  .settings-typo-row { grid-template-columns: 1fr; }
  .settings-typo-quick__select { max-width: 100%; flex: 1 1 auto; }
}

.settings-branding-select {
  appearance: none; -webkit-appearance: none;
  background: var(--color-card-bg)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 0.75rem center;
  padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-smd);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--radius-md);
  font: inherit; font-size: var(--font-size-md); line-height: 1.4;
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.settings-branding-select:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: var(--shadow-focus-ring);
}

/* === Skill Level Names ===
   Card with eyebrow heading + 3-up grid of named fields.
   Same shell treatment (subtle border + tinted bg + card-lg
   radius) as `.settings-brand-color` and `.settings-vocab-row` so it slots
   into the same family as the other branding controls. */
.settings-skill-levels-card {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  border-radius: var(--radius-card-lg);
  background: color-mix(in srgb, currentColor 3%, transparent);
  transition: border-color 140ms ease;
}
.settings-skill-levels-card:hover { border-color: color-mix(in srgb, currentColor 14%, transparent); }
.settings-skill-levels-card__heading {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-smd);
}
.settings-skill-levels-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-smd);
}
.settings-skill-levels-card__field {
  display: flex; flex-direction: column;
  gap: var(--spacing-xs); min-width: 0;
}
.settings-skill-levels-card__field-label {
  font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
@media (max-width: 768px) {
  .settings-skill-levels-card__grid { grid-template-columns: 1fr; }
}

/* === Domain cards ===
   Custom-domain input and DNS verification share the same outer
   card shell so the section reads as peer surfaces instead of
   one styled + one bare. */
.settings-domain-stack { display: flex; flex-direction: column; gap: var(--spacing-md); }
.settings-domain-card {
  padding: var(--spacing-md);
  border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  border-radius: var(--radius-card-lg);
  background: color-mix(in srgb, currentColor 3%, transparent);
  transition: border-color 140ms ease;
}
.settings-domain-card:hover { border-color: color-mix(in srgb, currentColor 14%, transparent); }
.settings-domain-card__heading {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-smd);
}

.settings-domain-custom__row {
  display: flex; align-items: center; gap: var(--spacing-sm); margin: 0;
}
.settings-domain-custom__row .settings-branding-input { max-width: 380px; }

/* DNS verification reuses the .settings-domain-card shell — it no
   longer needs its own border/background. We keep a head
   layout and the monospace record block. */
.settings-domain-dns__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-sm); margin-bottom: var(--spacing-smd);
}
.settings-domain-dns__head .settings-domain-card__heading { margin: 0; }
.settings-domain-dns__record {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-sm);
  background: var(--color-card-bg);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: var(--radius-md);
  padding: var(--spacing-smd);
  margin-bottom: var(--spacing-smd);
}
.settings-domain-dns__record div { margin-bottom: 2px; }
.settings-domain-dns__record div:last-child { margin-bottom: 0; }