/* ══════════════════════════════════════════════════════════════════ Text-size control and layout rules that respond to it. Paired with shared/ui-scale.js, which publishes data-lp-w, data-lp-orient and data-lp-short on . ══════════════════════════════════════════════════════════════════ */ .lp-scale-control { display: flex; flex-direction: column; gap: 0.6rem; } .lp-scale-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .lp-scale-head label { font-size: 0.85rem; font-weight: 600; color: var(--text, #f1f1f5); } .lp-scale-head output { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--accent, #6366f1); font-weight: 600; } /* A slider is a pointer target first — keep it comfortably thick. */ .lp-scale-control input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.6rem; background: transparent; cursor: pointer; } .lp-scale-control input[type="range"]::-webkit-slider-runnable-track { height: 0.4rem; border-radius: 999px; background: var(--surface3, #252533); border: 1px solid var(--border, #2a2a3a); } .lp-scale-control input[type="range"]::-moz-range-track { height: 0.4rem; border-radius: 999px; background: var(--surface3, #252533); border: 1px solid var(--border, #2a2a3a); } .lp-scale-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.35rem; height: 1.35rem; margin-top: -0.52rem; border-radius: 50%; background: var(--accent, #6366f1); border: 2px solid var(--surface, #18181f); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); } .lp-scale-control input[type="range"]::-moz-range-thumb { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--accent, #6366f1); border: 2px solid var(--surface, #18181f); } .lp-scale-control input[type="range"]:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: 3px; border-radius: 999px; } .lp-scale-presets { display: flex; gap: 0.4rem; flex-wrap: wrap; } .lp-scale-presets button { min-width: 2.6rem; min-height: 2.1rem; padding: 0.3rem 0.6rem; border-radius: 7px; border: 1px solid var(--border, #2a2a3a); background: var(--surface3, #252533); color: var(--text-muted, #7b7b9a); font-size: 0.8rem; font-weight: 600; cursor: pointer; } .lp-scale-presets button:hover { color: var(--text, #f1f1f5); } .lp-scale-presets button.active { background: var(--accent, #6366f1); border-color: transparent; color: #fff; } .lp-scale-presets .lp-scale-reset { margin-left: auto; min-width: 0; } .lp-scale-hint { font-size: 0.76rem; color: var(--text-muted, #7b7b9a); line-height: 1.45; margin: 0; } /* Quick control in the header — the slider lives in Settings, but reaching for it should not require leaving the page you are struggling to read. */ .lp-scale-quick { display: inline-flex; align-items: center; gap: 0.15rem; border: 1px solid var(--border, #2a2a3a); border-radius: 8px; overflow: hidden; background: var(--surface3, #252533); } .lp-scale-quick button { min-width: 2rem; min-height: 2rem; border: none; background: none; color: var(--text-muted, #7b7b9a); font-size: 0.95rem; font-weight: 700; cursor: pointer; line-height: 1; } .lp-scale-quick button:hover { color: var(--text, #f1f1f5); background: var(--surface2, #1e1e28); } .lp-scale-quick button:disabled { opacity: .4; cursor: default; } .lp-scale-quick .lp-quick-val { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--text-muted, #7b7b9a); padding: 0 0.3rem; min-width: 2.6rem; text-align: center; } /* ── Layout that follows the text size ─────────────────────────────── These mirror the token thresholds so a larger text size reflows the page the same way a narrower window would. */ /* Once the viewport is narrow in root-font units, stop trying to hold multi-column forms and card grids. */ html[data-lp-w~="le640"] .lp-scale-presets { width: 100%; } /* Landscape on a short viewport — a laptop with the text turned up, or a phone on its side. Reclaim vertical space rather than scrolling chrome. */ html[data-lp-short="yes"][data-lp-orient="landscape"] .section-header, html[data-lp-short="yes"][data-lp-orient="landscape"] .admin-section-header { margin-bottom: 0.75rem; } html[data-lp-short="yes"][data-lp-orient="landscape"] .section-sub, html[data-lp-short="yes"][data-lp-orient="landscape"] .admin-section-sub { display: none; } /* Portrait on a narrow viewport: single column everywhere it matters. */ html[data-lp-orient="portrait"][data-lp-w~="le820"] .stat-cards, html[data-lp-orient="portrait"][data-lp-w~="le820"] .admin-metrics-grid { grid-template-columns: 1fr; } /* Tables are the first thing to break when text grows; let them scroll inside their own box instead of pushing the page sideways. */ .admin-table-wrap, .table-scroll, .admin-panel-body > table, .portal-section table { max-width: 100%; } html[data-lp-w~="le900"] .admin-panel-body, html[data-lp-w~="le900"] .portal-panel-body { overflow-x: auto; } /* Never let the whole page scroll sideways, whatever the text size. */ html, body { max-width: 100%; }