/* ─────────────────────────────────────────────────────────────────
   Timeward — track record
   The public record: calls written down before they happened, pinned
   to the price they were made at, each one linked to the original.
   Same rules as the rest of the site: monochrome, hairlines, no hue,
   nothing follows the pointer — tips anchor to their pin, not the cursor.
   ───────────────────────────────────────────────────────────────── */

/* ── opening ─────────────────────────────────────────────────────── */
.rec-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.rec-hero .display { max-width: 15ch; }
.rec-stats { margin-top: clamp(36px, 4vw, 56px); }
.rec-count { font-variant-numeric: tabular-nums; }
.rec-note {
  margin-top: 18px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .03em;
  color: var(--ash); max-width: 78ch; line-height: 1.7;
}

/* ── section heads ───────────────────────────────────────────────── */
.rec-sec { padding-block: clamp(56px, 7vw, 110px); }
.rec-head { display: grid; gap: 10px; margin-bottom: clamp(26px, 3vw, 40px); max-width: 70ch; }
.rec-head .h2 { margin: 0; }
.rec-head .body { margin: 4px 0 0; }

/* ── the chart: a price line read like a long exposure ───────────── */
.rec-chart {
  position: relative; border: 1px solid var(--hairline); border-radius: 6px;
  background:
    radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--ink) 5%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--white) 70%, transparent), color-mix(in srgb, var(--paper) 40%, transparent));
  overflow: hidden;
}
.rec-chart::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--prism); opacity: .45; }
.rec-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.rec-chart .ax line { stroke: var(--hairline); stroke-width: 1; }
.rec-chart .ax text { fill: var(--ash); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.rec-chart .area { fill: url(#rec-fade); opacity: .9; }
.rec-chart .line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rec-chart .glow { fill: none; stroke: var(--ink); stroke-width: 6; opacity: .08; filter: blur(3px); }
.rec-chart .mark text { fill: var(--graphite); font-family: var(--font-mono); font-size: 11px; }
.rec-chart .mark line { stroke: var(--hairline-2); stroke-dasharray: 2 3; }

/* pins — a call on the day it was made */
.pin { cursor: pointer; outline: none; }
.pin .halo { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; }
.pin .dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; transition: r .25s var(--ease), fill .25s var(--ease); }
.pin:hover .dot, .pin:focus-visible .dot, .pin.is-on .dot { fill: var(--ink); }
.pin:focus-visible .ring, .pin.is-on .ring { opacity: .7; }
.pin .ring { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0; transition: opacity .25s var(--ease); }
.pin--feat .dot { stroke-width: 2.2; }

/* the draw — the line exposes left to right the first time it is seen */
@media (prefers-reduced-motion: no-preference) {
  .rec-chart .line, .rec-chart .glow { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); }
  .rec-chart .area, .rec-chart .pin, .rec-chart .mark { opacity: 0; transition: opacity .8s var(--ease-out); }
  .rec-chart.is-drawn .line, .rec-chart.is-drawn .glow { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.45,.05,.2,1); }
  .rec-chart.is-drawn .area { opacity: .9; transition-delay: 1.4s; }
  .rec-chart.is-drawn .mark { opacity: 1; transition-delay: 2.2s; }
  .rec-chart.is-drawn .pin { opacity: 1; transition-delay: calc(.4s + var(--at, 0) * 2.2s); }
  .rec-chart.is-drawn .pin--feat .halo { animation: pin-breathe 3.2s ease-in-out calc(2.8s + var(--at, 0) * 1s) infinite; }
}
@keyframes pin-breathe { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .14; transform: scale(1.5); } }

/* the tip: anchored to its pin */
.pin-tip {
  position: absolute; z-index: 3; width: min(340px, calc(100% - 24px));
  padding: 16px 18px 14px; border: 1px solid var(--hairline-2); border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.pin-tip.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pin-tip .tip-q { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.3; color: var(--ink); margin: 8px 0 8px; }
.pin-tip .tip-o { font-size: .86rem; color: var(--slate); margin: 0 0 12px; line-height: 1.5; }

.rec-legend { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; padding: 14px clamp(16px, 2vw, 24px); border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: .72rem; color: var(--ash); letter-spacing: .04em; }
.rec-legend i { display: inline-block; width: 9px; height: 9px; border: 1.5px solid var(--ink); border-radius: 50%; margin-right: 8px; vertical-align: -1px; }

/* ── shared meta bits ────────────────────────────────────────────── */
.src { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.src svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.src b { color: var(--ink); font-weight: 500; }
.rec-act { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .03em; color: var(--graphite); padding: 7px 11px; border: 1px solid var(--hairline-2); border-radius: 2px; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.rec-act:hover, .rec-act:focus-visible { color: var(--ink); border-color: var(--gold); background: var(--white); }
.rec-act--quiet { border-color: transparent; color: var(--ash); padding-inline: 4px; }
.rec-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── featured: six calls, each with its two timestamps ───────────── */
.rec-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; }
.fcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.4vw, 32px); background: var(--paper); min-width: 0; }
.fcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--prism); opacity: 0; transition: opacity .4s var(--ease); }
.fcard:hover::before { opacity: .6; }
.fcard-q { font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.25; color: var(--ink); margin: 0; text-wrap: pretty; }
.fcard-q::before { content: "“"; color: var(--ash); margin-right: .06em; }
.fcard-q::after { content: "”"; color: var(--ash); margin-left: .04em; }
.fcard-tr { font-size: .84rem; color: var(--ash); margin: -6px 0 0; font-style: italic; }
.fcard-o { font-size: .9rem; color: var(--slate); margin: 0; line-height: 1.55; }
.fcard .rec-acts { margin-top: auto; padding-top: 6px; }

