/* components.css — the shared structure of the site (the "template manual").
   Everything here lives in the components layer so utilities can override it and
   so element defaults in the base layer never accidentally win. Documented in
   docs/components.md and shown live at /design. */

@layer components {

  /* ---- Buttons — copper is rationed to the single primary action per view. -- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

  .btn-primary { background: var(--accent); color: var(--paper); }
  .btn-primary:hover { background: var(--copper-soft); color: var(--paper); }

  .btn-secondary { background: transparent; color: var(--brand); border-color: var(--border); }
  .btn-secondary:hover { border-color: var(--brand); color: var(--brand); }

  .btn-ghost { background: transparent; color: var(--text-muted); }
  .btn-ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }

  .btn-danger { background: var(--state-taken); color: var(--paper); }
  .btn-danger:hover { background: color-mix(in srgb, var(--state-taken) 85%, black); }

  .btn-sm { padding: 0.4rem 0.7rem; font-size: var(--step--1); }
  .btn-lg { padding: 0.9rem 1.4rem; font-size: var(--step-1); }
  .btn-block { width: 100%; }
  .btn-icon { padding: 0.55rem; }

  /* ---- Header / footer ------------------------------------------------------ */
  .site-header,
  .site-footer {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .site-footer {
    border-bottom: 0;
    border-top: 1px solid var(--border);
    margin-top: 4rem;
    color: var(--text-muted);
    font-size: var(--step--1);
  }
  .site-header .bar,
  .site-footer .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1rem;
  }
  .brand-mark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-1);
    color: var(--ink);
    text-decoration: none;
  }
  .nav { display: flex; gap: 1.25rem; align-items: center; }
  /* :not(.btn) so button-styled links (e.g. the Sign in CTA) keep their own
     colour instead of inheriting the quiet nav-link colour. */
  .nav a:not(.btn) { color: var(--text-muted); text-decoration: none; }
  .nav a:not(.btn):hover { color: var(--ink); }

  /* Currency switcher — a quiet control among the nav links. */
  .currency-switch { margin: 0; display: inline-flex; }
  .currency-switch select {
    appearance: none;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .9rem;
    padding: .2rem 1.6rem .2rem .6rem;
    border-radius: var(--radius);
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right .85rem center, right .6rem center;
    background-size: .35rem .35rem, .35rem .35rem;
    background-repeat: no-repeat;
  }
  .currency-switch select:hover { color: var(--ink); border-color: var(--ink); }

  /* Account switcher reuses the currency-switch chrome for a consistent header. */
  .account-switch { margin: 0; display: inline-flex; }
  .account-switch select {
    appearance: none;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .9rem;
    max-width: 12rem;
    padding: .2rem 1.6rem .2rem .6rem;
    border-radius: var(--radius);
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right .85rem center, right .6rem center;
    background-size: .35rem .35rem, .35rem .35rem;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
  }
  .account-switch select:hover { color: var(--ink); border-color: var(--ink); }

  /* Inline single-control forms used inside table cells (role select, remove). */
  .inline-form { display: inline-flex; margin: 0; }

  /* Email-verification reminder banner on the dashboard overview. */
  .verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .verify-banner form { margin: 0; }

  /* ---- Hero — landscape-led, search is the focal action. -------------------- */
  .hero {
    position: relative;
    min-height: 60dvh;
    display: grid;
    align-items: center;
    background:
      linear-gradient(180deg, rgba(20, 32, 43, 0.05), rgba(20, 32, 43, 0.35)),
      var(--ink);
    color: var(--stone);
    overflow: hidden;
  }
  .hero .container { padding-block: 4rem; }
  .hero h1 { color: var(--paper); font-size: var(--step-5); max-width: 18ch; }
  .hero .tagline { color: var(--sage); font-size: var(--step-1); max-width: 40ch; }

  /* Topographic contour signature — faint background motif. */
  .contour {
    position: absolute;
    inset: 0;
    background-image: repeating-radial-gradient(
      circle at 70% 120%,
      transparent 0 38px,
      rgba(143, 168, 155, 0.10) 38px 39px
    );
    pointer-events: none;
  }

  /* ---- Search --------------------------------------------------------------- */
  .search { display: flex; gap: 0.5rem; margin-top: 1.5rem; max-width: 36rem; }
  .search input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--step-1);
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--ink);
  }

  /* ---- Domain result rows --------------------------------------------------- */
  .results { margin-top: 1rem; display: grid; gap: 0.5rem; }
  .search-empty { margin-top: 1rem; }
  .result {
    display: grid;
    grid-template-columns: 1fr auto 6rem auto;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
  }
  .result .domain { font-size: var(--step-1); color: var(--ink); }
  .result .state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--step--1); font-weight: 600; }
  .result .price { text-align: right; font-variant-numeric: tabular-nums; }
  @media (max-width: 36rem) {
    .result { grid-template-columns: 1fr auto; gap: 0.4rem 0.75rem; }
    .result .price { text-align: left; grid-column: 1; }
  }
  .state-available { color: var(--state-available); }
  .state-taken { color: var(--state-taken); }
  .state-premium { color: var(--state-premium); }
  .result .price { color: var(--text-muted); }
  .suggestions-title { font-size: var(--step-1); margin-top: 2rem; color: var(--text-muted); }

  /* Search progress. htmx adds .htmx-request to the hx-indicator target while a
     search is in flight; we only take layout space then, so there is no idle gap
     under the box. */
  .search-status {
    margin-top: 0.75rem; gap: 0.5rem; color: var(--text-muted);
    font-size: var(--step--1); display: none;
  }
  .search-status.htmx-request { display: inline-flex; align-items: center; }
  /* Shown only while the lazy suggestions slot is loading; the slot replaces
     itself (outerHTML) once results arrive, removing this line. */
  .suggestions-loading {
    margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--text-muted); font-size: var(--step--1);
  }

  /* ---- CMS / legal prose ---------------------------------------------------- */
  .prose { max-width: var(--measure); }
  .prose h2 { margin-top: 2rem; }

  /* ---- Cart + checkout ------------------------------------------------------ */
  .cart-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.5rem; }
  .cart-line {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
  }
  .cart-line .meta { color: var(--text-muted); font-size: var(--step--1); }
  .cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-display);
    font-size: var(--step-1);
    border-top: 1px solid var(--border);
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .cart-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }

  /* ---- Forms ---------------------------------------------------------------- */
  .stack { display: grid; gap: 1rem; max-width: 36rem; }
  /* Legacy raw-label forms. The :not() guards keep these rules from bleeding
     into ui_field components (.field / .input / .textarea) nested inside a
     .stack, which own their own layout. */
  .stack label:not(.field-label):not(.choice):not(.switch) { display: grid; gap: 0.35rem; font-weight: 500; }
  .stack input:not(.input):not(.choice-input),
  .stack textarea:not(.textarea),
  .stack select:not(.select),
  .checkout-form input[type="text"],
  .checkout-form input[type="email"] {
    font: inherit;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
  }
  .stack textarea:not(.textarea) { resize: vertical; }
  .checkout-form { margin-top: 2rem; display: grid; gap: 1rem; max-width: 32rem; }
  .check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
  .hint { color: var(--text-muted); font-size: var(--step--1); }
  .form-error {
    background: #f6e7e3;
    border: 1px solid var(--copper);
    color: #7a3a22;
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    max-width: 32rem;
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 1.5rem 0; }
  .summary dt { color: var(--text-muted); }
  .summary dd { margin: 0; }
  .back-link { display: inline-flex; align-items: center; gap: 0.4rem; }

  .auth-wrap { display: flex; justify-content: center; }
  .auth-card { width: 100%; max-width: 26rem; }
  .auth-card h1 { margin-bottom: 1.5rem; }

  /* ---- Error / not-found page ----------------------------------------------- */
  .error-page { text-align: center; padding-block: var(--space-8, 4rem); }
  .error-code {
    font-size: clamp(3.5rem, 12vw, 6rem);
    line-height: 1;
    color: var(--brand);
    margin: 0;
  }
  .error-message {
    color: var(--text-muted);
    max-width: 34rem;
    margin: 1rem auto 2rem;
  }

  /* ---- Dashboard + control panel shell -------------------------------------- */
  .dash { display: grid; grid-template-columns: 12rem 1fr; gap: 2.5rem; align-items: start; }
  .dash-nav { display: grid; gap: 0.25rem; position: sticky; top: 1.5rem; }
  .dash-nav a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius);
    border-left: 2px solid transparent;
  }
  .dash-nav a .icon { color: var(--text-faint, var(--text-muted)); }
  .dash-nav a[aria-current="page"] .icon { color: inherit; }
  .dash-nav a:hover { color: var(--ink); background: var(--surface); }
  .dash-nav a[aria-current="page"] {
    color: var(--ink);
    background: var(--surface);
    border-left-color: var(--accent);
    font-weight: 600;
  }
  .dash-body { min-width: 0; }

  /* ---- Stat tiles ----------------------------------------------------------- */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
  }
  .stat-card {
    display: grid;
    gap: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    color: inherit;
  }
  a.stat-card:hover { border-color: var(--brand); }
  .stat-num { font-family: var(--font-display); font-size: var(--step-3); color: var(--ink); }
  .stat-label { color: var(--text-muted); font-size: var(--step--1); }

  /* ---- Data tables ---------------------------------------------------------- */
  .data-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
  .data-table th {
    text-align: left;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .data-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
  .data-table th.num { text-align: right; }
  .data-table .row-actions { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; }

  /* Density 5: the control panel trades whitespace for information density.
     Function over flourish - tighter rhythm, compact tables, smaller headings. */
  .dash-dense { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
  .dash-dense .dash-body > h1 { font-size: var(--step-3); margin-bottom: 1rem; }
  .dash-dense .dash-body h2 { font-size: var(--step-1); }
  .dash-dense .data-table th { padding: 0.4rem 0.6rem; }
  .dash-dense .data-table td { padding: 0.45rem 0.6rem; font-size: var(--step--1); }
  .dash-dense .card { padding: 1.1rem 1.25rem; }
  .dash-dense .stack { max-width: none; gap: 0.7rem; }

  /* ---- Pills / status chips ------------------------------------------------- */
  .pill {
    display: inline-block;
    font-size: var(--step--2);
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
  }
  .pill-succeeded { color: var(--state-available); border-color: var(--state-available); }
  .pill-failed, .pill-dead { color: var(--state-taken); border-color: var(--state-taken); }
  .pill-queued, .pill-awaiting_supplier { color: var(--state-premium); border-color: var(--state-premium); }
  .pill-sm { font-size: var(--step--2); padding: 0.05rem 0.45rem; }

  /* ---- Generic card --------------------------------------------------------- */
  .card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
  }
  .card h2 { margin-top: 0; font-size: var(--step-1); }

  /* ---- Domain detail -------------------------------------------------------- */
  .domain-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
  .domain-head h1 { margin: 0; }
  .domain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0; }
  .kv { display: grid; gap: 0.6rem; margin: 0; }
  .kv > div { display: flex; justify-content: space-between; gap: 1rem; }
  .kv dt { color: var(--text-muted); margin: 0; }
  .kv dd { margin: 0; text-align: right; }
  .ns-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
  .auth-reveal summary { display: inline-block; cursor: pointer; list-style: none; }
  .auth-reveal summary::-webkit-details-marker { display: none; }
  .auth-code { margin-top: 0.75rem; padding: 0.5rem 0.75rem; background: var(--bg); border-radius: var(--radius); user-select: all; }

  /* ---- Invoice view --------------------------------------------------------- */
  .invoice-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
  .invoice-sheet { border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 2.25rem; background: var(--surface); }
  .invoice-head { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
  .invoice-head h1 { margin: 0; font-size: 1.5rem; }
  .invoice-meta { margin: 0; display: grid; gap: .25rem; }
  .invoice-meta div { display: flex; gap: 1rem; justify-content: space-between; }
  .invoice-meta dt { color: var(--text-muted); margin: 0; }
  .invoice-meta dd { margin: 0; font-weight: 600; }
  .invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
  .invoice-parties h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 .5rem; }
  .invoice-parties p { margin: 0 0 .15rem; }
  .invoice-lines .num { text-align: right; }
  .invoice-totals { margin-top: 1.5rem; margin-left: auto; max-width: 18rem; display: grid; gap: .35rem; }
  .invoice-totals div { display: flex; justify-content: space-between; }
  .invoice-totals .grand { border-top: 1px solid var(--border); padding-top: .5rem; font-weight: 700; font-size: 1.1rem; }
  .invoice-note { margin-top: 1.5rem; font-size: .85rem; }

  /* ---- One-time API key reveal ---------------------------------------------- */
  .key-reveal {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--state-premium);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--state-premium) 8%, transparent);
  }
  .key-reveal p { margin: 0 0 .5rem; }
  .key-plain {
    display: block;
    font-family: var(--font-mono);
    font-size: .95rem;
    word-break: break-all;
    user-select: all;
    padding: .6rem .75rem;
    background: var(--surface);
    border-radius: var(--radius);
  }

  /* ---- Responsive ----------------------------------------------------------- */
  @media (max-width: 640px) {
    .domain-grid { grid-template-columns: 1fr; }
    /* Let wide data tables scroll horizontally instead of forcing the whole
       page wider than the phone viewport. Keeps column alignment intact. */
    .data-table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
  }
  @media (max-width: 48rem) {
    .dash { grid-template-columns: 1fr; gap: 1.5rem; }
    .dash-nav { position: static; grid-auto-flow: column; overflow-x: auto; }
    .form-row { grid-template-columns: 1fr; }
  }
}

