/* ==========================================================================
   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; }
.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); }