/* ============================================================
   Maison Index — page-level layouts & screen-specific patterns.
   Augments tokens.css; do not replace it.
   ============================================================ */

/* Global reset on top of tokens.css body */
html, body { min-height: 100vh; }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }

/* ── TopBar / SubNav ──────────────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px 56px;
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
}
.topbar__left { display: flex; gap: 14px; align-items: center; }
.topbar__center {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.topbar__center .lockup {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
  margin-top: 4px;
}
.topbar__center .lockup .w-side { font-size: 18px; letter-spacing: 0.08em; }
.topbar__center .lockup .w-mid {
  font-size: 16px; font-style: italic; font-weight: 400;
  color: var(--ink-30); letter-spacing: 0.02em;
}
.topbar__right {
  display: flex; justify-content: flex-end; gap: 4px; align-items: center;
}
.topbar__right .divider {
  width: 1px; height: 18px; background: var(--md-outline-variant); margin: 0 8px;
}
.topbar__user {
  display: flex; align-items: center; gap: 10px;
}
.topbar__user .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--md-surface-container-high);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; font-style: italic;
  overflow: hidden;
}
.topbar__user .avatar img { width: 100%; height: 100%; object-fit: cover; }

.subnav {
  display: flex; justify-content: center;
  gap: 56px;
  padding: 18px 56px;
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
}
.subnav a {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  text-decoration: none;
}
.subnav a.is-active {
  color: var(--md-on-surface);
  border-bottom-color: var(--md-on-surface);
}

/* ── Page padding ─────────────────────────────────────────── */
.page { padding: 0; }
.page-section { padding: 0 56px; }

/* ── Editorial headings ───────────────────────────────────── */
.h-display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 0;
}
.h-display em { font-style: italic; font-weight: 300; }
.h-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.h-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
}

/* ── Stats band (Roman numeral fields) ────────────────────── */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--md-on-surface);
  border-bottom: 1px solid var(--md-on-surface);
  padding: 56px 0;
}
.stats-band > * { padding: 0 32px; border-left: 1px solid var(--md-outline-variant); }
.stats-band > :first-child { border-left: none; }
.stat__num { color: var(--md-on-surface-variant); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.stat__big {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 14px 0 8px;
}

/* ── House cards ──────────────────────────────────────────── */
.house-strip {
  display: grid;
  /* auto-fit so 6 ateliers lay across on wide screens but the cards
     don't crush down to unreadable widths on narrower viewports. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.house-card {
  padding: 24px;
  border-radius: var(--shape-md);
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none;
}
.house-card__head { display: flex; justify-content: space-between; }
.house-card__seal {
  aspect-ratio: 1 / 1;
  position: relative;
}
.house-card__seal::after {
  content: ''; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background-image: var(--house-hatch);
}
.house-card__seal-letter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 56px; letter-spacing: -0.02em;
}
.house-card__name { font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.house-card__host { font-family: var(--font-mono); font-size: 11px; margin-top: 6px; opacity: 0.7; }
.house-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px solid currentColor;
  opacity: 0.95;
}

/* ── Plate grid (catalogue / new arrivals / atelier) ──────── */
.plate-grid {
  display: grid;
  gap: 28px;
  row-gap: 56px;
}
/* minmax(0, 1fr) — NOT the default `1fr` (= minmax(auto, 1fr)). The `auto`
   floor won't let a track shrink below its content's min-content width, so
   wide cards push the 5-column row past the viewport and it scrolls
   sideways. minmax(0, …) lets every track shrink to an exact even split,
   so the grid always fits the container and all cards are equal width. */
.plate-grid--5col { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.plate-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plate-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* min-width: 0 so the card (and its text) can shrink inside the track
   rather than forcing the column wider than its 1fr share. */
.plate-card { display: flex; flex-direction: column; min-width: 0; position: relative; }

/* Wishlist heart — overlays the top-right of a card's art, and is reused
   inline on the product page. Sits outside the product <a> so a tap saves
   rather than navigates. */
.wish-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; cursor: pointer;
  background: var(--bone-99); border: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
  box-shadow: 0 1px 3px rgba(22, 21, 19, 0.12);
  transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.wish-btn:hover { transform: scale(1.08); }
.wish-btn:focus-visible { outline: 2px solid var(--md-outline); outline-offset: 2px; }
.wish-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.wish-btn.is-on { color: #8c2f2f; border-color: #8c2f2f; }
.wish-btn.is-on svg { fill: #8c2f2f; stroke: #8c2f2f; }
/* On the product page the heart is inline (not an overlay). */
.product-detail__save .wish-btn { position: static; box-shadow: none; }
.plate-card__art {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background: var(--md-surface-container-low);
}
.plate-card__art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.plate-card__art--tinted::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--house-hatch);
  pointer-events: none;
}
.plate-card__nlabel {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--house-ink, var(--md-on-surface-variant));
}
.plate-card__marked {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--house-fg, var(--ink-10));
  color: var(--house-bg, var(--bone-98));
  padding: 4px 8px;
}
.plate-card__house {
  position: absolute; bottom: 14px; left: 14px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--house-ink, var(--md-on-surface-variant));
}
.plate-card__house .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--house-fg, var(--ink-10));
}
.plate-card__caption {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--house-fg, var(--md-outline-variant));
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--md-on-surface-variant);
}
.plate-card__caption .house { color: var(--house-ink, inherit); }
.plate-card__name {
  margin-top: 10px;
  font-family: var(--font-display); font-size: 20px; line-height: 1.2;
  color: var(--md-on-surface);
  text-decoration: none;
  /* Break long unbreakable names (some data has slug-like titles) so they
     wrap inside the now-fixed-width track instead of spilling over. */
  overflow-wrap: anywhere;
}
.plate-card__price-row {
  margin-top: 8px;
  display: flex; gap: 10px; align-items: baseline;
}
.plate-card__price { font-family: var(--font-sans); font-size: 14px; }
.plate-card__mrp {
  font-size: 12px; color: var(--md-on-surface-variant);
  text-decoration: line-through;
}
.plate-card__pct { color: var(--house-fg, var(--md-on-surface-variant)); }
.plate-card__offers {
  font-family: var(--font-sans); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--house-fg, var(--md-on-surface-variant));
}

