/* ==========================================================================
   Display Minis Hub — Component Styles
   Page-specific and feature-specific compositions built from design tokens.
   Tokens (CSS vars, primitives) live in design_tokens.css — this file only
   composes them into larger UI patterns.
   ========================================================================== */

/* --- Miniature detail page (kit.css portal patterns) ---------------------- */
.dmh-suggest-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--accent-bronze);
  background: var(--accent-bronze-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.dmh-suggest-btn:hover { background: var(--accent-bronze-soft-hover); }

.dmh-detail__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}
.dmh-detail__byline { font-size: var(--fs-md); color: var(--fg-muted); margin: 0 0 var(--sp-5); }
.dmh-detail__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
  letter-spacing: var(--ls-tight);
}
.dmh-detail__section-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-3);
}

.dmh-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border-warm);
  background: var(--bg-warm);
  color: var(--fg-2);
}

.dmh-variant {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.dmh-variant__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0 0 var(--sp-2); }
.dmh-variant__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--fg-muted); }

.dmh-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px dashed var(--border-soft);
}
.dmh-offer:first-child { border-top: none; }
.dmh-offer__price {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
}
.dmh-offer__marketplace { font-size: var(--fs-xs); color: var(--fg-muted); }
.dmh-offer__soldout { font-size: var(--fs-xs); color: var(--danger); }
.dmh-offer__cta { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent-bronze); }
.dmh-offer__cta:hover { color: var(--accent-bronze-hover); }

.dmh-detail__meta-key { color: var(--fg-muted); margin-right: 4px; }

/* --- App shell: nav + footer (kit.css portal patterns) --------------------- */
/* Push scroll-into-view targets below the 60px sticky nav so clicks aren't
   intercepted by .dmh-nav__avatar-btn when Selenium / anchor links bring an
   element to the top of the viewport. */
html { scroll-padding-top: 72px; }

.dmh-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.dmh-nav__inner {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dmh-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--fg-1);
  text-decoration: none;
  margin-right: var(--sp-9);
  letter-spacing: var(--ls-tight);
}
.dmh-nav__brand img { display: block; height: 52px; width: auto; }
.dmh-nav__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.dmh-nav__link:hover { color: var(--fg-1); }
.dmh-nav__link.is-active { color: var(--fg-1); border-bottom-color: var(--accent-bronze); }

/* --- Top nav: primary menubar + dropdown triggers (PR-4) ----------------- */
/* Mobile / small-tablet defaults: primary nav + avatar pill are hidden;
   the drawer (opened by the hamburger) carries the IA. Desktop overrides
   come in the @media block at the bottom of this section. */
.dmh-nav__primary {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  gap: var(--sp-8);
}
.dmh-nav__avatar { display: none; }
.dmh-nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* Logged-out sign-in / register cluster. Hidden on mobile (the guest drawer
   carries it); revealed on desktop by the @media block below, matching how the
   avatar pill / bookmark shortcut switch over. */
.dmh-nav__auth {
  display: none;
  align-items: center;
  gap: var(--sp-3);
}
.dmh-nav__link--has-caret {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.dmh-nav__caret {
  width: 10px;
  height: 10px;
  opacity: 0.7;
  transition: transform var(--dur) var(--ease-out);
}
.dmh-nav__more[open] .dmh-nav__caret,
.dmh-nav__facets[open] .dmh-nav__caret,
.dmh-nav__avatar[open] .dmh-nav__caret { transform: rotate(180deg); }

/* Miniatures keeps one slot in the menubar; the eight facets hang off a caret
   beside it rather than becoming eight top-level items. The item is the
   positioning context, not the caret — the panel belongs under the word
   "Miniatures", which is what the visitor is pointing at. */
.dmh-nav__item-with-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.dmh-nav__item-with-menu .dmh-nav__link--has-caret { padding-inline: var(--sp-1); }

.dmh-nav__more,
.dmh-nav__avatar { position: relative; }
.dmh-nav__more summary,
.dmh-nav__facets summary,
.dmh-nav__avatar summary { list-style: none; }
.dmh-nav__more summary::-webkit-details-marker,
.dmh-nav__facets summary::-webkit-details-marker,
.dmh-nav__avatar summary::-webkit-details-marker { display: none; }

.dmh-nav__avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  cursor: pointer;
}
.dmh-nav__avatar-btn:hover,
.dmh-nav__avatar[open] .dmh-nav__avatar-btn {
  border-color: var(--accent-bronze);
  background: var(--paper);
}
.dmh-nav__avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-bronze);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 13px;
}
.dmh-nav__avatar-name {
  font-size: var(--fs-xs);
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}
.dmh-nav__avatar-circle--lg { width: 40px; height: 40px; font-size: 17px; }

/* --- Top nav: hamburger (PR-5) ----------------------------------------- */
/* Visible on mobile only; hidden on desktop via the @media block at the
   bottom of this section. */
.dmh-nav__hamburger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.dmh-nav__hamburger:hover {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
}
.dmh-nav__hamburger-icon { width: 22px; height: 22px; }

/* --- Bookmarks shortcut in the top nav (desktop only) ------------------- */
.dmh-nav__bm-link {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dmh-nav__bm-link:hover,
.dmh-nav__bm-link.is-active {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
}
.dmh-nav__bm-icon { width: 20px; height: 20px; }
.dmh-nav__bm-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bronze);
  color: var(--surface);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  line-height: 1;
}

/* --- Top nav: responsive switchover at the canonical breakpoint --------- */
@media (min-width: 840px) /* mobile breakpoint */ {
  .dmh-nav__primary  { display: flex; }
  .dmh-nav__avatar   { display: block; }
  .dmh-nav__auth     { display: flex; }
  .dmh-nav__bm-link  { display: inline-flex; }
  .dmh-nav__hamburger { display: none; }
}

/* --- Mobile drawer (PR-5) ---------------------------------------------- */
.dmh-drawer { position: fixed; inset: 0; z-index: 70; }
.dmh-drawer[hidden] { display: none; }
.dmh-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 7, 0.45);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.dmh-drawer.is-open .dmh-drawer__scrim { opacity: 1; }

.dmh-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--paper);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 200ms var(--ease-out);
}
.dmh-drawer.is-open .dmh-drawer__panel { transform: translateX(0); }

.dmh-drawer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  padding-top: max(16px, env(safe-area-inset-top));
}
.dmh-drawer__identity { flex: 1; min-width: 0; }
.dmh-drawer__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}
.dmh-drawer__close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  border-radius: var(--radius-btn);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dmh-drawer__close:hover {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
}
.dmh-drawer__close-icon { width: 22px; height: 22px; }

.dmh-drawer__body {
  flex: 1;
  overflow-y: auto;
  /* Top padding matches the bottom: the first child is now a row, not a group
     label, and a label carries its own 20px above. */
  padding: var(--sp-5) 0;
}
.dmh-drawer__group-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 20px 20px 8px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: 0;
}
/* Facet rows in the drawer: indented under their group label, lighter than the
   icon-bearing section rows above them. */
.dmh-drawer__facet-link {
  display: block;
  padding: 8px 20px 8px 32px;
  color: var(--fg-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.dmh-drawer__facet-link:hover { background: var(--surface-2); color: var(--fg-1); }

.dmh-drawer__group-hint {
  font-size: 11px;
  color: var(--fg-subtle);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
}

.dmh-drawer__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  min-height: 48px;
  text-decoration: none;
  color: var(--fg-1);
  border-left: 3px solid transparent;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.dmh-drawer__row.is-active {
  background: var(--accent-bronze-soft);
  border-left-color: var(--accent-bronze);
  color: var(--accent-bronze);
}
.dmh-drawer__row.is-active .dmh-drawer__row-label { font-weight: var(--fw-semibold); }
.dmh-drawer__row.is-disabled { color: var(--fg-subtle); }
.dmh-drawer__row-icon { width: 22px; height: 22px; color: var(--fg-muted); flex-shrink: 0; }
.dmh-drawer__row.is-active .dmh-drawer__row-icon { color: var(--accent-bronze); }
.dmh-drawer__row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dmh-drawer__row-label {
  font-size: 16px;
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dmh-drawer__row-sub { font-size: 12px; color: var(--fg-muted); }
.dmh-drawer__row-badge {
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
  color: var(--surface);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dmh-drawer__footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Guest drawer: stacked Log in / Create account buttons instead of the
   signed-in single sign-out row. */
.dmh-drawer__footer--guest {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
}

/* Body scroll lock applied by mobile_nav_controller or filter_modal_controller while open. */
.dmh-body--locked { overflow: hidden; }

/* --- Mobile filter modal — drill-down sheet stack ---------------------- */
.dmh-filter-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--paper);
  overflow: hidden;
}
.dmh-filter-modal[hidden] { display: none; }
.dmh-filter-modal__form { display: contents; }

.dmh-sheet {
  position: absolute;
  inset: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms var(--ease-out);
  will-change: transform;
}
.dmh-sheet--main {
  background: var(--bg-cream);
  transform: translateX(0);
}
.dmh-sheet--sub.is-active { transform: translateX(0); }
.dmh-sheet[hidden] { display: none; }

.dmh-sheet__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  padding-top: max(var(--sp-2), env(safe-area-inset-top));
  border-bottom: 1px solid var(--border-soft);
  background: var(--paper);
}
.dmh-sheet__btn-icon {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dmh-sheet__btn-icon:hover { background: var(--accent-bronze-soft); color: var(--accent-bronze); }
.dmh-sheet__icon { width: 20px; height: 20px; }
.dmh-sheet__title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.dmh-sheet__btn-text {
  background: transparent;
  border: 0;
  color: var(--accent-bronze);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.dmh-sheet__btn-text.is-disabled { color: var(--fg-disabled); pointer-events: none; }

.dmh-sheet__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dmh-sheet__body--main {
  padding-top: var(--sp-3);
  background: var(--bg-cream);
}

.dmh-sheet__inline-search {
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  background: var(--bg-cream);
}

.dmh-sheet__search {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  border-bottom: 1px solid var(--border-soft);
  padding: 10px var(--sp-4);
}
.dmh-sheet__search-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--bg-cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-family: inherit;
  color: var(--fg-1);
}
.dmh-sheet__search-input:focus {
  outline: none;
  border-color: var(--accent-bronze);
  box-shadow: 0 0 0 3px var(--accent-bronze-ring);
}
.dmh-sheet__section-label {
  padding: var(--sp-5) var(--sp-5) 6px;
  margin: 0;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* Grouped tag sub-sheet: pinned sections plus collapsible (<details>) sections,
   the mobile counterpart of the desktop grouped filter blocks. */
.dmh-tag-group__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dmh-tag-group__toggle::-webkit-details-marker { display: none; }
.dmh-tag-group__label { display: inline-flex; align-items: center; gap: var(--sp-2); }
.dmh-tag-group__chev {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: var(--sp-5);
  color: var(--fg-subtle);
  transition: transform var(--dur) var(--ease-out);
}
.dmh-tag-group--collapsible[open] .dmh-tag-group__chev { transform: rotate(180deg); }
.dmh-sheet__footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
}
.dmh-btn--block {
  display: flex;
  width: 100%;
}

/* --- Drill-down rows (main sheet) -------------------------------------- */
.dmh-drill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--paper);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.dmh-drill-list__item { margin: 0; padding: 0; }
.dmh-drill-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 64px;
  padding: 14px var(--sp-5);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--fg-1);
}
.dmh-drill-list__item:last-child .dmh-drill-row { border-bottom: 0; }
.dmh-drill-row:active { background: var(--accent-bronze-soft); }
.dmh-drill-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dmh-drill-row__label {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.dmh-drill-row__value {
  font-size: 13px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dmh-drill-row.is-active .dmh-drill-row__value {
  color: var(--accent-bronze);
  font-weight: var(--fw-medium);
}
.dmh-drill-row__clear {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-bronze-soft-hover);
  color: var(--accent-bronze);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.dmh-drill-row__clear:hover,
.dmh-drill-row__clear:active { background: var(--accent-bronze); color: var(--surface); }
.dmh-drill-row__clear[hidden] { display: none; }
.dmh-drill-row__clear-icon { width: 16px; height: 16px; }
.dmh-drill-row__chevron {
  color: var(--fg-subtle);
  flex-shrink: 0;
  display: inline-flex;
}
.dmh-drill-row__chevron-icon { width: 18px; height: 18px; }

/* --- Sub-sheet radio rows --------------------------------------------- */
.dmh-radio-list,
.dmh-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dmh-radio-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--sp-5);
  min-height: 56px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.dmh-radio-row.is-checked { background: var(--accent-bronze-soft); }
.dmh-radio-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-soft);
  background: transparent;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 120ms var(--ease-out);
  cursor: pointer;
}
.dmh-radio-row input:checked {
  border: 7px solid var(--accent-bronze);
  background: var(--surface);
}
.dmh-radio-row__label {
  flex: 1;
  font-size: 15px;
  color: var(--fg-1);
}
.dmh-radio-row.is-checked .dmh-radio-row__label {
  color: var(--accent-bronze);
  font-weight: var(--fw-semibold);
}
.dmh-radio-row--any .dmh-radio-row__label {
  color: var(--fg-muted);
  font-style: italic;
}
/* Secondary hint under an option name in the mobile radio sub-sheet. */
.dmh-radio-row__note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  font-style: italic;
}
/* Group subheading inside the mobile radio sub-sheet (e.g. "Popular scales"). */
.dmh-radio-list__subheading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  background: var(--bg-muted);
}

