/* Example run viewer (docs/examples/<slug>/), on top of site.css. Under the site header the viewer fills the rest
   of the screen: a title bar, the "who worked when" timeline, then the resume and the chat side by side, each with
   its own scroll. Phones get tabs for the two panes. The resume is drawn as the PDF that make_pdf.py prints. */
:root {
  --desk: #e9e3d9; --violet: #6a55a3; --gold: #8a6a12;
  --paper: #ffffff; --paper-ink: #141414; --paper-rule: #555555; --paper-muted: #5a5a5a;  /* white in both themes, like a PDF */
  --p-cut: #fbe3dd; --p-cut-ink: #a33a1f; --p-rw: #fdf0d2; --p-new: #e3f1df; --p-note: #2c5d93;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --pdf: Helvetica, Arial, "Liberation Sans", "Nimbus Sans", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --desk: #0e0d0b; --violet: #a893e6; --gold: #d2ad4a; } }
:root[data-theme="dark"] { --desk: #0e0d0b; --violet: #a893e6; --gold: #d2ad4a; }

main.rv { max-width: none; padding: 0; font-size: 14px; line-height: 1.5; }
.rv-app { height: calc(100svh - var(--hdr, 61px)); min-height: 560px; display: flex; flex-direction: column; }
.rv :where(button, select, input) { font: inherit; color: inherit; }
.rv .muted { color: var(--muted); }
.rv .tl { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }

/* title bar */
.rv-bar { flex: none; border-bottom: 1px solid var(--line); }
.rv-bar .in { max-width: var(--wide); margin: 0 auto; display: grid; gap: 10px; padding: 14px var(--gutter) 18px; }
/* top row: home, back to the list, then the switcher, the details toggle and the theme */
.rv-top { display: flex; align-items: center; gap: 12px 16px; }
.rv-home { display: flex; flex: none; }
.rv-back { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; margin-right: auto; white-space: nowrap; }
.rv-back::before { content: "\2039"; font-size: 18px; margin-right: 6px; }
.rv-back:hover { color: var(--brand); }
.rv-top-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rv-top-r select { min-width: 0; max-width: 24rem; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surf); }
.rv-top-r .rv-ghost { white-space: nowrap; min-height: 36px; }
.rv-top-r .icon { width: 36px; height: 36px; }
.rv-bar h1 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); margin: 4px 0 0; letter-spacing: -0.015em; }
.rv-bar.closed .rv-details { display: none; }
.rv-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-fact { border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; font-size: 13px; color: var(--muted); background: var(--surf); white-space: nowrap; }
@media (max-width: 640px) { .rv-top-r select { max-width: 9.5rem; } }
/* "How this run was recorded": an i that shows its note on hover, focus or tap */
.rv-info { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 8px; border-radius: 50%; border: 1.5px solid var(--muted); color: var(--muted); font: italic 700 12px/1 Georgia, serif; vertical-align: 3px; cursor: help; letter-spacing: 0; }
.rv-info:hover, .rv-info:focus-visible { border-color: var(--brand); color: var(--brand); outline: none; }
.rv-tip { display: none; position: absolute; z-index: 20; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(26rem, 80vw); padding: 12px 14px; border-radius: 10px; background: var(--ink); color: var(--bg); font: 400 13px/1.5 "IBM Plex Sans", system-ui, sans-serif; text-align: left; box-shadow: var(--shadow); cursor: auto; }
.rv-tip b { font-weight: 700; }
.rv-info:hover .rv-tip, .rv-info:focus .rv-tip, .rv-info:focus-within .rv-tip { display: block; }
@media (max-width: 859px) { .rv-tip { left: auto; right: -8px; transform: none; } }

