/* How this was built: a visual record, not an essay. Scoped under body.record-page. Every
   card, thread and stat tile below reuses tokens already in assets/experience.css (paper
   ground, hairline rule, muted gray, the orange thread dot, the charcoal scrim); this file
   only adds the layout and the one new plain memory-card token DESIGN.md already reserves
   but never built (paper ground, ordinary card shadow, no rotation, no floating weight). */

.record-page .record-ledger {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 8px 0 12px;
}

/* The record's first handoff, composed as a photo-and-proof spread (docs/design/astra-
   recommendations.md section B.2): features-studio at ~320px/4:5 in an inset frame beside the
   saved-to-recalled pair, 40px gap, aligned to the photo's height. Below 1120px the proof pair
   moves first and the photo drops below, capped at 360px; below 700px the photo returns to
   normal flow at full width. This is the page's only photograph and its pair is still the
   page's only motion beat - nothing here adds a second one. */
.record-page .record-spread {
  padding: 8px 0 4px;
}
.record-page .spread-heading {
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.record-page .spread-body {
  display: flex;
  align-items: center;
  gap: 40px;
}
.record-page .spread-proof {
  flex: 1 1 auto;
  min-width: 0;
}
.record-page .spread-proof .memory-pair {
  max-width: none;
}
.record-page .spread-photo {
  flex: 0 0 320px;
  width: 320px;
}
.record-page .spread-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 1120px) {
  .record-page .spread-body {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .record-page .spread-proof {
    order: 1;
  }
  .record-page .spread-photo {
    order: 2;
    flex: none;
    width: 360px;
    max-width: 100%;
  }
}
@media (max-width: 700px) {
  .record-page .spread-photo {
    width: 100%;
  }
}

/* Memory pair: two plain memory-card asides joined by the thread connector. Desktop reads
   left to right; a fixed-width column for each card keeps the pair from stretching to the
   full measure on wide viewports. */
.record-page .memory-pair {
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  align-items: center;
  gap: 0;
  max-width: 920px;
}
.record-page .memory-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 12px 32px #2021240b;
}
/* Card header: memoryMark() renders the mark + Saved/Recalled label; the tool's own mark (if
   any) and time move to a source line below the memory text (docs/design/astra-recommendations.md
   section B.1/C - "mark plus action in the header; memory text below; source and time last"). */