/* --- Sub-sheet checkbox rows ----------------------------------------- */
.dmh-check-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--sp-5);
  min-height: 52px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  position: relative;
}
.dmh-check-row.is-checked { background: var(--accent-bronze-soft); }
.dmh-check-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dmh-check-row__box {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-soft);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface);
  transition: all 120ms var(--ease-out);
}
.dmh-check-row__box::after {
  content: "";
  display: block;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
}
.dmh-check-row.is-checked .dmh-check-row__box {
  background: var(--accent-bronze);
  border-color: var(--accent-bronze);
}
.dmh-check-row.is-checked .dmh-check-row__box::after { opacity: 1; }
.dmh-check-row__label {
  flex: 1;
  font-size: 15px;
  color: var(--fg-1);
}
.dmh-check-row.is-checked .dmh-check-row__label {
  color: var(--accent-bronze);
  font-weight: var(--fw-semibold);
}

/* --- Selected band (tags sub-sheet) ---------------------------------- */
.dmh-selected-band {
  padding: 12px var(--sp-4);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-soft);
}
.dmh-selected-band[hidden] { display: none; }
.dmh-selected-band__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--accent-bronze);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.dmh-selected-band__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dmh-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  background: var(--accent-bronze);
  color: var(--surface);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  min-height: 32px;
}
.dmh-selected-chip button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.25);
  color: var(--surface);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.dmh-list-empty {
  padding: 32px var(--sp-5);
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
  list-style: none;
}

.dmh-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: var(--sp-9) var(--gutter) var(--sp-11);
}
.dmh-flash-wrap {
  width: 100%;
  max-width: var(--max-w-content);
  margin: var(--sp-4) auto 0;
  padding: 0 var(--gutter);
}

/* Site footer — editorial warm endcap (design_handoff_footer / Option C).
   The warm background reads as a designed endcap: a brand zone + two labelled
   nav columns on top, then a thin bar carrying the disclaimer, copyright, and a
   "Report an issue" pill. The 720px/460px breakpoints are footer-internal (brand
   spans full width, then columns stack) and independent of the app's mobile
   filter threshold, so they are deliberately not tagged as the mobile-breakpoint
   token. */
.dmh-footer {
  background: var(--bg-warm);
  color: var(--fg-2);
  font-size: 14px;
}

.dmh-footer__top {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 38px 40px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  align-items: start;
}

.dmh-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 34ch;
}
.dmh-footer__wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-vars);
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.2px;
  text-decoration: none;
}
.dmh-footer__wordmark:hover { color: var(--fg-1); }
.dmh-footer__wordmark img { height: 44px; width: auto; display: block; }
.dmh-footer__tagline {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-vars);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--fg-2);
  margin: 0;
}

.dmh-footer__eyebrow {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-subtle);
  margin: 0 0 14px;
}
.dmh-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dmh-footer__col--facets { margin-bottom: var(--sp-5); }
.dmh-footer__col--facets:last-child { margin-bottom: 0; }
.dmh-footer__link {
  color: var(--fg-2);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.dmh-footer__link:hover {
  color: var(--accent-bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.dmh-footer__bar { border-top: 1px solid var(--border-warm); }
.dmh-footer__bar-inner {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.dmh-footer__note {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 58ch;
  margin: 0;
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.55;
}
.dmh-footer__note svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--warning);
}
.dmh-footer__bar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.dmh-footer__copy {
  font-size: 12.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.dmh-footer__report {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-warm);
  background: rgba(255, 255, 255, 0.7);
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.dmh-footer__report:hover {
  border-color: var(--accent-bronze);
  color: var(--accent-bronze);
  text-decoration: none;
}
.dmh-footer__report svg {
  width: 13px;
  height: 13px;
  color: var(--accent-bronze);
}

@media (max-width: 720px) {
  .dmh-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    padding: 32px 24px 26px;
  }
  .dmh-footer__brand { grid-column: 1 / -1; }
  .dmh-footer__bar-inner { padding: 14px 24px; }
}
@media (max-width: 460px) {
  .dmh-footer__top { grid-template-columns: 1fr; }
  .dmh-footer__bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* --- Browse top bar + filter sidebar (kit.css portal patterns) ------------ */
.dmh-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
@media (max-width: 839.98px) /* mobile breakpoint */ {
  .dmh-topbar .dmh-input-wrap { flex-basis: 100%; }
  .dmh-topbar__filters-mobile { flex: 1; }
}
/* Hide the mobile-only top-bar controls at md and up — these duplicate
   the desktop trigger + Clear-all. Lives unlayered so it beats
   `dmh-btn { display: inline-flex }` (Tailwind utilities ship in
   @layer utilities, which loses to unlayered rules). */
@media (min-width: 840px) /* mobile breakpoint */ {
  .dmh-topbar__filters-mobile,
  .dmh-topbar__clear--mobile { display: none; }
}
.dmh-topbar__clear--mobile.dmh-topbar__clear--inactive {
  color: var(--fg-disabled);
  pointer-events: none;
}
.dmh-topbar__clear {
  font-size: var(--fs-sm);
  color: var(--accent-bronze);
  font-weight: var(--fw-medium);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.dmh-topbar__clear:hover { color: var(--accent-bronze-hover); }
.dmh-topbar__clear:disabled,
.dmh-topbar__clear--inactive {
  color: var(--fg-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.dmh-input-wrap { position: relative; display: flex; flex: 1; min-width: 240px; }
.dmh-input-wrap__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--fg-subtle);
  pointer-events: none;
}
.dmh-input-wrap__icon svg { width: 100%; height: 100%; display: block; }
.dmh-input-wrap .dmh-input { padding-left: 36px; }

.dmh-btn__icon { width: 16px; height: 16px; display: inline-flex; align-items: center; }
.dmh-btn__icon svg { width: 100%; height: 100%; }
.dmh-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--accent-bronze);
  border-radius: var(--radius-pill);
}

/* --- Filter sidebar (kit.css portal patterns) ----------------------------- */
.dmh-filter-sidebar {
  width: 256px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  box-shadow: var(--shadow-1);
}
.dmh-filter-sidebar__group { display: flex; flex-direction: column; }
/* Divider between top-level filter sections. Drawn as a full-width line above the
   section label — put on the <legend> itself (not the <fieldset>, whose top border
   would be notched by the legend and render as a stub beside the text). A
   --continued pinned block (Sub-Setting under Primary Setting) is part of the same
   section, so it is excluded — no divider between the two non-foldable blocks. */
.dmh-filter-sidebar__group:not(:first-child):not(.dmh-filter-sidebar__group--continued) > .dmh-filter-sidebar__label {
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-4);
}
.dmh-filter-sidebar__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dmh-filter-sidebar__clear {
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--fg-subtle);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
}
.dmh-filter-sidebar__clear:hover { color: var(--danger); }
.dmh-filter-sidebar__radio-group { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 320px; overflow-y: auto; padding-right: 2px; }
/* Group subheading inside a radio group (e.g. "Popular scales" separating the
   scale tiers from the exact-match shortcuts). A plain label — no divider line,
   the uppercase heading alone marks the break. */
.dmh-filter-sidebar__subheading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: var(--sp-2) 0 0;
}
.dmh-filter-sidebar__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dmh-filter-sidebar__actions { display: flex; gap: var(--sp-3); padding-top: var(--sp-3); }
.dmh-filter-sidebar__actions .dmh-btn { flex: 1; }

/* Collapsible refinement blocks (one per Setting child category), stacked under
   the always-visible pinned block. Native <details>; chevron rotates via [open]. */
/* Every foldable block (Setting sub-categories, Species, Style) gets a divider
   above it — collapsed rows look uniform and need the line to read as separate. */
.dmh-filter-sidebar__collapse { border-top: 1px solid var(--border-soft); padding-top: var(--sp-4); }
.dmh-filter-sidebar__collapse-toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.dmh-filter-sidebar__collapse-toggle::-webkit-details-marker { display: none; }
.dmh-filter-sidebar__collapse-label { margin: 0; justify-content: flex-start; gap: var(--sp-2); }
.dmh-filter-sidebar__collapse-actions { display: inline-flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.dmh-filter-sidebar__collapse-chev {
  width: 14px;
  height: 14px;
  color: var(--fg-muted);
  transition: transform var(--dur) var(--ease-out);
}
.dmh-filter-sidebar__collapse[open] .dmh-filter-sidebar__collapse-chev { transform: rotate(180deg); }
.dmh-filter-sidebar__collapse-body { margin-top: var(--sp-3); }

/* --- Creator picker (desktop Creator filter section) ---------------------- */
/* Deliberately does NOT use .dmh-filter-sidebar__radio-group: that class caps
   the list at 320px and scrolls it, which is exactly what this replaces. The
   section is a fixed height however many creators exist — rows only appear
   while a query is typed. */
.dmh-creatorpick__search { position: relative; display: flex; }
.dmh-creatorpick__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--fg-subtle);
  pointer-events: none;
}
.dmh-creatorpick__search-icon svg { width: 100%; height: 100%; display: block; }
.dmh-creatorpick__input {
  width: 100%;
  padding: 8px 12px 8px 30px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.dmh-creatorpick__input::placeholder { color: var(--fg-subtle); }
.dmh-creatorpick__input:focus {
  outline: none;
  border-color: var(--accent-bronze);
  box-shadow: 0 0 0 3px var(--accent-bronze-ring);
}
.dmh-creatorpick__chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  max-width: 100%;
  margin: var(--sp-3) 0 0;
  padding: 6px 8px 6px 11px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--accent-bronze-on-soft);
  background: var(--accent-bronze-soft);
  border: 1px solid var(--accent-bronze-soft-border);
  border-radius: var(--radius-pill);
}
.dmh-creatorpick__chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmh-creatorpick__chip-clear {
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  line-height: 1;
  cursor: pointer;
}
.dmh-creatorpick__matches {
  margin: var(--sp-3) 0 0;
  font-size: 11px;
  color: var(--fg-subtle);
}
.dmh-creatorpick__results { display: flex; flex-direction: column; margin-top: var(--sp-2); }
.dmh-creatorpick__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 7px 8px;
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.dmh-creatorpick__row:hover,
.dmh-creatorpick__row.is-active { background: var(--bg-cream); }
.dmh-creatorpick__row.is-selected { background: var(--accent-bronze-soft); }
.dmh-creatorpick__row:has(input:focus-visible) {
  outline: 2px solid var(--accent-bronze);
  outline-offset: 1px;
}
.dmh-creatorpick__name {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dmh-creatorpick__row.is-selected .dmh-creatorpick__name {
  color: var(--accent-bronze-on-soft);
  font-weight: var(--fw-semibold);
}
.dmh-creatorpick__count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-subtle);
}
.dmh-creatorpick__browse {
  align-self: flex-start;
  margin-top: var(--sp-3);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--accent-ink);
  cursor: pointer;
}
.dmh-creatorpick__browse:hover { color: var(--accent-ink-hover); }

/* The full A–Z list, opened from the browse link. A native <dialog> so it sits
   in the top layer and Escape closes it without any JS of ours. */
.dmh-creatordialog {
  /* Tailwind's preflight zeroes margins, which pins a modal dialog to the
     top-left instead of centring it — same fix as .dmh-confirm. */
  margin: auto;
  width: min(760px, 100% - 80px);
  max-height: 78vh;
  padding: 0;
  display: none;
  flex-direction: column;
  background: var(--paper);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.dmh-creatordialog[open] { display: flex; }
.dmh-creatordialog::backdrop { background: rgba(10, 9, 7, 0.6); }
.dmh-creatordialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
}
.dmh-creatordialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}
.dmh-creatordialog__close {
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
}
.dmh-creatordialog__close:hover { color: var(--fg-1); }
.dmh-creatordialog__search { padding: var(--sp-5) var(--sp-6) 0; }
.dmh-creatordialog__search .dmh-creatorpick__input { padding-left: 12px; background: var(--bg-cream); }
.dmh-creatordialog__body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.dmh-creatordialog__group + .dmh-creatordialog__group { margin-top: var(--sp-5); }
.dmh-creatordialog__letter {
  margin: 0 0 6px;
  padding-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--accent-bronze);
  border-bottom: 1px solid var(--border-soft);
}
.dmh-creatordialog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dmh-creatordialog__row {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
}

.dmh-radio {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  cursor: pointer;
}
.dmh-radio input { accent-color: var(--accent-bronze); cursor: pointer; }
.dmh-radio:hover { color: var(--accent-bronze); }
/* Secondary hint after an option name (e.g. a tier's mm/ratio range). Smaller,
   greyer and italic so it reads as a caption, not part of the option label. */
.dmh-radio__note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  font-style: italic;
}

/* --- Active filter chips ------------------------------------------------- */
.dmh-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}
.dmh-active-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 8px 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out);
}
.dmh-active-chip:hover { border-color: var(--accent-bronze); }
.dmh-active-chip__key   { color: var(--fg-muted); }
.dmh-active-chip__value { font-weight: var(--fw-semibold); color: var(--fg-1); }
.dmh-active-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  font-size: var(--fs-base);
  line-height: 1;
}

/* --- Browse layout + mini card grid -------------------------------------- */
.dmh-browse-layout { display: flex; gap: var(--sp-7); align-items: flex-start; }
.dmh-browse-layout__results { flex: 1; min-width: 0; }
.dmh-browse-layout__count { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0 0 var(--sp-5); }

