/* Lab-sheet pages (2026-11-02): the interactive data tools (heatmap, flavor map,
   graph explorer, research search, mixer) and the compound page. A light graph-paper
   header band with a monospace sheet label, a serif title and a monospace "spec strip"
   of live facts; then square-edged, thin-ruled, numbered panels (01 controls, 02 the
   tool, 03 how to read it, 04 data / method / limits). Plain CSS on the shared tokens in
   ck-frame-v20261103.css; every class is prefixed ck-l- so it cannot meet the precompiled
   Tailwind classes other templates still use. Light theme only, like the rest of the site. */

.ck-l { font-family: var(--ck-body); color: var(--ck-fg); background: var(--ck-bg); font-size: 16px; line-height: 1.55; }
.ck-l a { color: var(--ck-sage-ink); }
.ck-l :focus-visible { outline: 2px solid var(--ck-copper); outline-offset: 2px; }
.ck-l .ck-btn-sage, .ck-l .ck-btn-copper { color: #FFFFFF; }

/* ---- Header band (graph paper) --------------------------------------------- */
.ck-l-band { background-color: var(--ck-bg); border-bottom: 1px solid var(--ck-fg);
  background-image: linear-gradient(var(--ck-line) 1px, transparent 1px), linear-gradient(90deg, var(--ck-line) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; }
.ck-l-band > .ck-wrap { padding-top: 20px; }
.ck-l-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px;
  border-bottom: 1px solid var(--ck-fg); padding-bottom: 10px; }
.ck-l-crumbs { font-size: 13px; color: var(--ck-fg2); margin: 0; }
.ck-l-crumbs a { color: var(--ck-fg2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ck-line); }
.ck-l-crumbs a:hover { color: var(--ck-sage-ink); text-decoration-color: currentColor; }
.ck-l-sheetno { font: 500 12px var(--ck-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ck-fg2); }
.ck-l-head { display: flex; flex-wrap: wrap; gap: 24px 36px; align-items: center; padding: 24px 0 26px; }
.ck-l-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ck-l-eyebrow { font: 500 12px var(--ck-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ck-copper); margin: 0; }
.ck-l-band h1 { font: 400 clamp(36px, 5.6vw, 64px)/1.03 var(--ck-display); margin: 0; color: var(--ck-fg); text-wrap: balance; }
.ck-l-band h1 em { font-style: normal; color: var(--ck-copper); }
.ck-l-desc { font-size: 17px; line-height: 1.55; color: var(--ck-fg2); margin: 0; max-width: 40em; }
.ck-l-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-l-line { background: transparent; color: var(--ck-fg); border-color: var(--ck-fg); }
.ck-l .ck-l-line { color: var(--ck-fg); }
.ck-l-line:hover { background: rgba(45,42,38,.05); }

/* A boxed "plate" beside the title (the compound page's molecule, the research page's
   featured paper). Hard offset shadow, no radius. */
.ck-l-plate { flex: 1 1 340px; min-width: 0; max-width: 480px; margin: 0; background: var(--ck-card);
  border: 1px solid var(--ck-fg); padding: 18px; box-shadow: 6px 6px 0 var(--ck-fg); box-sizing: border-box; }
@media (max-width: 520px) { .ck-l-plate { box-shadow: 4px 4px 0 var(--ck-fg); margin-right: 4px; } }
.ck-l-plate h2 { font: 400 21px/1.25 var(--ck-display); margin: 6px 0 8px; color: var(--ck-fg); }
.ck-l-plate p { margin: 0 0 10px; font-size: 14px; color: var(--ck-fg2); }

/* ---- Spec strip: live key facts, monospace, ruled cells --------------------- */
.ck-l-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0;
  border-top: 1px solid var(--ck-fg); overflow: hidden; }
.ck-l-spec > div { padding: 10px 12px; background: var(--ck-bg); border-right: 1px solid var(--ck-line);
  border-bottom: 1px solid var(--ck-line); margin: 0 -1px -1px 0; min-width: 0; }
.ck-l-spec dt { font: 500 10.5px var(--ck-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ck-fg3); }
.ck-l-spec dd { margin: 2px 0 0; font: 500 15px var(--ck-mono); color: var(--ck-fg); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }
.ck-l-spec dd small { font-size: 11px; color: var(--ck-fg3); }
@media (max-width: 520px) { .ck-l-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Body + numbered panels ------------------------------------------------ */
.ck-l-body { padding-top: 28px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 22px; }
.ck-l-panel { border: 1px solid var(--ck-fg); background: var(--ck-card); min-width: 0; margin: 0; }
.ck-l-ph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 10px 16px;
  border-bottom: 1px solid var(--ck-line); font: 500 12px var(--ck-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ck-fg); }
