/* public/css/transits.css
   ════════════════════════════════════════════════════════════════════
   Personal Transits — Commit 7.2 polish + B3 detail.

   Visual references (read these to understand the chrome):
   - design_handoff_ask_oracle_and_transits 2/source/transits.jsx
   - Krysta's checkpoint screenshots (B1 hero/cards, B3 detail layers)

   Tokens used throughout:
     --tr-cream     #F7D1AC   (warm cream — body + caps)
     --tr-cream-2   #E1E1DF   (paper white — titles)
     --tr-gold      #C9A96D   (tier labels, ornament rules)
     --tr-chartreuse #E0F251  (peak markers, NOW bloom, TIME TRAVEL pill)
     --tr-velvet    cardchrome
*/

/* ─── Shared tokens ──────────────────────────────────────────────── */

/* ─── ROUND-5/6 STRUCTURAL FIX ────────────────────────────────────────
   The diagnostic overlay placed step-transits-feed at rect.top=715px
   inside a 1237px-tall body on a 714px viewport. That number matched
   100dvh on the device exactly — the kit's
   `.step.library-ornate { min-height: 100dvh }` was reserving an
   off-screen viewport-tall column ahead of the transit step inside
   main.app's flex column. 7.5k tried defending with
   `.step:not(.active){display:none}`, but Krysta confirmed the gap
   was still there.

   7.5l sledgehammer: when the body carries `.on-transits-chamber`
   (toggled by goToStep + openFeed/openDetail), main.app is taken OUT
   of flex mode entirely. Stops being a flex container → no flex
   children → no min-height reservation game. Inactive steps with
   display:none stop affecting layout, period.

   PLUS belt + suspenders: `.step:not(.active){display:none!important}`
   stays, so even if main.app falls back to flex somehow, no sibling
   step can leak vertical space. */
body.on-transits-chamber main.app {
  display: block !important;
  min-height: 100dvh;
  align-items: initial;
}
.step:not(.active) {
  display: none !important;
}

/* ─── 7.5m NUCLEAR OPTION ────────────────────────────────────────────
   If the flex-flatten + non-active-step display:none didn't kill the
   gap (Krysta says it's still there), pin the active step to position:
   absolute relative to body. That removes the step from the document
   flow entirely. Nothing in the ancestor chain — main.app, app-shell,
   sibling layout — can offset the step from y=0 of the body.

   body already has `position: relative` (oracle.css line 160), so
   absolute children resolve against it. min-height: 100dvh + overflow-y:
   auto means the step is its own scrollable container, no dependency
   on body's layout. */
#step-transits-feed.active,
#step-transits-detail.active {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  /* iOS PWA standalone safe-area harmonization */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ─── Layout architecture (round-4 structural rewrite) ────────────────
   Krysta flagged this as the 4th round on the "content pushed down"
   bug. Audit found two real causes:

   1. No iOS safe-area-inset-top support on the topbar. On notched
      iPhones the topbar buttons sat under the notch and the visible
      content started below the notch + the rest of the chrome,
      which the user perceived as "content pushed down."
   2. The transit chrome used a relative-positioned topbar that ate
      vertical space in flow. Library + account use an absolute-
      positioned topbar with the body taking padding-top to reserve
      space, so content can extend up to the visual altitude of the
      topbar but the next vertical layer stays at the right altitude.

   Fix mirrors the library pattern (oracle.css `.library-ornate__*`):
   .tr-topbar is `position: absolute; top: 0;` with safe-area-aware
   padding-top, and `.tr-body` / `#tr-detail-body` take padding-top
   that matches the library's "Welcome Back" altitude (90px). Hero
   sits right under the topbar; first card visible above the fold.

   The step itself is plain `display: block`. No min-height — let
   content size naturally. .step.active flex inheritance is
   overridden so vertical centering can't sneak back in. */

#step-transits-feed,
#step-transits-detail {
  --tr-cream:        #F7D1AC;
  --tr-cream-2:      #E1E1DF;
  --tr-cream-soft:   rgba(247,209,172,0.55);
  --tr-cream-dim:    rgba(247,209,172,0.18);
  --tr-paper:        #F4F1EC;
  --tr-mute:         #A3A39E;
  --tr-gold:         #C9A96D;
  --tr-gold-soft:    rgba(201,169,109,0.38);
  --tr-chartreuse:   #E0F251;
  --tr-velvet-1:     rgba(20,17,13,0.82);
  --tr-velvet-2:     rgba(11,10,10,0.94);
  /* Body altitude — matches library-ornate__body padding-top (110px)
     so the hero sits at the same visual altitude as the library's
     "Welcome Back" heading. The topbar is absolutely positioned and
     uses the same fixed 54px padding-top library uses; this altitude
     reserves enough space for the topbar height + a small breathing
     gap. Fixed values throughout (no env-based padding) because that
     was the bug — env returned values north of 80px on some iPhones,
     bloating the topbar and pushing content too far down. */
  --tr-altitude: 110px;

  background: #000;
  color: var(--tr-cream-2);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  /* Reset .step inherited padding so the step is a clean block. */
  padding: 0;
  display: none;
  position: relative;
  overflow-x: hidden;
  /* No min-height — natural content height. */
  width: 100%;
  max-width: 100%;       /* override .step max-width:640 for full-bleed substrate */
}
#step-transits-feed.active,
#step-transits-detail.active {
  /* Overrides the .step.active flex layout — block flow only. The
     `!important` matches the existing library + account override
     pattern in oracle.css. Without it, .step.active's `display: flex`
     wins (declared later in the CSS load order). */
  display: block !important;
}

