: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);
  --landing-bg: radial-gradient(130% 62% at 50% 0%, #f3db8d 0%, #e6bf5c 30%, #d6a53e 56%, #f6efdd 82%);
  --questions-bg: radial-gradient(130% 60% at 50% 0%, #f2d888 0%, #e3bc57 34%, #d3a13c 62%, #c8912f 100%);
  --fav-bg: radial-gradient(130% 55% at 50% 0%, #f0d47f 0%, #e0b855 34%, #f6efdd 74%);
  --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;
  /* Height of the scroll runway above the app, and how far edge artwork
     bleeds upward to fill it. */
  --runway: 64px;
  /* 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: #f3db8d;
}

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: #f3db8d;
  -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. */

#scroll-runway {
  height: var(--runway);
  /* Colour is set per screen from JS to match that screen's top edge, so the
     strip is invisible if it is ever revealed. */
}

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-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-color: var(--cream); }
#screen-favorites {
  background-image: var(--fav-bg);
  background-color: var(--cream);
}
#screen-detail { 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; }

@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 up over the runway and down past the toolbar so Safari's chrome
   samples actual video pixels instead of a flat fallback colour. */
#screen-splash video {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--runway));
  z-index: 0;
  width: 100%;
  height: calc(100% + var(--runway) + 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); }
.spacer { width: 40px; flex-shrink: 0; }

/* —— Landing —— */

.hero {
  text-align: center;
  padding: 14px var(--page-x) 4px;
}
.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 9vw, 38px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hero p {
  margin: 8px 0 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 17px;
  color: #6f4d18;
}

.toggle {
  display: flex;
  margin: 18px var(--page-x) 0;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  padding: 5px;
  box-shadow: inset 0 0 0 1px rgba(148, 110, 40, 0.25);
}
.toggle button {
  flex: 1;
  border: none;
  border-radius: 24px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--muted);
  transition: box-shadow 0.2s, background 0.2s;
}
.toggle button.active {
  font-weight: 600;
  background: var(--gold-grad);
  color: var(--ink);
  box-shadow: 0 3px 8px rgba(120, 84, 20, 0.25);
}

.search-bar {
  margin: 14px var(--page-x) 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream-2);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 0 6px 18px rgba(120, 84, 20, 0.14);
}
.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: 132px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(120, 84, 20, 0.2);
  text-align: left;
  background: var(--card);
}
.tile img,
.idea-card img,
.detail-hero 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 {
  position: absolute;
  left: 11px;
  bottom: 11px;
  right: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.tile-label .star { font-size: 11px; }

.section-title {
  padding: 26px var(--page-x) 6px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
}

.masonry {
  columns: 2;
  column-gap: 12px;
  padding: 6px var(--page-x) 40px;
}
.idea-card {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 12px;
  border: none;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--card);
  box-shadow: 0 6px 16px rgba(120, 84, 20, 0.16);
  text-align: left;
}
.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: var(--ink);
  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: none;
  border-radius: 22px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--cream-3);
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
}
.chip.active {
  background: var(--ink);
  color: var(--ai);
}

/* —— Favorites —— */
.fav-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin: 12px 0 0;
  padding: 0 var(--page-x);
}
.fav-tabs {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  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: var(--ink);
  border-bottom-color: var(--ink);
}
.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 —— */
#screen-detail {
  z-index: 2;
  animation: softIn 0.28s ease both;
}
.detail-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: max(14px, var(--safe-top)) 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.detail-controls > * { pointer-events: auto; }
.detail-controls .row { display: flex; gap: 10px; }
.detail-controls .icon-btn {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.detail-hero {
  position: relative;
  height: min(520px, 58vh);
}
/* Same upward bleed as the splash video, so the hero shows behind the status bar */
.detail-hero img,
.detail-hero .scrim {
  top: calc(-1 * var(--runway));
  height: calc(100% + var(--runway));
}
.detail-hero .ai-pill {
  top: 14px;
  right: 66px;
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 5px 9px;
}
.detail-hero .scrim {
  background: linear-gradient(
    to bottom,
    rgba(40, 26, 8, 0.35) 0%,
    rgba(40, 26, 8, 0) 22%,
    rgba(40, 26, 8, 0) 62%,
    rgba(246, 239, 221, 1) 100%
  );
}
.detail-body {
  padding: 4px 24px calc(130px + var(--toolbar-clear));
  margin-top: -8px;
  position: relative;
  background: var(--cream);
}
.detail-cat {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.detail-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.08;
  color: var(--ink);
  margin: 6px 0 0;
}
.detail-desc {
  font-family: var(--font-accent);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 14px 0 0;
}
.product-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--cream-2);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(120, 84, 20, 0.1);
}
.product-chip__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--gold-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.product-chip__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.product-chip__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
/* The fixed element itself MUST stay free of background-color/backdrop-filter:
   Safari 26 would sample it and tint its own toolbar to match. The fade lives
   on an absolutely-positioned child, which the tinting algorithm skips. */
.detail-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--app-max);
  z-index: 10;
  padding: 16px 24px calc(var(--safe-bottom) + var(--toolbar-clear));
  background-color: transparent;
}
.detail-bar__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--cream) 72%, rgba(246, 239, 221, 0));
}
.detail-bar .fav-cta {
  position: relative;
  z-index: 1;
}
.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;
}

@media (min-width: 768px) {
  .screen-frame {
    max-width: var(--app-max);
  }
}