:root { --bg: #1b120c; --bg-elevated: #241812; --card: #2b1c14; --card-border: #4a3527; --gold: #c99a4b; --gold-bright: #e0b563; --cream: #f0e3ce; --muted: #b8a58d; --faint: #8a7863; --accent: #8f3a2a; --accent-bright: #b8503a; --success: #5f8a52; --success-bright: #9fd48b; --warn-bright: #e0a24b; /* Chart palette — deliberately separate from the semantic colors above (gold/success/accent/warn carry status meaning elsewhere) so a Stats chart legend is never visually confused with a badge. */ --chart-1: #d9a441; --chart-2: #c1603a; --chart-3: #7a8f5a; --chart-4: #4f8a9c; --chart-5: #8a5a8f; --chart-6: #b08d5a; --chart-7: #b5544e; --chart-8: #6f9b8e; --chart-9: #9a8f4a; /* Selected filter chip. Its own pair rather than reusing --gold/--bg, because chip text is small (0.78rem) and the light theme's gold is not dark enough to clear 4.5:1 behind it — same reasoning as --success-bright below. */ --chip-active-bg: var(--gold); --chip-active-fg: var(--bg); --radius: 14px; --tabbar-height: 66px; /* ---------- type scale (v2.89.0) ---------------------------------------- Before this there were 105 font-size declarations across 30 distinct values, TWENTY of them packed between 0.64rem and 1.05rem — a 10-to-17px band with twenty steps in it. Neighbours differing by 0.02rem cannot read as different levels; they read as noise, and the result was that every element on a screen competed at the same emphasis. That is the larger half of why the app felt "busy": not the number of controls, but that nothing told the eye what to look at first. Seven steps, ~1.12 ratio at the bottom and wider at the top so headings genuinely lead. Everything is rem so the Settings text-size control (which sets the ROOT px size — see html[data-font-size] at the foot of this file) scales the whole scale uniformly. Do not add an eighth step without deleting one; the discipline is the point. */ --text-2xs: 0.7rem; /* uppercase micro-labels: field labels, badges */ --text-xs: 0.78rem; /* card sub-lines, chips, meta */ --text-sm: 0.86rem; /* secondary body: hints, descriptions */ --text-md: 0.95rem; /* body, card titles */ --text-lg: 1.1rem; /* section headings, the app-header wordmark */ --text-xl: 1.35rem; /* the page title — deliberately the largest thing in the content column, see the h2 note below */ --text-2xl: 1.6rem; /* display numerals and glyphs (tile values, stars) */ /* ---------- spacing scale (v2.89.0) ------------------------------------- The other half of "busy". Consecutive blocks in the Humidor stack were separated by 16 / 18 / 18 / 20px — near-identical, so NOTHING GROUPED and the page read as one undifferentiated column. Grouping on a phone comes from spacing, not from borders: tight inside a group, wide between groups. --space-block is the between-groups gap and --space-tight the within-group one; the ratio between them is what does the work, so change them together or not at all. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-tight: var(--space-2); --space-block: var(--space-6); } /* Light theme — applied via [data-theme="light"] on , set by settings-init.js (before paint) and kept in sync by app.js afterward. --success-bright in particular needs its own value per theme: the dark value (#9fd48b) is a light, readable-on-dark green that would fail contrast as text on a light card, so it's not just a straight invert. */ :root[data-theme="light"] { --bg: #f3e8d8; --bg-elevated: #ffffff; --card: #ffffff; --card-border: #dcc9a8; --gold: #9c7530; --gold-bright: #7c5a1e; --cream: #2b1c14; --muted: #6b5842; --faint: #8a7060; --accent: #8f3a2a; --accent-bright: #a84532; --success: #3f6a34; --success-bright: #2f5226; --warn-bright: #8a5a1a; --chip-active-bg: #6b4e19; --chip-active-fg: #ffffff; --chart-1: #a97a1e; --chart-2: #9c4a2a; --chart-3: #52672f; --chart-4: #2e6373; --chart-5: #6b3f70; --chart-6: #7a6650; --chart-7: #97423d; --chart-8: #4d7367; --chart-9: #756b34; } * { box-sizing: border-box; } /* Respect the device's own reduced-motion accessibility setting — no in-app toggle needed, this is the standard way browsers expose it. */ @media (prefers-reduced-motion: reduce) { .view.active { animation: none; } } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--cream); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: transparent; } body { /* .tabbar and .modal both add env(safe-area-inset-bottom); this reserve did not, so on a notched phone the tabbar grew by the inset while the body's reserve didn't and the last ~34px of every scrolling list sat under it. index.html opts into viewport-fit=cover, so the inset is live here. */ padding-bottom: calc(var(--tabbar-height) + 12px + env(safe-area-inset-bottom)); /* The dvh line is the fix; the vh line above it is the fallback for browsers without dvh (no @supports needed — an unknown unit is simply dropped). 100vh is the LARGE viewport on mobile, i.e. it ignores the browser chrome, which forces phantom scroll on first paint. */ min-height: 100vh; min-height: 100dvh; } /* ⚠️ THE TOP INSET IS LOAD-BEARING ON iOS AND WAS THE ONE EDGE MISSING IT (v2.92.2). index.html has carried `viewport-fit=cover` and `apple-mobile-web-app-status-bar-style="black-translucent"` since v2.72.1, and together those draw page content UNDERNEATH the status bar — which is only correct if the topmost element reserves room for it. Every other edge already did: .tabbar, .modal, .app-toast and the age gate. This one had a flat 20px against a status bar / Dynamic Island that is ~47-59px on a modern iPhone, so the title and the ⚙️ button would have sat under it. max() keeps the existing 20px everywhere else — env() resolves to 0 off iOS — so this is free on Android and desktop. Fixed pre-emptively for the same reason v2.72.1 added the meta tags before anyone could test them: nobody here has an iPhone (COMMERCIAL_READINESS §3), and the checklist item stays open until someone confirms it on real hardware. */ .app-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: max(20px, env(safe-area-inset-top)) 16px 14px; background: linear-gradient(180deg, #241812 0%, #1b120c 100%); border-bottom: 1px solid var(--card-border); } :root[data-theme="light"] .app-header { background: linear-gradient(180deg, #fbf1e2 0%, #f3e8d8 100%); } .app-header-text { grid-column: 2; text-align: center; } /* 44px: the one control in the header, and it was 38. Above WCAG 2.2's 24px floor either way, but this is a thumb target at the top corner of a phone — the size that matters here is the comfortable one, not the legal minimum. */ .header-icon-btn { grid-column: 3; justify-self: end; width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 1px solid var(--card-border); color: var(--gold); font-size: var(--text-lg); display: flex; align-items: center; justify-content: center; padding: 0; } /* ⚠️ DELIBERATELY SMALLER THAN THE PAGE TITLE (v2.89.0), and this is the swap that creates the hierarchy rather than just tidying it. It used to be 1.4rem against an h2 of 1.15rem, so the one line that NEVER changes — the wordmark, present on every screen — shouted louder than the one that tells you where you are. Nobody needs reminding which app they opened. The header is persistent chrome and reads as chrome; the page title leads the column. */ .app-header h1 { margin: 0; font-size: var(--text-lg); color: var(--gold-bright); letter-spacing: 0.02em; } .tagline { margin: 4px 0 0; font-size: var(--text-sm); color: var(--muted); } #views { padding: 16px; max-width: 640px; margin: 0 auto; } .view { display: none; } .view.active { display: block; animation: fadein 0.18s ease-out; } @keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* The page title, and the largest thing in the content column by design. It was 1.15rem against a 1.02rem card title — 13% larger, which is not a hierarchy, it is a rounding error. At --text-xl against --text-md it is 42% larger and the eye lands on it first. Pair it with the h1 note above; the two moved together and neither works alone. */ h2 { color: var(--gold-bright); font-size: var(--text-xl); margin: 0 0 var(--space-1); } .hint { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); line-height: 1.4; } label { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); margin: 14px 0 6px; } .faint { text-transform: none; letter-spacing: 0; font-size: var(--text-xs); color: var(--faint); } /* ⚠️ `input[type="password"]` WAS MISSING FROM THIS LIST AND EVERY PASSWORD FIELD IN THE APP WAS UNSTYLED — browser default, 21px tall, light box on a dark theme. All five of them: the lock screen's PIN box, both App Lock setup fields, and both backup-passphrase fields. So the control on the app's most important screen, the one a locked user sees before anything else, was the only unstyled input in the product. Found by accident at v2.107.4: a hit-test of the new reset control reported it at 46px next to a 21px `#lock-pin`, and the two are siblings. **A selector list is a hand-kept list** — the same failure mode as `SECRET_KEYS` or the repaint list, without a gate to catch it. ⚠️⚠️ AND IT HAPPENED AGAIN — `input[type="number"]`, found 2026-08-09. All four static number fields (tin quantity, bulk ounces, tin price, pipe price) plus six more built in app.js rendered at 21px, white on the dark theme, beside 48px siblings. v2.107.4 added the one type it had noticed and left this comment asking the next person to remember, which is precisely the instruction nobody executes. ⭐ THE FIX IS THE GATE, NOT THE SHAPE OF THIS SELECTOR — and inverting it was tried first and REJECTED on measurement, which is the part worth keeping. The obvious move is a denylist (`input:not([type="checkbox"])…`) so a new type is covered on arrival. It was written, and then its specificity was measured: six attribute selectors put it at (0,6,1) where this list is (0,1,1). That silently INVERTED two existing rules — `.hi-oz input[type="number"]` (0,2,1) lost its `width: 5.5em` to the shared `width: 100%`, and `.ch-rest-row input[type="date"]` (0,2,1) lost its `padding: 6px 8px` to the shared `padding: 12px`. Both are invisible in a diff and neither is covered by a test. **That is the same class of defect it was meant to prevent, moved somewhere harder to see**: every future `.some-class input[type="…"]` would silently lose to a selector nobody expects to be strong. `:where()` would flatten the specificity, but that is a Level 4 selector and an unsupported selector invalidates the WHOLE rule — the blast radius being every input in the product unstyled at once. Not worth it for a list that now has a gate. ⚠️ SO THIS STAYS A HAND-KEPT ALLOWLIST AT ITS ORIGINAL SPECIFICITY, AND `inputStyleLint()` IN tools/validate.js IS WHAT KEEPS IT HONEST. It fails the build if any `input[type="…"]` used in index.html or in a LINT_FILES template is neither listed here nor named in INTENTIONALLY_UNSTYLED with a reason. Adding a type to the markup and forgetting this line is now a red gate rather than a white box on a dark screen. Fault-injected three ways. */ select, input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea { width: 100%; background: var(--bg-elevated); border: 1px solid var(--card-border); color: var(--cream); padding: 12px; border-radius: 10px; font-size: var(--text-md); font-family: inherit; } textarea { resize: vertical; } /* The blanket `outline: none` here used to apply to every focus, including keyboard focus, leaving a 1px border-colour change as the only cue — and buttons had no rule at all, so the whole app relied on the UA default ring drawn over dark custom backgrounds. Narrowed to pointer/programmatic focus only; :focus-visible below restores a real ring for keyboard users. */ select:focus:not(:focus-visible), input:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; } select:focus, input:focus, textarea:focus { border-color: var(--gold); } :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } button { font-family: inherit; cursor: pointer; border: none; border-radius: 10px; font-size: var(--text-md); } /* The auto-fill buttons set .disabled = true for the duration of a scrape, which is two sequential cross-origin fetches behind a 12s timeout. Without this the button looked fully active the whole time. */ button:disabled { opacity: 0.55; cursor: default; } /* Not scoped to `button`, and not relying on the `button {}` reset above for cursor/border-radius/font either — the Backup & Restore "Import" control is a