/* ==========================================================================
   Atlas reference pages -- /atlas/<id>.html

   A reference is the Atlas panel written out in full, so it borrows the
   panel's vocabulary (atlas.css loads alongside this) and adds only what a
   long page needs: a header, a contents rail, prose at a reading measure,
   and the figures -- charge against pH, the genetic code, hydropathy,
   pathways, and for a protein its domain map, cycle and pathway.

   Every colour is a token. The one accent marks the entry's own data in
   each figure; everything around it is the ink ramp.
   ========================================================================== */

.ref { padding-bottom: var(--section-y); }

/* ---- header ------------------------------------------------------------- */
.ref-head { padding: clamp(2.25rem, 6vw, 4.5rem) 0 clamp(1.25rem, 3vw, 2rem); }
.ref-crumb { flex-wrap: wrap; gap: .55rem; }
.ref-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.ref-crumb a:hover { color: var(--rust); border-color: var(--rust-pale); }
.ref-crumb span::before { content: "/"; margin-right: .55rem; color: var(--line-strong); }
.ref-head h1 {
  margin: .6rem 0 0;
  font: 300 clamp(2.6rem, 1.4rem + 4.6vw, 5.25rem)/1.02 var(--disp);
  letter-spacing: -.015em;
  color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .45em;
}
.ref-codes {
  font: 500 clamp(.72rem, .6rem + .4vw, .9rem)/1 var(--label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: .45em .7em .4em;
  transform: translateY(-.35em);
}
.ref-stand {
  margin: 1rem 0 0; max-width: 46ch;
  font: 300 clamp(1.2rem, 1rem + .9vw, 1.6rem)/1.35 var(--disp);
  color: var(--steel-deep);
}
.ref-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin: 1.4rem 0 0; padding: .8rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: 500 var(--t-label)/1.4 var(--label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel);
}
.ref-meta b { color: var(--ink); font-weight: 500; margin-right: .45em; }
.ref-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.25rem; }

/* ---- hero: the structure and the facts --------------------------------- */
.ref-hero {
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: start;
}
.ref-hero--plain { grid-template-columns: minmax(0, 1fr); }
.ref-atl { padding: clamp(.75rem, 2vw, 1.1rem); }
.ref-atl .atl-stage { margin-top: 0; }
.ref-panel { margin-top: 0; padding: clamp(.9rem, 2.4vw, 1.4rem); }
.ref-panel .atl-panel-head--molecule {
  grid-template-columns: minmax(0, 1fr); border-bottom: 0; padding-bottom: 0;
}
/* The header already names it and states its argument. */
.ref-panel .atl-id > .lab:first-child, .ref-panel .atl-id h2, .ref-panel .atl-stand { display: none; }
.ref-panel .mol-formula { margin-top: 0; }

.ref-facts {
  margin: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.ref-hero--plain .ref-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ref-facts > div { padding: .7rem .9rem .75rem 0; border-bottom: 1px solid var(--line); }
.ref-facts dt {
  font: 500 var(--t-label)/1.3 var(--label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel);
}
.ref-facts dd { margin: .3rem 0 0; font-size: .95rem; line-height: 1.45; color: var(--ink); }
.ref-facts dd sub, .ref-facts dd sup { font-size: .72em; }
.ref-facts code, .ref-pw code {
  font: 500 .78rem/1 var(--label-figures); letter-spacing: .06em;
  padding: 2px 5px; margin: 0 2px 3px 0; display: inline-block;
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.ref-facts a { overflow-wrap: anywhere; }

/* ---- the body: contents rail and the reading column -------------------- */
.ref-body {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 1100px) {
  .ref-body { grid-template-columns: 200px minmax(0, 1fr); }
  .ref-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}
.ref-toc ol { list-style: none; margin: .6rem 0 0; padding: 0; counter-reset: toc; }
.ref-toc li { counter-increment: toc; }
.ref-toc a {
  display: flex; gap: .6rem; padding: .38rem 0;
  font-size: .86rem; line-height: 1.35; color: var(--steel-deep); text-decoration: none;
  border-left: 2px solid transparent; padding-left: .7rem; margin-left: -.7rem;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.ref-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font: 500 10px/1.9 var(--label-figures); color: var(--steel); letter-spacing: .06em;
}
.ref-toc a:hover { color: var(--ink); }
.ref-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--rust); }
@media (max-width: 1099px) {
  .ref-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .8rem 0; }
  .ref-toc ol { display: flex; gap: .2rem 1.1rem; overflow-x: auto; scrollbar-width: none;
                -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .ref-toc ol::-webkit-scrollbar { display: none; }
  .ref-toc a { border-left: 0; padding-left: 0; margin-left: 0; }
  .ref-toc a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--rust); }
}

