updated: package-lock.json

app.js

@@ -176,6 +176,7 @@ const DEFAULT_SETTINGS = {
   birthDate: "",
   tarotDeck: DEFAULT_TAROT_DECK,
   stellariumBackgroundEnabled: false,
+  detailTextScale: 1,
   hasExplicitLocation: false
 };
 
@@ -642,6 +643,11 @@ settingsUi.init?.({
   onSettingsApplied: (settings) => {
     appRuntime.applySettings?.(settings);
     currentSettings = settings;
+    const detailTextScale = Number(settings?.detailTextScale);
+    document.documentElement.style.setProperty(
+      "--detail-text-scale",
+      Number.isFinite(detailTextScale) && detailTextScale > 0 ? String(detailTextScale) : "1"
+    );
   },
   onSyncSkyBackground: (geo, options) => homeUi.syncNowSkyBackground?.(geo, options),
   onStatus: (text) => setStatus(text),

app/styles.css

@@ -3,6 +3,7 @@
       --font-script-display: "Noto Sans Hebrew", "Noto Serif", "Noto Sans Phoenician", "Segoe UI Symbol", serif;
       --font-script-arabic: "Amiri", "Noto Naskh Arabic", "Scheherazade New", "Arabic Typesetting", "Arial Unicode MS", serif;
       --font-script-enochian: "Enochian", "Petrus Enochian", "Segoe UI Historic", "Segoe UI Symbol", serif;
+      --detail-text-scale: 1;
     }
 
     body {
@@ -829,6 +830,7 @@
       grid-template-rows: auto auto auto;
       gap: 16px;
       background: #18181b;
+      font-size: calc(13px * var(--detail-text-scale));
     }
     .tarot-detail-top {
       display: grid;
@@ -855,11 +857,11 @@
     .tarot-detail-type {
       margin-top: 4px;
       color: #a1a1aa;
-      font-size: 13px;
+      font-size: calc(13px * var(--detail-text-scale));
     }
     .tarot-detail-summary {
       margin-top: 10px;
-      font-size: 14px;
+      font-size: calc(14px * var(--detail-text-scale));
       line-height: 1.45;
       color: #e4e4e7;
     }
@@ -876,14 +878,14 @@
     }
     .tarot-meaning-card strong {
       display: block;
-      font-size: 12px;
+      font-size: calc(12px * var(--detail-text-scale));
       text-transform: uppercase;
       letter-spacing: 0.04em;
       color: #a1a1aa;
       margin-bottom: 6px;
     }
     .tarot-meaning-card div {
-      font-size: 14px;
+      font-size: calc(14px * var(--detail-text-scale));
       line-height: 1.45;
       color: #e4e4e7;
     }
@@ -3296,6 +3298,7 @@
       grid-template-rows: auto auto;
       gap: 16px;
       background: #18181b;
+      font-size: calc(13px * var(--detail-text-scale));
     }
     .planet-detail-heading {
       position: relative;
@@ -3309,11 +3312,11 @@
     .planet-detail-type {
       margin-top: 4px;
       color: #a1a1aa;
-      font-size: 13px;
+      font-size: calc(13px * var(--detail-text-scale));
     }
     .planet-detail-summary {
       margin-top: 10px;
-      font-size: 14px;
+      font-size: calc(14px * var(--detail-text-scale));
       line-height: 1.45;
       color: #e4e4e7;
     }
@@ -4405,6 +4408,7 @@
       display: flex;
       flex-direction: column;
       gap: 16px;
+      font-size: calc(13px * var(--detail-text-scale));
     }
 
     #kab-detail-body {
@@ -4480,7 +4484,7 @@
       background: #27272a;
       border: 1px solid #3f3f46;
       color: #c4c4d4;
-      font-size: 14px;
+      font-size: calc(14px * var(--detail-text-scale));
       cursor: pointer;
       transition: background 0.1s;
       line-height: 1;