/* ===========================================================================
   The template manual — shared components. See docs/components.md and /design.
   Everything below is in the components layer so utilities can still override.
   =========================================================================== */
@layer components {

  /* ---- Icons (inline SVG sprite at img/icons.svg) --------------------------- */
  .icon {
    width: var(--icon);
    height: var(--icon);
    flex: 0 0 auto;
    vertical-align: -0.18em;
    fill: none;
    stroke: currentColor;
  }
  .icon-sm { --icon: 1em; }
  .icon-lg { --icon: 1.6rem; }
  .icon-xl { --icon: 2.25rem; }

  /* ---- Layout primitives: sections, bands, eyebrows ------------------------- */
  .section { padding-block: var(--section-y); }
  .section-sm { padding-block: clamp(2rem, 4vw, 3rem); }
  .section + .section { padding-top: 0; }

  .band-dark { background: var(--bg-dark); color: var(--text-on-dark); position: relative; overflow: hidden; }
  .band-spruce { background: var(--spruce); color: var(--text-on-dark); position: relative; overflow: hidden; }

  /* Dark-context: remap semantic roles for any subtree on a dark background.
     Keeps "one theme per page" while letting whole sections invert cleanly. */
  .on-dark,
  .band-dark,
  .band-spruce {
    --surface: var(--surface-dark);
    --text: var(--text-on-dark);
    --text-muted: var(--muted-on-dark);
    --border: var(--border-dark);
    --bg: var(--bg-dark);
  }
  .on-dark a, .band-dark a, .band-spruce a { color: var(--text-on-dark); }
  .on-dark .btn-secondary, .band-dark .btn-secondary, .band-spruce .btn-secondary {
    color: var(--text-on-dark); border-color: var(--border-dark);
  }
  .on-dark .btn-secondary:hover, .band-dark .btn-secondary:hover, .band-spruce .btn-secondary:hover {
    border-color: var(--text-on-dark); color: var(--text-on-dark);
  }

  .eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
  }
  .lede { font-size: var(--step-1); color: var(--text-muted); max-width: var(--measure-tight); }
  .section-head { max-width: 46rem; margin-bottom: 2rem; }

  /* Contour signature as a section motif + as a divider. */
  .contour-band::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 240px;
    background: url("/static/img/contour.svg") center / cover no-repeat;
    opacity: 0.5;
    pointer-events: none;
  }
  .divider { border: 0; border-top: 1px solid var(--border); margin-block: var(--band-gap); }
  .divider-contour {
    height: 56px; border: 0; margin: 0;
    background: url("/static/img/contour.svg") center / 1200px 100% repeat-x;
    opacity: 0.4;
  }

  /* ---- Cluster / row helpers ------------------------------------------------ */
  .cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
  .cluster-between { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }

  /* ---- Card extensions ------------------------------------------------------ */
  .card-hover { transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .card-hover:hover { border-color: var(--sage); box-shadow: var(--shadow-2); transform: translateY(-2px); }
  .card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
  .card-header h2, .card-header h3 { margin: 0; }
  .card-footer { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
  .card-media { margin: -1.25rem -1.5rem 1rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
  .card-media img { width: 100%; height: 100%; object-fit: cover; }
  .card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

  /* ---- Feature grid (value props) ------------------------------------------ */
  .feature { display: grid; gap: 0.5rem; }
  .feature .feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    margin-bottom: 0.35rem;
  }
  .band-dark .feature .feature-icon, .on-dark .feature .feature-icon {
    background: color-mix(in srgb, var(--sage) 18%, transparent); color: var(--sage);
  }
  .feature h3 { font-size: var(--step-1); margin: 0; }
  .feature p { color: var(--text-muted); margin: 0; }

  /* ---- Form controls (reusable classes for the field partial) -------------- */
  .input, .select, .textarea {
    width: 100%;
    font: inherit;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  .input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--slate) 75%, var(--paper)); }
  .input:focus, .select:focus, .textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
    outline: none;
  }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--state-taken);
  }
  .textarea { resize: vertical; min-height: 6rem; }
  .select {
    appearance: none;
    padding-right: 2.2rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%);
    background-position: right 1.05rem center, right 0.8rem center;
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
  }
  .input-group { display: flex; gap: 0.5rem; }
  .input-group .input { flex: 1; }

  /* Field block: label + control + help/error. */
  .field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
  .field > .field-label { font-weight: 500; }
  .field .req { color: var(--accent); }
  .field-hint { color: var(--text-muted); font-size: var(--step--1); }
  .field-error { color: var(--text-danger); font-size: var(--step--1); display: flex; gap: 0.35rem; align-items: center; }
  fieldset.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1rem; }
  fieldset.fieldset > legend { padding: 0 0.4rem; font-weight: 600; color: var(--text-muted); font-size: var(--step--1); }

  /* Checkbox + radio: native input, styled via appearance:none (keeps a11y). */
  .choice { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
  .choice-input {
    appearance: none;
    flex: 0 0 auto;
    width: 1.2em; height: 1.2em;
    margin-top: 0.15em;
    border: 1.5px solid var(--sage);
    border-radius: var(--radius-sm);
    background: var(--paper);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  }
  .choice-input[type="radio"] { border-radius: 50%; }
  .choice-input::before {
    content: "";
    width: 0.7em; height: 0.7em;
    transform: scale(0);
    transition: transform var(--dur-1) var(--ease-out);
    box-shadow: inset 1em 1em var(--paper);
  }
  .choice-input[type="checkbox"]::before {
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }
  .choice-input[type="radio"]::before { border-radius: 50%; }
  .choice-input:checked { background: var(--brand); border-color: var(--brand); }
  .choice-input:checked::before { transform: scale(1); }
  .choice-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Switch: hidden input + visible track/thumb. */
  .switch { display: inline-flex; gap: 0.6rem; align-items: center; cursor: pointer; }
  .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .switch .track {
    --h: 1.4rem;
    width: 2.5rem; height: var(--h);
    border-radius: var(--radius-pill);
    background: var(--sage);
    position: relative;
    transition: background-color var(--dur-2) var(--ease-out);
    flex: 0 0 auto;
  }
  .switch .track::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: calc(var(--h) - 4px); height: calc(var(--h) - 4px);
    border-radius: 50%; background: var(--paper);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-2) var(--ease-out);
  }
  .switch input:checked + .track { background: var(--brand); }
  .switch input:checked + .track::after { transform: translateX(1.1rem); }
  .switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ---- Badges / status chips ------------------------------------------------ */
  .badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: var(--step--1); font-weight: 600;
    padding: 0.15rem 0.6rem; border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  }
  .badge .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
  .badge-success { color: var(--text-success); border-color: color-mix(in srgb, var(--state-available) 45%, var(--border)); background: var(--tint-success); }
  .badge-danger  { color: var(--text-danger);  border-color: color-mix(in srgb, var(--state-taken) 45%, var(--border));     background: var(--tint-danger); }
  .badge-warning { color: var(--text-warning); border-color: color-mix(in srgb, #b9892f 45%, var(--border));                background: var(--tint-warning); }
  .badge-info    { color: var(--text-info);    border-color: color-mix(in srgb, var(--slate) 35%, var(--border));           background: var(--tint-info); }
  .badge-accent  { color: var(--paper); background: var(--accent); border-color: var(--accent); }

  /* ---- Alerts / banners ----------------------------------------------------- */
  .alert {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.9rem 1.1rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text);
  }
  .alert .icon { margin-top: 0.1em; }
  .alert .alert-title { font-weight: 600; margin: 0 0 0.15rem; }
  .alert .alert-body { margin: 0; color: inherit; max-width: none; }
  .alert-success { background: var(--tint-success); border-color: color-mix(in srgb, var(--state-available) 40%, var(--border)); color: var(--text-success); }
  .alert-danger  { background: var(--tint-danger);  border-color: color-mix(in srgb, var(--state-taken) 40%, var(--border));     color: var(--text-danger); }
  .alert-warning { background: var(--tint-warning); border-color: color-mix(in srgb, #b9892f 40%, var(--border));                color: var(--text-warning); }
  .alert-info    { background: var(--tint-info);    border-color: color-mix(in srgb, var(--slate) 30%, var(--border));           color: var(--text-info); }

  /* ---- Spinner + skeleton --------------------------------------------------- */
  .spinner {
    width: 1.2em; height: 1.2em; border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    display: inline-block;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .skeleton {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, var(--surface)) 25%, color-mix(in srgb, var(--ink) 10%, var(--surface)) 37%, color-mix(in srgb, var(--ink) 6%, var(--surface)) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--radius);
    height: 1rem;
  }
  @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
  .htmx-indicator { opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

  /* ---- Modal (native <dialog>) --------------------------------------------- */
  dialog.modal {
    border: 0; padding: 0; background: transparent;
    max-width: min(34rem, 92vw); width: 100%;
    color: var(--text);
  }
  dialog.modal::backdrop { background: rgba(20, 32, 43, 0.45); backdrop-filter: blur(2px); }
  dialog.modal .modal-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
    padding: 1.5rem 1.6rem;
  }
  .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
  .modal-head h2 { margin: 0; font-size: var(--step-2); }
  .modal-body { margin: 0; }
  .modal-foot { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }
  dialog.modal[open] { animation: modal-in var(--dur-2) var(--ease-out); }
  @keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ---- Toasts --------------------------------------------------------------- */
  .toast-region {
    position: fixed; z-index: 80;
    right: 1rem; bottom: 1rem;
    display: grid; gap: 0.5rem;
    max-width: min(24rem, calc(100vw - 2rem));
  }
  .toast {
    background: var(--ink); color: var(--paper);
    padding: 0.75rem 1rem; border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
    border-left: 3px solid var(--sage);
  }
  .toast.is-in { opacity: 1; transform: none; }
  .toast-success { border-left-color: var(--state-available); }
  .toast-danger  { border-left-color: var(--state-taken); }
  .toast-info    { border-left-color: var(--sage); }

  /* ---- Steps / progress (checkout) ----------------------------------------- */
  .steps { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: step; }
  .steps li { display: flex; align-items: center; gap: 0.6rem; color: var(--text-muted); font-size: var(--step--1); }
  .steps li::before {
    counter-increment: step; content: counter(step);
    display: grid; place-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.8rem;
  }
  .steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
  .steps li[aria-current="step"]::before { background: var(--accent); border-color: var(--accent); color: var(--paper); }
  .steps li[data-done="true"]::before { background: var(--brand); border-color: var(--brand); color: var(--paper); content: "\2713"; }

  /* ---- Tabs ----------------------------------------------------------------- */
  .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
  .tab {
    appearance: none; background: none; border: 0; cursor: pointer;
    font: inherit; color: var(--text-muted);
    padding: 0.6rem 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
    text-decoration: none;
  }
  .tab:hover { color: var(--ink); }
  .tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

  /* ---- Breadcrumb ----------------------------------------------------------- */
  .breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; list-style: none; margin: 0 0 1.25rem; padding: 0; color: var(--text-muted); font-size: var(--step--1); }
  .breadcrumb a { color: var(--text-muted); text-decoration: none; }
  .breadcrumb a:hover { color: var(--ink); }
  .breadcrumb li { display: flex; align-items: center; gap: 0.4rem; }
  .breadcrumb [aria-current="page"] { color: var(--ink); }

  /* ---- Pagination ----------------------------------------------------------- */
  .pagination { display: flex; gap: 0.25rem; align-items: center; list-style: none; margin: 1.5rem 0 0; padding: 0; }
  .pagination a, .pagination span {
    display: inline-grid; place-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text-muted); text-decoration: none; font-variant-numeric: tabular-nums;
  }
  .pagination a:hover { border-color: var(--brand); color: var(--ink); }
  .pagination [aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .pagination [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

  /* ---- TLD strip (curated/popular) ------------------------------------------ */
  .tld-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .tld-chip {
    display: inline-flex; align-items: baseline; gap: 0.5rem;
    font-family: var(--font-mono);
    padding: 0.55rem 0.9rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface);
    text-decoration: none; color: var(--ink);
    transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  }
  .tld-chip:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
  .tld-chip .tld-price { color: var(--text-muted); font-size: var(--step--1); }

  /* ---- Trust row ------------------------------------------------------------ */
  .trust-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; color: var(--text-muted); }
  .trust-row .trust-item { display: flex; gap: 0.5rem; align-items: center; }

  /* ---- Definition / meta lists --------------------------------------------- */
  .meta-list { display: grid; gap: 0.4rem; margin: 0; }
  .meta-list > div { display: flex; justify-content: space-between; gap: 1rem; }
  .meta-list dt { color: var(--text-muted); margin: 0; }
  .meta-list dd { margin: 0; text-align: right; }

  /* ---- Empty state ---------------------------------------------------------- */
  .empty-state {
    display: grid; gap: 0.75rem; justify-items: center; text-align: center;
    padding: 3rem 1.5rem; color: var(--text-muted);
    border: 1px dashed var(--border); border-radius: var(--radius-lg);
  }
  .empty-state .icon { --icon: 2rem; color: var(--sage); }
  .empty-state h3 { margin: 0; color: var(--text); }
}

/* ===========================================================================
   Global chrome — header, nav, footer. Built from the manual.
   =========================================================================== */
@layer components {

  .site-header { position: sticky; top: 0; z-index: 40; }
  .site-header .bar { position: relative; }

  .brand-mark { display: inline-flex; align-items: center; gap: 0.55rem; }
  .brand-logo { width: 1.75rem; height: 1.75rem; border-radius: 5px; display: block; }

  .nav-toggle { display: none; }

  .nav-cart { display: inline-flex; align-items: center; gap: 0.4rem; }
  .cart-badge {
    font-family: var(--font-mono); font-size: var(--step--2); line-height: 1;
    background: var(--accent); color: var(--paper);
    border-radius: var(--radius-pill);
    min-width: 1.2rem; height: 1.2rem; padding: 0 0.32rem;
    display: inline-grid; place-content: center;
  }
  .cart-badge:empty { display: none; }

  /* Footer */
  .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-block: 2.5rem 2rem;
  }
  .footer-brand .brand-mark { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); margin-bottom: 0.5rem; }
  .footer-tagline { color: var(--text-muted); max-width: 30ch; margin: 0; }
  .footer-col { display: grid; gap: 0.5rem; align-content: start; }
  .footer-col h2 {
    font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin: 0 0 0.25rem;
  }
  .footer-col a { color: var(--text-muted); text-decoration: none; }
  .footer-col a:hover { color: var(--ink); }
  .footer-legal { color: var(--text-muted); }
  .footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.4rem 1.5rem;
    padding-block: 1.25rem; border-top: 1px solid var(--border);
    color: var(--text-muted);
  }

  /* Mobile nav: collapse the bar into a toggled dropdown panel. */
  @media (max-width: 52rem) {
    .nav-toggle { display: inline-flex; }
    .site-header .bar { flex-wrap: wrap; }
    .nav {
      display: none;
      position: absolute; inset: 100% 0 auto 0;
      flex-direction: column; align-items: stretch;
      gap: 0.25rem;
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-2);
      padding: 0.75rem 1.5rem 1rem;
    }
    .nav.is-open { display: flex; }
    .nav > a, .nav .nav-cart { padding-block: 0.5rem; }
    .nav .btn { width: fit-content; }
    .currency-switch { margin-block: 0.35rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  }
  @media (max-width: 30rem) {
    .footer-grid { grid-template-columns: 1fr; }
  }
}

/* ===========================================================================
   Storefront — home hero (image) and editorial bands.
   =========================================================================== */
@layer components {

  .hero--home {
    min-height: clamp(28rem, 76dvh, 44rem);
    background: var(--ink);
  }
  .hero-media { position: absolute; inset: 0; z-index: 0; }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
  .hero-scrim {
    position: absolute; inset: 0; z-index: 0;
    background:
      linear-gradient(90deg, rgba(20,32,43,0.82) 0%, rgba(20,32,43,0.55) 42%, rgba(20,32,43,0.12) 100%),
      linear-gradient(0deg, rgba(20,32,43,0.55), rgba(20,32,43,0.0) 45%);
  }
  .hero-content { position: relative; z-index: 1; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
  .hero--home h1 { color: var(--paper); font-size: var(--step-5); max-width: 16ch; }
  .hero-sub { color: var(--stone); font-size: var(--step-1); max-width: 42ch; margin-top: 0.5rem; }
  .hero--home .search { max-width: 38rem; }
  .hero--home .results:empty { margin: 0; }

  /* How it works — numbered sequence */
  .how-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
  }
  .how-grid li { display: grid; gap: 0.4rem; align-content: start; }
  .how-num {
    font-family: var(--font-mono); font-size: var(--step-2);
    color: var(--sage);
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 1px solid var(--border-dark);
    display: grid; place-content: center; margin-bottom: 0.5rem;
  }
  .how-grid h3 { color: var(--text-on-dark); margin: 0; font-size: var(--step-1); }
  .how-grid p { color: var(--muted-on-dark); margin: 0; max-width: 32ch; }

  /* Trust band */
  .trust-band { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: center; }
  .trust-band .trust-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .trust-band .trust-item { color: var(--text-on-dark); }
  .trust-band .trust-item .icon { color: var(--sage); }

  /* Closing CTA */
  .cta-band { display: grid; gap: 1rem; justify-items: center; }
  .cta-band .btn { margin-top: 0.5rem; }

  @media (max-width: 52rem) {
    .how-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .trust-band { grid-template-columns: 1fr; gap: 1.5rem; }
  }
}