.ref-main { min-width: 0; }
.ref-sec {
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.ref-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ref-sec > h2 {
  margin: 0 0 1.1rem;
  font: 300 clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem)/1.12 var(--disp);
  color: var(--ink);
}
.ref-main p {
  max-width: 68ch; margin: 0 0 1rem;
  font-size: 1.0625rem; line-height: 1.7; color: var(--steel-deep);
}
.ref-main .lab { margin-bottom: .45rem; }
.ref-main p.lab { font-size: var(--t-label); line-height: 1.4; color: var(--steel); }
.ref-cite { font: 500 .66em/0 var(--label-figures); margin-left: 1px; white-space: nowrap; }
.ref-cite a { color: var(--steel); text-decoration: none; padding: 0 1px; }
.ref-cite a:hover, .ref-cite a:focus-visible { color: var(--rust); }
:target { scroll-margin-top: calc(var(--header-h) + 1.25rem); }
.rs-list li:target { background: var(--rust-tint); outline: 1px solid var(--rust-pale); }

/* the panel's two columns, as the opening */
.ref-sum { display: grid; gap: 0 clamp(1.25rem, 4vw, 3rem);
           grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ref-sum p.lab:not(:first-child) { margin-top: 1.25rem; }

.ref-callout {
  margin: 1.25rem 0 !important; padding: .9rem 1.1rem;
  background: var(--sand); border-left: 2px solid var(--rust);
  font-size: .98rem !important;
}
.ref-callout .lab { display: flex; margin-bottom: .35rem; color: var(--sand-label); }
.ref-callout--src { border-left-color: var(--navy); }

.ref-req { display: grid; gap: 1rem clamp(1.25rem, 4vw, 3rem);
           grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.5rem 0; }
.ref-req ul, .ref-tr ul { margin: 0; padding: 0; list-style: none; }
.ref-req li { padding: .5rem 0; border-top: 1px solid var(--line); font-size: .95rem;
              line-height: 1.5; color: var(--steel-deep); }
.ref-req li:first-child { border-top: 0; padding-top: 0; }
.ref-req p:not(.lab) { font-size: .98rem; }

.ref-tr { margin-top: 1.75rem; }
.ref-tr li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .25rem 1rem;
             padding: .6rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.ref-tr li b { color: var(--ink); font-weight: 600; }
.ref-tr li span { color: var(--steel-deep); line-height: 1.5; }

.ref-tis { margin: 0; display: grid; gap: 0 clamp(1.25rem, 4vw, 3rem);
           grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ref-tis > div { padding: .8rem 0; border-top: 1px solid var(--line); }
.ref-tis dt { font: 400 1.12rem/1.3 var(--disp); color: var(--ink); }
.ref-tis dd { margin: .3rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--steel-deep); }

.ref-mechs { margin-top: 1.75rem; }
.ref-mechs .atl-mech p { font-size: 1rem; }

.ref-strange { font: 300 1.2rem/1.55 var(--disp) !important; color: var(--ink) !important;
               padding-left: 1.1rem; border-left: 2px solid var(--rust-pale); }

/* ---- figures ------------------------------------------------------------ */
.ref-figs { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
            margin: 1.75rem 0; }
.ref-figs--kr { grid-template-columns: minmax(0, 1fr); }
/* One figure alone (selenocysteine has no hydropathy strip) takes the row. */
.ref-figs > :only-child { grid-column: 1 / -1; }
.ref-fig {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  padding: clamp(.9rem, 2.4vw, 1.35rem);
  min-width: 0;
}
.ref-fig--wide, .ref-fig--code, .ref-fig--hm { margin: 1.75rem 0; }
.ref-fig figcaption { margin-bottom: .9rem; }
.ref-fig figcaption .lab { margin-bottom: .45rem; }
.ref-fig figcaption b {
  display: block; max-width: 56ch;
  font: 400 1.12rem/1.35 var(--disp); color: var(--ink);
}
.ref-fig-note { margin: .8rem 0 0 !important; font-size: .82rem !important;
                line-height: 1.5 !important; color: var(--steel) !important; max-width: 72ch; }
.ref-fig svg { display: block; width: 100%; height: auto; overflow: visible; }

/* chart grammar, shared by every plot on the page */
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-grid--zero { stroke: var(--line-strong); }
.ch-tick { font: 500 10px var(--label-figures); fill: var(--steel); letter-spacing: .04em; }
.ch-axis { font: 500 10px var(--label); fill: var(--steel); letter-spacing: .14em; text-transform: uppercase; }
.ch-note { font: 500 10px var(--label); fill: var(--steel); letter-spacing: .08em; text-transform: uppercase; }
.ch-lab { font: 500 11px var(--label); fill: var(--ink); letter-spacing: .04em; }
.ch-self { fill: none; stroke: var(--rust); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-alt { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-self-dot { fill: var(--rust); stroke: var(--card); stroke-width: 2; }
.ch-alt-dot { fill: var(--navy); stroke: var(--card); stroke-width: 2; }
.ch-ctx path { fill: none; stroke: var(--line-strong); stroke-width: 1; opacity: .9; }
.ch-ctx path.ch-ctx--hot { stroke: var(--steel); opacity: 1; }
.ch-blood { stroke: var(--navy); stroke-width: 1; opacity: .45; }
.ch-pi { fill: var(--rust); stroke: var(--card); stroke-width: 2; }
.ch-here { fill: var(--ink); stroke: var(--card); stroke-width: 2; }
.ch-hair line { stroke: var(--ink); stroke-width: 1; opacity: .55; }
.ch-hair circle { fill: var(--card); stroke: var(--rust); stroke-width: 2; }
.ch-svg { cursor: crosshair; touch-action: pan-y; }
.ch-svg:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
.ch-read { margin: .5rem 0 0 !important; min-height: 1.5em; font: 500 11px/1.5 var(--label) !important;
           letter-spacing: .06em; text-transform: uppercase; color: var(--steel) !important; }
.ch-read b { color: var(--ink); font-weight: 600; }
.ch-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
             margin: .6rem 0 0 !important; font: 500 11px/1.4 var(--label) !important;
             letter-spacing: .04em; color: var(--steel-deep) !important; }
.ch-key { display: inline-block; width: 16px; height: 2px; vertical-align: middle; margin-right: -.4rem; }
.ch-key--self { background: var(--rust); }
.ch-key--alt { background: var(--navy); }

/* hydropathy */
.hy-axis { stroke: var(--line-strong); stroke-width: 1; }
.hy-tick { stroke: var(--line-strong); stroke-width: 1; }
.hy-dot circle { fill: var(--mist); stroke: var(--line-strong); stroke-width: 1;
                 transition: fill var(--d-fast) var(--ease); }
.hy-dot text { font: 600 8.5px var(--label); fill: var(--steel-deep); pointer-events: none; }
.hy-dot:hover circle, .hy-dot:focus-visible circle { fill: var(--powder); stroke: var(--navy); }
.hy-dot--me circle { fill: var(--rust); stroke: var(--card); stroke-width: 2; }
.hy-dot--me text { fill: var(--card); }
.hy-dot--me:hover circle { fill: var(--rust); }

/* the genetic code */
.cd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cd-t { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 520px;
        font-variant-numeric: lining-nums; }
.cd-t th, .cd-corner { font: 500 10px var(--label); letter-spacing: .12em; color: var(--steel);
                       text-transform: uppercase; text-align: center; padding: .25rem; }
.cd-corner { text-align: left; white-space: nowrap; }
.cd-b1 { font: 400 1.25rem var(--disp) !important; color: var(--ink) !important; width: 2rem; }
.cd-b3 { width: 1.5rem; }
.cd { padding: .38rem .5rem; background: var(--mist); text-align: left; white-space: nowrap; }
.cd b { font: 500 11px var(--label-figures); letter-spacing: .1em; color: var(--steel-deep); margin-right: .45rem; }
.cd span { font: 400 11.5px var(--ui); color: var(--steel); }
.cd--stop { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.cd--stop span { font-style: italic; }
.cd--on { background: var(--ink); }
.cd--on b, .cd--on span { color: var(--paper); }
.cd-grp > * { border-top: 0; }
.cd-t tbody tr.cd-grp > th, .cd-t tbody tr.cd-grp > td { box-shadow: 0 -4px 0 var(--card), 0 -5px 0 var(--line); }
.cd-t tbody tr.cd-grp > td.cd--stop { box-shadow: inset 0 0 0 1px var(--line), 0 -4px 0 var(--card), 0 -5px 0 var(--line); }

/* a comparison: the page's own column carries the accent rule */
.ref-fig--cmp { margin: 1.75rem 0; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-t { width: 100%; min-width: 520px; border-collapse: collapse; }
.cmp-t thead th { font: 500 10px var(--label); letter-spacing: .14em; text-transform: uppercase;
                  color: var(--steel); text-align: left; padding: 0 .9rem .6rem; }
.cmp-t thead th.cmp-me { color: var(--rust); }
.cmp-t tbody th { font: 500 10px var(--label); letter-spacing: .12em; text-transform: uppercase;
                  color: var(--steel); text-align: left; vertical-align: top;
                  padding: .85rem .9rem .85rem 0; width: 9.5rem; }
.cmp-t td { font: 400 .92rem/1.5 var(--ui); color: var(--steel-deep); vertical-align: top;
            padding: .85rem .9rem; }
.cmp-t tbody tr { border-top: 1px solid var(--line); }
.cmp-t td.cmp-me { color: var(--ink); box-shadow: inset 2px 0 0 var(--rust); }

/* pathways: a sequence, across on a wide screen and down on a phone */
.ref-pw { margin: 1.75rem 0; }
.ref-pw figcaption { margin-bottom: .75rem; }
.ref-pw figcaption b { font: 400 1.12rem/1.35 var(--disp); color: var(--ink); display: block; }
.ref-pw figcaption span { display: block; margin-top: .25rem; font-size: .88rem; color: var(--steel); }
.pw { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; row-gap: .9rem; }
.pw-node {
  display: flex; align-items: center;
  padding: .55rem .8rem; min-height: 3rem;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r);
  font: 400 1rem/1.25 var(--disp); color: var(--ink);
}
.pw-node:first-child { border-color: var(--ink); }
.pw-step {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-width: 7.5rem; max-width: 12.5rem; padding: .2rem .8rem 0 .6rem; text-align: center;
}
.pw-step::before {
  content: ""; position: absolute; left: .35rem; right: .65rem; top: 50%;
  height: 1px; background: var(--steel);
}
.pw-step::after {
  content: ""; position: absolute; right: .45rem; top: calc(50% - 4px);
  border: 4px solid transparent; border-left: 6px solid var(--steel); border-right: 0;
}
.pw-enz { position: relative; z-index: 1; padding-bottom: .9rem;
          font: 500 10.5px/1.3 var(--label); letter-spacing: .03em; color: var(--ink); }
.pw-gene { position: relative; z-index: 1; padding-top: .1rem;
           font: 400 10.5px/1.3 var(--ui); color: var(--steel); }
@media (max-width: 720px) {
  .pw { flex-direction: column; align-items: flex-start; row-gap: 0; }
  .pw-node { min-height: 0; }
  .pw-step { max-width: none; min-width: 0; text-align: left; padding: .9rem 0 .9rem 1.6rem; margin-left: 1rem; }
  .pw-step::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .pw-step::after { left: -4px; right: auto; top: auto; bottom: 0;
                    border: 4px solid transparent; border-top: 6px solid var(--steel); border-bottom: 0; }
  .pw-enz { padding-bottom: .1rem; }
}

/* clinical and other cards */
.cl-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); margin: 1.25rem 0; }
.cl-card { background: var(--card); border: 1px solid var(--line); padding: 1rem 1.1rem 1.05rem; }
.cl-card h3 { margin: .3rem 0 .4rem; font: 400 1.18rem/1.25 var(--disp); color: var(--ink); }
.cl-card p { margin: 0 0 .6rem !important; font-size: .93rem !important; line-height: 1.55 !important; }
.cl-type { font: 500 var(--t-label)/1 var(--label) !important; letter-spacing: var(--track-label);
           text-transform: uppercase; color: var(--rust) !important; margin: 0 !important; }
.cl-genes { font-size: .84rem !important; color: var(--steel) !important; }
.cl-test { padding: .55rem .7rem; background: var(--mist); font-size: .86rem !important; margin: .4rem 0 0 !important; }
.cl-test span { display: block; font: 500 9.5px/1.4 var(--label); letter-spacing: .14em;
                text-transform: uppercase; color: var(--steel); margin-bottom: .15rem; }

/* how it is measured */
.lb-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.lb-list li { padding: .95rem 0; border-top: 1px solid var(--line); max-width: 72ch; }
.lb-list b { display: block; font: 400 1.12rem/1.3 var(--disp); color: var(--ink); margin-bottom: .25rem; }
.lb-list li > span { display: block; font-size: .96rem; line-height: 1.6; color: var(--steel-deep); }
.lb-list [data-l] { margin-top: .45rem; padding-left: .8rem; border-left: 2px solid var(--line-strong); }
.lb-list [data-l]::before { content: attr(data-l); display: block; font: 500 9.5px/1.6 var(--label);
                            letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.lb-list .lb-miss { border-left-color: var(--rust-pale); }

/* the three honest columns */
.tr { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.25rem; }
.tr-col { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--navy); padding: 1rem 1.05rem; }
.tr-col--uncertain { border-top-color: var(--steel); }
.tr-col--marketing { border-top-color: var(--rust); }
.tr-h { margin: 0 0 .6rem !important; font: 400 1.2rem/1.2 var(--disp) !important; color: var(--ink) !important; }
.tr-h span { display: block; margin-top: .25rem; font: 500 9.5px/1.4 var(--label); letter-spacing: .12em;
             text-transform: uppercase; color: var(--steel); }
.tr ul { list-style: none; margin: 0; padding: 0; }
.tr li { padding: .6rem 0; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.55; color: var(--steel-deep); }
.tr li:first-child { border-top: 0; padding-top: 0; }
.tr-none { color: var(--steel) !important; font-style: italic; }

/* connections */
.rl-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 1.5rem; }
.rl-card { display: flex; flex-direction: column; gap: 3px; padding: .75rem .8rem;
           background: var(--card); border: 1px solid var(--line); text-decoration: none;
           transition: border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.rl-card:hover, .rl-card:focus-visible { border-color: var(--navy); transform: translateY(-1px); }
.rl-card b { font: 400 1.2rem/1 var(--disp); color: var(--ink); }
.rl-card span { font: 500 9.5px/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--steel-deep); }
.rl-card i { font: 400 11.5px/1.3 var(--ui); font-style: normal; color: var(--steel); }
.atl-topics-ul { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.rl-sky { padding: 1.1rem 1.2rem; background: var(--ink); color: var(--on-ink-body); }
.rl-sky .lab { color: var(--on-ink-mute); }
.rl-sky .lab::before { background: var(--rust-ink); }
.rl-sky p { color: var(--on-ink-body) !important; }
.rl-sky b { color: var(--on-ink); font-weight: 500; }
.rl-sky .btn--line { border-color: var(--line-ink-str); color: var(--on-ink); }
.rl-sky .btn--line:hover { border-color: var(--on-ink); background: rgba(242, 246, 250, .07); }
.rl-sibs { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.rl-sibs a { font-size: .86rem; color: var(--on-ink-mute); text-decoration: none; border-bottom: 1px solid var(--line-ink-str); }
.rl-sibs a:hover { color: var(--on-ink); }

/* sources */
.rs-intro { font-size: .95rem !important; }
.rs-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.rs-list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .6rem;
              padding: .8rem .5rem .85rem 0; border-top: 1px solid var(--line); }
.rs-n { font: 500 11px/1.9 var(--label-figures); color: var(--steel); letter-spacing: .04em; text-align: right; }
.rs-list cite { display: block; font-style: normal; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.rs-meta { display: block; margin-top: .15rem; font: 500 10.5px/1.5 var(--label); letter-spacing: .06em; color: var(--steel); }
.rs-ids { display: block; margin-top: .2rem; font-size: .84rem; }
.rs-ids a { overflow-wrap: anywhere; }
.rs-note { margin: .35rem 0 0 !important; font-size: .86rem !important; line-height: 1.5 !important; color: var(--steel-deep) !important; }
.ref-disc { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---- KRAS --------------------------------------------------------------- */
.dm-bar { fill: var(--navy); }
.dm-bar--tail { fill: var(--steel); }
.dm-in { font: 500 10px var(--label); fill: var(--paper); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.dm-brk { fill: none; stroke: var(--steel-deep); stroke-width: 1.25; }
.dm-lab { font: 500 10px var(--label); fill: var(--ink); letter-spacing: .08em; text-transform: uppercase; }
.dm-num { font: 500 9.5px var(--label-figures); fill: var(--steel); }
.dm-hot line { stroke: var(--rust); stroke-width: 1.25; }
.dm-hot circle { fill: var(--rust); stroke: var(--card); stroke-width: 2; }
.dm-hot text { font: 600 11px var(--label); fill: var(--rust); letter-spacing: .04em; }
.dm-hot:focus-visible { outline: none; }
.dm-hot:focus-visible circle, .dm-hot:hover circle { r: 6; }

.cy-box rect { fill: var(--mist); stroke: var(--line-strong); stroke-width: 1; }
.cy-box--on rect { fill: var(--ink); stroke: var(--ink); }
.cy-box--on .cy-t, .cy-box--on .cy-s { fill: var(--paper); }
.cy-box--eff rect { fill: var(--card); stroke: var(--navy); }
.cy-t { font: 400 15px var(--disp); fill: var(--ink); }
.cy-s { font: 600 10px var(--label); letter-spacing: .2em; fill: var(--steel); }
.cy-box--eff .cy-t { font-size: 13px; }
.cy-arc, .cy-line { fill: none; stroke: var(--steel-deep); stroke-width: 1.5; }
#cy-arr path, #pw-arr path { fill: var(--steel-deep); }
.cy-l { font: 500 11px var(--label); fill: var(--ink); letter-spacing: .06em; }
.cy-m { font: 400 11px var(--ui); fill: var(--steel); }
.cy-x circle { fill: var(--card); stroke: var(--rust); stroke-width: 1.5; }
.cy-x path { stroke: var(--rust); stroke-width: 1.75; stroke-linecap: round; }
.cy-mut { font: 500 11px var(--label); fill: var(--rust); letter-spacing: .03em; }
.cy-drug { font: 500 10px var(--label); fill: var(--navy); letter-spacing: .05em; }

.pm-mem { fill: var(--sand); stroke: var(--sand-line); }
.pm-n rect { fill: var(--card); stroke: var(--line-strong); stroke-width: 1; }
.pm-n text { font: 500 11.5px var(--ui); fill: var(--ink); }
.pm-n--rtk rect { fill: var(--mist); stroke: var(--navy); }
.pm-n--kras rect { fill: var(--ink); stroke: var(--ink); }
.pm-n--kras text { fill: var(--paper); font-weight: 600; letter-spacing: .06em; }
.pm-n--end rect { fill: var(--mist); }
.pm-a { stroke: var(--steel-deep); stroke-width: 1.25; fill: none; }
.pm-drug circle { fill: var(--rust); stroke: var(--card); stroke-width: 2; }
.pm-drug text { font: 500 10px var(--label); fill: var(--rust); letter-spacing: .04em; }

.fq { list-style: none; margin: 0; padding: 0; }
.fq li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 3.4rem; gap: .8rem;
         align-items: center; padding: .38rem 0; }
.fq-name { font-size: .9rem; color: var(--ink); line-height: 1.3; }
.fq-bar { position: relative; height: 14px; background: var(--mist); }
.fq-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--navy);
            border-radius: 0 3px 3px 0; }
.fq-v { font: 500 12px var(--label-figures); color: var(--ink); text-align: right; }
@media (max-width: 560px) { .fq li { grid-template-columns: minmax(0, 1fr) 3rem; }
                            .fq-name { grid-column: 1 / -1; } }

.hm-scroll, .th-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm { border-collapse: separate; border-spacing: 2px; min-width: 520px; width: 100%; }
.hm th { font: 500 10px var(--label); letter-spacing: .1em; color: var(--steel); text-transform: uppercase;
         padding: .3rem .4rem; text-align: center; }
.hm tbody th { text-align: left; font: 400 .88rem var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.hm-c { text-align: center; padding: .5rem .3rem; font: 500 11.5px var(--label-figures); color: var(--ink);
        background: color-mix(in srgb, var(--navy) calc(var(--k, 0) * 100%), var(--mist)); }
.hm-c--dk { color: var(--paper); }
.hm-c--na { background: transparent; color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line); }

.th { border-collapse: collapse; width: 100%; min-width: 720px; margin: 1.25rem 0; font-size: .9rem; }
.th th, .th td { text-align: left; vertical-align: top; padding: .75rem .9rem .8rem 0; border-top: 1px solid var(--line); line-height: 1.5; }
.th thead th { font: 500 var(--t-label) var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel); border-top: 0; }
.th tbody th { width: 13rem; }
.th tbody th b { display: block; font: 400 1.05rem/1.3 var(--disp); color: var(--ink); }
.th td { color: var(--steel-deep); }
.th--iso { min-width: 560px; }
/* The general layout's tables (_ref_table). Three columns or fewer read on a
   phone without scrolling; wider ones keep the drug table's floor. */
