:root {
  --ink: #4b3211;
  --ink-2: #5a3c14;
  --ink-3: #5c4526;
  --muted: #7d5a1f;
  --muted-2: #8a6620;
  --muted-3: #9a7a3e;
  --gold: #a9812f;
  --cream: #f6efdd;
  --cream-2: #fffdf7;
  --cream-3: #efe3c6;
  --card: #e7d5a8;
  --accent: #e7b24a;
  --ai: #f3dc94;
  --gold-grad: linear-gradient(135deg, #e9c877, #c89a3a);
  --gold-grad-soft: linear-gradient(135deg, #f0d585, #c89a3a);
  --gold-grad-muted: linear-gradient(135deg, #efe3c6, #dcc68f);
  --gold-grad-muted: linear-gradient(135deg, #efe3c6, #dcc68f);
  --foil-texture: url("../assets/images/foil-texture.png");
  --foil-tint: rgba(252, 248, 240, 0.76);
  --foil-tile: 840px;
  --bokeh-bg:
    radial-gradient(circle at 18% 24%, rgba(255, 228, 160, 0.62) 0%, transparent 44%),
    radial-gradient(circle at 82% 16%, rgba(255, 240, 195, 0.5) 0%, transparent 40%),
    radial-gradient(circle at 62% 78%, rgba(235, 195, 105, 0.38) 0%, transparent 46%),
    radial-gradient(circle at 10% 84%, rgba(255, 248, 220, 0.55) 0%, transparent 42%),
    radial-gradient(circle at 90% 68%, rgba(245, 210, 130, 0.42) 0%, transparent 44%),
    radial-gradient(circle at 48% 42%, rgba(255, 252, 235, 0.35) 0%, transparent 52%),
    linear-gradient(180deg, #f3e0a8 0%, #f8efd4 48%, #faf5e8 100%);
  --landing-bg: var(--bokeh-bg);
  --questions-bg: var(--bokeh-bg);
  --fav-bg: var(--bokeh-bg);
  --font-display: "Playfair Display", Georgia, serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Jost", system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --page-x: 20px;
  --app-max: 430px;
  /* Clearance for Safari's floating bottom toolbar. */
  --toolbar-clear: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

/*
  Immersive iOS Safari layout. Two rules drive everything here:

  1. The DOCUMENT must scroll (not an inner container), or Safari never
     collapses its chrome.
  2. Safari 26 tints its status bar / toolbar by sampling `background-color`
     and `backdrop-filter` of `position: fixed`/`sticky` elements near the
     viewport edges, and falls back to the html/body colour. It ignores
     `theme-color`. A full-viewport fixed layer therefore *guarantees* opaque
     bars — so all page artwork lives in normal flow instead, and the root
     colour is only a fallback.
*/
html {
  height: auto;
  /* Explicit colour: a transparent root falls back to white on iOS 26. */
  background-color: #f3e0a8;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  font-family: var(--font-ui);
  color: var(--ink);
  background-color: #f3e0a8;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

/* svh (not dvh) throughout: dvh changes every time Safari's bars collapse,
   which re-lays-out the full page mid-scroll and causes visible stutter.
   The document is never height-locked — body { overflow: hidden } stops
   Safari's chrome compositor from doing the right thing. */

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

input,
textarea,
select {
  font-size: 16px !important;
  touch-action: manipulation;
}

#app {
  position: relative;
  z-index: 1;
  width: 100%;
  background: transparent;
}

/* Each screen paints its own artwork in normal flow. The gradient occupies the
   first viewport and the trailing colour continues below it, so the page reads
   as one continuous surface all the way to both edges. */
.screen {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100svh;
}

#screen-detail { background-color: #4a3212; }

#screen-splash { background-color: #d8a838; }
#screen-landing {
  background-image: var(--landing-bg);
  background-color: var(--cream);
}
#screen-questions {
  background-image: var(--questions-bg);
  background-color: #c8912f;
}
#screen-results {
  background-image: var(--bokeh-bg);
  background-color: #faf5e8;
}
#screen-favorites {
  background-image: var(--fav-bg);
  background-color: var(--cream);
}

.screen-frame {
  width: 100%;
  max-width: var(--app-max);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  position: relative;
  /* Clear Safari's floating toolbar so the last cards aren't sitting under it */
  padding-bottom: calc(var(--safe-bottom) + var(--toolbar-clear));
}

.hidden { display: none !important; }

/* Foil texture + soft off-white wash (presentation card surfaces) */
.surface-foil {
  background-color: #faf6ee;
  background-image: linear-gradient(var(--foil-tint), var(--foil-tint)), var(--foil-texture);
  background-size: auto, var(--foil-tile) var(--foil-tile);
  background-repeat: repeat;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes softIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulseHint {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.fade-up { animation: fadeUp 0.6s ease both; }
.fade-up-fast { animation: fadeUp 0.45s ease both; }
.soft-in { animation: softIn 0.5s ease both; }

/* —— Splash —— */
#screen-splash {
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding-bottom: max(64px, calc(36px + var(--safe-bottom)));
}
/* Bleeds past the bottom toolbar so Safari's chrome samples actual video
   pixels rather than a flat fallback colour. */
#screen-splash video {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: calc(100% + var(--toolbar-clear));
  object-fit: cover;
}
.splash-hint {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  animation: pulseHint 2.2s ease-in-out infinite;
}
.splash-hint[hidden] { display: none !important; }
.splash-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
}
.splash-label {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(120, 80, 0, 0.5);
}

/* —— Shared chrome —— */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(14px, var(--safe-top)) var(--page-x) 12px;
}
.wordmark {
  text-align: center;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.wordmark--lg { font-size: 19px; }
.wordmark--sm { font-size: 14px; letter-spacing: 0.05em; }
.wordmark--sm .gemini,
.wordmark .gemini {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 3px;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 253, 247, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-btn--cream { background: var(--cream-3); }
.icon-btn--outline {
  background: transparent;
  color: var(--ink-2);
  border: 1.5px solid rgba(90, 60, 20, 0.38);
  box-shadow: none;
}
.spacer { width: 40px; flex-shrink: 0; }

.topbar--fav .row { display: flex; gap: 8px; }

/* —— Landing —— */

.hero {
  text-align: center;
  padding: 14px var(--page-x) 4px;
}
.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 8.5vw, 36px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #c89a3a;
  text-transform: none;
  text-shadow: none;
}
.hero p {
  margin: 10px 0 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 16px;
  color: #8a6620;
}

.toggle {
  display: flex;
  margin: 20px var(--page-x) 0;
  background: linear-gradient(180deg, #e8c56a 0%, #d4a84a 100%);
  border-radius: 30px;
  padding: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(120, 84, 20, 0.18);
}
.toggle button {
  flex: 1;
  border: none;
  border-radius: 26px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.toggle button.active {
  font-weight: 600;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(90, 60, 20, 0.18);
}

.search-bar {
  margin: 16px var(--page-x) 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 253, 247, 0.88);
  border: 1px solid rgba(169, 129, 47, 0.2);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 0 6px 18px rgba(120, 84, 20, 0.1);
}
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.search-bar input::placeholder { color: #b0a08a; }
.ask-btn {
  border: none;
  background: var(--gold-grad);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 11px;
  flex-shrink: 0;
}

.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px var(--page-x) 0;
}
.tile {
  position: relative;
  border: none;
  padding: 0;
  height: 140px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(120, 84, 20, 0.22);
  text-align: left;
  background: var(--card);
}
.tile .scrim { display: none; }
.tile .ai-pill { display: none; }
.tile-label {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  right: auto;
  width: max-content;
  max-width: calc(100% - 16px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(252, 246, 235, 0.94);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(90, 60, 20, 0.12);
}
.tile img,
.idea-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(40, 26, 8, 0.72) 0%, rgba(40, 26, 8, 0.05) 55%);
}
.scrim--idea {
  background: linear-gradient(to top, rgba(40, 26, 8, 0.8) 0%, rgba(40, 26, 8, 0) 54%);
}
.ai-pill {
  position: absolute;
  top: 9px;
  right: 9px;
  background: rgba(20, 14, 6, 0.55);
  color: var(--ai);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  padding: 3px 6px;
  border-radius: 20px;
  pointer-events: none;
}
.tile-label .star { font-size: 10px; color: var(--gold); }

.section-title {
  padding: 28px var(--page-x) 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: #c89a3a;
  text-align: left;
}

.filter-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 var(--page-x) 4px;
  scrollbar-width: none;
}
.filter-chip-row::-webkit-scrollbar { display: none; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid rgba(169, 129, 47, 0.32);
  border-radius: 22px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 253, 247, 0.82);
  color: var(--muted);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.filter-chip svg { flex-shrink: 0; opacity: 0.85; }
