/* ═══════════════════════════════════════════════════════════════ careiti-tablet.css — 平板（iPad）長者版面層 Loaded last on every page that opts in with . The thesis, and the reason this file is small: A tablet in an elder's hands is a MAGNIFIER, not a desktop. The app was authored at a fixed phone width (480–560px columns of 9–13px text). Rendered on an iPad that leaves 40–60% of the screen empty while the type stays too small to read — the worst of both. The fix is therefore NOT to pour more content into the width. It is to spend the extra pixels making the same content bigger: one column, larger type, larger targets, more air. ── How the scale works ──────────────────────────────────────── Every px font-size in the opted-in pages is authored as font-size: max(calc(13px * var(--ct-k2,1)), var(--ct-min,0px)) so a handful of variables drive the whole app. Three consequences: 1. Tablet scaling is five numbers per breakpoint, not 959 overrides. 2. 大字模式 finally works. It used to set html{font-size:118%}, which does nothing on pages that pin every size in px — seniors pressed the button and the page did not change. It now feeds --ct-lf into the same calc, so it scales everything. 3. The ramp is non-linear, which is the whole point (see below). ── Why the ramp is non-linear ───────────────────────────────── The obvious design is one multiplier for everything. It fails the audience: 9px text scaled by 1.16 is 10.4px, so the type that was already unreadable stays unreadable while the headings get roomy. Elders need a FLOOR, not a ratio. So each size sits in a bucket, and smaller buckets are scaled harder. Source sizes spanning 9–22px (2.4x) land at 16–28px (1.75x) on a 12.9" iPad: the order survives, the range compresses, and the bottom of the range clears readability. Compressing size hierarchy costs little here because MASTER.md already specifies that hierarchy comes from position, weight, rule lines and whitespace rather than from size. --ct-min is the backstop: whatever the buckets work out to, no text on a tablet renders below it. The `,1` and `,0px` fallbacks mean that if this sheet fails to load the app renders at its original phone sizing rather than breaking. At phone width with 大字模式 off every multiplier is 1 and --ct-min is 0, so the computed styles are identical to before this file existed — an invariant verified by a computed-style fingerprint diff over ~4000 elements, not by eye. ═══════════════════════════════════════════════════════════════ */ :root { /* Per-bucket breakpoint scales. Smaller type is scaled harder. */ --ct-s1: 1; /* ≤11px — micro labels, captions, nav labels */ --ct-s2: 1; /* 12–13px — secondary text, the app's commonest size */ --ct-s3: 1; /* 14–17px — body */ --ct-s4: 1; /* 18–24px — subheads */ --ct-sd: 1; /* >24px — display numerals, already large */ --ct-lf: 1; /* 大字模式 multiplier, applied to every bucket */ --ct-k1: calc(var(--ct-s1) * var(--ct-lf)); --ct-k2: calc(var(--ct-s2) * var(--ct-lf)); --ct-k3: calc(var(--ct-s3) * var(--ct-lf)); --ct-k4: calc(var(--ct-s4) * var(--ct-lf)); --ct-kd: calc(var(--ct-sd) * var(--ct-lf)); --ct-min: 0px; /* absolute font-size floor */ --ct-tap: 44px; /* tap target floor */ --ct-gut: 16px; /* page gutter */ --ct-pad: 1; /* card padding multiplier */ --ct-max: 100%; /* content column ceiling */ } /* 大字模式 — the app has two toggles and they do not agree on where the class goes: careiti-a11y.js stamps AND , b4d-theme-toggle.js (the per-page "A" button) stamps only. That difference is fatal to the obvious version of this rule. The --ct-k* variables below are DERIVED, and a derived custom property is substituted at computed-value time on the element that declares it — here, :root. A descendant inheriting --ct-k1 inherits the already-resolved token stream `calc(1.60 * 1)`; setting --ct-lf further down the tree cannot reach back and re-run that calc. So with the class on only, every calc()-sized piece of text in the app — which is nearly all of it — did not move, and pressing the button appeared to do nothing. The fix is to re-derive the whole set wherever the class lands, so the variables are recomputed on that element and inherit down correctly. The --ct-s* inputs are plain numbers and inherit cleanly, so this reads the right breakpoint values at either level. (b4d-theme-toggle.js is also being made to stamp like the other toggle does. Both halves are kept: the JS fix makes the two toggles consistent, this makes the stylesheet correct no matter which element a future caller decides to mark.) */ html.large-font, body.large-font { --ct-lf: 1.18; --ct-k1: calc(var(--ct-s1) * 1.18); --ct-k2: calc(var(--ct-s2) * 1.18); --ct-k3: calc(var(--ct-s3) * 1.18); --ct-k4: calc(var(--ct-s4) * 1.18); --ct-kd: calc(var(--ct-sd) * 1.18); } /* ── Breakpoints ────────────────────────────────────────────── 700px catches the narrowest iPad in portrait (mini, 744px CSS). 1000px catches iPad Pro 12.9 portrait (1024) and every landscape iPad. */ /* iPad mini / 10.9" / Air in portrait. 10px → 16px, 13px → 18.2px, 16px → 20.8px, 22px → 26.4px, 42px → 45.4px */ @media (min-width: 700px) { :root { --ct-s1: 1.60; --ct-s2: 1.40; --ct-s3: 1.30; --ct-s4: 1.20; --ct-sd: 1.08; --ct-min: 15px; --ct-tap: 56px; --ct-gut: 28px; --ct-pad: 1.35; --ct-max: 700px; } } /* iPad Pro 12.9" portrait and every landscape iPad wide enough for it. 10px → 17.8px, 13px → 20.2px, 16px → 22.7px, 22px → 28.2px, 42px → 48.3px */ @media (min-width: 1000px) { :root { --ct-s1: 1.78; --ct-s2: 1.55; --ct-s3: 1.42; --ct-s4: 1.28; --ct-sd: 1.15; --ct-min: 16px; --ct-tap: 60px; --ct-gut: 36px; --ct-pad: 1.6; --ct-max: 820px; } } /* Short landscape (iPad Pro 11 at 1194×834, mini at 1133×744): vertical space is the scarce resource, not horizontal. Back the type ramp off so a question and its answers still fit without scrolling — losing the question off the top of the screen mid-answer is far more disorienting for an elder than slightly smaller type. */ @media (min-width: 700px) and (max-height: 900px) and (orientation: landscape) { :root { --ct-s1: 1.50; --ct-s2: 1.32; --ct-s3: 1.22; --ct-s4: 1.12; --ct-sd: 1.0; --ct-min: 15px; /* the floor does not move: the screen got shorter, the reader did not get younger */ --ct-tap: 52px; --ct-gut: 28px; --ct-pad: 1.15; } } /* Known limitation, recorded deliberately: ~60 declarations across the app size in rem rather than px and so ride the root font-size, not --ct-k. Scaling the root here would take precedence over html[data-skin="senior"] (108%) and html.large-font (118%) and silently disable both — a worse outcome for this audience than leaving a small tail unscaled. Those declarations are mostly input sizing in careiti-skin.css, which the tap target rules below already give a tablet-sized hit box. */ /* ═══════════════════════════════════════════════════════════════ Everything below is scoped to body[data-ct="app"] so pages with their own layout contract — the marketing site, the admin console, the B2B portal — are untouched. The two-class scope also outranks the single-class rules in each page's inline