.ref-fig--tbl { margin: 1.75rem 0; }
.th--gen tbody th { width: auto; min-width: 9rem; font-weight: 400; color: var(--ink); }
.th--narrow { min-width: 0; }
.ref-tbl-note { font-size: .86rem; line-height: 1.55; color: var(--steel); max-width: 72ch; margin: .25rem 0 0; }

/* The section glossary (_ref_defs): the definitions the prose already gave,
   gathered for the reader who met a word cold. */
.ref-defs { margin: 1.5rem 0 0; padding: 1rem 1.1rem 1.05rem; background: var(--card);
            border: 1px solid var(--line); max-width: 72ch; }
.ref-defs dl { margin: .5rem 0 0; }
.ref-defs dl > div { padding: .45rem 0; border-top: 1px solid var(--line); }
.ref-defs dl > div:first-child { border-top: 0; padding-top: 0; }
.ref-defs dt { font: 400 1rem/1.3 var(--disp); color: var(--ink); }
.ref-defs dd { margin: .15rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--steel-deep); }
.th-k { display: inline-block; margin-top: .35rem; padding: 3px 6px; border-radius: var(--r-sm);
        font: 500 9px/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase;
        border: 1px solid var(--line-strong); color: var(--steel); }
.th-k--approved { border-color: var(--navy); color: var(--navy); }
.th-k--failed { border-color: var(--rust-pale); color: var(--rust); }

