/* Origins page. Builds on the tokens in styles.css (--bg, --surface, --ink, --accent, --c0..c4, ...). */
body.origins{user-select:text; -webkit-user-select:text}
.doc{max-width:1040px}
.doc p{margin:0 0 10px; max-width:76ch}
.doc h2{margin:0 0 8px; font-size:20px; line-height:1.2}
.doc h3{margin:18px 0 8px; font-size:16px}
.doc a{color:var(--accent)}
.doc .btn{color:var(--ink); text-decoration:none}
.doc .btn.primary{color:var(--on-accent)}
.muted{color:var(--muted)}
.note{color:var(--muted); font-size:13.5px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 18px 12px}
.toc{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px}
.toc a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}
.toc a:hover{color:var(--accent); border-color:var(--accent)}
section[id]{scroll-margin-top:64px}

/* status chips: shape and fill differ, so they read without color */
:root{--chip-warn:#b9770e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--chip-warn:#e0b25a}}
:root[data-theme="dark"]{--chip-warn:#e0b25a}
.chip{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1.5px solid; white-space:nowrap; vertical-align:2px}
.s-consensus{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.s-supported{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.s-contested{background:transparent; border-color:var(--chip-warn); color:var(--chip-warn); border-style:double; border-width:4px; padding:0 7px}
.s-speculation{background:transparent; border-color:var(--muted); color:var(--muted); border-style:dashed}
.s-model{background:var(--surface-2); border-color:var(--line-strong); color:var(--muted); border-style:dotted; font-style:italic}
.legend{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px}
.legend li{display:flex; gap:10px; align-items:baseline; font-size:14px}
.legend.small{flex-direction:row; flex-wrap:wrap; gap:6px 14px; margin-top:8px}
.legend.small li{font-size:12.5px; color:var(--muted); align-items:center}
.sw{display:inline-block; width:14px; height:14px; border-radius:3px; border:1px solid var(--line-strong); flex:none}

/* controls */
.controls{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:end; margin:10px 0 6px}
.ctl{display:flex; flex-direction:column; gap:3px; font-size:12.5px; font-weight:600; color:var(--muted)}
.ctl select{font:inherit; font-size:14px; font-weight:500; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--line-strong); border-radius:8px; padding:7px 10px}
.ctl.steps{flex-direction:row; gap:8px; align-items:center}
.order-info{font-size:13.5px; color:var(--muted); margin:6px 0 4px}
.slider{margin:8px 0 14px}
.slider input[type=range]{width:100%; accent-color:var(--accent)}
.ticks{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--muted); padding:0 2px}
.ticks span{width:1.6em; text-align:center; overflow:visible}

/* the codon table */
.demo-grid{display:grid; grid-template-columns:minmax(300px,440px) 1fr; gap:18px; align-items:start}
.two-col{display:grid; grid-template-columns:minmax(300px,440px) 1fr; gap:18px; align-items:start}
@media (max-width:760px){.demo-grid,.two-col{grid-template-columns:1fr}}
.tbl{display:grid; grid-template-columns:22px repeat(4,1fr); grid-template-rows:20px repeat(4,auto); gap:4px; max-width:440px; user-select:none}
.tbl .hd{font-family:var(--font-mono); font-size:12.5px; display:grid; place-items:center; font-weight:700}
.tbl .bx{display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:2px; border:1.5px solid var(--line-strong); border-radius:8px; background:var(--surface-2)}
.tbl .bx.fam{border-color:var(--accent)}
.cd{position:relative; font:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:38px; padding:2px 0; border-radius:5px; border:1px solid transparent; cursor:pointer; color:var(--ink); background:transparent; line-height:1}
.cd .l{font-size:16px; font-weight:700}
.cd .t{font-family:var(--font-mono); font-size:9.5px; opacity:.75; margin-top:2px}
.cd:focus-visible{outline:2px solid var(--accent); outline-offset:1px; z-index:2}
.cd.sel{outline:2px solid var(--ink); outline-offset:1px; z-index:2}
.cd.open{border:1px dashed var(--line-strong); color:var(--muted); background:transparent}
.cd.stop{background:var(--ink); color:var(--bg)}
.cd.col{--cell-ink:#0e161c; color:var(--cell-ink); background:hsl(var(--h) var(--s,62%) var(--cell-l,68%))}
:root{--cell-l:70%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cell-l:62%}}
:root[data-theme="dark"]{--cell-l:62%}
.cd.syn1{--h:205; --s:62%}
.cd.syn2{--h:32; --s:80%}
.cd.chem{color:var(--ink)}
.cd.chem0{background:color-mix(in srgb, var(--c0) 45%, var(--surface))}
.cd.chem1{background:color-mix(in srgb, var(--c1) 45%, var(--surface))}
.cd.chem2{background:color-mix(in srgb, var(--c2) 45%, var(--surface))}
.cd.chem3{background:color-mix(in srgb, var(--c3) 45%, var(--surface))}
.cd.chem4{background:color-mix(in srgb, var(--c4) 45%, var(--surface))}
.cd.prov::after{content:""; position:absolute; inset:0; border-radius:5px; pointer-events:none; background:repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 2px, transparent 2px 6px)}
.cd.hl-ser{background:var(--accent); color:var(--on-accent)}
.cd.hl-nb{background:color-mix(in srgb, var(--chip-warn) 55%, var(--surface)); color:var(--ink)}
.cd.hl-thr{background:color-mix(in srgb, var(--ok) 55%, var(--surface)); color:var(--ink)}
.cd.dim{opacity:.45}
.cd.chg{outline:2px solid var(--chip-warn); outline-offset:1px}

.side h3{margin-top:0}
.events{margin:0 0 8px; padding-left:18px; font-size:14px}
.events li{margin-bottom:3px}
.stats{font-size:13px; color:var(--muted); margin:0 0 10px}
.etym{border-top:1px solid var(--line); padding-top:10px; font-size:14px}
.etym h4{margin:0 0 4px; font-size:15px}
.etym ol{margin:4px 0 8px; padding-left:20px}
.nb{display:inline-flex; gap:4px; align-items:center; font-family:var(--font-mono); font-size:12px; padding:1px 6px; margin:2px 3px 2px 0; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface-2)}
.look{font-size:14px; max-width:76ch; padding-left:20px}
.look li{margin-bottom:6px}