.dmh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
@media (min-width: 840px) /* mobile breakpoint */ {
  .dmh-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* The catalog browse page shares ONE column grid between the filter panel and the
   cards: the panel owns track 1, the results span the rest, and .dmh-grid re-uses
   the same tracks via subgrid. That is what keeps a card the same width whether
   the panel is open or shut. The track definition below must stay identical to
   .dmh-grid's above, or the panel stops lining up with a card column. */
.dmh-browse-layout--tracks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.dmh-browse-layout--tracks > * { min-width: 0; }
.dmh-browse-layout--tracks > .dmh-browse-layout__results {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 0;
}
.dmh-browse-layout--tracks > .dmh-browse-layout__results > * { grid-column: 1 / -1; }
.dmh-browse-layout--tracks .dmh-grid { grid-template-columns: subgrid; }
.dmh-browse-layout--tracks .dmh-filter-sidebar { width: auto; }
@media (min-width: 840px) /* mobile breakpoint */ {
  .dmh-browse-layout--tracks { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  /* filter_sidebar_controller toggles Tailwind's `hidden` on the panel wrapper; while
     the panel is in flow it owns track 1 and the results start one track later. Only
     inside this query — below it the panel is display:none but still without `hidden`,
     and the offset would leave an empty first column. */
  .dmh-browse-layout--tracks:has(> [data-filter-sidebar-target="sidebar"]:not(.hidden))
    > .dmh-browse-layout__results { grid-column: 2 / -1; }
}
/* Opened on desktop, then narrowed to phone width: hide rather than eat a card column. */
@media (max-width: 839.98px) /* mobile breakpoint */ {
  .dmh-browse-layout--tracks > [data-filter-sidebar-target="sidebar"] { display: none; }
}

.dmh-minicard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.dmh-minicard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* Stretched link: invisible full-card hit-target so the card stays clickable
   even after we add real <button> overlays (which can't legally nest inside <a>). */
.dmh-minicard__stretched {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
  color: transparent;
}
.dmh-minicard__stretched:focus-visible {
  outline: 2px solid var(--accent-bronze);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.dmh-minicard__image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-warm); }
.dmh-minicard__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
.dmh-minicard:hover .dmh-minicard__image img { transform: scale(1.04); }
.dmh-minicard__image-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-disabled);
}

/* Age-restriction overlay — centered badge over the blurred image of a
   miniature the viewer may not see. Host containers (.dmh-minicard__image,
   .smp-gallery__main) are position:relative; overflow:hidden, so it clips to
   the image. The badge carries its own solid background for contrast over any
   blurred image. */
.dmh-age-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.dmh-age-overlay__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-bronze);
  color: var(--fg-on-accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
}
.dmh-age-overlay__lock { width: 1.1em; height: 1.1em; }
.dmh-age-overlay__age { line-height: 1; }
.dmh-minicard__body { padding: var(--sp-4); }
.dmh-minicard__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dmh-minicard__creator { font-size: var(--fs-xs); color: var(--fg-muted); margin: 4px 0 0; }
.dmh-minicard__price {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 8px 0 0;
}

/* --- Bookmark corner button (used on card image + miniature show gallery) --
   Matches the design handoff `.bm-corner` spec 1:1. Idle is a 32px cream
   pill with a 16px outline icon; saved flips to a bronze fill with a white
   filled icon and a bronze-tinted shadow. */
.dmh-bookmark-form {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  margin: 0;
}
.dmh-bookmark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--paper);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  color: var(--fg-1);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(73, 52, 28, 0.12);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.dmh-bookmark-btn:hover {
  background: var(--surface);
  color: var(--accent-bronze-press);
}
.dmh-bookmark-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-bronze-ring);
}
.dmh-bookmark-btn__icon {
  display: block;
  width: 16px;
  height: 16px;
}

/* Reveal on card hover (desktop). The miniature show gallery also hosts the
   bookmark button, so we mirror the reveal trigger there. */
.dmh-minicard:hover .dmh-bookmark-btn,
.dmh-minicard:focus-within .dmh-bookmark-btn,
.smp-gallery__main:hover .dmh-bookmark-btn,
.smp-gallery__main:focus-within .dmh-bookmark-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Saved state: solid bronze with a white icon, always visible. */
.dmh-bookmark-btn--saved {
  opacity: 1;
  transform: translateY(0);
  background: var(--accent-bronze);
  color: #fff;
  border-color: var(--accent-bronze);
  box-shadow: 0 2px 6px rgba(184, 107, 42, 0.32);
}
/* Saved-state hover: keep the bronze pill (override the base hover which
   would otherwise flip the bg to surface), darken just the icon. */
.dmh-bookmark-btn--saved:hover {
  background: var(--accent-bronze);
  border-color: var(--accent-bronze);
  color: var(--accent-bronze-press);
}

/* Touch / no-hover devices: always show the affordance. */
@media (hover: none) {
  .dmh-bookmark-btn { opacity: 1; transform: translateY(0); }
}

/* --- Page chrome (kit.css portal patterns) -------------------------------- */
.dmh-page-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-7);
}
.dmh-page-lede {
  font-size: var(--fs-lg);
  color: var(--fg-2);
  max-width: 60ch;
  margin: calc(-1 * var(--sp-5)) 0 var(--sp-9);
}
.dmh-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.dmh-page-header .dmh-page-title { margin: 0; }

/* Breadcrumb — the trail above a facet landing page's title. Pairs with the
   BreadcrumbList JSON-LD; the two must name the same steps. */
.dmh-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-4);
}
.dmh-breadcrumb__link { color: var(--fg-muted); text-decoration: none; }
.dmh-breadcrumb__link:hover { color: var(--accent-bronze); text-decoration: underline; }
.dmh-breadcrumb__sep { color: var(--fg-subtle); }
.dmh-breadcrumb__current { color: var(--fg-1); }

/* The copy that sits under the grid on a landing page. */
.dmh-browse-footer { margin-top: var(--sp-10); }

/* Facet strip — the row of landing-page links. Shown on the unfiltered browse
   page as a way in, and below the grid on a landing page as the way across to
   the other axis. Never beside an active filter pill for the same thing. */
.dmh-facet-strip { margin: 0 0 var(--sp-7); }
.dmh-facet-strip__heading { margin: 0 0 var(--sp-3); color: var(--fg-muted); }
.dmh-facet-strip__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.dmh-facet-strip__link { text-decoration: none; }

/* Facet landing page intro — the copy that keeps the eight pages from reading
   as near-duplicates of each other. Sits below the grid. */
.dmh-facet-intro {
  max-width: 60ch;
  margin: var(--sp-9) 0 0;
  color: var(--fg-2);
}
.dmh-facet-intro p { margin: 0 0 var(--sp-3); }
.dmh-facet-intro p:last-child { margin-bottom: 0; }

/* --- Masonry feed (Paintjobs) -------------------------------------------- */
/* Layout is driven by `masonry_feed_controller` (JS): it builds N
   `.dmh-masonry__col` children and places each `[data-feed-item]` into the
   currently-shortest column in sort order. The reason we don't use CSS
   `columns` here is that CSS columns fill column-major (top-to-bottom in
   col 1, then col 2, then col 3), which breaks the sort-reading order. */
.dmh-masonry {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}
.dmh-masonry__col {
  flex: 1 1 0;
  min-width: 0;
}

.dmh-feedcard {
  break-inside: avoid;
  margin-bottom: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.dmh-feedcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.dmh-feedcard__head {
  display: block;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-warm);
  padding: 10px 14px;
  text-decoration: none;
}
.dmh-feedcard__head:hover { background: var(--border-warm); }
.dmh-feedcard__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0; }
.dmh-feedcard__byline { font-size: var(--fs-xs); color: var(--fg-muted); margin: 2px 0 0; }
.dmh-feedcard__cover { aspect-ratio: 4 / 3; overflow: hidden; }
/* This 4:3 box is fed the SQUARE :browse variant, so the browser crops it a
   second time. Centred would undo the top-biased crop ImageResizer already
   applied and chop the head back off — keep the same 20% bias as
   ImageResizer::TOP_BIAS. */
.dmh-feedcard__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform var(--dur) var(--ease-out); }
.dmh-feedcard:hover .dmh-feedcard__cover img { transform: scale(1.04); }
.dmh-feedcard__foot {
  background: var(--bg-warm);
  border-top: 1px solid var(--border-warm);
  padding: 8px 14px;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.dmh-feedcard__foot-label { color: var(--fg-2); font-weight: var(--fw-medium); }

/* --- Paintjobs feed (Instagram showcase) redesign ----------------------- */
/* Zone 1 · clickable header strip ---------------------------------------- */
.dmh-feedcard__headrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.dmh-feedcard__ig {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--accent-bronze-press);
}
.dmh-feedcard__ig svg { width: 100%; height: 100%; display: block; }
.dmh-feedcard__headtext { flex: 1 1 auto; min-width: 0; }
.dmh-feedcard__source {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dmh-feedcard__chev {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--fg-subtle);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dmh-feedcard__chev svg { width: 100%; height: 100%; display: block; }
.dmh-feedcard__head:hover .dmh-feedcard__chev {
  color: var(--accent-bronze);
  transform: translateX(2px);
}

/* Zone 3 · linked-miniature footer --------------------------------------- */
.dmh-feedcard__foot--links { padding: var(--sp-4); }

.dmh-feedcard__foot-label--block {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-bronze-press);
}

.dmh-feedcard__links { display: flex; flex-direction: column; gap: var(--sp-2); }
.dmh-feedcard__links--rest { margin-top: var(--sp-2); }

.dmh-feedcard__foot .dmh-mini-row {
  gap: var(--sp-3);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}
.dmh-feedcard__foot a.dmh-mini-row:hover {
  background: var(--surface);
  border-color: var(--accent-bronze);
  box-shadow: var(--shadow-1);
}
.dmh-feedcard__foot .dmh-mini-row--free-text {
  border: 1px dashed var(--border-warm);
  background: var(--surface);
}
.dmh-feedcard__foot .dmh-mini-row__name { font-weight: var(--fw-semibold); }

.dmh-mini-row__body { flex: 1 1 auto; min-width: 0; }
.dmh-mini-row__nameline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dmh-mini-row__creator {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dmh-mini-row__chev {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--fg-subtle);
}
.dmh-mini-row__chev svg { width: 100%; height: 100%; display: block; }
.dmh-mini-row--catalog:hover .dmh-mini-row__chev { color: var(--accent-bronze); }

.dmh-feedcard__more { margin-top: var(--sp-2); }
.dmh-feedcard__more-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease-out);
}
.dmh-feedcard__more-toggle::-webkit-details-marker { display: none; }
.dmh-feedcard__more-toggle:hover { color: var(--accent-bronze); }
.dmh-feedcard__more-chev {
  width: 13px;
  height: 13px;
  transition: transform var(--dur) var(--ease-out);
}
.dmh-feedcard__more[open] .dmh-feedcard__more-chev { transform: rotate(180deg); }

/* --- Instagram embed (CLS prevention) ----------------------------------- */
.dmh-instagram-embed {
  min-height: 574px;
  overflow: hidden;
  background: var(--bg-warm);
}
.dmh-instagram-embed--show { min-height: 748px; max-width: 540px; }
.dmh-instagram-embed .instagram-media { border: none !important; margin: 0 !important; }

/* Server-rendered fallback inside an Instagram embed blockquote — indexed by
   crawlers and shown until Instagram's embed.js replaces it (no consent yet,
   script blocked or failed). Centered cookie-wall treatment. */
.dmh-ig-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sp-3);
  min-height: 360px;
  padding: var(--sp-8) var(--sp-7);
  box-sizing: border-box;
  background: var(--bg-warm);
}
.dmh-ig-fallback__glyph {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze-press);
  margin-bottom: var(--sp-1);
}
.dmh-ig-fallback__glyph svg { width: 21px; height: 21px; }
.dmh-ig-fallback__caption {
  margin: 0; max-width: 32ch;
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  color: var(--fg-2); text-wrap: pretty;
}
.dmh-ig-fallback__caption strong { color: var(--fg-1); font-weight: var(--fw-semibold); }
.dmh-ig-fallback__iglink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--accent-bronze); text-decoration: none;
  border-bottom: 1.5px solid var(--accent-bronze-ring);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.dmh-ig-fallback__iglink:hover { color: var(--accent-bronze-press); border-bottom-color: var(--accent-bronze); }
.dmh-ig-fallback__iglink svg { width: 14px; height: 14px; }
.dmh-ig-fallback__hint {
  margin: var(--sp-2) 0 0; max-width: 30ch;
  font-size: var(--fs-xs); line-height: var(--lh-snug);
  color: var(--fg-muted); text-wrap: pretty;
}
.dmh-ig-fallback__consent-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--sp-1); padding: 8px 16px;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border-radius: var(--radius-btn);
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze-press);
  border: 1px solid var(--border-warm);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.dmh-ig-fallback__consent-btn:hover { background: var(--bg-warm-hover); border-color: var(--accent-bronze); }
.dmh-ig-fallback__consent-btn svg { width: 15px; height: 15px; }

/* Breadcrumb */

/* Form / field */
.dmh-form { max-width: 640px; display: flex; flex-direction: column; gap: var(--sp-7); }
.dmh-field { display: flex; flex-direction: column; gap: var(--sp-3); }
.dmh-field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-1); }
.dmh-field__optional { font-weight: var(--fw-regular); color: var(--fg-muted); margin-left: 4px; }
.dmh-field__hint { font-size: var(--fs-xs); color: var(--fg-muted); margin: 0; }
.dmh-field__label--sm { display: block; font-size: var(--fs-xs); color: var(--fg-muted); margin: 0 0 var(--sp-2); }

/* Suggestion form state classes */
.dmh-field--changed { background: var(--success-soft); border-color: var(--success); }
.dmh-field--deleted { opacity: 0.5; background: var(--danger-soft); }
.dmh-entry--new { border: 1px solid var(--success); background: var(--success-soft); border-radius: var(--radius-md); padding: var(--sp-4); }

/* Status pill (suggestion statuses, diff action badges) */
.dmh-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.dmh-status-pill--pending  { background: var(--warning-soft); color: var(--warning); }
.dmh-status-pill--approved { background: var(--success-soft); color: var(--success); }
.dmh-status-pill--rejected { background: var(--danger-soft);  color: var(--danger); }
.dmh-status-pill--modified {
  background: var(--success-soft);
  color: var(--success);
  border: 1px dashed var(--success);
}
.dmh-status-pill--create   { background: var(--success-soft); color: var(--success); text-transform: uppercase; }
.dmh-status-pill--update   { background: var(--warning-soft); color: var(--warning); text-transform: uppercase; }
.dmh-status-pill--delete   { background: var(--danger-soft);  color: var(--danger);  text-transform: uppercase; }

