/* find-a-film — Blue Hour (tokens v0.3)
   Cinematic minimalism: cool surfaces, warm punctuation. Type does the
   structure; the three accents each have one job. All values come from
   the --ff-* theme layer in tokens.css — this file references no raw
   colors, sizes, or radii. If a value is missing, add it to the theme
   layer, don't hardcode it here. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ff-page);
  color: var(--ff-text);
  font-family: var(--ff-body-font);
  font-size: var(--ff-body-size);
  line-height: var(--ff-body-leading);
}

.site-header,
main {
  max-width: var(--ff-measure);
  margin: 0 auto;
  padding: 0 var(--ff-gap);
}

.site-header {
  padding-top: var(--ff-page-top);
  padding-bottom: var(--ff-gap-tight);
}

h1 {
  font-family: var(--ff-display-font);
  font-size: var(--ff-h1-size);
  font-weight: var(--ff-h1-weight);
  line-height: var(--ff-h1-leading);
  letter-spacing: var(--ff-h1-tracking);
  text-wrap: balance;
  margin: 0;
  /* --leading-tight leaves no air under Syne descenders; half-step clears them */
  padding-bottom: var(--ff-gap-hairline);
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--ff-h1-size-wide); /* 56px — the Syne ceiling */
  }
}

.tagline {
  color: var(--ff-text-soft);
  margin: var(--ff-gap-tight) 0 0;
}

/* --- Beats --- */

.beat {
  margin-top: var(--ff-gap-beat);
}

.beat-prompt {
  display: block;
  font-family: var(--ff-display-font);
  font-size: var(--ff-prompt-size);
  font-weight: var(--ff-h1-weight);
  line-height: var(--ff-h1-leading);
  letter-spacing: var(--ff-h1-tracking);
  margin-bottom: var(--ff-gap-tight);
  padding: 0 0 var(--ff-gap-hairline);
}

.field-note {
  color: var(--ff-text-soft);
  font-size: var(--ff-meta-size);
  margin: var(--ff-gap-tight) 0 0;
}

/* Beat 1 — mood. "The text input for mood should dominate the
   viewport — it's the entire interaction model." */

textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--ff-surface);
  border: var(--ff-input-border);
  border-radius: var(--ff-radius);
  padding: var(--ff-gap);
  resize: vertical;
}

textarea::placeholder {
  color: var(--ff-text-soft);
}

textarea:focus-visible {
  outline: var(--ff-focus-ring-form); /* Periwinkle — an informational moment */
  outline-offset: var(--ff-focus-offset);
}

/* Beat 2 — services */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.beat-services .field-note {
  margin: 0 0 var(--ff-gap);
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--ff-gap-tight) var(--ff-gap);
}

.service-list label {
  display: flex;
  align-items: center;
  gap: var(--ff-gap-tight);
  min-height: var(--ff-touch-min);
  padding: var(--ff-gap-tight) var(--ff-gap-hairline);
  border-radius: var(--ff-radius);
  cursor: pointer;
}

.service-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ff-selected); /* Golden — the moment of choice */
}

.service-list input[type="checkbox"]:focus-visible {
  outline: var(--ff-focus-ring-form);
  outline-offset: var(--ff-focus-offset);
}

/* The button — .btn-primary: ink at rest, Golden on hover.
   Golden is earned; this is its one dominant use on the screen. */

.find-button {
  margin-top: var(--ff-gap-component);
  width: 100%;
  min-height: var(--ff-touch-min);
  font-family: var(--ff-body-font);
  font-size: var(--ff-meta-size);
  font-weight: 600;
  letter-spacing: var(--ff-label-tracking);
  text-transform: uppercase;
  color: var(--ff-btn-ink);
  background: var(--ff-btn-bg);
  border: var(--ff-btn-border);
  border-radius: var(--ff-radius);
  padding: var(--ff-gap-tight) var(--ff-pad-card);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-sharp),
              color var(--duration-fast) var(--ease-sharp);
}

.find-button:hover {
  background: var(--ff-btn-hover-bg);
  color: var(--ff-btn-hover-ink);
  border-color: var(--ff-btn-hover-bg);
}

.find-button:focus-visible {
  outline: var(--ff-focus-ring);
  outline-offset: var(--ff-focus-offset);
}

.find-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Beat 3: results --- */

.results {
  margin-top: var(--ff-gap-section);
  padding-bottom: var(--ff-gap-section);
}

.results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ff-gap);
  margin-bottom: var(--ff-gap-tight);
}

/* Eyebrow label */
.results-heading {
  color: var(--ff-text-soft);
  font-size: var(--ff-label-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ff-eyebrow-tracking);
  margin: 0;
}

/* Link — Periwinkle, never decorated at rest */
.start-over {
  font: inherit;
  font-size: var(--ff-meta-size);
  color: var(--ff-link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: text-decoration-color var(--duration-fast) var(--ease-sharp);
}

.start-over:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.start-over:focus-visible {
  outline: var(--ff-focus-ring);
  outline-offset: var(--ff-focus-offset);
}

.results-note {
  color: var(--ff-text-soft);
  margin: 0;
}

/* Errors are honest — and Alarm is theirs alone */
.results-note--error {
  color: var(--ff-error);
}

.results-section-heading {
  font-family: var(--ff-display-font);
  font-size: var(--ff-prompt-size);
  font-weight: var(--ff-h1-weight);
  line-height: var(--ff-h1-leading);
  letter-spacing: var(--ff-h1-tracking);
  margin: var(--ff-gap-component) 0 var(--ff-gap);
  padding-bottom: var(--ff-gap-hairline);
}

/* Mood result card — the app's primary content surface. Warm-tinted
   against the twilight, Peach accent: this is the emotional layer. */

.result-card {
  background: var(--ff-card-surface);
  border: 0;
  border-left: var(--ff-card-accent);
  border-radius: var(--ff-radius);
  padding: var(--ff-pad-card);
  display: flex;
  gap: var(--ff-gap);
  align-items: flex-start;
}

.result-card + .result-card {
  margin-top: var(--ff-gap);
}

.result-body {
  flex: 1;
  min-width: 0;
}

.result-poster {
  width: 92px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--ff-radius);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .result-poster {
    width: 68px;
  }
}

.result-title {
  font-size: var(--ff-title-size);
  font-weight: 600;
  margin: 0;
}

.result-meta {
  color: var(--ff-text-soft);
  font-weight: 400;
  font-size: var(--ff-meta-size);
}

.result-why {
  margin: var(--ff-gap-tight) 0 0;
}

/* The emotional lead-in carries the accent that names it */
.result-why strong {
  color: var(--ff-mood);
}

.result-availability {
  margin: var(--ff-gap) 0 0;
  color: var(--ff-text-soft);
  font-size: var(--ff-meta-size);
}

/* Neutral tag — thin border, rectangle. Not periwinkle: the card
   already carries Peach, and accents never share a component. */
.service-badge {
  display: inline-block;
  background: none;
  border: var(--ff-rule);
  color: var(--ff-text);
  border-radius: var(--ff-radius-badge);
  padding: var(--ff-gap-hairline) var(--ff-gap-tight);
  font-size: var(--ff-label-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ff-label-tracking);
  margin-right: var(--ff-gap-hairline);
}

/* Motion communicates or it doesn't exist */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}