@@ -4497,7 +4501,7 @@
       color: #ef4444;
     }
     .kab-chip-sub {
-      font-size: 10px;
+      font-size: calc(10px * var(--detail-text-scale));
       color: #71717a;
     }
 
@@ -4514,7 +4518,7 @@
       border: 1px solid #4a4a6a;
       background: #1e1e30;
       color: #c8b8f8;
-      font-size: 13px;
+      font-size: calc(13px * var(--detail-text-scale));
       cursor: pointer;
       text-align: left;
       transition: background 0.1s, border-color 0.1s;
@@ -4534,7 +4538,7 @@
     .kab-god-meta {
       margin-top: 6px;
       color: #a1a1aa;
-      font-size: 12px;
+      font-size: calc(12px * var(--detail-text-scale));
     }
     .kab-god-links {
       margin-top: 7px;
@@ -4548,7 +4552,7 @@
       border: 1px solid #4a4a6a;
       background: #1e1e30;
       color: #c8b8f8;
-      font-size: 12px;
+      font-size: calc(12px * var(--detail-text-scale));
       cursor: pointer;
       transition: background 0.1s, border-color 0.1s;
     }
@@ -4607,6 +4611,7 @@
       box-sizing: border-box;
       display: grid;
       align-items: start;
+      font-size: calc(13px * var(--detail-text-scale));
     }
 
     .alpha-special-top {
@@ -4921,7 +4926,7 @@
       gap: 8px;
     }
     .alpha-list-glyph {
-      font-size: 22px;
+      font-size: calc(22px * var(--detail-text-scale));
       min-width: 34px;
       text-align: center;
       font-family: var(--font-script-display);
@@ -4930,11 +4935,11 @@
     }
     .alpha-list-glyph--arabic {
       font-family: var(--font-script-arabic);
-      font-size: 26px;
+      font-size: calc(26px * var(--detail-text-scale));
     }
     .alpha-list-glyph--enochian {
       font-family: var(--font-script-enochian);
-      font-size: 24px;
+      font-size: calc(24px * var(--detail-text-scale));
     }
     .alpha-enochian-glyph-img {
       display: inline-block;
@@ -4971,14 +4976,14 @@
       white-space: nowrap;
     }
     .alpha-list-sub {
-      font-size: 11px;
+      font-size: calc(11px * var(--detail-text-scale));
       color: #71717a;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
     .alpha-detail-glyph {
-      font-size: 64px !important;
+      font-size: calc(64px * var(--detail-text-scale)) !important;
       font-family: var(--font-script-display);
       color: #e0d0ff;
       line-height: 1;
@@ -4994,7 +4999,7 @@
       display: grid;
       grid-template-columns: auto 1fr;
       gap: 3px 12px;
-      font-size: 13px;
+      font-size: calc(13px * var(--detail-text-scale));
       color: #d4d4d8;
       margin: 0;
     }
@@ -5550,21 +5555,21 @@
       background: #18181b;
       border: 1px solid #3f3f46;
       border-radius: 8px;
-      font-size: 11px;
+      font-size: calc(11px * var(--detail-text-scale));
       color: #71717a;
       min-width: 56px;
       text-align: center;
     }
     .alpha-arabic-glyph {
       font-family: var(--font-script-arabic);
-      font-size: 28px;
+      font-size: calc(28px * var(--detail-text-scale));
       color: #e0d0ff;
       line-height: 1.2;
       direction: rtl;
     }
     .alpha-arabic-inline {
       font-family: var(--font-script-arabic);
-      font-size: 16px;
+      font-size: calc(16px * var(--detail-text-scale));
       direction: rtl;
     }
     .alpha-nav-btns {
@@ -5647,7 +5652,7 @@
       margin: 0 4px;
     }
     .alpha-sister-name {
-      font-size: 12px;
+      font-size: calc(12px * var(--detail-text-scale));
       color: #a1a1aa;
     }
 
@@ -5656,6 +5661,7 @@
       background: #18181b;
       box-sizing: border-box;
       overflow: hidden;
