/* The Analytical Column - home page: the chromatogram header and the two shelves */
.wrap.wide{max-width:880px}
.masthead h1.col a.home{color:inherit;text-decoration:none}
.chrom-card{margin:26px 0 0;padding:16px 16px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
svg.chrom{display:block;width:100%;height:auto;aspect-ratio:1000/300;overflow:visible}
svg.chrom .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
svg.chrom .axis{stroke:var(--soft);stroke-width:1.5}
svg.chrom .area{fill:var(--teal);opacity:.09}
svg.chrom .trace{fill:none;stroke:var(--teal-d);stroke-width:2.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
svg.chrom .hit{fill:transparent;cursor:pointer}
svg.chrom .peak{cursor:pointer;outline:none}
svg.chrom .peak.empty{cursor:default}
svg.chrom text{font-family:"IBM Plex Sans",system-ui,sans-serif;text-anchor:middle;fill:var(--ink)}
svg.chrom .lbl{font-size:19px;font-weight:600}
svg.chrom .cnt{font-family:"IBM Plex Mono",monospace;font-size:15px;fill:var(--gold)}
svg.chrom .num{display:none;font-family:"IBM Plex Mono",monospace;font-size:34px;font-weight:600;fill:var(--gold)}
svg.chrom .soon{fill:var(--faint);font-weight:400;font-style:italic}
svg.chrom .xlab{font-family:"IBM Plex Mono",monospace;font-size:14px;fill:var(--faint);text-anchor:start;letter-spacing:.06em}
svg.chrom .xlab.end{text-anchor:end}
svg.chrom .peak:hover .lbl,svg.chrom .peak:focus-visible .lbl,svg.chrom .peak.on .lbl{fill:var(--teal-d)}
svg.chrom .peak:focus-visible .hit{fill:var(--teal);opacity:.07}
svg.chrom .peak.on .hit{fill:var(--gold);opacity:.08}
.chrom-card figcaption{font-family:"IBM Plex Sans";font-size:13.5px;color:var(--soft);margin:10px 2px 0;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.chip{font-family:"IBM Plex Sans";font-size:13px;border:1px solid var(--line2);background:var(--card2);color:var(--ink);border-radius:999px;padding:5px 11px;cursor:pointer;min-height:32px}
.chip b{font-family:"IBM Plex Mono";color:var(--gold);margin-right:3px}
.chip:hover{border-color:var(--teal)}
.chip.on{background:var(--teal-d);border-color:var(--teal-d);color:var(--paper)}
.chip.on b{color:var(--paper)}
.chip[disabled]{opacity:.45;cursor:default}
.filtering{font-family:"IBM Plex Sans";font-size:14px;color:var(--soft);margin:12px 2px 0}
.filtering .clear{font:inherit;color:var(--teal-d);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.how{font-family:"IBM Plex Sans";font-size:15px;color:var(--soft);margin:22px 0 0;padding:12px 16px;border-left:3px solid var(--gold);background:var(--card2);border-radius:0 10px 10px 0}
.how b{color:var(--ink)}
.shelf{margin-top:46px}
.shelf-h{font-weight:600;font-size:30px;letter-spacing:-.01em;margin:0;padding-bottom:6px;border-bottom:2px solid var(--rule)}
.shelf-d{font-style:italic;color:var(--soft);margin:12px 0 4px;font-size:18px}
.banner{display:block;width:100%;max-width:520px;height:auto;margin:16px 0 4px;border-radius:10px;border:1px solid var(--line);background:#fff}
ol.pieces{list-style:none;margin:8px 0 0;padding:0}
ol.pieces li{border-bottom:1px solid var(--line)}
ol.pieces li[hidden]{display:none}
ol.pieces a{display:block;padding:14px 4px;text-decoration:none;color:var(--ink)}
ol.pieces a:hover .t{color:var(--teal-d)}
ol.pieces .meta{display:block;font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
ol.pieces .t{display:block;font-size:22px;font-weight:600;line-height:1.25;margin-top:3px}
ol.pieces .d{display:block;font-size:16.5px;color:var(--soft);line-height:1.5;margin-top:4px}
.shelf .none{font-family:"IBM Plex Sans";font-size:14px;color:var(--faint);margin:12px 4px}
@media (max-width:640px){
  .chrom-card{padding:12px 10px 12px}
  svg.chrom .lbl,svg.chrom .cnt{display:none}
  svg.chrom .num{display:inline}
  svg.chrom .xlab{font-size:24px}
  .shelf-h{font-size:26px}
  ol.pieces .t{font-size:20px}
}