/* Admin review queues — reject-with-note toggle */
.dmh-reject-details { width: 100%; }
.dmh-reject-details > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.dmh-reject-details > summary::-webkit-details-marker { display: none; }
.dmh-reject-details[open] > summary { margin-bottom: 4px; }

/* Tab strip (My Suggestions, the admin review queues) */
.dmh-tab-strip {
  display: flex;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--sp-5);
}
.dmh-tab-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  margin-bottom: -1px;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.dmh-tab-link:hover { color: var(--fg-1); }
.dmh-tab-link--active {
  color: var(--accent-bronze);
  border-bottom-color: var(--accent-bronze);
  font-weight: var(--fw-semibold);
}
.dmh-tab-link__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-2, var(--accent-bronze-soft));
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}
.dmh-tab-link--active .dmh-tab-link__count {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
}

/* Lightbox / modal scrim */
.dmh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 7, 0.92);
}
.dmh-lightbox.hidden { display: none; }
.dmh-lightbox--modal { background: rgba(10, 9, 7, 0.6); }

/* Linked-miniature row */
.dmh-mini-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease-out);
}
.dmh-mini-row:hover { background: var(--bg-warm); }
.dmh-mini-row__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-warm);
  flex-shrink: 0;
}
.dmh-mini-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dmh-mini-row__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-1); }

.dmh-mini-row--free-text {
  border: 1px dashed var(--border-warm);
  background: var(--bg-warm);
}
.dmh-mini-row__thumb--plinth {
  background: var(--bg-deepnight);
}

/* Type-picker card (e.g. photo album type selection) */
.dmh-type-card {
  display: block;
  padding: var(--sp-7);
  background: var(--surface);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.dmh-type-card:hover {
  border-color: var(--accent-bronze);
  box-shadow: var(--shadow-2);
}
.dmh-type-card__icon {
  margin: 0 auto var(--sp-4);
  width: 40px;
  height: 40px;
  color: var(--fg-subtle);
  transition: color var(--dur) var(--ease-out);
}
.dmh-type-card:hover .dmh-type-card__icon { color: var(--accent-bronze); }
.dmh-type-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0 0 var(--sp-1); }
.dmh-type-card__desc { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }

/* Language toggle (legal pages) */
.dmh-toggle-btn {
  padding: 4px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dmh-toggle-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dmh-toggle-btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dmh-toggle-btn:hover { background: var(--bg-warm); }
.dmh-toggle-btn--active {
  background: var(--accent-bronze);
  border-color: var(--accent-bronze);
  color: #fff;
}
.dmh-toggle-btn--active:hover { background: var(--accent-bronze-hover); }

/* Accent-ink card (visually distinct section, e.g. creator in suggestion form) */
.dmh-card--ink {
  border-color: var(--accent-ink-soft);
  border-width: 2px;
}
.dmh-card--ink legend { color: var(--accent-ink); }

/* --- Miniature review page: large hero preview (admin review show) -------- */
.dmh-review-hero {
  display: flex;
  justify-content: center;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dmh-review-hero__img {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  object-fit: contain;
}

/* Sticky decision bar on the review page: floats above the form so every
   review action stays reachable at any scroll position. Positioning (sticky,
   bottom-0, z) comes from Tailwind utilities at the call site.

   Two rows. Row 1 is work in progress — admin notes plus Save changes, neither
   of which changes the review status. Row 2 is the decision, read left to
   right: Publish, then the set-aside group, then Skip. */
.dmh-review-actionbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-up);
}

/* Row 1. The textarea is fixed at two rows and scrolls internally — it must
   never auto-grow, or the bar would push itself up under the admin's cursor
   while they type. Save changes matches its height so the row reads as one
   block. */
.dmh-review-actionbar__notes-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.dmh-review-actionbar__notes {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  resize: none;
}
.dmh-review-actionbar__save {
  flex: none;
  gap: 7px;
  height: 56px;
}
/* Unsaved-changes marker. Hidden until the review-actionbar Stimulus
   controller sees the form change. */
.dmh-review-actionbar__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
}

/* Row 2. Every fixed item is flex:none so only the set-aside group absorbs
   the leftover width — without that, its buttons push the row into overflow. */
.dmh-review-actionbar__decide-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dmh-review-actionbar__decide-row > * { flex: none; }

/* The one filled button in the bar, and the only way out of the queue that
   needs no reason. Fixed width so it does not resize as labels change.
   `margin-right: auto` is what splits the row in two: Publish is the only
   thing on the left, everything else is pushed to the right edge, and all the
   slack in between lands in one gap instead of being spread through the
   controls. */
.dmh-review-actionbar__publish {
  gap: 7px;
  width: 190px;
  height: 44px;
  margin-right: auto;
  font-weight: var(--fw-semibold);
}
.dmh-review-actionbar__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1;
  color: var(--fg-on-accent);
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
}

/* Separates "finish" from "set aside", and "set aside" from "no consequence". */
.dmh-review-actionbar__rule {
  align-self: stretch;
  width: 1px;
  background: var(--border-soft);
}

/* Skip changes nothing about the record, so it is the quietest control here. */
.dmh-review-actionbar__skip-form { flex: none; }
.dmh-review-actionbar__skip {
  height: 38px;
  color: var(--fg-muted);
}
.dmh-review-actionbar__skip:hover { background: var(--bg-muted); }

/* The set-aside group. A tinted dashed box around the reason dropdown and the
   two buttons that consume it, so the coupling is obvious without a sentence
   of help text. Sized to its contents (flex:none, from the row rule above) so
   the box stays as small as what is in it — stretching it only put a stretch
   of empty tinted paper between the dropdown and the buttons it belongs to. */
.dmh-setaside {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 10px;
  background: var(--accent-bronze-tint);
  border: 1px dashed var(--accent-bronze-soft-border);
  border-radius: var(--radius-md);
}
.dmh-setaside__label {
  flex: none;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  color: var(--warning);
}
/* The reason picker: a listbox drawn here rather than a native <select>.
   A native select's popup belongs to the browser — it centres itself on the
   chosen option, so it opens in a different place every time, and it scrolls
   on its own judgement. In a bar pinned to the bottom of the window that put
   the list half off-screen. This one is anchored above the trigger and has no
   max-height, so every reason is always on screen at once. */
.dmh-reasonpick {
  position: relative;
  flex: none;
  width: 220px;
}
.dmh-reasonpick__trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  text-align: left;
  background: var(--accent-bronze-tint);
  border: 1px solid var(--accent-bronze-soft-border);
  border-radius: 9px;
  cursor: pointer;
}
.dmh-reasonpick__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dmh-reasonpick__value--empty { color: var(--fg-subtle); }
/* Masked rather than drawn, so it keeps its token colour. */
.dmh-reasonpick__chevron {
  flex: none;
  width: 11px;
  height: 11px;
  background-color: var(--warning);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8 9.5 4.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* bottom: 100% is the whole point — always upward, never over the trigger,
   and never below the fold of a bar that is already at the bottom. */
.dmh-reasonpick__list {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}
/* Tailwind's .hidden would win on load order alone; spelled out so the list
   cannot start showing if that order ever changes. */
.dmh-reasonpick__list.hidden { display: none; }
.dmh-reasonpick__option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 7px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  text-align: left;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dmh-reasonpick__option:hover { background: var(--bg-warm); }
.dmh-reasonpick__option[aria-selected="true"] {
  color: var(--accent-bronze);
  font-weight: var(--fw-medium);
}
.dmh-reasonpick__tick {
  flex: none;
  width: 12px;
  visibility: hidden;
}
.dmh-reasonpick__option[aria-selected="true"] .dmh-reasonpick__tick { visibility: visible; }

/* The same picker outside the review bar, in a form column. Three differences:
   it fills its column instead of a fixed 220px, it drops downward (nothing is
   pinned to the viewport bottom here, and upward would open off the top), and
   each option gets room to wrap so it can carry the sentence explaining it.
   That sentence is why this is not a native <select> — an <option> cannot hold
   two lines of markup. */
.dmh-reasonpick--block { width: 100%; }
/* Neutral surface and chevron, unlike the bar's bronze tint and amber arrow: sitting
   in a row of plain inputs, "look at me" colouring reads as a changed field, which is
   what .dmh-field--changed already means here. Sized to .dmh-input--compact so the
   pair lines up with the inputs beside them. */
.dmh-reasonpick--block .dmh-reasonpick__trigger {
  height: 34px;
  background: var(--surface);
  border-color: var(--border-soft);
  border-radius: var(--radius-input);
}
.dmh-reasonpick--block .dmh-reasonpick__trigger:focus-visible {
  outline: none;
  border-color: var(--accent-bronze);
  box-shadow: 0 0 0 3px var(--accent-bronze-ring);
}
.dmh-reasonpick--block .dmh-reasonpick__chevron { background-color: var(--fg-muted); }
.dmh-reasonpick--block .dmh-reasonpick__list {
  top: calc(100% + 6px);
  bottom: auto;
  width: 100%;
  max-width: none;
}
.dmh-reasonpick--block .dmh-reasonpick__option {
  align-items: flex-start;
  white-space: normal;
}
.dmh-reasonpick--block .dmh-reasonpick__tick { margin-top: 2px; }
.dmh-reasonpick__note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  font-style: italic;
}

.dmh-setaside__hold,
.dmh-setaside__reject {
  flex: none;
  height: 38px;
}
.dmh-setaside__hold {
  background: var(--warning-soft);
  border-color: var(--warning-border);
  color: var(--warning);
}
.dmh-setaside__hold:hover:not(:disabled) { background: var(--bg-warm-hover); }
.dmh-setaside__reject {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger);
}
.dmh-setaside__reject:hover:not(:disabled) { background: var(--danger-ring); }

/* Component-specific, not the app's mobile breakpoint: this is the measured
   width at which Publish + the group + Skip stop fitting on one line (~992px,
   rounded up). Below it the group takes a line of its own, rather than Skip
   alone being pushed onto one. */
@media (max-width: 1020px) {
  .dmh-setaside { flex-basis: 100%; }
  /* Full width now, so the dropdown takes the slack. Without this the group
     goes back to holding a stretch of empty paper between the reason and the
     buttons that use it — the thing the compact layout above exists to avoid. */
  .dmh-reasonpick {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  /* A hairline separates two things standing side by side. Once the row has
     stacked it separates nothing, and just reads as a stray mark next to Skip. */
  .dmh-review-actionbar__rule { display: none; }
}

/* --- Review queue bulk selection -------------------------------------- */

/* Sits between the summary line and the first card, so the box that ticks the
   whole page lines up with the box on every row under it. */
.dmh-bulk-selectall {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5) var(--sp-3);
}

/* Keeps a locked row's spacer the same width as a tick box, so every row's
   picture starts in the same place whether or not it can be selected. */
.dmh-bulk-tick {
  flex: none;
  width: 16px;
}

/* One decision for everything ticked above. Same sticky footer as the
   single-review action bar, and the same set-aside group inside it, so the two
   read as one tool.
   No `display` of its own — that is what lets the plain `hidden` attribute keep
   the bar out of the way until something is ticked. */
.dmh-bulk-bar {
  padding: 12px var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-up);
}
.dmh-bulk-bar__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dmh-bulk-bar__form > * { flex: none; }
/* margin-right:auto splits the row: the count keeps the left, every control is
   pushed to the right edge, and all the slack lands in one gap between them. */
.dmh-bulk-bar__count {
  margin-right: auto;
  font-weight: var(--fw-semibold);
}
/* Where the tag confirmation is streamed in, so it lands next to the rows it
   talks about rather than in the flash at the top of a page nobody scrolled back
   up to. Floated clear of the bar rather than placed in it: in the row it wraps
   the set-aside group onto a second line and "Add tag" jumps out from under the
   pointer that just used it. The sticky bar is the containing block. */
.dmh-bulk-bar__status {
  position: absolute;
  left: var(--sp-6);
  bottom: 100%;
  margin-bottom: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  color: var(--success);
}
.dmh-bulk-bar__status:empty { display: none; }
.dmh-bulk-bar__publish {
  height: 38px;
  font-weight: var(--fw-semibold);
}
/* "Add tag" and the menu it opens. Nothing but the button shows until it is
   pressed — a picker sitting open in the bar is a control the admin has to look
   past every time they are doing one of the other three things. */
.dmh-tagselect {
  position: relative;
  flex: none;
}
.dmh-tagselect__trigger { height: 38px; }
/* Upward, like the reason picker's, because this bar is pinned to the bottom.
   Wider than that one: these options carry the sentence explaining the tag. */
.dmh-tagselect__menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 340px;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}
/* Tailwind's .hidden would win on load order alone; spelled out so the menu
   cannot start showing if that order ever changes. */
.dmh-tagselect__menu.hidden { display: none; }
/* The search row stays put while the options under it scroll. */
.dmh-tagselect__search { padding: 0 0 var(--sp-2); }
.dmh-tagselect__filter {
  width: 100%;
  height: 32px;
  padding: 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  background: var(--bg-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.dmh-tagselect__filter:focus-visible {
  outline: none;
  border-color: var(--accent-bronze);
}
/* Capped rather than open-ended: the whole vocabulary is a few hundred tags, so
   without this the list runs off the top of the window. */
.dmh-tagselect__options {
  max-height: 320px;
  overflow-y: auto;
}
.dmh-tagselect__grouphead {
  padding: var(--sp-3) 10px var(--sp-1);
  color: var(--fg-subtle);
}
.dmh-tagselect__group[hidden] { display: none; }
.dmh-tagselect__option {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dmh-tagselect__option[hidden] { display: none; }
.dmh-tagselect__option:hover { background: var(--bg-warm); }
.dmh-tagselect__option:focus-visible {
  outline: none;
  background: var(--bg-warm);
  box-shadow: 0 0 0 2px var(--accent-bronze-ring);
}
.dmh-tagselect__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.dmh-tagselect__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--fw-medium);
}
/* What the tag means, so a bulk decision is made on more than a bare word. */
.dmh-tagselect__desc {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--fg-subtle);
}
/* Applying one of these raises the miniature's minimum age, which blurs its
   pictures. Worth seeing before the click, not after. */