.filter-chip.active {
  background: #fff;
  border-color: rgba(169, 129, 47, 0.55);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(120, 84, 20, 0.1);
}

.masonry {
  columns: 2;
  column-gap: 12px;
  padding: 8px var(--page-x) 40px;
}
.idea-card {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 12px;
  border: none;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: var(--card);
  box-shadow: 0 8px 22px rgba(120, 84, 20, 0.14);
  text-align: left;
  cursor: pointer;
}
.idea-card--stacked {
  padding: 8px;
  overflow: hidden;
  background-image: linear-gradient(var(--foil-tint), var(--foil-tint)), var(--foil-texture);
  background-size: auto, var(--foil-tile) var(--foil-tile);
  background-color: #faf6ee;
}
.idea-card--stacked .idea-card__media {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(90, 60, 20, 0.12);
}
.idea-card--stacked .scrim { display: none; }
.idea-card--stacked .ai-pill { display: none; }
.idea-card--stacked .idea-card__caption {
  padding: 10px 12px 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #c89a3a;
  text-align: center;
}
.idea-card__media { position: relative; width: 100%; }
.idea-card__meta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  pointer-events: none;
}
.idea-card__cat {
  color: var(--ai);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.idea-card__title {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.fav-hit {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 14, 6, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}

/* —— Questions —— */
#screen-questions {
  display: flex;
  flex-direction: column;
}
#screen-questions .screen-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.query-chip-wrap {
  display: flex;
  justify-content: center;
  padding: 6px var(--page-x) 0;
}
.query-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.progress {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 22px 0 4px;
}
.progress span {
  height: 6px;
  border-radius: 6px;
  transition: all 0.3s;
}
.step-label {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.question-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 26px 40px;
}
.question-eyebrow {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 15px;
  color: #6f4d18;
  margin-bottom: 6px;
}
.question-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 29px;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}
.option-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 26px;
}
.option-btn {
  text-align: left;
  border: 1.5px solid rgba(90, 60, 20, 0.28);
  background: rgba(255, 253, 247, 0.72);
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(120, 84, 20, 0.1);
  transition: background 0.15s, border-color 0.15s;
}
.option-btn:hover,
.option-btn:focus-visible {
  background: var(--cream-2);
  border-color: #c89a3a;
}
.custom-row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 253, 247, 0.55);
  border: 1.5px dashed rgba(90, 60, 20, 0.3);
  border-radius: 16px;
  padding: 13px 16px;
  margin-top: 3px;
}
.custom-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  min-width: 0;
}
.custom-row button {
  border: none;
  background: none;
  padding: 2px;
  display: flex;
}