/* timeline */
.rv-time { flex: none; border-bottom: 1px solid var(--line); background: var(--surf); }
.rv-time > div { max-width: var(--wide); margin: 0 auto; }
.rv-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px var(--gutter); }
.rv-play { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--brand); background: var(--brand); color: var(--onbrand); border-radius: 10px; padding: 6px 14px 6px 11px; font-weight: 700; cursor: pointer; }
.rv-play svg { width: 14px; height: 14px; fill: currentColor; }
.rv-play:hover { filter: brightness(1.06); }
.rv-scrub { flex: 1 1 200px; min-width: 120px; accent-color: var(--brand); }
.rv-small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.rv-small select { padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); }
.rv-ghost { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.rv-ghost:hover { border-color: var(--brand); color: var(--brand); }
.rv-keys { font-size: 12.5px; color: var(--muted); margin: 0; }
.rv-settings { position: relative; }
.rv-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 15; width: min(22rem, calc(100vw - 32px)); display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: var(--surf); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rv-pop[hidden] { display: none; }
.rv-pop .rv-check { align-items: flex-start; color: var(--ink); line-height: 1.4; }
.rv-pop .rv-check input { margin-top: 2px; }
.rv-time.closed .rv-lanes-wrap { display: none; }
.rv-lanes-wrap { overflow-x: auto; padding: 2px var(--gutter) 16px; }
.rv-lanes { min-width: 640px; display: grid; grid-template-columns: 104px 1fr; row-gap: 5px; position: relative; }
.lane-label { font-size: 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.lane-label i, .rv .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.track { position: relative; height: 26px; background: var(--bg); border-radius: 5px; }
.blk { position: absolute; top: 1px; bottom: 1px; border: 0; border-radius: 4px; background: var(--c); opacity: .8; cursor: pointer; padding: 0 5px; color: var(--surf); font: 700 10.5px/16px "IBM Plex Sans", system-ui, sans-serif; text-align: left; overflow: hidden; white-space: nowrap; min-width: 5px; }
.blk.wait { background: repeating-linear-gradient(45deg, var(--c) 0 3px, transparent 3px 7px); opacity: .6; }
.blk.tick { width: 4px !important; padding: 0; }
.blk.future { opacity: 1; background: color-mix(in srgb, var(--c) 22%, var(--bg)); color: var(--ink); }
.blk.wait.future { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 30%, var(--bg)) 0 3px, transparent 3px 7px); }
.blk[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--surf), 0 0 0 4px var(--c); z-index: 1; }
.stepband { grid-column: 2; position: relative; height: 24px; }
.stepband button { position: absolute; top: 0; bottom: 2px; border: 0; border-left: 1px solid var(--line); background: transparent; padding: 0 0 0 5px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-align: left; cursor: pointer; }
.stepband button:hover, .stepband button.on { color: var(--brand); }
.stepband button.on { font-weight: 700; }
.playhead { position: absolute; top: 0; bottom: 0; left: 104px; width: 2px; background: var(--brand); pointer-events: none; transform: translateX(-1px); }
.playhead::before { content: ""; position: absolute; top: -1px; left: -4px; border: 5px solid transparent; border-top-color: var(--brand); }

