/* Story Lines — series navigation (GAP-363).
 *
 * TWO SURFACES, one line of data:
 *   .rt-line-strip  a single line ABOVE the article body ("A series ·
 *                   <name> · Part 3 of 5"). It exists for the cold reader
 *                   who arrives on a middle instalment from search and has
 *                   no idea a larger shape exists — the design case, per
 *                   docs/site-as-game-architecture-2026-07-30.md §5. It is
 *                   deliberately ONE line: anything taller competes with
 *                   the headline it sits under.
 *   .rt-line        the rail BELOW the body — the full index with the
 *                   current instalment marked, then previous/next scoped to
 *                   the series.
 *
 * THE CARD CONTRACT (AGENTS.md / rocheport-extras.css GAP-047): the rail
 * carries `.rt-card .rt-card--flat`, so its background, border, radius,
 * padding and shadow ALL come from that one class. Nothing in this file
 * re-declares any of them — only interior layout and typography, which is
 * exactly what the contract says a surface owns. `--flat` because a footer
 * navigator that lifts on hover reads as clickable when the card itself
 * isn't; the ROWS are the click targets and they get the hover.
 *
 * COLOR: palette tokens only (theme.json is the single source of truth).
 * The only literals are rgba() focus/hover washes derived from the tokens,
 * which have no preset form.
 */

/* SCOPED BORDER-BOX RESET — required, not tidiness. This theme does NOT set a
 * global `box-sizing: border-box` (.rt-card sets it on itself, one element at a
 * time), so everything here inherits content-box. Caught in the browser at
 * 1280px: `.rt-line__step { flex: 1 1 45% }` sized the CONTENT box to 45% and
 * then ADDED 25.6px of padding and 2px of border to each card, so two cards
 * measured 543px inside a 543px row and the previous/next pair wrapped onto two
 * full-width lines — the wide layout silently rendering as the mobile one.
 * Scoped to this module's two roots so it cannot leak into post content. */
.rt-line,
.rt-line *,
.rt-line-strip,
.rt-line-strip * {
  box-sizing: border-box;
}

/* ── The strip above the article ────────────────────────────────────────── */

.rt-line-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Same tiny-uppercase label TIER as .rtv-item__label (town-vitals) and
   .rrg-widget-label (widget-family) — this is house furniture, not a new
   type scale. */
.rt-line-strip__kicker,
.rt-line__kicker {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--sage-dark);
}

.rt-line-strip__name {
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--sand);
}
.rt-line-strip__name:hover,
.rt-line-strip__name:focus-visible {
  color: var(--wp--preset--color--clay-dark);
  border-bottom-color: var(--wp--preset--color--clay-dark);
}

.rt-line-strip__pos {
  margin-left: auto;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--muted);
}

/* ── The rail below the article ─────────────────────────────────────────── */

.rt-line {
  margin: var(--wp--preset--spacing--50) 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.rt-line__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.rt-line__name {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--contrast);
  /* min-width:0 is what actually lets a flex item shrink below its intrinsic
     width — the same 390px overflow lesson town-vitals banked in GAP-267.
     Series names here run to ~40 characters. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.rt-line__pos {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
}

/* The index. list-style is off on purpose: the numbers shown are the
   instalments' OWN part numbers, which are not necessarily 1..n (an
   unpublished middle part leaves a real gap, and a generated counter would
   quietly renumber around it and contradict the headline). */
.rt-line__parts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wp--preset--color--border);
}

.rt-line__part {
  margin: 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.rt-line__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  /* Tap target on a phone. Under the border-box reset above this IS the row's
     total height, so 48 clears the 44px floor with a little air rather than
     44 + padding + border = 64, which made a nine-row index a long scroll. */
  min-height: 48px;
  padding: 0.5rem;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}

a.rt-line__row:hover,
a.rt-line__row:focus-visible {
  background: rgba(193, 104, 60, 0.06); /* `primary` at 6% — no preset form */
  color: var(--wp--preset--color--clay-dark);
}
a.rt-line__row:focus-visible {
  outline: 2px solid var(--wp--preset--color--sage-dark);
  outline-offset: -2px;
}

.rt-line__num {
  flex: 0 0 1.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--wp--preset--color--sand);
}

.rt-line__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  min-width: 0;
}

