/* The reading frame: one chart over one dated log, host-agnostic like the module it dresses; the host seats the parts (the chart in a stage, the instrument on a strip, the log in a slip) and this sheet dresses each wherever it sits. */

.rf-chart {
  position: relative;
}
/* [data-vellum-style] scopes this to renderer-stamped charts, never the survey-track overlay svg; the host's box carries the sheet's depth. */
.rf-chart svg[data-vellum-style] {
  display: block;
  width: 100%;
  height: 100%;
}

.rf-status {
  margin: 0.6rem 0 0;
}

.rf-ages[hidden],
.rf-log[hidden] {
  display: none;
}

/* Keyed on the host-applied .rf-arrival, never [hidden]: the engine toggles hidden on every counter read, and display:none terminates an animation while restoring display starts it afresh, so a [hidden]-gated rule would replay the unfurl as a flash. */
.rf-arrival .rf-instrument,
.rf-arrival .rf-log {
  transform-origin: top center;
}
.rf-arrival .rf-instrument {
  animation: paperUnfurl var(--unfurl) var(--ease-unfurl) both;
}
.rf-arrival .rf-log {
  animation: paperUnfurl var(--unfurl) var(--ease-unfurl) var(--paper-quick) both;
}

.rf-instrument-strip {
  display: flex;
  flex-direction: column-reverse;
}

/* The live row mirrors the journal row the story is on: the shared gutter idiom but never the 2.1em drop cap, which would double the strip. */
.rf-told {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  margin: 0 0 0.5rem 6.4rem;
  font-size: 0.98rem;
  line-height: 1.4;
}
.rf-told[hidden] {
  display: none;
}
/* A mirror mirrors the voice too: the chronicler's annals are roman, so the strip's copy is roman. */
.rf-told .cr-year {
  flex: 0 0 3.6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--line-tan);
}
.rf-told .cr-text {
  color: var(--parchment-bright);
}
/* The survey half's day rows are italic in the journal, so the mirror takes that voice there. */
.rf-told.prologue .cr-text {
  font-family: var(--font-flourish, "Iowan Old Style", "Palatino", Georgia, serif);
  font-style: italic;
  color: var(--parchment);
}
.rf-told.prologue .cr-year {
  font-family: var(--font-flourish, "Iowan Old Style", "Palatino", Georgia, serif);
  font-weight: 400;
  font-style: italic;
}

.rf-instrument {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}
.rf-play {
  flex: none;
  width: 5.2rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0;
  font-family: var(--font-display, "Iowan Old Style", "Palatino", Georgia, serif);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--parchment);
  background: rgb(from var(--chart-ink) r g b / 0.5);
  border: 1px solid var(--line-tan);
  border-radius: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
/* The play triangle is drawn, not markup: the engine writes the label with textContent and would wipe a child. */
.rf-play::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(10% 5%, 90% 50%, 10% 95%);
}
/* Four classes deep: the house button hover wash is (0,3,1) and outranks a plain .rf-play:hover. */
.rf-instrument-strip .rf-instrument .rf-play:hover,
.rf-instrument-strip .rf-instrument .rf-play:focus-visible {
  background: var(--ink-dark);
  color: var(--parchment-bright);
}
.rf-range {
  flex: 1 1 8rem;
  min-width: 0;
  accent-color: var(--ink-brown);
}
.rf-year {
  flex: none;
  min-width: 5.4rem;
  text-align: right;
  margin-top: 0.45rem;
  font-variant-caps: small-caps;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--parchment-bright);
}
.rf-pace {
  flex: none;
  display: flex;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.rf-pace button {
  width: 1.9rem;
  height: 1.6rem;
  padding: 0;
  font-family: var(--font-display, "Iowan Old Style", "Palatino", Georgia, serif);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--line-tan);
  background: rgb(from var(--chart-ink) r g b / 0.5);
  border: 1px solid var(--line-tan);
  border-radius: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.rf-instrument-strip .rf-instrument .rf-pace button:hover,
.rf-instrument-strip .rf-instrument .rf-pace button:focus-visible {
  background: var(--ink-dark);
  color: var(--parchment-bright);
}
.rf-instrument-strip .rf-instrument .rf-pace button[aria-pressed="true"] {
  color: var(--ink-dark);
  background: var(--parchment);
}

.rf-log {
  padding: 0;
}
.rf-log-sig {
  margin: 0 0 0.5rem;
  font-style: italic;
  color: var(--ink-brown);
  border-bottom: 1px solid var(--line-faint);
  padding-bottom: 0.5rem;
}
.rf-log-sig:empty {
  display: none;
}

/* The strip flows at every width with no breakpoint, so the reading never differs by viewport width; bounded by construction (14 chronicle events at most, 19 to 24 voyage legs, about 35 rows), and the slip it rides in is what scrolls. */
.rf-log-strip {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rf-log-strip li {
  display: flex;
  gap: 0.9rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--line-faint);
  opacity: 0.4;
  transition:
    opacity 0.18s,
    transform 0.18s;
}

.rf-log-strip li.inked {
  opacity: 1;
  transform: translateX(2px);
}
.rf-log-strip li.prologue {
  border-left: 3px solid var(--line-tan);
  padding-left: 0.7rem;
}
.rf-log-strip li.prologue .cr-text {
  font-style: italic;
  color: var(--ink-surveyor);
}
.rf-log-strip li.prologue .cr-year {
  font-weight: 400;
  font-style: italic;
  color: var(--ink-surveyor-faded);
}
.rf-log-strip li.annals-head {
  display: block;
  opacity: 1;
  font-family: var(--font-display, "Iowan Old Style", "Palatino", Georgia, serif);
  letter-spacing: 0.05em;
  color: var(--ink-brown);
  padding: 0.55rem 0 0.35rem;
}
.rf-log-strip .cr-dc {
  float: left;
  font-style: normal;
  color: var(--ink-dark);
  font-family: var(--font-display, "Iowan Old Style", "Palatino", Georgia, serif);
  font-size: 2.1em;
  line-height: 0.8;
  margin: 0.08em 0.12em 0 0;
}

/* 3.6rem: "day 105" runs wider than a bare year. */
.rf-log-strip .cr-year {
  flex: 0 0 3.6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-faded);
}
.rf-log-strip .cr-text {
  color: var(--ink-annals);
}