/* ═══════════════════════════════════════════════════════════════════════════
   retina.css — MACHINE-GENERATED by `retina build`. DO NOT EDIT.

   Every declaration below is DERIVED from a type in the .cone/.iris/.retina
   source, not authored. The `flex` / `min-width` pair on each run is the
   mechanical consequence of that run's POLICY (T6 FIT/RIGIDITY):

     policy wrap      -> RIGID at its own min-content  -> flex: 0 0 auto · min-width: auto
     policy anywhere  -> absorbs any squeeze           -> flex: 1 1 auto · min-width: 0

   That pairing is the fix. `.setting-label` carried `min-width: 0` while its
   policy had no break opportunity, so a long sibling squeezed it below its own
   min-content and the text rendered OUTSIDE the box — measured at 390px:
   "Organism" 63px of ink in a 56px box, "Session" 51 in 42, "Engram" 50 in 43,
   "Build" 32 in 29. No size check could see it; only typing WHO MAY SHRINK can.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── surface settings ─────────────────────────────────────────── */
#view-settings .setting-label {
  /* role label: policy wrap (RIGID at min-content) */
  flex: 0 0 auto;
  min-width: auto;
  overflow-wrap: normal;
  text-align: left;
  color: var(--r-ink-primary);
}
#view-settings .setting-value {
  /* role value: policy anywhere (absorbing) */
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  color: var(--r-ink-accent);
}

/* A STATUS DOT IS ITS OWN TRACK at the row's trailing edge, so every dot on
   the surface lands on the same vertical line at every frame — BY CONSTRUCTION,
   not because the values beside them happened to be the same length. Nested
   inside the value box the dots scattered to three different x positions and
   every computed check still passed; only the screenshot showed it.
   (This also replaces four identical inline style= sites — R3, net-negative.) */
#view-settings .r-dotrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}
#view-settings .r-dotrow .setting-dot { flex: 0 0 auto; }

/* a row of controls wraps rather than overflowing — its cells are absorbing */
#view-settings .r-btnrow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#view-settings .r-btnrow .settings-btn { width: auto; flex: 0 1 auto; }

#view-settings .r-note {
  font-size: 0.66rem;
  font-style: italic;
  color: var(--r-ink-dim);
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: normal;
}

/* A HOST is a box JavaScript fills: Extent<unknown>. RETINA can prove nothing
   about its CONTENT — what it emits is the DECLARED POLICY, so the author's
   answer to 'what happens when the data is too wide' is in the stylesheet
   rather than in someone's head. */
#view-settings #knobs-list {
  min-width: 0;
  overflow-wrap: anywhere;
  max-height: 320px; overflow-y: auto;
}
#view-settings #settings-scanners-list {
  min-width: 0;
  overflow-wrap: anywhere;
}
#view-settings #set-collections {
  min-width: 0;
  overflow-wrap: anywhere;
}
#view-settings #set-tiers {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* the compiled slice of the token plane — only what the rules above read.
   RETINA does not emit a stacking ladder: the app owns `--z-*`, and a second
   definition of one order is exactly how an order stops meaning anything. */
:root {
  --r-ink-accent: #00e5ff;
  --r-ink-dim: #7d8fa5;
  --r-ink-primary: rgba(255,255,255,0.95);
}