/* ─── Substrate: header-contained, fade-to-black ──────────────────── */
/* Round-2 fix #4. The full-bleed fixed substrate made body text
   unreadable as cards scrolled across it. Switching to the same
   pattern used elsewhere in the app (`.ok-substrate` in oracle-kit.css):
   the petal sits in a one-viewport header section, fades cleanly to
   transparent via mask-image, and everything below scrolls on solid
   black. */
.tr-substrate {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;            /* iOS dynamic viewport */
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  /* Fade-to-black mask. Image visible in the top ~50%, transparent at
     the bottom edge so the seam to page-bg #000 disappears. */
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    #000 42%,
    rgba(0,0,0,0.7) 62%,
    rgba(0,0,0,0.28) 80%,
    transparent 95%);
          mask-image: linear-gradient(180deg,
    #000 0%,
    #000 42%,
    rgba(0,0,0,0.7) 62%,
    rgba(0,0,0,0.28) 80%,
    transparent 95%);
}
.tr-substrate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.78;
}
.tr-substrate::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Soft dark wash on top of the image — petal stays visible but text
     in the header (eyebrow / hero title / lede) remains legible. The
     mask-image above handles the fade to black at the bottom; this
     gradient just dims the upper portion. */
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.55) 50%,
      rgba(0,0,0,0.92) 92%,
      rgba(0,0,0,1)   100%);
}

/* ─── Top bar (back arrow + TIME TRAVEL pill) ─────────────────────── */

/* Absolute-positioned topbar — mirrors .library-ornate__topbar. The
   body padding-top reserves the space so content sits below it
   naturally; the topbar floats over the substrate. */
.tr-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  /* iOS notched-phone safe area — env(safe-area-inset-top) is the
     vertical distance from the visible top to the safe content area.
     Falls back to 12px on non-notched displays. */
  /* Fixed 54px top padding — same value library uses. env-based
     padding was returning 80-90px on iPhones with the URL bar
     visible, which is what stacked all the extra "empty black"
     between the status bar and the topbar buttons. */
  padding: 54px 18px 12px;
  gap: 12px;
  /* Soft fade behind the topbar so a card scrolling underneath stays
     legible — same treatment as library. */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.7) 70%,
    rgba(0,0,0,0) 100%);
}
.tr-topbar__back {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(247,209,172,0.22);
  color: var(--tr-cream);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 16px; line-height: 1;
  padding: 0;
}
.tr-topbar__back:hover { color: var(--tr-paper); border-color: rgba(247,209,172,0.4); }
.tr-topbar__spacer { width: 36px; }

/* Wordmark center slot — small caps brand label */
.tr-topbar__wordmark {
  text-align: center;
  color: var(--tr-cream);
  font-family: "Futura PT", "Futura", "Avenir Next", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-indent: 0.42em;
}

/* TIME TRAVEL chartreuse pill */
.tr-tt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(224,242,81,0.95) 0%, rgba(194,211,61,0.95) 100%);
  border: 1px solid var(--tr-chartreuse);
  border-radius: 9999px;
  padding: 7px 14px 7px 12px;
  color: #0B0A0A;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.85), 0 0 10px rgba(224,242,81,0.25);
  cursor: pointer;
  transition: all 220ms ease;
}

/* ─── Viewing-state header (B5) ───────────────────────────────────
   Krysta 2026-06-04: redesigned from a bordered "banner" box into
   a clean single header row + thin full-width rule. In viewing mode
   the live-mode topbar chrome (back chevron + green TIME TRAVEL pill)
   is also hidden — those are entry controls, not exit controls.
   The exit control is the "Return to today →" link on the right of
   this row. */
