/* Techcyte Fusion app language (light mode), read from the live app.
   These tokens are the single source of visual truth; screens reference them so
   nothing drifts. Re-skinnable later by swapping values here. */
:root {
  /* Color */
  --blue: #0E9BE5;          /* product blue: header fill, titles, active accent */
  --blue-hover: #0B87C9;
  --blue-active: #0A79B4;
  --bg: #FAFAFA;            /* near-white content background */
  --text: #424242;         /* body text */
  --text-muted: #757575;   /* secondary / metadata */
  --divider: rgba(0, 0, 0, 0.12);
  --selected: rgba(14, 155, 229, 0.08); /* pale blue tint for selected rows */
  --surface: #FFFFFF;
  --on-blue: #FFFFFF;
  --blue-icon: #87CDF2;     /* quiet header controls */

  /* Type */
  --font: 'Roboto', system-ui, -apple-system, sans-serif;
  --title-size: 26px;

  /* Frame */
  --header-h: 72px;
  --radius-pill: 999px;
  --radius-card: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }

/* Shared microscopy-scan component (image + data-driven provenance caption).
   Loaded on every surface so the caption is consistent everywhere. */
.scan { display: flex; flex-direction: column; }
.scan__frame { border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.scan__img { width: 100%; display: block; object-fit: cover; }
/* Caption reserves its line height whether or not the text shows, so it never
   pushes the image or answer controls when it appears/disappears. */
.scan__cap { min-height: 18px; margin-top: 8px; font-family: var(--font); font-weight: 400; font-size: 12px; line-height: 18px; color: var(--text-muted); }

/* Fill variant (projector): the frame grows to fill the column, caption below. */
.scan--fill { flex: 1 1 auto; min-height: 0; }
.scan--fill .scan__frame { flex: 1 1 auto; min-height: 0; }
.scan--fill .scan__img { height: 100%; }
.scan--fill .scan__cap { min-height: 22px; font-size: clamp(13px, 1.1vw, 18px); line-height: 1.4; }