/* ── Product detail: cross-store price comparison ── */
.product-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; padding: 8px 56px 80px; align-items: start;
}
.product-detail__art {
  aspect-ratio: 4 / 5; position: relative; overflow: hidden;
  border-radius: var(--shape-md, 8px);
}
.product-detail__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer-list { display: flex; flex-direction: column; }
.offer-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--md-outline-variant);
}
.offer-row:last-child { border-bottom: 1px solid var(--md-outline-variant); }
.offer-row--best .offer-row__price { font-weight: 600; }
.offer-row__store { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.offer-row__store .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.offer-row__price { font-family: var(--font-sans); font-size: 16px; white-space: nowrap; }
.offer-row__mrp { font-size: 12px; color: var(--md-on-surface-variant); text-decoration: line-through; margin-left: 6px; }
.offer-row__cta { padding: 8px 18px; border-radius: var(--shape-full, 999px); white-space: nowrap; text-decoration: none; }
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; } }

/* ── Search row (catalogue) ───────────────────────────────── */
.search-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch; padding: 0 56px 24px; }
.search-input {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--md-on-surface);
  border-radius: var(--shape-full);
  background: transparent;
}
.search-input input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: var(--font-display); font-size: 22px; font-style: italic;
  color: var(--md-on-surface);
}

/* ── Filter chip rail ─────────────────────────────────────── */
.chip-rail {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 56px 28px;
}
.chip-rail__divider {
  width: 1px; height: 22px; background: var(--md-outline-variant); margin: 0 6px;
}
.chip-rail__spacer { flex: 1; }

/* m3-chip variations */
.m3-chip { white-space: nowrap; }
.m3-chip select {
  background: transparent; border: none; outline: none; font: inherit; color: inherit;
}

/* ── Pagination row ───────────────────────────────────────── */
.pagination-row {
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--md-outline-variant);
  display: flex; justify-content: space-between; align-items: center;
}
.pagination-row a, .pagination-row .disabled {
  font-family: var(--font-sans); font-weight: 500; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--md-on-surface);
  text-decoration: none; padding: 12px 16px;
}
.pagination-row .disabled { opacity: 0.3; }

/* Infinite-scroll sentinel: spans the full grid width as its own row so
   `revealed` fires only once the user has reached the end of the cards. */
.scroll-sentinel {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; padding: 32px 0;
  text-decoration: none; color: var(--md-on-surface-variant);
}

/* Relevance block boundary: a deliberate, visible "loading the next 400" gate
   with an indeterminate progress bar shown while the deeper query runs, so the
   long-running search reads as intentional rather than a frozen page. htmx adds
   .htmx-request to this element (hx-indicator="this") for the request's life. */