.record-page .memory-card .memory-mark {
  margin-bottom: 2px;
}
.record-page .card-line {
  font-size: 17px;
  line-height: 1.5;
  margin-top: 14px;
}
.record-page .card-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}
.record-page .card-source img {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.record-page .card-tool {
  color: var(--muted);
}
.record-page .card-time {
  color: var(--muted);
}

/* The connector: photoSlot()'s wandering stroke-and-dot motif, reused rather than reinvented.
   Static by default (drawn complete from first paint); .pair-thread-animate is the one pair
   that gets the page's single motion moment, driven by the memory-pair-armed/in-view classes
   the inline script below toggles. */
.record-page .pair-thread {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.record-page .pair-thread-h {
  width: 100%;
  height: 40px;
  overflow: visible;
}
.record-page .pair-thread-v {
  display: none;
}
.record-page .pair-thread-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  opacity: .55;
}
.record-page .pair-thread-dot {
  fill: var(--orange);
}

/* Motion moment: armed only when the shared thread-arm observer decides motion is allowed
   (assets/experience.js, data-thread-arm="memory-pair"). The saved card appears, the line draws
   to the recalled card, then the recalled card appears; fires once, then holds. No JS, or
   reduced motion, leaves the pair in the base rules above: fully visible, fully drawn. Durations
   and travel reuse the shared tokens (docs/design/motion.md) rather than page-local numbers: the
   thread draw is the one authored --dur-focal beat, cards settle at --dur-layout over
   --travel-sm, and the dot's arrival uses --dur-state - the same "no visual or timing change"
   moment, now built from the system instead of magic numbers. */
.record-page .memory-pair-armed .memory-card-saved,
.record-page .memory-pair-armed .memory-card-recalled {
  opacity: 0;
  transform: translateY(var(--travel-sm));
  transition: opacity var(--dur-layout) var(--ease), transform var(--dur-layout) var(--ease);
}
.record-page .memory-pair-armed .pair-thread-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-focal) var(--ease) var(--dur-layout);
}
.record-page .memory-pair-armed .pair-thread-dot {
  opacity: 0;
  transition: opacity var(--dur-state) var(--ease) calc(var(--dur-layout) + var(--dur-focal));
}
.record-page .memory-pair-armed .memory-card-recalled {
  transition-delay: calc(var(--dur-layout) + var(--dur-focal) + var(--dur-state));
}
.record-page .memory-pair-in-view.memory-pair-armed .memory-card-saved,
.record-page .memory-pair-in-view.memory-pair-armed .memory-card-recalled {
  opacity: 1;
  transform: none;
}
.record-page .memory-pair-in-view.memory-pair-armed .pair-thread-line {
  stroke-dashoffset: 0;
}
.record-page .memory-pair-in-view.memory-pair-armed .pair-thread-dot {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .record-page .memory-pair-armed .memory-card-saved,
  .record-page .memory-pair-armed .memory-card-recalled {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .record-page .memory-pair-armed .pair-thread-line {
    stroke-dashoffset: 0;
    transition: none;
  }
  .record-page .memory-pair-armed .pair-thread-dot {
    opacity: 1;
    transition: none;
  }
}

/* Contrast block: a standing pattern, not a moment, so it is an open row, not a card
   (the Open Row Rule, DESIGN.md line 165): a hairline top border, no fill, no shadow. */
.record-page .ledger-note {
  border-top: 1px solid var(--line);
  padding-top: 32px;
  font-size: 19px;
  color: var(--ink);
  max-width: 62ch;
}

/* Timeline: one continuous hairline rule carrying the two real beats. The overnight point is an
   actual memory event, so it carries the 36px mark in a white-backed anchor (docs/design/astra-
   recommendations.md section C "Timeline points"), 8px clear of the rule on every side; the rule
   sits behind it in DOM order so the connector reads as stopping at the backing rather than
   crossing the mark. The human decision keeps its plain outlined ring - the mark never stands
   in for the human action. */
.record-page .beat-line {
  position: relative;
  display: flex;
  gap: 72px;
  padding: 4px 0 12px;
}
.record-page .beat-rule {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.record-page .beat-point {
  position: relative;
  flex: 1;
  padding-top: 58px;
  max-width: 420px;
}
.record-page .beat-mark {
  position: absolute;
  top: -4px;
  left: -10px;
  width: 52px;
  height: 38px;
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 8px 20px #2021240f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.record-page .beat-mark-icon {
  width: 36px;
  height: auto;
}
.record-page .beat-ring {
  position: absolute;
  top: 6px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.record-page .beat-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
.record-page .beat-time {
  display: block;
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: -.03em;
  font-size: 32px;
  margin-top: 4px;
}
.record-page .beat-point p {
  color: var(--muted);
  font-size: 15px;
  margin-top: 10px;
}
/* The morning point's recorded outcome, a separate labeled "Saved" line below its description -
   a callout (section C): the mark stacked in a narrow left column, the sentence following in
   the main column, built from memoryMark()'s own markup rather than a second helper. */
.record-page .beat-saved {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 18px;
}
.record-page .beat-saved .memory-mark {
  flex: 0 0 auto;
}
.record-page .beat-saved .memory-mark-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 0;
}
.record-page .beat-saved p {
  margin: 0;
  padding-top: 2px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Failure callout: the quietest block on the page. No card, no border, no fill, a
   smaller-weight heading rather than the page's usual display h2. */
.record-page .failure-callout {
  max-width: 62ch;
  padding: 8px 0 12px;
}
.record-page .failure-callout h2 {
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.03em;
}
.record-page .failure-callout p {
  color: var(--muted);
  font-size: 16px;
  margin-top: 14px;
}
/* The retained correction, a compact "Remembered" line immediately after the failure - no
   surrounding card (docs/design/astra-recommendations.md section B.1). Same callout anatomy as
   the timeline's beat-saved line: mark stacked in a narrow left column, sentence following. */
.record-page .failure-remembered {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 18px;
}
.record-page .failure-remembered .memory-mark {
  flex: 0 0 auto;
}
.record-page .failure-remembered .memory-mark-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 0;
}
.record-page .failure-remembered p {
  margin: 0;
  padding-top: 2px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Built with: a real section heading, role/tool rows (roleToolList(), styled globally in
   assets/experience.css), then two quiet stat tiles. No cards, no icons. */
.record-page .built-with {
  padding: 12px 0 8px;
}
.record-page .built-with h2 {
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.03em;
}
.record-page .built-with-intro {
  font-size: 16px;
  color: var(--muted);
  max-width: 60ch;
  margin-top: 14px;
}
.record-page .role-tool-list {
  margin-top: 24px;
}
.record-page .stat-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 36px;
}
.record-page .stat-tile {
  background: var(--surface-muted);
  border-radius: 12px;
  padding: 26px 28px;
}
.record-page .stat-number {
  display: block;
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: -.03em;
  font-size: 44px;
}
.record-page .stat-label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
}
.record-page .stat-detail {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}
.record-page .stat-note {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}

@media (max-width: 900px) {
  .record-page .memory-pair {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .record-page .pair-thread {
    padding: 6px 0;
  }
  .record-page .pair-thread-h {
    display: none;
  }
  .record-page .pair-thread-v {
    display: block;
    width: 40px;
    height: 110px;
  }
  .record-page .stat-tiles {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .record-page .record-ledger {
    gap: 40px;
  }
  .record-page .beat-line {
    flex-direction: column;
    gap: 28px;
  }
  .record-page .beat-rule {
    display: none;
  }
  .record-page .beat-point {
    max-width: none;
  }
  .record-page .beat-time {
    font-size: 27px;
  }
  .record-page .ledger-note {
    padding-top: 24px;
    font-size: 17px;
  }
  .record-page .stat-number {
    font-size: 36px;
  }
}