/* ============================================================ FOLIO — study companion Design system carried over from the source Anki collection: warm paper, indigo + Chinese vermilion, serif display, monospace eyebrows. ============================================================ */ /* The webfonts are self-hosted and declared in fonts.css, which index.html links ahead of this file. They were an `@import` here until Sep 2026; that single line blocked every script on the page behind a third-party request (12,949 ms to first paint with Google unreachable, against 437 ms without it). Do not reintroduce one — see the reasoning in index.html's head and in .claude/build-fonts.js. */ /* ---------- tokens ---------- */ :root{ --paper:#F7F6FB; --paper-2:#EBE9F5; --card:#FDFDFF; --ink:#1D1B29; --ink-soft:#514D68; --ink-faint:#918CA8; --rule:#DEDAEE; /* --ink-quiet: QUIET, BUT NOT BELOW THE BAR. See the CONTRAST block below. --ink-faint is 3.0-3.5:1 and is right for what it was written for — an eyebrow, a caption, a source line — but it had spread to things that are not captions at all: the primary nav labels, a page's own 15.5px description, the card counts a reader picks a collection by, and the single control that is the only route to the About page. A reader with mild low vision does not know the high-contrast mode exists, so those cases take this instead. The value is not a new guess: it is the one `body.hc` already solves to, each hue scaled toward the ink until it clears 4.6:1 against --paper-2, the darkest of the three papers. */ --ink-quiet:#69657E; /* THE OPAL'S PERIWINKLE, WALKED DOWN TO THE BAR — the same treatment the red below gets, and needed for the same reason. `--indigo` is the eyebrows, the nav labels, the glossary links and the FILL of every primary button, so as a default it is running text and a control at once. As a collectible the stone wore #6E7FC4 / #8A9BDD, which measured 3.19 and 2.24 on `--paper-2` and put white on a button at 3.82; promoting it unchanged took `test-a11y.js`'s high-contrast sweep from green to 20 failures and roughly doubled the default mode's standing backlog. These are those two hues at the same chroma, deep enough to clear 4.5 on all three papers: --indigo 6.89 / 6.51 / 5.83 and 7.0 for white on it, --indigo-bright 5.48 / 5.18 / 4.64. Night needs none of this — reversed out of a dark card the stone's own values are already 8.44 and 10.84 — so it keeps them exactly. */ --indigo:#45549C; --indigo-bright:#5263B0; --indigo-wash:#E9ECFA; --ochre:#9A7C55; /* THE ANSWER TERM'S RED IS A DEEP ROSE, NOT THE STONE'S OWN PINK (Sep 2026, on request: "red text should have a deeper red color so there's more contrast"). Opalite wore #C081A8, which is the milky pink an opal actually flashes and measures 2.98:1 on --card, 2.52 on --paper-2 — a long way under the bar for what is the answer to every card and every footnote marker on the site. This is the same hue walked down until it clears 4.5 on all three papers: 6.10 on --card, 5.76 on --paper, 5.17 on --paper-2, against the OLD default folio vermilion's 4.73 / 4.47 / 4.00. It is measurably the highest-contrast red Folio has ever shipped as a default, and still an opal's rose rather than a pillar-box red. Keep any replacement above 4.5 on --paper-2, which is the darkest of the three. */ --zh:#AE3350; --zh-wash:#F9E9EC; --geo:#5FA5A8; --good:#4E9B7E; /* an UNDISCOVERED glossary term (Aug 2026, on request). This teal began life as --bknote, the Library books' own note colour, and the two roles were SWAPPED: a book's markers now take the card's vermilion (--zh) like every other citation on the site, and the hue that distinguished them moved to the one mark that had been borrowing --ochre — the gold of a card's blank. The reasoning that chose the hue holds either way: every neighbouring token is spoken for (--zh is a citation marker and the answer term, --indigo a glossary link, --good completion, --ochre the blank), and this teal is none of them, far enough round the wheel from --good's forest green (hue ~186 against ~152) to read as another thing rather than as a shade of the same one. */ --newterm:#1E7A85; /* An ADMIN-ONLY tab in the nav (Aug 2026, on request: "make it so that pages that are visible to admin only appear with a different color in the menu bar than public pages"). A magenta-purple at hue ~305, which is the quarter of the wheel nothing else here holds — --indigo is ~258, --newterm ~186, --good ~152, --ochre/--geo ~35, --zh ~5 — so it reads as another KIND of destination rather than as a shade of the active state. Measured against every paper the nav sits on rather than eyeballed: 5.6–7.2 in light, 6.4–7.6 at night, so it needs no `body.hc` row of its own (that block re-tones the tokens that fall SHORT, and this one does not). */ --admin:#8E2F86; --han:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --serif:"Lora", Georgia, "Times New Roman", serif; --display:"Nunito Sans", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --sans:"Nunito Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; --shadow-sm:0 1px 2px rgba(29,27,41,.05); --shadow-md:0 1px 2px rgba(29,27,41,.05), 0 8px 28px rgba(29,27,41,.06); --shadow-lg:0 2px 4px rgba(29,27,41,.06), 0 18px 50px rgba(29,27,41,.10); --bar-h:60px; /* The two bars the Atlas has to sit above. --tabbar-h is 0 until the phone's bottom tab bar appears and --timebar-h grows when the timeline goes to two rows, so .globe-stage and .atlas-timebar can each be written ONCE against them instead of being re-stated per breakpoint (and drifting apart). */ --tabbar-h:0px; --timebar-h:96px; /* Reading-text size (Settings → Appearance → Text size, Aug 2026). A multiplier, applied ONLY by the rules that size the prose a reader actually reads — a card's question and background, a glossary popup, a place panel — each written `calc( * var(--fs))` so every one keeps its own relative size. Deliberately NOT a whole-site zoom: 522 font sizes in this file are px and the shell is laid out against them, so scaling the lot would break the chrome to enlarge the text. Search `var(--fs)` for the full set; the setting's wording names exactly those surfaces. */ --fs:1; --ease:cubic-bezier(.2,.7,.2,1); } body.night{ --paper:#131220; --paper-2:#0C0B16; --card:#1C1A2C; --ink:#EFEDFA; --ink-soft:#B6B1D0; --ink-faint:#827CA0; --rule:#302C48; --ink-quiet:#8C87A8; /* see the light value — night's own hc figure, 4.98:1 on --card */ --indigo:#A6B4F0; --indigo-bright:#C2CCFF; --indigo-wash:#20203A; --ochre:#C3A47A; /* the red walks the OTHER way at night — see the light value. Reversed out of a dark card the stone's #E4A9CC already measured 8.79:1, so deepening it would have COST contrast; what it lacked was red, sitting at hue ~320 where the light value is ~345. This is that hue at the same weight: 8.89:1 on --card, so it reads as a red and is a shade clearer than before. */ --zh:#EFA8B8; --zh-wash:#32202A; --geo:#7FCACD; --good:#75C6A4; --newterm:#5FC2CE; --admin:#CF93DC; --shadow-sm:none; --shadow-md:0 10px 30px rgba(0,0,0,.35); --shadow-lg:0 20px 60px rgba(0,0,0,.5); } /* ============================================================ CONTRAST (Aug 2026, on request: "check whether colour contrasts have a ratio of at least 4.5:1, and if they don't, add a high contrast mode in the settings") ============================================================ Measured rather than assumed — every foreground token against every paper it is ever set on, by the WCAG 2.x relative-luminance formula. What came back: LIGHT ink 15.9 · ink-soft 8.4 · indigo 9.9 · indigo-bright 6.5 — comfortable ink-faint 3.0–3.5 · ochre 3.3–3.9 · geo 3.0–3.5 — BELOW the bar everywhere zh 4.1–4.8 · good 4.1–4.8 — below it on paper-2, above on card NIGHT everything 4.6+ except ink-faint on --card, at 4.19 So the quiet tokens are the whole of the problem, and they are quiet ON PURPOSE — an eyebrow, a caption, a source line. Re-toning them for everyone would flatten the typographic hierarchy the design is built on, which is exactly the trade a high-contrast MODE exists to let the reader make for themselves. The values below are solved, not eyeballed: each is its own hue scaled toward the ink until it clears 4.6:1 against `--paper-2`, the darkest of the three papers, so it clears the bar on all three. One failure was NOT left to the mode, because it is a primary control rather than a caption: in night mode `.btn` was #FFF on the light-lavender --indigo, at 2.29:1. That is fixed outright below. …AND SIX MORE WERE PROMOTED IN SEP 2026, on the same principle (found in the site review, where test-a11y.js reported 110 shortfalls in the DEFAULT mode — it only ever FAILED on the hc sweep, so the number was being printed and not read). The mode's own reasoning holds for a caption and does not hold for these, because a reader with mild low vision does not know the mode exists and these are not captions: .tab .tab-label the primary nav labels, on every page .page-head p a page's own 15.5px description — running body text .home-about the ONLY route to the About page anywhere on the site .node-num / .node-count / .group-count the card counts a collection is chosen by They take `--ink-quiet` (declared at the top of this file), which is not a new guess: it is the value `body.hc` already solves to. `--ink-faint` keeps every genuine caption, so the hierarchy the design rests on is intact and the mode still has work to do. */ /* The ink is for a FILLED button — on night's light-lavender --indigo it reads 7.9:1 against #fff's 2.29. A .ghost button is transparent, so the same dark ink puts near-black on the dark card and the label disappears altogether: found on the new Common Thread board's Shuffle/Deselect, and it was every ghost button on the site in dark mode (the True or False and Timeline results' "Home" among them). The :hover line below has always carried the :not(.ghost) — the exemption was intended here too and was missed. A ghost keeps .btn.ghost's own var(--indigo), which is that same light lavender ON the dark card. */ body.night .btn:not(.ghost){color:var(--paper);} body.night .btn:not(.ghost):hover{color:var(--paper);} /* RE-SOLVED Sep 2026 WHEN THE DEFAULT PALETTE CHANGED. These are one set of values applied to every theme, and they always were the DEFAULT theme's own solved values — so when Opalite replaced Folio the row had to move with it, or the mode would have gone on imposing the old warm palette's greys and golds on a cool one (and `--zh` at #BA4038 now measures 4.51 on the new --paper-2, which is under the bar the row exists to clear, and BELOW the base red it replaces — a high-contrast mode that lowers contrast). Each is its own hue scaled toward the ink until it clears 4.6:1 on --paper-2, the darkest of the three papers: ink-faint 4.65, ochre 4.84, geo 4.80, zh 6.05, good 4.89, newterm 6.18. */ body.hc:not(.night){ --ink-faint:#69657E; --ochre:#7A6142; --geo:#3A6E71; --zh:#9E2B49; --good:#376F58; --newterm:#155E68; } body.hc.night{ --ink-faint:#8C87A8; } /* 4.98:1 on the new night --card */ /* …and the borders, which are not text and so are not in the table above, but are what tells one card from the next. A hairline at 1.2:1 is invisible to a reader who needs this mode at all. */ body.hc:not(.night){ --rule:#B5B0C9; } body.hc.night{ --rule:#4E4A6E; } body.hc .btn,body.hc .card,body.hc .set-card{border-width:1.5px;} /* the gold collection icon is 2.6:1 on card — decorative, but it is the only thing naming the subject */ body.hc:not(.night) .coll-ic{color:#81661E;} /* A QUIET TOKEN OVER A TINTED BACKGROUND IS NOT COVERED BY THE RE-TONE ABOVE, and the crossword is the site's only case (Aug 2026, found the day test-a11y.js learned to read a `color(srgb …)` computed value — until then it could not parse a `color-mix` BACKGROUND at all, walked past it to the plain paper behind, and reported these three as clean). `--ink-faint` is solved against `--paper-2`, the darkest of the three papers. The SELECTED clue and the SELECTED square are neither: each is that paper with 12–14% indigo mixed into it, which is enough to take the clue number and the enumeration to 3.78 and the square's number to 4.24. They are the clue's own text rather than furniture once a reader is in this mode, so they take `--ink-soft`, which is a solved ink rather than a quiet one and clears the bar on every surface the grid uses. */ body.hc .xw-cn, body.hc .xw-len, body.hc .xw-n{color:var(--ink-soft);} /* THE DIFFICULTY ROW'S OWN TEXT is the same case one surface over (Aug 2026, with the word and the community figure — the stars themselves are SVG and so are not measured at all, which is why that row had nothing here until it gained words). Both are `--indigo` held down by opacity so they label the row rather than competing with the question above it, and measured over all six themes in both modes that is 1.77–3.28 for the word and 2.06–4.70 for the figure — quiet on purpose, and short of the bar in every one of the twelve. Opacity alone does not rescue them either: at full strength the indigo is still 3.32 on gazette's dark card and 4.70 on marble's light one. So in this mode they stop being a quiet colour and become ordinary ink, which is what the re-tone above does for every other one. */ body.hc .card-stars .cs-lbl, body.hc .card-stars .cs-pct{color:var(--ink); opacity:1;} /* ...and the successive-relearning caption beside them, which took the same indigo at the same half strength in Sep 2026 and therefore inherits the same failure. Its `.done` state is the gold, which is re-toned by the rules beside it rather than here. */ body.hc .crit-row:not(.done) .crit-lbl{color:var(--ink); opacity:1;} /* THE GRADE BAR IS THE SAME CASE AGAIN AND IS THE SITE'S MOST-USED CONTROL (Aug 2026, found the day `test-a11y.js` first reached a study card — the route list deliberately has no `study`, so every one of these had been failing since the bar was built and nothing had ever measured them). All three of its text runs are WHITE, at 1, .82 and .6, over four saturated backgrounds, and measured over both modes not one of the twelve combinations clears 4.5: the label 2.25–4.56, the interval 1.97–3.64, the key 1.66–2.69. THE FIX IS THE BACKGROUND RATHER THAN THE INK, because the ink is what carries the meaning here: the four colours ARE the four answers, so re-toning them to a common dark would take the grade bar's whole language away. With all three runs at full-strength white the darkening needed is gentle — a factor of .67 to .99 — so each button keeps its own hue and simply stops being a pastel. Solved per colour and per mode against white; every one lands 4.61–4.71. Written `body.hc:not(.night)` / `body.hc.night` (0,4,0) rather than `body.hc` alone, since `.night .grade.again` is (0,3,0) and sits a thousand lines BELOW this block — at equal specificity it would win on source order and the night bar would be unchanged. */ body.hc .grade .gl, body.hc .grade .gi, body.hc .grade .gk{color:#fff;} body.hc:not(.night) .grade.again{background:#C54C45;} body.hc:not(.night) .grade.hard{background:#A2672B;} body.hc:not(.night) .grade.good{background:#428255;} body.hc:not(.night) .grade.easy{background:#4E73C0;} body.hc.night .grade.again{background:#B7574F;} body.hc.night .grade.hard{background:#966B3A;} body.hc.night .grade.good{background:#45805C;} body.hc.night .grade.easy{background:#5974AD;} /* a focus ring the mode can't leave to chance: thicker, and always the bright indigo rather than the theme's */ body.hc :focus-visible{outline:3px solid var(--indigo-bright) !important; outline-offset:2px;} *{box-sizing:border-box;} html,body{margin:0;padding:0;} /* ---------- skip link (index.html's first element) ---------- Off screen until it takes focus, then a real button at the top-left. Positioned rather than `display:none`, which would take it out of the tab order and defeat the whole point of it. */ .skip-link{ position:fixed; left:12px; top:-70px; z-index:9900; background:var(--indigo); color:#fff; font-family:var(--mono); font-size:calc(12.5px * var(--fs)); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:11px 18px; border-radius:9px; box-shadow:var(--shadow-md); transition:top .18s var(--ease); } .skip-link:focus{top:12px;} body.night .skip-link{color:var(--paper);} #view:focus{outline:none;} /* it takes focus only as the skip link's target, never by tabbing to it */ body{ background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:calc(17px * var(--fs)); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .4s var(--ease), color .4s var(--ease); } /* ---------- Text size (Settings → Appearance) ---------- `--fs` multiplies EVERY px font-size in this file (Aug 2026, on request — it reached only the reading prose before: a card's question and background, a glossary popup, an Atlas panel). It is applied by rewriting each declaration as `calc( * var(--fs))`, so every element keeps its size relative to its neighbours and only the text scales — the boxes are still laid out in px, which is what keeps the shell from coming apart at Large. The two settings away from Medium are the only rules needed; the default is the token above. What this deliberately does NOT reach is the ATLAS's canvas labels: those are `ctx.fillText` at computed sizes, and their spacing arithmetic (the collision grid, the leader lines) is written against those numbers. CSS cannot see them and scaling them would rearrange the map, not enlarge it. */ /* Five stops (Aug 2026, on request — "very small" and "very large" were added at the ends). The steps are deliberately not even: the middle three keep the values they have always had, so nobody's chosen size moves under them, and the two new ends sit a little further out than that spacing would give — a reader who asks for "very large" is asking for a real difference, not one more nudge. */ body[data-fs="tiny"]{--fs:.8;} body[data-fs="small"]{--fs:.9;} body[data-fs="large"]{--fs:1.14;} body[data-fs="huge"]{--fs:1.32;} /* ON A PHONE THE WHOLE SCALE SITS ONE STOP LOWER (Oct 2026, on request: "the 'Small' text size should be the new default; shift the other sizes accordingly"). Medium — the default, and what every reader who has never touched the slider is on — renders at what Small was, and each other stop moves down one with it: Small takes Very small's value, Very small steps one more .1 below, Large is the old Medium, Very large the old Large. The STORED value and the slider's five names are untouched, so nothing migrates and a phone and a desktop sharing one account each show the setting at their own size. The breakpoint is the phone's, the one the bottom tab bar appears at. */ @media (max-width:640px){ :root{--fs:.9;} body[data-fs="tiny"]{--fs:.7;} body[data-fs="small"]{--fs:.8;} body[data-fs="medium"]{--fs:.9;} body[data-fs="large"]{--fs:1;} body[data-fs="huge"]{--fs:1.14;} } body::before{ content:""; position:fixed; inset:-15%; z-index:-1; pointer-events:none; background: radial-gradient(38% 46% at 16% 8%, color-mix(in srgb,var(--indigo) 20%, transparent), transparent 70%), radial-gradient(42% 50% at 88% 16%, color-mix(in srgb,var(--zh) 15%, transparent), transparent 72%), radial-gradient(46% 52% at 78% 96%, color-mix(in srgb,var(--ochre) 15%, transparent), transparent 72%), radial-gradient(40% 48% at 6% 90%, color-mix(in srgb,var(--indigo-bright) 12%, transparent), transparent 72%); filter:blur(70px) saturate(112%); opacity:.85; transition:opacity .4s var(--ease); } body.night::before{opacity:.5;} /* Light mode: more pronounced gradient (stronger color, saturation, opacity); dark mode unchanged */ body:not(.night)::before{ background: radial-gradient(40% 48% at 16% 8%, color-mix(in srgb,var(--indigo) 36%, transparent), transparent 72%), radial-gradient(44% 52% at 88% 16%, color-mix(in srgb,var(--zh) 30%, transparent), transparent 74%), radial-gradient(48% 54% at 78% 96%, color-mix(in srgb,var(--ochre) 30%, transparent), transparent 74%), radial-gradient(42% 50% at 6% 90%, color-mix(in srgb,var(--indigo-bright) 26%, transparent), transparent 74%); filter:blur(64px) saturate(126%); opacity:.96; } a{color:var(--indigo-bright);} ::selection{background:rgba(110,127,196,.18);} .night ::selection{background:rgba(166,180,240,.22);} /* DEFAULT THEME SIGNATURE — the opal (Sep 2026, on request: "replace the default Folio theme with the Opalite theme, which should be renamed to Folio"). What used to sit here was a bookbinder's ribbon, a hairline of indigo → vermilion → gold under the nav, and it went with the palette it belonged to: the default's signature is now the stone's, which is the iridescence below and the cabochon corners with it. THE IRIDESCENCE IS THE POINT: the ground shifts through the whole opal spectrum rather than sitting on one hue, which is what separated this from Amethyst when it was a gemstone theme. Static, like every other theme's ambient. ⚠ IT MUST STAY BELOW `body:not(.night)::before`. Both selectors are (0,1,2) — an attribute and a `:not` weigh the same — so this wins on SOURCE ORDER alone, and moving it above that rule silently gives the default back the four-blob gradient it is replacing. */ body[data-theme="folio"]::before{ background:linear-gradient(135deg,#F4F0FB 0%, #EAF3FB 22%, #EFF8F2 44%, #FBF3F7 68%, #F2EFFC 100%); opacity:1; filter:none; } body[data-theme="folio"].night::before{ background:linear-gradient(135deg,#181630 0%, #101C2A 24%, #0F1F1E 48%, #23142A 72%, #14122A 100%); } /* the roundest corners on the shelf — an opal is a cabochon, never faceted */ body[data-theme="folio"] .card, body[data-theme="folio"] .collection, body[data-theme="folio"] .study-card, body[data-theme="folio"] .banner, body[data-theme="folio"] .game-tile, body[data-theme="folio"] .placard{border-radius:20px;} body[data-theme="folio"] .btn, body[data-theme="folio"] .grade{border-radius:999px;} body[data-theme="folio"] .page-head h1{font-family:var(--display); font-weight:700; letter-spacing:-.01em;} /* utility eyebrow */ .eyebrow{ font-family:var(--mono); font-size:calc(11px * var(--fs)); letter-spacing:.2em; text-transform:uppercase; color:var(--indigo); font-weight:600; } /* ============================================================ TOP BAR ============================================================ */ .topbar{ position:sticky; top:0; z-index:50; height:var(--bar-h); display:flex; align-items:center; gap:24px; padding:0 clamp(16px,4vw,40px); background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--rule); } /* THE TAGLINE SITS UNDER THE WORDMARK (Sep 2026, on request: "move the tagline to right below the logo"). It was a baseline-aligned row, which is why the two carry no shared alignment rule between them any more: as a column the mark's own left edge is the tagline's, and `align-items:flex-start` is what holds that at every text size rather than a hand-written offset. The gap is 4px because the mark is set `line-height:1` — it has no descender space of its own to stand in for one. */ .brand{display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:none; user-select:none; cursor:pointer; appearance:none; border:0; padding:0; margin:0; background:none; font:inherit; color:inherit; text-align:left;} .brand:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:3px; border-radius:5px;} .brand .mark{ font-family:var(--display); font-weight:900; font-size:calc(23px * var(--fs)); letter-spacing:-.01em; color:var(--ink); line-height:1; } .brand .mark .dot{color:var(--zh);} /* The tracking comes down with the stacking. At .28em the tagline was half again as wide as the wordmark above it, which as a ROW was invisible and as a COLUMN reads as a line that has escaped the block it belongs to; at .16em the two are close enough in width to read as one mark. */ .brand .tag{font-family:var(--mono); font-size:calc(9.5px * var(--fs)); letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase;} /* WHICH OF THE TWO LOGOS IS ON SCREEN, AND WHY THE SPLIT IS AT 1180px (Sep 2026, with the masthead). The obvious rule is "bar logo wherever the bar is shown, home logo below 640px" — and it does not fit. MEASURED, in a browser, with the seven tabs in: STACKED, the brand costs the bar 88px at Medium text and 186px at Very large, and the bar has that much to spare only from 1180px up. Below it the tabs are pushed off the end — 259px of overflow at 901px, 164px at 1000px and 64px at 1100px at Very large — which takes a destination away to make room for an ornament, exactly backwards. (The band rules further down already claw back what they can between 641 and 900px, and that is spent on the tabs.) THE THRESHOLD CAME DOWN FROM 1280px WHEN THE TAGLINE WENT UNDER THE WORDMARK: a row 171px wide became a column 88px wide, which is most of a hundred pixels back and two more classes of screen inside the bar. It is a MEASUREMENT, so re-measure it if either half of the brand changes. So the BAR's logo is shown from 1180px up and the HOME page's from 1179px down, and exactly one of the two is on screen at every width — including a portrait tablet, which gets it at the head of the home page rather than in the bar. `.home-brand` is a block of its own above the greeting; it takes no pointer, being a heading on the page it would have linked to. */ .topbar .brand{display:none;} @media (min-width:1180px){ .topbar .brand{display:flex;} } .home-brand{display:flex; cursor:default; margin:0 0 18px;} @media (min-width:1180px){ .home-brand{display:none;} } /* ...AND A PHONE GETS NEITHER (Sep 2026, on request: "on mobile, remove the logo and tagline from the top of the home page"). This reverses the rule above at the narrow end and is deliberate: on a 390px screen the wordmark and its tagline are the first 60px of a page whose whole job is the day's study, and a masthead is worth its room only where there is room. So the split is now three-way rather than two — nothing below 640px, the home page's logo from 641 to 1179, the bar's from 1180 up — and the centring rule this replaced is gone with the block it centred. */ @media (max-width:640px){ .home-brand{display:none;} } .nav{display:flex; align-items:center; gap:4px;} .nav.right{margin-left:auto;} .tab{ position:relative; appearance:none; border:0; background:none; cursor:pointer; display:inline-flex; align-items:center; font-family:var(--mono); font-size:calc(11.5px * var(--fs)); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-quiet); font-weight:500; padding:10px 13px; border-radius:7px; transition:color .18s var(--ease), background .18s var(--ease); } .tab .tab-ic{width:16px; height:16px; flex:none;} /* THE LABEL IS ALWAYS OPEN (Aug 2026, on request). These tabs used to be icon-only, the name unfolding beside the icon on hover / keyboard focus and staying open on the page currently shown — which meant a reader had to point at four icons to find out what they were, and the one name on screen belonged to the page they were already on. There are only four destinations and the bar has room for all four, so the name is simply there; `.active` still says which page you are on, in the indigo and the underline. The colour transition is kept and the width one goes with the collapse: nothing animates any more. */ .tab .tab-label{ display:block; overflow:hidden; white-space:nowrap; margin-inline-start:8px; } .tab:hover{color:var(--ink-soft); background:color-mix(in srgb, var(--ink) 5%, transparent);} .tab.active{color:var(--indigo);} /* ---------- SEVEN TABS, AND THE BAR IS NARROWER THAN THEY ARE BETWEEN 641 AND 900px ---------- (Sep 2026, with the Collections tab.) The top bar is desktop-only — below 640px it is `display:none` and the bottom bar takes over — so the band this has to answer for is 641px to about 900px, a small laptop or a tablet in landscape. Measured with the seventh tab in: 0px of overflow at 900px and above, 76px at 760 and 134px at 700, all of it in the tabs' own padding and tracking rather than in the words. SO THE PADDING AND THE TRACKING COME IN, AND EVERY NAME STAYS. That order is deliberate and is the Aug 2026 request's own: the labels were put there because a row of unnamed icons is a row a reader has to point at one by one, so the last thing to give is the word. Padding 13px -> 7px and tracking .16em -> .06em across seven tabs, with the bar's own gap and side padding in with them. The `--fs` scale is what makes this a band rather than a breakpoint - at Very large text the words are a third wider - so it is written to hold at the largest of them rather than at Medium. */ @media (min-width:641px) and (max-width:900px){ .topbar{gap:12px; padding:0 clamp(10px,2vw,20px);} .nav{gap:2px;} .topbar .tab{padding:10px 7px; letter-spacing:.06em;} .topbar .tab .tab-label{margin-inline-start:6px;} /* …AND THE EIGHTH TAB GIVES UP ITS WORD, WHICH IS THE ONE THAT CAN (Sep 2026, with Search). Measured with eight tabs in: the tightening above holds to 768px and then runs out — 28px of overflow at 700 and 86px at 641 — so something has to go, and the rule above says the last thing to give is a name. A MAGNIFIER IS THE EXCEPTION AND ONLY THE MAGNIFIER: it is the one icon in the bar that names itself, universally, without a word beside it — which is exactly what could not be said of a house, a globe or a stack of cards, and why the other seven keep theirs. The name is CLIPPED rather than removed, so it still reaches a screen reader; `aria-label` would be the alternative and would mean the markup carrying the word twice. */ .topbar .tab-search .tab-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0; } .topbar .tab-search{padding-inline:9px;} } /* THE NARROW END OF THE BAND NEEDED ONE MORE TURN (Sep 2026, measured at every width from 641 to 1440). Two things were found there and only one of them is new. With the Search tab in, 641px overflowed by 39px; WITHOUT it, by 3 — so the bar has been three pixels too wide at its narrowest supported width all along, and nobody could see it because until the fonts were self-hosted a sandbox run had no webfonts at all and the fallback stack is narrower. (It is what `test-layout`'s Atlas-sheet assertion was reporting as `horiz: 3`.) Both are closed by the same turn of the screw, and it stays in the padding rather than the words: 7px -> 4px each side across eight tabs is 48px, against 39 needed. Measured after: 0 at every width tested, with the Admin tab shown, which is the widest the bar ever gets. */ @media (min-width:641px) and (max-width:720px){ .topbar{gap:8px; padding:0 8px;} .topbar .tab{padding:10px 4px;} .topbar .tab .tab-label{margin-inline-start:5px;} } /* …and an admin-only tab wears --admin instead, in every state. It is the colour that says so and not a badge: the nav is icons and one word each, and a second mark on two of six tabs would be more furniture than fact. `applyMode` still HIDES these for everyone else — this is what an editor sees, not a gate. */ /* The Admin tab ships `hidden` and applyMode reveals it for an admin; the author `display` on `.tab` would otherwise beat the UA's [hidden] rule and show it to everybody. */ .tab[hidden]{display:none;} .tab.tab-admin{color:color-mix(in srgb, var(--admin) 62%, var(--ink-faint));} .tab.tab-admin:hover{color:var(--admin); background:color-mix(in srgb, var(--admin) 8%, transparent);} .tab.tab-admin.active{color:var(--admin);} .tab.tab-admin .ink{background:var(--admin);} .tab.tab-admin:focus-visible{outline-color:var(--admin);} /* the underline sits under the unfolded page NAME only, never the icon: --ink-start = horizontal padding + icon width + the open label's margin */ .tab .ink{ position:absolute; inset-inline-start:var(--ink-start, 37px); inset-inline-end:var(--ink-end, 13px); bottom:4px; height:2px; border-radius:2px; background:var(--indigo); transform:scaleX(0); transform-origin:left; opacity:0; transition:transform .28s var(--ease), opacity .2s var(--ease); } .tab.active .ink{transform:scaleX(1); opacity:1;} .tab:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:2px;} /* in first-time-visitor preview, the Admin entry point disappears */ body.visitor-mode .tab-admin{display:none;} /* language picker — Settings → Language (it was a top-bar dropdown until Aug 2026; a preference belongs on the preferences page, and on a phone the top bar it lived in is gone entirely) */ .lang-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;} .lang-opt{display:flex; align-items:center; gap:10px; width:100%; text-align:left; appearance:none; cursor:pointer; padding:11px 13px; border-radius:10px; border:1.5px solid var(--rule); background:var(--card); color:var(--ink); transition:border-color .15s, box-shadow .15s, background .14s var(--ease);} .lang-opt:hover{border-color:var(--ink-faint);} .lang-opt.on{border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-wash); color:var(--indigo);} .lang-opt:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:2px;} .lo-code{font-family:var(--mono); font-size:calc(10px * var(--fs)); letter-spacing:.08em; font-weight:700; margin-inline-start:auto; flex:none; color:var(--ink-faint);} .lang-opt.on .lo-code{color:var(--indigo);} .lo-label{font-size:calc(14.5px * var(--fs));} /* SVG country flags (emoji flags render as bare letter pairs on Windows) */ .lo-flag{width:21px; height:14px; flex:none; border-radius:2.5px; overflow:hidden; box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); display:inline-flex;} .lo-flag svg{width:100%; height:100%; display:block;} /* RTL (Arabic): flip the reading direction; flex/grid layouts follow the dir attribute on */ html[dir="rtl"] .lang-opt{text-align:right;} html[dir="rtl"] .page-head{text-align:right;} /* mobile nav condense */ .nav-toggle{display:none;} /* ============================================================ PAGE SHELL + TRANSITIONS ============================================================ */ .stage{max-width:880px; margin:0 auto; padding:clamp(22px,4vw,42px) clamp(16px,4vw,40px) 90px; position:relative;} /* touch-action is what makes every horizontal SWIPE on the site possible, and without it none of them worked on a real phone (Aug 2026, on a report that the book's chapter swipe did nothing — the page swipe between home/collections/library/account/settings was broken in exactly the same way and had been since it shipped). Under the default `auto` the browser hands a touch to its scroll machinery the moment it passes the slop and fires POINTERCANCEL at the page: pointerup never arrives, so a handler that measures the gesture at pointerup can never see one. It is invisible to the tests because a synthesised PointerEvent bypasses that arbitration entirely and completes every time. `pan-y` says this box scrolls vertically and nothing else, so a horizontal drag is no longer anyone's scroll and the pointer stream survives to pointerup; a vertical one still scrolls and still cancels, which is correct — that is a scroll and not a swipe. `pinch-zoom` keeps the reader able to zoom, which bare `pan-y` would take away. It costs double-tap-to-zoom, which the book already suppresses for its own double tap. Nested horizontal scrollers are UNAFFECTED (measured): the intersection that decides a pan stops at the element that will scroll, so the chapter bar, the Atlas sheet's pager and the heatmap still pan sideways, and every draggable that declares touch-action:none only ever narrows this further. IT HAS TO BE ON THE PAGE'S ANCESTORS TOO, and it was on `.page` alone for a fortnight (Aug 2026, on a report that swiping left from the Library did nothing when the finger started in the empty space below the content). A short page leaves the bottom of the screen covered by `.stage`'s 90px of padding and then by the body itself, and neither of those is `.page` — so a finger landing there met the default `auto`, the browser took the gesture for a scroll, and pointerup never arrived. The gesture worked or did not depending on WHERE on the page it began, which reads as the swipe being unreliable rather than as a rule with a hole in it. `body` is the honest place for it: the document scrolls vertically and nothing else, at every width and on every route. Nested horizontal scrollers are still unaffected for the reason above — the intersection stops at the element that will scroll. */ body{touch-action:pan-y pinch-zoom;} .stage,#view{touch-action:pan-y pinch-zoom;} .page{animation:pageIn .42s var(--ease) both; touch-action:pan-y pinch-zoom;} @keyframes pageIn{from{opacity:0; transform:translateY(10px) scale(.995);} to{opacity:1; transform:none;}} /* The outgoing page (see makePageGhost in app.js): a CLONE of it, laid over the stage to fade while the new one renders underneath — render() is synchronous and cannot wait for an exit animation, so the exit happens beside it rather than before it. Never interactive, never in the layout, and never in the accessibility tree. #view has to be positioned for it, so the copy lands exactly over the new page. */ #view{position:relative;} .page-ghost{position:absolute; left:0; right:0; top:0; pointer-events:none; z-index:2; animation:pageOut .26s var(--ease) both;} @keyframes pageOut{from{opacity:1; transform:none;} to{opacity:0; transform:translateY(-8px) scale(.994);}} /* ============================================================ MOTION (Aug 2026, on request: "animated transitions between pages and for actions") ============================================================ Everything here is decoration over layout that already works, and every rule is an animation or a transition — so the stylesheet's global prefers-reduced-motion killswitch at the foot of this file covers the lot with no per-rule handling. Two standing constraints: · nothing may change an element's LAYOUT (no margins, no display), only its paint and its transform, so a mid-animation measurement (test-layout.js, computeCityLayout, cpMinH) reads the settled value; · the entrance stagger opts out exactly where the page-level animation already does — the Atlas (a canvas being drawn into) and the editor (a repaint per keystroke). ------------------------------------------------------------ */ /* A page arrives as a sequence rather than a slab: its top-level blocks follow the page in, a beat apart. Capped at eight — past that the last block would arrive noticeably late, and a long page is scrolled to rather than read from the top. */ .page > *{animation:sectIn .42s var(--ease) both;} .page > *:nth-child(1){animation-delay:.02s;} .page > *:nth-child(2){animation-delay:.06s;} .page > *:nth-child(3){animation-delay:.10s;} .page > *:nth-child(4){animation-delay:.14s;} .page > *:nth-child(5){animation-delay:.17s;} .page > *:nth-child(6){animation-delay:.20s;} .page > *:nth-child(n+7){animation-delay:.22s;} @keyframes sectIn{from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;}} /* …and the same three opt-outs the page animation itself takes. The ghost must not re-run the entrance on its own children either, or the outgoing page flickers back in as it fades out. */ .page:has(.atlas) > *,body.admin-mode .page > *,.page-ghost > *{animation:none;} /* A QUIET REPAINT (renderInPlace in app.js) is a page rebuilt UNDER the reader rather than navigated to — a downloaded deck's row turning into the deck itself is the case it was written for — so nothing may fade, slide or stagger: the whole point is that the reader cannot tell the list was rebuilt. It reaches the page, its blocks and the deck rows' own entrance, which is a separate animation one level down. Deliberately a class on the PAGE element rather than on the body, like `.page-next`, so it dies with the page it belongs to and can never be left behind on the next ordinary navigation. */ .page.page-quiet,.page-quiet > *,.page-quiet .active-deck{animation:none;} /* A swiped navigation comes in from the side the finger came from, and the outgoing page leaves the other way — so the gesture and the transition tell the same story (see wirePageSwipe in app.js). The class is set on the page element itself rather than on the body, so it dies with that page and can never be left behind on a subsequent tab-bar navigation. It is a full CROSS-SLIDE (Aug 2026, on a report that it was "a hard cut"). It used to be a 26px nudge under a cross-fade, which at that distance is a fade with a lean in it: the finger had just dragged a page sideways and what arrived barely moved. Both halves now travel a whole page width — the two exactly adjacent, with a 24px gutter so their edges never abut — at ONE duration and ONE easing, which is what makes it read as a single sheet moving rather than as two things happening at once. Hence no opacity here at all: a page that is off the side of the screen needs no fading, and fading it would only make the sheet look like it were dissolving as it went. PAGE_GHOST_MS in app.js must stay in step with the .34s, or the outgoing page is removed part-way across. The stage clips horizontally for the length of the move (body.stage-sliding — see clipStageFor); without that, a page a whole screen wide overflows the document while it travels. */ .page.page-next{animation:pageInNext .34s var(--ease) both;} .page.page-prev{animation:pageInPrev .34s var(--ease) both;} @keyframes pageInNext{from{transform:translateX(calc(100% + 24px));} to{transform:none;}} @keyframes pageInPrev{from{transform:translateX(calc(-100% - 24px));} to{transform:none;}} .page-ghost.ghost-next{animation:pageOutNext .34s var(--ease) both;} .page-ghost.ghost-prev{animation:pageOutPrev .34s var(--ease) both;} @keyframes pageOutNext{from{transform:none;} to{transform:translateX(calc(-100% - 24px));}} @keyframes pageOutPrev{from{transform:none;} to{transform:translateX(calc(100% + 24px));}} /* The staggered entrance is for a page ARRIVING in place; on a page that is sliding in as one slab it would hold each block invisible until the slab had nearly landed, and they would then pop in behind it. Same opt-out as the Atlas and the editor take, two rules above. */ .page.page-next > *,.page.page-prev > *{animation:none;} /* overflow-x ALONE — never the shorthand and never `hidden`. `overflow-x:clip` beside an untouched `overflow-y:visible` is the one pairing that clips without making the stage a scroll container, so the book's sticky chapter bar and every other sticky thing on the site keep resolving against the viewport. The clip is at the stage's PADDING box, which on a phone is the screen edge — which is why this is on the stage and not on #view, that sitting inside the padding. `overflow-clip-margin` then gives the paint a little slack past it, for the desktop, where the stage is 880px centred in a wider window and the book's chapter slide would otherwise be cut off at the column edge with room to spare either side. It buys nothing on a phone (past the screen edge is past the window) and costs nothing where it is unsupported: clipping is what stops the overflow being scrollable, and the margin only moves where it is painted. */ body.stage-sliding .stage{overflow-x:clip; overflow-clip-margin:80px;} /* Overlays: the backdrop washes in and the box rises to meet it — and, since Aug 2026, leaves the same way. These had no entrance at all once, and then an entrance and no exit, which left the dismissal as the one abrupt half of a control that is otherwise entirely animated. `.closing` is applied by deckSheet's close (app.js), which also stops hit-testing the overlay at once, so the gesture is finished the instant it is made whatever the paint is still doing. DECK_SHEET_OUT_MS must stay in step with the duration here. */ .inline-prompt,.deck-menu{animation:overlayIn .18s var(--ease) both;} .ip-box,.dm-box{animation:dialogIn .26s var(--ease) both;} @keyframes overlayIn{from{opacity:0;} to{opacity:1;}} @keyframes dialogIn{from{opacity:0; transform:translateY(12px) scale(.97);} to{opacity:1; transform:none;}} .deck-menu.closing{pointer-events:none; animation:overlayOut .19s var(--ease) both;} .deck-menu.closing .dm-box{animation:dialogOut .19s var(--ease) both;} @keyframes overlayOut{from{opacity:1;} to{opacity:0;}} @keyframes dialogOut{from{opacity:1; transform:none;} to{opacity:0; transform:translateY(8px) scale(.98);}} /* Press feedback on the buttons that had none. `.btn` already lifts and settles; these are the quieter controls — the account page's ghost buttons, the editor's mini buttons, the sheet rows — where a click previously produced no acknowledgement of its own at all. */ .ghost-btn,.mini-btn{transition:background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);} .ghost-btn:active,.mini-btn:active,.dm-item:active{transform:scale(.975);} /* A tile is big enough that a scale reads as a shove; it dips instead. */ .game-tile:active{transform:translateY(1px);} /* The global killswitch at the foot of this file collapses DURATIONS, not delays — and `both` holds an element at its start state (invisible) through its delay, so without this a reduced-motion reader would watch a page arrive in blank steps over a fifth of a second. Delays go to zero there. */ @media (prefers-reduced-motion:reduce){ .page > *{animation-delay:0s !important;} } /* The shipped version and the moment it was released, in the top-left corner of the home page — quiet enough to be ignored and precise enough to quote in a bug report (see versionLineHTML in app.js). `--ink-faint` is the site's own quiet token, so the high-contrast mode re-tones it along with every caption and source line; don't hard-code a grey here. It stays LEFT-aligned at every width: below 640px the page head under it is centred, and a centred version number reads as a title rather than as a stamp. */ .site-ver{ font-family:var(--mono); font-size:calc(10px * var(--fs)); letter-spacing:.06em; color:var(--ink-faint); line-height:1; margin:0 0 8px; text-align:left; } html[dir="rtl"] .site-ver{text-align:right;} .page-head{margin:2px 0 22px;} .page-head h1{font-family:var(--display); font-weight:600; font-size:calc(clamp(28px,5vw,38px) * var(--fs)); margin:6px 0 0; letter-spacing:-.015em;} .page-head p{color:var(--ink-quiet); margin:8px 0 0; font-size:calc(15.5px * var(--fs)); max-width:60ch;} /* a slim accent hairline under every page title (centred fade on mobile, where the head is centred) */ .page-head::after{content:""; display:block; width:190px; max-width:38%; height:2px; margin-top:14px; border-radius:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--indigo) 55%, transparent), transparent);} /* ============================================================ BUTTONS ============================================================ */ .btn{ appearance:none; cursor:pointer; font-family:var(--mono); font-weight:600; font-size:calc(12.5px * var(--fs)); letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--indigo); background:var(--indigo); color:#fff; padding:13px 22px; border-radius:9px; line-height:1; transition:transform .12s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), opacity .2s; box-shadow:var(--shadow-sm); } .btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);} .btn:active{transform:translateY(0) scale(.98);} .btn:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:2px;} .btn.ghost{background:transparent; color:var(--indigo); border-color:var(--rule);} .btn.ghost:hover{border-color:var(--indigo); background:var(--indigo-wash);} .btn.zh{background:var(--zh); border-color:var(--zh);} .btn.block{display:block; width:100%; text-align:center;} .btn[disabled]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;} /* ============================================================ PROGRESS BAR ============================================================ */ .prog{display:flex; align-items:center; gap:12px;} .prog .track{flex:1; height:7px; border-radius:99px; background:var(--paper-2); overflow:hidden; border:1px solid var(--rule);} .prog .fill{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--indigo), var(--indigo-bright)); width:0; transition:width .9s var(--ease);} .prog .count{font-family:var(--mono); font-size:calc(11.5px * var(--fs)); color:var(--ink-faint); letter-spacing:.04em; white-space:nowrap; font-weight:500;} .prog.zh .fill{background:linear-gradient(90deg, var(--zh), #E0786F);} /* ---------- XP / level bars (replace progress bars on collections + the daily-review banner) ---------- */ .xp{display:flex; flex-direction:column; gap:6px;} .xp-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;} .xp-lvl{font-family:var(--mono); font-size:calc(10px * var(--fs)); letter-spacing:.12em; text-transform:uppercase; color:var(--indigo); font-weight:600;} .xp-count{font-family:var(--mono); font-size:calc(11px * var(--fs)); color:var(--ink-faint); letter-spacing:.04em; white-space:nowrap; font-weight:500;} .xp-track{height:8px; border-radius:99px; background:var(--paper-2); overflow:hidden; border:1px solid var(--rule);} .xp-fill{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--indigo), var(--indigo-bright)); width:0; transition:width .9s var(--ease);} /* ---------- A COLLECTION WORKED ALL THE WAY THROUGH (Aug 2026, on request) ---------- The name and the full bar both go GOLD — #C39A2E, the achievement gold the earned badge, the collection icons and the daily-study banner's own bar already use, so a finished collection reads as the same kind of thing as a badge rather than as a new colour. The class sits on the BAR (deckProgMarkup / adProg both write `prog-done`), and the title is reached from it with `:has()` — one flag, so the two halves of "displayed in gold" cannot come apart, and every surface that draws one of these bars is covered without a rule apiece. `:has()` is used for the crossword squares and the study card already. The collection HUE still wins on the bar of an unfinished one: these rules are `.prog-done` only. `!important` is not used anywhere here — each of these outranks the rule it replaces on CLASS COUNT rather than on source order, which matters because the rules it has to beat are scattered through the file and two of them come after this one: `.collection-row .xp-fill`, `.cl-row .xp-fill` and `.dp-row .prog .fill` are two or three classes, so the finished state is written `.xp.prog-done .xp-fill` / `.prog.prog-done .fill` — three, on the same two elements. */ .xp.prog-done .xp-fill, .prog.prog-done .fill{background:linear-gradient(90deg, #C39A2E, #E6C765);} body.night .xp.prog-done .xp-fill, body.night .prog.prog-done .fill{background:linear-gradient(90deg, #D4AA3C, #F2DC96);} /* the count beside the bar goes with it — a deeper gold, because at 10px #C39A2E on the card is 3.6:1 (the same reasoning, and the same value, as `.banner .xp-lvl`) */ .prog-done .xp-lvl,.prog-done .xp-count{color:#8A6A1E;} /* ---------- HOW LONG THIS READER HAS SPENT IN THIS BOOK (Aug 2026, on request) ---------- At the top of a book's front matter, above the essay: the one thing on that page that is about the reader rather than about the book. It is set as a figure with a caption beside it rather than as a sentence, so it reads at a glance and does not compete with the prose under it — the same shape the daily-study footer's timer uses, and deliberately the same face and size, since they are the same clock. Drawn only when there is something to say (see bookIntroChapter), so there is no empty state. */ .bk-clock{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--rule);} .bkc-fig{font-family:var(--display); font-weight:600; font-size:calc(19px * var(--fs)); color:var(--ink); line-height:1;} .bkc-lbl{font-family:var(--mono); font-size:calc(10.5px * var(--fs)); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);} body.night .prog-done .xp-lvl,body.night .prog-done .xp-count{color:#E0C270;} /* …and the collection's NAME, on all three surfaces that pair a title with one of these bars */ .collection-main:has(.deck-prog.prog-done) .collection-title, .dk-body:has(.dk-prog.prog-done) .dk-title{color:#8A6A1E;} body.night .collection-main:has(.deck-prog.prog-done) .collection-title, body.night .dk-body:has(.dk-prog.prog-done) .dk-title{color:#E6C765;} /* Library: each collection's bar fills in its own identity hue */ .collection-row .xp-fill{background:linear-gradient(90deg, var(--coll-bg, var(--indigo)), color-mix(in srgb, var(--coll-bg, var(--indigo)) 62%, white));} /* A collection / deck PROGRESS bar (deckProgMarkup) borrows the .xp shape so every theme rule, hue and animateProgs above applies unchanged. Only its head differs: "Studied" is a caption rather than a level, so it takes the quiet ink instead of the indigo the level label wears. */ .deck-prog .xp-lvl{color:var(--ink-faint); font-weight:500;} /* home banner stats: Anki's three piles in Anki's colours — blue new, red learning, green review. The same three run down the deck rows below the banner as .dkc-new / .dkc-learn / .dkc-rev, and the study bar's own .cnt row has always used exactly these tokens; keep all three sites on the same palette. */ .banner .stat.st-new b{color:var(--indigo-bright);} .banner .stat.st-learn b{color:var(--zh);} .banner .stat.st-rev b{color:var(--good, #4F9D67);} .banner .stat.stat-zero b{color:var(--ink-faint);} /* THE LEVEL BADGE IS GONE ENTIRELY (Aug 2026). `.level-badge` / `.lb-num` / `.lb-lbl` dressed a large numeral in two places: the home Daily-study banner, which gave its numeral up earlier that month on request, and the COLLECTION banners, which gave theirs up with collection levels themselves. Nothing was left rendering one, so the rules went with `levelBadgeMarkup` — along with the per-script variants (.level-badge.zh / .num-ja / .num-roman / .num-greek / .num-cyrillic / .num-devanagari) that counted a collection's level in its own numerals. Folio's level is still spelled out in words by the banner's xp bar (.xp-lvl). A collection carries a subject icon instead: */ /* ---- a collection's subject icon (Aug 2026, on request) ---- It stands where the level numeral stood, at the same width, so nothing around it had to move. GOLD rather than the collection's own hue: the banner wash IS that hue, and the gold is the one colour already proven to read over all ten of them in all eight themes, light and dark. */ .coll-ic{flex:none; display:flex; align-items:center; justify-content:center; min-width:56px; color:#C39A2E;} .coll-ic svg{width:calc(34px * var(--fs)); height:calc(34px * var(--fs)); display:block;} body.night .coll-ic{color:#E6C765;} .cl-row .coll-ic, .udeck .coll-ic{min-width:46px;} .cl-row .coll-ic svg{width:calc(28px * var(--fs)); height:calc(28px * var(--fs));} /* A PNG a reader has uploaded (Aug 2026). It cannot take the gold — that is currentColor on a stroke, and a picture has colours of its own — so it is an rather than an inline , sized to the same box and CONTAINED in it, since a reader's file has whatever proportions it has and cropping one would silently show them something other than what they chose. */ .coll-ic img{width:calc(34px * var(--fs)); height:calc(34px * var(--fs)); object-fit:contain; display:block; border-radius:4px;} .cl-row .coll-ic img, .udeck .coll-ic img{width:calc(28px * var(--fs)); height:calc(28px * var(--fs));} /* …and on a review row, where the width belongs to the deck's name (see adIcon). No min-width: the mark sits in the flex line rather than reserving a column, so a row without one loses nothing. */ .active-deck .coll-ic.dk-ic{min-width:0; margin-inline-end:2px; /* …AND IT RUNS IN THE DECK'S OWN HUE, not the collection gold (Sep 2026, on request). The row already carries that hue as `--coll-bg` (see hueStyle), and the mark is `currentColor` on a stroke, so this is one declaration rather than a colour per row. It is MIXED TOWARDS `--ink` rather than used raw: the hues are signature washes chosen to sit UNDER a banner, and several of them (Second World War's near black, World History's mid brown) are a wash on paper by day and all but invisible on a dark card by night. Mixing towards the ink raises the contrast in BOTH directions with no per-theme table, which is the ratio `.elab-box`'s tab is solved the same way. The plain hue is declared first for a browser with no `color-mix`. */ color:var(--coll-bg, #C39A2E); color:color-mix(in srgb, var(--coll-bg, #C39A2E) 80%, var(--ink));} body.night .active-deck .coll-ic.dk-ic{color:color-mix(in srgb, var(--coll-bg, #C39A2E) 55%, var(--ink));} /* High contrast drops the hue and keeps the SHAPE, which is what carries the information: the mark says what kind of cards are in the deck, and the colour only repeats the row's own wash. */ body.hc .active-deck .coll-ic.dk-ic{color:var(--ink);} .active-deck .coll-ic.dk-ic svg, .active-deck .coll-ic.dk-ic img{width:calc(22px * var(--fs)); height:calc(22px * var(--fs));} /* The Daily-review banner carried a large plain golden numeral of its own — the day's whole pile — and it went in Aug 2026 on request, along with pileBadgeMarkup, the tick it showed on a cleared day and the sizing rules that dressed it. `.banner` is that one button; the Library's collection banners carry an icon rather than a numeral (.coll-ic, a few lines above). */ /* breathing room between the desc line above and the blue "Level X / X of X cards" row */ .banner .xp{margin-top:12px;} /* the Daily-review banner's xp bar is GOLD, in the same metal as the level numeral beside it — downstairs the Library bars run in each collection's own hue and the account's in indigo, and one blue bar looked like another. The earned .done / .won fills override this with their own on-fill colour (gold on gold reads as nothing), which their higher specificity already handles. */ .banner .xp-fill{background:linear-gradient(90deg, #C39A2E, #E6C765);} body.night .banner .xp-fill{background:linear-gradient(90deg, #D4AA3C, #F2DC96);} /* brighter, like the numeral's night gold */ .banner .xp-lvl{color:#8A6A1E;} /* a deeper gold than the bar: at 10px this text needs the contrast, and #C39A2E on the card is only 3.6:1 */ body.night .banner .xp-lvl{color:#E6C765;} /* profile: how far through each collection the reader has got */ .coll-levels{display:flex; flex-direction:column; gap:12px; margin-bottom:16px;} .cl-row{display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:12px 18px;} .cl-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px;} .cl-name{font-family:var(--display); font-weight:600; font-size:calc(16px * var(--fs)); letter-spacing:-.01em;} .cl-empty{color:var(--ink-faint); font-size:calc(14px * var(--fs)); padding:4px 2px;} /* ============================================================ HOME — banners ============================================================ */ .banners{display:flex; flex-direction:column; gap:14px;} /* matches .game-grid's tile gap, so the review banner + tiles read as one grid */ .banner{ /* LIGHT BLUE is the Daily-study tile's own hue, mixed through --tile exactly like a game tile's colour. (It was a bronze, #9A6634, until Aug 2026 and was changed on request.) `.banner` is the review banner and nothing else on the site, so this and `.review-group`'s copy — which is what the deck rows under it fall back to — are the same colour and must be kept in step; the group sets its own because a value set on the banner element itself would otherwise outrank an inherited one. The idle wash is declared here on .banner itself rather than on a state selector, so a theme that gives the banner a surface of its own (marble's veining, academy's stationery) still wins — the earned .done / .won fills below outrank both. */ --tile:#5AA9DC; position:relative; overflow:hidden; cursor:pointer; text-align:left; background:linear-gradient(105deg, color-mix(in srgb, var(--tile) 22%, transparent), transparent 64%), linear-gradient(150deg, var(--card) 56%, color-mix(in srgb, var(--tile) 13%, var(--card))); border:1px solid var(--rule); border-radius:14px; padding:26px 28px; box-shadow:var(--shadow-md); transition:transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s; display:flex; align-items:center; gap:24px; } /* the wash is a whisper on dark themes, as on the game tiles — a daylight-strength mix glares over dark card stock */ body.night .banner{ background:linear-gradient(105deg, color-mix(in srgb, var(--tile) 11%, transparent), transparent 64%), linear-gradient(150deg, var(--card) 56%, color-mix(in srgb, var(--tile) 16%, var(--card))); } .banner:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--tile) 34%, var(--rule));} /* a coloured left bar echoing the minigame tiles */ .banner, .banner:hover{border-left:4px solid var(--tile);} .banner:active{transform:translateY(0) scale(.995);} .banner:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:3px;} .banner .body{flex:1; min-width:0;} .banner h2{font-family:var(--display); font-weight:600; font-size:calc(25px * var(--fs)); margin:7px 0 6px; letter-spacing:-.01em; color:var(--ink);} /* THE TITLE HAS THE WHOLE CARD AGAIN (Sep 2026). It carried a `padding-right` reserving the banner's top right — first for the Ordered/Random pill, then for the deck list's Edit control — and BOTH have left that corner: the Edit button is at the foot of the list now, on request (see `.rv-foot`). What is still in the corner is the completion mark, which is 29px and sits above the title's own line rather than in it, so it needs no reservation. The phone keeps its smaller title, which was never about the corner. */ .banner h2.review-title{font-size:calc(39px * var(--fs)); margin:0 0 11px; line-height:1.0;} @media (max-width:640px){ .banner h2.review-title{font-size:calc(32px * var(--fs));} } .banner .desc{color:var(--ink-soft); font-size:calc(15px * var(--fs)); margin:0; line-height:1.5;} .banner .meta{display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; align-items:center;} /* each figure sits CENTRED over its own label rather than left-aligned against it: three columns of two lines read as three columns only if both lines share a centre */ .banner .stat{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;} .banner .stat b{font-family:var(--display); font-weight:600; font-size:calc(21px * var(--fs)); line-height:1; color:var(--indigo);} .banner .stat span{font-family:var(--mono); font-size:calc(9.5px * var(--fs)); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);} /* (the day's time on cards was a fourth `.stat` here until Aug 2026 — it is `.rv-time` under the deck list now, on request; see the note there) */ .banner .cta{margin-left:auto;} /* sits on the SAME line as the three piles, pushed to the right edge */ /* ---------- the footer row under the DECK LIST ---------- The day's timer at one end and the deck list's Edit control at the other (Sep 2026, on request: "move it to the bottom right just below the active decks list, vertically centered opposite the study timer"). The row has held, at various times, "+ New group", the "+ Add decks" lip and the Edit button; the first two are gone for good and the third is back, having spent a fortnight in the banner's corner. `justify-content:space-between` with `align-items:center` is the whole of "opposite, centred": the timer keeps the left, the control keeps the right, and the two share one line box whatever either is. The timer's span is emitted EVEN WHEN EMPTY, so the button stays at the right edge on a morning with nothing studied yet rather than sliding across to the left. It WRAPS, which is what a phone in the editor mode needs: four controls and a sentence do not fit on one 313px line, so the controls drop to their own line under the time rather than being squeezed to nothing. */ /* …AND `.rv-foot` IS NOT DRAWN AT ALL SINCE OCT 2026 (on request): the timer is a Today section of the This week box (`.home-week`), and the Edit control — which then stood in the collections header for a day — is gone with its whole editor mode (Oct 2026, on request). */ /* THE ABSOLUTE CORNER ROW (`.rv-topacts`) STOOD HERE AND IS GONE (Sep 2026, on request). It laid the Edit control over the banner's top right, which had to be an overlay rather than markup — the banner is a ` or an , so an uppercasing pass in JS would have to walk into the markup to find the first letter; and the answer is also read aloud, typed against in the cloze box and matched by the glossary, none of which must see a capital the data has not got. ::first-letter changes what is painted and nothing else. It reaches the letter through inline descendants, and on a hanzi answer it is simply inert, there being no case to change. */ .answer .val::first-letter{text-transform:uppercase;} /* …and the one exception, set by buildBack: a term whose own lower-case initial is part of its name (pH, mRNA, tRNA), recognised by a lower-case letter followed immediately by a capital. */ .answer .val.nocap::first-letter{text-transform:none;} .answer .val a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(200,69,60,.34);} .night .answer .val a{border-bottom-color:rgba(240,147,139,.42);} /* column-gap 16, not the 7 it was: the label is a small-caps mono word and the value beside it is mono digits, and at 7px the two read as one string. Aug 2026, on request. */ .dt{display:grid; grid-template-columns:max-content 1fr; column-gap:16px; row-gap:2px; align-items:baseline; min-width:0;} .dt-solo{grid-column:1 / -1;} /* The date line is a KEY/VALUE LIST, not a paragraph (Aug 2026, on request — it had grown to a sentence or three under a one-word label). Several key/value pairs inside one .dt land in the same grid, so their labels align down the left; .dt-sub is a continuation line under a value (the place under a birth date), sitting in the value column with no label of its own. */ .dt-sub{grid-column:2; opacity:.72;} .dt-k{font-family:var(--mono); font-size:calc(9px * var(--fs)); letter-spacing:.08em; text-transform:uppercase; color:var(--indigo); font-weight:600; opacity:.55; white-space:nowrap;} .dt-v{font-family:var(--mono); font-size:calc(11.5px * var(--fs)); letter-spacing:.01em; color:var(--ink-faint); line-height:1.45; min-width:0;} /* The collapsible translation column (`.answer-tr`, the 中文 toggle) stood here and is retired (Sep 2026): every card with a Chinese name now shows it in the answer box's middle section — see `.ans-cn` below. */ .tr-ov{color:var(--ink-soft); font-family:var(--han); font-weight:400; font-size:calc(16px * var(--fs));} .tr-rom{font-family:var(--mono); font-size:calc(12px * var(--fs)); letter-spacing:.02em; color:var(--ink-faint);} .tr-lit{color:var(--ink-soft); font-style:italic; font-family:var(--serif); font-size:calc(13.5px * var(--fs));} .tr-k{font-family:var(--mono); font-size:calc(9px * var(--fs)); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; flex:none; align-self:center;} .py{font-family:var(--sans); font-style:normal; font-weight:400;} /* ---------- the figures box beside an answer (map cards; see cardFactsHTML) ---------- Tiles rather than the date line's two aligned columns, and deliberately so: `.dt` answers "when", in one narrow key/value list, and this answers "how many" — a capital, a population, an area — which reads far better as small facts than as more rows under the same labels. IT IS A GRID ON THE RIGHT OF THE ANSWER BOX, a sibling of `.answer-main` in `.answer`'s flex row — the slot `.answer-tr` takes on a Chinese card, and `.answer` is `space-between`, so it goes to the far edge with no rule of its own. TWO COLUMNS RATHER THAN `auto-fit`: the tiles are different widths (a capital against an area with its conversion), so an auto-fitting track count re-flows between one card and the next and the box stops being a shape a reader recognises. `minmax(0,1fr)` because a grid item's automatic minimum is its content's, and without it a long value pushes the column past its share and squeezes the answer beside it. `align-self:center` CENTRES the box against the answer beside it (Aug 2026, on request; it was `align-content:start`, which lined the tiles up with the answer term's first line). The two properties answer different questions and only the second one can do this: `align-content` distributes the grid's own tracks inside the grid's own height, which is its content's, so it moves nothing — the box is a flex item of `.answer`, whose `align-items:flex-start` is what was holding it to the top. */ .card-facts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; align-content:start; align-self:center; flex:0 1 auto; min-width:0; max-width:min(58%, 340px); } .cf-tile{ display:flex; flex-direction:column; gap:1px; min-width:0; padding:5px 10px 6px; border:1px solid var(--rule); border-radius:7px; background:var(--card); } .cf-k{font-family:var(--mono); font-size:calc(8.5px * var(--fs)); letter-spacing:.08em; text-transform:uppercase; color:var(--indigo); font-weight:600; opacity:.62; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .cf-v{font-family:var(--mono); font-size:calc(12px * var(--fs)); color:var(--ink-soft); line-height:1.35; overflow-wrap:anywhere;} /* ---------- the answer's Chinese name (see answerNameHTML) ---------- THE MIDDLE SECTION OF THE ANSWER BOX (Sep 2026, on request): a sibling of `.answer-main` and of the figures grid, so on a wide card it stands between the term on the left and the figures on the right, ruled off from the term by a hairline. The traditional form where it differs sits on the line above the simplified, and the pinyin with its speaker under both; the block is centred against the term, as the figures are. It was a line under the term, on a map card only; every card that carries a Chinese name gets it now. Below 640px `.answer` stacks (see the phone block), so it goes under the term at full width with the rule on its top edge instead. */ /* THE BLOCK IS SET FLUSH RIGHT (Sep 2026, on request). Its three lines are of very different widths — a two-character name over a four-character one over a romanisation twice as long as either — and ranged left they read as a ragged column drifting away from the rule beside them; ranged right they line up against the figures grid, which is the edge the eye is already following down the card. */ .ans-cn{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 1 auto; min-width:0; align-self:center; padding:2px 0 2px 16px; border-left:1px solid color-mix(in srgb, var(--zh) 22%, transparent); line-height:1.15; text-align:right;} .ans-cn .ac-chars{display:flex; flex-direction:column; align-items:flex-end; gap:1px;} /* the traditional form is written FIRST in the markup and so sits on the line above; it is still the quieter of the two, smaller and at half strength, so the simplified form under it reads as the name and this as the second script it is also written in. */ .ans-cn .ac-s{font-family:var(--han); font-weight:400; font-size:calc(24px * var(--fs)); color:var(--zh); line-height:1.15;} .ans-cn .ac-t{font-family:var(--han); font-weight:400; font-size:calc(19px * var(--fs)); color:var(--zh); opacity:.5; line-height:1.15;} .ans-cn .ac-row{display:flex; align-items:center; gap:7px;} .ans-cn .ac-p{font-family:var(--mono); font-size:calc(11.5px * var(--fs)); letter-spacing:.02em; color:var(--ink-faint);} /* the speaker: a small round button in the Chinese ink, hidden outright on a device with no speech engine */ .ans-cn .ac-say{flex:none; width:calc(22px * var(--fs)); height:calc(22px * var(--fs)); border-radius:50%; border:1px solid color-mix(in srgb, var(--zh) 45%, var(--rule)); background:var(--card); color:var(--zh); display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease);} .ans-cn .ac-say svg{width:calc(12px * var(--fs)); height:calc(12px * var(--fs)); display:block;} .ans-cn .ac-say:hover, .ans-cn .ac-say.tts-playing{background:var(--zh); color:#fff;} .ans-cn .ac-say:focus-visible{outline:2px solid var(--zh); outline-offset:2px;} body.no-tts .ans-cn .ac-say{display:none;} /* ---------- a map card's window (see the MAP CARDS block in app.js) ---------- The question is a canvas: one place shaded on the globe, turned and zoomed by the reader. `touch-action: none` is what makes it work on a phone at all — the same rule the whiteboard canvas needs, and for the same reason: under the default the browser claims the drag as a page scroll and fires `pointercancel` at the element before it has seen two moves. */ .map-card{ position:relative; margin:2px 0 16px; border-radius:10px; overflow:hidden; border:1px solid var(--rule); background:var(--paper-2); box-shadow:var(--shadow-sm); } .mc-canvas{ display:block; width:100%; height:clamp(210px, 42vh, 340px); touch-action:none; cursor:grab; background:var(--paper-2); } .mc-canvas:active{cursor:grabbing;} .mc-canvas:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:-2px;} .mc-zoom{position:absolute; right:9px; top:9px; display:flex; flex-direction:column; gap:5px;} .mc-btn{ width:29px; height:29px; border-radius:8px; border:1px solid var(--rule); cursor:pointer; background:color-mix(in srgb, var(--card) 88%, transparent); color:var(--ink-soft); font:600 15px/1 var(--sans); display:flex; align-items:center; justify-content:center; transition:background .15s var(--ease), color .15s var(--ease); } .mc-btn:hover{background:var(--card); color:var(--ink);} .mc-btn svg{width:14px; height:14px;} /* "Discovered!" — top LEFT, opposite the control stack, on a card whose reveal has just earned the reader somewhere new (Sep 2026, on request). It takes --newterm, which is the ink the site already uses for a term met for the first time, so a discovery looks the same wherever it happens. */ .mc-new{ position:absolute; left:9px; top:9px; z-index:2; pointer-events:none; font-family:var(--mono); font-size:calc(9.5px * var(--fs)); font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.7; padding:0 8px; border-radius:999px; white-space:nowrap; color:var(--newterm); background:color-mix(in srgb, var(--newterm) 13%, var(--card)); border:1px solid color-mix(in srgb, var(--newterm) 38%, transparent); animation:mcNewIn .34s var(--ease) both; } .mc-new[hidden]{display:none;} /* the author `display` would beat the UA rule and pin it open */ @keyframes mcNewIn{from{opacity:0; transform:translateY(-4px) scale(.96);} to{opacity:1; transform:none;}} /* The "Drag to turn · zoom to look closer" chip that sat bottom-left is gone (Sep 2026, on request); the canvas's aria-label still says what to do, which is the one reader the words were for. */ /* the two lazy bundles behind it. A window that says nothing while it waits reads as one that failed. */ .map-card.mc-loading::after, .map-card.mc-failed::after{ content:"Loading the map…"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--paper-2); color:var(--ink-faint); font:500 calc(12px * var(--fs))/1.4 var(--sans); text-align:center; padding:16px; } .map-card.mc-failed::after{content:"This map could not be loaded. The answer is below.";} .map-card.mc-loading .mc-zoom, .map-card.mc-failed .mc-zoom{display:none;} /* ---------- an artwork card's picture (see cardArtSpec in app.js) ---------- The question, on a card whose answer is the work in it. THREE THINGS ARE DELIBERATE. IT IS SHOWN WHOLE (`object-fit:contain`) rather than filled into a frame, which every other picture on the site is: a painting cropped to 16:9 is a different picture, and on a portrait or a scroll it is a detail. The height is capped in `vh` so a tall work still leaves the question and the grade bar on screen, and the box takes the paper behind it so the letterboxing reads as mount rather than as a gap. IT CARRIES NO CHROME UNTIL THE REVEAL — no zoom glyph, no pointer, no caption — because all three say "there is more here", and what is more here is the answer. `.revealed` is added by `cardArtReveal` and is what turns it into the enlargeable, credited figure the rest of the site draws by default. THE CAPTION IS THE FIGURE'S OWN `figcaption`, so it cannot be laid over the picture and cannot be mistaken for part of the work. */ .art-shot{ margin:2px 0 16px; border-radius:10px; overflow:hidden; border:1px solid var(--rule); background:var(--paper-2); box-shadow:var(--shadow-sm); } .art-shot img{ display:block; width:100%; height:clamp(220px, 46vh, 420px); object-fit:contain; background:var(--paper-2); } /* A DEAD FILE ON THIS FORMAT IS THE WHOLE QUESTION GONE, so it says so rather than hiding (which would leave four empty fields under nothing) and rather than painting the alt text at full size in the frame, which is what a browser does by default and which reads as a broken page. The sentence is in CSS because the frame is built by `cardArtHTML` before anything knows whether the file will arrive, and the site ships in English (see MULTILANG); it follows `.ces-img.media-dead`, which says its own line the same way. */ .art-shot.media-dead img{display:none;} .art-shot.media-dead::after{ content:"This picture could not be loaded."; display:block; padding:34px 16px; text-align:center; font:400 calc(13px * var(--fs))/1.5 var(--sans); color:var(--ink-faint); } .art-shot.revealed{cursor:zoom-in;} .art-shot.revealed:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:-2px;} /* THE FLAG ON A FLAG CARD'S FRONT (Sep 2026, with the Flags collection; see the FLAG CARDS block in app.js). `.art-shot`'s sibling and NOT a reuse of it, because the two frames differ in the two things that matter here. THE FLAG IS CONTAINED AND NEVER CROPPED, like a painting — flags run from 1:1 (Switzerland, Vatican City) through 2:3 and 1:2 to Qatar's 11:28 — so the height is a MAXIMUM and `object-fit:contain` does the rest. It is shorter than the artwork frame: a flag is a wide shallow thing and a 46vh box would letterbox most of them into a band of paper. IT IS DRAWN ON A RULED GROUND, which the artwork frame gets for free and this one genuinely needs. Japan, Qatar's hoist, the Nordic crosses and every white-bordered flag have WHITE at the edge, so against the card they lose their own outline and against a dark card they are cut in half. The border and the paper behind it are what keep the edge visible in both, and Japan and Switzerland at both light and dark are the whole test of this rule. IT NEVER GAINS CHROME, unlike `.art-shot.revealed`: there is no zoom glyph and no caption in ANY state, because a national flag's credit line reads "Government of India, public domain" and the viewer's own caption bar would print it. The credited, enlargeable copy is the small `.av-flag` inside the answer box, which `buildBack` draws on the reveal. */ /* THE FRAME TAKES THE FLAG'S OWN SHAPE (Sep 2026, on request: "the canvas … should shrink horizontally to fit the shape of the flag"). `--ar` is the flag's width over its height, written on the figure by `fitFlagShot` once the file has loaded; 1.5 until then, the commonest ratio on the shelf. The frame's width is derived from its target height, `min(100%, height × ratio)`, and the picture's height from the frame's width through `aspect-ratio` — so a narrow screen shortens a wide flag rather than letterboxing it, and no ratio can leave a band of paper beside the flag. It is centred, the one place a frame narrower than the card has to sit. `object-fit:contain` stays as the fallback for a file whose size never arrives. */ .flag-shot{ --flag-h:clamp(150px, 30vh, 280px); width:min(100%, calc(var(--flag-h) * var(--ar, 1.5))); box-sizing:border-box; margin:2px auto 16px; border-radius:10px; overflow:hidden; border:1px solid var(--rule); background:var(--paper-2); box-shadow:var(--shadow-sm); } .flag-shot img{ display:block; width:100%; height:auto; aspect-ratio:var(--ar, 1.5); object-fit:contain; background:var(--paper-2); } /* AND ON THE REVEAL IT BECOMES ENLARGEABLE, which is where its credit lives (Sep 2026, on request: "the image box should not show the image source or link on the card, only when it is clicked to enlarge should it say the source info"). There is deliberately NO caption class here: a `figcaption` under this frame put two lines of Commons URL under every flag, and `openMediaViewer` draws the credit as `.iv-credit` under the enlarged picture instead. `.revealed` is added by `cardFlagReveal` and never before, since a flag's credit names the country. */ .flag-shot.revealed{cursor:zoom-in;} .flag-shot.revealed:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:-2px;} /* A dead file here is the whole question gone, exactly as on an artwork card, and for the same reason it says so rather than letting the browser paint the alt text at full size in the frame. */ .flag-shot.media-dead img{display:none;} .flag-shot.media-dead::after{ content:"This flag could not be loaded."; display:block; padding:34px 16px; text-align:center; font:400 calc(13px * var(--fs))/1.5 var(--sans); color:var(--ink-faint); } /* ---- DRAW CARDS: the pad the reader draws a flag in (Sep 2026, on request) ---- The pad is its OWN canvas with its OWN menu across the top of it, and has nothing to do with the floating marker — see the DRAW CARDS block in app.js for why the first cut (a frame over the page-wide whiteboard) could not answer "only be used within that canvas" or hold a fill. THE WIDTH IS CAPPED ON THE PAD AND NOT THE FRAME. Capping the FRAME's height instead (`max-height`) does shrink it back to 3:2 — but only the frame, so on a desktop it ended short of `.draw-pad`'s own right edge while `.dp-answer` below it stayed full width, and the drawing and the flag it is compared against were two different widths. One cap on the parent keeps all three edges together. */ .draw-pad{margin:20px auto 18px; max-width:560px;} /* The menu sits ON the canvas's top edge: one box, ruled across rather than two. */ .dp-tools{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:7px 9px; border:1px solid var(--rule); border-bottom:none; border-radius:10px 10px 0 0; background:var(--paper-2); } .dp-cols, .dp-acts{display:flex; align-items:center; gap:6px;} .dp-col{ width:22px; height:22px; padding:0; border-radius:50%; cursor:pointer; border:2px solid transparent; background:var(--dpc); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); } .dp-col.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px var(--paper-2);} /* The sixth swatch is the reader's own colour and opens the field below. It wears a small notch so it reads as "and any other" rather than as a seventh fixed colour, and the notch inverts while the field is open so the swatch says which state it is in without a second control. */ .dp-custom{position:relative;} .dp-custom::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:var(--paper-2); box-shadow:inset 0 0 0 1px rgba(0,0,0,.28); } .draw-pad.dp-picking .dp-custom::after{background:var(--ink);} /* THE PICKER IS A ROW, NOT A POPOVER — the marker's own rule for its own picker, and the same reason: the bar above is already a box with a decided position, and a second floating box inside it would have to decide again. `[hidden]` has to be said explicitly because the author `display:flex` beats the UA rule (codebase convention, cf. `.wb-pick` and `.ces-imgpanel`). */ .dp-pick{ display:flex; flex-direction:column; gap:8px; padding:9px; border-inline:1px solid var(--rule); background:var(--paper-2); } .dp-pick[hidden]{display:none;} .dp-col:focus-visible, .dp-btn:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:2px;} .dp-btn{ width:30px; height:30px; padding:0; display:grid; place-items:center; cursor:pointer; border:1px solid var(--rule); border-radius:8px; background:var(--card); color:var(--ink-soft); } .dp-btn svg{width:17px; height:17px;} .dp-btn.on{background:var(--ink); border-color:var(--ink); color:var(--paper);} .dp-btn:disabled{opacity:.38; cursor:default;} /* The brush-size slider takes the rest of the menu's row, or a row of its own when the colours and the tools have used the width up. The dot is drawn at the next stroke's own width (capped at its box) in the pen's colour; for the eraser it is a hollow ring. */ .dp-size{display:flex; align-items:center; gap:8px; flex:1 1 150px; min-width:130px; cursor:pointer;} .dp-size-well{flex:none; width:26px; height:26px; display:grid; place-items:center;} .dp-size-dot{display:block; width:4px; height:4px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.28);} .dp-size-dot.dp-size-erase{box-shadow:0 0 0 1.5px var(--ink-soft);} .dp-size-range{flex:1 1 auto; min-width:0; width:100%; margin:0; accent-color:var(--ink); cursor:pointer; touch-action:pan-y;} /* `aspect-ratio` ALONE, with no `min-height` beside it: the two together inflated the USED WIDTH past the card — 34vh of a tall phone is 300px, which at 3:2 asked for a 450px-wide box inside a 366px card, and the pad ran off the right edge taking the card's own border with it. */ .dp-frame{ position:relative; aspect-ratio:3 / 2; overflow:hidden; border:1px solid var(--rule); border-radius:0 0 10px 10px; background:var(--card); } /* THE CANVAS IS THE WHOLE FRAME, and `touch-action:none` is what lets a finger draw on it rather than having the gesture claimed as a scroll — the `pointercancel` fault this stylesheet records against every horizontal swipe on the site, here wanted rather than avoided. */ .dp-canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; display:block;} /* …and the hint sits at the FOOT of the frame rather than its middle: centred, it is under the reader's own drawing, which is both something to draw over and something that makes the drawing harder to read. It is `pointer-events:none` so it can never take a press meant for the canvas beneath it, and it goes the moment anything is drawn. */ .dp-hint{ position:absolute; left:0; right:0; bottom:10px; font:400 calc(12px * var(--fs))/1.5 var(--sans); color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; pointer-events:none; padding:0 14px; text-align:center; } .draw-pad.dp-drawn .dp-hint{opacity:0;} /* …and it comes BACK at the reveal, with a different word: two frames are then standing one above the other and the labels are what say which is which. */ .draw-pad.dp-drawn.dp-revealed .dp-hint{opacity:1;} /* The answer lands UNDER the pad and never inside it, so nothing above it moves when it arrives. */ /* The revealed flag takes its own shape, exactly as a flag card's front does (see `.flag-shot` and `fitFlagShot`), so a flag narrower than the pad sits centred under it with no band of paper beside it. That gives up the three-edges-together rule above for the ANSWER alone, deliberately: it was asked for by name ("should never have black bars on the side"), and the pad itself keeps its width. */ .dp-answer{ --flag-h:clamp(150px, 30vh, 280px); width:min(100%, calc(var(--flag-h) * var(--ar, 1.5))); box-sizing:border-box; margin:14px auto 0; border-radius:10px; overflow:hidden; border:1px solid var(--rule); background:var(--paper-2); box-shadow:var(--shadow-sm); } .dp-answer[hidden]{display:none;} /* the author `display:block` would beat the UA rule, as .af-src does */ .dp-answer img{ display:block; width:100%; height:auto; aspect-ratio:var(--ar, 1.5); object-fit:contain; background:var(--paper-2); } .dp-answer.revealed{cursor:zoom-in;} .dp-answer.revealed:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:-2px;} /* A draw card has a canvas to work in, so the writing band under the question would be a SECOND blank area on one card — and the reader would have no way of telling which of the two the answer belongs in. The floating marker itself is untouched: with its pen down it draws OVER the pad, as it does over everything else on the page. */ body.wb-down .study-card.draw-card .scratch{display:none;} .art-cap{ display:block; padding:9px 12px 11px; border-top:1px solid var(--rule); background:var(--card); font:400 calc(12px * var(--fs))/1.5 var(--sans); color:var(--ink-soft); text-align:left; } .art-cap-t{display:block; font-weight:600; color:var(--ink);} .art-cap-d{display:block; margin-top:2px;} /* The credit's visible text IS a Commons URL (see mediaCreditHTML), which carries no break opportunity at all — on a phone it ran past the caption's right edge. Nothing else in the block needs this, so it is on the credit line rather than on the caption. */ .art-cap-c{display:block; margin-top:4px; color:var(--ink-faint); font-size:calc(11px * var(--fs)); overflow-wrap:anywhere;} .art-cap-c a{color:inherit;} /* ---------- the answer box an artwork card is answered in (Sep 2026, on request) ---------- "The user must guess the title, artist, date of creation, and current ownership/location in the answer box." THREE labelled fields under the picture now, built by `cardArtHTML`: where the work is now came off the question side on a second request the same month and is stated in the answer's own figures grid instead. They are the only words on the question side, and they are the FORM rather than a clue: none of them says anything about the work. THE LABEL IS BESIDE THE FIELD, NOT OVER IT, and the label column is a fixed fraction rather than a `max-content`, so labels of different lengths keep every field left-aligned with the others, which is what makes the block read as one answer rather than three questions. Below 480px it stacks, where a fixed column would leave the widest label almost no room for the field beside it. The 7.5em is kept from the four-field version deliberately: it is the width a returning "Where it is now" would need, and a roomier label column costs the fields nothing at this size. GRADED, THE FIELD IS REPLACED RATHER THAN DISABLED (see gradeArtFields), so there is no editable copy left to improve an answer in. The mark takes its own colour and the typed value is struck through only where it is plainly wrong — a `near` date is not a mistake and must not be drawn as one. */ .art-ask{display:grid; gap:7px; margin:0 0 4px;} .art-f{ display:grid; grid-template-columns:minmax(0,7.5em) minmax(0,1fr); align-items:center; gap:10px; } .art-lab{ font:600 calc(11px * var(--fs))/1.3 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); } .art-input{ width:100%; min-width:0; padding:7px 10px; border:1px solid var(--rule); border-radius:8px; background:var(--paper-2); color:var(--ink); font:400 calc(15px * var(--fs))/1.4 var(--serif); } .art-input:focus{outline:none; border-color:var(--indigo-bright); box-shadow:0 0 0 2px color-mix(in srgb, var(--indigo-bright) 26%, transparent);} .art-graded{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; min-width:0; font:400 calc(15px * var(--fs))/1.45 var(--serif); color:var(--ink); } /* The two verdict colours are the graded cloze's own (`.ch-ok` / `.ch-bad` above), literal and with a night pair, because this is the same thing said about the same kind of answer and two greens for one idea drift apart invisibly. `near` takes --ochre, which is the blank's own colour in both modes. */ .art-mark{flex:none; font:700 calc(13px * var(--fs))/1 var(--sans);} .art-graded.ok .art-mark{color:#15a34a;} .art-graded.near .art-mark{color:var(--ochre);} .art-graded.bad .art-mark, .art-graded.empty .art-mark{color:#e23a2e;} .night .art-graded.ok .art-mark{color:#46d27f;} .night .art-graded.bad .art-mark, .night .art-graded.empty .art-mark{color:#ff6155;} .art-said{min-width:0; overflow-wrap:anywhere;} .art-graded.bad .art-said{text-decoration:line-through; color:var(--ink-faint);} .art-true{min-width:0; overflow-wrap:anywhere; font-weight:600;} .art-graded.ok .art-true{font-weight:400; color:var(--ink-soft);} @media (max-width:480px){ .art-f{grid-template-columns:1fr; gap:3px;} .art-lab{letter-spacing:.05em;} } /* ---------- the locator (see cardLocatorHTML in app.js) ---------- The same window on the back of a card whose answer is a place, saying where it is. It is shorter than a map card's, which is the question and deserves the room; this is an annotation, so it takes about the height of the card's own illustration. Its failure line has to differ too — a map card's says the answer is below, which on the back of a card is nonsense. */ .card-loc{margin-top:20px;} .card-loc .label{display:block; margin-bottom:7px;} .map-card.map-loc{margin-bottom:0;} .map-loc .mc-canvas{height:clamp(180px, 30vh, 260px);} .map-card.map-loc.mc-failed::after{content:"This map could not be loaded.";} /* ---------- and who fought, where the card is about a war (see cardWarKeyHTML in app.js) ---------- The map says two sides are drawn and it cannot say WHICH is which — green and red being the one pair a red-green colour-blind reader has no purchase on — so the key under it names them. It carries no colours of its own: the swatches are written inline from `TINT_WIN` / `TINT_LOSE`, which the map is painted from, so a key and the map it explains cannot drift apart. IT WRAPS RATHER THAN SHRINKING. Two side names of any length go side by side on a laptop and stack on a phone; a nowrap row would ellipsise the one word on it that matters. */ .war-key{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:20px;} /* …tucked up under the map when the map is there, and standing on its own when the Atlas popup has taken the globe away (see mountCardBack's `noLocator`). */ .card-loc + .war-key{margin-top:8px;} .war-key .wk-side{display:inline-flex; align-items:baseline; gap:6px; font:400 calc(12px * var(--fs))/1.5 var(--sans); color:var(--ink-soft);} .war-key .wk-sw{ flex:none; width:calc(11px * var(--fs)); height:calc(11px * var(--fs)); border-radius:3px; border:1.5px solid; align-self:center; } .war-key .wk-name{font-weight:600; color:var(--ink);} .war-key .wk-role{color:var(--ink-faint); font-size:calc(11px * var(--fs));} /* the media frame's own chrome — the border, the rounding and the shadow every surface that shows a picture or a clip shares. The SHAPE is set by whoever mounts it: 16:9 here, which is what the editor's media slot, the deck page's sample and the picture round want, and the picture's own proportions /* ---- THE LIBRARY BANNER IN A GLOSS POPUP (Aug 2026, on request) ---- The shelf's banner at popup scale, below the prose and above the citations. It shares `--bk-accent` with `.book-tile` — the four declarations above name both, so the day/night derivation and the OKLCh refinement are written ONCE and a book cannot come to wear two different versions of its own colour on two surfaces. What it does not share is the LAYOUT: a 360px popup has no room for the shelf's two columns, so the title leads and the author drops to the foot beside the reading position. `--bk-ink` is the shelf's own compromise for a title on a washed card and is repeated here for the same reason: the accent alone is too light on night's paper for 14px type. */ .gloss-book{ --bk-ink:color-mix(in srgb, var(--bk-accent) 80%, var(--ink)); position:relative; display:flex; gap:0; width:100%; text-align:left; padding:0; overflow:hidden; margin:14px 0 0; clear:both; background:linear-gradient(105deg, color-mix(in srgb, var(--bk-accent) 26%, transparent), transparent 70%) var(--card); border:1px solid var(--rule); border-radius:11px; box-shadow:var(--shadow-sm); cursor:pointer; font:inherit; color:inherit; transition:transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease); } body.night .gloss-book{background:linear-gradient(105deg, color-mix(in srgb, var(--bk-accent) 16%, transparent), transparent 70%) var(--card);} .gloss-book:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--bk-accent) 45%, var(--rule));} .gloss-book:active{transform:translateY(0) scale(.995);} .gloss-book:focus-visible{outline:2px solid var(--bk-accent); outline-offset:3px;} .gloss-book .bk-spine{flex:0 0 6px; align-self:stretch; background:var(--bk-accent);} .gb-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding:9px 12px 10px;} .gb-eyebrow{font-family:var(--sans); font-size:calc(9px * var(--fs)); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);} .gb-title{font-family:var(--display); font-size:calc(14.5px * var(--fs)); font-weight:600; line-height:1.25; color:var(--bk-ink); overflow-wrap:anywhere;} .gb-foot{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:1px;} .gb-author{font-family:var(--sans); font-size:calc(11px * var(--fs)); color:var(--ink-soft); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .gb-where{font-family:var(--sans); font-size:calc(11px * var(--fs)); font-weight:600; color:var(--bk-accent); flex:none;} inside `.card-imgslot` / `.gloss-imgslot`. Click to open the viewer. */ .card-img{ position:relative; display:block; margin:2px 0 18px; padding:0; cursor:zoom-in; aspect-ratio:16/9; width:100%; overflow:hidden; border-radius:10px; border:1px solid var(--rule); background:var(--paper-2); box-shadow:var(--shadow-sm); } /* CONTAIN, not cover. Where the frame's shape is fixed and a great many illustrations are not — a museum portrait is 3:4 and a standing skeleton nearer 2:3 — `cover` shows one of those as a horizontal band across its middle: the whole picture is there and none of it is legible. Contained, a tall picture is whole, with paper either side. Inside the two floated slots there is no band to fill, the frame taking the picture's shape instead (Aug 2026, on request), and the rule is inert. */ /* A LIGHT GROUND UNDER THE PICTURE ITSELF, and it is a theme-independent literal on purpose (Aug 2026, found on the China cards). A great many of the corpus's illustrations are woodblock and engraved PLATES uploaded as PNGs with a TRANSPARENT background — black line and nothing else — so on a dark theme they were black ink on `--paper-2`'s near-black and the picture was a blank rectangle: nothing throws, the file decodes, `naturalWidth` is right, and only looking at it after dark shows anything. A `var(--paper)` would flip dark with the theme and fix nothing; line art is ink on PAPER, which is a fact about the object rather than about the reader's theme, so the colour is written out. An opaque photograph or flag covers it entirely and never sees it, and in the two floated slots the frame takes the picture's own shape, so the ground is confined to the picture. */ .card-img img{width:100%; height:100%; object-fit:contain; display:block; background:#F7F5EF; transition:transform .35s var(--ease);} .card-img:hover img{transform:scale(1.025);} .card-img:focus-visible{outline:2px solid var(--indigo-bright); outline-offset:2px;} .ci-zoom{ position:absolute; right:10px; bottom:10px; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; pointer-events:none; background:rgba(0,0,0,.45); color:#fff; opacity:0; transition:opacity .2s var(--ease); } .ci-zoom svg{width:15px; height:15px;} .card-img:hover .ci-zoom{opacity:1;} /* a frame whose file never arrived (see the delegated `error` listener in app.js). A reader gets nothing — a broken illustration is worse than none, and they cannot fix it — so it leaves the flow entirely. */ .card-img.media-dead{display:none;} /* …but in the EDITOR the frame stays and says so, because the author is the one person who can fix the link */ .ces-img.media-dead, .ces-vid.media-dead{ display:flex; align-items:center; justify-content:center; text-align:center; padding:14px; cursor:pointer; border-style:dashed; border-color:color-mix(in srgb, var(--zh) 45%, var(--rule)); background:var(--paper-2); } .ces-img.media-dead > img, .ces-vid.media-dead > .cv-media{display:none;} .ces-img.media-dead::after, .ces-vid.media-dead::after{ content:"This link doesn’t load — check the URL"; font-family:var(--sans); font-size:calc(12.5px * var(--fs)); color:var(--zh); } .ces-img.media-dead .ces-img-edit{opacity:1;} /* card video: the identical frame, playing in place. The figure is not itself a button — the player owns clicks inside it — so the corner control is a real button and stays visible (there is no hover on touch). */ .card-vid{cursor:default;} .card-vid .cv-media{width:100%; height:100%; display:block; border:0; background:#000;} /* the corner control sits TOP-right, not where an image's zoom hint sits: a