/*
 * MeowTarot — Phase 5: Reading Result Page Structural Theme
 * css/reading.css
 * ─────────────────────────────────────────────────────────────────────────
 *
 * Replaces the Phase 4 reading.css with a layout that matches the design
 * doc's two question-result screens:
 *   - ScreenQuickPullResult (1 card, big centered card art + lucky chip)
 *   - ScreenSpread          (3 cards, stacked rows with floating position
 *                            pills above each card)
 *
 * Layout swap is keyed off data-spread-count, set by js/reading.js
 * renderQuestion() on the readingContent element AND on the spread panel.
 *
 * The page also renders extra functional panels (topic-story, takeaway,
 * energy balance, phase, retention, internal-links) that the design doc
 * does NOT show. Per the Phase 5 spec, those panels are KEPT and restyled
 * here with --mt-* tokens and the design's surface treatment.
 *
 * REQUIRES: css/theme-tokens.css (--mt-* namespace, Phase 3 + 5).
 * LOAD ORDER: LAST. After css/phase-3-redesign.css.
 *
 * SECTIONS:
 *   §1  Page background + shell layout
 *   §2  Reading-intro (visually hidden; SEO-only in question mode)
 *   §3  Reading content wrapper
 *   §4  Question recap panel (dashed)
 *   §5  Spread panel — Quick layout (1 card big centered)
 *   §6  Spread panel — Story layout (3 cards stacked rows)
 *   §7  Spread position pill (Story only)
 *   §8  Card art sizing per layout
 *   §9  Spread caption (orientation, card name, Thai name)
 *   §10 Spread lucky color chip (Quick only)
 *   §11 Spread inline interpretation (EN + TH stacked)
 *   §12 Topic-story panel (deeper interpretations)
 *   §13 Other panels (takeaway, energy, phase, retention)
 *   §14 Internal-links footer panel
 *   §15 Action row buttons
 *   §16 Footer nav pills
 *
 * The .panel--celtic-cross layout (Full reading) is intentionally NOT
 * styled here — Full mode keeps its existing styling.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* §1 — Page background + shell layout */
body[data-page='reading'] {
  background: var(--mt-bg-gradient-daily-after);
  color: var(--mt-plum);
  font-family: var(--mt-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-page='reading'] .page-shell {
  max-width: 440px;
  margin: 0 auto;
  padding: 8px 24px 110px;
  min-height: calc(100dvh - 60px);
}

body[data-page='reading'] .reading-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

body[data-page='reading'] .thai,
body[data-page='reading'] .thai-serif {
  font-family: var(--mt-font-thai);
}

body[data-page='reading'] .thai-serif {
  font-family: var(--mt-font-display-th);
}


/* §2 — Reading-intro: keep in DOM for SEO, hide visually on question mode.
 * (For daily / full modes the H1 still renders.) */
body[data-page='reading'] .reading-content[data-spread-count] ~ .action-row,
body[data-page='reading'] .reading-content[data-spread-count] {
  /* spread-count is only set in question mode by renderQuestion. Use it as
   * a signal to suppress the intro H1 visually while keeping the title for
   * screen readers / SEO. */
}

body[data-page='reading'] .reading-content[data-spread-count='1'] ~ .reading-intro,
body[data-page='reading'] .reading-content[data-spread-count='3'] ~ .reading-intro {
  /* no-op fallback — reading-intro is a sibling BEFORE reading-content; we
   * can't reach it via a forward selector. Handled via the parent rule
   * below using :has() with a question-recap descendant. */
}

body[data-page='reading'] .reading-card:has(.panel--question-recap) .reading-intro {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* §3 — Reading content wrapper */
body[data-page='reading'] .reading-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}


/* §4 — Question recap (dashed panel) */
body[data-page='reading'] .panel--question-recap {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px dashed var(--mt-rose-pale);
  text-align: center;
  box-shadow: none;
}

body[data-page='reading'] .question-recap__eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--mt-gold-deep);
  font-weight: 600;
  text-transform: uppercase;
}

body[data-page='reading'] .question-recap__text {
  font-family: var(--mt-font-display);
  font-size: 16px;
  color: var(--mt-plum);
  font-style: italic;
  line-height: 1.3;
  margin-top: 2px;
  letter-spacing: -0.01em;
}


/* §5 — Spread panel: Quick layout (1 card big centered) */
body[data-page='reading'] .panel--spread {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .reading-spread-grid {
  display: flex;
  justify-content: center;
  position: relative;
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .reading-spread-grid::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(232, 103, 138, 0.40), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .reading-spread-card {
  width: 100%;
  max-width: 320px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .reading-spread-card .spread-position-pill {
  display: none;
}


/* §6 — Spread panel: Story layout (3 cards stacked rows) */
/* 3-up ROW of vertical mini-cards: [Card1][Card2][Card3] (founder 2026-06-23, was stacked rows). */
body[data-page='reading'] .panel--spread[data-spread-count='3'] .reading-spread-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  align-items: start;
  margin-top: 16px;
}

body[data-page='reading'] .panel--spread[data-spread-count='3'] .reading-spread-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 16px;
  border: none;
  padding: 12px 7px 11px;
  box-shadow: var(--mt-soft-shadow);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: var(--mt-plum);
}


/* §7 — Position pill (Story only) */
body[data-page='reading'] .spread-position-pill {
  position: absolute;
  top: -10px;
  left: 16px;
  font-family: var(--mt-font-display);
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--mt-plum);
  color: var(--mt-cream);
  padding: 4px 10px;
  border-radius: var(--mt-radius-pill);
  display: inline-flex;
  align-items: baseline;
}

