/* reader.css — reading-page typography for the conversation reader and the
 * timeline walk. Builds on the shared system in home.css; every value here
 * derives from its custom properties. A conversation reads like a book:
 * serif body, generous measure, roles marked by set and border, timestamps
 * quiet in the margin of each turn.
 */

/* ---------- the reader ---------- */

.jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--home-space-2) var(--home-space-3);
  background: var(--home-raised);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  padding: var(--home-space-3);
  margin-bottom: var(--home-space-4);
  font-family: var(--home-sans);
  font-size: 0.9rem;
}

.reader-log {
  max-width: var(--home-measure);
  margin: 0 auto var(--home-space-5);
}

.reader-title {
  border-bottom: 1px solid var(--home-line);
  padding-bottom: var(--home-space-2);
}

.reader-messages {
  font-family: var(--home-serif);
}

.msg {
  margin: 0 0 var(--home-space-4);
}

.msg-meta {
  font-family: var(--home-sans);
  font-size: 0.8rem;
  color: var(--home-text-dim);
  letter-spacing: 0.04em;
  margin: 0 0 var(--home-space-1);
}

.msg-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.65;
}

/* the human turn: right-set, marked by an ember rule */
.msg.human {
  margin-left: 12%;
  border-right: 2px solid var(--home-ember-dim);
  padding-right: var(--home-space-3);
}

.msg.human .msg-meta {
  text-align: right;
}

/* the assistant turn: left-set, marked by a quiet rule */
.msg.assistant {
  margin-right: 12%;
  border-left: 2px solid var(--home-line);
  padding-left: var(--home-space-3);
}

/* system events: centered, small caps, standing apart from the dialogue */
.msg.event {
  text-align: center;
  font-family: var(--home-sans);
  font-variant-caps: small-caps;
  color: var(--home-text-dim);
}

.msg.event .msg-meta {
  text-align: center;
}

/* ---------- the timeline walk ---------- */

.walk {
  max-width: var(--home-measure);
  border-left: 1px solid var(--home-line);
  padding-left: var(--home-space-4);
  margin-bottom: var(--home-space-4);
}

.walk-year {
  font-size: 1.5rem;
  margin: var(--home-space-5) 0 var(--home-space-2);
}

.walk > .walk-year:first-child {
  margin-top: 0;
}

.walk-month {
  color: var(--home-text-dim);
  font-size: 1rem;
  margin: var(--home-space-3) 0 var(--home-space-2);
}

/* an era band: the member's own season, drawn alongside the stops it covers */
.walk-band {
  font-family: var(--home-sans);
  font-size: 0.85rem;
  color: var(--home-caution);
  border-left: 3px solid var(--home-ember-dim);
  padding: var(--home-space-1) var(--home-space-2);
  margin: var(--home-space-3) 0 var(--home-space-2);
}

.walk-stop {
  display: block;
  color: var(--home-text);
  border-bottom: 1px solid var(--home-line);
  padding: var(--home-space-2);
  transition: background 120ms ease, color 120ms ease;
}

.walk-stop:hover {
  background: var(--home-inset);
  color: var(--home-ember);
  border-bottom-color: var(--home-line);
}

.walk-provider {
  font-family: var(--home-mono);
  font-size: 0.8rem;
  color: var(--home-text-faint);
}

/* ---------- small rooms ---------- */

@media (max-width: 720px) {
  .msg.human  { margin-left: 6%; }
  .msg.assistant { margin-right: 6%; }
  .walk { padding-left: var(--home-space-3); }
}