.tr-viewing-banner {
  position: absolute;
  /* Match the topbar's top-padding pattern (54px) so the viewing
     header sits below the notch/status bar at the same altitude as
     the live-mode back chevron + TIME TRAVEL pill. The 7.5o version
     pinned this at top:12px which jammed it against the status bar. */
  top: 0;
  left: 14px; right: 14px;
  z-index: 21;                   /* above .tr-topbar (20) just in case */
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: max(54px, env(safe-area-inset-top, 12px) + 36px) 4px 10px;
  /* No background, no border, no border-radius, no blur — flat. */
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(247,209,172,0.18);
  border-radius: 0;
  color: var(--tr-chartreuse);
  font-family: var(--font-body, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* `[hidden]` attribute must beat the class display:flex above. */
.tr-viewing-banner[hidden] { display: none !important; }
.tr-viewing-banner__glyph { font-size: 12px; }
.tr-viewing-banner__label { flex: 1; }
.tr-viewing-banner__return {
  background: transparent;
  border: 0;
  color: var(--tr-cream);
  font-style: italic;
  font-family: var(--font-display, serif);
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  line-height: 1.1;
  cursor: pointer;
  padding: 0;
}
.tr-viewing-banner__return:hover { color: var(--tr-paper); }

/* In viewing mode: hide the live-mode topbar ENTIRELY (not just its
   children). 7.5o only hid .tr-topbar__back + .tr-tt-pill which left
   the 54px-padded black-gradient container floating at z-index:20
   above the viewing-banner — covering it visually AND swallowing the
   "Return to today" tap. Killing the whole container fixes both. */
#step-transits-feed.tr-mode--viewing .tr-topbar {
  display: none !important;
}
/* And the hero altitude stays as-is — .tr-body padding already
   accounts for the absolute-positioned viewing-banner height via
   var(--tr-altitude). No need to shift. */

/* ─── Time Travel panel (B5) ─────────────────────────────────────── */
/* CSS variables must be re-declared on the modal because it sits OUTSIDE
   the #step-transits-feed / #step-transits-detail scopes those tokens
   were originally declared on. Without this, `var(--tr-chartreuse)`
   resolved to nothing inside the modal — which is why the
   TRAVEL TO THIS DATE button rendered black/empty. */
.tr-tt-panel {
  --tr-cream:        #F7D1AC;
  --tr-cream-2:      #E1E1DF;
  --tr-cream-soft:   rgba(247,209,172,0.55);
  --tr-paper:        #F4F1EC;
  --tr-mute:         #A3A39E;
  --tr-gold:         #C9A96D;
  --tr-gold-soft:    rgba(201,169,109,0.38);
  --tr-chartreuse:   #E0F251;
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.tr-tt-panel--open { pointer-events: auto; }
.tr-tt-panel__scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  opacity: 0;
  transition: opacity 280ms ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.tr-tt-panel--open .tr-tt-panel__scrim { opacity: 1; }

.tr-tt-panel__sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #0E0B0E 0%, #0A0808 100%);
  border-top: 1px solid rgba(247,209,172,0.18);
  border-radius: 24px 24px 0 0;
  padding: 18px 22px max(36px, env(safe-area-inset-bottom, 36px));
  max-height: 92vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 -20px 40px rgba(0,0,0,0.5);
}
.tr-tt-panel--open .tr-tt-panel__sheet { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .tr-tt-panel__scrim,
  .tr-tt-panel__sheet { transition: none; }
}

.tr-tt-panel__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(247,209,172,0.08);
  border: 1px solid rgba(247,209,172,0.22);
  color: var(--tr-cream);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
/* Spiral sigil — Archimedean curl in ember-gold on a soft warm halo.
   Larger radial glow than the previous sigil — the design calls for
   a "soft warm radial glow behind it" reading. */
.tr-tt-panel__sigil {
  margin: 4px auto 16px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201,169,109,0.32) 0%,
    rgba(201,169,109,0.16) 30%,
    rgba(201,169,109,0.05) 55%,
    transparent 75%);
  display: flex; align-items: center; justify-content: center;
  color: var(--tr-gold);
  filter: drop-shadow(0 0 10px rgba(201,169,109,0.28));
}
.tr-tt-panel__sigil svg { display: block; }

.tr-tt-panel__title {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  color: var(--tr-paper);
}
.tr-tt-panel__lede {
  margin: 0 auto 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tr-cream-2);
  max-width: 340px;
}

/* Picker card — contained module per the kit. Holds the eyebrow,
   the 3-column picker, and the CTA together so the date interaction
   reads as one unit. */
.tr-tt-panel__pickercard {
  background: linear-gradient(180deg, rgba(20,17,13,0.6), rgba(11,10,10,0.85));
  border: 1px solid rgba(201,169,109,0.32);
  border-radius: 16px;
  padding: 18px 18px 22px;
  margin: 0 0 28px;
  box-shadow: 0 12px 28px -16px rgba(0,0,0,0.7);
}
.tr-tt-panel__pickereyebrow {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--font-body, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tr-cream-soft);
}
/* Single bordered panel — three columns separated by thin vertical
   dividers (border-left on the 2nd/3rd children). Per the design:
   one rounded module containing Month | Day | Year, not three boxes.
   overflow:hidden REMOVED — it was clipping the tops of the value
   glyphs in 7.5n. The rounded corners are fine without it because
   the child columns don't extend past the panel edges anyway. */
.tr-tt-panel__picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: rgba(247,209,172,0.04);
  border: 1px solid rgba(247,209,172,0.22);
  border-radius: 12px;
  margin: 0 0 18px;
}
.tr-tt-panel__pickwrap {
  position: relative;
  display: flex;
  flex-direction: column;       /* value on top, label below per kit */
  align-items: center;
  gap: 8px;
  /* Roomy top padding — Silver Editorial's cap height extends well
     above the select's line box at any size, so we give the column
     real breathing room rather than fight the metric. */
  padding: 22px 6px 14px;
  min-width: 0;
}
/* Vertical dividers between the three columns. */
.tr-tt-panel__pickwrap + .tr-tt-panel__pickwrap {
  border-left: 1px solid rgba(247,209,172,0.18);
}
.tr-tt-panel__picklabel {
  text-align: center;
  font-family: var(--font-body, sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tr-cream-soft);
}
/* Upright serif — Silver Editorial roman cut. 7.5p tuning: Silver
   Editorial's caps + descenders extend further past the em-box than
   most serifs, so at the prior 28px / line-height:1.25 the TOP of
   the glyph was still clipping inside the native <select> rendering.
   Drop size to 24px, line-height to 1.55, add real vertical padding,
   and give the field an explicit min-height so the line box is
   genuinely tall enough to contain the cap-top. */
