/* Local additions to the existing Field notes layout. */
/* A compact paper HUD below 90rem; a margin note when the outer rail fits.
   Keep the HUD height stable as chapter labels wrap, including narrow phones. */
.chapter-note {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  box-sizing: border-box;
  height: calc(5rem + env(safe-area-inset-top));
  padding: calc(0.5rem + env(safe-area-inset-top)) max(1.5rem, calc((100% - 61rem) / 2), env(safe-area-inset-right)) 0.5rem max(1.5rem, calc((100% - 61rem) / 2), env(safe-area-inset-left));
  background: var(--c-paper);
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.chapter-note:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 1rem; align-items: center; }
.chapter-note__day, .chapter-note__label { display: block; }
.chapter-note__day { margin-bottom: 0.25rem; }
.chapter-note__day:empty { display: none; }
.chapter-note__map { display: block; width: 100%; height: auto; }
.chapter-note__map use, .chapter-note__map polyline { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chapter-note__remaining { stroke: var(--c-rule); }
.chapter-note__progress { stroke: var(--c-muted); }
.chapter-note__granada { fill: var(--c-muted); }
/* The 61rem media rail ends 30.5rem right of centre. Leave a 2rem gutter. */
@media (min-width: 90rem) {
  .chapter-note { top: 6rem; left: calc(50% + 32.5rem); right: auto; width: 10rem; height: auto; padding: 0; background: transparent; line-height: 1.7; }
  .chapter-note:not([hidden]) { display: block; }
  .chapter-note__map { margin-top: 1rem; }
  .chapter-note__map use, .chapter-note__map polyline { stroke-width: 1.5; }
}
@media print {
  .chapter-note:not([hidden]) { display: none; }
}

/* The shared navigation otherwise overflows a 320px phone and widens fixed UI. */
body > header > div { flex-wrap: wrap; gap: 0.75rem 1rem; }

.post-prose h2[id] { scroll-margin-top: calc(6rem + env(safe-area-inset-top)); }
@media (min-width: 90rem) {
  .post-prose h2[id] { scroll-margin-top: 1.5rem; }
}
.post-prose .leg-map svg { display: block; width: 100%; height: auto; }
.post-prose .leg-map figcaption span { display: block; margin-top: 0.5rem; }
.post-prose a:focus-visible { outline: 2px solid var(--c-strong); outline-offset: 4px; }

/* Charts, maps and explicitly wide media share the full content rail. */
.post-prose .photo-strip,
.post-prose .chart,
.post-prose .leg-map,
.post-prose .photo--wide,
.post-prose .video--wide {
  width: min(1100px, 61rem, calc(100vw - 3rem));
  margin: 2.25rem 0 2.5rem;
}
.post-prose .chart svg { display: block; width: 100%; height: auto; }
.post-prose .photo--wide img { width: 100%; height: auto; }
@media (max-width: 640px) {
  .post-prose .leg-map, .post-prose .photo--wide, .post-prose .video--wide { width: 100%; }
  .post-prose .chart { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post-prose .chart svg { min-width: 720px; }
}


.post-prose .accreditation-collage { scroll-margin-top: 1.5rem; }

/* Shared packing and accreditation strips: full frames and native scrolling. */
.post-prose .photo-strip__items {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--c-muted) transparent;
  margin-inline: -0.5rem;
  padding: 0.5rem;
}
.post-prose .photo-strip__items > * {
  display: block;
  flex: none;
  scroll-snap-align: start;
  border: 0;
}
.post-prose .photo-strip__items :is(img, video) {
  display: block;
  height: 14rem;
  width: auto;
  max-width: none;
  border-radius: 0.75rem;
}
.post-prose .photo-strip__items:focus-visible {
  outline: 2px solid var(--c-strong);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  /* Keep even the 16:9 briefing clip fully viewable on narrow phones. */
  .post-prose .photo-strip__items :is(img, video) { height: min(12rem, calc((100vw - 3rem) * 9 / 16)); }
}
@media print {
  .post-prose .photo-strip__items { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .post-prose .photo-strip__items > * { break-inside: avoid; }
  .post-prose .photo-strip__items :is(img, video) { height: 8rem; }
}

/* The plan timetable wraps independently of the scrollable elevation profile. */
.post-prose .plan-schedule { table-layout: fixed; margin: 2.25rem 0 2.5rem; font-size: 1.15rem; line-height: 1.45; }
.post-prose .plan-schedule caption { text-align: left; padding-bottom: 1rem; color: var(--c-strong); font-size: 1.35rem; font-weight: 500; }
.post-prose .plan-schedule th,
.post-prose .plan-schedule td { padding: 0.85rem 0; vertical-align: top; border-bottom: 1px solid var(--c-rule); }
.post-prose .plan-schedule thead th { padding-top: 0; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: var(--c-muted); }
.post-prose .plan-schedule th:first-child { width: 45%; }
.post-prose .plan-schedule tbody th { font-weight: 400; }
.post-prose .plan-schedule td { font-family: var(--font-mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.post-prose .plan-schedule th + th,
.post-prose .plan-schedule td { padding-left: 0.75rem; }
.post-prose .plan-schedule tbody tr:last-child > * { border-bottom: 0; }

/* A reading-column comparison, not a scaled-down chart. Native table headings
   preserve the night / plan / ride relationships on phones and without JS. */
.post-prose .night-comparison { table-layout: fixed; margin: 2.25rem 0 2.5rem; font-size: 1.15rem; line-height: 1.45; }
.post-prose .night-comparison caption { text-align: left; padding-bottom: 1rem; color: var(--c-strong); font-size: 1.35rem; font-weight: 500; }
.post-prose .night-comparison th,
.post-prose .night-comparison td { padding: 0.85rem 0; vertical-align: baseline; border-bottom: 1px solid var(--c-rule); }
.post-prose .night-comparison th { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: var(--c-muted); }
.post-prose .night-comparison thead th { padding-block: 0 0.65rem; }
.post-prose .night-comparison th:first-child { width: 4rem; }
.post-prose .night-comparison th + th,
.post-prose .night-comparison td { padding-left: 0.75rem; }
.post-prose .night-comparison td { color: var(--c-muted); }
.post-prose .night-comparison td:last-child { color: var(--c-strong); }
.post-prose .night-comparison small { margin-top: 0.15rem; letter-spacing: 0; }
.post-prose .night-comparison tbody tr:last-child > * { border-bottom: 0; }

/* Clips default to the reading column; .video--wide opts into the content rail. */
/* The frame clips the video and Safari's native control overlay to the same radius. */
.post-prose .video__frame { border-radius: 0.75rem; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); background: var(--c-paper-soft); }
.post-prose .video video { display: block; width: 100%; height: auto; }
/* Portrait loop sits in the reading column like a portrait photograph. */
.post-prose .video--loop { max-width: 28rem; }
.post-prose .figure-pair .video--loop { max-width: none; }
.post-prose .figure-pair video { width: 100%; height: auto; }
/* Match mixed-aspect media heights without cropping either frame. */
@media (min-width: 641px) {
  .post-prose .figure-pair:has(source[src="video/alboloduy-after-flat.mp4"]) { grid-template-columns: 4fr 3fr; }
  .post-prose .figure-pair:has(source[src="video/final-climb.mp4"]) { grid-template-columns: 3fr 4fr; }
}