+      font-size: calc(13px * var(--detail-text-scale));
     }
 
     #alphabet-text-section[hidden] {
@@ -5838,7 +5844,7 @@
     }
 
     .alpha-text-source-meta {
-      font-size: 12px;
+      font-size: calc(12px * var(--detail-text-scale));
       line-height: 1.4;
       color: #a1a1aa;
     }
@@ -5847,6 +5853,7 @@
       display: grid;
       gap: 12px;
       min-width: 0;
+      font-size: calc(13px * var(--detail-text-scale));
     }
 
     .planet-layout.alpha-text-global-search-only.layout-sidebar-collapsed {
@@ -5994,7 +6001,7 @@
     .alpha-text-search-summary {
       margin: 0 0 10px;
       color: #a1a1aa;
-      font-size: 12px;
+      font-size: calc(12px * var(--detail-text-scale));
       line-height: 1.5;
     }
 
@@ -6038,14 +6045,14 @@
 
     .alpha-text-search-reference {
       color: #eef2ff;
-      font-size: 13px;
+      font-size: calc(13px * var(--detail-text-scale));
       font-weight: 700;
       letter-spacing: 0.01em;
     }
 
     .alpha-text-search-location {
       color: #a5b4fc;
-      font-size: 11px;
+      font-size: calc(11px * var(--detail-text-scale));
       text-transform: uppercase;
       letter-spacing: 0.06em;
     }
@@ -6053,7 +6060,7 @@
     .alpha-text-search-preview {
       margin: 0;
       color: #e4e4e7;
-      font-size: 14px;
+      font-size: calc(14px * var(--detail-text-scale));
       line-height: 1.6;
     }
 
@@ -6104,14 +6111,14 @@
 
     .alpha-text-verse-reference {
       color: #c4b5fd;
-      font-size: 12px;
+      font-size: calc(12px * var(--detail-text-scale));
       font-weight: 700;
       letter-spacing: 0.03em;
     }
 
     .alpha-text-verse-counts {
       color: #a1a1aa;
-      font-size: 11px;
+      font-size: calc(11px * var(--detail-text-scale));
       letter-spacing: 0.03em;
       text-transform: uppercase;
     }
@@ -6119,7 +6126,7 @@
     .alpha-text-verse-text {
       margin: 0;
       color: #e4e4e7;
-      font-size: 15px;
+      font-size: calc(15px * var(--detail-text-scale));
       line-height: 1.65;
     }
 
@@ -6163,21 +6170,21 @@
 
     .alpha-text-token-gloss {
       color: #f4f4f5;
-      font-size: 12px;
+      font-size: calc(12px * var(--detail-text-scale));
       font-weight: 600;
       line-height: 1.3;
     }
 
     .alpha-text-token-original {
       color: #c4b5fd;
-      font-size: 15px;
+      font-size: calc(15px * var(--detail-text-scale));
       font-family: var(--font-script-display);
       line-height: 1.25;
     }
 
     .alpha-text-token-strongs {
       color: #a1a1aa;
-      font-size: 10px;
+      font-size: calc(10px * var(--detail-text-scale));
       letter-spacing: 0.05em;
       text-transform: uppercase;
     }
@@ -7413,7 +7420,7 @@
     .settings-field-full {
       grid-column: 1 / -1;
     }
-    .settings-field input,
+    .settings-field input:not([type="range"]),
     .settings-field select {
       width: 100%;
       padding: 7px 8px;
@@ -7447,6 +7454,27 @@
     .settings-toggle-row:has(input:disabled) {
       opacity: 0.6;
     }
+    .settings-range-field {
+      gap: 8px;
+    }
+    .settings-range-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .settings-range-input {
+      flex: 1 1 auto;
+      min-width: 0;
+      margin: 0;
+      accent-color: #818cf8;
+    }
+    .settings-range-value {
+      min-width: 52px;
+      text-align: right;
+      font-size: 13px;
+      color: #e0e7ff;
+      font-variant-numeric: tabular-nums;
+    }
     .settings-field-hint {
       color: #a1a1aa;
       font-size: 12px;

app/ui-settings.js

@@ -12,6 +12,7 @@
       birthDate: "",
       tarotDeck: "ceremonial-magick",
       stellariumBackgroundEnabled: false,
+      detailTextScale: 1,
       hasExplicitLocation: false
     },
     onSettingsApplied: null,
@@ -40,6 +41,8 @@
       tarotDeckCacheProgressEl: document.getElementById("tarot-deck-cache-progress"),
       tarotDeckCacheProgressLabelEl: document.getElementById("tarot-deck-cache-progress-label"),
       tarotDeckCacheStatusEl: document.getElementById("tarot-deck-cache-status"),
+      detailTextScaleEl: document.getElementById("detail-text-scale"),
+      detailTextScaleValueEl: document.getElementById("detail-text-scale-value"),
       stellariumBackgroundEl: document.getElementById("stellarium-background"),
       stellariumBackgroundHintEl: document.getElementById("stellarium-background-hint"),
       apiBaseUrlEl: document.getElementById("api-base-url"),
@@ -376,6 +379,15 @@
     }
   }
 