.tr-tt-panel__pickfield {
  width: 100%;
  background: transparent;
  color: var(--tr-paper);
  border: 0;
  border-radius: 0;
  padding: 6px 2px 4px;
  font-family: "Silver Editorial", "Cormorant Garamond", "Times New Roman", serif;
  font-style: normal;          /* upright, NOT italic */
  font-weight: 400;
  font-size: 24px;
  line-height: 1.55;           /* tall line box → cap-top sits inside */
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  min-width: 0;
  min-height: 46px;            /* select content box big enough for glyph */
  overflow: visible;
  vertical-align: middle;
  box-sizing: border-box;
}
.tr-tt-panel__pickfield:focus {
  outline: 1px solid var(--tr-chartreuse);
  outline-offset: -1px;
}
.tr-tt-panel__pickfield option {
  background: #0E0B0E;
  color: var(--tr-paper);
  font-style: normal;
  font-family: "Silver Editorial", "Cormorant Garamond", "Times New Roman", serif;
}

.tr-tt-panel__cta {
  display: block;
  width: 100%;
  padding: 17px 22px;
  background: var(--tr-chartreuse);
  color: #0B0A0A;
  border: 1px solid var(--tr-chartreuse);
  border-radius: 9999px;
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.85), 0 0 22px rgba(224,242,81,0.32);
}
.tr-tt-panel__cta:hover { transform: translateY(-1px); }

.tr-tt-panel__suggestrule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.tr-tt-panel__suggestrule-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,109,0.4) 50%, transparent);
}
.tr-tt-panel__suggestrule-label {
  font-family: var(--font-body, sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tr-gold);
}

.tr-tt-panel__suggestlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tr-tt-panel__suggestion {
  background: rgba(247,209,172,0.04);
  border: 1px solid rgba(247,209,172,0.18);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--tr-cream-2);
  transition: all 200ms ease;
}
.tr-tt-panel__suggestion:hover {
  border-color: rgba(247,209,172,0.4);
  background: rgba(247,209,172,0.08);
}
.tr-tt-panel__sugg-label {
  margin: 0;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 18px;
  color: var(--tr-cream-2);
}
.tr-tt-panel__sugg-sub {
  margin: 4px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tr-cream-soft);
}
.tr-tt-panel__sugg-date {
  margin: 0;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 13px;
  color: var(--tr-gold);
  white-space: nowrap;
}
.tr-tt-panel__noresults {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--tr-cream-soft);
  font-style: italic;
}

/* Body locked while panel is open */
body.tr-tt-open { overflow: hidden; }
.tr-tt-pill:hover {
  background: linear-gradient(180deg, var(--tr-chartreuse), #C2D33D);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.85), 0 0 18px rgba(224,242,81,0.4);
}
.tr-tt-pill__glyph { font-size: 11px; line-height: 1; }

/* ─── Hero ────────────────────────────────────────────────────────
   Sits right under the topbar (body padding-top reserves space).
   The eyebrow + title match the kit's altitude — generous size for
   the brand visual weight, but constrained padding so the first card
   is still visible above the fold on a 700px viewport. */

.tr-hero {
  position: relative;
  z-index: 2;
  padding: 12px 22px 18px;
}
.tr-hero__eyebrow {
  color: var(--tr-chartreuse);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin: 0 0 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.95);
}
.tr-hero__title {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 400;
  /* Krysta 2026-06-04: bumped ~33% (30 → 40) so the hero has clear
     hierarchy over the card titles. Affects both the live and
     time-travel hero (they share the component). Card sizes unchanged. */
  font-size: 40px;
  line-height: 1.08;
  color: var(--tr-cream-2);
  letter-spacing: -0.008em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.95), 0 0 28px rgba(0,0,0,0.5);
}
.tr-hero__title i {
  color: var(--tr-cream);
  font-style: italic;
}
.tr-hero__lede {
  margin: 14px 0 0;
  color: var(--tr-cream-2);
  font-size: 16px;        /* bumped from 12.5 — paragraph readability */
  line-height: 1.55;
  max-width: 340px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.tr-hero__rule {
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tr-hero__rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,169,109,0.35) 50%,
    transparent 100%);
}
.tr-hero__rule-mark {
  color: var(--tr-gold);
  font-size: 9px;
  letter-spacing: 0.18em;
}