/* —— Results —— */
.results-header {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 0 var(--page-x) 12px;
}
.results-header .topbar { position: static; padding: max(14px, var(--safe-top)) 0 12px; }
.results-query {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: #c89a3a;
  margin: 14px 0 0;
}
.results-summary {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 15px;
  color: var(--muted-2);
  margin: 1px 0 0;
}
.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 14px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  white-space: nowrap;
  border: 1px solid rgba(169, 129, 47, 0.28);
  border-radius: 22px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 253, 247, 0.82);
  color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip.active {
  background: #fff;
  border-color: rgba(169, 129, 47, 0.55);
  color: var(--ink);
  font-weight: 600;
}

/* —— Favorites —— */
.fav-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: #c89a3a;
  margin: 8px 0 0;
  padding: 0 var(--page-x);
  text-align: center;
}
.fav-tabs {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 14px;
  padding: 0 var(--page-x);
  font-size: 13px;
}
.fav-tab {
  border: none;
  background: none;
  padding: 2px 0;
  color: var(--muted-3);
  border-bottom: 2px solid transparent;
}
.fav-tab.active {
  font-weight: 600;
  color: #c89a3a;
  border-bottom-color: #c89a3a;
}
.empty-fav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 80px 40px;
  text-align: center;
}
.empty-fav__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-fav h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}
.empty-fav p {
  margin: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 16px;
  color: var(--muted-2);
  max-width: 230px;
}
.cta-gold {
  margin-top: 6px;
  border: none;
  background: var(--gold-grad);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 26px;
}