+  function syncDetailTextScaleLabel(detailTextScale) {
+    const { detailTextScaleValueEl } = getElements();
+    if (!detailTextScaleValueEl) {
+      return;
+    }
+
+    detailTextScaleValueEl.textContent = `${Math.round(normalizeDetailTextScale(detailTextScale) * 100)}%`;
+  }
+
   function syncSky(geo, options) {
     if (typeof config.onSyncSkyBackground === "function") {
       config.onSyncSkyBackground(geo, options);
@@ -394,6 +406,19 @@
     return "minutes";
   }
 
+  function clampNumber(value, min, max, fallback) {
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed)) {
+      return fallback;
+    }
+
+    return Math.min(max, Math.max(min, parsed));
+  }
+
+  function normalizeDetailTextScale(value) {
+    return clampNumber(value, 0.85, 1.35, 1);
+  }
+
   function normalizeBirthDate(value) {
     const normalized = String(value || "").trim();
     if (!normalized) {
@@ -493,6 +518,7 @@
       timeFormat: normalizeTimeFormat(settings?.timeFormat),
       birthDate: normalizeBirthDate(settings?.birthDate),
       tarotDeck: normalizeTarotDeck(settings?.tarotDeck),
+      detailTextScale: normalizeDetailTextScale(settings?.detailTextScale),
       stellariumBackgroundEnabled: parseStoredBoolean(settings?.stellariumBackgroundEnabled, false) && hasExplicitLocation,
       hasExplicitLocation
     };
@@ -649,7 +675,7 @@
   }
 
   function applySettingsToInputs(settings) {
-    const { latEl, lngEl, timeFormatEl, birthDateEl, tarotDeckEl, stellariumBackgroundEl } = getElements();
+    const { latEl, lngEl, timeFormatEl, birthDateEl, tarotDeckEl, detailTextScaleEl, stellariumBackgroundEl } = getElements();
     syncTarotDeckInputOptions();
     syncConnectionInputs();
     const normalized = normalizeSettings(settings);
@@ -657,6 +683,10 @@
     lngEl.value = String(normalized.longitude);
     timeFormatEl.value = normalized.timeFormat;
     birthDateEl.value = normalized.birthDate;
+    if (detailTextScaleEl) {
+      detailTextScaleEl.value = String(Math.round(normalized.detailTextScale * 100));
+    }
+    syncDetailTextScaleLabel(normalized.detailTextScale);
     if (tarotDeckEl) {
       tarotDeckEl.value = normalized.tarotDeck;
     }
@@ -671,7 +701,7 @@
   }
 
   function getSettingsFromInputs() {
-    const { latEl, lngEl, timeFormatEl, birthDateEl, tarotDeckEl, stellariumBackgroundEl } = getElements();
+    const { latEl, lngEl, timeFormatEl, birthDateEl, tarotDeckEl, detailTextScaleEl, stellariumBackgroundEl } = getElements();
     const latitudeText = String(latEl?.value || "").trim();
     const longitudeText = String(lngEl?.value || "").trim();
 
@@ -692,6 +722,7 @@
       timeFormat: normalizeTimeFormat(timeFormatEl.value),
       birthDate: normalizeBirthDate(birthDateEl.value),
       tarotDeck: normalizeTarotDeck(tarotDeckEl?.value),
+      detailTextScale: normalizeDetailTextScale(Number(detailTextScaleEl?.value || 100) / 100),
       stellariumBackgroundEnabled: Boolean(stellariumBackgroundEl?.checked),
       hasExplicitLocation: hasExplicitLocationEntry()
     });