.block-gate { flex-direction: column; gap: 14px; min-height: 110px; }
.block-gate__bar {
  width: min(440px, 70vw); height: 4px; border-radius: 999px;
  background: var(--md-outline-variant); overflow: hidden; position: relative;
}
.block-gate__fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 38%;
  border-radius: 999px; background: var(--md-on-surface);
  transform: translateX(-110%);
}
.block-gate.htmx-request .block-gate__fill {
  animation: block-gate-slide 1.15s ease-in-out infinite;
}
@keyframes block-gate-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}
.block-gate__label { color: var(--md-on-surface-variant); text-align: center; max-width: 90%; }

/* Divider between scroll-loaded batches: a full-width rule with a centred
   label (the item range, e.g. "81–160") so it's clear where each newly
   loaded batch starts. Spans the whole grid row. */
.batch-divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 18px;
  color: var(--md-on-surface-variant);
}
.batch-divider::before,
.batch-divider::after {
  content: ''; flex: 1 1 auto;
  border-top: 1px solid var(--md-outline-variant);
}

/* ── New Arrivals editions ────────────────────────────────── */
.edition {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 56px;
  padding: 32px 0 0;
  border-top: 2px solid var(--house-fg, var(--md-on-surface));
}
.edition__panel {
  background: var(--house-bg, var(--md-surface-container-low));
  padding: 28px;
  margin-top: -2px;
  color: var(--house-ink, inherit);
  display: flex; flex-direction: column;
}
.edition__panel-head { display: flex; justify-content: space-between; align-items: center; }
.edition__panel-name {
  font-family: var(--font-display); font-size: 38px; line-height: 1.05; margin-top: 14px;
}
.edition__panel-host {
  font-family: var(--font-mono); font-size: 11px;
  margin-top: 10px; opacity: 0.7;
}
.edition__panel-rule {
  border: none; height: 1px; background: var(--house-fg, currentColor);
  opacity: 0.4; margin: 24px 0;
}
.edition__count {
  font-family: var(--font-display); font-weight: 400;
  font-size: 56px; line-height: 1.05;
  margin: 8px 0 0; color: var(--house-fg, currentColor);
}

/* ── Atelier dossier ──────────────────────────────────────── */
.dossier {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--md-outline);
}
.dossier > * {
  padding: 28px;
  border-left: 1px solid var(--md-outline);
  display: flex; flex-direction: column; gap: 10px;
}
.dossier > :first-child { border-left: none; }
.dossier__name { font-family: var(--font-display); font-size: 30px; line-height: 1.1; }

/* ── Ateliers ledger ──────────────────────────────────────── */
.ledger { border-top: 1px solid var(--md-on-surface); }
.ledger__head, .ledger__row {
  display: grid;
  grid-template-columns: 40px 1.6fr 1.4fr 1fr 1.4fr 2fr 1fr;
  gap: 16px;
}
.ledger__head { padding: 14px 0; border-bottom: 1px solid var(--md-outline-variant); }
.ledger__row {
  padding: 24px 0;
  border-bottom: 1px solid var(--md-outline-variant);
  align-items: center;
}
.ledger__num { display: flex; align-items: center; gap: 10px; }
.ledger__num .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--house-fg, var(--ink-50));
}
.ledger__name {
  font-family: var(--font-display); font-size: 22px; line-height: 1.1;
  color: var(--house-ink, var(--md-on-surface));
  text-decoration: none;
}
.ledger__progress { margin-top: 10px; max-width: 280px; }
.ledger__progress-track { height: 2px; background: var(--md-outline-variant); position: relative; }
.ledger__progress-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  background: var(--house-fg, var(--md-primary));
}
.ledger__actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── Form fields & registration block ─────────────────────── */
.register-card {
  background: var(--md-surface-container-low);
  padding: 36px;
  border-radius: var(--shape-md);
}
.register-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr auto;
  gap: 12px; align-items: stretch;
}
.m3-field input, .m3-field select {
  background: transparent; border: none; outline: none;
  font-family: var(--font-sans); font-size: 14px;
  color: var(--md-on-surface);
  padding: 0;
}
.m3-field input::placeholder { color: var(--md-on-surface-variant); font-style: italic; }
.m3-field label { display: block; }

/* ── Mark eyebrow link ────────────────────────────────────── */
.eyebrow-link {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--md-on-surface-variant); text-decoration: none;
}
.eyebrow-link:hover { color: var(--md-on-surface); }

