/* BioGlyph project page.
   Design tokens, nav, hero, numbers strip, section rhythm, paper block and footer are the lab's
   shared vocabulary, copied from dynomap/style.css so the chrome matches the other projects.
   Everything below "BioGlyph-specific" is new and used on this page only. */

:root{--ink:#17202c;--soft:#465262;--muted:#707a86;--paper:#fff;--warm:#f5f3ee;--line:#d9d6ce;--accent:#a83f35;--accent-dark:#7d2d27;--blue:#476d89;--gold:#b38536;--green:#628060;--serif:"Source Serif 4",Georgia,serif;--sans:"Source Sans 3",Arial,sans-serif;--mono:"IBM Plex Mono",monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.55 var(--sans)}
a{color:inherit;text-decoration:none}
.wrap{width:min(1160px,calc(100% - 44px));margin:0 auto}

.nav{height:68px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.95);position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}
.nav-inner{height:100%;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:10px;align-items:center;font:1.28rem var(--serif)}
.glyph{width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:12px 4px 0 -4px var(--gold),5px 12px 0 -4px var(--blue)}
.nav-links{display:flex;gap:25px;align-items:center;font-size:.87rem;color:var(--soft)}
.nav-links a:hover{color:var(--accent)}
.nav-links .back{border-left:1px solid var(--line);padding-left:25px}

