/* JSB Coins — shared article reader layer Loaded by every article page (except the claude-code-rocks Easter egg). Provides: (1) a raised default text size for comfortable reading, (2) the Aa reader-size widget styling. The scale mechanism: reader.js sets --reader-scale on ; everything sized in rem (the house system) scales with the root, and the 97.5ch column widens with it, holding characters-per-line steady. Phones: below the ch cap the column is already 100% wide; only text size changes if the reader asks for it. Storage: localStorage "jsbArticlesReaderScale" — deliberately SEPARATE from the main site's Aa setting for now (John, 2026-08-06). */ html { /* 112.5% = 18px default body base (was browser-default 16px), then the user's chosen scale on top. */ font-size: calc(112.5% * var(--reader-scale, 1)); } /* "Keep width" mode: reader.js sets data-reader-fixed on when the panel checkbox is ticked. Dividing the ch-based cap by the current scale cancels the font-size term, pinning the column at its default pixel width — so larger text means fewer words per line and vice versa. Unticked (default): the column scales with the text and the words-per-line measure stays constant. Reads the article's own --measure-base rather than restating a number (2026-08-07-measure-single-source.md). The width now lives in exactly one place per article, and this file never needs to know it. Why a second token was needed: --measure: calc(var(--measure) / s) on the same element is a self-referencing custom property — a CSS variable cycle, invalid at computed-value time, and the measure collapses. So the articles declare --measure-base and derive --measure from it, and this rule derives its own. The 97.5ch fallback keeps keep-width sane for any future article that defines --measure without --measure-base. */ html[data-reader-fixed] { --measure: min(calc(var(--measure-base, 97.5ch) / var(--reader-scale, 1)), 100%); } /* ---- Aa widget ---------------------------------------------------- */ /* Self-contained colors (articles' palette tokens vary); light theme defaults, dark overrides below. Widget text deliberately does NOT scale with --reader-scale (fixed px) so the control stays put. */ #jsb-reader { position: fixed; right: 18px; bottom: 18px; z-index: 9000; font-family: inherit; --rdr-bg: #ffffff; --rdr-ink: #1c2323; --rdr-line: rgba(0,0,0,0.22); --rdr-shadow: 0 4px 18px rgba(0,0,0,0.18); --rdr-accent: #8a1c1c; } html[data-theme="dark"] #jsb-reader { --rdr-bg: #20272a; --rdr-ink: #e8ecec; --rdr-line: rgba(255,255,255,0.28); --rdr-shadow: 0 4px 18px rgba(0,0,0,0.55); --rdr-accent: #d98282; } #jsb-reader button { font: inherit; cursor: pointer; border: 1px solid var(--rdr-line); background: var(--rdr-bg); color: var(--rdr-ink); border-radius: 999px; } #jsb-reader .rdr-toggle { width: 44px; height: 44px; font-size: 17px; font-weight: 600; letter-spacing: 0.02em; box-shadow: var(--rdr-shadow); } #jsb-reader .rdr-toggle:hover { border-color: var(--rdr-accent); color: var(--rdr-accent); } #jsb-reader .rdr-panel { position: absolute; right: 0; bottom: 54px; display: none; align-items: center; gap: 8px; padding: 10px 12px; background: var(--rdr-bg); color: var(--rdr-ink); border: 1px solid var(--rdr-line); border-radius: 12px; box-shadow: var(--rdr-shadow); white-space: nowrap; } #jsb-reader.open .rdr-panel { display: flex; } #jsb-reader .rdr-panel .rdr-step { width: 36px; height: 36px; font-size: 18px; line-height: 1; } #jsb-reader .rdr-panel .rdr-step:hover:not(:disabled) { border-color: var(--rdr-accent); color: var(--rdr-accent); } #jsb-reader .rdr-panel .rdr-step:disabled { opacity: 0.35; cursor: default; } #jsb-reader .rdr-val { min-width: 52px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; } #jsb-reader .rdr-reset { font-size: 13px; padding: 6px 12px; } #jsb-reader .rdr-reset:hover { border-color: var(--rdr-accent); color: var(--rdr-accent); } #jsb-reader .rdr-label { font-size: 12px; opacity: 0.75; margin-right: 2px; } @media (max-width: 680px) { #jsb-reader { right: 12px; bottom: 12px; } } @media print { #jsb-reader { display: none; } } #jsb-reader .rdr-keep { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; user-select: none; } #jsb-reader .rdr-keep input { accent-color: var(--rdr-accent); cursor: pointer; margin: 0; } /* ---- Dark-mode fix for the SVG "Enlarge" button — DO NOT REMOVE ---------- RESTORED 2026-08-06 after a reader.css rewrite dropped it and the defect returned on all six articles that have SVG figures. The articles' own `.enlarge` rule sets color:var(--ink-soft), which follows the theme, but bakes its background in as the literal rgba(233,234,230,0.94) — the LIGHT --flan. In dark mode the text goes light and the background does not, so the button renders light-grey-on-light at 1.88:1. Effectively invisible. Why this is easy to drop by accident: the articles DO carry `:root[data-theme="dark"] .enlarge:hover` and `:focus-visible` rules, so a grep for a dark .enlarge rule finds something and the base state looks handled. It is not — only the hover states are. It lives here rather than in eight index.html files so new articles inherit it. The :root[data-theme="dark"] prefix outranks the bare .enlarge rule, so stylesheet order does not matter. Measured in a browser: 1.88:1 before, 7.85:1 after. */ :root[data-theme="dark"] .enlarge { background: rgba(21, 24, 26, 0.94); /* dark --flan, same 0.94 alpha */ }