body[data-page='reading'] .spread-position-pill__th {
  font-size: 9.5px;
  opacity: 0.85;
  letter-spacing: 0.05em;
  text-transform: none;
}

/* 3-up row: the pill sits in normal flow, centered atop each mini-card (was floating). Show just
   the short EN position label so it fits the narrow cell. (founder 2026-06-23) */
body[data-page='reading'] .panel--spread[data-spread-count='3'] .spread-position-pill {
  position: static;
  align-self: center;
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  white-space: nowrap;
}
body[data-page='reading'] .panel--spread[data-spread-count='3'] .spread-position-pill__th { display: none; }


/* §8 — Card art sizing per layout */
body[data-page='reading'] .reading-spread-card .card-art.is-thumb {
  flex-shrink: 0;
  border-radius: var(--mt-radius-card);
  overflow: hidden;
  box-shadow: 0 20px 40px -16px rgba(61, 26, 92, 0.45);
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .card-art.is-thumb {
  width: 220px;
  max-width: 80vw;
  /* No fixed aspect-ratio: the single card adopts the deck's natural ratio (see
   * the .card-art-img rule below) so off-ratio decks aren't cropped. */
  margin: 0 auto;
}

body[data-page='reading'] .panel--spread[data-spread-count='3'] .card-art.is-thumb {
  width: 100%;
  aspect-ratio: var(--mt-card-face-ratio, 1568 / 2720);
}

body[data-page='reading'] .card-art.is-thumb .card-art-img {
  display: block;
  width: 100%;
  height: 100%;
  /* Override Phase 4 styles.css cap so the IMG fills its parent box. (3-card
   * thumbs keep object-fit:cover for a uniform grid; the single daily/quick card
   * switches to natural ratio below.) */
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Single daily/quick card: render at the deck's NATURAL aspect ratio. Decks
 * differ (e.g. Pawbit art is 848×1264, not the 1568/2720 spec), so a fixed
 * container ratio + object-fit:cover cropped off-ratio decks' own painted border
 * — the "cut / messy" frame. Letting the IMG drive the height (container has no
 * fixed ratio) shows the full frame with no crop or distortion, matching the
 * share poster, which sizes the card from its natural dimensions (poster.js). */
body[data-page='reading'] .panel--spread[data-spread-count='1'] .card-art.is-thumb .card-art-img {
  height: auto;
}


/* §9 — Spread caption (orientation, card name, Thai name) */
body[data-page='reading'] .spread-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .spread-caption {
  align-items: center;
  margin-top: 14px;
  gap: 4px;
}

body[data-page='reading'] .panel--spread[data-spread-count='3'] .spread-caption {
  align-items: center;
  text-align: center;
  width: 100%;
  min-width: 0;
  padding-top: 2px;
}

body[data-page='reading'] .spread-orientation {
  font-family: var(--mt-font-body);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  /* --mt-gold-deep (#d49a2c) on the near-white card is only ~2.5:1 — well
   * below WCAG AA, the worst-reading text on the result page. Use a deeper
   * gold scoped to this label (not the shared token) for ~5:1, and ease the
   * heavy 0.3em tracking a touch for legibility. */
  color: #8d6a14;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page='reading'] .spread-label {
  font-family: var(--mt-font-body);
  font-size: 11px;
  color: var(--mt-plum-mid);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The "Your takeaway" summary-box card names default to #8a719f (~4.25:1 on the
 * near-white panel) — just under WCAG AA. Deepen the lavender a touch for ~4.8:1
 * without changing the hue. Same specificity as the styles.css rule; reading.css
 * loads later so this wins (styles.css stays untouched). */
body[data-page='reading'][data-reading-mode='full'] .full-integration-box__source {
  color: #7a6090;
}

body[data-page='reading'] .panel--spread[data-spread-count='3'] .spread-label {
  display: none; /* position is in the floating pill on Story */
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .spread-label {
  display: none; /* position is meaningless for Quick (no position) */
}

body[data-page='reading'] .spread-card-name {
  font-family: var(--mt-font-display);
  font-weight: 600;
  font-style: italic;
  color: var(--mt-plum);
  letter-spacing: -0.01em;
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .spread-card-name {
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  margin-top: 4px;
}

body[data-page='reading'] .panel--spread[data-spread-count='3'] .spread-card-name {
  font-size: 13px;
  line-height: 1.12;
  white-space: normal;
}

body[data-page='reading'] .spread-card-name-th {
  color: var(--mt-plum-mid);
  font-weight: 600;
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .spread-card-name-th {
  font-size: 17px;
  margin-top: 2px;
}

body[data-page='reading'] .panel--spread[data-spread-count='3'] .spread-card-name-th {
  font-size: 11px;
  margin-top: 1px;
}


/* §10 — Lucky color chip (Quick only) */
body[data-page='reading'] .spread-lucky-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: var(--mt-radius-pill);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--mt-gold-pale);
  font-family: var(--mt-font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mt-plum);
  margin-top: 10px;
}

body[data-page='reading'] .panel--spread[data-spread-count='3'] .spread-lucky-chip {
  display: none;
}

body[data-page='reading'] .spread-lucky-chip__dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-page='reading'] .spread-lucky-chip__swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mt-rose);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.15);
}