.hs-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin: 1.25rem 0; }
.hs-card { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--rust); padding: .9rem 1rem; }
.hs-codon { margin: 0 0 .3rem !important; font: 300 2rem/1 var(--disp) !important; color: var(--ink) !important; }
.hs-vars { margin: 0 0 .5rem !important; }
.hs-vars code { font: 500 10.5px var(--label-figures); padding: 2px 5px; margin: 0 3px 3px 0; display: inline-block;
                background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-sm); }
.hs-card p { font-size: .9rem !important; line-height: 1.55 !important; margin: 0 0 .5rem !important; }
.hs-share { color: var(--steel) !important; font-size: .84rem !important; }

/* the protein in three dimensions */
.p3-fig { margin: 1.75rem 0; background: var(--ink); border: 1px solid var(--line-ink);
          padding: clamp(.9rem, 2.4vw, 1.35rem); color: var(--on-ink-body); }
.p3-fig figcaption .lab { color: var(--on-ink-mute); }
.p3-fig figcaption .lab::before { background: var(--rust-ink); }
.p3-fig figcaption b { display: block; max-width: 56ch; font: 400 1.12rem/1.35 var(--disp); color: var(--on-ink); }
.p3-stage { position: relative; aspect-ratio: 16 / 10; margin-top: .9rem; cursor: grab; touch-action: pan-y;
            background-image: radial-gradient(110% 90% at 30% 22%, rgba(198,217,232,.07), rgba(198,217,232,0) 66%); }
