/* REONE UI polish: progressive enhancements layered after the core system. */
.site-header {
  transition: height var(--dur-2) var(--ease), padding var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.site-header.is-scrolled {
  --header-h: 66px;
  box-shadow: 0 8px 28px rgba(13, 13, 15, .08);
}
.site-header.is-scrolled .brand-mark { transform: scale(.9); }
.brand-mark { transition: transform var(--dur-2) var(--ease); }
.desktop-nav > a { position: relative; }
.desktop-nav > a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -9px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease);
}
.desktop-nav > a.is-current { color: var(--ink); opacity: 1; }
.desktop-nav > a.is-current::after { transform: scaleX(1); }
.mobile-nav a.is-current { color: var(--brand-ink); background: var(--brand-soft); }

/* Stability first: do not use content-visibility on public marketplace sections.
   iOS Safari and embedded Safari views can intermittently leave contained
   sections unpainted after reload, back-forward cache restore, or scroll
   restoration. Keeping normal layout/paint makes the page deterministic. */

/* The old Browse / Match / Ask AI mobile quick bar is intentionally retired.
   Keep this guard so a bfcache-restored DOM cannot flash the legacy control. */
.mobile-action-bar { display: none !important; }

/* Make "Show all units" a clear recovery action whenever a filter is active. */
#units #clear-search:not([hidden]) {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--brand-ink);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}
#units #clear-search:not([hidden]):hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

@media (max-width: 820px) {
  #units #clear-search:not([hidden]) { min-height: 44px; padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .brand-mark, .desktop-nav > a::after { transition: none; }
}