@@ -839,6 +870,7 @@
       useLocationEl,
       openSettingsEl,
       closeSettingsEl,
+      detailTextScaleEl,
       latEl,
       lngEl
     } = getElements();
@@ -853,6 +885,12 @@
       useLocationEl.addEventListener("click", requestGeoLocation);
     }
 
+    if (detailTextScaleEl) {
+      detailTextScaleEl.addEventListener("input", () => {
+        syncDetailTextScaleLabel(Number(detailTextScaleEl.value) / 100);
+      });
+    }
+
     [latEl, lngEl].forEach((inputEl) => {
       if (!inputEl) {
         return;

index.html

@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-400.css">
   <link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-700.css">
   <link rel="stylesheet" href="node_modules/@fontsource/noto-naskh-arabic/arabic-400.css">
-  <link rel="stylesheet" href="app/styles.css?v=20260528-kabbalah-cross-split-06">
+  <link rel="stylesheet" href="app/styles.css?v=20260603-detail-text-scale-01">
 </head>
 <body>
   <div class="topbar">
@@ -166,6 +166,21 @@
             </label>
           </div>
         </section>
+        <section class="settings-panel settings-panel-wide">
+          <div class="settings-panel-head">
+            <strong>Detail Text</strong>
+            <span>Adjust the font size used by tarot detail panes and alphabet readers.</span>
+          </div>
+          <div class="settings-grid">
+            <label class="settings-field settings-field-full settings-range-field">Font Size
+              <div class="settings-range-row">
+                <input id="detail-text-scale" class="settings-range-input" type="range" min="85" max="135" step="5" value="100">
+                <span id="detail-text-scale-value" class="settings-range-value">100%</span>
+              </div>
+              <small class="settings-field-hint">Lower values fit more text; higher values make detail panes and alphabet content easier to read.</small>
+            </label>
+          </div>
+        </section>
         <section class="settings-panel settings-panel-wide">
           <div class="settings-panel-head">
             <strong>API Connection</strong>
@@ -1378,7 +1393,7 @@
   <script src="app/ui-numbers.js"></script>
   <script src="app/ui-tarot-spread.js"></script>
   <script src="app/ui-tarot-frame.js?v=20260424-frame-export-01"></script>
-  <script src="app/ui-settings.js?v=20260529-access-gating-01"></script>
+  <script src="app/ui-settings.js?v=20260603-detail-text-scale-01"></script>
   <script src="app/ui-chrome.js?v=20260328-topbar-settings-01"></script>
   <script src="app/ui-navigation.js?v=20260528-kabbalah-cross-split-06"></script>
   <script src="app/ui-calendar-formatting.js?v=20260307b"></script>
@@ -1386,7 +1401,7 @@
   <script src="app/ui-home-calendar.js?v=20260415-stellarium-toggle-01"></script>
   <script src="app/ui-section-state.js?v=20260531-now-polling-02"></script>
   <script src="app/app-runtime.js?v=20260531-now-polling-02"></script>
-  <script src="app.js?v=20260531-now-polling-02"></script>
+  <script src="app.js?v=20260603-detail-text-scale-01"></script>
   <script src="app/navigation-detail-test-harness.js?v=20260401-universal-detail-02"></script>
 </body>
 </html>