/* The flat reading view (PCB-21): a published story as an article on paper. PCB-39, loaded
   after public.css. `static/renderer/flat.bundle.js` binds to `a.flat-media`,
   `[data-flat-gallery]`, `.flat__text` and `.flat__chapter`, and creates `.flat-quote`:
   keep those five whatever else changes. The page is complete before the script runs. */

.flat { max-width: 42rem; margin: 0 auto; }

.flat__head { padding-bottom: var(--ss-space-8); border-bottom: 1px solid var(--ss-line); }
.flat__title {
  font: var(--ss-weight-medium) var(--ss-display-l) / var(--ss-leading-tight) var(--ss-font-display);
  color: var(--ss-ink-heading);
  letter-spacing: -0.01em;
  margin: 0;
}
.flat__lead {
  font: italic var(--ss-weight-regular) var(--ss-display-s) / 1.5 var(--ss-font-display);
  color: var(--ss-ink-2);
  margin: var(--ss-space-4) 0 0;
}
.flat__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-2);
  align-items: baseline;
  margin: var(--ss-space-5) 0 0;
  font-size: var(--ss-text-md);
  color: var(--ss-ink-2);
}
.flat__length { color: var(--ss-ink-3); }

.flat__switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss-space-3) var(--ss-space-4);
  margin: var(--ss-space-6) 0 0;
  padding: var(--ss-space-4) var(--ss-space-5);
}
.flat__switch-note { font-size: var(--ss-text-md); color: var(--ss-ink-2); flex: 1 1 16rem; }

.flat__toc { margin-top: var(--ss-space-6); }
.flat__toc-title { font-size: var(--ss-text-xs); font-weight: var(--ss-weight-semibold); color: var(--ss-ink-2); margin: 0 0 var(--ss-space-2); }
.flat__toc-list { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ss-root .flat__toc-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ss-control-md);
  padding: 0 var(--ss-space-4);
  border: 1px solid var(--ss-line-control);
  border-radius: var(--ss-radius-md);
  font: italic var(--ss-text-md) / 1 var(--ss-font-display);
  color: var(--ss-ink);
  text-decoration: none;
}
.ss-root .flat__toc-list a:hover { background: var(--ss-fill); }
@media (pointer: coarse) { .ss-root .flat__toc-list a { min-height: var(--ss-touch); } }

.flat__chapter {
  display: flex;
  align-items: baseline;
  gap: var(--ss-space-3);
  margin: var(--ss-space-16) 0 0;
  padding-top: var(--ss-space-5);
  border-top: 2px solid var(--ss-ochre);
  font: italic var(--ss-weight-medium) var(--ss-display-m) / 1.2 var(--ss-font-display);
  color: var(--ss-ink-heading);
}
.flat__chapter-meta { margin: var(--ss-space-2) 0 var(--ss-space-6); font-size: var(--ss-text-md); }
/* It stands alone on its line, so a full target costs only its own leading. */
@media (pointer: coarse) {
  .flat__chapter-link { display: inline-flex; align-items: center; min-height: var(--ss-touch); }
}

/* ---- The author's words ---- */
/* ---- A frame from another site (#98): the thumbnail and the link, never the player ---- */
.flat-embed { margin: var(--ss-space-6) 0; }
.flat-embed__link {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
  background: var(--ss-paper);
}
.flat-embed__link:hover .flat-embed__action,
.flat-embed__link:focus-visible .flat-embed__action { text-decoration: underline; }
.flat-embed__print { display: block; aspect-ratio: 16 / 9; background: var(--ss-fill); }
.flat-embed__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.flat-embed__field { display: block; aspect-ratio: 16 / 9; background: var(--ss-fill); }
.flat-embed__text { display: flex; flex-direction: column; gap: var(--ss-space-1); padding: var(--ss-space-3) var(--ss-space-4); }
.flat-embed__title { font-weight: var(--ss-weight-medium); color: var(--ss-ink-heading); }
.flat-embed__action { font-size: var(--ss-text-sm); color: var(--ss-ink-2); }
.flat-embed-broken { color: var(--ss-ink-3); font-style: italic; }