/* ── Threshold (login) page ───────────────────────────────── */
.threshold {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 32px 56px;
  background: var(--md-surface);
  overflow: hidden;
}
.threshold__frame {
  position: absolute; inset: 24px;
  border: 1px solid var(--ink-10);
  pointer-events: none;
  opacity: 0.08;
}
.threshold__crown {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.threshold__crown .lt, .threshold__crown .rt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em;
  color: var(--ink-50); text-transform: uppercase;
}
.threshold__crown .lt::before {
  content: ''; display: inline-block; width: 22px; height: 1px;
  background: var(--ink-50); vertical-align: middle; margin-right: 14px;
}
.threshold__crown .rt::after {
  content: ''; display: inline-block; width: 22px; height: 1px;
  background: var(--ink-50); vertical-align: middle; margin-left: 14px;
}
.threshold__stage {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 36px; text-align: center;
  animation: rise 1.4s var(--motion-emphasized) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.threshold__medallion { width: 220px; height: 220px; position: relative; }
.threshold__medallion::before {
  content: ''; position: absolute; inset: -40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(22,21,19,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.threshold__wordmark {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 500;
  color: var(--ink-10); margin: 0; line-height: 0.9;
}
.threshold__wordmark .w-top, .threshold__wordmark .w-bot {
  font-size: 96px; letter-spacing: 0.04em;
}
.threshold__wordmark .w-mid {
  font-style: italic; font-weight: 400;
  font-size: 68px; letter-spacing: 0.02em;
  color: var(--ink-30);
}
.threshold__eyebrow-row {
  display: flex; align-items: center; gap: 22px; color: var(--ink-50);
}
.threshold__eyebrow-row .rule {
  width: 80px; height: 1px; background: var(--ink-50); opacity: 0.5;
}
.threshold__eyebrow-row .eb {
  font-family: var(--font-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.5em; text-transform: uppercase;
}
.threshold__epigraph {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 30px; color: var(--ink-30); letter-spacing: 0.01em;
  max-width: 700px; margin: 8px 0 0; line-height: 1.3;
}
.threshold__epigraph::before, .threshold__epigraph::after {
  content: '·'; display: inline-block; margin: 0 16px;
  color: var(--ink-50); font-style: normal; transform: translateY(-4px);
}
.threshold__enter {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 22px;
  padding: 22px 56px;
  background: var(--ink-10); color: var(--md-surface);
  border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  text-decoration: none;
  transition: background 320ms var(--motion-emphasized),
              letter-spacing 320ms var(--motion-emphasized),
              padding 320ms var(--motion-emphasized);
}
.threshold__enter:hover {
  background: var(--oxblood-40);
  letter-spacing: 0.5em; padding: 22px 64px;
}
.threshold__enter .g {
  display: inline-flex; align-items: center; gap: 10px;
  padding-left: 22px;
  border-left: 1px solid rgba(251,248,244,0.3);
  font-size: 10px; letter-spacing: 0.32em; opacity: 0.75;
}
.threshold__enter .g svg { width: 14px; height: 14px; }
.threshold__caption {
  margin-top: 18px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
  color: var(--ink-50); text-transform: uppercase;
}
.threshold__floor {
  display: flex; justify-content: space-between; align-items: flex-end;
  color: var(--ink-50);
}
.threshold__floor .item {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase;
}
.threshold__floor .center {
  font-family: var(--font-display); font-style: italic; font-size: 13px;
  color: var(--ink-50);
}
.threshold__ornament {
  display: flex; align-items: center; gap: 16px;
  color: var(--ink-50);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em;
  text-transform: uppercase;
}
.threshold__ornament .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.threshold__ornament .ln  { width: 32px; height: 1px; background: currentColor; opacity: 0.6; }

/* ── Reset, danger ───────────────────────────────────────── */
.danger { color: var(--rust); }
.danger .m3-btn-text { color: var(--rust); }

/* ── Status pill content shifts ─────────────────────────── */
.status-pill__caption {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--md-on-surface-variant);
  text-transform: none; letter-spacing: 0.02em;
}

/* ── Empty + meta strings ────────────────────────────────── */
.empty {
  font-family: var(--font-display); font-style: italic;
  font-size: 24px; color: var(--md-on-surface-variant);
  text-align: center; padding: 80px 0;
}
.results-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--md-on-surface-variant); letter-spacing: 0.04em;
  margin-bottom: 24px;
}

/* ── Buttons in row ───────────────────────────────────────── */
.btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ── Inline forms (legacy hooks for HTMX targets) ────────── */
.inline-form { display: inline-block; margin: 0; }