/* reading-scale-contract:v1
   Andrew reading scale v1
   Browser stays at 100%; the HTML itself defaults to the 175% reading size
   Andrew selected. Desktop only: existing mobile layouts remain unscaled. */
:root {
  --reading-scale-user: 1.75;
  --reading-scale-inverse: .5714286;
  --reading-control-bg: var(--panel, #17150f);
  --reading-control-border: var(--border-strong, #4d4738);
  --reading-control-text: var(--text, #f0e9d8);
  --reading-control-dim: var(--text-dim, #a39d8e);
  --reading-control-accent: var(--accent, #d4a373);
  --reading-control-focus: 0 0 0 3px color-mix(in srgb, var(--reading-control-accent) 36%, transparent);
}

html[data-reading-scale="1"] { --reading-scale-user: 1; --reading-scale-inverse: 1; }
html[data-reading-scale="1.25"] { --reading-scale-user: 1.25; --reading-scale-inverse: .8; }
html[data-reading-scale="1.5"] { --reading-scale-user: 1.5; --reading-scale-inverse: .6666667; }
html[data-reading-scale="1.75"] { --reading-scale-user: 1.75; --reading-scale-inverse: .5714286; }
html[data-reading-scale="2"] { --reading-scale-user: 2; --reading-scale-inverse: .5; }

.reading-size-control {
  position: fixed;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 10000;
  display: inline-grid;
  grid-template-columns: 42px minmax(78px, auto) 42px;
  align-items: stretch;
  padding: 4px;
  color: var(--reading-control-text);
  background: var(--reading-control-bg);
  border: 1px solid var(--reading-control-border);
  border-radius: 12px;
}

.reading-size-control button {
  min-height: 38px;
  padding: 0 10px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 700 13px/1 "SFMono-Regular", Consolas, monospace;
  cursor: pointer;
}

.reading-size-control button:hover { background: color-mix(in srgb, var(--reading-control-accent) 12%, transparent); }
.reading-size-control button:active { background: color-mix(in srgb, var(--reading-control-accent) 20%, transparent); }
.reading-size-control button:focus-visible { outline: none; box-shadow: var(--reading-control-focus); }
.reading-size-control button:disabled { color: var(--reading-control-dim); cursor: not-allowed; opacity: .42; }
.reading-size-control .reading-size-value { min-width: 86px; color: var(--reading-control-dim); font-size: 11px; }
.reading-size-control .reading-size-value strong { display: block; margin-top: 3px; color: var(--reading-control-text); font-size: 12px; }
.reading-size-control .reading-size-value.is-default strong { color: var(--reading-control-accent); }

@media screen and (min-width: 1200px) and (pointer: fine) {
  body[data-reading-scale-page] {
    zoom: var(--reading-scale-user);
  }

  body[data-reading-scale-page] .reading-size-control {
    zoom: var(--reading-scale-inverse);
  }

  /* CSS zoom does not change vw/vh. These inverse-viewport rules prevent
     the academy's breakout tables, labs and image dialogs from overflowing. */
  body[data-reading-scale-page] .study-table-wrap,
  body[data-reading-scale-page] .study-node-body .lesson-figure,
  body[data-reading-scale-page] .study-real-card,
  body[data-reading-scale-page] .visual-breakout {
    width: min(980px, calc(100vw * var(--reading-scale-inverse) - 32px));
  }

  body[data-reading-scale-page] .study-lab-breakout,
  body[data-reading-scale-page] .study-quiz-breakout {
    width: min(1040px, calc(100vw * var(--reading-scale-inverse) - 32px));
  }

  body[data-reading-scale-page] .study-full-image-dialog,
  body[data-reading-scale-page] .image-dialog,
  body[data-reading-scale-page] .real-image-dialog {
    width: min(1180px, calc(100vw * var(--reading-scale-inverse) - 32px));
    max-height: calc(100vh * var(--reading-scale-inverse) - 32px);
  }

  body[data-reading-scale-page] .card-dialog {
    width: min(720px, calc(100vw * var(--reading-scale-inverse) - 32px));
  }

  body[data-reading-scale-page] dialog:not(.study-full-image-dialog):not(.image-dialog):not(.real-image-dialog):not(.card-dialog) {
    width: min(440px, calc(100vw * var(--reading-scale-inverse) - 32px));
    max-height: calc(100vh * var(--reading-scale-inverse) - 32px);
  }

  body[data-reading-scale-page] .study-full-dialog-stage { min-height: calc(55vh * var(--reading-scale-inverse)); }
  body[data-reading-scale-page] .study-full-dialog-stage img { max-height: calc(78vh * var(--reading-scale-inverse)); }
  body[data-reading-scale-page] .dialog-stage { max-height: calc(100vh * var(--reading-scale-inverse) - 110px); }
  body[data-reading-scale-page] .real-image-dialog-stage {
    height: min(68vh, 760px);
    max-height: calc(100vh * var(--reading-scale-inverse) - 260px);
  }
  body[data-reading-scale-page] .toast {
    max-width: min(560px, calc(100vw * var(--reading-scale-inverse) - 32px));
  }
  body.study-full-page[data-reading-scale-page] .study-full-root {
    min-height: calc(100vh * var(--reading-scale-inverse) - 62px);
  }

  /* Coverage audit tables keep a stable visual minimum after body zoom.
     Without the inverse min-width, 760 CSS px becomes 1330–1520 visual px
     and leaks horizontal overflow near the desktop breakpoint. */
  html[data-reading-scale="1"] body[data-reading-scale-page] .coverage-table { min-width: 760px; }
  html[data-reading-scale="1.25"] body[data-reading-scale-page] .coverage-table { min-width: 608px; }
  html[data-reading-scale="1.5"] body[data-reading-scale-page] .coverage-table { min-width: 507px; }
  html[data-reading-scale="1.75"] body[data-reading-scale-page] .coverage-table { min-width: 435px; }
  html[data-reading-scale="2"] body[data-reading-scale-page] .coverage-table { min-width: 380px; }
}

@media screen and (max-width: 1199px), (pointer: coarse) {
  .reading-size-control { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-size-control * { transition: none !important; }
}

@media print {
  body[data-reading-scale-page] { width: 100% !important; min-height: 0 !important; zoom: 1 !important; }
  .reading-size-control { display: none !important; }
}