.p3-stage:active { cursor: grabbing; }
.p3-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.p3-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .8rem; }
.p3-tab { -webkit-appearance: none; appearance: none; cursor: pointer;
          padding: 7px 11px; font: 500 10px/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase;
          background: transparent; color: var(--on-ink-mute); border: 1px solid var(--line-ink-str); }
.p3-tab:hover { color: var(--on-ink); border-color: var(--on-ink-mute); }
.p3-tab[aria-pressed="true"] { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.p3-cap { margin: .7rem 0 0 !important; min-height: 3em; font-size: .88rem !important; color: var(--on-ink-body) !important; }
.p3-key { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .6rem 0 0 !important;
          font: 500 10px/1.5 var(--label) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-mute) !important; }
.p3-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.p3-fig .ref-fig-note { color: var(--on-ink-faint) !important; }
.p3-fig a { color: var(--on-ink); }

/* ---- narrow screens ------------------------------------------------------ */
@media (max-width: 960px) {
  .ref-hero { grid-template-columns: minmax(0, 1fr); }
  .ref-figs { grid-template-columns: minmax(0, 1fr); }
  .tr { grid-template-columns: minmax(0, 1fr); }
  .ref-hero--plain .ref-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ref-sum, .ref-req, .ref-tis { grid-template-columns: minmax(0, 1fr); }
  .ref-facts, .ref-hero--plain .ref-facts { grid-template-columns: minmax(0, 1fr); }
  .ref-tr li { grid-template-columns: minmax(0, 1fr); }
  .rs-list li { grid-template-columns: 1.6rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .rl-card, .hy-dot circle, .ref-toc a { transition: none; }
}
@media print {
  .ref-toc, .ref-acts, .p3-fig, .ref-atl { display: none; }
  .ref-body { grid-template-columns: 1fr; }
}
.ref-numbers { margin: .7rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--steel); }
.ref-numbers a { color: var(--steel-deep); }