/* §11 — Inline interpretation (EN + TH stacked) */
body[data-page='reading'] .spread-inline-text {
  margin: 0;
  font-family: var(--mt-font-body);
  line-height: 1.6;
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .spread-inline-text {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--mt-soft-shadow);
  font-size: 13.5px;
  margin-top: 14px;
  width: 100%;
  text-align: left;
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .spread-inline-text--en {
  color: var(--mt-plum);
}

body[data-page='reading'] .panel--spread[data-spread-count='1'] .spread-inline-text--th {
  color: var(--mt-plum-mid);
  font-size: 12.5px;
  line-height: 1.7;
  margin-top: 8px;
}

body[data-page='reading'] .panel--spread[data-spread-count='3'] .spread-inline-text--en {
  font-size: 12.5px;
  color: var(--mt-plum);
  margin-top: 8px;
}

body[data-page='reading'] .panel--spread[data-spread-count='3'] .spread-inline-text--th {
  font-size: 11.5px;
  color: var(--mt-ink-soft);
  line-height: 1.55;
  margin-top: 6px;
}


/* §12 — Topic-story panel (deeper interpretations) */
body[data-page='reading'] .panel--question-story {
  background: var(--mt-surface-card);
  border: 1px solid var(--mt-nav-border);
  border-radius: var(--mt-radius-panel);
  box-shadow: var(--mt-shadow-panel);
  padding: 16px 18px;
}

body[data-page='reading'] .deeper-section h3 {
  font-family: var(--mt-font-display);
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  color: var(--mt-plum);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

body[data-page='reading'] .question-story-item {
  margin-top: 12px;
}

body[data-page='reading'] .question-story-item__label {
  font-family: var(--mt-font-body);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--mt-gold-deep);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

body[data-page='reading'] .question-story-item__body {
  font-family: var(--mt-font-body);
  font-size: 13.5px;
  color: var(--mt-plum);
  line-height: 1.6;
  margin: 6px 0 0;
}


/* §13 — Other panels: takeaway / energy / phase / retention */
body[data-page='reading'] .panel--question-takeaway,
body[data-page='reading'] .panel.energy-balance,
body[data-page='reading'] .panel.phase-panel,
body[data-page='reading'] .panel.retention-panel,
body[data-page='reading'] .panel {
  background: var(--mt-surface-card);
  border: 1px solid var(--mt-nav-border);
  border-radius: var(--mt-radius-panel);
  box-shadow: var(--mt-shadow-panel);
  padding: 16px 18px;
}

body[data-page='reading'] .panel--question-takeaway {
  border-color: var(--mt-gold-soft);
  box-shadow: var(--mt-shadow-glow-gold), var(--mt-shadow-panel);
}

body[data-page='reading'] .question-takeaway__lead {
  color: var(--mt-plum);
}

body[data-page='reading'] .question-takeaway__advice {
  color: var(--mt-plum-mid);
}

body[data-page='reading'] .energy-balance__title {
  color: var(--mt-plum);
}

body[data-page='reading'] .energy-interpretation {
  color: var(--mt-plum-mid);
}

body[data-page='reading'] .phase-panel__label {
  color: var(--mt-gold-deep);
}

body[data-page='reading'] .phase-panel__desc {
  color: var(--mt-plum-mid);
}

body[data-page='reading'] .retention-panel__stat {
  color: var(--mt-plum);
}

body[data-page='reading'] .retention-panel__soft {
  color: var(--mt-plum-mid);
}


/* §14 — Internal-links panel + footer nav pills */
/* Related-links card — implements the Claude Design "RelatedLinks" mockup:
   gold-underlined title, a "read full meaning" hero row per drawn card (real card
   art thumbnail), then three reading-mode tiles. Double-class selectors keep these
   ahead of the legacy daily-mode overrides in styles.css. */
body[data-page='reading'] .panel--internal-links.related-links {
  background: var(--mt-surface-card);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  box-shadow: 0 10px 28px -12px rgba(61, 26, 92, 0.2);
  padding: 22px 18px 20px;
  backdrop-filter: blur(8px);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__head {
  margin: 0 0 18px;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__head h3 {
  margin: 0;
  font-family: var(--mt-font-display-th);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--mt-plum);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__rule {
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mt-gold-deep), var(--mt-gold-pale));
}

/* Hero "read full meaning" row */
body[data-page='reading'] .panel--internal-links.related-links .related-links__hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(110, 29, 76, 0.05), rgba(232, 168, 56, 0.06));
  border: 1px solid var(--mt-gold-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__hero:first-of-type {
  margin-top: 0;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__hero:hover,
body[data-page='reading'] .panel--internal-links.related-links .related-links__hero:active {
  transform: scale(0.985);
  box-shadow: 0 6px 18px -10px rgba(61, 26, 92, 0.35);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__thumb {
  flex: none;
  width: 48px;
  height: 72px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 6px 14px -6px rgba(61, 26, 92, 0.5), inset 0 0 0 1px rgba(232, 196, 120, 0.4);
  background: linear-gradient(155deg, #3d1a5c 0%, #7a1f66 46%, #d12878 100%);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__thumb.is-reversed img {
  transform: rotate(180deg);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__hero-text {
  flex: 1;
  min-width: 0;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__eyebrow {
  display: block;
  font-family: var(--mt-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mt-gold);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__title {
  display: block;
  margin-top: 3px;
  font-family: var(--mt-font-display-th);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mt-plum);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__sub {
  display: block;
  margin-top: 4px;
  font-family: var(--mt-font-body);
  font-size: 11.5px;
  line-height: 1.3;
  color: #8a72a8;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__chevron {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b4faa;
  background: rgba(61, 26, 92, 0.06);
}

/* Divider with eyebrow */
body[data-page='reading'] .panel--internal-links.related-links .related-links__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 2px 14px;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__divider span {
  font-family: var(--mt-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #8a72a8;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(61, 26, 92, 0.12), transparent);
}

/* Three reading-mode tiles */
body[data-page='reading'] .panel--internal-links.related-links .related-links__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border-radius: 16px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--mt-nav-border);
  box-shadow: 0 2px 8px -6px rgba(61, 26, 92, 0.3);
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__tile:hover,
body[data-page='reading'] .panel--internal-links.related-links .related-links__tile:active {
  transform: scale(0.97);
  background: linear-gradient(160deg, rgba(212, 154, 44, 0.14), rgba(232, 196, 120, 0.1));
  border-color: rgba(201, 147, 58, 0.5);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mt-plum-soft);
  background: rgba(107, 79, 170, 0.1);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__tile-icon svg {
  width: 20px;
  height: 20px;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__tile:hover .related-links__tile-icon,
body[data-page='reading'] .panel--internal-links.related-links .related-links__tile:active .related-links__tile-icon {
  color: #fdf6ee;
  background: linear-gradient(160deg, var(--mt-gold-deep), var(--mt-gold-pale));
  box-shadow: 0 4px 10px -4px rgba(201, 147, 58, 0.7);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__tile-eyebrow {
  font-family: var(--mt-font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a72a8;
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__tile:hover .related-links__tile-eyebrow,
body[data-page='reading'] .panel--internal-links.related-links .related-links__tile:active .related-links__tile-eyebrow {
  color: var(--mt-gold);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__tile-name {
  margin-top: -2px;
  font-family: var(--mt-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--mt-plum);
}

body[data-page='reading'] .panel--internal-links.related-links .related-links__tile-sub {
  font-family: var(--mt-font-body);
  font-size: 10.5px;
  line-height: 1.1;
  text-align: center;
  color: #8a72a8;
}

body[data-page='reading'] .card-meaning-footer-nav {
  margin-top: 14px;
}

body[data-page='reading'] .reading-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-page='reading'] .footer-nav-pill {
  background: var(--mt-surface-card);
  color: var(--mt-plum);
  border: 1px solid var(--mt-nav-border);
  border-radius: var(--mt-radius-pill);
  box-shadow: var(--mt-shadow-panel);
  text-decoration: none;
  font-family: var(--mt-font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  text-align: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body[data-page='reading'] .footer-nav-pill:hover {
  border-color: var(--mt-gold-deep);
  box-shadow: var(--mt-shadow-glow), var(--mt-shadow-panel);
  transform: translateY(-1px);
}


/* §15 — Action row buttons */
body[data-page='reading'] .action-row {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page='reading'] .action-row .primary,
body[data-page='reading'] .action-row .ghost {
  flex: 1 1 0;
  font-family: var(--mt-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 13px 16px;
  border-radius: 14px;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body[data-page='reading'] .action-row .primary {
  border: none;
  background: var(--mt-cta-grad);
  color: var(--mt-cream);
  box-shadow: var(--mt-cta-shadow);
}

body[data-page='reading'] .action-row .primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 36px -8px rgba(209, 40, 120, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

body[data-page='reading'] .action-row .ghost {
  background: rgba(255, 255, 255, 0.60);
  color: var(--mt-plum);
  border: 1px solid var(--mt-plum);
}

body[data-page='reading'] .action-row .ghost:hover {
  background: rgba(255, 255, 255, 0.80);
  border-color: var(--mt-plum-deep);
}


/* ─────────────────────────────────────────────────────────────────────────
 * §17 — Celtic Cross (mode=full) — design-doc additions
 *
 * The cross+staff grid itself lives in css/styles.css under the existing
 * body[data-page='reading'][data-reading-mode='full'] selectors. This
 * block adds the design-doc embellishments:
 *   - Gold number badge top-left of each card (JS-injected
 *     .celtic-slot__badge inside renderFull).
 *   - Hide the .spread-label / .spread-orientation inside celtic-cross
 *     slots — the design's on-card UI shows only the card art + number;
 *     position / orientation info lives in the summary panel below.
 *   - Reorder the right-column staff so Self (slot 7) is at the top and
 *     Outcome (slot 10) is at the bottom (matches design; the original
 *     styles.css mapping had Outcome at top).
 *   - New .panel--celtic-summary "Ten cards · ten doors" 2-column grid.
 * ───────────────────────────────────────────────────────────────────────── */


/* Gold number badge */
body[data-page='reading'][data-reading-mode='full'] .celtic-slot {
  position: relative; /* anchor the badge */
}

body[data-page='reading'][data-reading-mode='full'] .celtic-slot__badge {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mt-gold-deep);
  color: var(--mt-plum-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mt-font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 11px;
  border: 1.5px solid var(--mt-cream);
  box-shadow: 0 2px 5px rgba(61, 26, 92, 0.40);
  z-index: 3;
}

/* Hide caption text on celtic-cross slots — only card art + badge show */
body[data-page='reading'][data-reading-mode='full'] .celtic-slot .spread-caption {
  display: none;
}


/* Right-column staff: design order is 7-Self (top) → 8 → 9 → 10-Outcome (bottom).
 * DESKTOP ONLY. styles.css's base (≥641px) grid puts the staff in column 4 but
 * with Outcome at top; this reorders it. MUST be scoped to desktop — the mobile
 * (≤640px) grid in styles.css is a 5-column layout where the staff lives in
 * column 5 (col 4 is a flexible gap) and is ALREADY in the right order. Leaving
 * this unscoped forced the staff back into the collapsing gap column on mobile,
 * so the cards rendered at ~0 width and only the badges showed. (fix 2026-06-25) */
@media (min-width: 641px) {
  body[data-page='reading'][data-reading-mode='full'] .celtic-slot--power       { grid-area: 1 / 4; }
  body[data-page='reading'][data-reading-mode='full'] .celtic-slot--environment { grid-area: 2 / 4; }
  body[data-page='reading'][data-reading-mode='full'] .celtic-slot--hopes       { grid-area: 3 / 4; }
  body[data-page='reading'][data-reading-mode='full'] .celtic-slot--outcome     { grid-area: 4 / 4; }
}

/* FIX (2026-06-20): the two center-cross cards (#1 situation + #2 challenge) were
 * rendering at ~half the size of the other 8. They live inside .celtic-slot--center,
 * which was display:flex — as flex children their width:100% didn't resolve to the
 * cell width and the cards collapsed (height-driven by the tall flex row). Make the
 * center slot a normal block so the situation card fills the cell like every other
 * slot, and make BOTH center card images width-driven (height:auto, not 100%) so
 * they match. (#2 stays absolutely positioned + rotated 90° as the crossing card.)
 * Verified uniform at 390px and 900px via chrome. */
body[data-page='reading'][data-reading-mode='full'] .celtic-slot--center { display: block; }
body[data-page='reading'][data-reading-mode='full'] .celtic-slot--situation { width: 100%; max-width: 100%; }
body[data-page='reading'][data-reading-mode='full'] .celtic-slot--center .card-art.is-thumb .card-art-img,
body[data-page='reading'][data-reading-mode='full'] .celtic-slot--challenge .card-art.is-thumb .card-art-img { width: 100%; height: auto; }


/* Celtic Cross summary panel ("Ten cards · ten doors") */
body[data-page='reading'][data-reading-mode='full'] .panel--celtic-summary {
  background: var(--mt-surface-card);
  border: 1px solid var(--mt-nav-border);
  border-radius: 18px;
  box-shadow: var(--mt-soft-shadow);
  padding: 14px 16px;
}

body[data-page='reading'][data-reading-mode='full'] .celtic-summary__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
}

body[data-page='reading'][data-reading-mode='full'] .celtic-summary__title {
  font-family: var(--mt-font-display);
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  color: var(--mt-plum);
  letter-spacing: -0.01em;
}

body[data-page='reading'][data-reading-mode='full'] .celtic-summary__title-alt {
  font-size: 10px;
  color: var(--mt-plum-mid);
}

body[data-page='reading'][data-reading-mode='full'] .celtic-summary__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 6px;
}

body[data-page='reading'][data-reading-mode='full'] .celtic-summary__item {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

body[data-page='reading'][data-reading-mode='full'] .celtic-summary__num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mt-gold-deep);
  color: var(--mt-plum-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mt-font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 10px;
  flex-shrink: 0;
}

body[data-page='reading'][data-reading-mode='full'] .celtic-summary__text {
  flex: 1;
  min-width: 0;
}

body[data-page='reading'][data-reading-mode='full'] .celtic-summary__name {
  font-family: var(--mt-font-display);
  font-size: 11.5px;
  font-weight: 600;
  font-style: italic;
  color: var(--mt-plum);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

body[data-page='reading'][data-reading-mode='full'] .celtic-summary__pos {
  font-family: var(--mt-font-body);
  font-size: 9px;
  color: var(--mt-ink-soft);
  margin-top: 1px;
  line-height: 1.2;
}

/* On smaller viewports, drop to single column for readability */
@media (max-width: 380px) {
  body[data-page='reading'][data-reading-mode='full'] .celtic-summary__grid {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * §18 — Daily-result-specific additions
 *
 * renderDailyDetails (js/reading.js) emits the Quick-Pull-style
 * panel--spread[data-spread-count='1'] structure for the single-card
 * case — most of the layout (card art, orientation eyebrow, name, lucky
 * chip) is already covered by §3-§11. This block adds the daily-only
 * extras:
 *
 *   - .spread-archetype (italic bilingual line under .spread-card-name-th)
 *   - .daily-interp-panel ("For today" header + EN+TH body + divider +
 *     Keyword row), sibling of .panel--spread.
 *
 * The data-spread-count='1' attribute is the cascade key — these rules
 * only render the daily result panel when single-card mode is active.
 * Quick-Pull question results (also data-spread-count='1') don't render
 * an archetype or "For today" header because renderQuestion doesn't emit
 * those elements.
 * ───────────────────────────────────────────────────────────────────────── */

body[data-page='reading'] .panel--spread[data-spread-count='1'] .spread-archetype {
  font-family: var(--mt-font-display);
  font-size: 13px;
  font-style: italic;
  color: var(--mt-plum-mid);
  margin-top: 4px;
  letter-spacing: -0.01em;
  text-align: center;
}

body[data-page='reading'] .daily-interp-panel {
  background: rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--mt-soft-shadow);
}

body[data-page='reading'] .daily-interp-panel__header {
  font-family: var(--mt-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mt-gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

body[data-page='reading'] .daily-interp-panel__body {
  margin: 0;
  font-family: var(--mt-font-body);
  line-height: 1.6;
}

body[data-page='reading'] .daily-interp-panel__body--en {
  font-size: 13.5px;
  color: var(--mt-plum);
  margin-top: 8px;
}

body[data-page='reading'] .daily-interp-panel__body--th {
  font-size: 13px;
  color: var(--mt-plum-mid);
  line-height: 1.7;
  margin-top: 10px;
}

body[data-page='reading'] .daily-interp-panel__divider {
  height: 1px;
  background: rgba(201, 147, 58, 0.25);
  margin: 12px 0;
}

body[data-page='reading'] .daily-interp-panel__keyword-row {
  display: flex;
  gap: 10px;
  font-family: var(--mt-font-body);
  font-size: 11px;
  color: var(--mt-ink-soft);
  align-items: baseline;
  flex-wrap: wrap;
}

body[data-page='reading'] .daily-interp-panel__keyword b {
  color: var(--mt-plum);
}

body[data-page='reading'] .daily-interp-panel__keyword-sep {
  opacity: 0.4;
}


/* §19 — Celtic Cross bilingual hero title (above the cross+staff spread) */
body[data-page='reading'] .panel--celtic-hero {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 4px 0 10px;
  text-align: center;
}

body[data-page='reading'] .celtic-hero__title {
  font-family: var(--mt-font-display);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--mt-plum);
  line-height: 1;
}

body[data-page='reading'] .celtic-hero__title-th {
  font-family: var(--mt-font-display-th);
  font-size: 13px;
  color: var(--mt-plum-mid);
  margin-top: 4px;
  font-weight: 600;
}

/* §B2-5 — Card 'glow' aura (cool-violet for reversed, warm-gold for upright) was
   REMOVED per founder request 2026-06-20. Orientation now reads from the label
   (and, once the reversed-art retirement ships, a 180° flip of the upright art).
   The card keeps its base drop-shadow from the .card-art container rules above. */

/* §B2-8 — Drop the redundant light panel behind the reading result. The content
   (card art, title, lucky chip) already reads on the page gradient, so the white
   .panel--spread / #share-poster-root container was a needless "2nd background"
   layer. Colour only — layout/spacing unchanged. (Poster image is canvas-drawn in
   poster.js, NOT from this DOM, so transparency here doesn't affect the share image.) */
body[data-page='reading'] #share-poster-root,
body[data-page='reading'] .panel--spread,
body[data-page='reading'] .panel--question-recap {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* §B6 — Round Instagram-style "Share story" button, top-left of the result page.
   Tap → poster/share flow (openSharePage). IG-tinted gradient + glyph signals "story". */
body[data-page='reading'] .mt-share-fab {
  position: fixed;
  /* Bottom-right corner, stacked ABOVE the .mt-report-fab "Report a bug" pill
   * (bottom: nav + safe + 14px, ~42px tall) so the two don't overlap — lift this
   * one ~56px higher (founder request 2026-06-20; was top-left). */
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height, 64px) + 70px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #7c5cd6 0%, #d96aa0 55%, #e0a955 100%);
  box-shadow: 0 7px 18px -6px rgba(61, 26, 92, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body[data-page='reading'] .mt-share-fab:hover { transform: translateY(-1px); }
body[data-page='reading'] .mt-share-fab:active { transform: scale(0.94); }

/* §B6b — Instagram glyph on the bottom "Share" action button (#saveBtn → openSharePage;
   founder 2026-06-20, moved off the copy-link #shareBtn 2026-06-20). Added as a ::before
   so the JS `textContent` label re-writes don't wipe it; masked to currentColor so it
   matches the button text (cream on the primary button). */
body[data-page='reading'] #saveBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body[data-page='reading'] #saveBtn::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='2.5'%20width='19'%20height='19'%20rx='5.5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.2'/%3E%3Ccircle%20cx='17.6'%20cy='6.4'%20r='1.2'%20fill='black'%20stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='2.5'%20width='19'%20height='19'%20rx='5.5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.2'/%3E%3Ccircle%20cx='17.6'%20cy='6.4'%20r='1.2'%20fill='black'%20stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* §B7 — Reversed-card artwork = UPRIGHT art rotated 180° (2026-06-20).
 * Reversed cards no longer load a separate *-reversed.webp asset; they SOURCE
 * the upright art and are flipped visually here. The orientation LABEL still
 * reads "Reversed"/"กลับหัว" and the reversed MEANINGS are unchanged. The card
 * BACK (.card-back) is never rotated — only the face image. Applies to the
 * result face (.card-art .card-art-img) and the tapped card sheet
 * (.card-sheet-media), both rendered on reading.html. */
/* Rotation applies only in 'flip' mode (the default). In 'art' mode the image is
 * already the reversed asset, so the html[data-reversed-mode='art'] guard skips it.
 * :not(...='art') keeps flip the default even before the attr is set by JS. */
html:not([data-reversed-mode='art']) body[data-page='reading'] .card-art.is-reversed .card-art-img {
  transform: rotate(180deg);
}
html:not([data-reversed-mode='art']) body[data-page='reading'] .card-sheet-media.is-reversed {
  transform: rotate(180deg);
}

/* ============================================================================
 * DESKTOP RESULT LAYOUT  (additive — ≥1024px only; mobile + iOS untouched)
 * ----------------------------------------------------------------------------
 * Translates "MeowTarot Reading Desktop.dc.html" Frame B (single-card result)
 * into a two-column reading: the drawn card + title sits in a sticky left rail,
 * the interpretation panels flow in a wider right column. Pure CSS — the result
 * is JS-rendered with i18n via common.js, so this one block serves EN + TH and
 * needs no markup change. The share poster itself is unchanged (mobile reuse);
 * only the page chrome around it widens.
 *
 * Scope is locked to body[data-reading-mode='daily'] so Question/Full are never
 * touched (Hard rule 6: surgical per-mode). asset-resolver / poster untouched.
 * ==========================================================================*/
@media (min-width: 1024px) {
  /* Daily-scoped: Question/Full results keep their narrow column until their own
   * desktop layouts land, so they don't stretch into an unreadable wide column. */
  body[data-page='reading'][data-reading-mode='daily'] .page-shell {
    max-width: 1120px;
    padding: 28px 32px 96px;
  }

  /* Daily single-card: card+caption left (sticky), interpretation right.
   * The real panel container is .daily-reading-stage — #reading-content holds a
   * single stage child, and the stage stacks: question-recap, spread (the card),
   * daily-interp-panel, daily-reading-details, related-links. We grid the stage:
   * the .panel--spread (card art + name + lucky-colour caption) becomes the
   * sticky left rail; every other panel flows down the wider right column. */
  body[data-page='reading'][data-reading-mode='daily'] .daily-reading-stage {
    display: grid;
    grid-template-columns: minmax(320px, 372px) minmax(0, 1fr);
    column-gap: 52px;
    /* row-gap MUST stay 0: the card spans many implicit rows for sticky travel,
     * and any row-gap would be multiplied across every empty track (a 944px
     * phantom gap with row-gap:16). Right-column spacing is via margin-bottom. */
    row-gap: 0;
    align-items: start;
  }
  body[data-page='reading'][data-reading-mode='daily'] .daily-reading-stage > .panel--spread {
    grid-column: 1;
    grid-row: 1 / span 99;
    align-self: start;
    position: sticky;
    top: 24px;
    margin: 0;
  }
  body[data-page='reading'][data-reading-mode='daily'] .daily-reading-stage > :not(.panel--spread) {
    grid-column: 2;
    margin: 0 0 16px 0;
  }
  /* Mobile forces page-shell to full viewport height; on desktop the two-column
   * result is short, so drop the forced height to avoid a dead gap before the
   * Save/Share gateway, and present that gateway as a centred CTA rather than a
   * full-bleed band. (Poster image itself is unchanged — mobile reuse.) */
  body[data-page='reading'][data-reading-mode='daily'] .page-shell {
    min-height: auto;
  }
  body[data-page='reading'][data-reading-mode='daily'] .action-row {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================================
 * DESKTOP RESULT — QUESTION (3-card spread)   (additive — ≥1024px only)
 * ----------------------------------------------------------------------------
 * Frame B adapted for the Past/Present/Future spread. Here the panels are
 * DIRECT children of #reading-content (no .daily-reading-stage wrapper), so we
 * grid #reading-content itself: the 3-card .panel--spread becomes the sticky
 * left rail; recap + story + takeaway + energy + related flow in the right
 * column. Scoped to [data-reading-mode='question'] (Hard rule 6). row-gap:0 +
 * big-span technique avoids phantom gaps. Spread thumbs are small at this size,
 * so existing art resolution is fine; asset-resolver / poster untouched.
 * ==========================================================================*/
@media (min-width: 1024px) {
  body[data-page='reading'][data-reading-mode='question'] .page-shell {
    max-width: 1120px;
    padding: 28px 32px 96px;
    min-height: auto;
  }
  body[data-page='reading'][data-reading-mode='question'] #reading-content {
    display: grid;
    grid-template-columns: minmax(330px, 396px) minmax(0, 1fr);
    column-gap: 52px;
    row-gap: 0;
    align-items: start;
  }
  body[data-page='reading'][data-reading-mode='question'] #reading-content > .panel--spread {
    grid-column: 1;
    grid-row: 1 / span 99;
    align-self: start;
    position: sticky;
    top: 24px;
    margin: 0;
  }
  body[data-page='reading'][data-reading-mode='question'] #reading-content > :not(.panel--spread) {
    grid-column: 2;
    margin: 0 0 16px 0;
  }
  body[data-page='reading'][data-reading-mode='question'] .action-row {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================================
 * DESKTOP RESULT — FULL / CELTIC CROSS (10 cards)   (additive — ≥1024px only)
 * ----------------------------------------------------------------------------
 * Frame C: the ten-card cross breathes in a wide sticky LEFT column while the
 * ten-cards summary, per-card interpretation, integration and energy panels
 * scroll in a 460px RIGHT column. The celtic-hero title spans the full width on
 * top. Scoped to [data-reading-mode='full'] (Hard rule 6). row-gap:0 + big-span
 * technique. asset-resolver / poster untouched.
 * ==========================================================================*/
@media (min-width: 1024px) {
  body[data-page='reading'][data-reading-mode='full'] .page-shell {
    max-width: 1280px;
    padding: 28px 32px 96px;
    min-height: auto;
  }
  body[data-page='reading'][data-reading-mode='full'] #reading-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    column-gap: 44px;
    row-gap: 0;
    align-items: start;
  }
  body[data-page='reading'][data-reading-mode='full'] #reading-content > .panel--celtic-hero {
    grid-column: 1 / -1;
    text-align: center;
    margin: 0 0 10px;
  }
  body[data-page='reading'][data-reading-mode='full'] #reading-content > .panel--celtic-cross {
    grid-column: 1;
    grid-row: 2 / span 99;
    align-self: start;
    position: sticky;
    top: 24px;
    margin: 0;
  }
  body[data-page='reading'][data-reading-mode='full'] #reading-content > :not(.panel--celtic-cross):not(.panel--celtic-hero) {
    grid-column: 2;
    margin: 0 0 16px 0;
  }
  body[data-page='reading'][data-reading-mode='full'] .action-row {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================================
 * DESKTOP GATEWAY — Save/Share relocated into the sticky left rail (≥1024px)
 * ----------------------------------------------------------------------------
 * reading.js MOVES the .action-row into the rail panel (.panel--spread /
 * .panel--celtic-cross) on desktop and tags it .action-row--rail. Here it
 * becomes a self-contained "gateway" card beneath the poster: full-width
 * stacked buttons on a soft surface, so Save/Share travel with the sticky card
 * column instead of stranding at the page bottom. Placed AFTER the per-mode
 * blocks above so the equal-specificity (0,3,1) tie resolves in its favour;
 * the double class .action-row.action-row--rail matches that specificity.
 * Mobile (<1024px) never sees this rule, and the node lives at its home there.
 * ==========================================================================*/
@media (min-width: 1024px) {
  body[data-page='reading'] .action-row.action-row--rail {
    max-width: none;
    margin: 18px 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: var(--mt-cream, #fff8ec);
    border: 1px solid var(--mt-gold-pale, #e8c478);
    box-shadow: 0 10px 28px -18px rgba(61, 26, 92, 0.45);
  }
  body[data-page='reading'] .action-row.action-row--rail .primary,
  body[data-page='reading'] .action-row.action-row--rail .ghost {
    width: 100%;
    margin: 0;
  }
}