/* site-v48-lines-log-b: the job's own record, read as one tall receipt.
 * Left: heading, lead, and the model alone's record, a short stub that ends after three lines.
 * Right: the same model's record in Fractl Agents, one column that prints one entry per scroll state. The entry happening now is
 * large and lit (its part of the work, the line, one detail); earlier entries settle to one small line above; the last entry is
 * the real Site Intelligence card. No clocks: the order is the story.
 * Wide (1200px and up) + motion: pinned, state 0 to 7 = floor(scroll into the track / --pin-step), a --pin-hold at the end.
 * Narrow: top to bottom, every entry at full size, each lit as it passes 62% of the viewport. No JS or reduced motion: the final
 * state (as authored in the HTML), unpinned. Motion: tokens only, one curve, nothing on a timer. Nothing under 17px but the caption. */
.sec-rc{--mk:28px;--mg:16px}
.rc-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px var(--col-gap);align-items:start}
.rc-side{min-width:0}
.rc-lead{margin-top:var(--sp-lead);font-size:var(--fs-lead);line-height:1.5;color:var(--sub);max-width:26em}

/* ── a record: a paper-like column, a plain title, entries split by dashed rules ── */
.rc-stub,.rc-rec{margin:0;min-width:0;background:var(--panel);border:1px solid var(--edge);border-radius:14px}
.rc-rh{padding:14px 22px 13px;border-bottom:1px solid var(--edge);font-size:17px;line-height:1.35;font-weight:600;color:var(--sub)}
.rc-rec .rc-rh{color:var(--teal-hi)}
/* the marker in the gutter: a dot for the agent, Maya's initial when a person acts */
.rc-m{flex:none;width:var(--mk);display:grid;place-items:center}
.rc-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dim)}
.rc-av{height:var(--mk);border-radius:50%;background:var(--teal);color:var(--teal-ink);font:600 15px/1 var(--sans)}
.rc-av-in{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;vertical-align:-4px;border-radius:50%;background:var(--teal);color:var(--teal-ink);font:600 13.5px/1 var(--sans)}

/* the spine: one line through the markers. The stub's ends at its third line; the record's runs on, with a dashed tail
   under the entry happening now until the deliverable arrives. */
.rc-e,.rc-s{position:relative}
.rc-m{position:relative;z-index:1}
.rc-dot::before{box-shadow:0 0 0 5px var(--panel)}
.rc-e::before,.rc-s::before{content:"";position:absolute;left:calc(22px + var(--mk) / 2 - .5px);top:0;bottom:0;width:1px;background:var(--border)}
.rc-s:first-child::before{top:24px}
.rc-s:last-child::before{bottom:auto;height:24px}
.rc-e:first-child::before{top:22px}
.rc-e.is-cur::before{bottom:auto;height:36px}
.rc-e.is-cur:first-child::before{display:none}
.rc-e.is-cur:not(.rc-end)::after{content:"";position:absolute;left:calc(22px + var(--mk) / 2 - .5px);top:48px;bottom:0;border-left:1px dashed var(--teal)}
/* the model alone: three lines, then the record simply ends */
.rc-stub{margin-top:clamp(28px,4.4vh,44px);max-width:430px}
.rc-s{display:flex;gap:var(--mg);align-items:flex-start;padding:12px 22px;font-size:17px;line-height:1.45;color:var(--sub)}
.rc-s+.rc-s{border-top:1px dashed var(--edge)}
.rc-s .rc-m{margin-top:-1px}
.rc-s .rc-dot{height:24px}
.rc-tips{margin-top:4px;color:var(--ink)}
.rc-stop p{color:var(--ink)}
.rc-cap{margin-top:clamp(16px,2.6vh,26px)}

/* the record in Fractl Agents */
.rc-list{padding:4px 0 8px}
.rc-e{display:flex;gap:var(--mg);align-items:flex-start;padding:9px 22px}
.rc-e+.rc-e{border-top:1px dashed var(--edge)}
.rc-e .rc-m{height:24px}
.rc-e .rc-av{height:var(--mk);margin-top:-2px}
.rc-b{min-width:0;flex:1}
.rc-kick{display:none;font-size:17px;line-height:1.35;font-weight:600;color:var(--teal-hi);margin-bottom:6px}
.rc-line{font-size:17px;line-height:1.4;color:var(--sub);text-wrap:pretty}
.rc-det{display:none;margin-top:10px;font-size:var(--fs-body);line-height:1.5;color:var(--sub)}
.rc-det s{color:var(--sub);text-decoration-thickness:1.5px;margin-right:6px}
.rc-card{display:none}

/* the entry happening now: large and lit */
.rc-e.is-cur{padding-block:18px 20px}
.rc-e.is-cur .rc-kick,.rc-e.is-cur .rc-det{display:block}
.rc-e.is-cur .rc-line{font-size:clamp(24px,2vw,30px);line-height:1.22;letter-spacing:-.02em;font-weight:500;color:var(--ink)}
.rc-e.is-cur .rc-dot::before{width:13px;height:13px;background:var(--teal-hi)}
.rc-e.is-cur .rc-m{height:36px}
.rc-e.is-off{display:none}
/* the deliverable is the last entry: the real card */
.rc-end.is-cur .rc-card{display:block;margin-top:14px;max-width:560px}
.rc-card img{display:block;width:100%;height:auto;border-radius:12px} /* v52: no card shadow (the app has none) */
.rc-end.is-cur .rc-line-end{font-size:clamp(22px,1.7vw,26px)}

.rc-close{padding:clamp(8px,2vh,20px) 0 var(--sec-pad)}
.rc-close p:not(.cap){max-width:40em;font-size:var(--fs-lead);line-height:1.5;color:var(--ink);text-wrap:pretty}
.rc-plain .ctas{margin-top:18px}

/* ── motion (html.anim only): the new entry rises, the stub's two lines print once ── */
html.anim .rc-in .enter{animation:rise var(--motion-medium) var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
html.anim .rc-e.enter .rc-det{animation:rise var(--motion-medium) var(--ease-out) 120ms both}
html.anim .rc-e.enter .rc-card{animation:rise var(--motion-slow) var(--ease-out) 120ms both}
html.anim .rc-e .rc-line{transition:color var(--motion-base) var(--ease-out)}
.rc-in.snap *,.rc-in.snap *::before{transition:none!important;animation:none!important}

/* ── wide: pinned ── */
@media (min-width:1200px){
  html.anim .rc-s.is-off{visibility:hidden}
  html.anim .sec-rc{padding-block:0}
  html.anim .rc-track{height:calc(100svh + 7 * var(--pin-step) + var(--pin-hold))}
  html.anim .rc-pin{position:sticky;top:0;height:100svh;overflow:hidden}
  html.anim .rc-in{padding-top:clamp(32px,7svh,72px)}
}
@media (min-width:1200px) and (max-height:820px){
  .rc-e{padding-block:7px}
  .rc-e.is-cur{padding-block:14px 16px}
  .rc-end.is-cur .rc-card{max-width:500px;margin-top:12px}
  .rc-e.is-cur::before{height:32px}
  .rc-stub{margin-top:24px}
  .rc-s{padding-block:10px}
}

/* ── narrow: one column, every entry at full size, lit as it passes ── */
@media (max-width:1199px){
  .rc-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .rc-stub{max-width:640px}
  .rc-rec{max-width:760px}
  .rc-e,.rc-e.is-set,.rc-e.is-off{display:flex;padding-block:16px 18px}
  .rc-e .rc-kick,.rc-e .rc-det{display:block}
  .rc-e .rc-line{font-size:clamp(20px,2.6vw,24px);line-height:1.25;letter-spacing:-.015em;font-weight:500;color:var(--ink)}
  .rc-end .rc-card{display:block;margin-top:14px}
  .rc-e .rc-m{height:30px}
  .rc-e::before,.rc-e.is-cur::before{display:block;top:0;bottom:0;height:auto}
  .rc-e:first-child::before{top:31px}
  .rc-e:last-child::before{bottom:auto;height:31px}
  .rc-e.is-cur:not(.rc-end)::after{display:none}
  .rc-e.is-cur .rc-dot::before{width:9px;height:9px}
  html.anim .rc-e{transition:opacity var(--motion-medium) var(--ease-out)}
  html.anim .rc-e.is-off{opacity:.3}
  .rc-e.is-cur .rc-dot::before{box-shadow:none}
  .rc-e:not(.is-off) .rc-dot::before{background:var(--teal-hi)}
}
/* phone play (shared/stage.js + record.js): the record plays itself; its dots sit under its title */
@media (max-width:899px){
  .rc-dots{margin:2px 0 0 calc(22px - 17px)}
  /* the first three entries until "Show the rest of the record" (record.js SHOW = 3) */
  .rc-rec.rc-short .rc-e:nth-child(n+4){display:none}
  .rc-more{width:calc(100% - 44px);margin:4px 22px 18px}
}
@media (max-width:640px){
  .rc-dots{margin-left:calc(16px - 17px)}
  .rc-more{width:calc(100% - 32px);margin-inline:16px}
  .sec-rc{--mk:26px;--mg:12px}
  .rc-e,.rc-s{padding-inline:16px}
  .rc-rh{padding-inline:16px}
  .rc-end .rc-card{margin-left:calc(-1 * (var(--mk) + var(--mg)))}
}
@media (min-width:1200px) and (min-height:860px){.rc-end.is-cur .rc-card{max-width:620px}}