/* The viewer's key. The swatches are the renderer's own colours, written
   once here so the legend cannot drift from what is drawn. */
.p3-key i[data-k="chain"] { background: rgb(108,130,158); }
.p3-key i[data-k="ploop"] { background: rgb(150,180,214); }
.p3-key i[data-k="sw1"]   { background: rgb(224,168,142); }
.p3-key i[data-k="sw2"]   { background: rgb(214,128,96); }
.p3-key i[data-k="nuc"]   { background: rgb(142,176,228); }
.p3-key i[data-k="mg"]    { background: rgb(176,226,192); }
.p3-key i[data-k="drug"]  { background: rgb(247,201,120); }
.p3-key i[data-k="hot"]   { background: rgb(236,112,84); }

/* ==========================================================================
   The history, as a dated spine.

   An ordered list with the rule drawn down the gutter, because the order IS
   the content: a screen reader hears dated steps in sequence whatever the
   drawing does. The overturned entries are the point of keeping a timeline
   at all, so they are marked three ways at once -- rust dot, heavier dot,
   and the word "Overturned" in the label -- never by colour alone.
   ========================================================================== */
.ref-fig--tl { margin: 1.75rem 0; }
.tl { list-style: none; margin: 1.1rem 0 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 6px; top: .4rem; bottom: .4rem;
              width: 1px; background: var(--line); }