.dmh-tagselect__age {
  flex: none;
  padding: 1px var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--warning);
  background: var(--accent-bronze-tint);
  border-radius: var(--radius-sm);
}
.dmh-tagselect__none {
  padding: var(--sp-3) 10px;
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}

/* Unsaved-changes confirm, raised by the bar before Skip discards work. A
   native <dialog> opened with showModal(), so it sits in the top layer and
   never takes part in the bar's flex layout, open or closed. */
.dmh-confirm {
  /* The UA centres a modal dialog with `margin: auto` against `inset: 0`.
     Tailwind's preflight zeroes every margin, which pins it to the top-left
     corner, so the centring has to be put back by hand. */
  margin: auto;
  width: min(460px, calc(100vw - 2 * var(--sp-5)));
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.dmh-confirm::backdrop { background: rgba(28, 26, 22, 0.45); }
.dmh-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.dmh-confirm__actions .dmh-btn { height: 38px; }

/* --- Diff display (suggestion current/proposed comparison) --------------- */
.dmh-diff { border-radius: var(--radius-sm); padding: 8px 12px; }
.dmh-diff--current { background: var(--danger-soft); }
.dmh-diff--proposed { background: var(--success-soft); }
.dmh-diff--removed { background: var(--danger-soft); opacity: 0.5; }
.dmh-diff--neutral { background: var(--bg-cream); }
.dmh-diff__label { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.dmh-diff__label--current { color: var(--danger); }
.dmh-diff__label--proposed { color: var(--success); }
.dmh-diff__value--current { color: var(--diff-current); }
.dmh-diff__value--proposed { color: var(--diff-proposed); }
.dmh-diff__meta {
  display: inline-block;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 0 8px 2px;
  margin: 0 4px 4px 0;
}

/* Change indicator borders (credit/collection/image change entries) */
.dmh-change-border { border-left: 4px solid; padding-left: 12px; padding-top: 4px; padding-bottom: 4px; }
.dmh-change-border--create { border-left-color: var(--success); }
.dmh-change-border--update { border-left-color: var(--warning); }
.dmh-change-border--delete { border-left-color: var(--danger); }

/* --- Reusable form/UI primitives ----------------------------------------- */

/* Section divider */
.dmh-divider { border-top: 1px solid var(--border-soft); }

/* Image well (placeholder container for gallery/thumbnails) */
.dmh-image-well { background: var(--bg-muted); border-radius: var(--radius-md); }

/* Empty state / spinner icon colors */
.dmh-empty-icon { color: var(--fg-disabled); }
.dmh-spinner-icon { color: var(--fg-disabled); }

/* Form entry row (variant cards, credit entries, collection entries) */
.dmh-form-entry {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.dmh-form-entry--dashed {
  border-style: dashed;
  border-color: var(--border-strong);
}
/* Newly added entry: same shape as a normal entry row, tinted green. */
.dmh-form-entry--new {
  border-color: var(--success);
  background: var(--success-soft);
}

/* Variant card heading — larger + bronze so each variant's constructed name
   (material · scale, or its vendor name) stands out and variants are easy to
   tell apart on the suggest-edit / review form. */
.dmh-variant-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--accent-bronze);
}

/* Form highlight container (checkbox groups, inline controls) */
.dmh-form-highlight {
  background: var(--bg-cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

/* Autocomplete dropdown */
.dmh-autocomplete-dropdown {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}

/* Autocomplete option rows (tag selector) */
.dmh-autocomplete-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  cursor: pointer;
}
.dmh-autocomplete-option:hover,
.dmh-autocomplete-option--active { background: var(--bg-cream); }
.dmh-autocomplete-option__cat {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.dmh-autocomplete-option--new {
  border-top: 1px solid var(--border-soft);
  color: var(--accent-bronze);
}
.dmh-autocomplete-option--new:hover,
.dmh-autocomplete-option--new.dmh-autocomplete-option--active { background: var(--accent-bronze-soft); }
.dmh-autocomplete-empty {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}

/* Inline Organisation/Person segmented toggle for the contributor picker —
   shown only while a brand-new contributor name is being entered. */
.dmh-type-toggle {
  display: inline-flex;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.dmh-type-toggle__opt {
  padding: 3px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dmh-type-toggle__opt + .dmh-type-toggle__opt { border-left: 1px solid var(--border-soft); }
.dmh-type-toggle__opt:hover { background: var(--bg-cream); }
.dmh-type-toggle__opt--active,
.dmh-type-toggle__opt--active:hover {
  background: var(--accent-bronze);
  color: var(--fg-on-accent);
}

/* Read-only tag pills (suggestion diff / review) — highlight not-yet-defined tags */
.dmh-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  background: var(--bg-cream);
  border: 1px solid var(--border-soft);
  color: var(--fg-1);
}
.dmh-tag-pill--new {
  background: var(--accent-bronze-soft);
  border-color: var(--accent-bronze);
  color: var(--accent-bronze);
}
.dmh-tag-pill__badge {
  font-size: 9px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
  color: var(--fg-on-accent);
}

/* Image thumbnail border */
.dmh-thumb-border { border: 2px solid var(--border-soft); }
.dmh-thumb-border--dashed { border: 2px dashed var(--border-strong); }

/* Gallery thumbnail ring */
.dmh-gallery-thumb {
  box-shadow: 0 0 0 1px var(--border-soft);
  transition: box-shadow 0.15s ease;
}
.dmh-gallery-thumb:hover { box-shadow: 0 0 0 3px var(--accent-bronze); }
.dmh-gallery-thumb.is-active { box-shadow: 0 0 0 3px var(--accent-bronze); }


/* Small icon button (overlay on thumbnails) */
.dmh-icon-btn {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.dmh-icon-btn--danger { color: var(--danger); }
.dmh-icon-btn--danger:hover { background: var(--danger-soft); }
.dmh-icon-btn--bronze { color: var(--accent-bronze); }
.dmh-icon-btn--bronze:hover { background: var(--accent-bronze-soft); }

/* Card header (admin panel sections) */
.dmh-card__header {
  background: var(--bg-cream);
  border-bottom: 1px solid var(--border-soft);
  padding: var(--sp-4) var(--sp-6);
}
.dmh-card__header h2 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}

/* Admin copy-value button */
.dmh-copy-btn {
  flex-shrink: 0;
  padding: 6px;
  border-radius: var(--radius-sm);
  color: var(--fg-subtle);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.dmh-copy-btn:hover { color: var(--accent-bronze); background: var(--accent-bronze-soft); }

/* Prose (user-generated rich text, replaces Tailwind prose with design system fonts) */
.dmh-prose {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: none;
}
.dmh-prose p { margin: 0 0 var(--sp-4); }
.dmh-prose p:last-child { margin-bottom: 0; }
.dmh-prose a { color: var(--accent-ink); text-decoration: underline; }
.dmh-prose a:hover { color: var(--accent-ink-hover); }
.dmh-prose strong { font-weight: var(--fw-semibold); color: var(--fg-1); }
.dmh-prose em { font-style: italic; }

/* Admin checkbox (bronze accent) */
.dmh-checkbox {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  accent-color: var(--accent-bronze);
}

/* Creator pill (assigned-creator indicator in suggestion form) */
.dmh-creator-pill {
  background: var(--accent-ink-soft);
  border: 1px solid var(--accent-ink-soft);
}

/* Replaces the creator pill while a different creator is named in the form, so
   the pending swap reads as a decision already taken rather than as text left
   sitting in a search box. */
.dmh-creator-diff {
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-bronze-soft);
  border: 1px solid var(--accent-bronze-soft-border);
  border-radius: var(--radius-md);
}
.dmh-creator-diff__label {
  display: block;
  margin-bottom: 6px;
  color: var(--fg-muted);
}
.dmh-creator-diff__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.dmh-creator-diff__side {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.dmh-creator-diff__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  text-decoration: line-through;
}
.dmh-creator-diff__side--to .dmh-creator-diff__name {
  color: var(--fg-1);
  text-decoration: none;
}
.dmh-creator-diff__type {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.dmh-creator-diff__arrow {
  color: var(--accent-bronze);
  font-weight: var(--fw-semibold);
}
.dmh-creator-diff__new {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  color: var(--success);
}
.dmh-creator-diff__undo {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--accent-bronze);
  text-decoration: underline;
  cursor: pointer;
}

/* Semantic text-color utilities */
.dmh-text-danger  { color: var(--danger); }
.dmh-text-subtle  { color: var(--fg-subtle); }
.dmh-text-success { color: var(--success); }

/* --- Creator card (PR-3 of Option A top nav) --------------------------- */
.dmh-creator-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.dmh-creator-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.dmh-creator-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
}
.dmh-creator-card__count {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin: 0;
}

/* --- Pipeline ("Coming soon") creator card — warm variant -------------- */
.dmh-creator-card--soon {
  background: var(--bg-warm);
  border-color: var(--border-warm);
  box-shadow: none;
}
.dmh-creator-card--soon:hover {
  background: var(--bg-warm-hover);
  border-color: var(--accent-bronze);
  box-shadow: var(--shadow-1);
}
.dmh-creator-card__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-bronze);
  background: var(--accent-bronze-soft);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.dmh-creator-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-ink);
}
.dmh-creator-card__link svg { width: 13px; height: 13px; }

/* --- Creators toolbar: count + sort segmented control ------------------ */
.dmh-creators-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.dmh-sort { display: inline-flex; align-items: center; gap: var(--sp-3); }
.dmh-sort__label { font-size: var(--fs-xs); color: var(--fg-muted); }

.dmh-seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
}
.dmh-seg__btn {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.dmh-seg__btn:hover { color: var(--fg-1); }
.dmh-seg__btn.is-active { background: var(--accent-bronze); color: #fff; }

/* --- "In the pipeline" group divider ----------------------------------- */
.dmh-creators-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-5);
}
.dmh-creators-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.dmh-creators-divider__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.dmh-creators-divider__count {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

/* --- Nav: dropdown popovers (PR-1 of Option A top nav) ------------------ */
.dmh-pop {
  position: absolute;
  top: calc(100% + 6px);
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 8px;
  min-width: 260px;
  z-index: 60;
}
.dmh-pop--anchor-left  { left: 0; }
.dmh-pop--anchor-right { right: 0; }
.dmh-pop__group-label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: 10px 12px 6px;
  margin: 0;
}
.dmh-pop__divider {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 4px;
}

.dmh-pop__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--fg-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.dmh-pop__item:hover,
.dmh-pop__item.is-active {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
}
.dmh-pop__item--coming-soon { color: var(--fg-subtle); cursor: default; }
.dmh-pop__item--coming-soon:hover {
  background: var(--bg-warm);
  color: var(--fg-2);
}
.dmh-pop__item-icon {
  width: 18px;
  height: 18px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.dmh-pop__item:hover .dmh-pop__item-icon,
.dmh-pop__item.is-active .dmh-pop__item-icon { color: var(--accent-bronze); }
.dmh-pop__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dmh-pop__item-label { display: inline-flex; align-items: center; gap: 8px; }
.dmh-pop__item-sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
}
.dmh-pop__item-badge {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
  color: var(--surface);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Coming-soon page (PR-2 of Option A top nav) ----------------------- */
.dmh-comingsoon {
  max-width: 60ch;
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-5) var(--sp-10);
  text-align: center;
}
.dmh-comingsoon .dmh-eyebrow { margin-bottom: var(--sp-3); }
.dmh-comingsoon .dmh-h1      { margin-bottom: var(--sp-4); }
.dmh-comingsoon .dmh-lede    { margin-bottom: var(--sp-7); }
.dmh-comingsoon__cta {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* --- "Soon" pill -------------------------------------------------------- */
.dmh-soon-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-warm);
  border: 1px solid var(--border-warm);
  color: var(--accent-bronze);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

/* ==========================================================================
   Show Miniature Page (`smp-*`) — page-feature composition for
   app/views/miniatures/show.html.erb. Mobile threshold = --breakpoint-md
   (see app/assets/tailwind/application.css); each raw media query below
   carries the mobile-breakpoint marker so bin/check_design_system keeps
   them aligned. The `dmh-*` primitives in design_tokens.css still cover
   all color/typography/border tokens — this block only adds compositions.
   ========================================================================== */

.smp__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 839.98px) /* mobile breakpoint */ {
  .smp__hero { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* Desktop vs mobile gallery visibility is driven by the component classes
   themselves (see `.smp-gallery__main`, `.smp-gallery__thumbs`,
   `.smp-gallery__track`, `.smp-gallery__dots`) so each element can keep its
   own display value (flex / block). */

/* --- Info column ------------------------------------------------------- */
.smp-info { min-width: 0; position: relative; }
.smp-info__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
}
.smp-info__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
}
.smp-info__eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.4;
}
.smp-info__eyebrow-pill--discontinued {
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}

.smp-info__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.smp-info__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--font-display-vars);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.smp-info__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
@media (max-width: 839.98px) /* mobile breakpoint */ {
  /* On mobile the title would push actions onto a new left-aligned row;
     pin them to the top-right of .smp-info instead so they sit on the
     same visual line as the eyebrow (category + Discontinued). */
  .smp-info__actions {
    position: absolute;
    top: 0;
    right: 0;
  }
  /* Reserve enough room on the right of the eyebrow so its text never
     runs under the pinned actions block. ~150px covers the Suggest
     edit pill + kebab + a small gap. The title sits below the eyebrow
     and is tall enough to clear the actions vertically, so it can
     reclaim the full mobile width — no padding-right needed. */
  .smp-info__eyebrow { padding-right: 150px; }
}

.smp-info__byline {
  font-size: var(--fs-base);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-5);
}

.smp-info__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}
.smp-info__price-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
}
.smp-info__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
}
.smp-info__price-note {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.smp-info__meta-strip {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  letter-spacing: var(--ls-wide);
}

/* --- Facts list (definition list) -------------------------------------- */
.smp-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--sp-6);
  row-gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--border-soft);
}
.smp-facts__key {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  align-self: baseline;
}
.smp-facts__val {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  align-self: baseline;
}