.flat__text { position: relative; margin: var(--ss-space-6) 0; line-height: var(--ss-leading-prose); }
.flat__text > :first-child { margin-top: 0; }
.flat__text p, .flat__text ul, .flat__text ol { margin: 0 0 var(--ss-space-4); }
.flat__text h2, .flat__text h3, .flat__text h4, .flat__text h5, .flat__text h6 {
  font-family: var(--ss-font-display);
  font-weight: var(--ss-weight-medium);
  color: var(--ss-ink-heading);
  line-height: 1.25;
  margin: var(--ss-space-8) 0 var(--ss-space-3);
}
.flat__text h2 { font-size: var(--ss-display-m); }
.flat__text h3 { font-size: var(--ss-display-s); }
.flat__text h4, .flat__text h5, .flat__text h6 { font-size: var(--ss-display-xs); }
.flat__text ul, .flat__text ol { padding-left: var(--ss-space-5); }
.flat__text li { margin-bottom: var(--ss-space-2); }
.flat__text blockquote {
  margin: var(--ss-space-6) 0;
  padding-left: var(--ss-space-5);
  border-left: 2px solid var(--ss-line-control);
  font: italic var(--ss-display-s) / 1.5 var(--ss-font-display);
  color: var(--ss-ink-2);
}
.flat__text blockquote p:last-child { margin-bottom: 0; }
.flat__text code { font: 0.9em var(--ss-font-mono); background: var(--ss-fill); padding: 1px 5px; border-radius: var(--ss-radius-xs); }
.flat__text pre {
  overflow-x: auto;
  padding: var(--ss-space-3) var(--ss-space-4);
  margin: 0 0 var(--ss-space-4);
  border-radius: var(--ss-radius-md);
  background: var(--ss-fill);
}
.flat__text pre code { background: none; padding: 0; }
.flat__text table { width: 100%; border-collapse: collapse; margin: var(--ss-space-4) 0 var(--ss-space-6); font-size: var(--ss-text-md); }
.flat__text th, .flat__text td { text-align: left; vertical-align: top; padding: var(--ss-space-2) var(--ss-space-3) var(--ss-space-2) 0; border-bottom: 1px solid var(--ss-line); }
.flat__text th { font-size: var(--ss-text-xs); font-weight: var(--ss-weight-semibold); color: var(--ss-ink-2); }
.flat__text hr { border: 0; border-top: 1px solid var(--ss-line); margin: var(--ss-space-8) 0; }
.flat__text img { max-width: 100%; height: auto; }
.flat-embed-broken { color: var(--ss-ink-3); font-size: var(--ss-text-sm); }