.ck-l-ph > span:first-child { color: var(--ck-copper); }
.ck-l-ph small { margin-left: auto; font: 400 11.5px var(--ck-mono); letter-spacing: .02em; text-transform: none; color: var(--ck-fg3); }
.ck-l-pb { padding: 16px; }
.ck-l-pb.ck-l-flush { padding: 0; }
.ck-l-pair { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--ck-fg); background: var(--ck-card); }
.ck-l-pair > .ck-l-panel { border: 0; }
.ck-l-pair > .ck-l-panel + .ck-l-panel { border-top: 1px solid var(--ck-fg); }
@media (min-width: 860px) {
  .ck-l-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ck-l-pair > .ck-l-panel + .ck-l-panel { border-top: 0; border-left: 1px solid var(--ck-fg); }
}

/* Text inside panels 03 / 04 */
.ck-l-prose { font-size: 15px; line-height: 1.6; color: var(--ck-fg2); }
.ck-l-prose > :first-child { margin-top: 0; }
.ck-l-prose > :last-child { margin-bottom: 0; }
.ck-l-prose p, .ck-l-prose ul { margin: 0 0 10px; }
.ck-l-prose ul { padding-left: 18px; }
.ck-l-prose strong, .ck-l-prose b { color: var(--ck-fg); }
.ck-l-defs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--ck-line); font-size: 14px; }
.ck-l-defs > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--ck-line); }
.ck-l-defs dt { font: 500 11px var(--ck-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ck-copper); padding-top: 2px; }
.ck-l-defs dd { margin: 0; color: var(--ck-fg2); overflow-wrap: anywhere; }
@media (max-width: 520px) { .ck-l-defs > div { grid-template-columns: minmax(0, 1fr); } }
.ck-l-fine { font: 400 12px/1.55 var(--ck-mono); color: var(--ck-fg3); margin: 8px 0 0; }
.ck-l-mono { font-family: var(--ck-mono); font-variant-numeric: tabular-nums; }

/* ---- Controls ---------------------------------------------------------------- */
.ck-l-controls { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.ck-l-label { font: 500 11px var(--ck-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ck-fg3); }
.ck-l-input, .ck-l-select { min-height: 44px; padding: 0 12px; border: 1px solid var(--ck-fg); border-radius: 0; background: #FFFFFF;
  color: var(--ck-fg); font: inherit; font-size: 15px; box-sizing: border-box; max-width: 100%; }
.ck-l-input { flex: 1 1 240px; min-width: 0; }
.ck-l-input:focus, .ck-l-select:focus { outline: 2px solid var(--ck-copper); outline-offset: 0; }
.ck-l-tbtn { min-height: 44px; padding: 0 14px; border: 1px solid var(--ck-fg); border-radius: 0; background: var(--ck-card);
  color: var(--ck-fg); font: 500 12px var(--ck-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ck-l-tbtn:hover { background: var(--ck-tint); }
.ck-l-tbtn.active, .ck-l-tbtn[aria-pressed="true"] { background: var(--ck-sage); border-color: var(--ck-sage); color: #FFFFFF; }
.ck-l-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-l-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--ck-line);
  background: var(--ck-bg); color: var(--ck-fg); font: 400 13px var(--ck-mono); text-decoration: none; cursor: pointer; }
.ck-l .ck-l-chip { color: var(--ck-fg); }
.ck-l-chip:hover { border-color: var(--ck-sage-ink); color: var(--ck-sage-ink); }
.ck-l-note { font-size: 13px; color: var(--ck-fg3); margin: 0; }

/* A chart that needs width scrolls in its own box, never the page. */
.ck-l-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.ck-l-hint { display: none; font: 400 12px var(--ck-mono); color: var(--ck-fg3); margin: 0 0 8px; }
@media (max-width: 760px) { .ck-l-hint { display: block; } }

/* ---- Newsletter strip (shared by every lab page) ------------------------------ */
.ck-l-news { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  border: 1px dashed var(--ck-fg3); background: var(--ck-band); padding: 16px; }
.ck-l-news p { margin: 0; font: 500 14px/1.45 var(--ck-mono); color: var(--ck-fg); }
.ck-l-news form { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; max-width: 520px; }
.ck-l-news input[type=email] { flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--ck-fg);
  border-radius: 0; background: #FFFFFF; color: var(--ck-fg); font: 14px var(--ck-mono); box-sizing: border-box; }
.ck-l-news button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 0; background: var(--ck-sage); color: #FFFFFF;
  font: 600 14px var(--ck-mono); letter-spacing: .04em; cursor: pointer; }
.ck-l-news button:hover { background: var(--ck-sage-deep); }

/* ---- Pagination (research) ------------------------------------------------------ */
.ck-l-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.ck-l-pages a, .ck-l-pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 0 10px; box-sizing: border-box; border: 1px solid var(--ck-line); font: 500 13px var(--ck-mono); color: var(--ck-fg); text-decoration: none; }
.ck-l .ck-l-pages a { color: var(--ck-fg); }
.ck-l-pages a:hover { border-color: var(--ck-sage-ink); }
.ck-l-pages .is-on { background: var(--ck-sage); border-color: var(--ck-sage); color: #FFFFFF; }
.ck-l-pages .is-gap { border: 0; min-width: 24px; color: var(--ck-fg3); }
.ck-l-pages .is-total { border: 0; color: var(--ck-fg3); font-weight: 400; }