/* ============================================================
   OCR × LLM — "No Letters Required"  (doodle 07)
   ------------------------------------------------------------
   Companion to ocr.css. Same two constraints apply; see that file
   for the long version.

   SUFFIX CONTRACT: doodles-base.css styles by class-name suffix, so
   page chrome MUST end in -page / -hero / -title / -subtitle / -nav /
   -nav-link / -nav-home / -intro / -byline / -credentials / -section /
   -visual / -content / -conclusion / -takeaways / -sources / -cta-* .
   Note the slug itself contains a hyphen: `ocr-llm-visual` still ends
   in `-visual`, so the contract holds.

   In-SVG label classes are prefixed `oz-` precisely so they do NOT end
   in a suffix base.css claims. Renaming `.oz-head` to something like
   `.oz-title` would silently give it hero display sizing.
   ============================================================ */
@import url('doodles-base.css');

.ocr-llm-page {
  --doodle-surface: var(--ozl-surface);
  --doodle-surface-text: var(--ozl-surface-text);
  --doodle-border: var(--ozl-border);

  --ozl-surface: #fff;
  --ozl-surface-text: #000;
  --ozl-border: #000;

  /* Same four hexes as the other doodles — already contrast-checked here. */
  --ozl-accent-1: #DC2626;  /* Red   - invented / unflagged */
  --ozl-accent-2: #1D4ED8;  /* Blue  - patches / embeddings */
  --ozl-accent-3: #16A34A;  /* Green - correct output */
  --ozl-accent-4: #D97706;  /* Amber - prediction / uncertainty */

  /* See ocr.css: the sources box is rendered at 80% opacity, so #1D4ED8
     lands at 4.19:1 on cream and fails AA. Verified with axe. */
  --ozl-link: #1E3A8A;
  --ozl-link-hover: #15803D;

  --svg-text-label: 16px;
  --svg-text-body: 14px;
  --svg-text-small: 12px;
  --svg-text-tiny: 11px;
}

[data-theme="dark"] .ocr-llm-page {
  --ozl-surface: #1a1a1a;
  --ozl-surface-text: #f5f5f5;
  --ozl-border: #444;
  --ozl-link: #60A5FA;
  --ozl-link-hover: #4ADE80;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ocr-llm-page {
    --ozl-surface: #1a1a1a;
    --ozl-surface-text: #f5f5f5;
    --ozl-border: #444;
    --ozl-link: #60A5FA;
    --ozl-link-hover: #4ADE80;
  }
}

.ocr-llm-visual svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--ozl-surface-text);
}

.sources-list a,
.ocr-llm-cta-subtext a {
  color: var(--ozl-link);
}
.sources-list a:hover,
.sources-list a:focus,
.ocr-llm-cta-subtext a:hover,
.ocr-llm-cta-subtext a:focus {
  color: var(--ozl-link-hover);
}

.ocr-llm-visual text {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  fill: var(--ozl-surface-text);
}

/* ---------- in-SVG type scale ---------- */
.oz-head {
  font-size: var(--svg-text-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.oz-lbl  { font-size: var(--svg-text-body); font-weight: 600; }
.oz-cap  { font-size: var(--svg-text-small); opacity: .78; }
.oz-tiny { font-size: var(--svg-text-tiny); opacity: .7; }
.oz-num  { font-size: var(--svg-text-tiny); font-weight: 600; }
.oz-mono { font-size: 22px; font-weight: 700; }

/* ---------- ink ----------
   SCOPED under .ocr-llm-visual: `.ocr-llm-visual text` sets a default fill at
   specificity (0,1,1), which would beat a bare `.oz-ink-1` at (0,1,0) and
   silently drop every accent colour. */
.ocr-llm-visual .oz-ink-1 { fill: var(--ozl-accent-1); }
.ocr-llm-visual .oz-ink-2 { fill: var(--ozl-accent-2); }
.ocr-llm-visual .oz-ink-3 { fill: var(--ozl-accent-3); }
.ocr-llm-visual .oz-ink-4 { fill: var(--ozl-accent-4); }

.ocr-llm-visual .oz-stroke-1 { stroke: var(--ozl-accent-1); }
.ocr-llm-visual .oz-stroke-2 { stroke: var(--ozl-accent-2); }
.ocr-llm-visual .oz-stroke-3 { stroke: var(--ozl-accent-3); }
.ocr-llm-visual .oz-stroke-4 { stroke: var(--ozl-accent-4); }

.oz-frame { fill: none; stroke: var(--ozl-surface-text); stroke-width: 2; }
.oz-hair  { fill: none; stroke: var(--ozl-surface-text); stroke-width: 1; opacity: .45; }
.oz-dash  { fill: none; stroke-width: 2; stroke-dasharray: 5 4; }

/* State in the CLASS, never in a fill="" attribute — author CSS always beats
   a presentation attribute, so `.oz-hair` + fill="currentColor" would resolve
   to fill:none and the cell would vanish. */
.oz-cell    { fill: none; stroke: var(--ozl-surface-text); stroke-width: 1; opacity: .35; }
.oz-cell-on { fill: var(--ozl-accent-2); stroke: var(--ozl-surface-text); stroke-width: 1; opacity: .55; }

.oz-tile {
  fill: none;
  stroke: var(--ozl-accent-2);
  stroke-width: 1;
  opacity: .55;
}

/* ---------- hero ---------- */
.ocr-llm-title { line-height: .88; }

/* ---------- scroll-triggered reveal ---------- */
.oz-step {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.ocr-llm-visual.animate-in .oz-step { opacity: 1; transform: translateY(0); }
.ocr-llm-visual.animate-in .oz-step:nth-of-type(2) { transition-delay: .10s; }
.ocr-llm-visual.animate-in .oz-step:nth-of-type(3) { transition-delay: .20s; }
.ocr-llm-visual.animate-in .oz-step:nth-of-type(4) { transition-delay: .30s; }
.ocr-llm-visual.animate-in .oz-step:nth-of-type(5) { transition-delay: .40s; }
.ocr-llm-visual.animate-in .oz-step:nth-of-type(6) { transition-delay: .50s; }

.oz-sweep { opacity: 0; transition: opacity .5s ease .35s; }
.ocr-llm-visual.animate-in .oz-sweep { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .oz-step,
  .oz-sweep { opacity: 1; transform: none; transition: none; }
}