.smp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.smp-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--fg-muted);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.smp-tag:hover { color: var(--accent-bronze); border-color: var(--accent-bronze); }

.smp-link {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-bronze);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out), text-decoration-color var(--dur) var(--ease-out);
}
.smp-link:hover {
  color: var(--accent-ink-hover);
  text-decoration-color: var(--accent-bronze-hover);
}
.smp-link--ext::after {
  content: " \2197";
  font-size: 0.85em;
  color: var(--fg-subtle);
}

/* --- Suggest-edit bronze pill button ----------------------------------- */
.smp-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  background: var(--accent-bronze-soft);
  border: 1px solid var(--border-warm);
  color: var(--accent-bronze);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  white-space: nowrap;
}
.smp-edit-btn:hover {
  background: var(--accent-bronze-soft-hover);
  border-color: var(--accent-bronze);
  color: var(--accent-bronze-hover);
}
.smp-edit-btn img { width: 14px; height: 14px; }

/* --- Kebab menu -------------------------------------------------------- */
.smp__menu { position: relative; }
.smp__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-muted);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.smp__menu-trigger:hover {
  background: var(--bg-warm);
  border-color: var(--border-warm);
  color: var(--fg-1);
}
.smp__menu-trigger img { width: 18px; height: 18px; }
.smp__menu-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  z-index: 10;
}
.smp__menu-popover.hidden { display: none; }
.smp__menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.smp__menu-item:hover { background: var(--bg-warm); }
.smp__menu-item--muted { color: var(--fg-muted); }
.smp__menu-item--muted:hover { color: var(--fg-1); }
.smp__menu-item--saved { color: var(--accent-bronze); }
.smp__menu-item--saved img { opacity: 1; }
.smp__menu-item img { width: 16px; height: 16px; opacity: 0.7; }

/* button_to renders a wrapping <form>; flatten it so menu items render
   like flexbox rows alongside the <a> menu items. */
.smp__menu-item-form { display: contents; margin: 0; }
.smp__menu-item-form .smp__menu-item {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.smp__menu-sep {
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
}

/* --- Section heading -------------------------------------------------- */
.smp-section {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border-soft);
}
.smp-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.smp-section__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--font-display-vars);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}
.smp-section__count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
}

.smp-variants {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 840px) /* mobile breakpoint */ {
  .smp-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Variant card ------------------------------------------------------ */
.smp-vc {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.smp-vc--unavailable { opacity: 0.85; }
.smp-vc__head { padding: var(--sp-6); }
.smp-vc__title-row { margin-bottom: var(--sp-5); }
.smp-vc__title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.smp-vc__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0;
  line-height: var(--lh-snug);
}
.smp-vc__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  line-height: 1.4;
}
.smp-vc__badge--limited {
  background: var(--accent-bronze);
  color: var(--fg-on-accent);
}
.smp-vc__badge--digital {
  background: var(--accent-ink-soft);
  border-color: var(--info-border);
  color: var(--accent-ink);
}
.smp-vc__badge--feature {
  background: var(--bg-muted);
  border-color: var(--border-soft);
  color: var(--fg-muted);
}
.smp-vc__badge-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-regular);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
}

.smp-vc__attrs {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-soft);
}
.smp-vc__attrs-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--sp-4);
}
.smp-vc__attr-key {
  font-size: 10px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.smp-vc__attr-val {
  font-size: var(--fs-sm);
  color: var(--fg-1);
  margin: 0;
}
.smp-vc__attr-val--mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.smp-vc__attr-val--phrase { font-size: var(--fs-sm); color: var(--fg-2); }

.smp-vc__limited-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-bronze-soft);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--accent-bronze-press);
  margin-bottom: var(--sp-4);
}
.smp-vc__limited-strip img { width: 16px; height: 16px; }

.smp-vc__source-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--accent-ink);
  text-decoration: none;
}
.smp-vc__source-link:hover { color: var(--accent-ink-hover); }
.smp-vc__source-link::after {
  content: " \2197";
  margin-left: 4px;
  color: var(--fg-subtle);
}

.smp-vc__offers {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background: var(--bg-warm);
  border-top: 1px solid var(--border-warm);
}
.smp-vc__offers-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}

.smp-vc__empty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-muted);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border-soft);
}
.smp-vc__empty-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; }

/* --- Offer row -------------------------------------------------------- */
.smp-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
}
.smp-offer:last-child { margin-bottom: 0; }
.smp-offer--soldout { opacity: 0.75; }
.smp-offer__details { min-width: 0; }
.smp-offer__top-row { display: flex; align-items: baseline; gap: var(--sp-3); }
.smp-offer__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
}
.smp-offer__bot-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: 2px;
}
.smp-offer__marketplace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.smp-offer__marketplace-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze);
}
.smp-offer__sep { color: var(--fg-subtle); font-size: var(--fs-xs); }
.smp-offer__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.smp-offer__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.smp-offer__status--ok      { color: var(--success); }
.smp-offer__status--soldout { color: var(--danger); }
.smp-offer__status--unknown { color: var(--fg-subtle); }

.smp-offer__cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-on-accent);
  background: var(--accent-bronze);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease-out);
}
.smp-offer__cta:hover { background: var(--accent-bronze-hover); }
.smp-offer__cta--ghost {
  background: transparent;
  color: var(--fg-disabled);
  border: 1px solid var(--border-soft);
  cursor: not-allowed;
}
.smp-offer__cta--ghost:hover { background: transparent; }

@media (max-width: 839.98px) /* mobile breakpoint */ {
  /* Stack marketplace + status onto their own lines so the layout reads
     as 3 fixed rows (price, marketplace, status) instead of flex-wrap
     leaving the `·` separator alone at the start of the last line. */
  .smp-offer__bot-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .smp-offer__sep { display: none; }
}

/* --- Gallery ---------------------------------------------------------- */
.smp-gallery { position: relative; }
.smp-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  margin-bottom: var(--sp-3);
}
.smp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.smp-gallery__counter {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  padding: 3px 8px;
  background: rgba(10, 9, 7, 0.75);
  color: var(--fg-on-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  pointer-events: none;
}
.smp-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--fg-1);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.smp-gallery__main:hover .smp-gallery__nav { opacity: 1; }
.smp-gallery__nav--prev { left: var(--sp-3); }
.smp-gallery__nav--next { right: var(--sp-3); }
.smp-gallery__thumbs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: 2px;
}
.smp-gallery__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out);
}
.smp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.smp-gallery__thumb:hover { border-color: var(--border-strong); }
.smp-gallery__thumb.is-active { border-color: var(--accent-bronze); }

.smp-gallery__mobile {
  display: none;
  position: relative;
}
.smp-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
.smp-gallery__track::-webkit-scrollbar { display: none; }
.smp-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1;
}
.smp-gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.smp-gallery__dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-3);
}
.smp-gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}
.smp-gallery__dot.is-active {
  background: var(--accent-bronze);
  width: 16px;
}

@media (max-width: 839.98px) /* mobile breakpoint */ {
  .smp-gallery__main,
  .smp-gallery__thumbs { display: none; }
  .smp-gallery__mobile { display: block; }
  .smp-gallery__dots   { display: flex; }
}

/* --- Safety footer card ----------------------------------------------- */
.smp-footer-meta {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
}
.smp-fm-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}
.smp-fm-card__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--fg-subtle);
  margin-top: 1px;
}

/* --- Empty state (reusable; bookmark-on-plinth illustration) ----------- */
.dmh-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
}
.dmh-empty-state__art {
  position: relative;
  width: 140px;
  height: 110px;
  margin-bottom: var(--sp-6);
}
.dmh-empty-state__plinth {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 110px;
  height: 22px;
  background: var(--bg-warm);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
}
.dmh-empty-state__bookmark {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 56px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-bronze);
}
.dmh-empty-state__bookmark img,
.dmh-empty-state__bookmark svg {
  width: 56px;
  height: 72px;
}
.dmh-empty-state__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}
.dmh-empty-state__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.dmh-empty-state__actions img,
.dmh-empty-state__actions svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Miniature linker — search-first typeahead for the photo album form
   ========================================================================== */

.dmh-linker { display: block; }
.dmh-linker__typeahead { position: relative; }

.dmh-linker__input-wrap {
  position: relative;
}
.dmh-linker__input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--fg-subtle);
  pointer-events: none;
}
.dmh-linker__input-icon[hidden] { display: none; }
.dmh-linker__input {
  padding-left: 36px;
}

.dmh-linker__scope-chip {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 60%;
  padding: 4px 6px 4px 10px;
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
  border: 1px solid var(--accent-bronze-soft-hover);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
.dmh-linker__scope-chip[hidden] { display: none; }
.dmh-linker__scope-chip:hover { background: var(--accent-bronze-soft-hover); }
.dmh-linker__scope-chip svg { width: 14px; height: 14px; }

.dmh-linker__results {
  /* Fixed positioning so the dropdown escapes any ancestor with
     overflow:hidden (e.g. the admin review card). The controller sets
     top/left/width inline from the input's bounding rect on open. */
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(28, 26, 22, 0.12);
  z-index: 1000;
  max-height: 340px;
  overflow-y: auto;
}
.dmh-linker__results[hidden] { display: none; }
.dmh-linker__results-head {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  background: var(--bg-cream);
  border-bottom: 1px solid var(--border-soft);
}

.dmh-linker__result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  cursor: pointer;
  color: var(--fg-1);
  transition: background var(--dur) var(--ease-out);
}
.dmh-linker__result:last-child { border-bottom: 0; }
.dmh-linker__result.is-active,
.dmh-linker__result:hover {
  background: var(--bg-warm);
}
.dmh-linker__result--add {
  background: var(--accent-bronze-soft);
}
.dmh-linker__result--add.is-active,
.dmh-linker__result--add:hover {
  background: var(--accent-bronze-soft-hover);
}
.dmh-linker__result-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-deepnight);
  overflow: hidden;
  flex-shrink: 0;
}
.dmh-linker__result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dmh-linker__result-body { flex: 1; min-width: 0; }
.dmh-linker__result-name {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.dmh-linker__result-name mark {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
  padding: 0 1px;
  border-radius: 2px;
}
.dmh-linker__result-sub {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.dmh-linker__result-sub mark {
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
  padding: 0 1px;
  border-radius: 2px;
}
.dmh-linker__result-addicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent-bronze);
  flex-shrink: 0;
}
.dmh-linker__result-add-sub {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--accent-bronze);
  font-weight: var(--fw-normal);
}

.dmh-linker__result--creator {
  background: var(--bg-cream);
}
.dmh-linker__result--creator.is-active,
.dmh-linker__result--creator:hover {
  background: var(--bg-warm);
}
.dmh-linker__result-addicon--creator {
  background: var(--bg-warm);
  color: var(--fg-2);
}
.dmh-linker__result-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--accent-bronze);
  flex-shrink: 0;
}
.dmh-linker__result-cta svg { width: 14px; height: 14px; }

.dmh-linker__result--more {
  justify-content: center;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--accent-bronze);
  background: var(--bg-cream);
}
.dmh-linker__result--more.is-active,
.dmh-linker__result--more:hover {
  background: var(--accent-bronze-soft);
}

/* ----- Linked list ----- */

.dmh-linker__links { margin-top: var(--sp-5); }
.dmh-linker__links-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
}
.dmh-linker__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-warm);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.dmh-linker__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.dmh-linker__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.dmh-linker__row--freetext {
  background: var(--bg-warm);
  border: 1px dashed var(--border-warm);
}
.dmh-linker__row.is-fresh {
  animation: dmh-linker-pop-in 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dmh-linker-pop-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dmh-linker__thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--bg-warm);
  overflow: hidden;
  flex-shrink: 0;
}
.dmh-linker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dmh-linker__thumb--plinth {
  background: var(--bg-deepnight);
}

.dmh-linker__row-body { flex: 1; min-width: 0; }
.dmh-linker__row-name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.dmh-linker__row-sub {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

.dmh-linker__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-bronze-soft);
  color: var(--accent-bronze);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
.dmh-linker__fresh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success-border);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}

.dmh-linker__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dmh-linker__icon-btn:hover { background: var(--bg-warm); color: var(--fg-1); }
.dmh-linker__icon-btn.is-on { color: var(--accent-bronze); }
.dmh-linker__icon-btn--remove:hover { color: var(--danger); }
.dmh-linker__icon-btn svg { width: 16px; height: 16px; }

.dmh-linker__note-editor {
  flex-basis: 100%;
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.dmh-linker__note-editor[hidden] { display: none; }

.dmh-linker__editor {
  flex-basis: 100%;
  margin-top: var(--sp-3);
}
.dmh-linker__editor[hidden] { display: none; }
.dmh-linker__editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.dmh-linker__editor-row {
  grid-column: 1 / -1;
}
.dmh-linker__editor-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
}
.dmh-linker__editor-optional {
  text-transform: none;
  font-weight: var(--fw-normal);
  letter-spacing: 0;
}
.dmh-linker__editor-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.dmh-linker__editor-error {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--danger);
}
.dmh-linker__editor-error[hidden] { display: none; }


/* ===========================================================================
   Account & Auth surfaces — login, sign-up, password reset, profile, settings
   =========================================================================== */

/* --- Centered auth page (login / sign-up / forgot / reset / set-password) -- */
.dmh-auth {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1rem 2.5rem;
}
.dmh-auth__card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 2.25rem 2rem 2rem;
}
.dmh-auth__head { text-align: center; margin-bottom: 2rem; }
.dmh-auth__mark { height: 56px; width: auto; margin: 0 auto 1.25rem; display: block; }
.dmh-auth__mark--reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-bronze-soft);
  border: 1px solid var(--accent-bronze-ring-soft);
  color: var(--accent-bronze-press);
}
.dmh-auth__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 0.375rem;
}
.dmh-auth__sub { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }
.dmh-auth__foot { margin-top: 1.5rem; text-align: center; font-size: var(--fs-sm); color: var(--fg-muted); }
.dmh-auth__foot a { color: var(--accent-ink); font-weight: var(--fw-medium); text-decoration: none; }
.dmh-auth__foot a:hover { color: var(--accent-ink-hover); text-decoration: underline; text-underline-offset: 2px; }

