/* Non-browser SCREATE pages only. Keep plot geometry and data colors native.
 * This layer is deliberately separate from the theme consumed by JBrowse.
 */
body.screate-content-page {
  --screate-paper: #f7f5ef;
  --screate-panel: #fffefb;
  --screate-ink: #172321;
  --screate-muted: #64727e;
  --screate-line: #dce3df;
  --screate-accent: #086f69;
  --screate-accent-dark: #07544f;
  --screate-accent-soft: #dcefeb;
  --screate-control-line: #cbd7d2;
  color: var(--screate-ink);
  background: var(--screate-paper);
  font-family: var(--screate-font-sans, system-ui, sans-serif);
}

body.screate-content-page :where(button, input, select, textarea) {
  font-family: var(--screate-font-sans, system-ui, sans-serif);
  accent-color: var(--screate-accent);
}

body.screate-content-page :where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--screate-accent);
  outline-offset: 3px;
}

body.screate-content-page :where(button, .tablink, .screate-site-nav a) {
  border-radius: 5px;
}

body.screate-content-page .screate-site-header,
body.screate-content-page #top {
  border-bottom: 1px solid var(--screate-line);
  background: var(--screate-panel);
  box-shadow: none;
}

body.screate-content-page .screate-site-brand,
body.screate-content-page #title {
  color: var(--screate-accent-dark);
  font-size: 16px;
  letter-spacing: .055em;
}

body.screate-content-page .screate-site-nav a,
body.screate-content-page #top .tablink {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

/* Reading pages use a comfortable document rhythm, not a second hero. */
body.screate-content-page.screate-document-page #top {
  min-height: 72px;
  padding: 8px clamp(16px, 3vw, 40px);
}

body.screate-content-page.screate-document-page #title {
  font-size: 21px;
}

body.screate-content-page.screate-document-page #top .tablink {
  font-size: 13px;
}

body.screate-content-page.screate-document-page .page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  padding: clamp(24px, 4vw, 48px) 24px 72px;
}

body.screate-content-page.screate-document-page .card {
  margin-top: 0;
  padding: clamp(24px, 4vw, 46px);
  background: var(--screate-panel);
  border: 1px solid var(--screate-line);
  border-top: 3px solid var(--screate-accent);
  border-radius: 6px;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.75;
}

body.screate-document-page .card > h1:first-child,
body.screate-document-page .card > h2:first-child {
  font-family: var(--screate-font-display, Georgia, serif);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.035em;
}

body.screate-document-page .card h2 {
  margin: 30px 0 14px;
  font-family: var(--screate-font-display, Georgia, serif);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}

body.screate-document-page .card h3 {
  margin: 28px 0 10px;
  color: var(--screate-accent-dark);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}

body.screate-document-page .card :where(p, ul, ol) {
  max-width: 78ch;
  margin: 14px 0;
}

body.screate-document-page .card :where(ul, ol) {
  padding-left: 24px;
}

body.screate-document-page .card li + li {
  margin-top: 6px;
}