.tl-i { position: relative; display: grid; grid-template-columns: 150px 1fr;
        gap: 0 1.25rem; padding: 0 0 1.15rem 0; }
.tl-when { position: relative; margin: 0 !important; padding-left: 26px;
           display: flex; flex-direction: column; gap: 2px; }
.tl-when b { font: 400 1.02rem/1.2 var(--disp); color: var(--ink); }
.tl-kind { font: 600 9px/1 var(--label); letter-spacing: .1em; text-transform: uppercase;
           color: var(--steel); }
.tl-dot { position: absolute; left: 0; top: .34rem; width: 13px; height: 13px;
          border-radius: 50%; background: var(--paper); border: 1px solid var(--steel);
          box-shadow: 0 0 0 3px var(--paper); }
.tl-i--reverse .tl-dot { background: var(--rust); border-color: var(--rust); width: 15px;
                         height: 15px; left: -1px; }
.tl-i--reverse .tl-kind { color: var(--rust); }
.tl-what h3 { margin: 0 0 .25rem; font: 400 1.1rem/1.3 var(--disp); color: var(--ink); }
.tl-what p { margin: 0; }
.tl-i--reverse .tl-what { border-left: 2px solid var(--rust); padding-left: .9rem;
                          margin-left: -.9rem; }

/* ==========================================================================
   Tabs — but only once a script arrives.

   Server-rendered, this is a stack of headed sections in reading order, and
   that is the canonical document. reference.js adds [data-tabbed] to the
   wrapper, which is the ONLY thing that turns on any of the rules below. A
   reader with scripts off gets every panel, open, in order.
   ========================================================================== */