/* "Trouble signing in?" disclosure (native <details>) */
.dmh-trouble { margin-top: 1.5rem; text-align: center; }
.dmh-trouble > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.dmh-trouble > summary::-webkit-details-marker { display: none; }
.dmh-trouble > summary:hover { color: var(--fg-2); }
.dmh-trouble > summary svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease-out); }
.dmh-trouble[open] > summary svg { transform: rotate(180deg); }
.dmh-trouble__panel {
  margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem;
  padding: 1rem; text-align: left;
  background: var(--bg-cream); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
}
.dmh-trouble__panel a { font-size: var(--fs-sm); color: var(--accent-ink); text-decoration: none; }
.dmh-trouble__panel a:hover { color: var(--accent-ink-hover); text-decoration: underline; text-underline-offset: 2px; }

/* --- Password show/hide field (used everywhere a password is entered) ------ */
.dmh-pw { position: relative; display: flex; align-items: center; }
.dmh-pw .dmh-input { padding-right: 44px; }
.dmh-pw__toggle {
  position: absolute; right: 6px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--fg-subtle); border-radius: var(--radius-sm);
}
.dmh-pw__toggle:hover { color: var(--fg-2); background: var(--bg-warm); }
.dmh-pw__toggle svg { width: 18px; height: 18px; }

/* --- "Change …" reveal (native <details>) — email & password sections ------ */
.dmh-reveal__row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.875rem;
  cursor: pointer; list-style: none;
}
.dmh-reveal__row::-webkit-details-marker { display: none; }
.dmh-reveal > summary { list-style: none; cursor: pointer; }
.dmh-reveal > summary::-webkit-details-marker { display: none; }
.dmh-reveal__value { font-size: var(--fs-md); color: var(--fg-1); }
.dmh-reveal__panel { animation: dmh-reveal-in var(--dur-slow) var(--ease-out); }
@keyframes dmh-reveal-in { from { transform: translateY(-6px); } to { transform: translateY(0); } }
/* native open/close label swap — no JS needed */
.dmh-reveal:not([open]) .dmh-reveal__close { display: none; }
.dmh-reveal[open] .dmh-reveal__open { display: none; }

/* small button size used inline in section rows */
.dmh-btn--sm { padding: 9px 14px; font-size: var(--fs-sm); }

/* --- Inline contextual note inside an edit form (the email confirm box) ----- */
.dmh-inline-note {
  margin-top: 1rem; padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-bronze-ring-soft);
  background: var(--accent-bronze-soft);
}
.dmh-inline-note--ink { border-color: var(--info-border); background: var(--accent-ink-soft); }
.dmh-inline-note__head { display: flex; align-items: flex-start; gap: 0.625rem; }
.dmh-inline-note__head svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; color: var(--accent-bronze-press); }
.dmh-inline-note--ink .dmh-inline-note__head svg { color: var(--accent-ink); }
.dmh-inline-note__head p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.dmh-inline-note__head b { color: var(--fg-1); }

/* --- Sign-in method blocks (Google / Password) ----------------------------- */
.dmh-method {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface);
}
.dmh-method + .dmh-method { margin-top: 0.75rem; }
.dmh-method--encourage { background: var(--accent-ink-soft); border-color: var(--info-border); }
.dmh-method__icon {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-cream); border: 1px solid var(--border-soft);
}
.dmh-method__icon svg { width: 20px; height: 20px; }
.dmh-method__icon img { width: 20px; height: 20px; }
.dmh-method__body { flex: 1 1 auto; min-width: 0; }
.dmh-method__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.dmh-method__desc { font-size: var(--fs-sm); color: var(--fg-muted); margin: 2px 0 0; }
.dmh-method__cta { flex: 0 0 auto; }

/* small state tags */
.dmh-tag { font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; padding: 2px 9px; }
.dmh-tag--on  { color: var(--success); background: var(--success-soft); }
.dmh-tag--off { color: var(--fg-muted); background: var(--bg-cream); border: 1px solid var(--border-soft); padding: 1px 9px; }

/* sign-in method summary badge (section header + profile) */
.dmh-signin-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  border: 1px solid var(--border-soft); background: var(--surface); color: var(--fg-2);
}
.dmh-signin-badge svg { width: 15px; height: 15px; }
.dmh-signin-badge__icon { width: 15px; height: 15px; }
.dmh-signin-badge--password { background: var(--accent-bronze-soft); border-color: var(--accent-bronze-ring-soft); color: var(--accent-bronze-press); }
.dmh-signin-badge--both { background: var(--accent-ink-soft); border-color: var(--info-border); color: var(--accent-ink); }

/* pending-email confirmation pill */
.dmh-pending {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--warning-soft); border: 1px solid var(--warning-border); color: var(--warning);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.dmh-pending svg { width: 13px; height: 13px; }

/* a status dot (mature-content row on profile) */
.dmh-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: 0 0 auto; }
.dmh-dot--on { background: var(--success); }
.dmh-dot--off { background: var(--fg-disabled); }

/* a quiet form action bar (label left, button right) */
.dmh-savebar { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; margin-top: 1rem; }
.dmh-savebar__hint { font-size: var(--fs-xs); color: var(--fg-muted); }

/* --- Account pages: cards fill the app width (dmh-main = max-w-content), but
   keep text inputs at a readable measure so they don't stretch edge-to-edge.
   Row-based controls (method blocks, savebars, reveal rows) stay full width so
   their action buttons align to the card's right edge. ---------------------- */
.dmh-acct .dmh-input,
.dmh-acct .dmh-pw,
.dmh-acct .dmh-inline-note { max-width: 600px; }
@media (max-width: 640px) {
  .dmh-acct .dmh-input,
  .dmh-acct .dmh-pw,
  .dmh-acct .dmh-inline-note { max-width: none; }
}

/* --- Quiet link variants used in auth/account chrome ----------------------- */
.dmh-link--quiet {
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.dmh-link--quiet:hover {
  color: var(--accent-ink-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dmh-link--muted {
  color: var(--fg-muted);
  text-decoration: none;
}
.dmh-link--muted:hover { color: var(--fg-2); }

/* --- Danger card variant (delete-account section) -------------------------- */
.dmh-card--danger {
  border-color: var(--danger-ring);
  background: linear-gradient(180deg, var(--danger-soft-2), var(--surface) 80%);
}
.dmh-h3--danger { color: var(--danger); }

/* --- Hairline dividers (used in profile/show) ------------------------------ */
.dmh-divider-t { border-top: 1px solid var(--border-soft); }
.dmh-divider-b { border-bottom: 1px solid var(--border-soft); }

/* --- Inline Google button variant (the account-settings "Connect" CTA) ----- */
.google-sign-in-btn--inline { width: auto; padding: 9px 14px; margin: 0; }

/* --- @handle affix (sign-up nickname field) -------------------------------- */
.dmh-affix { position: relative; display: flex; align-items: stretch; }
.dmh-affix__at {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--fg-muted); pointer-events: none;
}
.dmh-affix .dmh-input { padding-left: 28px; }

/* --- Age-bracket radio cards (sign-up) ------------------------------------- */
.dmh-radioset { display: flex; flex-direction: column; gap: 0.5rem; }
.dmh-radio-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--surface); cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.dmh-radio-card:hover { background: var(--bg-cream); }
/* Hide the native input — the dot is the visual indicator. Keep it focusable. */
.dmh-radio-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0; margin: 0;
}
.dmh-radio-dot {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong, var(--fg-disabled));
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.dmh-radio-dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: transparent;
  transition: background-color var(--dur) var(--ease-out);
}
.dmh-radio-card__text {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--fg-1);
}
.dmh-radio-card__text small {
  font-size: var(--fs-xs); font-weight: var(--fw-regular);
  color: var(--fg-muted);
}
/* Selected state — pure CSS, no JS, via :has(input:checked) */
.dmh-radio-card:has(input:checked) {
  border-color: var(--accent-bronze);
  background: var(--accent-bronze-soft);
}
.dmh-radio-card:has(input:checked) .dmh-radio-dot {
  border-color: var(--accent-bronze);
}
.dmh-radio-card:has(input:checked) .dmh-radio-dot::after {
  background: var(--accent-bronze);
}
/* Keyboard focus ring on the card when the hidden input is focused */
.dmh-radio-card:has(input:focus-visible) {
  outline: 2px solid var(--accent-bronze);
  outline-offset: 2px;
}

/* --- About page (public editorial / marketing) ---------------------------- */
/* Recreated from the design handoff. Lives inside the shared layout's
   .dmh-main, so it never re-declares the nav, footer, or page background.
   All visual values are tokens; component-specific responsive breakpoints
   (720/760px) are intentionally NOT the canonical filter breakpoint. */

/* Page-wide paper grain. `isolate` keeps the z-index:-1 pseudo behind the
   content but above the cream body, without touching every child. */
.dmh-about { position: relative; z-index: 0; isolation: isolate; }
.dmh-about::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("../images/paper-grain.svg");
  opacity: 0.035;
  mix-blend-mode: multiply;
  z-index: -1;
}

/* Layout rails — the shared .dmh-main already supplies the page gutter. */
.dmh-about__wrap { width: 100%; max-width: 1080px; margin-inline: auto; }
.dmh-about__breakout { width: 100%; max-width: 980px; margin-inline: auto; }
.dmh-about__prose { max-width: 680px; margin-inline: auto; }
.dmh-about__prose p { margin: 0 0 var(--sp-6); color: var(--fg-2); text-wrap: pretty; }
.dmh-about__prose p:last-child { margin-bottom: 0; }

/* Eyebrow — leading hairline; the --center modifier flanks both sides (hero). */
.dmh-about__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
  font-weight: var(--fw-semibold); color: var(--accent-bronze);
}
.dmh-about__eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--accent-bronze); opacity: 0.5;
}
.dmh-about__eyebrow--center { justify-content: center; }
.dmh-about__eyebrow--center::after {
  content: ""; width: 18px; height: 1px; background: var(--accent-bronze); opacity: 0.5;
}

/* Hero */
.dmh-about__hero { padding: var(--sp-8) 0 var(--sp-10); text-align: center; }
.dmh-about-h1 {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-weight: var(--fw-semibold);
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--fg-1); margin: var(--sp-5) 0 var(--sp-6);
}
.dmh-about__lede {
  max-width: 600px; margin: 0 auto;
  font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--fg-muted);
  text-wrap: pretty;
}
.dmh-about__hero-rule {
  width: 44px; height: 2px; background: var(--accent-bronze);
  margin: var(--sp-8) auto 0; border-radius: 2px;
}

/* Section heads */
.dmh-about__section { padding-block: var(--sp-10); }
.dmh-about__section--flush-bottom { padding-bottom: var(--sp-5); }
.dmh-about__section--flush-top { padding-top: var(--sp-4); }
.dmh-about__sec-head { margin-bottom: var(--sp-8); }
.dmh-about-h2 {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-weight: var(--fw-semibold);
  font-size: clamp(1.7rem, 3.2vw, 2.1rem);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--fg-1); margin: var(--sp-4) 0 0;
}

/* Mission & Vision placard (showpiece) */
.dmh-about-placard {
  max-width: 980px; margin: var(--sp-4) auto 0;
  background: linear-gradient(180deg, var(--accent-bronze-tint) 0%, var(--accent-bronze-soft) 100%);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: clamp(28px, 4vw, 52px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px);
  position: relative; overflow: hidden;
}
.dmh-about-placard::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../images/paper-grain.svg");
  opacity: 0.04; mix-blend-mode: multiply; pointer-events: none;
}
.dmh-about-placard__col { position: relative; }
.dmh-about-placard__col + .dmh-about-placard__col::before {
  content: ""; position: absolute; left: calc(-1 * clamp(14px, 2vw, 28px)); top: 4px; bottom: 4px;
  width: 1px; background: var(--border-warm);
}
.dmh-about-placard__label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--fw-bold); color: var(--accent-bronze);
  margin-bottom: var(--sp-5);
}
.dmh-about-placard__diamond {
  width: 9px; height: 9px; background: var(--accent-bronze);
  transform: rotate(45deg); border-radius: 1px;
}
.dmh-about-placard__statement {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-weight: var(--fw-medium);
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  line-height: 1.32; letter-spacing: var(--ls-tight); color: var(--fg-1);
  margin: 0;
}
.dmh-about-placard + .dmh-about__prose { margin-top: var(--sp-9); }
@media (max-width: 720px) {
  .dmh-about-placard { grid-template-columns: 1fr; gap: var(--sp-8); }
  .dmh-about-placard__col + .dmh-about-placard__col::before {
    left: 0; right: 0; top: calc(-1 * var(--sp-4)); bottom: auto; width: auto; height: 1px;
  }
}

/* Focus cards (what you will find here) */
.dmh-about-focus-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7);
  margin: var(--sp-7) auto 0; max-width: 980px;
}
.dmh-about-focus {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--sp-7);
}
.dmh-about-focus__num {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-bronze);
  letter-spacing: 0.1em; display: block; margin-bottom: var(--sp-4);
}
.dmh-about-focus__title {
  font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  color: var(--fg-1); margin: 0 0 var(--sp-4); line-height: var(--lh-snug);
}
.dmh-about-focus__body {
  margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-muted);
}
@media (max-width: 720px) { .dmh-about-focus-grid { grid-template-columns: 1fr; } }

