/* ==========================================================================
   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__avatar[open] .dmh-nav__caret { transform: rotate(180deg); }

.dmh-nav__more,
.dmh-nav__avatar { position: relative; }
.dmh-nav__more summary,
.dmh-nav__avatar summary { list-style: none; }
.dmh-nav__more 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;
  padding: 8px 0 16px;
}
.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;
}
.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(2, 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__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); }

.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)); }
}
.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; }

/* --- 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; }
.dmh-feedcard__cover img { width: 100%; height: 100%; object-fit: cover; 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; }

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

/* My Suggestions tab strip */
.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 action footer on the review page: floats above the form so Save /
   Publish / Reject / Skip stay reachable at any scroll position. Positioning
   (sticky, bottom-0, z) comes from Tailwind utilities at the call site. */
.dmh-review-actionbar {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

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

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