/*!
 * CnidoSite interactive cell atlas -- viewer chrome.
 *
 * Everything is scoped under .cna-root and uses its own custom properties, so
 * the widget can be dropped into any page on the site without inheriting or
 * fighting the existing Bootstrap rules.  Toolbar icons are drawn with CSS
 * rather than an icon font, and no web fonts are loaded: the whole viewer is
 * three static files.
 *
 * The cells themselves are painted by cellatlas.js into a <canvas>; this
 * stylesheet supplies the surrounding chrome AND the palette.  The palette
 * lives here, as custom properties, so that a site owner can retheme the atlas
 * without editing JavaScript, and so the dark-mode steps are swapped in one
 * place.  cellatlas.js reads these values back with getComputedStyle().
 */

/* ------------------------------------------------------------------ */
/* palette                                                             */
/* ------------------------------------------------------------------ */
.cna-root {
  /* categorical slots 1-8, light steps */
  --cna-cat-1: #2a78d6;
  --cna-cat-2: #eb6834;
  --cna-cat-3: #1baf7a;
  --cna-cat-4: #eda100;
  --cna-cat-5: #e87ba4;
  --cna-cat-6: #008300;
  --cna-cat-7: #4a3aa7;
  --cna-cat-8: #e34948;

  /* the "everything else" backdrop in highlight mode -- deliberately neutral,
     not a categorical slot */
  --cna-grey: #c9c8c4;

  /* canvas surface */
  --cna-surface: #fcfcfb;

  /* sequential ramp for expression magnitude: ONE hue, light -> dark. Never a
     rainbow -- a rainbow ramp invents boundaries the data does not have. */
  --cna-ramp: #cde2fb #b7d3f6 #9ec5f4 #86b6ef #6da7ec #5598e7 #3987e5
              #2a78d6 #256abf #1c5cab #184f95 #104281 #0d366b;
  --cna-zero: #efeeeb;   /* "not expressed" -- must not read as low expression */
  --cna-na: #d8d7d3;     /* filtered out / no value */

  /* chrome & ink */
  --cna-plane: #f9f9f7;
  --cna-ink: #0b0b0b;
  --cna-ink-2: #52514e;
  --cna-muted: #898781;
  --cna-hair: #e1e0d9;
  --cna-axis: #c3c2b7;
  --cna-accent: #2a78d6;
  --cna-radius: 6px;
  --cna-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --cna-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color: var(--cna-ink);
  font-family: var(--cna-font);
  font-size: 13px;
  line-height: 1.45;
  background: var(--cna-plane);
  border: 1px solid var(--cna-hair);
  border-radius: var(--cna-radius);
  overflow: hidden;
  box-sizing: border-box;
}

.cna-root *,
.cna-root *::before,
.cna-root *::after { box-sizing: inherit; }

/* Dark mode is SELECTED, not flipped: these are the same eight hues re-stepped
   for the dark surface and validated against it (worst all-pairs CVD dE 9.4).
   Declared under both scopes so an explicit [data-theme] toggle wins over the
   OS preference, and the media query still applies when no toggle is set. */
@media (prefers-color-scheme: dark) {
  :where(.cna-root:not([data-theme="light"])) {
    --cna-cat-1: #3987e5;
    --cna-cat-2: #d95926;
    --cna-cat-3: #199e70;
    --cna-cat-4: #c98500;
    --cna-cat-5: #d55181;
    --cna-cat-6: #008300;
    --cna-cat-7: #9085e9;
    --cna-cat-8: #e66767;
    --cna-grey: #4a4a46;
    --cna-surface: #1a1a19;
    /* Ramp reversed: on a dark surface the "high" end must be the LIGHT end,
       otherwise the most-expressing cells vanish into the background.  It also
       stops at step 600 rather than 700 -- below that the low end falls under
       2:1 against the dark surface and stops separating from the neutral
       "not expressed" fill. */
    --cna-ramp: #184f95 #1c5cab #256abf #2a78d6 #3987e5 #5598e7 #6da7ec
                #86b6ef #9ec5f4 #b7d3f6 #cde2fb;
    --cna-zero: #383835;
    --cna-na: #4a4a46;
    --cna-plane: #0d0d0d;
    --cna-ink: #ffffff;
    --cna-ink-2: #c3c2b7;
    --cna-muted: #898781;
    --cna-hair: #2c2c2a;
    --cna-axis: #383835;
    --cna-accent: #3987e5;
  }
}

