* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--color-surface-primary); color: var(--color-text-primary); font-family: var(--font-ui); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Global focus-visible: one real outline (not a shadow trick) for every
   interactive element. Action blue passes >=5.5:1 against the off-white
   page background and raised/white surfaces. It measures ~3:1 against
   Near Black, right at the WCAG non-text-contrast floor, so any future
   component placed on a --color-surface-dark section should add `.on-dark`
   (below) rather than rely on blue alone there. */
:focus-visible {
  outline: 3px solid var(--color-interaction);
  outline-offset: 2px;
}
.on-dark :focus-visible {
  outline-color: var(--color-surface-raised);
}

/* Redesign: component-lab and signature-search rules removed (dead mock styles). */
/* (signature-search frame/input/submit rules removed — see above) */
.domain-result { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-6); padding: var(--space-5); border-top: var(--border-default); }.domain-result:first-child { border-top: 0; }.domain-result--selected { background: var(--color-brand-expression-surface); border-left: 3px solid var(--color-brand-expression); box-shadow: none; }.domain-result__selected-marker { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: var(--space-2); border-radius: 50%; background: var(--color-brand-expression); color: var(--color-text-primary); font-size: 12px; line-height: 1; vertical-align: middle; }.domain-result__name { margin: 0; font-size: 19px; letter-spacing: -.025em; }.domain-result__status { margin-top: var(--space-2); }.domain-result__price { text-align: right; }.domain-result__price strong { display: block; font-size: 17px; }.domain-result__price span { display: block; margin-top: 3px; color: var(--color-text-secondary); font-size: 11px; }.domain-result__actions { display: flex; align-items: center; gap: var(--space-3); }.text-action { padding: 0; border: 0; color: var(--color-interaction); background: transparent; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }.status-badge { display: inline-flex; gap: 4px; align-items: center; padding: 4px 7px; border-radius: var(--radius-subtle); font-size: 11px; font-weight: 600; }.status-badge--available { color: #145a36; background: var(--color-status-success-surface); }.status-badge--unavailable { color: #7f2f26; background: var(--color-status-error-surface); }.status-badge--premium { color: #7a4a00; background: var(--color-status-warning-surface); }
/* (state-switcher and component-grid rules removed — dead mock styles) */.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 var(--space-4); border-radius: var(--radius-control); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }.button--primary { border: 1px solid var(--color-action-primary); color: var(--color-text-primary); background: var(--color-action-primary); }.button--primary:hover, .button--primary.button--hover { background: var(--color-action-primary-hover); }.button--secondary { border: 1px solid var(--color-border-strong); color: var(--color-text-primary); background: transparent; }.button--secondary:hover, .button--secondary.button--hover { border-color: var(--color-interaction); background: var(--color-interaction-surface); }.button--primary.button--focus, .button--secondary.button--focus { outline: 3px solid var(--color-interaction); outline-offset: 2px; }.button:disabled { border-color: var(--color-border-strong); color: var(--color-text-disabled); background: var(--color-divider); }.field-label { display: block; margin-bottom: var(--space-2); font-size: 12px; font-weight: 600; }.field { display: block; width: 100%; min-height: 42px; padding: 0 var(--space-3); border: var(--border-default); border-radius: var(--radius-control); color: var(--color-text-primary); background: var(--color-surface-raised); }.field:focus { outline: 0; border: var(--border-focus); }.field-help { margin: var(--space-2) 0 var(--space-4); color: var(--color-text-secondary); font-size: 12px; }.field--error { display: flex; align-items: center; color: var(--color-status-error); border-color: var(--color-status-error); font-size: 12px; }
@media (max-width: 720px) { .domain-result { grid-template-columns: 1fr auto; grid-template-areas: "name name" "price actions"; row-gap: var(--space-3); }.domain-result > div:first-child { grid-area: name; }.domain-result__price { grid-area: price; text-align: left; }.domain-result__actions { grid-area: actions; justify-self: end; } }

/* ---- Redesign system (HANDOFF): shared shell + reusable classes.
   Appended after legacy rules so these win on equal specificity. ---- */
.wordmark { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--color-text-primary); text-decoration: none; white-space: nowrap; }
.wordmark__dot { color: var(--color-action-primary); font-style: normal; }

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.page-body { flex: 1; }
.container { width: min(1200px, 100% - 48px); margin: 0 auto; }
.page-title { margin: 0; font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--color-text-primary); }
.page-subtitle { margin: 6px 0 0; color: var(--color-text-secondary); font-size: 15px; }