body.screate-document-page .card a {
  color: var(--screate-accent-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.screate-document-page .card a:hover {
  color: var(--screate-accent);
}

body.screate-document-page .card .blocklink {
  padding: 12px 16px;
  border: 1px solid var(--screate-line);
  border-radius: 5px;
  background: var(--screate-paper);
  overflow-wrap: anywhere;
}

body.screate-document-page .card .hr {
  margin: 26px 0;
}

body.screate-document-page .card code {
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--screate-accent-soft);
  color: var(--screate-accent-dark);
  font-size: .88em;
  overflow-wrap: anywhere;
}

/* Explorers stay compact. Do not override app/grid sizes or row dimensions:
 * virtualized lists and matrix canvases depend on those measurements.
 */
body.screate-content-page .eyebrow {
  color: var(--screate-accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
}

body.screate-content-page.screate-catalogue-page .brand,
body.screate-content-page.screate-catalogue-page .trait-header {
  padding: 18px 20px 16px;
  border-bottom-color: var(--screate-line);
  background: var(--screate-panel);
}

body.screate-content-page.screate-catalogue-page h1,
body.screate-content-page.screate-catalogue-page .trait-header h2 {
  font-family: var(--screate-font-display, Georgia, serif);
  font-size: clamp(25px, 2.15vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.03em;
}

body.screate-content-page.screate-catalogue-page .summary {
  font-size: 12px;
  line-height: 1.5;
}

body.screate-content-page.screate-catalogue-page .toolbar {
  gap: 7px 10px;
  margin-top: 12px;
}

body.screate-content-page.screate-catalogue-page .toolbar button {
  font-size: 12px;
  padding: 6px 9px;
}

body.screate-content-page.screate-catalogue-page .tree {
  border-color: var(--screate-line);
  border-radius: 6px;
  box-shadow: none;
}

/* Gene evidence uses the catalogue's shared typography and palette. Keep the
 * native 61px virtual-list rows and 30px heatmap cells intact. */
body.screate-content-page.screate-gene-catalogue-page .toolbar {
  margin-top: 0;
  background: var(--screate-panel);
}

body.screate-content-page.screate-gene-catalogue-page :where(.gene, .gene-options) {
  border-color: var(--screate-line);
  border-radius: 6px;
  background: var(--screate-panel);
}

body.screate-content-page.screate-gene-catalogue-page :where(.button, input, select),
body.screate-content-page.screate-gene-evidence-heatmap :where(button, input, select) {
  border-color: var(--screate-control-line);
  border-radius: 5px;
}

body.screate-content-page.screate-gene-catalogue-page .trait-row.active,
body.screate-content-page.screate-gene-catalogue-page .gene-option[aria-selected="true"] {
  background: var(--screate-accent-soft);
}

/* Compact cross-links share the catalogue controls' outline treatment. */
body.screate-content-page .screate-crosslink {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid var(--screate-control-line);
  border-radius: 5px;
  background: var(--screate-panel);
  color: var(--screate-accent-dark);
  font-family: var(--screate-font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

body.screate-content-page .screate-crosslink:hover {
  border-color: var(--screate-accent);
  background: var(--screate-accent-soft);
}

body.screate-content-page .screate-crosslink[hidden] {
  display: none;
}

body.screate-content-page .screate-title-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

body.screate-content-page .screate-title-actions :is(h1, h2) {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.screate-content-page.screate-gene-catalogue-page .title-line,
body.screate-content-page.screate-gene-evidence-heatmap .title-line {
  align-items: center;
  gap: 10px 14px;
}

body.screate-content-page.screate-gene-evidence-heatmap :where(.corner, .col-head, .row-head) {
  background: var(--screate-paper);
  border-color: var(--screate-line);
}

body.screate-content-page.screate-gene-evidence-heatmap .details {
  background: var(--screate-panel);
  border-top-color: var(--screate-line);
}

body.screate-catalogue-page .merged-trait-context {
  padding: 24px;
  max-width: 760px;
}
body.screate-catalogue-page .merged-trait-context h3 {
  margin: 0 0 10px;
  font-family: var(--screate-font-display, Georgia, serif);
  font-size: 25px;
  font-weight: 400;
}
body.screate-catalogue-page .merged-trait-context p {
  color: var(--screate-muted);
  font-size: 13px;
  line-height: 1.6;
}
body.screate-catalogue-page .merged-trait-member {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 12px 0;
  padding: 14px 16px;
  text-align: left;
  background: var(--screate-panel);
  border: 1px solid var(--screate-control-line);
}
body.screate-catalogue-page .merged-trait-member:hover { background: var(--screate-accent-soft); }
body.screate-catalogue-page .merged-trait-member span { color: var(--screate-muted); font-size: 12px; }

body.screate-content-page.screate-umap-page .app > header,
body.screate-content-page.screate-context-heatmap .head {
  padding: 12px 18px 10px;
  background: var(--screate-panel);
  border-bottom-color: var(--screate-line);
}

body.screate-content-page.screate-umap-page h1,
body.screate-content-page.screate-context-heatmap h1 {
  font-family: var(--screate-font-display, Georgia, serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.2;
}

body.screate-content-page.screate-umap-page .panel {
  border-radius: 6px;
  border-color: var(--screate-line);
  box-shadow: none;
}

body.screate-content-page.screate-umap-page .tab {
  border-radius: 5px;
}

body.screate-content-page.screate-context-heatmap .controls {
  margin-top: 8px;
}

body.screate-content-page.screate-plot-page .header {
  padding: 10px 18px;
  gap: 12px 20px;
  background: var(--screate-panel);
  border-bottom-color: var(--screate-line);
  box-shadow: none;
}

body.screate-content-page.screate-plot-page .header h1 {
  font-family: var(--screate-font-display, Georgia, serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}

body.screate-content-page.screate-plot-page .controls {
  gap: 10px 16px;
}

body.screate-content-page.screate-plot-page :where(.cat-panel, .cat-btn, .reset-btn, select) {
  border-radius: 5px;
}

@media (max-width: 760px) {
  body.screate-content-page.screate-document-page .page {
    padding: 20px 14px 40px;
  }

  body.screate-content-page.screate-document-page .card {
    padding: 22px 20px;
  }

  body.screate-content-page.screate-catalogue-page .brand,
  body.screate-content-page.screate-catalogue-page .trait-header {
    padding: 14px 16px;
  }

  body.screate-content-page.screate-plot-page .header {
    padding: 10px 12px;
  }

  body.screate-content-page.screate-plot-page .header h1 {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}