/* ─── Group headers (7.5q: MAJOR CYCLES / OPPORTUNITIES) ────────── */
.tr-group-header {
  margin: 18px 4px 10px;
  color: var(--tr-cream);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
/* First group header — no top margin; the hero already provides
   altitude. Subsequent group headers get the spacing above. */
.tr-group-header:first-of-type {
  margin-top: 8px;
}

/* ─── Body wrapper ────────────────────────────────────────────────── */

.tr-body {
  position: relative;
  z-index: 2;
  /* padding-top reserves space for the absolutely-positioned topbar.
     Matches the library "Welcome Back" altitude per Krysta's heading-
     altitude reference. Bottom clears the AskOracle dock. */
  padding: var(--tr-altitude) 14px 160px;
  max-width: 480px;
  margin: 0 auto;
}

/* ─── Soft-lock banner ────────────────────────────────────────────── */

.tr-softlock {
  background: linear-gradient(180deg, rgba(40,16,40,0.7), rgba(20,8,20,0.85));
  border: 1px solid rgba(247,209,172,0.22);
  border-radius: 12px;
  padding: 18px 18px 20px;
  margin: 0 0 18px;
  text-align: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tr-softlock__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tr-chartreuse);
  margin: 0 0 8px;
}
.tr-softlock__body {
  font-size: 16px;        /* bumped for paragraph readability */
  line-height: 1.55;
  color: var(--tr-cream-2);
  margin: 0 0 14px;
}
.tr-softlock__cta {
  background: var(--tr-chartreuse);
  color: #0B0A0A;
  border: 0;
  border-radius: 9999px;
  padding: 10px 22px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ─── Filter chips (Fix #4 taxonomy) ──────────────────────────────── */

.tr-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 4px 14px;
  margin: 0 0 8px;
  scrollbar-width: none;
}
.tr-filters::-webkit-scrollbar { display: none; }
.tr-chip {
  flex: 0 0 auto;
  background: rgba(247,209,172,0.06);
  color: var(--tr-cream-soft);
  border: 1px solid rgba(247,209,172,0.22);
  border-radius: 9999px;
  padding: 7px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: all 180ms ease;
}
.tr-chip--active {
  background: var(--tr-cream);
  color: #1a0e1c;
  border-color: var(--tr-cream);
}
.tr-chip:not(.tr-chip--active):hover {
  border-color: rgba(247,209,172,0.45);
  color: var(--tr-cream-2);
}

/* ─── Card grid ───────────────────────────────────────────────────── */

.tr-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tr-grid--background {
  opacity: 0.86;
  margin-top: 12px;
}

/* ─── Card chrome (Fix #7: kit-fidelity layout) ──────────────────── */

.tr-card {
  width: 100%;
  text-align: left;
  background:
    radial-gradient(ellipse 130% 80% at 50% 0%, rgba(201,169,109,0.18), transparent 62%),
    linear-gradient(180deg, var(--tr-velvet-1) 0%, var(--tr-velvet-2) 100%);
  border: 1px solid var(--tr-gold-soft);
  border-radius: 16px;
  padding: 18px 18px 20px;
  color: var(--tr-cream-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  min-height: 184px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 280ms ease, border-color 240ms ease, box-shadow 240ms ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 14px 36px -16px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(247,209,172,0.06),
    inset 0 -32px 48px -32px rgba(0,0,0,0.6);
}
.tr-card:hover {
  border-color: rgba(247,209,172,0.5);
  transform: translateY(-2px);
  box-shadow:
    0 18px 44px -14px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(247,209,172,0.07),
    inset 0 -36px 48px -32px rgba(0,0,0,0.65);
}
.tr-card:active { transform: translateY(0); }
.tr-card--peak {
  border-color: rgba(224,242,81,0.35);
  box-shadow:
    0 18px 44px -14px rgba(0,0,0,0.9),
    0 0 26px rgba(224,242,81,0.10),
    inset 0 1px 0 rgba(247,209,172,0.08);
}

/* Card head — glyph + intensity ring only. The per-card type eyebrow
   ("SLOW TRANSIT") was dropped per Krysta's 7.5 fix #7: same label on
   every card is noise; the glyph + intensity ring already communicate
   type and pressure. */
.tr-card__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tr-card__head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tr-card__rule {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--tr-gold) 0%, transparent 100%);
}
.tr-card__glyph {
  color: var(--tr-gold);
  font-family: var(--font-display, serif);
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.8));
}
.tr-card--lunar .tr-card__glyph { color: var(--tr-cream); }

.tr-card__body {
  position: relative;
  z-index: 2;
}
.tr-card__title {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.12;
  color: var(--tr-cream-2);
  letter-spacing: -0.005em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}