/* Founder — landscape portrait + bio. Photo column is sized for a 3:2 image. */
.dmh-about-founder {
  display: grid; grid-template-columns: 440px 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: start; margin: var(--sp-4) auto 0; max-width: 980px;
}
.dmh-about-photo {
  aspect-ratio: 3 / 2; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-1);
  overflow: hidden;
}
.dmh-about-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dmh-about-founder__caption {
  margin-top: var(--sp-4); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--fg-muted);
}
.dmh-about-founder__caption b { color: var(--fg-1); font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.dmh-about-founder__body p { margin: 0 0 var(--sp-6); color: var(--fg-2); text-wrap: pretty; }
.dmh-about-founder__body p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .dmh-about-founder { grid-template-columns: 1fr; } }

/* Help cards (how you can help) */
.dmh-about-help-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6);
  margin: var(--sp-7) auto 0; max-width: 980px;
}
.dmh-about-help {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--sp-7);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.dmh-about-help:hover { box-shadow: var(--shadow-2); border-color: var(--border-warm); }
.dmh-about-help__icon {
  width: 40px; height: 40px; border-radius: var(--radius-btn);
  background: var(--accent-bronze-soft); color: var(--accent-bronze);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5);
}
.dmh-about-help__title {
  font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--fg-1); margin: 0 0 var(--sp-3); line-height: var(--lh-snug);
}
.dmh-about-help__body {
  margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-muted);
}
@media (max-width: 720px) { .dmh-about-help-grid { grid-template-columns: 1fr; } }

/* Contact / sign-off panel */
.dmh-about-contact {
  max-width: 820px; margin: var(--sp-9) auto 0; text-align: center;
  background: var(--bg-warm); border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px);
}
.dmh-about-contact p { margin: 0 0 var(--sp-5); font-size: var(--fs-md); color: var(--fg-2); }
.dmh-about-contact__mail {
  display: inline-block; font-family: var(--font-display); font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: var(--fw-semibold);
  color: var(--accent-bronze); text-decoration: none; letter-spacing: var(--ls-tight);
  transition: color var(--dur) var(--ease-out);
}
.dmh-about-contact__mail:hover { color: var(--accent-bronze-hover); }
.dmh-about-contact__rally {
  margin-top: var(--sp-7); font-size: var(--fs-lg); color: var(--fg-1); font-weight: var(--fw-medium);
}
.dmh-about-contact__signature {
  margin-top: var(--sp-7); font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-lg); color: var(--fg-muted); font-weight: var(--fw-regular);
}

/* Thin section dividers (centered, prose-width) */
.dmh-about__divider { height: 1px; background: var(--border-soft); max-width: 680px; margin: 0 auto; }

/* --- Tagging guide (public editorial / help page) ------------------------- */
/* Recreated from the design handoff, mirroring the About page. Lives inside the
   shared layout's .dmh-main, so it never re-declares the nav, footer, or page
   background. All visual values are tokens; the maturity-grid breakpoint (720px)
   is a component breakpoint, intentionally NOT the canonical filter breakpoint. */

/* Page-wide paper grain (see .dmh-about for the isolate rationale). */
.dmh-tg { position: relative; z-index: 0; isolation: isolate; }
.dmh-tg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("../images/paper-grain.svg");
  opacity: 0.035;
  mix-blend-mode: multiply;
  z-index: -1;
}

/* Layout rails — the shared .dmh-main already supplies the page gutter. */
.dmh-tg__wrap { width: 100%; max-width: 1080px; margin-inline: auto; }
.dmh-tg__prose { max-width: 680px; margin-inline: auto; }
.dmh-tg__prose p { margin: 0 0 var(--sp-6); color: var(--fg-2); text-wrap: pretty; }
.dmh-tg__prose p:last-child { margin-bottom: 0; }
.dmh-tg__prose--spaced { margin-top: var(--sp-7); }

/* Eyebrow — leading hairline; the --center modifier flanks both sides (hero). */
.dmh-tg__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
  font-weight: var(--fw-semibold); color: var(--accent-bronze);
}
.dmh-tg__eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--accent-bronze); opacity: 0.5;
}
.dmh-tg__eyebrow--center { justify-content: center; }
.dmh-tg__eyebrow--center::after {
  content: ""; width: 18px; height: 1px; background: var(--accent-bronze); opacity: 0.5;
}

/* Hero */
.dmh-tg__hero { padding: var(--sp-8) 0 var(--sp-10); text-align: center; }
.dmh-tg__title {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-weight: var(--fw-semibold);
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--fg-1); margin: var(--sp-5) 0 var(--sp-6);
}
.dmh-tg__lede {
  max-width: 620px; margin: 0 auto;
  font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--fg-muted);
  font-style: italic; text-wrap: pretty;
}
.dmh-tg__hero-rule {
  width: 44px; height: 2px; background: var(--accent-bronze);
  margin: var(--sp-8) auto 0; border-radius: 2px;
}

/* Section heads */
.dmh-tg__section { padding-block: var(--sp-10); }
.dmh-tg__section--flush-top { padding-top: var(--sp-4); }
.dmh-tg__sec-head { margin-bottom: var(--sp-7); }
.dmh-tg__h2 {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-weight: var(--fw-semibold);
  font-size: clamp(1.7rem, 3.2vw, 2.1rem);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--fg-1); margin: var(--sp-4) 0 0;
}

/* Inline category-name highlight (running text, not a chip) */
.dmh-tg__cat {
  font-weight: var(--fw-medium); color: var(--fg-1);
  border-bottom: 1px dotted var(--accent-bronze);
}

/* The five setting chips */
.dmh-tg__chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4);
  max-width: 680px; margin: var(--sp-7) auto 0;
}
.dmh-tg__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px;
  background: var(--surface); border: 1px solid var(--border-warm);
  border-radius: var(--radius-btn); box-shadow: var(--shadow-1);
  font-size: var(--fs-base); font-weight: var(--fw-semibold);
  color: var(--fg-1); letter-spacing: var(--ls-tight);
}
.dmh-tg__diamond {
  width: 8px; height: 8px; background: var(--accent-bronze);
  transform: rotate(45deg); border-radius: 1px; flex: none;
}

/* Decision list — numbered cards via a CSS counter (mono badge) */
.dmh-tg__decision {
  list-style: none; counter-reset: step;
  max-width: 720px; margin: var(--sp-7) auto 0; padding: 0;
  display: grid; gap: var(--sp-4);
}
.dmh-tg__decision li {
  counter-increment: step;
  display: grid; grid-template-columns: 42px 1fr; align-items: start; gap: var(--sp-5);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--sp-5) var(--sp-6);
}
.dmh-tg__decision li::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-bronze-soft); color: var(--accent-bronze);
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-bold);
}
.dmh-tg__decision li p {
  margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal);
  color: var(--fg-2); text-wrap: pretty;
}
.dmh-tg__answer { color: var(--fg-1); font-weight: var(--fw-semibold); }

/* Note / aside callout (the italic sidenotes) */
.dmh-tg__note {
  max-width: 680px; margin: var(--sp-7) auto 0;
  background: var(--bg-warm); border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-7);
}
.dmh-tg__note-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--fw-bold); color: var(--accent-bronze);
  margin-bottom: var(--sp-4);
}
.dmh-tg__note-label .dmh-tg__diamond { width: 9px; height: 9px; }
.dmh-tg__note p {
  margin: 0; font-style: italic; font-size: var(--fs-base);
  line-height: var(--lh-normal); color: var(--fg-2); text-wrap: pretty;
}

/* Maturity cards */
.dmh-tg__maturity-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  max-width: 980px; margin: var(--sp-7) auto 0;
}
.dmh-tg__mat-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--sp-7);
}
.dmh-tg__mat-card-top {
  display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4);
}
.dmh-tg__mat-card-title {
  font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--fg-1); margin: 0; line-height: var(--lh-snug);
}
.dmh-tg__age-badge {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.04em; color: var(--warning);
  background: var(--warning-soft); border: 1px solid var(--warning-border);
  padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap;
}
.dmh-tg__mat-card p {
  margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-muted);
}
@media (max-width: 720px) {
  .dmh-tg__maturity-grid { grid-template-columns: 1fr; }
}

/* Section dividers */
.dmh-tg__divider { height: 1px; background: var(--border-soft); max-width: 680px; margin: 0 auto; }

/* ===========================================================================
   Homepage — hero, browse directory, primary CTA band
   =========================================================================== */

.dmh-home-hero {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-10);
}
.dmh-home-hero__intro { flex: 1; min-width: 0; }
.dmh-home-hero__lede {
  max-width: 620px;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.dmh-home-hero__search {
  display: flex;
  gap: var(--sp-3);
  flex: none;
  width: 380px;
}
.dmh-home-hero__search .dmh-input-wrap { min-width: 0; }

@media (max-width: 839.98px) /* mobile breakpoint */ {
  .dmh-home-hero { flex-direction: column; align-items: stretch; gap: var(--sp-5); }
  .dmh-home-hero__search { width: 100%; }
}

/* --- Browse directory: Setting rows beside Category rows ------------------
   Rows must line up across BOTH columns, so the thumbnail strip is a
   fixed-width box sized off --home-thumb-size rather than by its contents. It
   is empty until the thumbnails land; reserving it now means they arrive
   without shifting anything. */
.dmh-home-dir {
  --home-thumb-size: 50px;
  --home-thumb-gap: var(--sp-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-11);
  align-items: start;
  margin-top: var(--sp-8);
}
.dmh-home-dir__eyebrow { margin: 0 0 var(--sp-2); }
.dmh-home-dir__row {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.dmh-home-dir__stretched {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
  color: transparent;
}
.dmh-home-dir__stretched:focus-visible {
  outline: 2px solid var(--accent-bronze);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.dmh-home-dir__row:last-child { border-bottom: 0; }
.dmh-home-dir__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--font-display-vars);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  transition: color var(--dur) var(--ease-out);
}
/* Always in flow, only faded — revealing it on hover must not move the row. */
.dmh-home-dir__hint {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--accent-bronze);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.dmh-home-dir__thumbs {
  display: flex;
  justify-content: flex-end;
  gap: var(--home-thumb-gap);
  width: calc(3 * var(--home-thumb-size) + 2 * var(--home-thumb-gap));
  flex: none;
}
.dmh-home-dir__thumb {
  position: relative;
  z-index: 2;
  width: var(--home-thumb-size);
  height: var(--home-thumb-size);
  flex: none;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-input);
  background: var(--bg-warm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.dmh-home-dir__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmh-home-dir__thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-bronze-ring);
}
.dmh-home-dir__thumb:focus-visible {
  outline: 2px solid var(--accent-bronze);
  outline-offset: 2px;
}

.dmh-home-dir__chev {
  margin-left: var(--sp-4);
  color: var(--fg-subtle);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dmh-home-dir__row:hover .dmh-home-dir__name { color: var(--accent-bronze); }
.dmh-home-dir__row:hover .dmh-home-dir__hint { opacity: 1; }
.dmh-home-dir__row:hover .dmh-home-dir__chev {
  color: var(--accent-bronze);
  transform: translateX(2px);
}

@media (max-width: 839.98px) /* mobile breakpoint */ {
  .dmh-home-dir {
    --home-thumb-size: 44px;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--sp-6);
  }
  .dmh-home-dir > * + * > .dmh-home-dir__eyebrow { margin-top: var(--sp-5); }
  .dmh-home-dir__name { font-size: var(--fs-lg); }
}

/* --- Primary CTA into the catalog. The page's one bronze band. ------------- */
.dmh-home-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-7);
  background: var(--accent-bronze);
  border-radius: var(--radius-md);
  color: var(--fg-on-accent);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out);
}
.dmh-home-band:hover { background: var(--accent-bronze-hover); color: var(--fg-on-accent); }
.dmh-home-band__label {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--font-display-vars);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
}

@media (max-width: 839.98px) /* mobile breakpoint */ {
  .dmh-home-band { padding: var(--sp-4) var(--sp-5); }
  .dmh-home-band__label { font-size: var(--fs-md); }
}

/* --- Hover card for a directory thumbnail. Lives on <body> (so no ancestor
   overflow clips it) and is placed by thumb_tooltip_controller. Kept in the
   layout at opacity 0 rather than display:none so the controller can measure
   it before deciding above-or-below. */
.dmh-home-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  max-width: 240px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.dmh-home-tip.is-visible { opacity: 1; }
.dmh-home-tip p { margin: 0; }
.dmh-home-tip__name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.dmh-home-tip__creator {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.dmh-home-tip__price {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

/* --- Spacing between the homepage's stacked content sections. ------------- */
.dmh-home-section { margin-top: var(--sp-11); }

@media (max-width: 839.98px) /* mobile breakpoint */ {
  .dmh-home-section { margin-top: var(--sp-9); }
}

/* --- Contribution nudge, closing the homepage above the footer. ------------ */
.dmh-home-help {
  margin-top: var(--sp-11);
  padding-top: var(--sp-9);
  border-top: 1px solid var(--border-soft);
  text-align: center;
}
.dmh-home-help__lede {
  max-width: 480px;
  margin: var(--sp-3) auto 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.dmh-home-help__links {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}

/* The feed card's bottom margin stacks its masonry column on /paintjobs; in the
   homepage grid the gap already does that. */
.dmh-home-feed .dmh-feedcard { margin-bottom: 0; }

/* --- Full-width homepage sections ----------------------------------------
   A section can only paint to the screen edges if nothing between it and
   <body> caps its width, so a page opting in drops .dmh-main's cap and each
   of its sections puts the cap back with .dmh-home-wrap. Vertical padding
   stays on .dmh-main either way. */
.dmh-main--full { max-width: none; padding-left: 0; padding-right: 0; }
.dmh-home-wrap {
  width: 100%;
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.dmh-home-warm {
  margin-top: var(--sp-11);
  padding: var(--sp-9) 0;
  background: var(--bg-warm);
  border-top: 1px solid var(--border-warm);
  border-bottom: 1px solid var(--border-warm);
}
.dmh-home-warm .dmh-home-section { margin-top: 0; }