, it just falls through to the surrounding font, since
neither italics nor Lora mean anything in those scripts. */
.mQuoteTarget {
font-family: "Lora", var(--font-body);
font-style: italic;
font-weight: 500;
font-size: 1em;
letter-spacing: 0.005em;
}
/* A quoted word inside Meaning/Etymology prose that happens to name a real
corpus headword (app.js: appendRich's `ks` branch, resolveQuoteWord) — the
compound-word cross-reference from work-plan item 8: "Fachfrau compounds
Fach ... with Frau ..." with Fach and Frau each opening the same popover a
word-family row's book icon does. Same underline-not-colour cue as a
linked synonym chip (.syn.synLinked), for the same reason: italic already
carries one visual meaning (foreign-language quote) here, so "also a
link" has to layer on top rather than replace it. */
.mQuoteTarget.mQuoteLinked {
cursor: pointer;
text-decoration: underline dotted color-mix(in srgb, var(--accent) 55%, transparent);
text-underline-offset: 3px;
}
.mQuoteTarget.mQuoteLinked:hover, .mQuoteTarget.mQuoteLinked:focus-visible {
color: var(--accent);
}
.mEx {
font-size: 0.92rem;
line-height: 1.45;
margin: 9px 0 0;
padding-left: 11px;
border-left: 2px solid var(--border);
}
.mExGloss {
font-size: 0.86rem;
color: var(--muted);
line-height: 1.4;
margin: 3px 0 0;
padding-left: 11px;
border-left: 2px solid var(--border);
}
.mAnBox { display: flex; gap: 8px; margin-top: 9px; align-items: baseline; }
.mAnList { flex: 1; min-width: 0; }
.mAnLabel { color: var(--muted); margin: 0; font-size: 0.95rem; flex-shrink: 0; }
.mAn { font-size: 0.88rem; margin: 0; }
.mAn.alt { font-size: 0.85rem; color: var(--muted); margin-top: 1px; }
.mMeta { font-size: 0.83rem; color: var(--muted); margin: 4px 0 0; }
/* An abbreviation card. The short form and its expansion share the title
line — "z. B. · zum Beispiel" — the same primary-then-muted pairing the
idiom card uses for a meaning and its literal reading on one line, rather
than a paragraph of its own: two short strings stacked as separate
paragraphs read as duplicates of each other, not as one thing and its
gloss. The short form keeps the bold weight and tabular numerals a code
deserves — "z. B." and "u. a." must not be kerned into something that
reads as a word; the expansion is muted and lighter, since it is the
secondary half of the pair. The pronunciation hint below is a spelling of
a sound, muted and italic so it is never mistaken for a second
expansion. */
.mAbbrShortT { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.mAbbrFullT {
font-weight: 400;
color: var(--muted);
font-size: 0.86em;
}
.mAbbrShortT + .mAbbrFullT::before {
content: "·";
margin: 0 0.5em;
opacity: 0.65;
}
.mAbbrSayT {
font-size: 0.86em;
font-weight: 400;
color: var(--muted);
font-style: italic;
}
.mAbbrSayT::before {
content: "·";
margin: 0 0.5em;
font-style: normal;
opacity: 0.65;
}
.mAbbrSayLabel { font-style: normal; opacity: 0.8; }
.mAbbrNoteWrap {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 0;
}
.mAbbrNoteIcon {
flex-shrink: 0;
color: var(--accent);
opacity: 0.75;
}
.mAbbrNoteBody { flex: 1; min-width: 0; }
.mAbbrNote {
font-size: 0.85rem;
line-height: 1.4;
margin: 0;
color: var(--muted);
}
.mAbbrNote.alt { font-size: 0.83rem; margin-top: 1px; }
/* The dialogue title: German first, then each active study-from language's
translation inline after a "·" — same rule/markup as .mSchrTitleDe/
.mSchrTitleTr (Goethe-Schreiben), reused here under dialogue-specific
class names since each media kind keeps its own namespaced classes. */
.mDlgTitleTr {
font-weight: 400;
color: var(--muted);
font-size: 0.86em;
}
.mDlgTitleDe + .mDlgTitleTr::before,
.mDlgTitleTr + .mDlgTitleTr::before {
content: "·";
margin: 0 0.5em;
opacity: 0.65;
}
/* Dialogue turns: speaker in a narrow left column so the lines align and the
exchange reads as an exchange. */
.mTurn { display: flex; gap: 10px; margin-top: 8px; }
.mWho {
flex: 0 0 auto;
min-width: 74px;
font-size: 0.82rem;
font-weight: 700;
color: var(--muted);
padding-top: 1px;
}
.mLine { flex: 1; min-width: 0; }
.mDe { margin: 0; font-size: 0.94rem; line-height: 1.45; }
/* The translation for a one-sentence row (a dialogue turn, a Schreiben
task/bullet) — appended inline right after the German sentence
(appendInlineGloss) rather than stacked on its own line below the way
mediaGloss's multi-line shape works. Colour-only: it inherits whatever
font-size its German sentence is set in, so it reads as the same line. */
.mInlineGloss { color: var(--muted); }
/* ---- The songbook ----------------------------------------------------
There are no cards here and nothing to expand: the five thousand titles are
rows in the contents rail, and this is the pane the chosen one is read in. */
.mLyBody { padding: 0 0 14px; }
/* A stanza is the unit that matters: Spanish in the left column, the
translation level with it in the right, and a real gap to the next stanza
so the shape of the song survives — the estribillo is findable by eye. The
columns are equal because a translation runs about as long as its line, and
an uneven split makes the two stop looking like the same song. */
.mLyStanza {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 28px;
margin-top: 18px;
}
.mLyStanza:first-child { margin-top: 4px; }
.mLySide { min-width: 0; }
.mLyLine {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
/* A long line wraps rather than being cut, and the wrapped part is indented
so it still reads as one line of verse and not as two. */
padding-left: 1.1em;
text-indent: -1.1em;
}
.mLyTr .mLyLine { color: var(--muted); }
.mLyPending { margin: 14px 0 0; color: var(--muted); }
/* Below the split the two columns would be four or five words wide, which is
narrower than a tango line. Stack them instead, translation under stanza,
and lean on the stanza gap to keep the pairs apart. */
@media (max-width: 640px) {
.mLyStanza { grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
.mLyTr { margin-top: 6px; }
}
.mEmpty { text-align: center; color: var(--muted); margin-top: 40px; }
/* A finished Learn session (this session's cap reached, or the whole bank
now learned) leaves on its own rather than waiting on a manual Quit/
Start-new-session choice — see renderMediaLearn's `if (!st.deck.length)`
branch in 11-lyrics-songbook-media.js. This is what plays while it does:
a brief blur-and-fade rather than an abrupt cut back to the section's
browsing list. Toggled by adding/removing the class, not an @keyframes,
so the JS side can listen for `transitionend` and know exactly when it's
safe to swap the view. */
#mediaBody.mLearnEnding {
filter: blur(10px);
opacity: 0;
pointer-events: none;
transition: filter 0.4s ease, opacity 0.4s ease;
}
/* ---- Wordlist ------------------------------------------------------------
Every card you've studied — the same card shape as the idiom/LiD cards
elsewhere in Media (word + level badge on top, meaning below, then the
ladder), not a dense single-line strip that was the one thing in Media
that didn't look like the rest of it. */
.wlToolbar {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
/* The direction toggle, then the four sort types — all one row, separated
by bullets, unveiling inline rather than pushing a panel in underneath. */
.wlSortBar {
display: flex;
flex-wrap: wrap;
align-items: center;
/* 12px, not 8px -- each button's own ::before brush border bleeds 3px
outward per side, below; anything tighter lets neighbours' bled edges
touch (same bug .mScopes hit, see its own comment). */
gap: 12px;
}
.wlSortToggle,
.wlSortDirBtn,
.wlSortTypeBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
position: relative;
border: none;
border-radius: 0 !important;
background: var(--card-bg);
color: var(--muted);
font-size: 1rem;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.wlSortToggle::before,
.wlSortDirBtn::before,
.wlSortTypeBtn::before {
content: "";
position: absolute;
inset: -3px;
pointer-events: none;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
background-size: 40px 8px, 40px 8px, 8px 40px, 8px 40px;
background-image: var(--brush-h), var(--brush-h), var(--brush-v), var(--brush-v);
-webkit-mask-image: var(--brush-corner-mask);
mask-image: var(--brush-corner-mask);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.wlSortToggle:hover,
.wlSortDirBtn:hover,
.wlSortTypeBtn:hover { color: var(--text); }
.wlSortToggle.open { color: var(--accent); }
.wlSortTypes { display: flex; gap: 12px; }
.wlSortTypeBtn { font-size: 0.78rem; font-weight: 700; }
/* Underlined, not filled, when selected -- same --pencil-underline swap as
.viewBtn.active (user feedback, 2026-09-19). Text stays --text -- only
the underline carries --accent (user feedback, 2026-09-25, same
#levelPanel .levelBtn.active precedent as #modePanel/.viewBtn above). */
.wlSortTypeBtn.on { background: var(--card-bg); color: var(--text); }
.wlSortTypeBtn.on::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 4px;
height: 5px;
background-color: var(--accent);
pointer-events: none;
-webkit-mask-image: var(--pencil-underline);
mask-image: var(--pencil-underline);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 28px 6px;
mask-size: 28px 6px;
-webkit-mask-position: center;
mask-position: center;
}
.wlDot { color: var(--muted); }
/* Level (cumulative CEFR cap, same rule .mLevel already uses in the idiom
sections) and topic — appended into .wlSortBar itself, right after the
sort controls, so the whole toolbar reads as one row. */
.wlLevelBar { display: flex; flex-wrap: wrap; gap: 12px; }
.wlTopicWrap { position: relative; }
.wlTopicBtn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 34px;
height: 34px;
padding: 0 6px;
position: relative;
border: none;
border-radius: 0 !important;
background: var(--card-bg);
color: var(--muted);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.wlTopicBtn::before {
content: "";
position: absolute;
inset: -3px;
pointer-events: none;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
background-size: 40px 8px, 40px 8px, 8px 40px, 8px 40px;
background-image: var(--brush-h), var(--brush-h), var(--brush-v), var(--brush-v);
-webkit-mask-image: var(--brush-corner-mask);
mask-image: var(--brush-corner-mask);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.wlTopicBtn:hover { color: var(--text); }
.wlTopicBtn.on { color: var(--accent); }
.wlTopicBtn svg { flex-shrink: 0; }
/* Same circular handle as the Wordlist topic filter — a toggle beside a
dropdown, not a row of its own. Solid once learning mode is on, so the
section reads as "in a different mode" at a glance, not just a pressed
button. */
#mediaLearnBtn,
#mediaBookBtn {
display: inline-flex;
align-items: center;
justify-content: center;
/* See .modeBtn's own gap:0 comment: the global button{} rule's gap:8px
otherwise leaks in now that .mediaBtnLabel is a second flex child,
reserving a phantom gap that shoves the icon off-centre even while
the label sits collapsed to max-width:0. */
gap: 0;
min-width: 34px;
height: 34px;
flex: 0 0 auto;
padding: 0;
position: relative;
border: none;
border-radius: 0 !important;
background: var(--card-bg);
color: var(--muted);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, padding 0.2s ease;
}
#mediaLearnBtn::before,
#mediaBookBtn::before {
content: "";
position: absolute;
inset: -3px;
pointer-events: none;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
background-size: 40px 8px, 40px 8px, 8px 40px, 8px 40px;
background-image: var(--brush-h), var(--brush-h), var(--brush-v), var(--brush-v);
-webkit-mask-image: var(--brush-corner-mask);
mask-image: var(--brush-corner-mask);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
#mediaLearnBtn:hover, #mediaLearnBtn:focus-visible { color: var(--text); padding: 0 12px 0 9px; }
#mediaLearnBtn:focus { outline: none; }
#mediaLearnBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#mediaLearnBtn svg { width: 17px; height: 17px; flex-shrink: 0; }
#mediaLearnBtn[aria-pressed="true"] {
color: #fff;
background: var(--accent);
}
#mediaLearnBtn.hidden { display: none; }
#mediaBookBtn:hover, #mediaBookBtn:focus-visible { color: var(--text); padding: 0 12px 0 9px; }
#mediaBookBtn:focus { outline: none; }
#mediaBookBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#mediaBookBtn svg { width: 17px; height: 17px; flex-shrink: 0; }
#mediaBookBtn[aria-pressed="true"] {
color: #fff;
background: var(--accent);
}
#mediaBookBtn.hidden { display: none; }
/* The hover-revealed name beside the icon — see .modeBtnLabel for the same
trick on the mode-switch row. Shared by both circular buttons since they
never show at once. */
.mediaBtnLabel {
max-width: 0;
overflow: hidden;
opacity: 0;
white-space: nowrap;
font-size: 0.82rem;
font-weight: 600;
margin-left: 0;
/* Same slowed-down unfurl as .modeBtnLabel (user feedback) -- kept in
sync so every icon-only hover-reveal button in the app stretches at
the same deliberate pace. */
transition: max-width 1.1s ease, opacity 0.8s ease, margin-left 1.1s ease;
}
#mediaLearnBtn:hover .mediaBtnLabel, #mediaLearnBtn:focus-visible .mediaBtnLabel,
#mediaBookBtn:hover .mediaBtnLabel, #mediaBookBtn:focus-visible .mediaBtnLabel {
max-width: 160px;
opacity: 1;
margin-left: 6px;
}
/* Learn and the book view are two different ways of reading the same
section — never both at once, so whichever one isn't active gets
disabled rather than silently no-op'ing when the other is open. */
#mediaLearnBtn:disabled,
#mediaBookBtn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
#mediaLearnBtn:disabled:hover,
#mediaBookBtn:disabled:hover { color: var(--muted); padding: 0; }
#mediaLearnBtn:disabled:hover .mediaBtnLabel,
#mediaBookBtn:disabled:hover .mediaBtnLabel { max-width: 0; opacity: 0; margin-left: 0; }
.wlRow { transition: border-color 0.15s ease, background 0.15s ease; }
.wlRow:hover, .wlRow.open {
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
/* The lazy-render tail marker for renderWordlistRowsChunked() — invisible,
just needs real layout height for its IntersectionObserver to fire. */
.wlSentinel { height: 1px; }
.wlHeadBtn {
display: block;
width: 100%;
padding: 0;
border: none;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
/* One paragraph: word, then a bullet, then its translations, wrapping
together as plain text — not word and translation as two independent
flex columns each wrapping inside its own box, which is what a long
word (e.g. "der Verwandtenbesuch") used to turn into: a cramped,
rigidly two-column look instead of just flowing onto a second line like
any other long line of text. .wlTopRight floats right instead, so it
stays pinned at the row's top-right corner without needing flex at all
— the text simply wraps around it (it has to come FIRST in DOM order
for that, see wordlistRow()). */
.wlTopRow { display: block; }
.wlTopRight {
display: flex;
align-items: center;
column-gap: 8px;
float: right;
margin-left: 8px;
}
.wlBadge { flex-shrink: 0; }
.wlDot { color: var(--muted); }
.wlTr {
color: var(--muted);
font-size: 0.93rem;
line-height: 1.45;
}
/* Everything below the head row, revealed on expand — the study card's own
translations/forms/examples/stats, then the reference toggles. */
.wlExpand {
margin-top: 10px;
padding-top: 10px;
}
.wlExpand[hidden] { display: none; }
.wlReading { color: var(--muted); font-size: 0.85rem; margin-bottom: 6px; }
.wlSyn {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: baseline;
margin-bottom: 10px;
font-size: 0.82rem;
}
.wlSyn .synLabel { font-size: inherit; }
.wlSyn .syn { font-size: inherit; color: var(--muted); }
.wlSyn .synDot { font-size: inherit; }
/* Smaller pips than the study card's own — a whole column of these next to
running text needs to read as a glance, not as a second thing to parse. */
.wlLadder { display: flex; align-items: center; gap: 8px; }
.wlLadder .csBar { gap: 3px; }
.wlLadder .csSeg { width: 12px; height: 4px; }
.wlLadder .csSeg.csLate { width: 7px; }
.wlLadder .csMeta {
font-size: 0.74rem;
white-space: nowrap;
}
/* The 💡/📖 toggles, same look as the study card's own #refBtns, opening an
inline section below instead of a side panel. */
.wlRefRow {
display: flex;
gap: 8px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.wlRefBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--muted);
opacity: 0.5;
font-size: 1.15rem;
cursor: pointer;
transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.wlRefBtn:hover { opacity: 1; color: var(--text); }
.wlRefBtn.active {
opacity: 1;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Bulb and book side by side once both are open — each hidden body
collapses out of the flex row entirely (display: none, not just empty),
so one open + one closed still reads as a single full-width column. */
.wlRefBodies {
display: flex;
gap: 20px;
margin-top: 10px;
}
.wlRefBody {
flex: 1 1 0;
min-width: 0;
font-size: 0.86rem;
color: var(--muted);
}
.wlRefBody[hidden] { display: none; }
.wlRefBody .refSec { margin-top: 14px; }
.wlRefBody .refSec:first-child { margin-top: 0; }
/* The divider belongs between the two panels, not on the right one
unconditionally — the sibling selector only matches when BOTH are
visible (an immediately-preceding, also-not-hidden left body), so a
book-only or bulb-only row stays a single plain column. */
.wlRefBody-left:not([hidden]) + .wlRefBody-right:not([hidden]) {
border-left: 1px solid var(--border);
padding-left: 20px;
}
@media (max-width: 700px) {
/* Not enough width for two real columns at phone/narrow-panel size — same
"drop below instead of squeezing" idea as Study's own two side cards,
just at a tighter breakpoint since a Wordlist row is already narrower
than the full page Study's cards compare against. */
.wlRefBodies { flex-direction: column; gap: 0; }
.wlRefBody-left:not([hidden]) + .wlRefBody-right:not([hidden]) {
border-left: 0;
padding-left: 0;
border-top: 1px solid var(--border);
padding-top: 14px;
margin-top: 14px;
}
}
/* ---- Cheat sheet ("шпаргалка") --------------------------------------------
A dense, scannable word list — as many newspaper-style columns as the
panel fits, each word paired with its gloss, muted and small since the
point is a glance-able whole screen, not a readable card. CSS multi-column
(not Grid) is the right tool here: the browser works out the column count
from the available width on its own, and column-rule gives the vertical
dividers for free — the same thing Grid's column-gap/border tricks exist
to approximate. */
/* Width is set inline per render (renderCheatsheetList) to exactly fit
however many 200px columns the row count actually calls for, then
centred with this auto margin — a short, topic-filtered list gets a
compact, centred block of columns instead of stretching a handful of
columns edge to edge across a full-width panel. A large list's width
still comes out at (near enough) the full available width on its own,
so it packs as many columns as fit exactly like before. */
.cshList {
column-width: 200px;
column-gap: 22px;
column-rule: 1px solid var(--border);
max-width: 100%;
margin: 0 auto;
}
.cshRow {
break-inside: avoid;
padding: 3px 0;
font-size: 0.86rem;
line-height: 1.4;
display: flex;
align-items: baseline;
overflow: hidden;
}
.cshWord { color: var(--text); font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.cshDot { color: var(--muted); flex: 0 0 auto; white-space: pre; }
/* A gloss too long for the column wraps by default, growing that one row
to two lines and breaking the dense, scannable point of the sheet —
truncated with an ellipsis instead, same call as a Wordlist row. */
.cshTr {
color: var(--muted);
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Full width: the whole point of the columns layout is using the screen,
not the ~780px measure ordinary reading sections keep for line length. */
#media.cheatsheet .mLayout { max-width: none; }
/* A section's standing note, printed once above the list. Quiet — it is a
provenance caveat, not a warning, and it must not compete with the first
question. */
.mNote {
font-size: 0.82rem;
line-height: 1.5;
color: var(--muted);
border-left: 2px solid var(--border);
padding: 2px 0 2px 10px;
margin: 0 0 14px;
}
/* Slices of a section — the Bundesland row over the naturalisation catalogue.
It scrolls sideways rather than wrapping into four lines of chips, and it
stays under the search box while the list moves, so the state you are on is
always on screen. */
/* overflow-x: auto quietly makes overflow-y auto as well, so a chip's top
border gets shaved unless the row is padded enough to clear it. */
.mScopes {
display: flex;
/* Wider than a plain flex gap needs to be: each chip's own ::before
brush border bleeds 3px outward past its box (inset: -3px, below) so
two neighbours only 6px apart had their outward-bled edges touching —
read as one doubled, stuck-together line rather than two separate
chips (user feedback, 2026-09-19). 12px leaves real daylight between
the two bled edges. */
gap: 12px;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 5px 1px 7px;
scrollbar-width: none;
}
.mScopes::-webkit-scrollbar { display: none; }
.mScopes.hidden { display: none; }
/* A chip sliced in half by the edge of the row reads as a rendering fault
rather than as "there is more this way". It dissolves instead, and only on
the side there is actually more on — a fade at the left when you are already
at the start would be a lie about the row. */
.mScopes.fadeR {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.mScopes.fadeL {
-webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
mask-image: linear-gradient(to right, transparent, #000 40px);
}
.mScopes.fadeL.fadeR {
-webkit-mask-image: linear-gradient(to right,
transparent, #000 40px, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(to right,
transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.mScope {
flex: 0 0 auto;
font: inherit;
font-size: 0.82rem;
color: var(--muted);
background: var(--card-bg);
position: relative;
border: none;
border-radius: 0 !important;
padding: 5px 12px;
cursor: pointer;
white-space: nowrap;
}
.mScope::before {
content: "";
position: absolute;
inset: -3px;
pointer-events: none;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
background-size: 40px 8px, 40px 8px, 8px 40px, 8px 40px;
background-image: var(--brush-h), var(--brush-h), var(--brush-v), var(--brush-v);
-webkit-mask-image: var(--brush-corner-mask);
mask-image: var(--brush-corner-mask);
-webkit-mask-composite: source-in;
mask-composite: intersect;
/* A whole row of these side by side repeats the same ink far more often,
per screen inch, than any standalone bordered button does -- at the
shared button opacity that repetition read as a heavier, more
aggressive black grid than a lone pill ever does (user feedback,
2026-09-19: "too aggressive... make it gray"). Dimmed here only, not
in --brush-h/-v themselves, so isolated buttons/cards keep their own
already-approved weight. */
opacity: 0.55;
}
.mScope:hover { color: var(--text); }
.mScope.on {
color: var(--text);
font-weight: 600;
background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
}
/* Outline-on-selected kept Herbarium-only -- see #settingsBtn.open's own
comment above. */
[data-design="editorial"] .mScope.on {
border-color: var(--accent);
}
/* A cumulative row lights every rung up to the one you chose, so the rung you
actually chose has to be told apart from the ones it drags along. */
.mLevel { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.mLevel.on { background: color-mix(in srgb, var(--accent) 8%, var(--card-bg)); }
.mLevel.cap {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* ---- Leben in Deutschland ---------------------------------------------- */
/* .mLidNum floats left (question number) so .mLidQ's text wraps around it
on the first line(s) and reclaims the full row width below it, same
reasoning/fix as .mHead/.mBadges above (user feedback, screenshot: a long
question left blank space under the number on its wrapped lines). */
.mLidNum {
float: left;
font-size: 0.72rem;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
border: 1px solid var(--border);
border-radius: 999px;
padding: 2px 8px;
margin: 2px 10px 6px 0;
}
.mLidQ { font-size: 0.99rem; overflow-wrap: anywhere; }
.mLidQG { font-size: 0.87rem; color: var(--muted); line-height: 1.4; margin: 4px 0 0; }
.mLidQG.alt { font-size: 0.84rem; margin-top: 1px; }
/* Persistent per-item mastery ladder (QUIZ_PROGRESS_KINDS: lid/idioms/abbr —
buildQuizMasteryLadder, 10-media-wordlist.js). Same look as .wlLadder (the
Wordlist's own compact spaced-repetition ladder) — small pips + a label,
in one row — but 3 segments for the quiz's own simpler "3-in-a-row" rule
instead of the 7-stage SRS ladder. Always a child of .mBadges (renderLid
builds a ladder-only .mBadges when the item carries no lvl/reg of its
own) so it sits to the right of the level/register badges, in that same
floated row — not a row of its own below the head (user feedback,
screenshot). Replaces the old plain "–/✓" mLidLearn badge. */
.mQuizLadder {
display: flex;
align-items: center;
gap: 6px;
}
.mQuizLadder .csBar { gap: 3px; }
.mQuizLadder .csSeg { width: 12px; height: 4px; }
.mQuizLadder .csMeta {
/* The label is always part of the ladder; the whole ladder (bar + label)
only appears while its card is hovered (always visible on touch). */
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.03em;
white-space: nowrap;
}
.mQuizLadder { opacity: 0; transition: opacity 0.15s ease; }
.mItem:hover .mQuizLadder, .mItem:focus-within .mQuizLadder { opacity: 1; }
@media (hover: none) { .mQuizLadder { opacity: 1; } }
/* Picture beside the answers, not on top of them. A third of the width is
enough to read an outline map or recognise a building, and it leaves the
four options where the eye already is. */
.mLidSplit {
display: flex;
align-items: flex-start;
gap: 14px;
margin-top: 11px;
}
.mLidSplit .mLidFig { flex: 0 0 33%; margin: 0; }
/* Beside a picture the options only get a third of the row, too narrow for
even two columns — one option per row keeps every row full on its own.
The three-class second selector is not decorative: .mOptsNarrow (below)
ties this rule on specificity, and sits later in the file, so without a
selector that outranks it a long-text question next to a picture would
silently get two cramped columns instead of one full-width column. */
.mLidSplit .mOpts,
.mLidSplit .mOpts.mOptsNarrow { flex: 1 1 auto; grid-template-columns: 1fr; min-width: 0; margin-top: 0; }
.mLidFig { margin: 10px 0 0; }
.mLidFig img {
display: block;
width: 100%;
max-height: 300px;
object-fit: contain;
object-position: top;
border-radius: 10px;
border: 1px solid var(--border);
background: #fff;
cursor: zoom-in;
}
.mLidFig figcaption { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
/* Click-to-zoom overlay, shared by every zoomable image. Fixed + centred
flex so the image scales to whichever viewport dimension is tighter,
never upscaled past its own natural size. */
#imgLightbox {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.85);
cursor: zoom-out;
}
#imgLightbox img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
/* In-app replacement for window.confirm — the browser's own dialog carries
the page origin instead of the app's name and cannot take the app's
colours, light or dark. Same fixed + centred overlay idiom as the image
lightbox above, but its own card rather than a bare image. */
#confirmDialog {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.55);
}
.dlgCard {
width: 100%;
max-width: 360px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
padding: 20px;
}
.dlgCard p {
margin: 0 0 18px;
color: var(--text);
font-size: 0.94rem;
line-height: 1.5;
}
.dlgBtns {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.dlgBtns button {
padding: 10px 18px;
font-size: 0.9rem;
}
.dlgOk { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); color: var(--bad); }
.dlgOk:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); }
/* Whole-app "you've been hydrating too fast" notice (see
showHydrateRateLimitOverlay, 00-core-state.js) -- blurs and dims
everything behind it rather than a small card over a dark scrim like
#confirmDialog, since the point is the entire app pausing, not just one
decision. Highest z-index in the app so it can never be hidden behind an
already-open dropdown/panel. */
#hydrateLimitOverlay {
position: fixed;
inset: 0;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
background: color-mix(in srgb, var(--bg) 55%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
#hydrateLimitOverlay.hidden { display: none; }
.hlCard p {
margin: 0 0 10px;
color: var(--text);
font-size: 1.3rem;
font-weight: 600;
}
.hlCount {
font-size: 2.6rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--accent);
}
/* The "read this section as one text" book view (mediaBookBtn) — renders
inline in #mediaBody exactly like Learn mode does (#media.learning above),
not a modal: a reading column at 80% of the actual screen width (not 80%
of the ordinary 780px list column — the .mLayout cap is lifted here so
the percentage means something), scrolling with the rest of #media (see
the comment at #media.learning .mLayout for why #media itself scrolls). */
#media.bookOpen .mLayout { flex: 1; min-height: 0; max-width: none; }
.mBookPane {
width: 80%;
margin: 0 auto;
padding: 4px 0 40px;
}
.mBookBody { color: var(--text); }
.mBookBody p {
margin: 0 0 1em;
font-size: 1rem;
line-height: 1.7;
}
.mBookBody h3 {
margin: 1.4em 0 0.6em;
font-size: 1.05rem;
font-weight: 700;
color: var(--muted);
text-align: center;
}
.mBookBody h3:first-child { margin-top: 0; }
.mBookLoading { color: var(--muted); font-style: italic; text-align: center; }
/* Reading-mode date strip (buildMediaBookTimeline, 10-media-wordlist.js) --
the most load-bearing years in this section's own narrative, at a glance
above the running text. Horizontal like .mScopes (a country's history
does not fit four lines of chips any better than a scope list does), but
a connected line rather than pills -- a timeline reads as a sequence, not
a set of independent choices. */
.mBookTimeline { margin: 0 0 1.6em; }
.mBookTimelineRow {
display: flex;
overflow-x: auto;
/* Same overflow-x-implies-overflow-y-auto gotcha as #topleft above --
explicit so this strip can't be vertically drag-scrolled either. */
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: none;
padding: 6px 4px 10px;
}
.mBookTimelineRow::-webkit-scrollbar { display: none; }
/* Same "only fade the side there is actually more on" convention as
.mScopes.fadeL/.fadeR above. */
.mBookTimelineRow.fadeR {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.mBookTimelineRow.fadeL {
-webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
mask-image: linear-gradient(to right, transparent, #000 40px);
}
.mBookTimelineRow.fadeL.fadeR {
-webkit-mask-image: linear-gradient(to right,
transparent, #000 40px, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(to right,
transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.mBookTimelineItem {
flex: 0 0 auto;
width: 148px;
padding: 0 14px 0 0;
position: relative;
}
.mBookTimelineItem::before {
content: "";
position: absolute;
top: 6px;
left: 0;
right: 14px;
height: 2px;
background: var(--border);
}
.mBookTimelineItem::after {
content: "";
position: absolute;
top: 2px;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
}
.mBookTimelineItem:last-child { padding-right: 0; }
.mBookTimelineItem:last-child::before { display: none; }
.mBookTimelineYear {
display: block;
margin-top: 18px;
font-size: 0.8rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--accent);
}
.mBookTimelineLabel {
display: block;
margin-top: 2px;
font-size: 0.78rem;
line-height: 1.3;
color: var(--muted);
}
/* Back-to-top: a direct child of , clear of every view's own scroll
container, so `fixed` always anchors to the viewport corner regardless of
which view is open. app.js toggles `.hidden` on/off scroll. */
#toTopBtn {
position: fixed;
right: max(18px, env(safe-area-inset-right));
bottom: max(18px, env(safe-area-inset-bottom));
z-index: 40;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 0 !important;
border: none;
background: var(--card-tint);
backdrop-filter: blur(var(--card-blur));
-webkit-backdrop-filter: blur(var(--card-blur));
color: var(--muted);
box-shadow: var(--card-shadow);
cursor: pointer;
transition: color 0.15s ease, transform 0.1s ease-out;
}
#toTopBtn::before {
content: "";
position: absolute;
inset: -3px;
pointer-events: none;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
background-size: 40px 8px, 40px 8px, 8px 40px, 8px 40px;
background-image: var(--brush-h), var(--brush-h), var(--brush-v), var(--brush-v);
-webkit-mask-image: var(--brush-corner-mask);
mask-image: var(--brush-corner-mask);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
#toTopBtn:hover { color: var(--text); }
#toTopBtn:active { transform: scale(0.92); }
#toTopBtn svg { width: 20px; height: 20px; display: block; }
/* Four short options — "14/16/18/20", four country names — belong side by
side; four full sentences belong stacked. Sizing that used to be a JS
headcount (are every option AND every gloss under N characters?) rather
than a layout: one long gloss out of four options was enough to knock the
whole question back to full-width rows, which is what made "Le
Royaume-Uni" next to "The United Kingdom" print four tall boxes instead of
a compact grid. A flex-wrap row lets each option claim only the width its
own content needs and wrap on its own — no threshold to get wrong, and it
degrades the same way for a mix of short and long options instead of
picking one look for all four. */
/* A grid, not a wrapping flex row: with four options, flex-wrap fits as many
as the width allows and leaves the rest — three across, one stranded alone
on its own row. Fixed column counts per breakpoint keep every row full:
four across, two-and-two, or one-per-row, never a lonely leftover. */
.mOpts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 11px; }
.mOpt {
min-width: 0;
max-width: 100%;
}
/* Four full-sentence options crammed into quarter-width columns wrap to three
or four lines each and read as a wall of text — two columns gives them
room to breathe. renderLid adds this class when the longest option is long
(see app.js). Two classes beats the one-class base rule on specificity, so
it wins at any width without needing source-order games — except inside
the two breakpoints below, where the narrower viewport itself decides the
column count regardless of content length, so both classes are listed
there explicitly to override it back down. */
.mOpts.mOptsNarrow { grid-template-columns: repeat(2, 1fr); }
/* Even two columns can be too tight: an option long enough to wrap to two
lines next to a one-line option leaves the short cell with dead space
below it, and the pair reads as lopsided rather than merely dense.
renderLid adds this class instead of mOptsNarrow when the longest option
clears a higher bar (see app.js) — one option per row, so every row's
height answers to its own content instead of its row-mate's. Placed after
.mOptsNarrow on purpose: equal specificity (two classes each), so source
order decides and this wins for the cards that need it. */
.mOpts.mOptsSingle { grid-template-columns: 1fr; }
/* Below 900px four columns run out of room for real answer text; two-and-two
keeps every row full. Placed after the base rule on purpose — equal
specificity means source order decides, and a copy sitting earlier in the
file (e.g. inside an unrelated breakpoint block above) would quietly lose
to the unconditional four-column rule above. mOptsSingle is repeated here
so it still wins down to 1fr instead of being dragged back to two columns. */
@media (max-width: 900px) {
.mOpts,
.mOpts.mOptsNarrow { grid-template-columns: repeat(2, 1fr); }
.mOpts.mOptsSingle { grid-template-columns: 1fr; }
}
/* Four pictures to choose between sit in a grid instead of a stack. */
.mOptsPic {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
/* The catalogue's pictures are scans at wildly different aspect ratios — a
tall coat of arms next to a wide map. A fixed box with `contain` keeps the
four tiles the same size, so no option is bigger, and therefore louder,
than the others. */
/* min-width: 0 resets the flex-wrap sizing meant for text options — a grid
track already has its own width from grid-template-columns, and letting
the 150px flex min-width leak in here would force four tracks wider than
some viewports can fit. */
.mOptsPic .mOpt { padding: 8px; align-items: center; justify-content: space-between; min-width: 0; }
.mOptsPic img {
display: block;
width: 100%;
height: 128px;
object-fit: contain;
border-radius: 6px;
}
.mOptTag { font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-top: 6px; }
.mOpt {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
font: inherit;
font-size: 0.92rem;
line-height: 1.4;
text-align: start;
color: var(--text);
background: var(--card-bg);
position: relative;
border: none;
border-radius: 0 !important;
padding: 9px 12px;
cursor: pointer;
}
.mOpt::before {
content: "";
position: absolute;
inset: -3px;
pointer-events: none;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
background-size: 40px 8px, 40px 8px, 8px 40px, 8px 40px;
background-image: var(--brush-h), var(--brush-h), var(--brush-v), var(--brush-v);
-webkit-mask-image: var(--brush-corner-mask);
mask-image: var(--brush-corner-mask);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.mOpt:disabled { cursor: default; }
/* A long compound like "Premierministerin/Premierminister" has no space for
the browser to break on, so without this it either overflows the card or
gets cut mid-word with no visual cue. overflow-wrap allows the break;
hyphens adds the "-" that makes it read as one, so it looks deliberate.
min-width:0 is load-bearing, not decorative: .mOpt is a column flexbox, and
a flex item's default min-width is its content's unwrapped width — without
overriding it, overflow-wrap never even gets the chance to fire, and the
text spills out past its grid column into the neighbouring option. */
.mOptText {
display: block;
width: 100%;
min-width: 0;
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
}
.mOptGlossWrap { display: block; width: 100%; }
.mOptGloss { font-size: 0.83rem; color: var(--muted); line-height: 1.35; margin: 1px 0 0; }
/* After the press: the right answer is named, the rest recede, and a wrong
pick is marked as well so you can see what you actually chose. The tick and
the cross carry the verdict on their own — colour alone would leave a
red-green blind learner reading four identical boxes. */
.mOpt.right,
.mOpt.wrong { position: relative; padding-inline-end: 34px; opacity: 1; }
.mOpt.right::after,
.mOpt.wrong::after {
content: "";
position: absolute;
inset-inline-end: 11px;
top: 8px;
width: 15px;
height: 15px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.mOpt.right::after {
background-color: var(--accent);
-webkit-mask-image: var(--check-mark-mask);
mask-image: var(--check-mark-mask);
}
.mOpt.wrong::after {
background-color: var(--bad);
-webkit-mask-image: var(--cross-mark-mask);
mask-image: var(--cross-mark-mask);
}
.mOptsPic .mOpt.right,
.mOptsPic .mOpt.wrong { padding-inline-end: 8px; }
.mOptsPic .mOpt.right::after,
.mOptsPic .mOpt.wrong::after { top: 6px; inset-inline-end: 8px; }
/* Real, solid colour borders here, not the hand-drawn brush -- correctness
feedback needs an actual green/red, which (like --accent generally) can't
be baked into the fixed-ink brush SVG; the brush ::before is suppressed
for these two states so it doesn't double up with this one. */
.mOpt.right,
.mOpt.wrong { border-style: solid; border-width: 2px; }
.mOpt.right::before,
.mOpt.wrong::before { content: none; }
.mOpt.right {
border-color: var(--accent);
padding-block: 8px;
background: color-mix(in srgb, var(--accent) 16%, var(--card-bg));
font-weight: 600;
}
.mOpt.wrong {
border-color: var(--bad);
padding-block: 8px;
background: color-mix(in srgb, var(--bad) 14%, var(--card-bg));
}
.mOpt.wrong .mOptText { text-decoration: line-through; }
.mOpt.off { opacity: 0.5; }
.mLidWhy {
margin-top: 11px;
padding-left: 11px;
border-left: 2px solid var(--accent);
}
.mLidWhyDe { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.mLidWhyG { margin: 3px 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.mLidWhyG.alt { margin-top: 1px; font-size: 0.82rem; }
/* The interview card for questions about the candidate. No options to press,
so the whole card is visible at once and the two blocks have to be told
apart by eye alone: a label above each, and a rule down the side in a
different colour — accent for what is being assessed, border-grey for the
model answer, which is the lesser of the two despite being the longer. */
/* Reuses .mLidNum's own float:left (see the "Leben in Deutschland" section
above) for the same wrap-around-the-number-then-reclaim-full-width fix. */
.mPersoQ { font-size: 0.99rem; overflow-wrap: anywhere; }
.mPersoBlock {
margin-top: 11px;
padding-left: 11px;
border-left: 2px solid var(--border);
}
.mPersoListen { border-left-color: var(--accent); }
.mPersoLabel {
margin: 0 0 3px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.mPersoText { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.mPersoGloss { margin: 3px 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.mPersoGloss.alt { margin-top: 1px; font-size: 0.82rem; }
/* Loud on purpose. Reciting the model answer is the way this card is misused,
and the warning has to survive being skim-read. */
.mPersoWarn {
margin: 10px 0 0;
font-size: 0.8rem;
line-height: 1.45;
color: var(--bad);
}
.mPersoWarn::before { content: "⚠ "; }
/* The topic title: German first, then each active study-from language's
name inline after a "·" — the exact shape renderAbbr already uses for
"z. B. · zum Beispiel" (mAbbrShortT/mAbbrFullT), reused here since it's
the same pattern (a short target-language label plus its gloss). */
.mSchrTitleTr {
font-weight: 400;
color: var(--muted);
font-size: 0.86em;
}
.mSchrTitleDe + .mSchrTitleTr::before,
.mSchrTitleTr + .mSchrTitleTr::before {
content: "·";
margin: 0 0.5em;
opacity: 0.65;
}
/* The Goethe-Schreiben card: an exam prompt (task+points, accent rule, the
way mPersoListen marks "what's being assessed") followed by up to three
model texts (grey rule, same shape as mPersoBlock/mPersoText/mPersoGloss —
deliberately identical so the two exam-prep card kinds read as one family).
With 2+ versions, .mSchrTabs (styled above under "level switch") replaces
each version's own inline label and only the selected one's .mSchrVersion
stays visible (see 14b-goethe-schreiben.js); a lone version keeps its
numbered label and optional style descriptor inline instead. */
.mSchrTabs { margin-top: 11px; }
.mSchrTask {
margin-top: 4px;
padding-left: 11px;
border-left: 2px solid var(--accent);
}
.mSchrPoints { margin: 8px 0 0; padding: 0; list-style: none; }
.mSchrPoint { margin: 6px 0 0; }
.mSchrPointWho {
margin: 0 0 2px;
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
}
.mSchrVersion {
margin-top: 11px;
padding-left: 11px;
border-left: 2px solid var(--border);
}
/* Right after the tab strip, that 11px default would stack on top of the
tabs' own 11px gap from the task above — tighten it so the tabs and the
content they control read as one connected control-plus-pane unit. */
.mSchrTabs + .mSchrVersion { margin-top: 8px; }
.mSchrVersionHead { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mSchrLabel {
margin: 0 0 3px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.mSchrStyle { margin: 0 0 3px; font-size: 0.72rem; color: var(--muted); font-style: italic; }
.mSchrText { margin: 0; font-size: 0.9rem; line-height: 1.45; }
/* A version's German text and its translation are each split into one
per paragraph (see appendSchrParas) — space consecutive ones apart, but
only from their own kind, so the translation block still reads as a
distinct group right after the German one rather than one long run. */
.mSchrText + .mSchrText { margin-top: 8px; }
.mSchrGloss { margin: 3px 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.mSchrGloss + .mSchrGloss { margin-top: 8px; }
.mSchrGloss.alt { margin-top: 1px; font-size: 0.82rem; }
.mSchrGloss.alt + .mSchrGloss.alt { margin-top: 8px; }
/* Task/bullet translations use the shared .mInlineGloss (see .mDe above) —
mSchrGloss's stacked shape is for the longer model-text versions only. */
.mSchrWarn {
margin: 10px 0 0;
font-size: 0.8rem;
line-height: 1.45;
color: var(--bad);
}
.mSchrWarn::before { content: "⚠ "; }
@media (max-width: 640px) {
/* Bumped well past the old flat 60px (user feedback, repeated: the Next
button still read as flush against the bottom of the screen) and now
also grows with env(safe-area-inset-bottom) -- iOS Safari's own
collapsible toolbar/home-indicator area isn't reserved layout space the
way a notch is, so a flat px value alone doesn't reliably clear it. */
#media { padding: 6px 12px calc(110px + env(safe-area-inset-bottom)); }
.mItem { padding: 12px 13px; border-radius: 12px; }
.mWho { min-width: 0; flex-basis: 62px; }
.mOptsPic { grid-template-columns: repeat(2, 1fr); }
.mOpts,
.mOpts.mOptsNarrow { grid-template-columns: 1fr; }
/* Too narrow for two columns: the picture goes back on top, but capped so it
is a picture and not a page. */
.mLidSplit { flex-direction: column; }
.mLidSplit .mLidFig { flex-basis: auto; width: 100%; }
.mLidSplit .mLidFig img { max-height: 210px; }
/* The 80% reading column (see .mBookPane above) is deliberate on a wide
screen, where the gutters keep a line from running edge to edge — on a
phone the same 80% just wastes the screen on two empty margins, so the
book view goes full width here instead (#media's own 12px padding just
above is still there, so text isn't glued to the screen edge). */
.mBookPane { width: 100%; }
}
/* Pastel swatches keep their soft look in dark mode (user request 2026-09-29):
just a gentle dim of the light hex, no saturation boost. Must stay last. */
:root[data-theme="dark"][data-a1="peach"] { --accent: #d08f4d; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="peach"] { --accent: #d08f4d; }
}
:root[data-theme="dark"][data-a1="apricot"] { --accent: #d4a85c; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="apricot"] { --accent: #d4a85c; }
}
:root[data-theme="dark"][data-a1="butter"] { --accent: #d1bb78; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="butter"] { --accent: #d1bb78; }
}
:root[data-theme="dark"][data-a1="cream"] { --accent: #d5c38c; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="cream"] { --accent: #d5c38c; }
}
:root[data-theme="dark"][data-a1="sage"] { --accent: #749067; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="sage"] { --accent: #749067; }
}
:root[data-theme="dark"][data-a1="powder"] { --accent: #90bace; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="powder"] { --accent: #90bace; }
}
:root[data-theme="dark"][data-a1="sky"] { --accent: #7b9ec1; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="sky"] { --accent: #7b9ec1; }
}
:root[data-theme="dark"][data-a1="periwinkle"] { --accent: #7888db; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="periwinkle"] { --accent: #7888db; }
}
:root[data-theme="dark"][data-a1="lilac"] { --accent: #ad9dc4; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="lilac"] { --accent: #ad9dc4; }
}
:root[data-theme="dark"][data-a1="lavender"] { --accent: #baafce; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="lavender"] { --accent: #baafce; }
}
:root[data-theme="dark"][data-a1="orchid"] { --accent: #9f78b6; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="orchid"] { --accent: #9f78b6; }
}
:root[data-theme="dark"][data-a1="mauve"] { --accent: #8c6490; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="mauve"] { --accent: #8c6490; }
}
:root[data-theme="dark"][data-a1="blossom"] { --accent: #c87488; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="blossom"] { --accent: #c87488; }
}
:root[data-theme="dark"][data-a1="petal"] { --accent: #d4aab8; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="petal"] { --accent: #d4aab8; }
}
:root[data-theme="dark"][data-a1="slate"] { --accent: #3f454b; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="slate"] { --accent: #3f454b; }
}
:root[data-theme="dark"][data-a1="seafoam"] { --accent: #91b8a9; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme])[data-a1="seafoam"] { --accent: #91b8a9; }
}
:root[data-a1="seafoam"] { --accent: #a9d6c4; }
/* ---- hover = glow, not underline (user request 2026-09-29) ---------------
The pencil-underline mask now marks ONLY selected/open/active states.
A plain hover (on something not already selected) suppresses that
underline and lights the label with a soft accent glow instead. Must
stay last so it wins the cascade over the per-component hover rules. */
#settingsTray .langDropBtn:hover:not(.open) .settingLbl::after,
#settingsTray #themeToggle:hover .settingLbl::after,
#settingsTray .settingToggle:hover:not(.active):not([aria-pressed="true"]) .settingLbl::after,
#settingsTray .settingDanger:hover .settingLbl::after,
.ldOpt:hover:not([aria-checked="true"]):not(.current) .ldEndo::before,
.viewBtn:hover:not(.active) .viewBtnLabel::after,
#modePanel .modeBtn:hover:not(.active) .modeBtnLabel::after,
#levelPanel .levelBtn:hover:not(.active) .levelBtnLabel::after,
.formShowMe:hover::after,
.gTocLink:hover:not(.on) .gTocTitle::after,
.mTocSong:hover:not(.on) .mTocName .gTocUL {
transform: scaleX(0);
}
.settingLbl, .ldEndo, .viewBtnLabel, .modeBtnLabel, .levelBtnLabel,
.formShowMe, .gTocTitle, .mTocName {
transition: text-shadow 0.2s ease;
}
#settingsTray .langDropBtn:hover:not(.open) .settingLbl,
#settingsTray #themeToggle:hover .settingLbl,
#settingsTray .settingToggle:hover:not(.active):not([aria-pressed="true"]) .settingLbl,
.ldOpt:hover:not([aria-checked="true"]):not(.current) .ldEndo,
.viewBtn:hover:not(.active) .viewBtnLabel,
#modePanel .modeBtn:hover:not(.active) .modeBtnLabel,
#levelPanel .levelBtn:hover:not(.active) .levelBtnLabel,
.formShowMe:hover,
.gTocLink:hover:not(.on) .gTocTitle,
.mTocSong:hover:not(.on) .mTocName {
text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
#settingsTray .settingDanger:hover .settingLbl {
text-shadow: 0 0 12px color-mix(in srgb, var(--bad) 45%, transparent);
}
.ldCopyPrimaryBtn:hover,
.wordPreviewRefLink:hover {
text-decoration: none;
text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* ---- borders: barely-visible glowing line (user request 2026-09-29) -------
Replaces the hand-wobbled brush-tile borders everywhere. Each bordered
component's ::before is now a plain box with a 1px hairline and a soft
halo, both derived from --text so they follow light/dark and any Design.
Must stay last. */
#settingsBtn::before,
#accountBtn::before,
.langDropBtn::before,
#viewNav::before,
#cshLevelNav::before,
.mSchrTabs::before,
#schrAufgabeNav::before,
.mTaleTrTabs::before,
#card::before,
#btnBack::before,
#btnUnknown::before,
#btnKnown::before,
#btnForward::before,
#btnToCurrent::before,
.lsChip::before,
#sessionInputWrap::before,
.gTableWrap::before,
.gHints::before,
.mSheet::before,
.mItem::before,
.mLearnLimitInputWrap::before,
.wlSortToggle::before,
.wlSortDirBtn::before,
.wlSortTypeBtn::before,
.wlTopicBtn::before,
#mediaLearnBtn::before,
#mediaBookBtn::before,
.mScope::before,
#toTopBtn::before,
.mOpt::before {
inset: 0 !important;
background: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent),
0 0 7px color-mix(in srgb, var(--text) 9%, transparent);
}
#mediaSearch {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent),
0 0 7px color-mix(in srgb, var(--text) 9%, transparent);
}
/* contain:paint boxes clip anything drawn outside them -- glow inward. */
#card::before, .mSheet::before, .mItem::before {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent),
inset 0 0 7px color-mix(in srgb, var(--text) 9%, transparent);
}
/* Right-to-left targets (Hebrew, Arabic, Persian, Pashto...) in the Abbreviations,
Idioms and Wordlist cards: the text itself still runs right-to-left (the
dir="auto" on each element handles that), but every line starts at the LEFT
edge like the rest of the card instead of hugging the right one. A plain
`text-align: start` on a dir="auto" RTL element resolves to the right, so the
alignment is pinned to left explicitly and inherited by the whole card. */
.mIdiom, .mAbbr, .wlRow { text-align: left; }
.mIdiom [dir="auto"], .mAbbr [dir="auto"], .wlRow [dir="auto"] { text-align: left; }
/* Growing standalone answer box (a