[hidden] { display: none !important; }

/* Customer text can be any length, so nothing is allowed to push the page sideways. */
[data-story], .polaroid-face h3, .polaroid-letter p { overflow-wrap: anywhere; }
body .hero-title-lock h1 { max-width: 100%; }
.intro-phrase { font-style: italic; }

.photo-missing {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--color-paper-3);
  color: var(--color-ink);
  text-align: center;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Question flow */
.builder {
  display: flex;
  width: 100%;
  max-width: 32rem;
  min-height: 100svh;
  flex-direction: column;
  gap: var(--space-lg);
  margin-inline: auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.builder-progress { height: 3px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-rule); }
.builder-progress span { display: block; height: 100%; background: var(--color-accent); transition: width var(--dur-short) var(--ease-out); }

.builder .builder-question {
  max-width: none;
  margin-top: var(--space-md);
  font-size: clamp(2.25rem, 9vw, 3rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  outline: none;
}

.builder-lead { color: var(--color-ink-2); font-size: var(--text-lead); }
.builder-body { display: flex; flex-direction: column; gap: var(--space-md); }

.builder-actions { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: auto; }

#builder-banners { display: flex; flex-direction: column; }
.builder-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule-2);
  background: var(--color-paper-3);
  color: var(--color-ink);
  font-size: var(--text-sm);
}

/* Fields, shared with the edit sheet */
.field-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.field { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.field-label { color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-sm); }
.field-error { color: var(--color-error); font-family: var(--font-body); font-size: var(--text-sm); }
body:not(.dark-mode) .field-error { color: oklch(48% 0.18 27); }
.field-check { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-sm); }
.field-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-accent); }

.field input:not([type="checkbox"], [type="radio"], [type="file"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
}

.field input + input { margin-top: var(--space-2xs); }
.field textarea { resize: vertical; }
.field ::placeholder { color: var(--color-muted); }

.photo-picker {
  position: relative;
  display: flex;
  min-height: 9rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  overflow: hidden;
  padding: var(--space-sm);
  border: 1px dashed var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-body);
}
.photo-picker:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.photo-preview { max-height: 16rem; border-radius: var(--radius-card); object-fit: contain; }

.memory-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.memory-list li { display: flex; flex-direction: column; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); overflow-wrap: anywhere; }
.memory-list small { color: var(--color-muted); }

.track-list { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.track-option { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; font-family: var(--font-body); }
.track-option span { flex: 1; }

/* Buttons */
.btn-primary, .btn-quiet {
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
}
.btn-primary { border: 0; background: var(--color-accent); color: var(--color-accent-ink); }
.btn-quiet { border: 1px solid var(--color-rule-2); background: transparent; color: var(--color-ink); }
.btn-link { min-height: 44px; border: 0; background: transparent; color: var(--color-ink-2); cursor: pointer; font-family: var(--font-body); text-decoration: underline; text-underline-offset: 0.2em; }
.builder-secondary { display: flex; gap: var(--space-xs); }
.builder-secondary > * { flex: 1; }

/* The desktop page has its own fonts and rose palette, so its controls follow them. */
@media (min-width: 768px) {
  body.bg-cream { --font-display: "Playfair Display", "Noto Serif Devanagari", serif; --font-body: "Inter", "Noto Sans Devanagari", sans-serif; }
  body.bg-cream:not(.dark-mode) { --color-accent: #8F4D57; --color-accent-ink: #FFFFFF; --color-focus: #8F4D57; }
}

/* Reveal cover and "not published" screen */
.story-cover {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-paper);
  color: var(--color-ink);
  text-align: center;
}
.story-cover h1 { max-width: 20ch; margin: 0; font-family: var(--font-display); font-size: clamp(2.5rem, 10vw, 4rem); font-weight: 400; line-height: 1.05; }
.story-cover a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Bar on the finished page */
.story-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-sticky-nav);
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm) calc(var(--space-xs) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-rule-2);
  background: var(--color-paper);
}
.story-bar > * { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; min-width: 0; padding-inline: var(--space-sm); font-size: var(--text-sm); text-decoration: none; }
body.has-story-bar { padding-bottom: 4.5rem; }
body.has-story-bar .soundtrack-widget { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
.story-banner { position: fixed; top: 0; right: 0; left: 0; z-index: var(--z-sticky-nav); }

/* Edit mode */
body.is-editing [data-story], body.is-editing .polaroid-flip-card, body.is-editing .together-ticker {
  outline: 1px dashed var(--color-accent);
  outline-offset: 4px;
  cursor: pointer;
}
body.is-editing .story-card { opacity: 1; transform: none; }

.sheet {
  width: min(100%, 32rem);
  max-width: 100%;
  max-height: 90svh;
  margin: auto auto 0;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-md);
  border: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-paper);
  color: var(--color-ink);
}
.sheet::backdrop { background: oklch(4% 0.02 290 / 0.6); }
.sheet h2 { max-width: none; margin: 0 0 var(--space-md); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; line-height: 1.1; overflow-wrap: anywhere; }
.sheet-actions { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-lg); }
.sheet-actions .builder-secondary { width: 100%; }
@media (min-width: 768px) { .sheet { margin: auto; border-radius: var(--radius-card); } }

/* Used when storage is blocked, so the page can read the draft from this window. */
.reveal-frame { position: fixed; inset: 0; z-index: var(--z-modal); width: 100%; height: 100%; border: 0; background: var(--color-paper); }