.rt-line__title {
  font-size: 0.92rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* The current instalment. Marked three ways on purpose — weight, a left rule
   and an explicit "You are here" — because colour alone is not a signal every
   reader receives, and `aria-current` in the markup is not visible at all. */
.rt-line__part.is-current .rt-line__row {
  background: var(--wp--preset--color--light);
  box-shadow: inset 3px 0 0 0 var(--wp--preset--color--primary);
  cursor: default;
}
.rt-line__part.is-current .rt-line__title {
  font-weight: 700;
}
.rt-line__part.is-current .rt-line__num {
  color: var(--wp--preset--color--primary);
}

.rt-line__flag {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  white-space: nowrap;
}
.rt-line__flag--here {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}
/* Unpublished rows only ever render for someone who may edit posts (see
   rtp_line_collect()), so this badge is an editor's tool. Loud enough that it
   can't be mistaken for something a reader is seeing. */
.rt-line__flag--draft {
  background: var(--wp--preset--color--highlight);
  color: var(--wp--preset--color--contrast);
  white-space: normal;
}
.rt-line__part.is-unpublished .rt-line__title {
  color: var(--wp--preset--color--muted);
  font-style: italic;
}

/* ── Previous / next, scoped to the series ──────────────────────────────── */

.rt-line__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.rt-line__step {
  flex: 1 1 45%;
  min-width: 0;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}
a.rt-line__step:hover,
a.rt-line__step:focus-visible {
  border-color: var(--wp--preset--color--primary);
  background: rgba(193, 104, 60, 0.06);
}
a.rt-line__step:focus-visible {
  outline: 2px solid var(--wp--preset--color--sage-dark);
  outline-offset: 1px;
}

.rt-line__step--none {
  border-style: dashed;
  color: var(--wp--preset--color--muted);
}

.rt-line__step-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--sage-dark);
  margin-bottom: 0.2rem;
}
.rt-line__step--none .rt-line__step-label {
  color: var(--wp--preset--color--muted);
}

.rt-line__step-title {
  display: block;
  font-size: 0.85rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Next sits right on a wide row; on one line it reads as the forward hand. */
.rt-line__step--next {
  text-align: right;
}

/* ── Narrow viewports ───────────────────────────────────────────────────── */

/* At 390px two 45% cards leave ~150px of usable width per card, which breaks
   a chapter name onto four lines. Stack instead, previous on top so the
   reading order still runs backwards-then-forwards. */
@media (max-width: 600px) {
  .rt-line__steps {
    flex-direction: column;
  }
  .rt-line__step {
    flex: 1 1 auto;
  }
  .rt-line__step--next {
    text-align: left;
  }
  /* The position counter has an auto left margin on wide rows; on a wrapped
     eyebrow that pins it to the far right of its own line, which reads as a
     stray. Let it sit next to the name. */
  .rt-line__pos,
  .rt-line-strip__pos {
    margin-left: 0;
  }
}

/* ── The Reading Room (GAP-378 follow-up) ──────────────────────────────────
   The [rt_reading_room] index page: a short note on what the page is, then one
   card per series, newest activity first. Same palette-token-only discipline as
   the rest of this file — every colour is a theme.json preset, the only literals
   are none. The card box is built here (this page has no theme .rt-card
   furniture around each row) but deliberately echoes the .rt-card--accent look:
   a light border with a coloured left bar, muted for archived series. */
.rt-reading-room__intro {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 42rem;
  margin: 0 0 2rem;
  color: var(--wp--preset--color--contrast);
}

.rt-reading-room__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.rt-reading-room__series {
  box-sizing: border-box;
  border: 1px solid var(--wp--preset--color--border);
  border-left: 4px solid var(--wp--preset--color--primary);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  background: var(--wp--preset--color--white);
}
/* Archived series read quieter than the ones still open. */
.rt-reading-room__series--archive {
  border-left-color: var(--wp--preset--color--sand);
}

.rt-reading-room__state {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--sage-dark);
}
.rt-reading-room__series--archive .rt-reading-room__state {
  color: var(--wp--preset--color--muted);
}

.rt-reading-room__name {
  margin: 0 0 0.35rem;
  font-size: 1.3rem;
  line-height: 1.25;
}
.rt-reading-room__name a {
  color: var(--wp--preset--color--clay-dark);
  text-decoration: none;
}
.rt-reading-room__name a:hover,
.rt-reading-room__name a:focus-visible {
  text-decoration: underline;
}

.rt-reading-room__meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--wp--preset--color--muted);
}
.rt-reading-room__meta a {
  color: var(--wp--preset--color--sage-dark);
  font-weight: 600;
  text-decoration: none;
}
.rt-reading-room__meta a:hover,
.rt-reading-room__meta a:focus-visible {
  text-decoration: underline;
}

.rt-reading-room__empty {
  color: var(--wp--preset--color--muted);
}