/* FamilyTrip refresh, November 2026: clearer day notes, a tidier map column and calmer day headers.
   Styling only, on screen only: the page structure, printing and the PDF export are unchanged. Colours and type come
   from the planner's own tokens (pine, sun, clay, coral, sky on ivory). */
@media screen {
  :root {
    --rf-ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4.6a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8ZM13.3 17h-2.6v-6.2h2.6Z'/%3E%3C/svg%3E");
    --rf-ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1.2 10.5 3.6 2.1-1.2 2-4.8-2.8V6h2.4Z'/%3E%3C/svg%3E");
    --rf-ic-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.7 14.6A8.6 8.6 0 0 1 9.4 3.3 9 9 0 1 0 20.7 14.6Z'/%3E%3C/svg%3E");
    --rf-ic-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2.5A1.5 1.5 0 0 1 21 5.5v14A1.5 1.5 0 0 1 19.5 21h-15A1.5 1.5 0 0 1 3 19.5v-14A1.5 1.5 0 0 1 4.5 4H7Zm12 7H5v10h14Z'/%3E%3C/svg%3E");
    --rf-ic-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5h15A1.5 1.5 0 0 1 21 6.5V10a2 2 0 0 0 0 4v3.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5V14a2 2 0 0 0 0-4Zm7 1.5v2h2V8Zm0 4v2h2v-2Zm0 4v1h2v-1Z'/%3E%3C/svg%3E");
    --rf-ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22Zm-1.3 6.5h2.6v6.3h-2.6Zm1.3 8.2a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Z'/%3E%3C/svg%3E");
  }

  /* Day header: the date reads as a heading, the day's length as a quiet pill. */
  article.day .day-h { padding-bottom: 14px; border-bottom: 1px solid var(--line, #E3DACB); }
  article.day .day-h h2 { letter-spacing: -.01em; }
  article.day .day-h .meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--soft, #F3ECDF); color: var(--muted, #5B6578); font-size: .84rem; line-height: 1.35; }

  /* Day notes: one calm card per note, with an icon and an accent for its kind, instead of identical beige blocks. */
  html body article.day :not(li) > p.warn.warn, html body article.day :not(li) > p.note.note.visit-evidence, html body article.day :not(li) > p.note.note:not(:empty) {
    --rf-accent: var(--sun, var(--wl-lantern,#c8a46a)); --rf-icon: var(--rf-ic-info);
    position: relative; margin: 12px 18px 0; padding: 11px 16px 11px 46px;
    border: 1px solid var(--line, #E3DACB); border-left: 4px solid var(--rf-accent); border-radius: 14px;
    background: var(--paper, #FFFFFF); color: var(--ink, var(--wl-ink,#0e1a2b)); font-size: .9rem; line-height: 1.5;
    box-shadow: 0 1px 2px rgba(22,36,58,.04);
  }
  html body article.day :not(li) > p.warn.warn::before, html body article.day :not(li) > p.note.note.visit-evidence::before, html body article.day :not(li) > p.note.note:not(:empty)::before {
    content: ""; position: absolute; left: 16px; top: 12px; width: 18px; height: 18px;
    background: var(--rf-accent); -webkit-mask: var(--rf-icon) center / contain no-repeat; mask: var(--rf-icon) center / contain no-repeat;
  }
  html body article.day :not(li) > p.warn.warn.hours-unknown { --rf-accent: var(--ft-sky, #5FA8C8); --rf-icon: var(--rf-ic-clock); }
  html body article.day :not(li) > p.warn.warn.park-pace-note { --rf-accent: var(--pine, var(--wl-teal-ink,#7d5e2a)); --rf-icon: var(--rf-ic-ticket); }
  html body article.day :not(li) > p.warn.warn.evening-stretch { --rf-accent: var(--pine, var(--wl-teal-ink,#7d5e2a)); --rf-icon: var(--rf-ic-moon); }
  html body article.day :not(li) > p.warn.warn.observance-note, html body article.day :not(li) > p.warn.warn.holiday-note { --rf-accent: var(--ft-clay, #C99069); --rf-icon: var(--rf-ic-calendar); }
  html body article.day :not(li) > p.note.note { --rf-accent: var(--ft-sky, #5FA8C8); color: var(--muted, #5B6578); }
  html body article.day :not(li) > p.warn.warn b, html body article.day :not(li) > p.note.note b { color: var(--ink, var(--wl-ink,#0e1a2b)); }
  html body article.day :not(li) > p.warn.warn + .day-body, html body article.day :not(li) > p.note.note + .day-body { margin-top: 14px; }

  /* A closure or missed time on a stop stands out as a problem, not as another note. */
  html body article.day li.stop p.alert.alert {
    position: relative; margin: 8px 0 0; padding: 9px 12px 9px 38px; border-radius: 12px;
    background: rgba(180, 67, 46, .07); border: 1px solid rgba(180, 67, 46, .22); color: var(--alert, #B4432E); font-weight: 600; font-size: .88rem;
  }
  html body article.day li.stop p.alert.alert::before {
    content: ""; position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--rf-ic-alert) center / contain no-repeat; mask: var(--rf-ic-alert) center / contain no-repeat;
  }

  /* The day map stays beside the stops as you scroll, rather than sitting on top of a tall empty column. */
  article.day .day-body > figure.mini { align-self: start; position: sticky; top: 84px; background: transparent; border-radius: 16px; }
  article.day .day-body > figure.mini .map-canvas { width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(22,36,58,.10); border: 1px solid var(--line, #E3DACB); }
  article.day .day-body > figure.mini figcaption.cap { padding: 8px 2px 0; font-size: .78rem; color: var(--muted, #5B6578); }

  /* Kids' challenge and day actions: lighter, so the plan itself leads. */
  article.day details.kids-challenge { border-radius: 14px; }
  article.day details.kids-challenge > summary { cursor: pointer; }
  article.day .add-row { gap: 8px; }
}

/* Cinematic layer: the trip opens like a film and each day like a chapter. Screen only; still for reduced motion. */
@media screen {
  /* The hero photo drifts slowly, like an opening shot. */
  html body section.hero-trip.photo { background-size: cover; animation: rf-drift 38s ease-in-out infinite alternate; }
  @keyframes rf-drift { from { background-position: 46% 42%; } to { background-position: 56% 58%; } }

  /* Each day is a chapter: a large day number, and the day's first photo washed in behind the header. */
  #pane { counter-reset: rf-day; }
  html body article.day { counter-increment: rf-day; }
  html body article.day .day-h { position: relative; overflow: hidden; isolation: isolate; min-height: 96px; padding-right: 120px; }
  html body article.day .day-h::after {
    content: counter(rf-day, decimal-leading-zero); position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    font-family: var(--display, "Instrument Serif", Georgia, serif); font-size: 4.4rem; line-height: 1; letter-spacing: -.04em;
    color: var(--pine, var(--wl-teal-ink,#7d5e2a)); opacity: .14; pointer-events: none; z-index: 0;
  }
  html body article.day.rf-has-photo > .day-h::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(251, 247, 239, .97) 0%, rgba(251, 247, 239, .9) 46%, rgba(251, 247, 239, .55) 78%, rgba(251, 247, 239, .35) 100%), var(--rf-day-photo) center / cover no-repeat;
  }
  html body article.day.rf-has-photo > .day-h::after { color: #fff; opacity: .55; text-shadow: 0 2px 18px rgba(12,20,36,.35); }

  /* A journey line joins the numbered stops, so the day reads as one route. */
  html body article.day ol.stops { position: relative; }
  html body article.day ol.stops::before {
    content: ""; position: absolute; left: 15px; top: 22px; bottom: 22px; width: 0;
    border-left: 2px dashed rgba(35,102,95,.22); z-index: 0; pointer-events: none;
  }
  html body article.day ol.stops > li.stop::before { z-index: 1; box-shadow: 0 0 0 4px var(--bg, #FBF7EF); }

  /* Days further down rise gently into view (only once the cinematic script runs and motion is welcome). */
  html.rf-cine article.day.rf-pending { opacity: 0; transform: translateY(22px); }
  html.rf-cine article.day.rf-pending.rf-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
}
@media (prefers-reduced-motion: reduce) {
  html body section.hero-trip.photo { animation: none; }
  html.rf-cine article.day.rf-pending { opacity: 1; transform: none; }
}
@media print {
  html.rf-cine article.day.rf-pending { opacity: 1 !important; transform: none !important; }
}

@media screen and (max-width: 720px) {
  html body article.day .day-h { padding-right: 78px; min-height: 80px; }
  html body article.day .day-h::after { font-size: 3rem; right: 14px; }
  html body article.day :not(li) > p.warn.warn, html body article.day :not(li) > p.note.note.visit-evidence, html body article.day :not(li) > p.note.note:not(:empty) { margin: 10px 12px 0; }
  article.day .day-body > figure.mini { position: static; }
}