.tb-p + .tb-p { margin-top: 1.5rem; }
.tb-h { margin: 0 0 .4rem; font: 400 1.16rem/1.3 var(--disp); color: var(--ink); }
.tb-lead { font-size: 1.02rem; color: var(--steel-deep); }
.tb[data-tabbed] .tb-h { position: absolute; width: 1px; height: 1px; overflow: hidden;
                         clip: rect(0 0 0 0); white-space: nowrap; }
.tb[data-tabbed] .tb-p + .tb-p { margin-top: 0; }
.tb[data-tabbed] .tb-p[hidden] { display: none; }
.tb-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1.1rem; }
.tb-tab { -webkit-appearance: none; appearance: none; cursor: pointer; background: transparent;
          border: 1px solid var(--line-strong); border-radius: var(--r-lg);
          padding: 9px 15px; font: 600 .69rem/1 var(--label); letter-spacing: .09em;
          text-transform: uppercase; color: var(--steel-deep);
          transition: background-color var(--d-fast) var(--ease),
                      color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.tb-tab:hover { color: var(--ink); border-color: var(--ink); }
.tb-tab[aria-selected="true"] { background: var(--ink); color: var(--paper);
                                border-color: var(--ink); }

@media (max-width: 760px) {
  .tl-i { grid-template-columns: 1fr; gap: .35rem; }
  .tl-when { flex-direction: row; align-items: baseline; gap: .6rem; }
  .tl-i--reverse .tl-what { margin-left: 0; }
}

/* ---------------------------------------------------- forms, side by side --
   tools/draw-forms.py draws every form of a molecule on one set of
   coordinates, so the shared part sits in the same place in every card and
   the eye goes straight to what differs. The drawings are inline SVG themed
   from here: bonds and labels in ink, the difference on the copper wash --
   the site's one accent at its quietest, and the only color on the figure.
   Every drawing is at the same scale (one bond = 26px), so a bigger molecule
   is drawn bigger; a card only goes wide when its drawing needs the room. */
.fm { margin: 1.5rem 0 1.75rem; }
.fm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
           gap: .5rem 1.5rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.fm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0 !important;
             font-size: .84rem !important; line-height: 1.4 !important; color: var(--steel-deep); }
.fm-key { display: inline-block; width: 22px; height: 12px; border-radius: 6px; flex: none; }
.fm-key--same { border: 1.6px solid var(--ink); height: 2px; border-width: 1.6px 0 0; border-radius: 0; width: 18px; }
.fm-key--diff { background: var(--rust-pale); margin-left: .6rem; }
.fm-group { margin-top: 1.6rem; }
.fm-group h3 { margin: 0 0 .3rem; font: 400 1.3rem/1.25 var(--disp); color: var(--ink); }
.fm-gnote { margin: 0 0 .9rem !important; max-width: 70ch; font-size: .95rem !important; line-height: 1.6 !important; }
.fm-grid { display: grid; gap: 10px; grid-auto-flow: dense;
           grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 900px) { .fm-card--wide { grid-column: span 2; } }
.fm-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
           padding: 1rem 1.1rem 1.05rem; min-width: 0; }
.fm-card header { margin-bottom: .55rem; }
.fm-card h4 { margin: 0; font: 400 1.16rem/1.25 var(--disp); color: var(--ink); }
.fm-aka { margin: .15rem 0 0 !important; font: 500 var(--t-label)/1.5 var(--label) !important;
          letter-spacing: .1em; text-transform: uppercase; color: var(--steel) !important; }
.fm-draw { display: flex; align-items: center; justify-content: center; min-height: 128px;
           padding: .35rem 0 .5rem; overflow-x: auto; }
.fm-svg { display: block; max-width: 100%; height: auto; }
.fm-bond { stroke: var(--ink); }
.fm-at { fill: var(--ink); font-family: var(--ui); font-weight: 500; }
.fm-note { fill: var(--rust); font-family: var(--label); font-weight: 550; letter-spacing: .04em; }
.fm-wash path { stroke: var(--rust-pale); stroke-width: 21.8px; stroke-linecap: round; fill: none; }
.fm-wash circle, .fm-wash rect { fill: var(--rust-pale); }
.fm-formula { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; margin: 0 0 .6rem !important;
              padding-top: .55rem; border-top: 1px solid var(--line);
              font: 500 .9rem/1.3 var(--label-figures) !important; color: var(--ink) !important; }
.fm-formula b { font-weight: 500; }
.fm-formula span { font-size: .78rem; color: var(--steel); }
.fm-change { margin: 0 0 .6rem !important; padding: .5rem .7rem; background: var(--rust-tint);
             font-size: .88rem !important; line-height: 1.5 !important; }
.fm-change span { display: block; font: 500 9.5px/1.4 var(--label); letter-spacing: .14em;
                  text-transform: uppercase; color: var(--rust); margin-bottom: .15rem; }
.fm-body { margin: 0 !important; font-size: .9rem !important; line-height: 1.58 !important; }
@media print { .fm-card { break-inside: avoid; } }