/* Kanji Trail — mobile-first, large touch targets, light and dark. */
:root {
--bg: #fdf6f0;
--surface: #ffffff;
--ink: #23201e;
--ink-soft: #6d6560;
--line: #e8ded6;
--accent: #e8553d;
--accent-ink: #ffffff;
/* A translucent halo of the accent, for the ring around a grabbed control
(so far: the story bookmark). Declared per theme rather than mixed at
use, because a fixed alpha over a dark ground reads far heavier than the
same alpha over a light one. */
--accent-soft: rgba(232, 85, 61, 0.22);
--ok: #2e9e6b;
--ok-bg: #e4f6ec;
--bad: #d94141;
--bad-bg: #fdeaea;
--radius: 18px;
--tap: 52px;
/* Story illustrations (stories-plan.md §8.8). Inline art is SVG precisely so
its colours can be these variables and follow the theme — which only works
because the markup is inlined into the DOM rather than referenced by
, where page CSS would never reach it. Muted on purpose: a picture
sits inside a page of Japanese somebody is reading and must not out-shout
the text.
--art-ink is the DRAWING's line, and unlike the UI's --ink it does NOT
flip between themes: it stays dark in both, because an ant is a dark
animal in every light and inverting it produced a white ant on a dark
river. Dark mode dims and desaturates the GROUND instead, which is what a
printed plate does and keeps the drawing recognisably the same drawing. */
--art-sky: #efe3d5;
--art-water: #8ebdd6;
--art-water-far: #b3d3e2;
--art-water-near: #6ca2bd;
--art-bank: #cdb289;
--art-leaf: #7cb36a;
--art-leaf-vein: #4c8440;
--art-accent: #e0a63f;
--art-pale: #faf4ec;
--art-ink: #3b322c;
/* Mastery scale for the set-overview grid: 0 (never introduced) through 4
(at or past the top box). Deliberately distinct from --ok/--ok-bg —
those mean "just answered correctly", this means "known over time". */
--tier-0: var(--surface);
--tier-0-ink: var(--ink-soft);
--tier-1: #e3f3e3;
--tier-1-ink: #2f5233;
--tier-2: #a9dbac;
--tier-2-ink: #1f4023;
--tier-3: #5cb663;
--tier-3-ink: #ffffff;
--tier-4: #2e8b3d;
--tier-4-ink: #ffffff;
/* Text-size control (see the pinch-to-open panel in app.js —
bindPinchZoom()/openFontSizePanel()). Set as an inline style on
once a saved or slider-chosen value loads (applyFontScale()),
which overrides this stylesheet default of 1 (100%, unscaled). Capped
at 1.5 (FONT_SCALE_MAX in app.js) — see styles.css's overflow audit
notes near .choice-grid-text for why that ceiling and not higher. */
--app-font-scale: 1;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #17151a;
--surface: #221f26;
--ink: #f2ece8;
--ink-soft: #a49b96;
--line: #35303a;
--accent: #ff6f56;
--accent-ink: #21100c;
--accent-soft: rgba(255, 111, 86, 0.3);
--ok: #57d39a;
--ok-bg: #17342a;
--bad: #ff7b7b;
--bad-bg: #3a1f22;
/* Dark: the same picture, dimmed and desaturated rather than inverted, and
kept light enough for the (still dark) --art-ink line to read on it. A
fully dark ground would need a light subject, which is how the ant came
out white. */
--art-sky: #3b3442;
--art-water: #4d6e81;
--art-water-far: #3f5b6b;
--art-water-near: #628ea5;
--art-bank: #6b5a44;
--art-leaf: #5d8f52;
--art-leaf-vein: #3c6733;
--art-accent: #cb9a3f;
--art-pale: #e3dbd2;
--art-ink: #221c18;
--tier-0: var(--surface);
--tier-0-ink: var(--ink-soft);
--tier-1: #1d3320;
--tier-1-ink: #a9dbac;
--tier-2: #2f6a37;
--tier-2-ink: #d9f0da;
--tier-3: #3f9a4c;
--tier-3-ink: #ffffff;
--tier-4: #57c765;
--tier-4-ink: #0c1f0e;
}
}
/* --- Accent colour picker (Settings > Theme colour, see ACCENT_COLORS and
applyAccentColor() in app.js) -------------------------------------------
Only --accent/--accent-ink change per colour — every other token (--ok/
--bad/--tier-*/etc.) stays put, since those carry their own meaning
(correct/incorrect, mastery level) independent of the learner's chosen
brand colour. Per-profile: applyAccentColor() sets data-accent on
whenever a profile opens, and resets it on the profile-picker screen —
see renderProfiles()/openProfile() in app.js. "coral" is also the
unattributed default above, repeated here so every choice, including the
one nothing needs to override, is an explicit, equally-real option
rather than a special case. */
:root[data-accent="coral"] { --accent: #e8553d; --accent-ink: #ffffff; }
:root[data-accent="blue"] { --accent: #2f6fed; --accent-ink: #ffffff; }
:root[data-accent="purple"] { --accent: #8451d6; --accent-ink: #ffffff; }
:root[data-accent="pink"] { --accent: #e0559a; --accent-ink: #ffffff; }
:root[data-accent="teal"] { --accent: #12968a; --accent-ink: #ffffff; }
:root[data-accent="amber"] { --accent: #c9821a; --accent-ink: #2a1600; }
:root[data-accent="green"] { --accent: #2f9e44; --accent-ink: #ffffff; }
:root[data-accent="indigo"] { --accent: #4a55d1; --accent-ink: #ffffff; }
:root[data-accent="crimson"] { --accent: #d1273f; --accent-ink: #ffffff; }
:root[data-accent="sky"] { --accent: #0891b2; --accent-ink: #ffffff; }
@media (prefers-color-scheme: dark) {
:root[data-accent="coral"] { --accent: #ff6f56; --accent-ink: #21100c; }
:root[data-accent="blue"] { --accent: #7aa6ff; --accent-ink: #0b1733; }
:root[data-accent="purple"] { --accent: #b794f9; --accent-ink: #221040; }
:root[data-accent="pink"] { --accent: #ff8fc4; --accent-ink: #3a0f26; }
:root[data-accent="teal"] { --accent: #4fd9c8; --accent-ink: #052925; }
:root[data-accent="amber"] { --accent: #f3bb52; --accent-ink: #2a1600; }
:root[data-accent="green"] { --accent: #5cd679; --accent-ink: #062510; }
:root[data-accent="indigo"] { --accent: #9aa0ff; --accent-ink: #14163f; }
:root[data-accent="crimson"] { --accent: #ff7a90; --accent-ink: #3a0512; }
:root[data-accent="sky"] { --accent: #63e0f5; --accent-ink: #052a30; }
}
* { box-sizing: border-box; }
/* The browser's own [hidden]{display:none} default has the same specificity
as a single class selector, and author rules beat the UA stylesheet at
equal specificity — so any component below that sets its own `display`
(flex/grid) silently wins over `.hidden = true` in JS, and the element
stays visible. !important here is deliberate and load-bearing: it is what
makes `hidden` an unconditional override no future component class needs
to remember to guard against. Found via a genuine bug (kanji-info and the
Show answers/Advanced row staying visible when JS had already hidden
them) — do not remove this without re-auditing every `.hidden =` in app.js. */
[hidden] { display: none !important; }
/* Almost nothing below this line is sized in rem — body and every component
set an explicit px font-size, which is why --app-font-scale (above) can't
just ride on the cascade the way a page-zoom shortcut does in a desktop
browser. So the default here is that EVERY rule below that sets a literal
px font-size (or a clamp() built from px bounds, like .glyph-xl) multiplies
it via calc(Npx * var(--app-font-scale, 1)) at its own rule — the same
mechanical pattern repeated at every one of them rather than tagged with
its own paragraph each time (an earlier pass here scaled only a curated
handful and called the rest "a deliberate partial win"; real device
testing found that read as broken, not restrained — command-plus on a
desktop browser does not ask which elements deserve it). html's own
font-size just above is part of the same mechanism, so anything that ever
does use rem gets it for free too.
The exceptions are commented individually, right on the rule, and fall
into a few kinds: an icon/emoji glyph or a "•"/"✓"/"+"/"−" status-marker
character, sized as UI chrome rather than as text to read; the small-A
slider anchor in the text-size panel below, deliberately kept fixed to
contrast against the large-A beside it that already grows; and a ruby
(furigana) rt sized in em against an ancestor that itself scales, which
already inherits the effect for free and would double it if also wrapped
in calc(). See bindPinchZoom()/applyFontScale() in app.js. */
html {
font-size: calc(16px * var(--app-font-scale, 1));
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: calc(17px * var(--app-font-scale, 1));
line-height: 1.45;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
/* Disables double-tap-to-zoom (and the ~300ms tap delay it implies) and
native pinch-zoom, app-wide, without touching the viewport meta tag —
that would need user-scalable=no, an accessibility regression (WCAG
1.4.4) with no replacement. `manipulation` (pan-x pan-y pinch-zoom)
would leave native pinch-zoom enabled at the browser level: per the
touch-action spec that hands the gesture to the browser's own
compositor, which starts zooming regardless of any preventDefault() a
JS pointermove/touchmove handler calls — confirmed on a real phone,
where bindPinchZoom() below "worked" only in the sandboxed test that
dispatches synthetic events, never against a genuine two-finger pinch.
pan-x pan-y omits pinch-zoom from what the browser handles, which is
what actually lets bindPinchZoom() (app.js) intercept a real pinch and
open the Text size panel instead of the viewport zooming — the thing
that keeps this WCAG 1.4.4-safe without the accidental, easy-to-miss
zooming pinch-to-zoom caused on a phone. Still removes the double-tap
gesture, same as manipulation did, since any non-auto value does. */
touch-action: pan-x pan-y;
/* Nothing in this app is meant to be selected or copied — every character,
reading and button label here is UI, not content a learner would ever
want to grab text from. Reported from real use on iPad + Apple Pencil:
a palm resting on the glass mid-stroke plus the pencil's own contact
reads to iOS as two simultaneous touch points, which it's happy to
interpret as "select from here to there" over whatever text sits
between them — the resulting blue selection (and, on a plain long
press, the Copy/Look Up callout menu) has nothing to do with anything
the app itself renders in response to a touch. user-select: none
removes the selection gesture itself (this doesn't affect typing or
selecting text inside the profile-name/search fields — form
controls own their text-editing UI independently of an ancestor's
user-select); -webkit-touch-callout: none removes the long-press menu
iOS shows even where nothing is selectable. */
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
/* --- Splash --------------------------------------------------------------
See index.html for why this exists as plain HTML rather than something
app.js renders. Sits above everything else and gets hidden for good once
boot() has real content to show. */
.splash {
position: fixed;
inset: 0;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
background: var(--bg);
}
.splash-mark { width: 72px; height: 72px; border-radius: 20px; font-size: 28px; } /* fixed-size logo badge, not reading text */
.splash-spinner {
width: 28px; height: 28px;
border-radius: 50%;
border: 3px solid var(--line);
border-top-color: var(--accent);
animation: splash-spin 0.8s linear infinite;
}
@keyframes splash-spin { to { transform: rotate(360deg); } }
/* --- Data loading pill -----------------------------------------------------
See #data-loading in index.html. A small fixed pill rather than a
full-screen overlay — loading one grade's data is a background hand-off,
not a blocking event the way the initial splash is. */
.data-loading {
position: fixed;
bottom: max(16px, env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
z-index: 998;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
font-size: calc(14px * var(--app-font-scale, 1));
color: var(--ink-soft);
}
.data-loading-spinner {
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid var(--line);
border-top-color: var(--accent);
animation: splash-spin 0.8s linear infinite;
}
/* --- Install banner -------------------------------------------------------
See #install-banner in index.html for why this exists. A wide bottom bar
rather than the data-loading pill's shape — this needs room for a
sentence of text plus a button, not just a spinner and a word. */
.install-banner {
position: fixed;
left: 12px; right: 12px;
bottom: max(12px, env(safe-area-inset-bottom));
z-index: 997;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px 14px 16px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.install-banner-text { margin: 0; flex: 1; font-size: calc(14px * var(--app-font-scale, 1)); line-height: 1.4; color: var(--ink); }
.install-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.install-banner-actions .btn-primary { min-height: 40px; padding: 0 14px; font-size: calc(14px * var(--app-font-scale, 1)); }
.install-banner-actions .btn-icon { width: 36px; min-height: 36px; font-size: 15px; } /* icon glyph, not reading text */
#app {
max-width: 620px;
margin: 0 auto;
padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.screen { display: flex; flex-direction: column; gap: 16px; }
/* Every screen switch goes through show() in app.js, which just flips which
`.screen` has [hidden] — instant, which reads as abrupt given how fast
everything else here is. A plain fade-and-rise on whichever screen just
became visible is enough to read as a deliberate transition rather than a
cut, without the complexity (and failure modes — see navSeq in app.js) of
trying to cross-fade the outgoing screen too. Restarts for free every time
[hidden] toggles off, because the element is genuinely re-entering layout
(display: none -> flex) rather than just changing a class on something
already rendered. */
/* Two variants, and the split is load-bearing rather than cosmetic. A
`transform` — even one only touched by a keyframe, and only for 220ms —
makes the element a containing block for its own `position: fixed`
descendants. On the quiz and summary screens that descendant is
.bottom-bar, which promptly stops being pinned to the VIEWPORT and pins
itself to the bottom of the SCREEN box instead: taller than the viewport
whenever the content scrolls, so Next slides below the fold and taps at
it hit nothing until the animation ends. Reported as needing three or
four presses on Next after coming back from "Full details" (which
re-triggers the animation with Next already showing — every other way of
entering the quiz screen has it hidden, which is why this hid for so
long). Those screens therefore fade without rising. */
@media (prefers-reduced-motion: no-preference) {
.screen:not([hidden]) { animation: screen-enter 220ms ease-out; }
.screen:not([hidden]):has(.bottom-bar) { animation: screen-fade 220ms ease-out; }
}
@keyframes screen-enter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes screen-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Reserves room for the fixed .bottom-bar (see above) so it never overlaps
the last bit of real content — a chip in a long summary list, a choice on
a short quiz card. Sized generously rather than exactly (the bar's real
height varies with how many buttons it holds), which just means some
trailing empty space above it on a short screen, not overlap on a tall
one. */
/* The quiz screen reserves far less than the others because #quiz-info
(meanings, example word, hint — the tall, variable part) no longer sits
at the bottom: it moved up under the character, so the last thing above
the bar is now the fixed-height "Advanced / Show answers" row. What's
left is just clearance for the bar itself — #app's own bottom padding
already covers the home-indicator inset that the bar's padding also
respects, so this does not need to grow with it.
The min-height + margin-top: auto pair below is the real point. Without
it the answers ended wherever the card above them happened to stop —
which on a tall screen left a large dead gap between the last choice and
the Next button pinned to the bottom, so answering and then advancing
meant a long reach across nothing. Now the empty space collects UNDER
the character instead, and the answers sit just above Next whatever the
screen height. On a short screen the auto margin simply collapses to
nothing and the layout behaves exactly as it did before. */
/* Room for the pinned #writing-result bar while it's showing (same
reservation quiz's bottom-bar makes, and the same button/rate-row shapes)
so the board/kanji-info above can scroll clear of it instead of sitting
underneath. Keyed off #writing-result's own `hidden` attribute directly,
unlike #screen-overview's :has(.bottom-bar > :not([hidden])) below — its
direct children are the buttons themselves, but #writing-result's are the
always-present .row/#writing-rate wrappers, which that selector shape
would match regardless of #writing-result's own hidden state. */
#screen-writing:has(#writing-result:not([hidden])) { padding-bottom: 92px; }
/* Same reservation for the Free-mode self-grade bar (kana-quest-feedback#13)
— taller than #writing-result's single button row (a hint line, the
question, then the Yes/No row), hence the bigger number. */
#screen-writing:has(#writing-self-grade:not([hidden])) { padding-bottom: 160px; }
#screen-quiz {
padding-bottom: 92px;
/* A slightly tighter rhythm than the 16px every other screen uses: this
is the one screen that has to fit a character, its details and every
answer between a sticky header and a fixed bar without scrolling, and
4px off each gap is the cheapest 12px there is to find. */
gap: 12px;
min-height: 100vh;
min-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
}
#quiz-choices { margin-top: auto; }
#screen-summary { padding-bottom: 320px; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: calc(26px * var(--app-font-scale, 1)); }
h2 { font-size: calc(20px * var(--app-font-scale, 1)); }
h3 { font-size: calc(18px * var(--app-font-scale, 1)); }
.screen-title { font-size: calc(22px * var(--app-font-scale, 1)); font-weight: 600; }
.hint { margin: 0; color: var(--ink-soft); font-size: calc(14px * var(--app-font-scale, 1)); }
.footnote { margin: 8px 0 0; color: var(--ink-soft); font-size: calc(13px * var(--app-font-scale, 1)); text-align: center; }
/* --- Changelog (Settings > App version, see renderChangelog() in app.js) - */
.changelog-date { font-weight: 600; color: var(--ink); }
.changelog-list { margin: 4px 0 0; padding-left: 20px; }
.changelog-list li { margin: 4px 0; font-size: calc(14px * var(--app-font-scale, 1)); color: var(--ink-soft); }
/* One block per prior date inside #changelog-history — same shape as the
always-visible "current" block above, just repeated. */
.changelog-entry + .changelog-entry { margin-top: 14px; }
/* --- Japanese glyphs ---------------------------------------------------- */
.glyph {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
"Noto Sans JP", "Noto Sans CJK JP", sans-serif;
font-weight: 400;
line-height: 1;
}
/* The character/word being taught or tested — the single most prominent
thing on almost every screen, so it's one of the few rules in this file
that genuinely scales with --app-font-scale (see the comment above
`html` near the top of this file). Wrapping the whole clamp() in calc()
rather than converting its px bounds to rem: the vw term is what actually
wins on a phone-width viewport, and rem bounds alone would leave the
rendered size unmoved by the slider until the scale pushed past them. */
.glyph-xl { font-size: calc(clamp(96px, 34vw, 168px) * var(--app-font-scale, 1)); }
/* A vocab word can run to several characters (自動車, こんにちは) where a kana
or single kanji glyph never does — glyph-xl's 168px would overflow a
phone width immediately. Sized to comfortably fit ~6 characters, and
allowed to wrap rather than shrink further, since a fixed-size hint is
more useful than a still-too-small one on a long word. Scales with
--app-font-scale, same reasoning as .glyph-xl above. */
.glyph-vocab { font-size: calc(clamp(40px, 10vw, 64px) * var(--app-font-scale, 1)); word-break: keep-all; overflow-wrap: anywhere; }
.glyph-vocab rt {
font-size: 0.4em; /* ruby: em ratio of .glyph-vocab, scales for free once its parent does */
color: var(--ink-soft);
font-weight: 400;
user-select: none;
}
/* Recall mode's prompt (vocab-plan.md §6.1) is an English gloss, not a
Japanese glyph — its own class rather than .glyph so it gets a plain sans
stack instead of the CJK font list, sized like a short headline rather
than a giant character. This IS the question in Recall mode, so like
.glyph-xl above it scales with --app-font-scale. */
.quiz-prompt-text {
font-size: calc(clamp(28px, 7vw, 40px) * var(--app-font-scale, 1));
font-weight: 700;
line-height: 1.2;
}
/* The reveal-ladder tap target (vocab-plan.md §5.2/§5.3) — a dotted
underline is the one affordance telling a learner this word can be
tapped for help, since nothing else on the card is (a stray tap
elsewhere on the quiz screen deliberately does nothing — see c51d904). */
.vocab-word-tap { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 8px; }
/* Once a question is answered — Next showing, or (Writing) the result panel
up — the tested glyph itself becomes a way through to its own detail
screen: "click wherever possible" extends to the very thing just
answered, not only a separate "Full details" link. A class of its own
rather than reusing .vocab-word-tap: that one already means something
different (whether the reveal ladder has anything left to show) and the
two must be free to disagree, which they do the moment a vmeaning
question resolves and the reveal ladder is spent but the glyph itself
only now becomes tappable for detail. See clickQuizGlyph() in app.js. */
.quiz-glyph-tap { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 8px; }
/* #writing-result-glyph is a