/* panes */
.rv-panes { flex: 1; min-height: 0; width: 100%; max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(280px, var(--split, 50%)) 8px minmax(320px, 1fr); }
.rv-pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.rv-pane-h { flex: none; min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 8px 20px; border-bottom: 1px solid var(--line); background: var(--surf); }
.rv-pane-resume .rv-pane-h { padding-left: var(--gutter); }
.rv-pane-h h2 { font-size: 13px; font-weight: 700; margin: 0 auto 0 0; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rv-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; position: relative; }
.rv-divider { cursor: col-resize; background: var(--line); border: 0; padding: 0; }
.rv-divider:hover, .rv-divider.drag { background: var(--brand); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { font-size: 13px; padding: 4px 11px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.rv-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.rv-check input { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; }
.mob-tabs { display: none; }

/* the PDF page */
.desk { background: var(--desk); padding: 28px; }
.cutbar { position: sticky; top: 0; z-index: 2; max-width: 980px; margin: 0 auto 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-radius: 10px; background: var(--surf); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; }
.paper { width: 100%; max-width: 980px; margin: 0 auto; container-type: inline-size; }
.sheet {
  --pt: calc(100cqw / 612); /* one PDF point: a US Letter page is 612 pt wide */
  background: var(--paper); color: var(--paper-ink); aspect-ratio: 8.5 / 11; box-shadow: 0 2px 4px rgba(0,0,0,.15), 0 12px 32px rgba(0,0,0,.18);
  padding: calc(32.4 * var(--pt)) calc(36 * var(--pt)); font-family: var(--pdf); font-size: calc(10.5 * var(--pt)); line-height: 1.22; color-scheme: light; text-align: left;
}
.sheet b { font-weight: 700; }
.s-name { font-weight: 700; font-size: calc(18.5 * var(--pt)); line-height: 1.15; }
.s-contact { margin-bottom: calc(2 * var(--pt)); }
.s-h2 { font-weight: 700; font-size: calc(11.2 * var(--pt)); line-height: 1.2; text-transform: uppercase; margin-top: calc(5 * var(--pt)); padding-bottom: calc(1 * var(--pt)); border-bottom: calc(.6 * var(--pt)) solid var(--paper-rule); margin-bottom: calc(2 * var(--pt)); }
.s-role { margin-top: calc(2.5 * var(--pt)); }
.s-bul { position: relative; padding-left: calc(10 * var(--pt)); margin-top: calc(.6 * var(--pt)); }
.s-bul::before { content: "•"; position: absolute; left: calc(1 * var(--pt)); }
.ln { border-radius: calc(2 * var(--pt)); transition: box-shadow .3s, background .3s; }
.ln.flash { box-shadow: 0 0 0 calc(1.5 * var(--pt)) #a8515c; background: rgba(168,81,92,.07); }
.diff .ln.cut { background: var(--p-cut); }
.diff .ln.cut .tx { text-decoration: line-through; text-decoration-color: var(--p-cut-ink); }
.diff .ln.rw { background: var(--p-rw); }
.diff .ln.new { background: var(--p-new); }
.why { display: none; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: calc(8.5 * var(--pt)); line-height: 1.3; color: var(--p-note); margin: calc(.5 * var(--pt)) 0 calc(1.5 * var(--pt)); }
.from { display: none; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: calc(7.5 * var(--pt)); color: var(--paper-muted); border: calc(.5 * var(--pt)) solid #c4c4c4; border-radius: calc(2 * var(--pt)); padding: 0 calc(3 * var(--pt)); margin-left: calc(4 * var(--pt)); white-space: nowrap; }
.diff .why { display: block; }
.diff .from { display: inline; }
.key { display: none; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); max-width: 980px; margin: 12px auto 0; }
.diff-on .key { display: flex; }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.key .sw { width: 22px; height: 12px; border-radius: 3px; background: var(--k); border: 1px solid rgba(0,0,0,.12); }
.key .sw.strike { background: var(--p-cut); position: relative; }
.key .sw.strike::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 1.5px solid var(--p-cut-ink); }
.key .ex-from { background: var(--paper); color: var(--paper-muted); border: 1px solid #c4c4c4; border-radius: 4px; padding: 0 5px; font-size: 11.5px; font-style: normal; }
.key .ex-why { color: var(--blue); font-size: 12px; font-style: normal; }

/* chat tabs, like browser tabs */
/* the strip scrolls sideways only, and only when the tabs overflow; its bottom line is a shadow the open tab covers */
.ctabs { flex: none; display: flex; align-items: flex-end; gap: 4px; padding: 10px 16px 0; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.ctab { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 14rem; padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap; }
.ctab:hover { background: color-mix(in srgb, var(--surf) 60%, transparent); color: var(--ink); }
.ctab[aria-selected="true"] { background: var(--surf); border-color: var(--line); color: var(--ink); font-weight: 600; }
.ctab .spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 30%, transparent); border-top-color: var(--c); animation: spin .8s linear infinite; flex: none; }
.ctab .cbadge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--brand); color: var(--onbrand); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; padding: 0 5px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* chat */
.who-user { --c: var(--ink); } .who-host { --c: var(--brand); } .who-codex { --c: var(--blue); }
.who-agy, .who-gemini { --c: var(--green); } .who-chatgpt { --c: var(--blue); } .who-claude { --c: var(--violet); } .who-check { --c: var(--gold); } .who-all { --c: var(--muted); }
.feed { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.tab-about { font-size: 13px; color: var(--muted); padding: 2px 8px 12px; border-bottom: 1px dashed var(--line); margin: 0 0 4px; }
.step-div { display: flex; align-items: center; gap: 10px; margin: 18px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.step-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msg { display: flex; gap: 12px; padding: 8px; border-radius: 12px; cursor: pointer; }
.msg:hover { background: color-mix(in srgb, var(--c) 6%, transparent); }
.msg.sel { background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); }
.msg.user { flex-direction: row-reverse; }
.av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--surf); background: var(--c); }
.mbody { min-width: 0; max-width: 42rem; display: flex; flex-direction: column; }
.msg.user .mbody { align-items: flex-end; }
.mmeta { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 12px; color: var(--muted); }
.mmeta b { color: color-mix(in srgb, var(--c) 82%, var(--ink)); }
.bubble { margin-top: 4px; padding: 10px 14px; line-height: 1.6; border-radius: 4px 12px 12px 12px; background: color-mix(in srgb, var(--c) 8%, var(--surf)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); overflow-wrap: anywhere; }
.msg.user .bubble { border-radius: 12px 4px 12px 12px; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.msg.ask .bubble { background: var(--surf); border-style: dashed; }
.bubble > :first-child { margin-top: 0; }
.bubble > :last-child { margin-bottom: 0; }
.bubble p, .bubble ul, .bubble ol, .bubble pre { margin: 0 0 8px; }
.bubble ul, .bubble ol { padding-left: 20px; }
.bubble h4 { font-size: 14px; margin: 10px 0 4px; }
.bubble pre { font-family: var(--mono); font-size: 12px; line-height: 1.35; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; overflow-x: auto; white-space: pre; }
.bubble .longcode { margin: 0 0 8px; }
.bubble .longcode summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.bubble .longcode[open] summary { margin-bottom: 6px; }
.bubble code { font-family: var(--mono); font-size: 12.5px; background: color-mix(in srgb, var(--c) 10%, transparent); border: 0; padding: 0 3px; }
.bubble q { font-style: italic; }
.act { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px 4px 48px; font-size: 13px; color: var(--muted); cursor: pointer; border-radius: 8px; }
.act b { color: color-mix(in srgb, var(--c) 82%, var(--ink)); font-weight: 600; }
.act.sel { background: color-mix(in srgb, var(--c) 10%, transparent); }
.mpill { font-size: 11px; border-radius: 999px; padding: 0 7px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); white-space: nowrap; }
.mpill.stop { background: var(--brand); color: var(--onbrand); border-color: var(--brand); font-weight: 700; }
.files { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.files a { color: var(--muted); }
.files a:hover { color: var(--brand); }
.typing { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 6px 8px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.msg.arrive, .act.arrive { animation: rise .35s ease both; }
@keyframes rise { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rv-empty { color: var(--muted); font-size: 13px; padding: 16px 6px; margin: 0; }
.end-note { margin: 16px auto 0; font-size: 13px; color: var(--muted); text-align: center; max-width: 30rem; }
@media (prefers-reduced-motion: reduce) { .msg.arrive, .act.arrive, .typing i, .ctab .spin { animation: none; } .ln { transition: none; } }

/* phones and narrow windows */
@media (max-width: 859px) {
  .rv-panes { grid-template-columns: minmax(0, 1fr); }
  .rv-divider, .rv-keys, .zoom, .rv-pane-h h2, .rv-facts, #details-toggle { display: none; }
  .rv-panes[data-show="chat"] .rv-pane-resume, .rv-panes[data-show="resume"] .rv-pane-chat { display: none; }
  .mob-tabs { display: inline-flex; }
  .desk { padding: 10px; }
  .rv-bar .in { padding-block: 8px; }
  .rv-pop { left: 0; right: auto; }
}

/* examples index */
.ex-wrap { padding-bottom: 56px; }
.ex-head { padding: 40px 0 8px; }
.ex-head h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin: 0 0 4px; }
.card.post .facts { display: flex; flex-wrap: wrap; gap: 6px; }
.card.post .facts span { font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }