/* Visual refinement layer. Load after styles.css; collection state is set by app.js. */
:root {
  --radius: 16px;
  --button-radius: 10px;
  --purple: #7355a1 !important;
  --purple-dark: #573c83 !important;
  --lilac: #f0eaf6 !important;
  --lilac-strong: #e5daef !important;
  --glow-a: #ded2eb !important;
  --glow-b: #eadde4 !important;
  --action-ink: #fffaf9;
  --action-hover: #62458f;
  --shadow-soft: 0 1px 3px #3b284409;
  --shadow-lift: 0 5px 16px #3b284414;
}

html[data-scheme="dark"] {
  --purple: #bca4ed !important;
  --purple-dark: #d5c6f4 !important;
  --lilac: #2b2437 !important;
  --lilac-strong: #382d46 !important;
  --glow-a: #6b5789 !important;
  --glow-b: #8a607a !important;
  --action-ink: #241733;
  --action-hover: #cbb6f3;
  --shadow-soft: 0 1px 3px #0003;
  --shadow-lift: 0 5px 16px #0004;
}

/* Keep the large surfaces neutral; member colors stay in small accents. */
.ambient-glow { opacity: .3 !important; }
.gallery-heading { background: none; }
.gallery-heading::before { opacity: .8; }
.daily-pick,
html[data-scheme="dark"] .daily-pick {
  background: var(--card);
  border-color: var(--line);
}
.member-button.active,
.pair-button.active,
html[data-scheme="dark"] .member-button.active,
html[data-scheme="dark"] .pair-button.active {
  background: var(--lilac);
  color: var(--purple-dark);
}
.member-button.active { border-color: var(--line-strong); }
.member-button.active .avatar { box-shadow: 0 0 0 2px var(--member-color, var(--purple)); }
.avatar { aspect-ratio: 1; flex-shrink: 0; }

/* A restrained shape vocabulary: cards, controls, then filter pills. */
.wallpaper-card,
.daily-pick,
.hs-slide,
.period-option,
.install-hint { border-radius: 16px; }
.nav-link,
.saved-header,
.search-form > button,
.download-button,
.share-button,
.share-ghost,
.sheet-apply,
.sheet-reset,
.daily-actions button,
.pagination button,
.toggle-eras,
.filter-selects select,
.clear-favorites,
.day-go,
.scheme-seg button { border-radius: var(--button-radius); }
.search-form { border-radius: 14px; }
.orientation-control,
.orient-quick { border-radius: 12px; }
.orientation-control > button,
.orient-quick > button { border-radius: 9px; }
.hero-tags > button,
.era-chip,
.era-more-hint,
.pair-button { border-radius: 999px; }
.wallpaper-card,
.daily-pick,
.hs-slide { box-shadow: none; }
.wallpaper-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
}
.search-form { box-shadow: none; }
.search-form:focus-within,
html[data-scheme="dark"] .search-form:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--lilac);
}

/* Search and downloads lead; browsing controls remain quiet. */
.search-form > button,
.download-button,
.sheet-apply {
  background: var(--purple) !important;
  color: var(--action-ink) !important;
  border-color: var(--purple);
  box-shadow: none;
  font-weight: 600;
}
.search-form > button:hover,
.download-button:hover,
.sheet-apply:hover { background: var(--action-hover) !important; }
.era-chip.active,
.pagination button.current,
html[data-scheme="dark"] .era-chip.active,
html[data-scheme="dark"] .pagination button.current {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--action-ink);
  box-shadow: none;
}
.daily-view,
.daily-random,
.share-button,
.share-ghost,
.sheet-reset,
html[data-scheme="dark"] .daily-view,
html[data-scheme="dark"] .daily-random,
html[data-scheme="dark"] .share-button,
html[data-scheme="dark"] .share-ghost {
  background: var(--lilac);
  color: var(--purple-dark);
  border-color: transparent;
  box-shadow: none;
}
.daily-view:hover,
.daily-random:hover,
.share-button:hover,
.share-ghost:hover,
html[data-scheme="dark"] .daily-view:hover,
html[data-scheme="dark"] .daily-random:hover,
html[data-scheme="dark"] .share-button:hover,
html[data-scheme="dark"] .share-ghost:hover { background: var(--lilac-strong); }
.saved-header { background: transparent; box-shadow: none; }
.scheme-seg button.on,
html[data-scheme="dark"] .scheme-seg button.on {
  background: var(--purple);
  color: var(--action-ink);
}

/* Collection browsing starts with useful controls, not the home-page introduction. */
body.collection-focused .hero {
  display: block;
  min-height: 0;
  padding-top: 24px;
  padding-bottom: 22px;
  overflow: visible;
}
body.collection-focused .hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 0;
}
body.collection-focused .hero-copy > .eyebrow,
body.collection-focused .hero h1,
body.collection-focused .hero-copy > p,
body.collection-focused .hero-tags,
body.collection-focused .hero-collage,
body.collection-focused .hero-slider { display: none !important; }
body.collection-focused .day-banner { grid-column: 1 / -1; margin: 0; }
body.collection-focused .search-form { width: 100%; max-width: none; margin: 0; }
body.collection-focused .daily-pick {
  max-width: none;
  margin: 0;
  padding: 7px 10px 7px 7px;
  gap: 10px;
  flex-wrap: nowrap;
}
body.collection-focused .daily-thumb { width: 38px; height: 50px; border-radius: 10px; }
body.collection-focused .daily-label { font-size: 10.5px; letter-spacing: .06em; }
body.collection-focused .daily-title { font-size: 14px; }
body.collection-focused .daily-sub { display: none; }
body.collection-focused .daily-actions { flex: 0 0 auto; flex-direction: row; gap: 5px; }
body.collection-focused .daily-actions > button { min-height: 36px; padding: 4px 10px; font-size: 12px; }
body.collection-focused .garden-shell { padding-top: 0; }

@media (max-width: 900px) {
  body.collection-focused .hero { padding-top: 18px; padding-bottom: 10px; }
  body.collection-focused .hero-copy { display: block; }
  body.collection-focused .daily-pick { margin-top: 10px; }
  body.collection-focused .daily-actions { flex-direction: row; }
  body.collection-focused .daily-actions > button { min-height: 36px; }
}

@media (max-width: 650px) {
  /* The absolute second header row occupies 48px; leave 16px after it. */
  body.collection-focused .hero { padding-top: 64px !important; padding-bottom: 6px; }
  body.collection-focused .search-form { gap: 9px; padding-left: 12px; }
  body.collection-focused .search-form input { font-size: 14px; }
  body.collection-focused .search-form > button { padding-inline: 14px; }
  body.collection-focused .daily-pick { padding: 6px 8px 6px 6px; gap: 9px; }
  body.collection-focused .daily-thumb { width: 34px; height: 44px; }
  body.collection-focused .daily-text { flex: 1 1 0; min-width: 0; }
  body.collection-focused .daily-title { font-family: var(--sans); font-size: 13px; }
  body.collection-focused .daily-actions { flex: 0 0 auto; }
  body.collection-focused .daily-actions > button { flex: 0 0 auto; min-height: 36px; padding: 6px 10px; }
  body.collection-focused .daily-actions > .daily-view {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    min-width: 36px;
    padding: 0;
    font-size: 0;
  }
  body.collection-focused .daily-view::after { content: "↗"; font-size: 18px; }
}

@media (max-width: 370px) {
  body.collection-focused .search-form { gap: 7px; }
  body.collection-focused .search-form > button { padding-inline: 11px; }
  body.collection-focused .daily-label { font-size: 10px; letter-spacing: 0; }
  body.collection-focused .daily-actions > .daily-random { padding-inline: 8px; font-size: 11.5px; }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .wallpaper-card:hover { transform: none; }
}