/* Reading tools — the size stepper and the magnifier.

   One stylesheet for both the division pages and the ecosystem hub: the two
   never load together and name their colours differently, so every colour here
   falls back from the engine's names to the hub's. */
:root { --read: 1; }
html[data-reading="l1"] { --read: 1.15; }
html[data-reading="l2"] { --read: 1.3; }

/* ── READING DOCK ─────────────────────────────────────────────────────────
   Bottom-left, the one corner nothing else occupies: the ecosystem dock sits
   centre and the assistant sits right. Same pill vocabulary as the ecosystem
   dock so it reads as part of the furniture rather than an add-on. */
.division-read-dock {
  position: fixed; z-index: 55; bottom: 20px; inset-inline-start: 20px;
  display: flex; align-items: center; gap: 3px; padding: 6px;
  border: 1px solid var(--division-line, var(--hud)); border-radius: 14px;
  background: rgb(var(--ink-rgb, var(--bg-rgb, 4 10 16)) / 0.93);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.division-read-dock button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; min-width: 40px; padding-inline: 10px; border: 0;
  border-radius: 9px; background: none; color: var(--division-muted, var(--fg3));
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  transition: color 160ms, background 160ms;
}
.division-read-dock button:hover:not(:disabled) { color: var(--cyan, var(--dc, var(--acc))); background: rgb(var(--cyan-rgb, var(--acc-rgb, 94 234 212)) / 0.08); }
.division-read-dock button:focus-visible { outline: 2px solid var(--cyan, var(--dc, var(--acc))); outline-offset: 2px; }
.division-read-dock button:disabled { opacity: 0.3; cursor: default; }
.division-read-dock button[aria-pressed="true"] { color: var(--cyan, var(--dc, var(--acc))); background: rgb(var(--cyan-rgb, var(--acc-rgb, 94 234 212)) / 0.12); }
.division-read-step { font-weight: 600; }
.division-read-step--lg { font-size: 16px; }
/* The level, as three rungs rather than a number to read. */
.division-read-level { display: inline-flex; align-items: flex-end; gap: 2px; padding-inline: 4px; }
.division-read-level i { width: 3px; border-radius: 2px; background: var(--division-muted, var(--fg3)); opacity: 0.35; }
.division-read-level i:nth-child(1) { height: 7px; }
.division-read-level i:nth-child(2) { height: 11px; }
.division-read-level i:nth-child(3) { height: 15px; }
.division-read-level i.is-on { background: var(--cyan, var(--dc, var(--acc))); opacity: 1; }
.division-read-sep { width: 1px; height: 22px; margin-inline: 4px; background: var(--division-line, var(--hud)); }
.division-read-dock .division-read-lens-label { display: none; }
@media (min-width: 560px) { .division-read-dock .division-read-lens-label { display: inline; } }
/* No hover, no magnifier: the stepper is what serves a phone, and it stays. */
@media (hover: none), (pointer: coarse) {
  .division-read-dock .division-read-lens,
  .division-read-dock .division-read-sep { display: none; }
}
@media (max-width: 1099px) { .division-read-dock { bottom: 16px; inset-inline-start: 16px; } }

/* ── MAGNIFIER ────────────────────────────────────────────────────────────
   A clipped, scaled copy of the page's own markup — real text re-rendered at
   size, not a zoomed picture of it, which would be blurred exactly where
   someone is trying to read. The copy is inert and hidden from assistive
   technology; the original stays the only thing in the accessibility tree. */
.division-lens {
  position: fixed; z-index: 58; pointer-events: none;
  width: var(--lens-d, 300px); height: var(--lens-d, 300px);
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--cyan, var(--dc, var(--acc)));
  background: var(--ink, var(--bg, #06100e));
  box-shadow: 0 0 0 1px rgb(var(--ink-rgb, var(--bg-rgb, 4 10 16)) / 0.9),
              0 18px 48px rgb(0 0 0 / 0.55),
              0 0 36px rgb(var(--cyan-rgb, var(--acc-rgb, 94 234 212)) / 0.22);
  opacity: 0; transition: opacity 140ms ease;
}
.division-lens.is-on { opacity: 1; }
@media (max-width: 1099px) { .division-lens { --lens-d: 240px; } }
.division-lens-inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
/* A hairline inside the rim, so the edge reads as an instrument. */
.division-lens::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid rgb(var(--cyan-rgb, var(--acc-rgb, 94 234 212)) / 0.22); pointer-events: none;
}
html.division-lens-on, html.division-lens-on body { cursor: crosshair; }
@media (prefers-reduced-motion: reduce) { .division-lens { transition: none; } }