/* ---- Galleries. Flush with the text: one left edge, not two. ---- */
.flat-gallery { display: grid; gap: var(--ss-space-3); margin: var(--ss-space-6) 0; padding: 0; list-style: none; }
.flat-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flat-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flat-gallery--many { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.flat-gallery__item { margin: 0; min-width: 0; }
.flat-figure { margin: 0; }
.ss-root a.flat-media {
  display: block;
  background: var(--ss-white) 50% / cover no-repeat;
  padding: 3px;
  box-shadow: var(--ss-shadow-print);
  text-decoration: none;
}
.flat-media__img { display: block; width: 100%; height: auto; }
/* A grid of frames reads as a set; a lone picture keeps its own shape. */
.flat-gallery--2 .flat-media__img,
.flat-gallery--3 .flat-media__img,
.flat-gallery--many .flat-media__img { aspect-ratio: 4 / 3; object-fit: cover; }
.flat-video { display: block; width: 100%; background: var(--ss-stage); border-radius: var(--ss-radius-sm); }
.flat-figure__caption { margin-top: var(--ss-space-2); font-size: var(--ss-text-sm); color: var(--ss-ink-2); }

.flat__route { margin: var(--ss-space-8) 0; }
.flat__route-print { display: block; width: 100%; }
.flat__route-image { display: block; width: 100%; height: auto; }
.flat__route-caption { margin-top: var(--ss-space-2); font-size: var(--ss-text-xs); font-weight: var(--ss-weight-semibold); color: var(--ss-ink-2); }
.flat__stops { margin: var(--ss-space-4) 0 0; padding-left: var(--ss-space-6); font-size: var(--ss-text-md); }
.flat__stop { margin-bottom: var(--ss-space-2); }
.flat__stop-thumb { width: 40px; height: 30px; object-fit: cover; border-radius: var(--ss-radius-xs); vertical-align: middle; margin-right: var(--ss-space-2); }

.flat__empty { color: var(--ss-ink-2); margin: var(--ss-space-10) 0; }

.flat__foot { margin-top: var(--ss-space-16); padding-top: var(--ss-space-6); border-top: 1px solid var(--ss-line); }

/* ---- The quote link (PCB-24). Created by flat.bundle.js when a passage is selected. ---- */
.ss-root a.flat-quote {
  position: absolute;
  z-index: var(--ss-z-menu);
  display: inline-flex;
  align-items: center;
  height: var(--ss-control-sm);
  padding: 0 var(--ss-space-3);
  border-radius: var(--ss-radius-md);
  background: var(--ss-ink);
  color: var(--ss-ink-on-dark);
  box-shadow: var(--ss-shadow-menu);
  font: var(--ss-weight-medium) var(--ss-text-sm) / 1 var(--ss-font-ui);
  text-decoration: none;
  white-space: nowrap;
}
.ss-root a.flat-quote:focus-visible { outline: 2px solid var(--ss-focus-on-dark); outline-offset: 2px; }

@media (max-width: 599px) {
  .flat-gallery--3, .flat-gallery--many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flat__chapter { margin-top: var(--ss-space-12); font-size: var(--ss-display-s); }
}

/* ---- The lightbox ----
   FORK NOTICE. `renderer/src/lightbox.css` is the original; this is its twin on the design
   system's tokens. A change to the markup `renderer/src/v3/inline-media-lightbox.js`
   produces has to land in both. */
.v3-inline-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--ss-z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ss-duration-base) var(--ss-ease), visibility var(--ss-duration-base) var(--ss-ease);
}
.v3-inline-media-lightbox.is-open { opacity: 1; visibility: visible; }
.v3-inline-media-lightbox__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--ss-stage);
  cursor: pointer;
}
.v3-inline-media-lightbox__close,
.v3-inline-media-lightbox__nav {
  position: absolute;
  z-index: 2;
  width: var(--ss-touch);
  height: var(--ss-touch);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--ss-radius-round);
  background: var(--ss-chrome-bg);
  -webkit-backdrop-filter: blur(var(--ss-chrome-blur));
  backdrop-filter: blur(var(--ss-chrome-blur));
  color: var(--ss-ink-on-dark);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v3-inline-media-lightbox__close {
  top: calc(var(--ss-space-3) + env(safe-area-inset-top, 0));
  right: calc(var(--ss-space-3) + env(safe-area-inset-right, 0));
}
.v3-inline-media-lightbox__close:hover,
.v3-inline-media-lightbox__nav:hover { background: var(--ss-chrome-bg-strong); }
.v3-inline-media-lightbox__close:focus-visible,
.v3-inline-media-lightbox__nav:focus-visible { outline: 2px solid var(--ss-focus-on-dark); outline-offset: 2px; }
.v3-inline-media-lightbox__stage {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1400px);
  max-height: min(88vh, 1200px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.v3-inline-media-lightbox__stage .v3-inline-media-lightbox__el {
  pointer-events: auto;
  max-width: 100%;
  max-height: min(88vh, 1200px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--ss-radius-xs);
}
.v3-inline-media-lightbox__stage video.v3-inline-media-lightbox__el {
  width: 100%;
  max-height: min(88vh, 1200px);
  background: var(--ss-stage);
}
.v3-inline-media-lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); font-size: 1.75rem; pointer-events: auto; }
.v3-inline-media-lightbox__nav--prev { left: max(var(--ss-space-3), env(safe-area-inset-left, 0)); }
.v3-inline-media-lightbox__nav--next { right: max(var(--ss-space-3), env(safe-area-inset-right, 0)); }
.v3-inline-media-lightbox__nav[hidden] { display: none !important; }
.v3-inline-media-lightbox__counter {
  position: fixed;
  bottom: calc(var(--ss-space-4) + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: var(--ss-space-1) var(--ss-space-3);
  border-radius: var(--ss-radius-round);
  background: var(--ss-chrome-bg);
  color: var(--ss-ink-on-dark);
  font-size: var(--ss-text-sm);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.v3-inline-media-lightbox__counter[hidden] { display: none !important; }
.reduced-motion .v3-inline-media-lightbox { transition: none; }
@media (prefers-reduced-motion: reduce) { .v3-inline-media-lightbox { transition: none; } }

/* ---- Print: this page is also what a reader saves as a PDF ---- */
@media print {
  .ss-pubhead, .ss-pubfoot, .ss-skip, .flat__switch, .flat__toc,
  .flat__chapter-meta, .flat-quote, .flat__foot, .flat-video { display: none !important; }
  .ss-public { background: none; }
  .flat { max-width: none; }
  .flat__chapter { break-before: page; border-top: 0; }
  .flat__chapter:first-of-type { break-before: auto; }
  .flat-figure, .flat-gallery__item, .flat__route { break-inside: avoid; }
  .ss-root a.flat-media { box-shadow: none; padding: 0; }
  .ss-root a { text-decoration: none; }
}