.cna-root[data-theme="dark"] {
  --cna-cat-1: #3987e5;
  --cna-cat-2: #d95926;
  --cna-cat-3: #199e70;
  --cna-cat-4: #c98500;
  --cna-cat-5: #d55181;
  --cna-cat-6: #008300;
  --cna-cat-7: #9085e9;
  --cna-cat-8: #e66767;
  --cna-grey: #4a4a46;
  --cna-surface: #1a1a19;
  --cna-ramp: #184f95 #1c5cab #256abf #2a78d6 #3987e5 #5598e7 #6da7ec
              #86b6ef #9ec5f4 #b7d3f6 #cde2fb;
  --cna-zero: #383835;
  --cna-na: #4a4a46;
  --cna-plane: #0d0d0d;
  --cna-ink: #ffffff;
  --cna-ink-2: #c3c2b7;
  --cna-muted: #898781;
  --cna-hair: #2c2c2a;
  --cna-axis: #383835;
  --cna-accent: #3987e5;
}

/* ------------------------------------------------------------------ */
/* controls                                                            */
/* ------------------------------------------------------------------ */
.cna-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  padding: 14px 16px 12px;
  background: var(--cna-plane);
  border-bottom: 1px solid var(--cna-hair);
}

.cna-title {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-style: italic;   /* species binomials read as names, not labels */
  margin-right: 4px;
}

.cna-subtitle {
  flex: 1 1 140px;
  color: var(--cna-ink-2);
  font-size: 12px;
  padding-bottom: 2px;
}

.cna-stat-row {
  display: flex;
  gap: 18px;
  flex: 0 0 auto;
  order: 3;
}

.cna-stat { text-align: right; }
.cna-stat-v {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cna-stat-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cna-muted);
}

.cna-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cna-muted);
  display: block;
  margin-bottom: 3px;
}

.cna-select,
.cna-input {
  font: inherit;
  font-size: 13px;
  color: var(--cna-ink);
  background: var(--cna-surface);
  border: 1px solid var(--cna-axis);
  border-radius: 4px;
  padding: 4px 8px;
  min-width: 168px;
}
.cna-input { min-width: 200px; }
.cna-select:focus,
.cna-input:focus {
  outline: 2px solid var(--cna-accent);
  outline-offset: -1px;
}
.cna-gene-wrap { display: flex; gap: 6px; align-items: flex-end; }

.cna-btn {
  font: inherit;
  font-size: 12px;
  color: var(--cna-ink);
  background: var(--cna-surface);
  border: 1px solid var(--cna-axis);
  border-radius: 4px;
  padding: 5px 11px;
  cursor: pointer;
}
.cna-btn:hover { border-color: var(--cna-accent); color: var(--cna-accent); }
.cna-reset { margin-left: auto; }

.cna-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cna-ink-2);
  cursor: pointer;
  user-select: none;
}
.cna-check input { accent-color: var(--cna-accent); }

/* ------------------------------------------------------------------ */
/* stage                                                               */
/* ------------------------------------------------------------------ */
.cna-stage {
  position: relative;
  background: var(--cna-surface);
  height: 620px;
}
.cna-canvas {
  display: block;
  cursor: grab;
  touch-action: none;
}

.cna-hint {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 11px;
  color: var(--cna-muted);
  background: color-mix(in srgb, var(--cna-surface) 82%, transparent);
  padding: 2px 7px;
  border-radius: 3px;
  pointer-events: none;
}