/* the gap between the two stamps, set like a chronograph sub-dial */
.lapse { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-block: 1px solid var(--hairline); }
.lapse-s { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; color: var(--ash); text-transform: uppercase; line-height: 1.5; }
.lapse-s b { display: block; font-weight: 500; color: var(--ink); letter-spacing: .02em; text-transform: none; font-size: .76rem; white-space: nowrap; }
.lapse-s:last-child { text-align: right; }
.lapse-g { position: relative; justify-self: center; text-align: center; font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.1; color: var(--ink); padding-inline: 4px; white-space: nowrap; }
.lapse-g::before, .lapse-g::after { content: ""; position: absolute; top: 50%; width: 10px; height: 1px; background: var(--hairline-2); }
.lapse-g::before { right: 100%; } .lapse-g::after { left: 100%; }
@media (max-width: 980px) { .rec-feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rec-feat { grid-template-columns: 1fr; } }

/* ── the ledger ──────────────────────────────────────────────────── */
.rec-filters { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--ash); padding: 7px 12px; border: 1px solid var(--hairline); border-radius: 999px; transition: all .2s var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--hairline-2); }
.chip[aria-pressed="true"] { color: var(--on-accent); background: var(--ink); border-color: var(--ink); }
.chip .n { opacity: .6; margin-left: 5px; }
.rec-shown { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--ash); }

.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.ledger-y { display: flex; align-items: baseline; gap: 16px; padding: 30px 0 12px; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--ink); border-bottom: 1px solid var(--hairline); }
.ledger-y span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.lrow { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 8px clamp(16px, 2.4vw, 34px); padding: 20px 0; border-bottom: 1px solid var(--hairline); align-items: start; transition: background .25s var(--ease); }
.lrow:hover { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white) 55%, transparent) 20%, color-mix(in srgb, var(--white) 55%, transparent) 80%, transparent); }
.lrow-d { font-family: var(--font-mono); font-size: .76rem; color: var(--graphite); line-height: 1.5; padding-top: 3px; }
.lrow-d .src { display: flex; margin-top: 6px; white-space: nowrap; }
.lrow-q { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.35; color: var(--ink); margin: 0; text-wrap: pretty; }
.lrow-tr { font-size: .84rem; color: var(--ash); font-style: italic; margin: 4px 0 0; }
.lrow-o { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 10px 0 0; font-size: .88rem; color: var(--slate); line-height: 1.5; }
.lrow-then { font-family: var(--font-mono); font-size: .74rem; color: var(--graphite); white-space: nowrap; }
.lrow-then::after { content: "→"; margin-left: 10px; color: var(--ash); }
.lrow-lag { font-family: var(--font-mono); font-size: .7rem; color: var(--ink); border: 1px solid var(--hairline-2); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lrow .rec-acts { padding-top: 2px; justify-content: flex-end; }
.lrow[hidden] { display: none; }
@media (max-width: 760px) {
  .lrow { grid-template-columns: 1fr; }
  .lrow-d { display: flex; gap: 12px; align-items: center; padding: 0; }
  .lrow-d .src { margin: 0; }
  .lrow .rec-acts { justify-content: flex-start; }
  .rec-shown { margin-left: 0; width: 100%; }
}

/* ── the receipt viewer ──────────────────────────────────────────── */
.rec-lb { width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--hairline-2); border-radius: 6px; background: var(--paper); color: var(--ink); overflow: hidden; }
.rec-lb::backdrop { background: color-mix(in srgb, #050507 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rec-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
@media (prefers-reduced-motion: no-preference) { .rec-lb[open] { animation: lb-in .35s var(--ease-out); } }
@keyframes lb-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.lb-top { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--hairline); }
.lb-top .src { flex: 1; }
.lb-x { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--hairline-2); border-radius: 2px; color: var(--graphite); }
.lb-x:hover { color: var(--ink); border-color: var(--gold); }
.lb-img { overflow: auto; background: #0b0b0e; display: grid; place-items: start center; padding: clamp(10px, 2vw, 22px); }
.lb-img img { display: block; max-width: 100%; height: auto; border-radius: 3px; }
.lb-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; padding: 14px 20px 16px; border-top: 1px solid var(--hairline); }
.lb-o { margin: 0; font-size: .9rem; color: var(--slate); line-height: 1.5; }
.lb-nav { display: flex; gap: 6px; }
@media (max-width: 640px) { .lb-foot { grid-template-columns: 1fr; } }

/* ── close ───────────────────────────────────────────────────────── */
.rec-close { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.rec-close .disclaimer { margin: 0; }
@media (max-width: 860px) { .rec-close { grid-template-columns: 1fr; } }