.topnav { background: var(--color-surface-primary); }
.topnav__inner { width: min(1200px, 100% - 48px); margin: 0 auto; padding: 16px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.topnav__wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.topnav__wordmark .badger-mark { width: 36px; height: 36px; }
.site-footer .badger-mark { width: 24px; height: 24px; vertical-align: -5px; margin-right: 8px; }
.badger-moment { margin: 0 0 16px; }
.badger-moment .badger-mark { display: block; }
@media (max-width: 600px) {
  .topnav__wordmark .badger-mark { width: 32px; height: 32px; }
}
.topnav__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.topnav__slot { display: contents; }
.topnav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--color-text-secondary); text-decoration: none; font-size: 15px; border-radius: var(--radius-control); }
.topnav__link:hover { color: var(--color-text-primary); }
.topnav__link.is-active { background: #FFFFFF; border-radius: 10px; padding: 12px 14px; color: var(--color-text-primary); font-weight: 600; }
.topnav__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; margin-left: 8px; background: var(--color-surface-dark); color: #FFFFFF; border-radius: var(--radius-pill); text-decoration: none; font-size: 15px; font-weight: 500; }
.topnav__cta:hover { color: #FFFFFF; }
.topnav__avatar { width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--color-action-primary-surface); color: var(--color-action-primary-hover); font-weight: 600; font-size: 16px; }

.cart-icon { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--color-surface-dark); color: #FFFFFF; text-decoration: none; font-size: 15px; font-weight: 500; }
.cart-icon:hover { color: #FFFFFF; }
.cart-icon__count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 34px; background: var(--color-brand-expression); color: var(--color-surface-dark); border-radius: 999px; padding: 2px 8px; font-size: 13px; font-weight: 600; }
/* Badge always shows the number (lime, even at zero) — stable pill width. */
.cart-icon__count--pulse { animation: cart-pulse 500ms var(--ease-standard); }
@keyframes cart-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.55); }
  100% { transform: scale(1); }
}

.site-footer { border-top: 1px solid var(--color-border-subtle); margin-top: var(--space-10); padding: 32px 24px; text-align: center; color: var(--color-text-muted); font-size: 14px; }
.site-footer p { margin: 0; }

/* Buttons: one primary (blue filled) per region, secondary (white+border), tertiary (text link). */
.button { min-height: 44px; font-size: 15px; }
.button--primary { border: 1px solid var(--color-action-primary); color: #FFFFFF; background: var(--color-action-primary); }
.button--primary:hover, .button--primary.button--hover { background: var(--color-action-primary-hover); border-color: var(--color-action-primary-hover); color: #FFFFFF; }
.button--secondary { border: 1px solid var(--color-border-strong); color: var(--color-text-primary); background: #FFFFFF; }
.button--secondary:hover, .button--secondary.button--hover { border-color: var(--color-border-strong); background: #FFFFFF; }
.button--tertiary { border: 0; background: transparent; color: var(--color-action-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.button--lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 14px; }

/* Chips (filters, suggestions): 44px targets, dark = active filter. */
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: #FFFFFF; color: var(--color-text-primary); font-size: 15px; text-decoration: none; }
a.chip:hover { border-color: var(--color-text-secondary); color: var(--color-text-primary); }
.chip.is-active { border-color: var(--color-surface-dark); background: var(--color-surface-dark); color: #FFFFFF; }
.chip__dim { color: var(--color-text-muted); }

/* Status pills: state only, never decoration. */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.pill--success { background: var(--color-status-success-surface); color: var(--color-status-success); border-color: var(--color-status-success-border); }
.pill--warning { background: var(--color-status-warning-surface); color: var(--color-status-warning); border-color: var(--color-status-warning-border); }
.pill--muted { background: var(--color-divider); color: var(--color-text-secondary); }
.pill--info { background: var(--color-action-primary-surface); color: var(--color-action-primary-hover); }

/* Cards: raised surface, subtle border, card radius. */
.card { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); padding: 24px; }
.card--amber { background: var(--color-status-warning-surface); border-color: var(--color-status-warning-border); }

@media (max-width: 720px) {
  .topnav__inner { padding: 12px 0; }
  .page-title { font-size: 32px; }
  table:not([class]) { display: block; max-width: 100%; overflow-x: auto; }
}

/* Legacy templates: bare controls get the system look. Classed components
   (.field, .button, .home-search input, .topnav__search input) win ties by
   source order or higher specificity, so this only touches unclassed markup. */
.btn, button:not([class]) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-control); border: 1px solid var(--color-border-strong); background: #FFFFFF; color: var(--color-text-primary); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover, button:not([class]):hover { border-color: var(--color-text-secondary); }
input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select:not([class]), textarea:not([class]) { font: inherit; font-size: 15px; color: var(--color-text-primary); background: #FFFFFF; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); min-height: 44px; padding: 8px 12px; box-sizing: border-box; }
textarea:not([class]) { min-height: 96px; width: 100%; resize: vertical; }
form label:not([class]) { display: inline-flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
form label:not([class]):has(input[type="checkbox"], input[type="radio"]) { flex-direction: row; align-items: center; }
table:not([class]) { width: 100%; border-collapse: collapse; font-size: 14px; }
table:not([class]) th, table:not([class]) td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-divider); }
table:not([class]) th { color: var(--color-text-muted); font-size: 13px; font-weight: 500; }