.cna-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 160px;
  max-width: 240px;
  background: var(--cna-surface);
  border: 1px solid var(--cna-axis);
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
  color: var(--cna-ink-2);
}
.cna-tip b { color: var(--cna-ink); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* lower panels                                                        */
/* ------------------------------------------------------------------ */
.cna-lower {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(200px, 1fr) minmax(240px, 1.25fr);
  gap: 1px;
  background: var(--cna-hair);
  border-top: 1px solid var(--cna-hair);
}
@media (max-width: 900px) {
  .cna-lower { grid-template-columns: 1fr; }
  .cna-stage { height: 420px; }
}

.cna-panel {
  background: var(--cna-plane);
  padding: 11px 14px 14px;
  min-width: 0;
}
.cna-panel-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cna-muted);
  margin-bottom: 8px;
}

.cna-note {
  font-size: 11.5px;
  color: var(--cna-muted);
  line-height: 1.5;
}

/* legend ----------------------------------------------------------- */
.cna-legend { max-height: 300px; overflow-y: auto; }
.cna-leg-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.cna-leg-row:hover { background: color-mix(in srgb, var(--cna-axis) 22%, transparent); }
.cna-leg-row.is-on { background: color-mix(in srgb, var(--cna-accent) 13%, transparent); }
.cna-sw {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  /* a hairline ring keeps a light swatch visible on a light panel */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.13);
}
.cna-leg-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cna-leg-n {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--cna-muted);
}

.cna-ramp {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--cna-muted);
}
.cna-ramp-bar {
  flex: 1 1 auto;
  height: 9px;
  border-radius: 2px;
}

/* composition bars ------------------------------------------------- */
.cna-comp { max-height: 300px; overflow-y: auto; }
.cna-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 118px) 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 1.5px 0;
  cursor: pointer;
  font-size: 11.5px;
}
.cna-bar-row:hover .cna-bar-name { color: var(--cna-accent); }
.cna-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cna-bar-track {
  height: 11px;
  background: color-mix(in srgb, var(--cna-axis) 25%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.cna-bar-fill {
  height: 100%;
  /* 2px surface gap keeps adjacent fills from reading as one another */
  border-right: 2px solid var(--cna-plane);
  border-radius: 2px 0 0 2px;
  transition: width 0.15s ease-out;
}
.cna-bar-n {
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--cna-muted);
  min-width: 40px;
  text-align: right;
}

/* expression-by-cell-type bars ------------------------------------- */
.cna-violin { max-height: 300px; overflow-y: auto; }
.cna-v-row {
  display: grid;
  grid-template-columns: minmax(0, 118px) 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 1.5px 0;
  font-size: 11.5px;
}
.cna-v-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cna-v-track {
  height: 9px;
  background: color-mix(in srgb, var(--cna-axis) 25%, transparent);
  border-radius: 2px;
}
.cna-v-bar {
  height: 100%;
  border-radius: 2px;
}
.cna-v-pct {
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--cna-muted);
  min-width: 34px;
  text-align: right;
}

/* ------------------------------------------------------------------ */
/* QC / provenance disclosure                                          */
/* ------------------------------------------------------------------ */
.cna-qc {
  background: var(--cna-plane);
  border-top: 1px solid var(--cna-hair);
  font-size: 12px;
}
.cna-qc > summary {
  cursor: pointer;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cna-ink-2);
  list-style: none;
}
.cna-qc > summary::-webkit-details-marker { display: none; }
.cna-qc > summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: var(--cna-muted);
  transition: transform 0.12s ease-out;
}
.cna-qc[open] > summary::before { transform: rotate(90deg); }
.cna-qc > summary:hover { color: var(--cna-accent); }

.cna-qc-body {
  padding: 2px 16px 14px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 26px;
}
.cna-qc-row {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--cna-hair);
}
.cna-qc-k {
  flex: 0 0 168px;
  color: var(--cna-muted);
  font-size: 11.5px;
}
.cna-qc-v {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  font-size: 11.5px;
}

/* status line ------------------------------------------------------ */
.cna-status {
  padding: 7px 16px;
  font-size: 12px;
  color: var(--cna-ink-2);
  background: color-mix(in srgb, var(--cna-accent) 8%, var(--cna-plane));
  border-top: 1px solid var(--cna-hair);
}
.cna-status:empty { display: none; }

@media print {
  .cna-controls, .cna-hint, .cna-tip { display: none; }
  .cna-stage { height: 300px; }
}