/* heat table */
.heat-wrap{overflow-x:auto}
.heat{border-collapse:separate; border-spacing:2px; font-size:13px; min-width:520px}
.heat th{font-size:12px; text-align:center; padding:4px 6px; font-weight:600; color:var(--muted); max-width:92px; vertical-align:bottom}
.heat th.aa{text-align:left; color:var(--ink)}
.heat td{text-align:center; padding:5px 6px; border-radius:4px; font-family:var(--font-mono); min-width:44px}
.heat td.hc{color:#0e161c; background:hsl(var(--h) 62% var(--cell-l,68%))}
.heat td.aa{text-align:left; font-family:var(--font-body); font-weight:600; background:none; padding-left:0}
.heat td.rg{font-size:12px; background:none; color:var(--muted)}
.heat td.rg.agree{color:var(--ok); font-weight:700}
.heat td.rg.scatter{color:var(--chip-warn); font-weight:700}
.heat td.none{background:var(--surface-2); color:var(--muted)}
.ocards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; margin:12px 0}
.oc{border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13.5px; background:var(--surface-2)}
.oc h4{margin:0 0 4px; font-size:14.5px}
.oc p{margin:0 0 6px; max-width:none}

/* claims */
.claims{display:flex; flex-direction:column; gap:10px; margin:8px 0 8px}
.claim{border-left:3px solid var(--line-strong); padding:2px 0 2px 12px}
.claim .ctext{font-size:14.5px; max-width:80ch}
.claim .nm{font-weight:700; margin-right:6px}
.srcs{list-style:none; margin:4px 0 0; padding:0; font-size:12.8px; color:var(--muted)}
.srcs li{margin:3px 0}
.srcs q{display:block; margin:1px 0 0 0; font-style:italic; color:var(--ink); opacity:.85; max-width:80ch; quotes:"\201C" "\201D"}
.srcs .dp{font-size:11.5px; border:1px solid var(--line-strong); border-radius:5px; padding:0 5px; margin-left:4px}
.ladder{display:grid; gap:8px}
.rung{display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface-2); font-size:14px}
.rung .n{font-family:var(--font-mono); font-weight:700; color:var(--accent)}
.rung b{display:block}
.fact{font-size:14px}
.fact .tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border:1px dotted var(--line-strong); border-radius:5px; padding:0 5px; color:var(--muted); margin-right:4px}
.cd .l,.cd .t{pointer-events:none}
@media (max-width:560px){.cd .l{font-size:14px} .cd{min-height:34px}}
@media (prefers-reduced-motion: no-preference){.cd{transition:background-color .25s}}

/* The quiz's fit mode (styles.css) locks body to the window height; this page scrolls normally. */
@media (min-width:1000px) and (min-height:600px){
  body.origins{height:auto; min-height:100dvh; overflow:visible}
  body.origins .wrap{height:auto; max-width:1040px}
  body.origins .sub{display:block}
  body.origins .top{flex-wrap:wrap}
  body.origins .top h1{white-space:normal}
}
.toc{position:sticky; top:0; z-index:20; background:var(--bg); padding:8px 0; border-bottom:1px solid var(--line)}

/* newest amino acid beside the table */
.newaa{margin:0 0 10px; display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 12px}
.newaa .na-art{flex:none; width:150px; color:var(--ink)}
.newaa .na-art svg{display:block; width:100%; height:auto}
.newaa figcaption{font-size:13.5px}
@media (max-width:560px){.newaa .na-art{width:110px}}

/* mirror strands */
.cd.twin{outline:2px dashed var(--ink); outline-offset:1px; z-index:2}
.twinsw{background:transparent; outline:2px dashed var(--ink); outline-offset:-3px}
.strands{display:grid; gap:2px; margin:0 0 10px; font-family:var(--font-mono)}
.srow{display:grid; grid-template-columns:96px 22px repeat(3,40px) 22px; gap:4px; align-items:center}
.srow .sl{font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--muted)}
.srow .e{font-size:12px; color:var(--muted); text-align:center}
.rb{display:grid; place-items:center; height:34px; border-radius:6px; font-weight:700; background:var(--surface-2); border:1.5px solid var(--line-strong)}
.rb.bar{border:0; background:none; height:14px; color:var(--muted)}
.rp{display:inline-block; font-size:12.5px; font-weight:600; padding:1px 8px; border-radius:999px; border:1.5px solid; font-family:var(--font-body)}
.rp.c1{border-color:hsl(205 62% 50%)} .rp.c2{border-color:hsl(32 80% 50%)} .rp.cs{border-color:var(--muted); color:var(--muted)}
.pairline{font-size:15px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.arrow{font-size:18px; color:var(--muted)}
.mono{font-family:var(--font-mono)}
.chk{flex-direction:row; align-items:center; gap:8px; margin-top:6px; font-weight:500}
@media (max-width:420px){.srow{grid-template-columns:70px 18px repeat(3,34px) 18px}}