.hero{padding:78px 0;background:linear-gradient(135deg,#faf9f6,#eee9df);border-bottom:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-size:.72rem;font-weight:700;margin-bottom:13px}
.eyebrow.light{color:#e4a89f}
.hero h1,h2{font-family:var(--serif);font-weight:600;letter-spacing:-.04em;line-height:1.06;margin:0}
.hero h1{font-size:clamp(3.1rem,6vw,5.4rem)}
.paper-title{font:600 1.3rem/1.35 var(--serif);color:var(--ink);max-width:840px;margin:26px 0 0}
.hero .lead{margin:18px 0 0}
.author-line{font:400 .86rem/1.5 var(--sans);color:var(--muted);max-width:900px;margin:14px 0 0}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.button{display:inline-block;padding:12px 18px;font-weight:600;font-size:.9rem;border:1px solid var(--line);cursor:pointer}
.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.button.primary:hover{background:var(--accent-dark)}
.button.ghost{background:rgba(255,255,255,.55)}
.light-button{margin-top:10px;background:#fff;color:var(--ink);border-color:#fff}

.numbers{background:var(--ink);color:#fff;padding:27px 0}
.number-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.number-grid>div{padding:3px 30px;border-left:1px solid #3b4652}
.number-grid>div:first-child{border-left:none}
.number-grid strong{display:block;font:600 2.25rem var(--serif);letter-spacing:-.04em}
.number-grid span{display:block;color:#bbc3cc;font-size:.78rem;line-height:1.4;margin-top:3px}

section{padding:82px 0}
h2{font-size:clamp(2.1rem,3.7vw,3.5rem);max-width:880px}
.lead{font:1.16rem/1.65 var(--serif);color:var(--soft);max-width:800px}
.alt{background:var(--warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1fr .65fr;gap:70px;align-items:end}
.section-head>p{color:var(--soft);margin:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.steps article{border-top:2px solid var(--ink);padding:22px 5px 0}
.steps article>span{font:500 .72rem var(--mono);color:var(--accent)}
.steps h3{font:600 1.25rem var(--serif);margin:10px 0 7px}
.steps p{color:var(--soft);font-size:.91rem;line-height:1.6}

.limits{padding:70px 0}
.limits-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px}
.limits p{color:var(--soft);margin:0 0 13px}
.cta-section{background:var(--ink);color:#fff}
.cta-grid{display:grid;grid-template-columns:minmax(0,860px);justify-content:center;text-align:center}
.cta-section h2{font-size:clamp(2.3rem,4.2vw,4rem)}
.cta-section p{color:#c2c9d0;max-width:650px;margin-left:auto;margin-right:auto}
.cta-fine{font-size:.82rem;color:#8f9aa6!important;margin-top:16px}

/* ---- live query, on the open read-only route -------------------------------
   Hidden until that route answers, so the page keeps working as a static page when the GPU is
   down or the route is not deployed -- the same guard scvision uses for its live button. */
.live{margin-top:34px;border:1px solid #2c3646;border-radius:2px;background:#1d2634;padding:22px 24px;text-align:left;max-width:860px;margin-left:auto;margin-right:auto}
.live-head{display:flex;align-items:center;gap:9px;font:500 .74rem var(--mono);color:#8f9aa6;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#7fb069;box-shadow:0 0 0 3px rgba(127,176,105,.2)}
.live-label{display:block;font:600 .74rem var(--sans);text-transform:uppercase;letter-spacing:.07em;color:#8f9aa6;margin-bottom:6px}
.live select{width:100%;font:inherit;font-size:.92rem;padding:9px 11px;border:1px solid #2c3646;background:#141c28;color:#e8ecf1;border-radius:2px}
.live-arms{display:flex;margin-top:12px;border:1px solid #2c3646;border-radius:2px;overflow:hidden}
.live-arm{flex:1;font:inherit;font-size:.85rem;padding:9px 8px;border:0;border-right:1px solid #2c3646;background:#141c28;color:#8f9aa6;cursor:pointer}
.live-arm:last-child{border-right:0}
.live-arm.on{background:#2a3446;color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.live-row{display:flex;gap:10px;margin-top:12px}
.live-row input{flex:1;font:inherit;font-size:.95rem;padding:9px 12px;border:1px solid #2c3646;background:#141c28;color:#e8ecf1;border-radius:2px}
.live-row input::placeholder{color:#6b7684}
.live-row .button{cursor:pointer;margin-top:0}
.live-row .button[disabled]{opacity:.5;cursor:progress}
.live-ex{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.live-ex button{font:inherit;font-size:.74rem;padding:5px 11px;border:1px solid #2c3646;border-radius:999px;background:transparent;color:#8f9aa6;cursor:pointer;text-align:left}
.live-ex button:hover{border-color:var(--accent);color:#e8b4ac}
.live-out{margin-top:16px;padding:14px 16px;border-left:3px solid #2c3646;background:#141c28;font-size:.88rem;line-height:1.6;color:#c2c9d0!important}
.live-out.busy{color:#8f9aa6!important}
.live-out.good{border-left-color:#7fb069}
.live-out.bad{border-left-color:var(--accent)}
.live-out code{font:.85em var(--mono);background:#0f151e;padding:1px 5px}
.live-pair{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.live-pair small{display:block;font:600 .64rem var(--sans);text-transform:uppercase;letter-spacing:.07em;color:#6b7684;margin-bottom:5px}
.live-pair p{margin:0;color:#dbe2e9!important;max-width:none}
.live-pair b{font:600 1.15rem var(--mono);color:#9fd18a}
.live-meta{margin:12px 0 0!important;font:400 .72rem var(--mono);color:#6b7684!important;max-width:none}
@media(max-width:620px){.live-pair{grid-template-columns:1fr}}

.paper-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:70px;align-items:start}
.abstract-copy{color:var(--soft);font:1rem/1.7 var(--serif)}
.paper-links{border-top:3px solid var(--accent);background:var(--warm);padding:24px}
.paper-links h3{font:600 1.35rem var(--serif);margin:0 0 14px}
.paper-links>a{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-weight:600;font-size:.86rem}
.paper-links>a span{font:400 .7rem var(--mono);color:var(--muted)}
.paper-links>p{font-size:.76rem;color:var(--muted);line-height:1.55;margin:18px 0 0}
.status-note{border-top:1px solid var(--line);padding:14px 0 0;margin:6px 0 0;font-size:.8rem;color:var(--soft);line-height:1.5}
.citation-grid{display:grid;grid-template-columns:.55fr 1.45fr;gap:42px;margin-top:58px;border-top:1px solid var(--line);padding-top:42px}
.citation-grid h2{font-size:2rem}
.citation-grid pre{margin:0;background:var(--ink);color:#eaf0f5;padding:24px;overflow:auto;font:400 .74rem/1.65 var(--mono);white-space:pre-wrap}
.citation-grid .button{margin-top:18px}
.authors-section{margin-top:48px}
.author-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.author-grid span{border:1px solid var(--line);padding:16px;font-size:.77rem;color:var(--muted);min-width:0}
.author-grid b{display:block;font:600 1rem var(--serif);color:var(--ink);margin-bottom:4px}

footer{background:#101721;color:#fff;padding:45px 0}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:25px}
.footer-brand{font:600 1.4rem var(--serif)}
footer p{color:#aeb8c2;font-size:.82rem;margin:4px 0}
.footer-links{display:flex;gap:22px;font-size:.83rem}
.fine{grid-column:1/-1;border-top:1px solid #303a45;padding-top:16px;margin-top:10px;color:#8d98a4;font-size:.72rem}

/* Explainer video. Frame, caption control and poster handling follow dynomap/style.css so the
   two projects' video sections look like siblings. The CC button exists because browsers bury the
   caption menu, and a narrated figure with no visible caption control is not accessible. */
.watch-section .section-head{margin-bottom:30px}
.video-figure{max-width:1160px}
.paper-figure{margin:0}
.media-frame{background:#111318;border:1px solid var(--line);padding:0;line-height:0;overflow:hidden}
.media-frame video{display:block;width:100%;height:auto}
.paper-figure figcaption{font-size:.78rem;line-height:1.55;color:var(--muted);margin-top:11px;max-width:1000px}
.paper-figure figcaption b{color:var(--ink)}
.video-frame{position:relative}
.video-cc-toggle{position:absolute;right:14px;bottom:70px;z-index:3;display:inline-grid;place-items:center;width:38px;height:32px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:3px;background:rgba(16,23,33,.82);color:#fff;font:600 .72rem/1 var(--sans);cursor:pointer;backdrop-filter:blur(7px);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease,background-color .16s ease}
.video-frame:hover .video-cc-toggle,.video-frame:focus-within .video-cc-toggle{opacity:1;pointer-events:auto;transform:translateY(0)}
.video-cc-toggle:hover,.video-cc-toggle:focus-visible{background:rgba(16,23,33,.96);border-color:#fff}
.video-cc-toggle:focus-visible{outline:3px solid rgba(255,255,255,.72);outline-offset:2px}
.video-cc-toggle[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.video-cc-mark{display:inline-grid;place-items:center;min-width:24px;height:17px;border:1px solid currentColor;border-radius:2px;font:700 .62rem/1 var(--sans);letter-spacing:.02em}
.video-cc-state{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:none),(pointer:coarse){.video-cc-toggle{opacity:1;pointer-events:auto;transform:none}}
@media(max-width:620px){.video-cc-toggle{right:9px;bottom:64px;width:36px;height:30px}}

/* ---------------------------------------------------- BioGlyph-specific --- */

/* The same region in two renderings, side by side. This is the paper's comparison, so it is the
   first thing on the page after the numbers strip. Both panes hold real compiler output. */
.render-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
.render{border:1px solid var(--line);background:#fff;min-width:0;display:flex;flex-direction:column}
.render.win{border-top:3px solid var(--accent)}
.render.lose{border-top:3px solid var(--blue)}
.render-head{padding:17px 20px 15px;border-bottom:1px solid var(--line)}
.render-head b{display:block;font:600 1.18rem var(--serif)}
.render-head span{display:block;font-size:.78rem;color:var(--muted);margin-top:4px;line-height:1.45}
.render-head span b{color:var(--ink);font-weight:600}
.render pre{margin:0;padding:18px 20px;font:400 .7rem/1.66 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--soft);flex:1}
.render pre mark{background:#f6e9e6;color:var(--ink);padding:1px 0}
.render pre .rolename{color:var(--accent);font-weight:500}
.render-foot{border-top:1px solid var(--line);background:var(--warm);padding:12px 20px;font:500 .7rem var(--mono);color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.render-note{margin:20px 0 0;font-size:.84rem;color:var(--muted);line-height:1.6;max-width:900px}

/* Role vocabulary. Each token is a fixed rule, so each chip states the rule, not a vibe. */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.role{border:1px solid var(--line);background:#fff;padding:18px 19px}
.role b{display:block;font:500 .78rem var(--mono);color:var(--accent);letter-spacing:.01em}
.role p{margin:9px 0 0;font-size:.85rem;line-height:1.58;color:var(--soft)}
.role em{color:var(--ink);font-style:normal;font-weight:600}

/* scVision's journal figure numbering, so a caption reads as the paper's companion. */
.fignum{color:var(--accent);font-weight:700}
.fignum::after{content:" |";color:var(--line);font-weight:400}

/* One axis, one series, sorted, direct labels: accuracy by what the model was shown. */
.chart{margin-top:38px;border:1px solid var(--line);background:#fff;padding:26px 28px 20px}
/* The blind floor drawn across every row. The paper treats 50.7% as the number any representation
   has to beat, and one rendering falls under it -- which is invisible if the floor is just another
   bar. Drawn over the fill so it still reads on the rows that pass it. */
.chart-cap{margin:18px 0 0;font-size:.79rem;line-height:1.6;color:var(--muted)}
.chart-cap b{color:var(--ink)}

/* Two hues around a neutral midpoint: enrichment is a polarity, so it diverges from OR = 1. */
.enrich{margin-top:36px;border:1px solid var(--line);background:#fff;padding:26px 28px 18px}
.enrich-row{display:grid;grid-template-columns:minmax(120px,215px) minmax(0,1fr) 120px;gap:14px;align-items:center;padding:7px 0}
.enrich-row .k{font:500 .72rem var(--mono);color:var(--soft);text-align:right}
.enrich-row .track{position:relative;height:16px;background:linear-gradient(90deg,#f2eee6 0 calc(50% - 1px),#c9c3b8 calc(50% - 1px) calc(50% + 1px),#f2eee6 calc(50% + 1px) 100%)}
.enrich-row .track i{position:absolute;top:2px;bottom:2px;left:var(--l);width:var(--w);background:var(--accent)}
.enrich-row.dep .track i{background:var(--blue)}
/* Fig. 3e greys the roles whose essentiality rate is not clearly apart from the background, so
   colouring them like the significant ones would overstate the result. */
.enrich-row.ns .track i{background:#b9b3a7}
.enrich-row .v{font:500 .76rem var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.enrich-legend{display:flex;gap:20px;margin-top:14px;border-top:1px solid var(--line);padding-top:12px;font-size:.75rem;color:var(--muted);flex-wrap:wrap}
.enrich-legend span{display:flex;align-items:center;gap:7px}
.enrich-legend i{width:11px;height:11px;display:block}
.enrich-legend i.up{background:var(--accent)}
.enrich-legend i.down{background:var(--blue)}
.enrich-legend i.ns{background:#b9b3a7}

/* ---- region explorer -------------------------------------------------------
   Interactive widgets follow scvision's contract: JSON in, inline SVG out, and a visible failure
   message rather than an empty box if the fetch fails. */
.rx{min-width:0}
.rx-figure{min-width:0}
.rx-loading,.widget-fail{color:var(--muted);font-size:.9rem;padding:26px 0;margin:0}
.rx-picker{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.rx-picker button{border:1px solid var(--line);background:#fff;color:var(--soft);padding:10px 14px;font:600 .84rem var(--sans);cursor:pointer;text-align:left;line-height:1.2}
.rx-picker button small{display:block;font-weight:400;font-size:.7rem;color:var(--muted);margin-top:3px}
.rx-picker button:hover{border-color:var(--accent);color:var(--accent)}
.rx-picker button.on{border-color:var(--accent);background:#f8eeeb;color:var(--accent)}
.rx-picker button.on small{color:var(--accent)}
.rx-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:24px;margin-top:18px;align-items:start}
.rx-canvas{border:1px solid var(--line);background:#fff;min-width:0}
.rx-canvas svg{display:block;width:100%;height:auto}
.rx-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px}
.rx-controls .button{cursor:pointer}
.rx-legend{display:flex;gap:15px;font-size:.76rem;color:var(--muted);flex-wrap:wrap}
.rx-legend span{display:flex;align-items:center;gap:6px}
.rx-legend i{width:10px;height:10px;display:block;border-radius:50%}
.sw-blue{background:var(--blue)}
.sw-accent{background:var(--accent)}
.rx-state{margin:12px 0 0;font-size:.86rem;color:var(--soft);line-height:1.55}
.rx-side{min-width:0;display:grid;gap:18px}
.rx-q{border-top:3px solid var(--accent);background:#fff;padding:18px 20px}
.rx-q p{margin:8px 0 0;font:1rem/1.5 var(--serif);color:var(--ink)}
.rx-answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rx-answers>div{border:1px solid var(--line);background:#fff;padding:14px 16px}
.rx-answers small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.rx-answers b{display:block;font:600 1.2rem var(--mono);margin-top:6px;color:var(--ink)}
.rx-answers .ok{border-left:3px solid var(--green)}
.rx-answers .bad{border-left:3px solid var(--accent)}
.rx-arms{border:1px solid var(--line);background:#fff;padding:16px 18px 14px}
.arm-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 62px 74px;gap:10px;align-items:center;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:9px 0;cursor:pointer;text-align:left;font:inherit}
.rx-arms .arm-row:first-of-type{border-top:0}
.arm-row:hover .arm-name{color:var(--accent)}
.arm-row.on .arm-name{color:var(--accent);font-weight:700}
.arm-name{font-size:.82rem;color:var(--soft);font-weight:600;min-width:0;overflow-wrap:anywhere}
.arm-meter{height:9px;background:#eeeae2;display:block;position:relative}
.arm-meter i{display:block;height:100%}
.arm-tok{font:500 .74rem var(--mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.arm-verdict{font:500 .68rem var(--mono);text-align:right}
.arm-verdict.yes{color:var(--green)}
.arm-verdict.no{color:var(--accent)}
.arm-verdict.never{color:var(--muted)}
.rx-context{margin-top:20px;border:1px solid var(--line);background:#fff}
.rx-context-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--warm)}
.rx-context-head b{font:600 .92rem var(--sans)}
.rx-context-head span{font:400 .74rem var(--mono);color:var(--muted)}
.rx-context pre{margin:0;padding:16px 18px;font:400 .7rem/1.62 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--soft);max-height:420px;overflow:auto}
.rx-nocontext{margin:0;padding:18px;font-size:.86rem;color:var(--muted)}
.chart-svg svg{display:block;width:100%;height:auto}
/* Still figures. `.media-frame.light` is dynomap's white variant, for matplotlib output rather
   than video. */
.fig-still{margin-top:34px}
.media-frame.light{background:#fff;padding:12px}
.media-frame.light img{display:block;width:100%;height:auto}

@media(max-width:900px){.rx-grid{grid-template-columns:1fr}.arm-row{grid-template-columns:minmax(0,1fr) 70px 56px 66px}}
@media(max-width:620px){.rx-answers{grid-template-columns:1fr}.arm-row{grid-template-columns:minmax(0,1fr) 52px 62px;row-gap:4px}.arm-row .arm-verdict{grid-column:2/4;text-align:left}}

/* ---- conversation player ---------------------------------------------------
   Shares the explorer's chrome (.rx-picker, .rx-figure, .rx-canvas, .rx-controls) so the two
   widgets read as one family; only the turn machinery below is new. */
.tp-picker{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.rx-picker .rx-tab,.tp-picker .rx-tab{border:1px solid var(--line);background:#fff;color:var(--soft);padding:10px 14px;font:600 .84rem var(--sans);cursor:pointer;text-align:left;line-height:1.2}
.rx-picker .rx-tab small,.tp-picker .rx-tab small{display:block;font-weight:400;font-size:.7rem;color:var(--muted);margin-top:3px}
.rx-picker .rx-tab:hover,.tp-picker .rx-tab:hover{border-color:var(--accent);color:var(--accent)}
.rx-picker .rx-tab.on,.tp-picker .rx-tab.on{border-color:var(--accent);background:#f8eeeb;color:var(--accent)}
.rx-picker .rx-tab.on small,.tp-picker .rx-tab.on small{color:var(--accent)}
.tp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:24px;margin-top:18px;align-items:start}
.tp-side{min-width:0;display:grid;gap:14px}
.tp-models{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-model{border:1px solid var(--line);background:#fff;color:var(--soft);padding:10px 13px;font:600 .84rem var(--sans);cursor:pointer;text-align:left;line-height:1.2}
.tp-model small{display:block;font-weight:400;font-size:.69rem;color:var(--muted);margin-top:3px}
.tp-model:hover{border-color:var(--accent);color:var(--accent)}
.tp-model.on{border-color:var(--accent);background:#f8eeeb;color:var(--accent)}
.tp-model.on small{color:var(--accent)}
.tp-budget{border:1px solid var(--line);border-left:3px solid var(--accent);background:#fff;padding:13px 16px;font-size:.82rem;line-height:1.55;color:var(--soft)}
.tp-budget b{color:var(--ink)}
.tp-rail{display:flex;gap:6px;flex-wrap:wrap}
.tp-step{width:36px;height:36px;border:1px solid var(--line);background:#fff;color:var(--muted);font:600 .82rem var(--mono);cursor:pointer}
.tp-step:hover{border-color:var(--accent);color:var(--accent)}
.tp-step.yes{color:var(--green);border-color:#c6d2c4}
.tp-step.no{color:var(--accent);border-color:#e2c6c2}
.tp-step.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tp-turn{border:1px solid var(--line);background:#fff;padding:16px 18px}
.tp-turn-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:11px}
.tp-turn-head small{font-size:.72rem;color:var(--muted)}
.tp-cls{font:700 .63rem var(--sans);text-transform:uppercase;letter-spacing:.09em;padding:3px 8px;border:1px solid var(--line);color:var(--soft)}
.tp-cls.graded{border-color:#c6d2c4;color:var(--green)}
.tp-cls.pushback{border-color:#e2c6c2;color:var(--accent)}
.tp-cls.lookup{border-color:#c9d3dc;color:var(--blue)}
.tp-q{margin:0 0 12px;font:600 .98rem/1.5 var(--serif);color:var(--ink)}
.tp-a{border-top:1px solid var(--line);padding-top:11px}
.tp-a small,.tp-gold small{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.tp-a p{margin:6px 0 0;font-size:.85rem;line-height:1.6;color:var(--soft);max-height:190px;overflow:auto}
.tp-gold{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:12px;padding-top:11px}
.tp-gold small{flex:0 0 100%}
.tp-gold b{font:600 1.05rem var(--mono);color:var(--ink)}
.tp-v{font:500 .7rem var(--mono)}
.tp-v.yes{color:var(--green)}
.tp-v.no,.tp-v.never{color:var(--accent)}
.tp-v.na{color:var(--muted)}
.tp-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tp-nav .button{cursor:pointer}
.tp-nav .button[disabled]{opacity:.4;cursor:default}
.tp-nav span{font:500 .74rem var(--mono);color:var(--muted)}
.tp-context{margin-top:20px;border:1px solid var(--line);background:#fff}
.tp-context summary{padding:13px 18px;cursor:pointer;font:600 .84rem var(--sans);color:var(--soft);background:var(--warm)}
.tp-context summary:hover{color:var(--accent)}
.tp-context pre{margin:0;padding:16px 18px;font:400 .7rem/1.62 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--soft);max-height:420px;overflow:auto}
#conversation .finds{grid-template-columns:repeat(3,1fr)}

/* ---- the paired three-turn study, inside the evidence section -------------- */
.pt{margin-top:38px}
.pt-head{font:600 1.3rem/1.25 var(--serif);margin:0 0 4px}
.pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.pt-col{border:1px solid var(--line);background:#fff;padding:16px 18px}
.pt-col.dead{background:#fbf6f5;border-color:#e2c6c2}
.pt-col-head{margin-bottom:12px}
.pt-col-head b{display:block;font:600 .95rem var(--sans)}
.pt-col-head small{font:400 .72rem var(--mono);color:var(--muted)}
.pt-col.dead .pt-col-head small{color:var(--accent)}
.pt-turn{border-top:1px solid var(--line);padding:10px 0 12px}
.pt-turn-top{display:flex;justify-content:space-between;gap:10px;font:500 .74rem var(--mono);color:var(--soft);margin-bottom:7px}
.pt-tok{font:500 .7rem var(--mono);color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.pt-note{margin:16px 0 0;font-size:.84rem;line-height:1.6;color:var(--soft)}

@media(max-width:900px){.tp-grid,.pt-grid{grid-template-columns:1fr}#conversation .finds{grid-template-columns:1fr}}

/* Plain findings, one number each. */
.finds{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:38px}
.find{border:1px solid var(--line);background:#fff;padding:24px}
.find strong{display:block;font:600 2.5rem/1 var(--serif);letter-spacing:-.05em;color:var(--accent)}
.find span{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;margin-top:10px;color:var(--soft)}
.find h3{font:600 1.3rem/1.25 var(--serif);margin:16px 0 9px}
.find p{margin:0;color:var(--soft);font-size:.89rem;line-height:1.62}
.pill-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}
.pill-row span{border:1px solid #cfcac0;background:#fff;padding:5px 9px;font-size:.72rem;color:var(--soft)}

.datasets{margin-top:34px;border-top:1px solid var(--line)}
.datasets table{width:100%;border-collapse:collapse;font-size:.84rem}
.datasets th{text-align:left;font:700 .68rem var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:14px 12px 14px 0;border-bottom:1px solid var(--line)}
.datasets td{padding:11px 12px 11px 0;border-bottom:1px solid #eae6de;color:var(--soft)}
.datasets td:first-child{color:var(--ink);font-weight:600}
.datasets td.n{font:400 .78rem var(--mono);font-variant-numeric:tabular-nums}

@media(max-width:900px){
  .section-head,.limits-grid,.paper-grid,.citation-grid,.cta-grid{grid-template-columns:1fr}
  .nav-links a:not(.back){display:none}
  .number-grid{grid-template-columns:1fr}
  .number-grid>div{border-left:0;border-top:1px solid #3b4652;padding:14px 0}
  .number-grid>div:first-child{border-top:0}
  .steps,.render-pair,.roles,.finds{grid-template-columns:1fr}
  .author-grid{grid-template-columns:repeat(2,1fr)}
  .section-head{gap:18px}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 28px)}
  .hero{padding:52px 0}
  .hero h1{font-size:2.9rem}
  .hero-actions{display:grid}
  .hero-actions .button{text-align:center}
  .nav-links .back{border-left:0;padding-left:0}
  .chart,.enrich{padding:18px 16px}
  .author-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-links{margin-top:8px;flex-wrap:wrap}
  .fine{grid-column:auto}
  .citation-grid pre{font-size:.65rem;padding:16px}
  .datasets{overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}