/* 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; }
  .nav a { color: var(--text-muted); text-decoration: none; }
  .nav a: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); }

  /* ---- 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); }

  /* ---- 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-bottom {
    display: flex; justify-content: space-between; align-items: center;
    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; }
  }
}