/* —— Detail (card layout) —— */
#screen-detail {
  z-index: 2;
  animation: softIn 0.28s ease both;
  padding: max(10px, var(--safe-top)) 12px max(12px, var(--safe-bottom));
}

.detail-shell {
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: calc(100svh - max(10px, var(--safe-top)) - max(12px, var(--safe-bottom)));
}

.detail-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 18px 20px 22px;
  border-radius: 28px;
  background-color: #faf6ee;
  background-image: linear-gradient(var(--foil-tint), var(--foil-tint)), var(--foil-texture);
  background-size: auto, var(--foil-tile) var(--foil-tile);
  background-repeat: repeat;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 16px 48px rgba(20, 12, 4, 0.35);
}

.detail-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.detail-controls .row { display: flex; gap: 10px; }

.detail-head {
  text-align: center;
  padding: 4px 8px 14px;
}

.detail-cat {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.detail-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1.12;
  color: var(--ink);
  margin: 8px 0 0;
}

/* Image is the hero — no scrim, no gradient, no overlay */
.detail-media {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(90, 60, 20, 0.18);
  line-height: 0;
}

.detail-media img {
  position: static;
  width: 100%;
  height: auto;
  max-height: min(58vh, 520px);
  object-fit: cover;
  display: block;
}

.detail-desc {
  font-family: var(--font-accent);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 16px 0 0;
  text-align: center;
  padding: 0 4px;
}

.detail-actions {
  margin-top: auto;
  padding-top: 20px;
}

.detail-actions .fav-cta {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  font-weight: 600;
  padding: 18px 0;
}
.fav-cta {
  width: 100%;
  border: none;
  border-radius: 30px;
  padding: 17px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(160, 120, 30, 0.35);
  background: var(--gold-grad-soft);
}
.fav-cta.saved { background: var(--gold-grad-muted); }

.topbar,
.hero,
.toggle,
.search-bar,
.tile-grid,
.section-title,
.masonry,
.results-header,
.fav-title,
.fav-tabs,
.question-block,
.query-chip-wrap {
  max-width: 100%;
  box-sizing: border-box;
}

.tile-grid,
.masonry {
  width: 100%;
  box-sizing: border-box;
}

.tile,
.idea-card {
  max-width: 100%;
  min-width: 0;
}

/* ——————————————————————————————————————————————
   Wider screens. The phone layout is the base; these widen the content
   column, add grid/masonry columns and scale the display type up.
   —————————————————————————————————————————————— */

/* Tablet */
@media (min-width: 700px) {
  :root {
    --page-x: 32px;
    --app-max: 760px;
    /* Desktop browsers have no floating toolbar to clear */
    --toolbar-clear: 24px;
  }

  .hero { padding: 26px var(--page-x) 8px; }
  .hero h1 { font-size: clamp(38px, 5.4vw, 48px); }
  .hero p { font-size: 20px; }

  /* Controls shouldn't stretch the full column width */
  .toggle,
  .search-bar { max-width: 520px; margin-inline: auto; }

  /* Both tile sets hold exactly four, so four across avoids an orphan row */
  .tile-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .tile { height: 150px; }
  .tile-label { font-size: 13px; }

  .masonry { columns: 3; column-gap: 16px; }
  .idea-card { margin-bottom: 16px; }
  .idea-card__title { font-size: 15px; }

  .section-title { font-size: 28px; padding-top: 34px; }
  .results-query { font-size: 32px; }
  .fav-title { font-size: 36px; }

  .question-block { padding: 0 var(--page-x) 48px; }
  .question-block > * { max-width: 620px; margin-inline: auto; width: 100%; }
  .question-text { font-size: 36px; }

  .detail-shell { max-width: 520px; }
  .detail-title { font-size: 34px; }
  .detail-media img { max-height: min(52vh, 480px); }
  .detail-desc { font-size: 17px; }
}

/* Desktop */
@media (min-width: 1080px) {
  :root {
    --page-x: 48px;
    --app-max: 1120px;
  }

  .hero h1 { font-size: clamp(48px, 4.2vw, 58px); }

  .tile-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .tile { height: 196px; }

  .masonry { columns: 4; column-gap: 18px; }
  .idea-card { margin-bottom: 18px; }

  .section-title { font-size: 32px; }
  .detail-shell { max-width: 560px; }
  .detail-media img { max-height: min(54vh, 520px); }
}