.tr-card__status {
  margin: 8px 0 0;
  color: rgba(247,209,172,0.65);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tr-card--peak .tr-card__status { color: var(--tr-chartreuse); }

/* 7.5ef — LIVE pill. When a transit's status begins with "LIVE", the
   renderer peels the prefix off and renders it as an inline acid-green
   pill ahead of the rest of the date string. Keeps the dim gold of the
   date readable while making the "this is happening now" signal pop. */
.tr-card__live-pill {
  display: inline-block;
  background: #CCFF00;
  color: #0A0A0A;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* Astrology subtitle — shows below the felt title when the
   interpretation has been generated. Mirrors the detail-screen
   .tr-detail-title__felt-sub treatment so the card and the reading
   it opens into stay visually consistent. */
.tr-card__astrology {
  margin: 6px 0 0;
  color: var(--tr-gold);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
/* Soft fade-in when a card's title is patched in by the batch-titles
   round-trip. The .tr-card--title-patched class lands once the felt
   title is mounted; the brief fade prevents a visible "pop". */
.tr-card--title-patched .tr-card__title,
.tr-card--title-patched .tr-card__astrology {
  animation: tr-title-fade 320ms ease-out;
}
@keyframes tr-title-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tr-card--title-patched .tr-card__title,
  .tr-card--title-patched .tr-card__astrology { animation: none; }
}

/* Intensity ring — true ring via conic + radial mask */
.tr-intensity {
  display: inline-block;
  width: var(--tr-size, 16px);
  height: var(--tr-size, 16px);
  border-radius: 50%;
  background: conic-gradient(
    var(--tr-ring-color, #D8C39A) var(--tr-pct, 0%),
    rgba(247,209,172,0.16) 0
  );
  -webkit-mask-image: radial-gradient(circle, transparent calc(var(--tr-size, 16px) * 0.26), #000 calc(var(--tr-size, 16px) * 0.3));
          mask-image: radial-gradient(circle, transparent calc(var(--tr-size, 16px) * 0.26), #000 calc(var(--tr-size, 16px) * 0.3));
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.7));
}
.tr-intensity--peak {
  --tr-ring-color: var(--tr-chartreuse);
  filter: drop-shadow(0 0 8px rgba(224,242,81,0.55));
}

/* Lunar moon graphic — large engraved moon at card right */
.tr-moon {
  position: absolute;
  top: 50%;
  right: -46px;
  transform: translateY(-50%);
  width: 188px;
  height: 188px;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
}
.tr-moon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tr-moon--full img {
  mix-blend-mode: screen;
  opacity: 0.74;
  filter: sepia(1) saturate(1.7) hue-rotate(-12deg) brightness(0.92) contrast(1.02);
}
.tr-moon--full::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(224,242,81,0.13) 0%,
    rgba(201,169,109,0.10) 38%,
    transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}
.tr-moon--new {
  background: radial-gradient(circle at 36% 30%, #26262b 0%, #161618 52%, #0c0c0e 100%);
  box-shadow:
    inset -10px -12px 34px rgba(0,0,0,0.85),
    inset 8px 9px 26px rgba(247,209,172,0.05),
    0 0 30px rgba(0,0,0,0.5);
}
.tr-moon--new img {
  mix-blend-mode: overlay;
  opacity: 0.30;
  filter: grayscale(1) brightness(0.55) contrast(1.1);
}

/* ─── Mini timeline (single-pass: not rendered) ───────────────────── */

.tr-timeline {
  margin-top: 12px;
  padding-top: 2px;
}
.tr-timeline__bar {
  position: relative;
  height: 16px;
}
.tr-timeline__track {
  position: absolute;
  top: 7px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(247,209,172,0.14),
    rgba(247,209,172,0.4),
    rgba(247,209,172,0.14));
}
.tr-timeline__ticks {
  position: absolute; inset: 0;
}
.tr-timeline__tick {
  position: absolute;
  top: 3px;
  width: 1px;
  height: 9px;
  background: rgba(247,209,172,0.32);
  transform: translateX(-50%);
}
.tr-timeline__tick--past {
  background: rgba(247,209,172,0.55);
}
.tr-timeline__now {
  position: absolute;
  top: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--tr-chartreuse) 0%,
    rgba(224,242,81,0.6) 50%,
    transparent 80%);
  box-shadow: 0 0 14px rgba(224,242,81,0.7);
  transform: translate(-50%, 0);
  animation: tr-bloom 3200ms ease-in-out infinite;
}
@keyframes tr-bloom {
  0%, 100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  50%      { opacity: 0.78; transform: translate(-50%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .tr-timeline__now { animation: none; }
}
.tr-timeline__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tr-cream-soft);
}
.tr-timeline__labels-peak { color: var(--tr-chartreuse); }

/* ─── Tier accordion (in-place, no scroll jump) ──────────────────── */
/* Round-4 item #13: the previous tier-collapse re-rendered the whole
   feed which scrolled the page back to top. This pattern mounts the
   collapsed grid in the DOM up-front (hidden via max-height:0) so the
   toggle just flips a class — preserves scroll position and lets us
   transition height smoothly. */

.tr-accordion {
  margin: 22px 0 0;
}
.tr-accordion__grid {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* Transition both dimensions. max-height transitions don't animate
     to `auto`, so we use a very large fixed value that always covers
     the content. The grid is constrained by its actual content. */
  transition: max-height 380ms ease-in-out, opacity 240ms ease-in-out, margin-top 280ms ease-in-out;
  margin-top: 0;
}
.tr-accordion--open .tr-accordion__grid {
  max-height: 6000px;
  opacity: 1;
  margin-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .tr-accordion__grid { transition: none; }
}

.tr-bg-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  width: 100%;
  padding: 8px 0;
  cursor: pointer;
  color: var(--tr-gold);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.tr-bg-toggle__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,169,109,0.35) 50%,
    transparent 100%);
}
.tr-bg-toggle__label { white-space: nowrap; }
.tr-accordion--open .tr-bg-toggle { color: var(--tr-cream); }

/* ─── Empty / loading / error / no-results ───────────────────────── */

.tr-loading {
  padding: 60px 0;
  text-align: center;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tr-cream-soft);
}
.tr-empty {
  padding: 60px 20px 40px;
  text-align: center;
}
.tr-empty__sigil {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  background: radial-gradient(circle,
    var(--tr-chartreuse) 0%,
    rgba(224,242,81,0.3) 40%,
    transparent 70%);
  border-radius: 50%;
  animation: tr-pulse 2400ms ease-in-out infinite;
}
@keyframes tr-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .tr-empty__sigil { animation: none; }
}
.tr-empty__title {
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 24px;
  margin: 0 0 10px;
  color: var(--tr-cream-2);
}
.tr-empty__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--tr-cream-soft);
  margin: 0;
}

.tr-error {
  padding: 40px 20px;
  text-align: center;
}
.tr-error__body {
  font-size: 16px;
  color: var(--tr-cream-2);
  margin: 0 0 16px;
}
.tr-error__retry {
  background: transparent;
  color: var(--tr-chartreuse);
  border: 1px solid var(--tr-chartreuse);
  border-radius: 9999px;
  padding: 9px 22px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
}

.tr-noresults {
  padding: 50px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--tr-cream-soft);
}

.tr-meta {
  text-align: center;
  margin: 28px 0 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tr-cream-dim);
}

/* ═════════════════════════════════════════════════════════════════════
   B3 — Detail screen
   ═════════════════════════════════════════════════════════════════════ */

/* Detail screen topbar — same absolute-positioned pattern as the feed
   topbar so the title block can extend up to its visual altitude. */
.tr-detail-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  /* Fixed 54px top padding — same value library uses. env-based
     padding was returning 80-90px on iPhones with the URL bar
     visible, which is what stacked all the extra "empty black"
     between the status bar and the topbar buttons. */
  padding: 54px 18px 12px;
  gap: 10px;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.7) 70%,
    rgba(0,0,0,0) 100%);
}
.tr-detail-top__type {
  text-align: center;
  color: var(--tr-gold);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.tr-detail-top__intensity {
  display: flex; justify-content: flex-end;
}

#tr-detail-body {
  position: relative;
  z-index: 2;
  /* Reserves space for the absolutely-positioned topbar (matches feed
     altitude). Bottom clears the AskOracle dock. */
  padding: var(--tr-altitude) 22px 160px;
  max-width: 520px;
  margin: 0 auto;
}

/* ─── Interpretation (7.4b) ───────────────────────────────────────── */

.tr-interpretation {
  margin: 28px 0 0;
  min-height: 120px;
}

/* Loading state — calculating sigil + line of copy. */
.tr-interp__loading {
  padding: 40px 8px 28px;
  text-align: center;
}
.tr-interp__sigil {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  background: radial-gradient(circle,
    var(--tr-chartreuse) 0%,
    rgba(224,242,81,0.32) 40%,
    transparent 70%);
  border-radius: 50%;
  animation: tr-pulse 2400ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tr-interp__sigil { animation: none; }
}
.tr-interp__loading-line {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 17px;
  color: var(--tr-cream-soft);
  letter-spacing: 0.01em;
}

/* Streamed body — paragraph stack with markdown accents. */
.tr-interp__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tr-interp__p {
  margin: 0;
  font-size: 22px;            /* round-4 typography bump */
  line-height: 1.55;
  color: var(--tr-paper);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.tr-interp__p strong {
  color: var(--tr-cream);
  font-weight: 600;
}
.tr-interp__p em {
  color: var(--tr-chartreuse);
  font-style: italic;
}
/* Subtle caret-like cue while a stream is in progress. */
.tr-interp__body--streaming .tr-interp__p:last-child::after {
  content: '\200B';
  display: inline-block;
  width: 1px;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--tr-cream-soft);
  margin-left: 2px;
  animation: tr-caret 900ms ease-in-out infinite;
}
@keyframes tr-caret {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-interp__body--streaming .tr-interp__p:last-child::after { animation: none; }
}

.tr-interp__error {
  padding: 32px 8px;
  text-align: center;
}
.tr-interp__error-body {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--tr-cream-2);
}

/* 7.5fs — mid-stream interruption notice. Sits BELOW the already-
   rendered prose (never replaces it) so the reader keeps whatever
   they were already reading and can choose to pull the rest. */
.tr-interp__partial {
  margin-top: 18px;
  padding: 16px 12px;
  text-align: center;
  border-top: 1px solid rgba(247,209,172,0.14);
}
.tr-interp__partial-body {
  margin: 0 0 12px;
  font-size: 15px;
  color: rgba(247,209,172,0.72);
  font-style: italic;
}

.tr-detail-title {
  text-align: center;
  padding: 0 6px 0;
}
.tr-detail-title__hero {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;            /* matches Library "Welcome Back" altitude */
  line-height: 1.06;
  color: var(--tr-paper);
  letter-spacing: -0.005em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.9);
}
.tr-detail-title__status {
  margin: 10px 0 0;
  color: rgba(247,209,172,0.7);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Felt-language subtitle — appears AFTER the felt-title swap (7.5c),
   carrying the technical astrology name as small-caps. Until the
   interpretation stream resolves, this element is absent and the
   astrology fills the hero slot directly. */
.tr-detail-title__felt-sub {
  margin: 12px 0 0;
  color: var(--tr-gold);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* ─── Hero timeline (large, on detail) ──────────────────────────── */

.tr-hero-timeline {
  margin: 34px 0 0;
  padding: 0 4px;
}
.tr-hero-timeline__bar {
  position: relative;
  height: 42px;
}
.tr-hero-timeline__track {
  position: absolute;
  top: 26px; left: 4px; right: 4px; height: 1px;
  background: linear-gradient(90deg,
    rgba(247,209,172,0.15),
    rgba(247,209,172,0.5) 50%,
    rgba(247,209,172,0.15));
}
.tr-hero-timeline__ticks { position: absolute; inset: 0; }
.tr-hero-timeline__tick {
  position: absolute;
  top: 21px;
  width: 1px;
  height: 11px;
  background: rgba(247,209,172,0.32);
  transform: translateX(-50%);
}
.tr-hero-timeline__tick--past { background: rgba(247,209,172,0.6); }
.tr-hero-timeline__now {
  position: absolute;
  top: 19px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--tr-chartreuse) 0%,
    rgba(224,242,81,0.6) 50%,
    transparent 80%);
  box-shadow: 0 0 18px rgba(224,242,81,0.7);
  transform: translate(-50%, 0);
  animation: tr-bloom 3200ms ease-in-out infinite;
}
.tr-hero-timeline__nowlabel {
  position: absolute;
  top: -2px;
  color: var(--tr-chartreuse);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.tr-hero-timeline__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tr-cream-soft);
}
.tr-hero-timeline__labels-peak { color: var(--tr-chartreuse); }

/* ─── ✦ ornament between hero + layers ──────────────────────────── */

.tr-ornament {
  margin: 32px 0 8px;
  text-align: center;
  color: rgba(201,169,109,0.55);
  font-size: 16px;
}

/* ─── 5 numbered layers ─────────────────────────────────────────── */

.tr-layers {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 12px;
}
.tr-layer__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.tr-layer__num,
.tr-layer__label {
  color: var(--tr-gold);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.tr-layer__label { font-weight: 500; }
.tr-layer__rule {
  display: block;
  height: 1px;
  margin: 4px 0 12px;
  background: linear-gradient(90deg, rgba(201,169,109,0.45), rgba(201,169,109,0));
}
.tr-layer__sub {
  color: var(--tr-cream);
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 13.5px;
  margin: 0 0 12px;
}
.tr-layer__body {
  color: var(--tr-paper);
  font-size: 20px;            /* round-4 typography bump */
  line-height: 1.58;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.tr-layer__scaffold {
  margin: 0;
  font-family: var(--font-display, serif);
  font-style: italic;
  color: var(--tr-cream-soft);
  font-size: 13px;
  line-height: 1.55;
}

/* The Invitation card */

.tr-invitation {
  padding: 32px 0 8px;
  text-align: center;
  border-top: 1px solid rgba(201,169,109,0.22);
  border-bottom: 1px solid rgba(201,169,109,0.22);
  margin-top: 8px;
}
.tr-invitation__eyebrow {
  color: var(--tr-gold);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  margin: 0 0 26px;
}
.tr-invitation__line {
  margin: 0 auto 26px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  color: var(--tr-paper);
  max-width: 340px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.tr-invitation__row {
  margin: 0 0 6px;
  color: var(--tr-gold);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ─── Ask-the-Oracle CTA (B3 pinned end-of-scroll) ──────────────── */

.tr-cta-wrap { padding: 36px 0 32px; }
.tr-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 22px 22px 24px;
  background: linear-gradient(180deg, rgba(11,10,10,0.7), rgba(11,10,10,0.95));
  border: 1px solid rgba(201,169,109,0.55);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--tr-paper);
  box-shadow:
    0 0 32px -8px rgba(201,169,109,0.25),
    inset 0 1px 0 rgba(247,209,172,0.06);
  transition: all 220ms ease;
}
.tr-cta:hover {
  border-color: rgba(247,209,172,0.7);
  background: linear-gradient(180deg, rgba(11,10,10,0.78), rgba(20,17,13,0.98));
  transform: translateY(-1px);
}
.tr-cta__sigil {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--tr-gold);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tr-cream);
  font-size: 26px;
  background: radial-gradient(circle, rgba(247,209,172,0.08) 0%, transparent 70%);
  flex-shrink: 0;
}
.tr-cta__body { display: flex; flex-direction: column; flex: 1; gap: 6px; }
.tr-cta__title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.2;
  color: var(--tr-paper);
}
.tr-cta__sub {
  color: var(--tr-mute);
  font-size: 13.5px;
  line-height: 1.5;
}