style.css

/*
 * SPDX-FileCopyrightText: 2026 Anton Wiklund and Solid Memo contributors
 *
 * SPDX-License-Identifier: MIT
 */

@import "@fontsource-variable/fredoka";
@import "@fontsource/bangers";
@import "@fontsource-variable/noto-naskh-arabic";
@import "./palettes.css";

:root {
  color-scheme: light;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  /*
   * How much larger than the browser's own the text is: 1 here. What is
   * sized by the window (vw) rather than in rem is multiplied by it, so
   * it grows with the rest of the text.
   */
  --text-scale: 1;

  --font-mono:
    ui-monospace, "SFMono-Regular", "Cascadia Mono", "Menlo", "Consolas", "Liberation Mono",
    monospace;

  --font-display:
    "Bangers", "Fredoka Variable", ui-rounded, "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold",
    system-ui, "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans JP", "Yu Gothic", "Noto Sans KR",
    sans-serif;

  font-family:
    "Fredoka Variable",
    ui-rounded,
    "Hiragino Maru Gothic ProN",
    "Arial Rounded MT Bold",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Noto Sans CJK JP",
    "Noto Sans JP",
    "Yu Gothic",
    "Noto Sans KR",
    sans-serif;
  font-size: 100%;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* The dark theme, which the root's data-theme turns on (see ui/theme.tsx); its colors are
   in palettes.css. */
:root[data-theme="dark"] {
  color-scheme: dark;
}

/*
 * The larger text sizes, which the root's data-text-size turns on (see
 * ui/theme.tsx, docs/theme.md): the root's font size as a share of the
 * browser's, so the browser's own text size is multiplied in, and
 * --text-scale with it, for what the window sizes.
 */
:root[data-text-size="large"] {
  --text-scale: 1.125;
  font-size: 112.5%;
}

:root[data-text-size="larger"] {
  --text-scale: 1.25;
  font-size: 125%;
}

:root[data-text-size="largest"] {
  --text-scale: 1.5;
  font-size: 150%;
}

/*
 * Korean, on a Korean page or in text marked lang="ko" on another: Korean
 * fonts before the pan-CJK Japanese ones (which hold Hangul too, but with
 * Japanese shapes and metrics), Fredoka still first for the Latin letters,
 * and lines broken between words, not syllables; overflow-wrap still breaks
 * a word too long for its line. :where() puts it below every other rule, so
 * headings and code keep their own fonts; code-like elements styled by no
 * rule of ours get back the monospace this rule takes from the browser's.
 */
:where(:lang(ko)) {
  --font-display:
    "Bangers", "Fredoka Variable", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
    "Noto Sans CJK KR", "Source Han Sans K", ui-rounded, "Hiragino Maru Gothic ProN",
    "Arial Rounded MT Bold", system-ui, "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans JP",
    "Yu Gothic", sans-serif;

  font-family:
    "Fredoka Variable",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    "Noto Sans KR",
    "Noto Sans CJK KR",
    "Source Han Sans K",
    ui-rounded,
    "Hiragino Maru Gothic ProN",
    "Arial Rounded MT Bold",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Noto Sans CJK JP",
    "Noto Sans JP",
    "Yu Gothic",
    sans-serif;
  word-break: keep-all;
}

:where(:lang(ko)):where(code, kbd, samp, pre) {
  font-family: var(--font-mono);
}

/* Korean text inside a heading on another language's page. */
:where(h1, h2, .newcomer-course-title) :where(:lang(ko)) {
  font-family: var(--font-display);
}

/*
 * Bangers has no Hangul and a single weight: Korean display text is drawn
 * bold in the Korean font, with no faked bold for Bangers' Latin letters.
 * Tracking spreads Hangul apart, there and in the uppercase labels, where
 * uppercase does nothing to it.
 */
h1:lang(ko),
h2:lang(ko),
.newcomer-course-body .newcomer-course-title:lang(ko),
:is(h1, h2, .newcomer-course-title) :lang(ko) {
  font-weight: 700;
  font-synthesis-weight: none;
  letter-spacing: 0;
}

:is(dl.account, dl.facts) dt:lang(ko),
legend:lang(ko),
th:lang(ko),
.newcomer-course-body .newcomer-course-eyebrow:lang(ko),
:is(dt, legend, th, .newcomer-course-eyebrow) :lang(ko) {
  letter-spacing: 0;
}

/*
 * German, on a German page or in text marked lang="de": its long
 * compound words are hyphenated at line ends by the browser's German
 * dictionary, rather than run past their box or broken at any letter.
 */
:where(:lang(de)) {
  hyphens: auto;
}

/*
 * Text in a language written right to left (Arabic, Persian, Urdu,
 * Hebrew…), marked with its language: it runs right to left in a box of
 * its own, isolated from the text around it, so its punctuation, numbers
 * and any Latin words keep their places, and a block of it starts at the
 * right (text-align: start). The page itself stays left to right: no such
 * language is one the app speaks yet. No other rule sets a direction.
 */
:lang(ar),
:lang(fa),
:lang(ur),
:lang(ps),
:lang(sd),
:lang(ug),
:lang(ckb),
:lang(dv),
:lang(he),
:lang(yi),
:lang(syr) {
  direction: rtl;
  unicode-bidi: isolate;
}

/*
 * Arabic, in text marked lang="ar": Noto Naskh Arabic, the book hand that
 * draws the vowel marks clearly, after Fredoka for the Latin letters (it
 * has no Arabic), then the systems' own Arabic fonts. As in Korean,
 * headings, which Bangers cannot draw in Arabic, are bold in the Arabic
 * font, and code keeps the monospace font.
 */
:where(:lang(ar)) {
  --font-display:
    "Bangers", "Fredoka Variable", "Noto Naskh Arabic Variable", "Geeza Pro", "Segoe UI", Tahoma,
    sans-serif;

  font-family:
    "Fredoka Variable", "Noto Naskh Arabic Variable", "Geeza Pro", "Noto Naskh Arabic",
    "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

:where(:lang(ar)):where(code, kbd, samp, pre) {
  font-family: var(--font-mono);
}

/* Arabic text inside a heading on another language's page. */
:where(h1, h2, .newcomer-course-title) :where(:lang(ar)) {
  font-family: var(--font-display);
}

/*
 * Arabic letters join, and tracking, which spaces letters apart, would
 * part them: no Arabic text is tracked, the card's question (tightened for
 * Latin letters) and the uppercase labels included.
 */
h1:lang(ar),
h2:lang(ar),
.newcomer-course-body .newcomer-course-title:lang(ar),
:is(h1, h2, .newcomer-course-title) :lang(ar) {
  font-weight: 700;
  font-synthesis-weight: none;
  letter-spacing: 0;
}

:is(dl.account, dl.facts) dt:lang(ar),
legend:lang(ar),
th:lang(ar),
.card-question > p:lang(ar),
.newcomer-course-body .newcomer-course-eyebrow:lang(ar),
:is(dt, legend, th, .card-question, .newcomer-course-eyebrow) :lang(ar) {
  letter-spacing: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at calc(100% + 5rem) 30rem,
      var(--paper-blue) 0 17rem,
      transparent 17.05rem
    )
    no-repeat,
    radial-gradient(circle at -4rem 11rem, var(--paper-yellow) 0 9rem, transparent 9.05rem)
    no-repeat,
    var(--bg);
  background-attachment: fixed;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* The banner landmark: the top bar and, signed in, the masthead and the
   instance bar, in the column of the main content below it. */
header.site-header {
  display: block;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Below the site header's own bottom margin. */
main.workspace {
  padding-top: 0;
}

/* The first Tab stop, out of sight until focused: past the header to the main content. */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: translateY(calc(-100% - 1rem));
}

.skip-link:focus {
  transform: none;
}

.site-footer {
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: inherit;
  font-weight: 600;
}

.site-footer a:hover {
  color: var(--link);
}

/* The docs, the source code, the changelog, the issue tracker and Discussions, side by side,
   wrapping on a narrow screen: its rows apart enough that each link, under 24px high, has the
   room around it a target needs (WCAG 2.5.8). */
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}

/* The documents of a deck to confirm as its own (UnclaimedDecksNotice), one link each, its
   address: each a target 24px high at least (WCAG 2.5.8), wrapping on a narrow screen. */
.unclaimed-documents a {
  display: inline-block;
  min-height: 24px;
  overflow-wrap: anywhere;
}

/* A deck's documents named again in a sentence (UnclaimedDecksNotice), their addresses joined
   by commas: broken anywhere, so a long one wraps on a narrow screen instead of scrolling the
   page sideways (WCAG 1.4.10). */
.unclaimed-addresses {
  overflow-wrap: anywhere;
}

/* The theme and language choices above every screen: a sun or a moon, then the language list. */
.top-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.5rem;
}

/* A language that could not be fetched is said below the choices, across the bar. */
.top-bar > .error {
  flex-basis: 100%;
  margin: 0;
}

/*
 * The theme toggle, a small outlined 1.5rem by 1rem rectangle: a yellow
 * sun on a pale fill in the light theme, a blue moon on the masthead's
 * navy in the dark one (the --toggle-* roles, palettes.css).
 */
.theme-toggle {
  width: 1.5rem;
  height: 1rem;
  min-height: 0;
  margin: 0.2rem;
  padding: 0;
  color: var(--toggle-icon);
  background: var(--toggle-bg);
  border: none;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--toggle-edge);
}

.theme-toggle:hover:not(:disabled) {
  background: var(--surface-hover);
  box-shadow: 0 0 0 1px var(--toggle-hover-edge);
  transform: none;
}

.theme-toggle svg.icon {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0;
}

/* The language list: a globe, then the language spoken now, named in itself. */
.language-selector {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-muted);
}

.language-selector svg.icon {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.language-selector select {
  font: inherit;
  color: var(--text);
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.language-selector select:hover {
  border-color: var(--text-muted);
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  word-spacing: 0.12em;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  word-spacing: 0.1em;
  text-shadow: 0.06em 0.06em 0 var(--heading-pop);
  transform-origin: left center;
}

h1 {
  --tilt: -3deg;
  font-size: 1.8rem;
  transform: rotate(var(--tilt));
}

h2 {
  --tilt: -2deg;
  font-size: 1.6rem;
  margin: 0 0 0.85rem;
  transform: rotate(var(--tilt));
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0 0 0.85rem;
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* A link laid over its whole row (a deck's name) marks the row, not
   itself, so it takes no highlight of its own; nor does a menu's, which
   shows as its items do. */
a:not(.button, .brand, .wordmark, .deck-open, .library-deck-name, [role="menuitem"]) {
  border-radius: 0.35em;
  transition:
    background-color 0.12s ease,
    box-shadow 0.12s ease;
}

a:not(.button, .brand, .wordmark, .deck-open, .library-deck-name, [role="menuitem"]):hover {
  background-color: var(--link-hover-bg);
  box-shadow:
    0 0 0 0.22em var(--link-hover-bg),
    0 0 0 calc(0.22em + 1.5px) var(--link-hover-border);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* A new screen's heading (or the screen) takes focus after a navigation:
   ringed when the user moves by keyboard, not after a click. */
h2[tabindex="-1"]:focus:not(:focus-visible),
.screen[tabindex="-1"]:focus:not(:focus-visible),
main[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

svg.icon {
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
  flex: none;
}

h2 svg.icon {
  vertical-align: -0.08em;
}

/* After a link that opens in a new tab (ExternalLink). */
svg.external-icon {
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.2em;
  vertical-align: -0.05em;
  flex: none;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

header h1,
header h2 {
  margin: 0;
  margin-right: auto;
}

section > header h2 {
  flex: 1 1 14rem;
}

/* A short number field followed by what it counts; the pair takes the
   field's usual space below, so the text lines up with the field. */
.input-with-unit {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.input-with-unit input {
  width: 5.5rem;
  flex: none;
  margin-bottom: 0;
  padding-inline: 0.6rem;
}

/* Several buttons beside a heading, stacked. */
.header-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
}

h2 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

h2 a:hover {
  color: var(--link);
}

.masthead {
  --link-hover-bg: var(--masthead-link-hover-bg);
  --link-hover-border: var(--masthead-link-hover-border);
  --blob: 6.5rem;
  --blob-x: 2.5rem;
  --dot: 0.5rem;
  --dot-x: 9.6rem;
  --sun: 2.2rem;
  --sun-x: 8.5rem;
  --logo-height: 3.6rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 0.85rem 1rem 0.85rem 0.9rem;
  margin: 1.5rem 0 1.25rem;
  color: var(--masthead-text);
  border: 1px solid var(--masthead-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background:
    radial-gradient(
      circle at calc(100% - var(--dot-x)) 0.95rem,
      var(--accent-red) 0 var(--dot),
      transparent calc(var(--dot) + 0.05rem)
    )
    no-repeat,
    radial-gradient(
      circle at calc(100% - var(--sun-x)) calc(100% + 1.1rem),
      var(--accent-yellow) 0 var(--sun),
      transparent calc(var(--sun) + 0.05rem)
    )
    no-repeat,
    radial-gradient(
      circle at calc(100% - var(--blob-x)) -2rem,
      var(--masthead-blue) 0 var(--blob),
      transparent calc(var(--blob) + 0.05rem)
    )
    no-repeat,
    var(--masthead-bg);
}

/* The logo belongs to the name's link, yet stands left of both the name
   and the session line, as tall as the two. */
.masthead-title {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  min-height: var(--logo-height);
  margin-right: auto;
  padding-left: calc(var(--logo-height) * 1.5 + 0.9rem);
}

.masthead a.brand {
  color: inherit;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.masthead img.logo {
  position: absolute;
  top: 50%;
  left: 0;
  height: var(--logo-height);
  width: auto;
  border-radius: var(--radius);
  border: 2px solid var(--masthead-text);
  box-shadow: var(--logo-shadow);
  transform: translateY(-50%) rotate(-4deg);
  transition: transform 0.15s ease;
}

.masthead a.brand:hover img.logo {
  transform: translateY(-50%) rotate(2deg) scale(1.06);
}

/* The link's ring goes round the name; the logo, outside its box, gets its own. */
.masthead a.brand:focus-visible img.logo {
  outline: 2px solid var(--masthead-text);
  outline-offset: 2px;
}

/* The tilt and the stamp go on the name, not the heading: a transformed
   heading would hold the logo, which is placed from the title's edge. */
.masthead h1 {
  --heading-pop: var(--accent-red);
  margin: 0;
  font-size: 1.9rem;
  overflow-wrap: anywhere;
  transform: none;
  animation: none;
}

.wordmark {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transform: rotate(var(--tilt));
  transform-origin: left center;
  animation: stamp-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) 0.08s backwards;
  transition: transform 0.15s ease;
}

.masthead a.brand:hover .wordmark {
  transform: rotate(calc(var(--tilt) + 1.5deg)) scale(1.06);
}

/* Wraps rather than cutting off who is logged in, at 320px or with the
   reader's own text spacing. */
.session-line {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--masthead-text) 72%, transparent);
  overflow-wrap: anywhere;
}

.session-line a {
  color: inherit;
}

.session-line a:hover {
  color: var(--masthead-text);
}

/* Below the logo and title when they need the width (at 320px, or with
   the reader's own text spacing), still at the right; alone on its row, a
   long label wraps rather than running out of the masthead. */
.masthead > button,
.masthead-actions {
  margin-left: auto;
}

.masthead button {
  background: var(--masthead-text);
  border-color: transparent;
  color: var(--masthead-button-text);
  box-shadow: var(--masthead-button-shadow);
}

.masthead button:hover:not(:disabled),
.masthead button:focus-visible {
  background: var(--masthead-button-hover);
  transform: translateY(-1px) rotate(2deg);
}

.masthead button:active:not(:disabled) {
  transform: rotate(2deg) scale(0.96);
}

/* The primary green is too dark to show on the navy masthead, so
   everything focusable in it rings in the masthead's text color. */
.masthead :focus-visible {
  outline-color: var(--masthead-text);
}

main.landing {
  max-width: 31rem;
  padding-top: 2.5rem;
}

/* The landing's picture and name, one link home: still the picture over the heading. */
a.hero-brand {
  display: block;
  color: inherit;
  text-decoration: none;
}

main.landing > h1:not(.hero-heading),
main.landing > a.hero-brand > h1:not(.hero-heading) {
  margin: 0.25rem 0 0.4rem;
  font-size: 2.8rem;
  text-align: center;
  transform-origin: center;
}

.tagline {
  margin: 0.35rem 0 1.5rem;
  text-align: center;
  text-wrap: balance;
  color: var(--text-muted);
}

/* The maker's note, after the guest's offer: a quote on the cards'
   surface, so the paper's circles behind it do not show through. */
.maker-note {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.maker-note blockquote {
  margin: 0;
}

.maker-note p {
  margin: 0;
}

.maker-note figcaption {
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* The landing picture and the masthead's logo: their img is laid out as
   if the picture element around it, which only picks the file, were not
   there. */
picture.illustration {
  display: contents;
}

/* The picture as the heading: it spells the name, so no text beside it. */
h1.hero-heading {
  margin: 0;
}

img.hero {
  display: block;
  width: min(100%, 21rem);
  height: auto;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}

section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

section > :last-child {
  margin-bottom: 0;
}

form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-top: 1rem;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* No wider than what it is in, however large the text: a field's own width is in characters. */
input,
textarea {
  max-width: 100%;
  font: inherit;
  color: var(--text);
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 0.6rem;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

/* At full opacity: a fainter placeholder drops below 4.5:1. */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* A field's hint sits right under it, above the next label's gap. */
.field-hint {
  margin: -0.4rem 0 0.6rem;
}

input:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--text-muted);
}

/*
 * Text fields show focus with their border and ring; the transparent
 * outline is what forced-colors mode draws, since it drops the shadow.
 * Radios and checkboxes have no border to color, so they keep a solid
 * outline like every other control.
 */
input:not([type="radio"], [type="checkbox"]):focus,
textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

input:is([type="radio"], [type="checkbox"]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

input:disabled,
textarea:disabled {
  background: var(--surface-sunken);
  opacity: 0.7;
}

input[type="radio"],
input[type="checkbox"] {
  min-height: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 0.5rem 0 0;
  vertical-align: -0.15em;
  accent-color: var(--primary);
}

button,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
  /* A label is pressed, not copied: a drag or a double-click over it
     must not select it. */
  -webkit-user-select: none;
  user-select: none;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

button:hover:not(:disabled, [aria-disabled="true"]),
a.button:hover {
  background: var(--surface-hover);
  transform: translateY(-1px);
}

button:active:not(:disabled, [aria-disabled="true"]),
a.button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* A study button stays focusable while its answer saves, so it is only
   aria-disabled; it looks disabled all the same. */
button:disabled,
button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

/* Fading it would fade its focus ring too, below 3:1, so a focused one
   shows in full; aria-disabled still tells assistive tech it is busy. */
button[aria-disabled="true"]:focus-visible {
  opacity: 1;
}

button[type="submit"],
button.primary,
a.button.primary {
  background: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--on-primary);
  box-shadow: var(--primary-bevel);
}

button[type="submit"]:hover:not(:disabled, [aria-disabled="true"]),
button.primary:hover:not(:disabled, [aria-disabled="true"]),
a.button.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

form > button,
form > a.button {
  align-self: flex-start;
}

button[type="submit"] {
  margin-top: 0.25rem;
}

button.danger {
  color: var(--danger);
  border-color: var(--danger-border);
}

button.danger:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--danger-soft);
}

button.icon {
  padding: 0.5rem 0.6rem;
}

.session-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 1rem;
}

.session-actions .primary {
  min-height: 3rem;
  padding: 0.7rem 2.25rem;
  font-size: 1.05rem;
}

.day-reset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.6rem 0.6rem 0.9rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

.day-reset .hint {
  margin-right: auto;
}

.day-reset button {
  min-height: 2.15rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  box-shadow: none;
}

details.add-cards summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.error,
.warning {
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
}

.error {
  margin: 0 0 0.85rem;
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-border);
  border-left-color: var(--danger);
}

/* An error's addresses and statuses, folded away under its plain sentence. */
.error-detail {
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

.error-detail summary {
  cursor: pointer;
}

.error-detail code {
  display: block;
  margin-top: 0.25rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.warning {
  color: var(--warning-text);
  background: var(--warning-soft);
  border-color: var(--warning-border);
  border-left-color: var(--accent-yellow);
  font-size: 0.9rem;
}

/* "Something went wrong": its two ways to report it side by side, a link as a button's neighbour. */
.crash-report {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0.25rem;
}

/* An error nothing caught, over the page that still works, until it is closed. */
.crash-notice {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 100;
  max-width: 40rem;
  max-height: calc(100vh - 2rem);
  margin: 0 auto;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.crash-notice p {
  margin: 0 0 0.5rem;
}

.migration {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}

.migration p,
.failure-why {
  margin: 0 0 0.6rem;
}

.migration ul {
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
}

.migration progress {
  display: block;
  width: 100%;
  margin: 0 0 0.6rem;
}

.step-list {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}

.step-list li {
  display: flex;
  gap: 0.5rem;
  padding: 0.1rem 0;
}

.step-mark {
  flex: 0 0 1.1rem;
  text-align: center;
}

.step-waiting {
  color: var(--text-muted);
}

.step-current {
  font-weight: 600;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.migration .error {
  margin: 0.75rem 0 0;
}

/* An error line or status line stays mounted, so screen readers hear each
   message it is given. Empty, it takes no room, yet stays in the
   accessibility tree, where display: none would take it out. */
.error:empty,
p[role="status"]:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.hint {
  color: var(--text-muted);
  font-size: 0.9em;
}

a.hint,
.warning a,
.error a {
  color: inherit;
}

a.hint:hover {
  color: var(--link);
}

.provider-list {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0.75rem;
}

.provider-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.provider-list li + li {
  margin-top: 0.5rem;
}

.provider-name {
  font-weight: 650;
}

/* Under the provider buttons, set apart: logging in by typing a WebID. */
.webid-login {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.webid-login h3 {
  margin: 0;
  font-size: 1.1rem;
}

.webid-login form {
  margin-top: 0.5rem;
}

/* The whole label is the box's to click; the box keeps its size when the label wraps. */
.webid-login .remember-webid {
  display: inline-flex;
  align-items: center;
}

.webid-login .remember-webid input {
  flex-shrink: 0;
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.onboarding-actions button[type="submit"] {
  align-self: auto;
  margin-top: 0;
}

dl.account,
dl.facts {
  margin: 0 0 0.75rem;
  padding: 0.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

dl.account dt,
dl.facts dt {
  margin-top: 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

dl.account dd,
dl.facts dd {
  margin: 0.1rem 0 0.65rem;
  overflow-wrap: anywhere;
}

dl.facts .sources {
  list-style: none;
  margin: 0;
  padding: 0;
}

dl.facts dd > details {
  margin: 0;
}

.instance-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  margin-bottom: 1rem;
}

.instance-bar-identity {
  display: flex;
  flex: 1 1 13rem;
  flex-direction: column;
  margin-right: auto;
  min-width: 0;
  line-height: 1.3;
}

.instance-bar-identity strong,
.instance-bar-identity .hint {
  overflow-wrap: anywhere;
}

.instance-bar-identity .hint {
  font-size: 0.8rem;
  align-self: flex-start;
  max-width: 100%;
}

.instance-bar a.button {
  min-height: 2.15rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  box-shadow: none;
}

/* An app's link out (the Studio's way back to Solid Memo), under its
   masthead: far enough below the language list that each is a 24px
   target with the room around it (WCAG 2.5.8). */
.header-link {
  margin: 0.25rem 0 1rem;
  text-align: right;
  font-size: 0.9rem;
}

/* A link on its own, not in a sentence, above a card's buttons: a target
   24px high at least (WCAG 2.5.8). */
.report-mistake a {
  display: inline-block;
  padding: 0.25rem 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0 0.25rem;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  min-width: 0;
}

.breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin: 0 0.5rem;
  color: var(--border-strong);
}

.breadcrumbs a {
  overflow-wrap: anywhere;
  padding: 0.25rem 0;
  color: var(--link);
  text-decoration: underline;
}

.breadcrumbs a:hover {
  text-decoration-thickness: 2px;
}

.breadcrumbs [aria-current="page"] {
  font-weight: 700;
}

.storage-list,
.instance-list,
.deck-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.storage-list li,
.instance-list li,
.deck-list > li.deck-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}

.storage-list li:hover,
.instance-list li:hover,
.deck-list > li.deck-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.storage-list .hint,
.instance-list .hint {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.8rem;
}

.deck-list > li.deck-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 0.75rem;
}

/* Three columns: the name with what is due below it, then the study
   action and the menu button beside both, so the name wraps before
   them. The action's parts are laid out by the row itself. */
.deck-list .deck-meta {
  display: contents;
}

/* Under the name's text, past its padding and icon. */
.deck-list .deck-meta > .hint:not(.study-done) {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  padding-left: 1.75rem;
}

.deck-list .deck-meta > button,
.deck-list .study-done,
.deck-list .study-loading {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.deck-list .deck-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.deck-list .deck-meta > button {
  position: relative;
  z-index: 1;
}

/* Above the row's link, like the study button, so a press opens the
   deck's menu rather than the deck; a 44px target, its icon centered.
   It always shows, on every row, so what a deck offers is never
   hidden behind a hover. */
.deck-list .row-menu {
  grid-column: 3;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
}

/* Too narrow for the text size to keep the name beside the study action
   and the menu (a phone at a larger text size, a group a level or more
   in), the name and what is due take a line each, and the action and
   the menu go under them, at the row's end, wrapping when even they do
   not fit, so the name is never squeezed to a letter a line. In em, the
   list's, so the text size counts. The loading bar, narrower, is kept
   on a line of its own by its end margin. */
.deck-list {
  container-type: inline-size;
}

@container (max-width: 17em) {
  .deck-list > li.deck-row {
    display: flex;
    justify-content: flex-end;
  }

  .deck-list > li.deck-row > .deck-open,
  .deck-list > li.deck-row > .name-form,
  .deck-list .deck-meta > .hint:not(.study-done) {
    flex-basis: 100%;
  }

  .deck-list > li.deck-row > .deck-meta > .hint.study-skeleton {
    flex-basis: auto;
    margin-inline-end: calc(100% - 8.25rem);
  }
}

.row-menu {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
}

.row-menu svg.icon {
  margin: 0;
}

/* A row's actions (ui/ActionsMenu.tsx), laid over the page, fixed where
   the script places it under or above its button: no group's clip cuts
   it off, and it never runs past the viewport (the script caps its size
   too, by the viewport as shown), scrolling within itself when the
   viewport is too short for it. */
.actions-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: fade-in 0.12s ease;
}

/* An item: a row the menu's width, 44px tall, its text not to select
   (a link's neither). */
.actions-menu :is([role="menuitem"], [role="menuitemcheckbox"]) {
  justify-content: flex-start;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  padding-inline-start: calc(0.75rem + var(--depth, 0) * 1rem);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  box-shadow: none;
  color: var(--text);
  font-weight: 500;
  text-align: start;
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-user-select: none;
  user-select: none;
}

a[role="menuitem"] {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  line-height: 1.2;
}

.actions-menu :is([role="menuitem"], [role="menuitemcheckbox"]):hover:not([aria-disabled="true"]),
.actions-menu :is([role="menuitem"], [role="menuitemcheckbox"]):focus {
  background: var(--surface-hover);
  transform: none;
}

/* Ringed inside, clear of the menu's own clipping. */
.actions-menu :is([role="menuitem"], [role="menuitemcheckbox"]):focus-visible {
  outline-offset: -2px;
}

/* An item that is on or off: a tick when on, its room kept when off. */
.actions-menu [role="menuitemcheckbox"]::before {
  content: "";
  display: inline-block;
  width: 1.25em;
}

.actions-menu [role="menuitemcheckbox"][aria-checked="true"]::before {
  content: "✓";
}

.actions-menu [role="menuitem"].danger {
  color: var(--danger);
}

.actions-menu [role="menuitem"].danger:hover:not([aria-disabled="true"]),
.actions-menu [role="menuitem"].danger:focus {
  background: var(--danger-soft);
}

/* One that cannot be done now: muted, never highlighted, in full
   opacity all the same, so that its focus ring shows at full strength
   (the fade of a busy button is undone as it is focused). */
.actions-menu [role="menuitem"][aria-disabled="true"] {
  color: var(--text-muted);
  opacity: 1;
}

.actions-menu [role="menuitem"][aria-disabled="true"]:focus {
  background: none;
}

.menu-separator {
  flex: none;
  height: 1px;
  margin: 0.3rem 0.25rem;
  background: var(--border);
}

.menu-group {
  display: flex;
  flex-direction: column;
}

.menu-heading {
  padding: 0.3rem 0.75rem 0.15rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  -webkit-user-select: none;
  user-select: none;
}

/* A group: its header, then what it holds, a level in. Not a row
   itself, so it has no row's box. */
.deck-list > li.deck-group {
  display: block;
}

.deck-group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.deck-group-header .group-toggle {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.75rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  padding: 0.35rem 0.4rem;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: start;
  font-size: 1rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.deck-group-header .group-toggle:hover:not(:disabled) {
  background: var(--surface-hover);
  transform: none;
}

.group-toggle svg.icon {
  margin-right: 0;
}

.group-toggle svg.icon:first-child {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.group-toggle[aria-expanded="true"] svg.icon:first-child {
  transform: rotate(90deg);
}

.group-toggle .group-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.group-toggle .hint {
  font-weight: 400;
}

/* Right-aligned beside the name. */
.deck-group-header .row-menu {
  margin-inline-start: auto;
}

/* A name edited in place (ui/NameEditor.tsx): a group's, in place of
   its fold button, or a deck's, in place of its link. */
.name-form {
  flex: 1 1 12rem;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.name-form input {
  flex: 1;
  min-width: 0;
  margin: 0;
  -webkit-user-select: text;
  user-select: text;
}

.name-form button[type="submit"] {
  flex: none;
  align-self: center;
  margin: 0;
}

/* What a group holds folds away to nothing: its row shrinks to 0fr and,
   once shut, it is hidden (and inert, from the markup). The clip's
   padding leaves room for focus rings, its margin takes it back. */
.deck-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows 0.22s cubic-bezier(0.2, 0.8, 0.3, 1),
    visibility 0s;
}

.deck-group-body[data-collapsed] {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition-delay: 0s, 0.22s;
}

.deck-group-clip {
  min-height: 0;
  overflow: hidden;
  padding: 0.25rem;
  margin: -0.25rem;
}

/* A level in, by a rule on its left; from the fifth level on no further,
   so a deep tree keeps its width (the rule still marks the level). */
.deck-group-clip > .deck-list {
  margin: 0.5rem 0 0;
  margin-inline-start: calc(1.25rem * clamp(0, 5 - var(--depth, 1), 1));
  padding-inline-start: 0.5rem;
  border-inline-start: 2px solid var(--border);
}

.deck-list .name-form {
  grid-column: 1;
  grid-row: 1;
}

.deck-group-empty {
  margin: 0.5rem 0 0;
  padding-inline-start: 1.75rem;
}

/* Dragging rows (ui/deckTree/useDragReorder.ts). A row is a handle: a
   long press on it must not select its text, show a link's callout or
   drag the link the browser's way. The page still pans as usual; a
   touchmove is canceled only while a row is lifted. */
.deck-list > li.deck-row,
.deck-group-header {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.deck-list .deck-open {
  -webkit-user-drag: none;
}

html.drag-active {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

/* The line a drop would land on, indented as deep as the place it
   stands for (as the lists are: 1.25rem to the fifth level, then the
   rule's .5rem and 2px), and labeled with its group past that. */
.deck-tree {
  position: relative;
}

.drop-line {
  position: absolute;
  top: 0;
  inset-inline: calc(min(var(--line-depth, 0), 4) * 1.25rem + var(--line-depth, 0) * (0.5rem + 2px))
    0;
  z-index: 2;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--primary);
  pointer-events: none;
  transition: transform 0.08s ease;
}

.drop-line::before {
  content: "";
  position: absolute;
  inset-inline-start: -4px;
  top: -3.5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
}

/* The group's name wraps above the line rather than being cut short,
   however large the text. */
.drop-line[data-label]::after {
  content: attr(data-label);
  position: absolute;
  inset-inline-end: 0;
  bottom: 5px;
  max-width: 80%;
  padding: 0 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* While a row is lifted, each open group ends in room enough to aim
   past it, the rows stay as they are under the pointer, and they no
   longer slide in as they come once moved. */
.deck-tree[data-dragging] .deck-group-body:not([data-collapsed]) > .deck-group-clip {
  padding-bottom: calc(0.25rem + 20px);
}

.deck-tree[data-dragging] .deck-list > li.deck-row:hover {
  border-color: var(--border);
  background: var(--surface-sunken);
}

.deck-tree[data-arranged] .deck-list li {
  animation: none;
}

/* A row an edit brings into the list, a new group's header say, comes
   in with a bounce; the rows already there slide to their new places
   (ui/deckTree/useFlip.ts, which takes the class off again). */
.deck-tree[data-arranged] .deck-list .row-enter {
  animation: bounce-in 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* A group deleted: its header folds away and fades, and what it held
   then takes its place (ui/DeckListScreen.tsx, which waits for this
   animation's end by its name). Out of reach of the pointer meanwhile. */
.deck-list > li.deck-group.leaving {
  pointer-events: none;
}

.deck-group.leaving > .deck-group-header {
  overflow: hidden;
  animation: group-leave 0.22s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes group-leave {
  from {
    max-height: 8rem;
  }

  to {
    max-height: 0;
    padding-block: 0;
    border-width: 0;
    opacity: 0;
  }
}

/* Held by a finger or pen: it gives a little until it lifts. The scale
   property, not a transform, so it never fights a row's movement. */
.deck-list > li.deck-row,
.deck-group-header {
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    scale 0.4s linear;
}

.press-pending {
  scale: 0.98;
}

/* Lifted: what it leaves behind, faded and dashed. */
.deck-list > li.drag-source {
  opacity: 0.35;
}

.drag-source {
  border-style: dashed;
}

.drop-combine {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  background: var(--primary-soft);
  scale: 1.02;
}

/* In a group, whose clip leaves 0.25rem round its rows, the outline
   just fits, and the row grows no wider. */
.deck-group-clip .drop-combine {
  outline-offset: 0;
  scale: none;
}

.deck-list > li.deck-row.drop-combine {
  background: var(--primary-soft);
}

.drop-into {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
  background: var(--primary-soft);
}

/* The copy that follows the pointer, placed by a transform from the
   viewport's top left. */
.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  scale: 1.03;
  overflow-wrap: anywhere;
  pointer-events: none;
  animation: lift 0.12s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.drag-ghost svg.icon {
  margin-right: 0;
}

@keyframes lift {
  from {
    scale: 1;
    box-shadow: none;
  }
}

/* Takes the focus for a moment as a drop makes a group, so a phone
   brings its keyboard up for the name. Out of sight, but 16px, so that
   focusing it does not zoom the page. */
.focus-proxy {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  pointer-events: none;
}

.deck-list .study-counts {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.deck-list .study-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 0.6rem;
  font-size: 1.25rem;
  color: var(--primary);
}

.deck-list .study-done svg.icon {
  margin-right: 0;
  vertical-align: 0;
  stroke-width: 2.5;
}

.deck-list .study-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 0.6rem;
  animation: fade-in 0.3s ease 0.15s backwards;
}

.deck-list .study-loading .loading-dots {
  transform: scale(0.7);
}

/* A name that wraps goes on under its first word, past the icon (1em
   and its 0.35em margin), where the hint under it starts too. */
.deck-list .deck-open {
  grid-column: 1;
  grid-row: 1;
  overflow-wrap: anywhere;
  padding: 0.15rem 0.4rem 0 calc(0.4rem + 1.35em);
  text-indent: -1.35em;
  font-weight: 650;
  font-size: 1rem;
  color: inherit;
  text-decoration: underline;
}

/* "from <host>": a copy of a release added from a link, after its name. */
.deck-list .deck-source {
  display: inline-block;
  margin-inline-start: 0.5em;
  text-indent: 0;
  font-weight: 400;
  font-size: 0.85rem;
  text-decoration: none;
}

/* "New release": the library has a newer release of the copy, after its
   name; a tag in the primary color, so it is not missed among the hints. */
.deck-list .deck-release {
  display: inline-block;
  margin-inline-start: 0.5em;
  padding: 0 0.45em;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  text-indent: 0;
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* A library deck's link, shown when the browser would not copy it: a row
   of its own under the deck's actions. */
.share-link {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  gap: 0.35rem;
}

/* The search and topics, outside the import form so Enter never imports;
   laid out as the form is. */
.library-filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-top: 1rem;
}

.library-filters + form {
  margin-top: 0.35rem;
}

.library-topics,
.library-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.library-topics legend,
.library-languages legend {
  width: 100%;
}

.library-topics label.checkbox-option,
.library-languages label.checkbox-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.library-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.library-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}

.library-list li:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.library-list input[type="checkbox"],
.library-list .hint {
  flex-shrink: 0;
}

/* The checkbox's label is a 44px target above the row's link, over the
   row's padding so the box stays where it was. */
.library-pick {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: -0.5rem -0.5rem -0.5rem -0.75rem;
  cursor: pointer;
}

.library-list input[type="checkbox"] {
  margin: 0;
}

.library-list .library-deck-name {
  grid-column: 2;
  grid-row: 1;
  overflow-wrap: anywhere;
  padding: 0.15rem 0 0;
  font-size: 1rem;
  font-weight: 650;
  color: inherit;
  text-decoration: underline;
}

.library-list .library-deck-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* As in the deck list: the checkbox beside the name, which wraps,
   and the size under the name, followed by the card languages and the
   imported badge, which wrap below it when there is no room. */
.library-deck-meta {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

/* Beside the name and the size, as Study is in the deck list. */
.library-list .library-preview {
  position: relative;
  z-index: 1;
  grid-column: 3;
  grid-row: 1 / span 2;
}

.library-list .hint {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A deck's card languages may be many: they shrink and wrap, a name at a time. */
.library-list .library-card-languages {
  flex-shrink: 1;
  min-width: 0;
  white-space: normal;
}

.provenance {
  display: block;
  margin: -0.25rem 0 0.75rem;
}

.deck-description {
  display: block;
  margin-top: 0.15rem;
}

.library-imported,
.library-course {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.75rem;
}

.library-list + button {
  align-self: flex-start;
}

.hint a {
  color: inherit;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem 1rem;
}

legend {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 0.4rem;
}

/* Not the Studio's ReadOnlyScope, which only holds a screen's controls; :where keeps the specificity. */
fieldset:where(:not(.studio-scope)) label {
  display: block;
  margin: 0.3rem 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
}

fieldset:where(:not(.studio-scope)) .hint {
  margin: 0.25rem 0 0;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

th,
td {
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0.8rem;
  text-align: start;
  vertical-align: middle;
}

tr:last-child > th,
tr:last-child > td {
  border-bottom: none;
}

th {
  background: var(--surface-sunken);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

td.clickable {
  padding: 0;
}

td.clickable a {
  display: block;
  padding: 0.6rem 0.8rem;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

td.clickable a:hover {
  background-color: transparent;
  box-shadow: none;
}

/* Inside the cell, so the table's rounded overflow:hidden does not clip the ring. */
td.clickable a:focus-visible {
  outline-offset: -4px;
}

td.clickable:first-child a {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
}

.card-table td {
  overflow-wrap: anywhere;
}

/* The back is plain cell text, so screen readers read it; a hidden link
   laid over it keeps the whole cell a pointer target. */
td.clickable.back-cell {
  position: relative;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
}

td.clickable a.cell-overlay {
  position: absolute;
  inset: 0;
  padding: 0;
}

/* A cell still, though it shares the flex `.actions` class: as a flex box it
   came apart from its row, its border cutting under the button mid-row. */
.card-table td.actions {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
}

.card-table td button {
  min-height: 2.15rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  box-shadow: none;
}

.card-table td button + button {
  margin-left: 0.4rem;
}

/* On a narrow screen, or in large text, the cells keep less room about
   their text, and a column's name may break, rather than widen the page. */
@media (max-width: 30rem) {
  .card-table th,
  .card-table td,
  .card-table td.clickable a,
  .card-table td.clickable.back-cell {
    padding-inline: 0.45rem;
  }

  .card-table th {
    overflow-wrap: anywhere;
  }
}

.card-table tbody tr:has(td.clickable):hover td {
  background: var(--surface-hover);
}

/* A retired card: kept, but no longer studied, so it reads as set aside. */
.card-table tr.retired td {
  color: var(--text-muted);
}

/* A card's mark in the Browser: retired, or with a side that does not say its language. */
.retired-tag,
.unstated-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.75rem;
  vertical-align: 0.1em;
}

/* A card's language marks, under its front: they wrap within the column
   rather than size it by their full length (only by min-width), so at
   320px the back keeps its share of the row; a mark wrapped onto two
   lines stays a rounded box. */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 5rem;
  /* In line with the front's text, over the bottom of its link's padding. */
  margin: -0.35rem 0.8rem 0.6rem;
  contain: inline-size;
}

.card-tags .unstated-tag {
  margin-left: 0;
  border-radius: 0.5rem;
}

/* The scheduler the preferences recommend, marked beside its name. */
.recommended-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.45rem;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 650;
  vertical-align: 0.1em;
}

.retired-toggle label {
  display: inline-flex;
  align-items: center;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.pager span {
  color: var(--text-muted);
  font-size: 0.9em;
}

form.card-edit {
  margin: 0.25rem 0 0.75rem;
}

.edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
}

.edit-actions button[type="submit"] {
  align-self: auto;
  margin-top: 0;
}

.practice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 17rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.25rem 1.5rem;
  margin: 1rem 0 0;
  text-align: center;
  background: linear-gradient(var(--surface-sunken), var(--surface-sunken)) padding-box;
  box-shadow:
    inset 0 0 0 4px var(--surface),
    var(--shadow-sm);
}

.card-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}

/* A face's own paragraphs: not those inside Markdown blocks (.md), which
   have their own sizes below. */
.card-face > p,
.card-face > .md {
  margin: 0;
  overflow-wrap: anywhere;
  /* Fredoka kerns "A" into "V", "T", "Y"…, and "Å" and "Ä" share those pairs,
     so at card sizes the ring or dots land on the next letter ("ÅVC"). Card
     text is any language's, so it is set without kerning. */
  font-kerning: none;
}

.card-question > p {
  /* Full size up to 12 characters, then a little smaller per character, down
     to 0.6 of it at 52; never under 1.5rem, so it stays above the answer. */
  --fit: clamp(0.6, 1 - (var(--text-length, 0) - 12) / 100, 1);
  font-size: max(1.5rem, clamp(2rem, 9vw * var(--text-scale), 3.25rem) * var(--fit));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.card-answer {
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border-strong);
}

.card-answer > p {
  font-size: clamp(1.4rem, 5.5vw * var(--text-scale), 1.8rem);
}

.card-face > p.hint {
  font-size: 0.9em;
}

/* The back's label: how the answer relates to the front, a small caption above it. */
.card-face > p.card-label {
  margin-bottom: -0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 400;
  text-align: center;
}

/* A side's note: what holds of it, set under its text, quieter than it. */
.card-face > .card-note {
  margin-top: -0.4rem;
  max-width: 36rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.card-image {
  display: block;
  max-width: 100%;
  max-height: 14rem;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.card-back .card-image {
  max-height: 10rem;
}

/* A card's picture with a button laid over it that enlarges it
   (ui/ZoomableImage.tsx). Its width is the picture's, up to the
   picture's cap, so the button covers the picture and its focus ring
   hugs it. */
.picture-zoom {
  position: relative;
  max-width: min(100%, 24rem);
}

.picture-zoom-button {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  box-shadow: none;
  cursor: zoom-in;
}

.picture-zoom-button:hover:not(:disabled, [aria-disabled="true"]),
.picture-zoom-button:active:not(:disabled, [aria-disabled="true"]) {
  background: none;
  transform: none;
}

/* The picture keeps its place, unseen, while its copy is enlarged:
   transparent, not visibility: hidden, which would take its alt text
   out of what screen readers read. */
.picture-zoom .zoomed-away {
  opacity: 0;
}

/* The enlarged copy, over everything, on a dimmed page; a tap anywhere
   puts it back. Only its transform and the dimming's opacity change.
   It takes every touch, so a pinch zooms the copy, not the page. */
.picture-zoom-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  cursor: zoom-out;
  touch-action: none;
}

.picture-zoom-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--zoom-backdrop);
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

/* Thrown, the page shows through as the copy goes. */
.picture-zoom-layer.entered::before {
  opacity: var(--picture-zoom-dim);
}

/* Under a finger or the mouse, the copy follows it at once. */
.picture-zoom-layer.moving::before,
.picture-zoom-layer.moving .picture-zoom-image {
  transition: none;
}

/* On the picture's own backing, so a transparent drawing stays as
   legible as in its place rather than sitting on the dimmed page. */
.picture-zoom-image {
  position: absolute;
  max-width: none;
  background: var(--surface);
  transform-origin: 0 0;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.card-thumbnail {
  height: 1.5rem;
  width: auto;
  margin-right: 0.5rem;
  vertical-align: -0.4em;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.practice-card > button {
  min-height: 3rem;
  padding: 0.7rem 2.5rem;
  font-size: 1.05rem;
  background: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--on-primary);
}

.practice-card > button:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* A picture of a deck added by link, until the learner chooses to show its
   host's: nothing is requested, and the choice stands in its place. */
.card-picture-hidden {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--text-muted);
  border-radius: var(--radius-sm);
  text-align: center;
}

.card-picture-hidden p {
  margin: 0;
}

.card-pictures-hidden {
  margin-bottom: 0.75rem;
}

.card-pictures-hidden p {
  margin: 0 0 0.25rem;
}

.card-thumbnail-hidden {
  display: inline-block;
  width: 1.5rem;
  border-style: dashed;
  border-color: var(--text-muted);
}

/* The question and the answer each take focus in study, so a keyboard or
   screen reader user is taken to what just came up. */
.study-face {
  width: 100%;
  border-radius: var(--radius-sm);
}

.study-face:focus-visible {
  outline-offset: 0.5rem;
}

/* Says which keys reveal and answer; a touch screen has none to press. */
.study-keys {
  margin: -0.5rem 0 0;
}

@media (hover: none) and (pointer: coarse) {
  .study-keys {
    display: none;
  }
}

.grade-prompt {
  margin: 0 0 -0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.quality-buttons {
  display: grid;
  /* Columns as narrow as the screen asks, not their buttons' text: at the
     largest text size and 320px wide, the six grades of SM-2 stay within
     it (WCAG 1.4.10). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  max-width: 30rem;
}

.quality-buttons button {
  --grade: var(--text-muted);
  min-height: 2.75rem;
  /* The interval goes under the grade when both don't fit side by side. */
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--grade) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--grade) 45%, var(--surface));
}

.quality-buttons button:hover:not(:disabled, [aria-disabled="true"]) {
  background: color-mix(in srgb, var(--grade) 24%, var(--surface));
}

.quality-buttons button[data-grade="0"] {
  --grade: var(--grade-0);
}

.quality-buttons button[data-grade="1"] {
  --grade: var(--grade-1);
}

.quality-buttons button[data-grade="2"] {
  --grade: var(--grade-2);
}

.quality-buttons button[data-grade="3"] {
  --grade: var(--grade-3);
}

.quality-buttons button[data-grade="4"] {
  --grade: var(--grade-4);
}

.quality-buttons button[data-grade="5"] {
  --grade: var(--grade-5);
}

.quality-buttons.minimal {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The interval a grade gives, under its name. */
.grade-interval {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: normal;
}

/* Undo the last answer, under the card or beside End session: a quiet,
   text-like button, as most answers are never undone; still 24px high
   at least (WCAG 2.5.8). */
.study-undo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 1rem;
}

/* Its text lines up with what is above and below it, past its padding. */
.study-undo button {
  min-height: 2rem;
  margin-inline-start: -0.5rem;
  padding: 0.25rem 0.5rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: underline;
}

.study-undo .study-keys {
  margin: 0;
  font-size: 0.85rem;
}

/* The end of a session: End session, the next step, and Undo after it. */
.study-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.study-end .study-undo {
  margin-top: 0;
}

@media (max-width: 30rem) {
  .quality-buttons.minimal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Courses (docs/courses.md): the chapter list, a step's theory and its
   multiple-choice questions. */
.library-course {
  border-color: var(--primary);
  color: var(--primary);
}

.course-finished {
  color: var(--primary);
  font-weight: 600;
}

/* A finished course's link back to the decks, under what it says. */
.course-finished + .actions {
  margin-top: 0.75rem;
}

/* The word on a chapter just completed, as the learner comes back to the
   course's page: it bounces in, and takes the focus. */
.course-cheer {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0, var(--paper-yellow), transparent 60%), var(--primary-soft);
  animation: bounce-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) 0.1s backwards;
}

.course-cheer p {
  margin: 0;
}

.course-cheer p:first-child {
  color: var(--primary);
  font-weight: 600;
}

.course-cheer:focus-visible {
  outline-offset: 0.25rem;
}

/* The chapter just completed: its Done badge pops, and sparkles burst
   from it. A sparkle at rest is transparent, so with motion reduced
   (every animation stopped) there are none; it stays within the row's
   padding and the page's, so it widens nothing at phone width. */
.course-chapter.just-completed .course-state {
  position: relative;
  animation: badge-pop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 0.35s backwards;
}

@keyframes badge-pop {
  from {
    transform: scale(0.4);
  }

  55% {
    transform: scale(1.3);
  }
}

.course-sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.course-sparkles > span {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  margin: -0.2rem;
  border-radius: 50%;
  background: var(--accent-yellow);
  opacity: 0;
  animation: sparkle 0.7s ease-out 0.5s backwards;
}

.course-sparkles > span:nth-child(even) {
  background: var(--primary);
}

@keyframes sparkle {
  from {
    opacity: 1;
    transform: rotate(var(--angle)) translateY(0) scale(0.4);
  }

  60% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: rotate(var(--angle)) translateY(-1.5rem) scale(1);
  }
}

/* Confetti over the page for a course just completed (ui/Confetti.tsx):
   fixed over the viewport and clipped to it, so it neither moves nor
   widens the page, out of the pointer's way, and over in under five
   seconds (WCAG 2.2.2). Three shooters, unseen, stand along the bottom
   edge and pop one after the other: their pieces shoot up fast, slow at
   the top of their arc, then sway, spin and flip slowly back down. A
   piece at rest is transparent, so with motion reduced there is no
   confetti at all, not a frozen scatter of it. */
.confetti {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
}

.confetti-shooter {
  position: absolute;
  bottom: 0;
  left: var(--x);
}

.confetti-shooter > span {
  position: absolute;
  bottom: 0;
  left: -0.25rem;
  width: 0.5rem;
  height: 0.8rem;
  border-radius: 2px;
  background: var(--primary);
  opacity: 0;
  animation:
    confetti-shoot var(--time) calc(var(--delay) + var(--jitter)),
    confetti-flutter var(--time) linear calc(var(--delay) + var(--jitter));
}

.confetti-shooter > span:nth-child(4n + 2) {
  background: var(--accent-yellow);
}

.confetti-shooter > span:nth-child(4n + 3) {
  background: var(--accent-red);
}

.confetti-shooter > span:nth-child(4n) {
  background: var(--accent-blue);
}

.confetti-shooter > span:nth-child(3n) {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

/* Two motions at once. The flight (the translate property): out of the
   shooter fast, easing off to the top of the arc in under a second, then
   down, gathering speed and never pausing until it is off the bottom.
   The flutter (transform), on top of it: a sway from side to side, each
   swing slowing as it turns, in step with the screen's width so it stays
   on a phone's, and a spin and flip all the way. */
@keyframes confetti-shoot {
  from {
    opacity: 1;
    translate: 0 1rem;
    animation-timing-function: cubic-bezier(0.1, 0.8, 0.35, 1);
  }

  15% {
    translate: var(--dx) calc(-1 * var(--rise));
    animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.7);
  }

  90% {
    opacity: 1;
  }

  to {
    opacity: 0;
    translate: var(--dx) 1rem;
  }
}

@keyframes confetti-flutter {
  from {
    transform: translateX(0) rotate(0) rotateY(0);
  }

  15% {
    transform: translateX(0) rotate(calc(var(--spin) * 0.3)) rotateY(calc(var(--flip) * 0.2));
    animation-timing-function: ease-in-out;
  }

  45% {
    transform: translateX(var(--sway)) rotate(calc(var(--spin) * 0.55))
      rotateY(calc(var(--flip) * 0.5));
    animation-timing-function: ease-in-out;
  }

  72% {
    transform: translateX(calc(-1 * var(--sway))) rotate(calc(var(--spin) * 0.8))
      rotateY(calc(var(--flip) * 0.75));
    animation-timing-function: ease-in-out;
  }

  to {
    transform: translateX(var(--sway)) rotate(var(--spin)) rotateY(var(--flip));
  }
}

/* The word before a chapter's final review, and its two ways on. */
.course-review-start p {
  margin: 0 0 0.75rem;
}

.course-review-cheer {
  color: var(--primary);
  font-weight: 600;
}

.course-chapters {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.course-chapter {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.course-chapter h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.course-chapter > p,
.course-chapter > .md {
  grid-column: 1 / -1;
  margin: 0;
}

.course-chapter.locked {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.course-chapter-number {
  color: var(--text-muted);
  font-weight: 400;
}

.course-state {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.course-state.open {
  border-color: var(--primary);
  color: var(--primary);
}

.course-state.done {
  border-color: var(--primary-fill);
  background: var(--primary-fill);
  color: var(--on-primary);
}

.course-step h3 {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
}

.course-progress {
  display: block;
  width: 100%;
  height: 0.4rem;
  margin: 0 0 1rem;
  accent-color: var(--primary);
}

/* Which chunk of a step's theory is shown, when it has more than one. */
.course-part {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* A step's theory: prose to read, at a comfortable measure. */
.course-theory {
  max-width: 40rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--accent-blue);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 1.1rem;
  line-height: 1.65;
}

.course-theory p:last-child {
  margin-bottom: 0;
}

/* On from a step's theory to its questions, which are asked without it. */
.course-to-questions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 40rem;
  margin-top: 1.5rem;
}

.course-to-questions .hint {
  margin: 0;
}

.course-check-heading {
  margin: 1.5rem 0 0.5rem;
}

.course-question {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40rem;
}

/* A question is a sentence, not a word to recall: set as large text, not
   at a study card's size. */
.course-question .card-question > p {
  font-size: 1.3rem;
  font-weight: 600;
  text-align: start;
}

.course-question .card-face {
  align-items: flex-start;
}

.multiple-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.choices {
  display: grid;
  gap: 0.5rem;
  width: 100%;
}

/* Each option is its radio's label: the whole row, 44px tall at least, is
   its target. */
.choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.choice:hover:not(:has(input:disabled)) {
  background: var(--surface-hover);
}

.choice:has(input:checked) {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.choice:has(input:disabled) {
  cursor: default;
}

.choice-number {
  flex: none;
  min-width: 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.choice-text {
  flex: 1;
}

.choice-mark {
  flex: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.choice.choice-right {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.choice.choice-right .choice-mark {
  color: var(--primary);
}

.choice.choice-wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 1px var(--danger);
}

.choice.choice-wrong .choice-mark {
  color: var(--danger);
}

.course-verdict {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.course-verdict.right {
  color: var(--primary);
}

.course-verdict.wrong {
  color: var(--danger);
}

.course-feedback,
.course-review-end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  border-radius: var(--radius-sm);
}

/* An answer on the page ahead of time, for its picture's sake (useLoadsAhead). */
.course-feedback[hidden] {
  display: none;
}

.course-feedback:focus-visible,
.course-review-end:focus-visible {
  outline-offset: 0.5rem;
}

.course-why {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
}

/* Why an option in Markdown is wrong: "Why not:" on a line of its own, the
   note's blocks under it. */
.course-why-label {
  display: block;
  font-weight: 600;
}

.course-why > p,
.course-why > .md {
  margin: 0.25rem 0 0;
}

.course-right-answer {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.course-right-answer .card-answer {
  align-items: flex-start;
  padding-top: 0;
  border-top: none;
}

.course-right-answer .card-answer > p {
  font-size: 1.15rem;
  text-align: start;
}

fieldset:where(:not(.studio-scope)) label.radio-option .hint {
  display: block;
  margin: 0.1rem 0 0.4rem 1.6rem;
}

/*
 * A palette's swatch in the preferences, in the palette's own colors
 * (its data-palette, palettes.css): its background, its text, its
 * primary fill, and the answer buttons' first and last grades.
 */
.palette-swatch {
  display: inline-flex;
  gap: 0.2rem;
  margin: 0 0.4rem 0 0.1rem;
  padding: 0.2rem 0.3rem;
  vertical-align: middle;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.palette-swatch i {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.palette-swatch .swatch-text {
  background: var(--text);
}

.palette-swatch .swatch-primary {
  background: var(--primary-fill);
}

.palette-swatch .swatch-worst {
  background: var(--grade-0);
}

.palette-swatch .swatch-best {
  background: var(--grade-5);
}

/* A palette of the user's own in the Colors group: its choice, and a
   link to edit it beside it. */
.own-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.palette-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/*
 * "Reset colors", in the Standard colors (its data-palette, palettes.css)
 * whatever palette the page is in, so it can be read and pressed when a
 * palette of the user's own cannot.
 */
.reset-colors button {
  color: var(--text);
  background: var(--surface);
  border-color: var(--control-border);
}

/* The palette editor (ui/PaletteEditorScreen.tsx). */
.palette-theme {
  margin: 1.5rem 0;
}

.color-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.color-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.color-field input[type="color"] {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.15rem;
}

.color-field code {
  margin-left: auto;
  color: var(--text-muted);
}

/*
 * A theme's colors as they are: the preview is given every color a
 * palette paints (its style, held to #rrggbb) and draws with those alone.
 */
.palette-preview {
  margin: 1rem 0;
  padding: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.palette-preview p {
  margin: 0 0 0.5rem;
}

.palette-preview .preview-heading {
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.palette-preview .preview-muted {
  color: var(--text-muted);
}

.palette-preview .preview-link {
  color: var(--link);
  text-decoration: underline;
}

.palette-preview .preview-danger {
  color: var(--danger);
}

.palette-preview .preview-warning {
  color: var(--warning-text);
}

.palette-preview .preview-button {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  color: var(--on-primary);
  background: var(--primary-fill);
  border-radius: var(--radius-sm);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.palette-preview .preview-field {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
}

.palette-preview .preview-grades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

/* An answer button's tint, as .quality-buttons draws it: its grade at 24% over the surface. */
.palette-preview .preview-grades span {
  min-width: 2rem;
  padding: 0.2rem 0.5rem;
  text-align: center;
  background: color-mix(in srgb, var(--preview-grade) 24%, var(--surface));
  border: 2px solid var(--preview-grade);
  border-radius: var(--radius-sm);
}

.preview-grade-0 {
  --preview-grade: var(--grade-0);
}

.preview-grade-1 {
  --preview-grade: var(--grade-1);
}

.preview-grade-2 {
  --preview-grade: var(--grade-2);
}

.preview-grade-3 {
  --preview-grade: var(--grade-3);
}

.preview-grade-4 {
  --preview-grade: var(--grade-4);
}

.preview-grade-5 {
  --preview-grade: var(--grade-5);
}

.palette-theme .table-scroll {
  overflow-x: auto;
}

table.contrast-table td,
table.contrast-table th {
  padding: 0.25rem 0.5rem;
  text-align: start;
}

/* A pair's result says it in words, and in its color too. */
table.contrast-table tr.low td:last-child {
  color: var(--warning-text);
  font-weight: 600;
}

table.contrast-table tr.refused td:last-child {
  color: var(--danger);
  font-weight: 600;
}

.palette-status {
  font-weight: 600;
}

.palette-warning {
  padding: 0.75rem 1rem;
  color: var(--warning-text);
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
}

.palette-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* A text size's sample line, at the size it names. */
.text-size-sample {
  color: var(--text);
  line-height: 1.4;
}

/* A text's language: a button under its field, opening in place onto
   radios. Each radio's row is a 24px target at least (WCAG 2.5.8), and a
   long language name wraps rather than widening the page at 320px. */
.language-picker {
  margin: 0.35rem 0 0;
}

/* A language still to choose, as the form's message (perhaps far below,
   under a card's last field) says: the button itself shows it too. */
.language-picker > button[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

/* A text and its language as one control (LangTextField): the box draws
   the border, the text and the button inside it borderless, the button at
   the text's end behind a divider (on the left in right-to-left text),
   or under a textarea as a bar of its own. The box shows focus with one
   ring, the button its own outline inside it, so which of the two has
   focus still shows. A language name too long for half the row wraps in
   its button rather than squeezing the text at 320px. Positioned, so the
   button's hidden full text ("Language: Swedish") stays inside it. */
.text-with-language {
  --joined-radius: var(--radius);
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--control-border);
  border-radius: var(--joined-radius);
  background: var(--surface);
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.text-with-language:hover {
  border-color: var(--text-muted);
}

.text-with-language:focus-within {
  outline: 2px solid transparent;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.text-with-language:has(> textarea) {
  flex-direction: column;
}

.text-with-language > :is(input, textarea) {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.text-with-language > :is(input, textarea):focus {
  box-shadow: none;
}

.text-with-language > button {
  flex: none;
  max-width: 50%;
  margin: 0;
  padding-block: 0.25rem;
  border: none;
  border-inline-start: 1px solid var(--border-strong);
  border-radius: 0;
  border-start-end-radius: calc(var(--joined-radius) - 1px);
  border-end-end-radius: calc(var(--joined-radius) - 1px);
  background: var(--surface-sunken);
  box-shadow: none;
  font-weight: 500;
  color: var(--text-muted);
  white-space: normal;
  overflow-wrap: break-word;
}

.text-with-language > textarea + button {
  max-width: none;
  min-height: 2rem;
  justify-content: flex-start;
  border-inline-start: none;
  border-block-start: 1px solid var(--border-strong);
  border-start-end-radius: 0;
  border-end-start-radius: calc(var(--joined-radius) - 1px);
}

.text-with-language > button:hover {
  transform: none;
}

/* Under the pointer a chosen language darkens; one still to choose, or
   refused, keeps its warning or danger color. */
.text-with-language
  > button:hover:not([aria-disabled="true"], .language-unchosen, [aria-invalid="true"]) {
  color: var(--text);
}

.text-with-language > button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}

/* The caret keeps to the name's last word (a no-break space), and
   points up while the radios are open. */
.text-with-language .language-name::after {
  content: "\A0\25BE";
}

.text-with-language > button[aria-expanded="true"] .language-name::after {
  content: "\A0\25B4";
}

/* No language chosen yet: the button asks, in the warning's colors. */
.text-with-language > button.language-unchosen {
  background: var(--warning-soft);
  color: var(--warning-text);
  font-weight: 600;
}

/* Its text refused (empty, say): the box's border says so; a language
   still to choose marks the button itself, its own fill and border, so
   the two never look the same. */
.text-with-language:has(> [aria-invalid="true"]:is(input, textarea)) {
  border-color: var(--danger);
}

.text-with-language:has(> [aria-invalid="true"]:is(input, textarea)):not(:focus-within) {
  box-shadow: 0 0 0 1px var(--danger);
}

.text-with-language > button[aria-invalid="true"] {
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
  box-shadow: inset 0 0 0 2px var(--danger);
}

/* Forced colors drop the fill and the inset ring: this outline, dashed
   and transparent, is what they draw instead, so a language still to
   choose shows there too. Not while focused, where the focus outline is. */
.text-with-language > button[aria-invalid="true"]:not(:focus-visible) {
  outline: 2px dashed transparent;
  outline-offset: -3px;
}

.text-with-language:has(> :disabled) {
  background: var(--surface-sunken);
}

.language-picker > .hint {
  margin: 0.25rem 0 0;
}

.language-choices label.radio-option {
  display: flex;
  align-items: center;
  min-height: 24px;
  overflow-wrap: anywhere;
}

.language-choices label.radio-option input {
  flex: none;
}

.language-other {
  margin: 0.25rem 0 0.5rem 1.6rem;
}

.language-other label {
  display: block;
}

.language-choices > button {
  margin-top: 0.5rem;
}

/* Text in the languages the user states: a column as a form's, its
   label over its text and picker (one box) at any width; under the box
   an open picker's radios, then the text's hint, then the Translations
   button (a translation's remove button). Its translations sit under a
   disclosure, each with its own. */
.lang-text-field,
.lang-text-field .translations:not([hidden]),
.lang-text-field .translation {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.lang-text-field {
  margin-bottom: 0.6rem;
}

.lang-text-field input,
.lang-text-field textarea,
.lang-text-field .field-hint {
  margin-bottom: 0;
}

.lang-text-field .field-hint {
  margin-top: 0;
}

.lang-text-field .language-picker {
  margin: 0;
}

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}

/* The deck preferences' card language: a select drawn as the fields
   are, no wider than the screen, however long a language's name. */
.deck-card-language select {
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
}

.deck-card-language .hint {
  margin: 0 0 0.6rem;
}

/* The deck preferences' Languages section: a side's picker under its
   legend, with no box of its own, so the picker's own group has the
   width at 320px; space before what follows the State button. */
.deck-languages .language-side {
  margin: 0.5rem 0;
  padding: 0;
  border: none;
}

.deck-languages .language-side > legend {
  padding: 0;
}

.deck-languages > button {
  margin-bottom: 0.75rem;
}

.lang-text-field .translations > button {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.lang-text-field .translation {
  margin: 0.5rem 0 0 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border-strong);
}

details {
  margin-top: 1rem;
}

details summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

details summary:hover {
  color: var(--text);
}

.thing {
  overflow-wrap: anywhere;
  margin: 1rem 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: none;
}

.thing h3,
.thing th,
.thing td {
  word-break: break-all;
}

.thing h3 {
  font-weight: 500;
}

.thing th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
  vertical-align: top;
}

.thing ul {
  margin: 0;
  padding-left: 1.2rem;
}

@media (min-width: 34rem) {
  main {
    padding: 2rem 1.5rem 3rem;
  }

  header.site-header {
    padding: 0 1.5rem;
  }

  .masthead {
    margin-top: 2rem;
  }

  .quality-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 34rem) {
  section {
    padding: 1.15rem;
    border-radius: var(--radius);
  }

  .instance-bar-identity {
    flex-basis: 100%;
  }

  /* The blue disc keeps to the corner, clear of the name, which it would
     leave too faint to read. */
  .masthead {
    --blob: 3rem;
    --blob-x: 0.25rem;
    --dot: 0rem;
    --sun: 1.55rem;
    --sun-x: 6.6rem;
    --logo-height: 3rem;
    gap: 0.7rem;
    padding: 0.7rem 0.75rem;
  }

  .masthead h1 {
    font-size: 1.35rem;
  }

  .masthead-title {
    padding-left: calc(var(--logo-height) * 1.5 + 0.7rem);
  }

  /* On a phone, a guest's two buttons go below the logo and title. */
  .masthead-actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0.25rem;
  color: var(--text-muted);
  animation: fade-in 0.3s ease backwards;
  animation-delay: 0.15s;
}

.loading-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.3rem;
  height: 1.4rem;
}

.loading-dots i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent-red);
  animation: dot-bounce 0.9s cubic-bezier(0.3, 0, 0.4, 1) infinite;
}

.loading-dots i:nth-child(2) {
  background: var(--accent-yellow);
  animation-delay: 0.12s;
}

.loading-dots i:nth-child(3) {
  background: var(--primary);
  animation-delay: 0.24s;
}

.loading-dots i:nth-child(4) {
  background: var(--accent-blue);
  animation-delay: 0.36s;
}

@keyframes dot-bounce {
  0%,
  55%,
  100% {
    transform: translateY(0) scaleY(1);
  }

  10% {
    transform: translateY(0) scale(1.15, 0.8);
  }

  30% {
    transform: translateY(-0.75rem) scale(0.92, 1.1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  65% {
    opacity: 1;
    transform: translateY(-3px) scale(1.004);
  }
}

section,
.instance-bar {
  animation: pop-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

section section {
  animation: none;
}

.breadcrumbs {
  animation: fade-in 0.35s ease backwards;
}

@keyframes stamp-in {
  from {
    opacity: 0;
    transform: rotate(calc(var(--tilt) - 7deg)) scale(1.25);
  }

  70% {
    opacity: 1;
    transform: rotate(calc(var(--tilt) + 1deg)) scale(0.98);
  }
}

h1,
h2 {
  animation: stamp-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) 0.08s backwards;
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}

.storage-list li,
.instance-list li,
.deck-list li,
.provider-list li,
.card-table tbody tr {
  animation: row-in 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

/* A group comes in whole: what it holds does not slide in again, nor
   each time it moves to another level. */
.deck-group-body .deck-list li {
  animation: none;
}

:is(.storage-list, .instance-list, .deck-list, .provider-list) li:nth-child(2),
.card-table tbody tr:nth-child(2) {
  animation-delay: 0.05s;
}

:is(.storage-list, .instance-list, .deck-list, .provider-list) li:nth-child(3),
.card-table tbody tr:nth-child(3) {
  animation-delay: 0.1s;
}

:is(.storage-list, .instance-list, .deck-list, .provider-list) li:nth-child(4),
.card-table tbody tr:nth-child(4) {
  animation-delay: 0.15s;
}

:is(.storage-list, .instance-list, .deck-list, .provider-list) li:nth-child(5),
.card-table tbody tr:nth-child(5) {
  animation-delay: 0.2s;
}

:is(.storage-list, .instance-list, .deck-list, .provider-list) li:nth-child(n + 6),
.card-table tbody tr:nth-child(n + 6) {
  animation-delay: 0.25s;
}

@keyframes bounce-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  60% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.deck-list .deck-meta > button,
.deck-list .study-done,
.day-reset,
.session-actions button,
p[role="status"]:not(.loading) {
  animation: bounce-in 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

/* A row's subtext spans its column, so growing it from the center would
   bring the text in from the right; it slides in from the left instead. */
.deck-list .deck-meta > .hint:not(.study-done),
.library-deck-meta {
  animation: row-in 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

/* Stands where a row's subtext will be while it loads: a bar about as
   long and tall as "12 to review", with a sheen sweeping left to right. */
.deck-list .deck-meta > .hint.study-skeleton {
  justify-self: start;
  width: 6.5rem;
  height: 0.8rem;
  padding: 0;
  margin: 0.3rem 0 0.35rem 1.75rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--border) 30%,
    var(--surface-hover) 50%,
    var(--border) 70%
  );
  background-size: 250% 100%;
  animation:
    fade-in 0.3s ease backwards,
    skeleton-sheen 1.3s ease-in-out infinite;
}

@keyframes skeleton-sheen {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes deal-in {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-3deg) scale(0.96);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.practice-card {
  animation: deal-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

.card-back {
  animation: reveal 0.3s ease backwards;
}

.quality-buttons button {
  animation: bounce-in 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

.quality-buttons button:nth-child(2) {
  animation-delay: 0.03s;
}

.quality-buttons button:nth-child(3) {
  animation-delay: 0.06s;
}

.quality-buttons button:nth-child(4) {
  animation-delay: 0.09s;
}

.quality-buttons button:nth-child(5) {
  animation-delay: 0.12s;
}

.quality-buttons button:nth-child(6) {
  animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  img.hero {
    transform: none;
  }
}
/* Developer tools: the link to the validation view, below the screen. */
.developer-tools {
  margin: 2rem 0 1rem;
}

.validation table {
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
}

.validation th,
.validation td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  text-align: start;
  vertical-align: top;
}

/* Study statistics: tiles of headline numbers, an activity calendar, bar
   and line charts and a maturity bar in one hue, the app's green mixed
   into the surface by step, so dark mode follows the tokens. Nothing
   moves, so there is no motion to reduce. */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.stat-value {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.stat-detail {
  font-size: 0.8rem;
}

/* Today's study above the deck list: one slim strip, the streak first. */
.today-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: var(--radius);
  transition:
    background-color 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;
}

.today-strip p {
  margin: 0;
}

.today-strip svg.icon {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  color: var(--accent-yellow);
  fill: color-mix(in srgb, var(--accent-yellow) 35%, transparent);
}

/* The day's study done: the strip turns gold, its edge and flame
   deeper, with a soft glow around it (none in High contrast), and stays
   so for the rest of the day, fading to it once every deck's count is
   read; the words that say so are the text's own color, not muted. Text on the gold is held to the ratio
   text needs (style.test.ts). */
.today-strip.all-done {
  background-color: color-mix(in srgb, var(--accent-yellow) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-yellow) 70%, transparent);
  box-shadow: 0 0 0.75rem var(--glow);
}

.today-strip.all-done svg.icon {
  fill: color-mix(in srgb, var(--accent-yellow) 80%, transparent);
}

.today-done {
  color: var(--text);
  font-weight: 600;
}

/* The flame, and when the day was just done the rings and the stars it
   sends out, centered on it. */
.today-flame {
  position: relative;
  display: flex;
  flex: none;
}

/* The day's study just done, about two seconds in all, well inside WCAG
   2.2.2's five: the strip turns from green to gold with a bounce and a
   glow around it (--glow, none in High contrast), the flame pops with a
   wiggle and sends out two rings and a fan of stars, the praise pops
   and the day's numbers fade in after it, then a shimmer sweeps across
   the strip from left to right and small stars along it pop up as the
   shimmer passes them, float up a little and fade. The strip clips all
   but its glow, and nothing takes the pointer. Each part rests where it
   ends: the strip gold, a star and a ring transparent, the shimmer off
   the strip, so with motion reduced (every animation stopped) only the
   gold is left. */
.today-strip.just-done {
  position: relative;
  overflow: hidden;
  animation:
    today-turn-gold 0.6s ease-out,
    today-glow 1.6s ease-out 0.1s backwards;
}

@keyframes today-turn-gold {
  from {
    background-color: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary) 25%, transparent);
    transform: scale(0.97);
  }

  55% {
    transform: scale(1.02);
  }
}

@keyframes today-glow {
  from {
    box-shadow: 0 0 0 0 var(--glow);
  }

  45% {
    box-shadow: 0 0 1.25rem 0.4rem var(--glow);
  }

  to {
    box-shadow: 0 0 0.75rem var(--glow);
  }
}

.today-strip.just-done svg.icon {
  animation: today-flame-pop 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) 0.2s backwards;
}

@keyframes today-flame-pop {
  from {
    transform: scale(0.4);
  }

  35% {
    transform: scale(1.5) rotate(-10deg);
  }

  55% {
    transform: scale(1.15) rotate(8deg);
  }

  75% {
    transform: scale(1.05) rotate(-4deg);
  }
}

.today-strip.just-done .today-flame::before,
.today-strip.just-done .today-flame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent-yellow);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: today-ring 0.8s ease-out 0.35s;
}

.today-strip.just-done .today-flame::after {
  animation-delay: 0.6s;
}

@keyframes today-ring {
  from {
    opacity: 1;
    transform: scale(0.6);
  }

  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

.today-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

/* A star flying out of the flame along its angle (--angle), right of
   it within 35 degrees, so it fades before it reaches the strip's
   edge. */
.today-burst > span {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem;
  background: var(--accent-yellow);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: today-burst 0.9s cubic-bezier(0.1, 0.7, 0.3, 1) 0.35s backwards;
}

.today-burst > span:nth-child(even) {
  background: var(--primary);
  animation-duration: 1.1s;
}

@keyframes today-burst {
  from {
    opacity: 1;
    transform: rotate(var(--angle)) translateX(0) scale(0.3);
  }

  60% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(3rem) scale(1) rotate(90deg);
  }
}

.today-strip.just-done .today-done {
  display: inline-block;
  animation: today-done-pop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 0.45s backwards;
}

/* The day's numbers and the link after them, faded in once the praise
   has popped. */
.today-strip.just-done .today-figures {
  animation: today-fade-in 0.6s ease-out 0.75s backwards;
}

@keyframes today-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes today-done-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  60% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.today-strip.just-done::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    var(--glow) 45%,
    var(--shine) 50%,
    var(--glow) 55%,
    transparent 65%
  );
  transform: translateX(-70%);
  opacity: 0;
  pointer-events: none;
  animation: today-shimmer 1s linear 0.5s;
}

@keyframes today-shimmer {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translateX(70%);
  }
}

.today-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* A four-pointed star at its place along the strip (--x, a share of its
   width), timed to pop as the shimmer's light reaches it. */
.today-stars > span {
  position: absolute;
  top: 35%;
  left: calc(var(--x) * 100%);
  width: 0.7rem;
  height: 0.7rem;
  margin: -0.35rem;
  background: var(--accent-yellow);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: star-rise 0.9s ease-out calc(0.4s + (var(--x) + 0.1) * 0.8s) backwards;
}

.today-stars > span:nth-child(even) {
  top: 70%;
  background: var(--primary);
}

.today-stars > span:nth-child(3n) {
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem;
}

@keyframes star-rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(0.2) rotate(0);
  }

  25% {
    opacity: 1;
    transform: translateY(-0.25rem) scale(1.1) rotate(45deg);
  }

  to {
    opacity: 0;
    transform: translateY(-1rem) scale(0.7) rotate(120deg);
  }
}

.streak-count {
  font-size: 1.1rem;
}

.streak-note,
.today-numbers {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* The library's course for newcomers, under an empty deck list's
   heading: a card dealt in, a fan of cards beside its text that opens
   out, and a glint that sweeps across it twice and stops (well inside
   WCAG 2.2.2's five seconds). Each part's own style is where it comes to rest, so with
   motion reduced (the rule above takes every animation and transition
   away) the card simply stands there, its fan open, the glint off it. */
.newcomer-course {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 0 0 1rem;
  padding: 1.25rem 1.5rem;
  background:
    radial-gradient(circle at 100% 0, var(--paper-yellow), transparent 60%), var(--primary-soft);
  border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: deal-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

/* Under the card's content, so its text and buttons stay as they are. */
.newcomer-course::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, var(--shine) 50%, transparent 60%);
  transform: translateX(-150%);
  pointer-events: none;
  animation: newcomer-shine 1.4s ease-in-out 0.7s 2;
}

.newcomer-course > * {
  position: relative;
  z-index: 1;
}

@keyframes newcomer-shine {
  to {
    transform: translateX(150%);
  }
}

/* Three cards held in a hand, a question on the top one. */
.newcomer-course-fan {
  width: 4.25rem;
  height: 5.5rem;
  margin: 0.5rem 0.75rem 0 1rem;
}

.newcomer-course-fan > span {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-top: 0.45rem solid var(--primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transform-origin: 50% 120%;
  transform: rotate(var(--fan));
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
  animation: fan-out 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 0.25s backwards;
}

.newcomer-course-fan > span:nth-child(1) {
  --fan: -14deg;
  border-top-color: var(--accent-blue);
}

.newcomer-course-fan > span:nth-child(2) {
  --fan: 0deg;
  border-top-color: var(--accent-yellow);
  animation-delay: 0.35s;
}

.newcomer-course-fan > span:nth-child(3) {
  --fan: 14deg;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--primary);
  text-shadow: 0.06em 0.06em 0 var(--heading-pop);
  animation-delay: 0.45s;
}

.newcomer-course-fan > span:nth-child(3)::after {
  content: "?";
}

/* The hand opens a little further while the card is pointed at or in use. */
.newcomer-course:hover .newcomer-course-fan > span,
.newcomer-course:focus-within .newcomer-course-fan > span {
  transform: rotate(calc(var(--fan) * 1.5)) translateY(-0.2rem);
}

@keyframes fan-out {
  from {
    opacity: 0;
    transform: rotate(0) translateY(0.5rem);
  }
}

.newcomer-course-body {
  min-width: 0;
}

.newcomer-course-body p {
  margin: 0 0 0.5rem;
}

.newcomer-course-body .newcomer-course-eyebrow {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newcomer-course-eyebrow::before {
  content: "\2726  " / "";
  color: var(--accent-yellow);
}

.newcomer-course-body .newcomer-course-title {
  margin: 0.15rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  word-spacing: 0.1em;
  overflow-wrap: anywhere;
  text-shadow: 0.06em 0.06em 0 var(--heading-pop);
}

.newcomer-course .edit-actions {
  margin: 0.75rem 0 0;
}

.newcomer-course .edit-actions button.primary {
  animation: bounce-in 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) 0.4s backwards;
}

/* On a narrow screen the text has the card to itself. */
@media (max-width: 26rem) {
  .newcomer-course {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .newcomer-course-fan {
    display: none;
  }
}

/* The courses to go on with, above the deck list, under a heading and a
   line on what they are: each its title and the chapters done beside its
   button, so the title wraps before the button. */
.course-strip {
  margin: 0 0 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Smaller than a screen's heading, such as the deck list's below it. */
.course-strip h2 {
  font-size: 1.15rem;
  margin: 0.3rem 0 0.35rem;
}

.course-strip > .hint {
  margin: 0 0 0.25rem;
}

.course-strip ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-strip li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  padding: 0.4rem 0;
}

.course-strip li + li {
  border-top: 1px solid var(--border);
}

.course-strip-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-weight: 650;
  color: inherit;
  overflow-wrap: anywhere;
}

.course-strip-title svg.icon {
  flex: none;
  color: var(--primary);
}

.course-strip li .button {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.course-strip li .hint {
  padding-left: 1.75rem;
  font-size: 0.85rem;
}

/* The way to the deck library, under the courses while they are all the
   learner has: its words, and the button under them. */
.course-strip-library {
  padding: 0.5rem 0 0.4rem;
  border-top: 1px solid var(--border);
}

.course-strip-library p {
  margin: 0 0 0.5rem;
}

.course-strip progress {
  display: block;
  width: calc(100% - 1.75rem);
  height: 0.4rem;
  margin-left: 1.75rem;
  accent-color: var(--primary);
}

/* Too narrow for the title beside the button: the button goes under it. */
@media (max-width: 34rem) {
  .course-strip li {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-strip li .button {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    margin: 0.4rem 0 0 1.75rem;
  }
}

/* The invitation to switch to FSRS-6, above the deck list: a box like the
   course strip's, marked along its start edge, its buttons wrapping under
   its text. */
.scheduler-invitation {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-inline-start: 0.3rem solid var(--primary);
  border-radius: var(--radius);
}

.scheduler-invitation p {
  margin: 0 0 0.5rem;
}

.scheduler-invitation .scheduler-invitation-title {
  margin: 0 0 0.25rem;
  font-weight: 650;
}

.scheduler-invitation .edit-actions {
  margin: 0.5rem 0 0;
}

/* What is new in this version, above the deck list: a box like the
   invitation's, dealt in, with a burst of sparkles from within it. The
   burst starts a card's half height from the top and 2.5rem from the end,
   so its 1.5rem flight stays inside the card; the sparkles are see-through
   at rest, so with motion reduced (the rule that stops every animation)
   none show, and the burst runs once, well under five seconds. */
.whats-new {
  position: relative;
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-inline-start: 0.3rem solid var(--primary);
  border-radius: var(--radius);
  animation: deal-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

.whats-new .whats-new-title {
  margin: 0 0 0.25rem;
  font-weight: 650;
}

.whats-new ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.whats-new .edit-actions {
  margin: 0.5rem 0 0;
}

.whats-new-sparkles {
  position: absolute;
  top: 50%;
  inset-inline-end: 2.5rem;
  pointer-events: none;
}

.whats-new-sparkles > span {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  margin: -0.2rem;
  border-radius: 50%;
  background: var(--accent-yellow);
  opacity: 0;
  animation: sparkle 0.7s ease-out 0.3s backwards;
}

.whats-new-sparkles > span:nth-child(even) {
  background: var(--primary);
}

.statistics figure {
  margin: 0.75rem 0 1.25rem;
}

.statistics figcaption {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* A column a week sharing the full width, each day a square cell; the
   gap narrows on small screens so a year of weeks still fits. */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(var(--weeks, 52), minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  gap: clamp(1px, 0.35vw, 3px);
  padding-bottom: 2px;
}

.calendar-grid .calendar-day {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.calendar-day {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
}

.calendar-day.level-1 {
  background: var(--series-1);
  box-shadow: none;
}
.calendar-day.level-2 {
  background: var(--series-2);
  box-shadow: none;
}
.calendar-day.level-3 {
  background: var(--series-3);
  box-shadow: none;
}
.calendar-day.level-4 {
  background: var(--series-4);
  box-shadow: none;
}
.calendar-day.pointed {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 0.4rem;
  font-size: 0.8rem;
}

.calendar-legend .calendar-day {
  margin: 0 1px;
}

.bar-chart svg {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: 4rem;
}

.bar-chart .baseline,
.line-chart .baseline,
.line-chart .gridline {
  stroke: var(--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.line-chart .gridline {
  stroke: var(--border);
}

.bar-chart .bar {
  fill: var(--primary);
}

.bar-chart .bar.pointed {
  fill: var(--primary-hover);
}

.bar-chart .bar-hit,
.line-chart .bar-hit {
  fill: transparent;
}

/* A bar of several series: a step of the green each, 1 the faintest,
   named in a legend above the bars; a pointed bar is outlined, so each
   step keeps its tint. */
.bar-step-1 {
  --series: var(--series-1);
}
.bar-step-2 {
  --series: var(--series-2);
}
.bar-step-3 {
  --series: var(--series-3);
}
.bar-step-4 {
  --series: var(--series-4);
}

.bar-chart .bar[class*="bar-step-"] {
  fill: var(--series);
}

.bar-chart .bar[class*="bar-step-"].pointed {
  stroke: var(--text);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.bar-legend li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.bar-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--series);
}

/* Names under the bars, each under its own. */
.bar-ticks {
  display: flex;
  max-width: 32rem;
  font-size: 0.75rem;
}

.bar-ticks span {
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

/* The answer buttons pressed: a bar a kind of answer, its name beside
   it, Again the surface with a field's edge and the others steps of
   the green, a surface gap between the steps. */
.grade-rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem 0.75rem;
  max-width: 32rem;
}

.grade-row {
  display: contents;
}

.grade-kind {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.grade-bar {
  display: flex;
  gap: 2px;
  height: 1rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}

.grade-segment {
  flex-basis: 0;
  min-width: 2px;
}

.grade-segment.pointed {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

.grade-again {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--control-border);
}

.grade-hard {
  background: var(--series-1);
}

.grade-good {
  background: var(--series-2);
}

.grade-easy {
  background: var(--series-3);
}

.chart-note {
  margin: -0.25rem 0 0.5rem;
  font-size: 0.85rem;
}

/* A line chart: the scale's top and 0 to the left, the first and last
   points under it; the strokes keep their width however the plot is
   stretched, and a point with no neighbor is a dot of its own. */
.line-plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.4rem;
  max-width: 32rem;
}

.line-plot svg {
  display: block;
  width: 100%;
  height: 9rem;
  overflow: visible;
}

.line-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.line-keys {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.line-chart .line,
.line-key .line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.line-chart .line.lone,
.line-chart .line-point,
.line-chart .line-point.line-young {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
}

.line-chart .line-point {
  stroke: var(--primary);
}

.line-chart .line-young,
.line-key .line-young {
  stroke: var(--series-1);
  stroke-dasharray: 5 4;
}

.line-chart .crosshair {
  stroke: var(--text-muted);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.line-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.line-legend li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.line-key {
  width: 1.5rem;
  height: 0.5rem;
}

/* How mature the cards are: one bar of four steps, new the sunken
   surface with a field's edge and the others steps of the green, a
   surface gap between the steps. */
.maturity-bar {
  display: flex;
  gap: 2px;
  max-width: 32rem;
  height: 1rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.maturity-segment {
  flex-basis: 0;
  min-width: 2px;
}

.maturity-new {
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--control-border);
}

.maturity-relearning {
  background: var(--series-1);
}

.maturity-young {
  background: var(--series-2);
}

.maturity-mature {
  background: var(--series-3);
}

.maturity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.maturity-legend li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.maturity-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
}

.maturity-decks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.maturity-decks figure {
  margin: 0.5rem 0 1rem;
}

.maturity-decks figcaption {
  font-weight: 400;
  overflow-wrap: anywhere;
}

.maturity-decks .run-out {
  margin: -0.5rem 0 1rem;
  font-size: 0.85rem;
}

/* A chart folded away until asked for. */
.chart-fold {
  margin: 0 0 1rem;
}

.chart-fold > summary {
  cursor: pointer;
  margin-bottom: 0.5rem;
}

/* Forced colors drop backgrounds and recolor strokes: the steps keep
   apart as empty, hatched and filled, and the marks take the text color. */
@media (forced-colors: active) {
  .maturity-bar,
  .maturity-swatch {
    forced-color-adjust: none;
  }

  .maturity-bar {
    background: Canvas;
    box-shadow: inset 0 0 0 1px CanvasText;
  }

  .maturity-new {
    background: Canvas;
    box-shadow: inset 0 0 0 1px CanvasText;
  }

  .maturity-relearning {
    background: repeating-linear-gradient(135deg, CanvasText 0 1px, Canvas 1px 5px);
  }

  .maturity-young {
    background: repeating-linear-gradient(45deg, CanvasText 0 2px, Canvas 2px 5px);
  }

  .maturity-mature {
    background: CanvasText;
  }

  .bar-chart .bar,
  .bar-chart .bar.pointed {
    fill: CanvasText;
  }

  /* Several series: the steps by how much of the mark is filled. */
  .bar-chart .bar[class*="bar-step-"] {
    fill: CanvasText;
    stroke: CanvasText;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  .bar-chart .bar.bar-step-1 {
    fill-opacity: 0;
  }
  .bar-chart .bar.bar-step-2 {
    fill-opacity: 0.35;
  }
  .bar-chart .bar.bar-step-3 {
    fill-opacity: 0.65;
  }

  .bar-swatch,
  .grade-bar,
  .maturity-swatch.grade-again,
  .maturity-swatch.grade-hard,
  .maturity-swatch.grade-good,
  .maturity-swatch.grade-easy {
    forced-color-adjust: none;
  }

  .bar-swatch {
    background: CanvasText;
    box-shadow: inset 0 0 0 1px CanvasText;
  }
  .bar-swatch.bar-step-1 {
    background: Canvas;
  }
  .bar-swatch.bar-step-2 {
    background: repeating-linear-gradient(45deg, CanvasText 0 1px, Canvas 1px 4px);
  }
  .bar-swatch.bar-step-3 {
    background: repeating-linear-gradient(45deg, CanvasText 0 2px, Canvas 2px 4px);
  }

  .grade-bar {
    background: Canvas;
    box-shadow: inset 0 0 0 1px CanvasText;
  }

  .grade-again {
    background: Canvas;
    box-shadow: inset 0 0 0 1px CanvasText;
  }

  .grade-hard {
    background: repeating-linear-gradient(45deg, CanvasText 0 1px, Canvas 1px 5px);
  }

  .grade-good {
    background: repeating-linear-gradient(135deg, CanvasText 0 2px, Canvas 2px 4px);
  }

  .grade-easy {
    background: CanvasText;
  }

  .grade-segment.pointed {
    outline-color: Highlight;
  }

  .line-chart .line,
  .line-key .line,
  .line-chart .line-point,
  .line-chart .line-young,
  .line-key .line-young {
    stroke: CanvasText;
  }
}

.chart-inspector {
  min-height: 1.4em;
  margin: 0.4rem 0;
}

/* A chart's table can be wider than a phone: it scrolls sideways. */
.chart-table {
  max-width: 100%;
  overflow-x: auto;
}

.chart-table table,
table.deck-statistics {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.chart-table th,
.chart-table td,
table.deck-statistics th,
table.deck-statistics td {
  padding: 0.3rem 0.75rem 0.3rem 0;
  text-align: start;
  border-bottom: 1px solid var(--border);
}

/* The statistics' range and tabs, in one row above the figures. The
   tabs are links; on a phone their strip scrolls sideways in its own
   box, never the page, and the tab shown is underlined in the green
   (and by its border in forced colors). */
.statistics-range {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.statistics-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--border);
}

.statistics-tabs [role="tab"] {
  flex: none;
  padding: 0.5rem 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.statistics-tabs [role="tab"]:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.statistics-tabs [role="tab"][aria-selected="true"] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--primary);
}

.save-answers {
  margin: 1.5rem 0 0;
}

/* A table of the statistics can be wider than its section: it scrolls
   sideways in its own region, the row's name kept in view on the
   panel's surface, and read as a cell, not as a column's heading. */
.statistics .table-scroll {
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

table.deck-statistics th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 8rem;
  max-width: 14rem;
  font-size: inherit;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  background: var(--surface);
}

table.deck-statistics td {
  white-space: nowrap;
}

/* The figures by deck: a block a deck, as many to a row as fit (one on
   a phone, two in the page's column), each a panel like a tile: its
   name, a line of its answers and last study, then its figures, labels
   over values, as many to a row as fit. A share's count is under its
   percent, smaller and muted, as in a tile. */
.by-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.by-deck > li {
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.by-deck h4 {
  margin: 0;
  font-size: 1rem;
}

.by-deck .hint {
  margin: 0.15rem 0 0.6rem;
}

.by-deck dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(7.5rem, 100%), 1fr));
  gap: 0.6rem 1rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.by-deck dt {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.by-deck dd {
  margin: 0;
}

/* Recall each way takes a row of its own: "Front → back: 90%" on one line. */
.by-deck-directions {
  grid-column: 1 / -1;
}

.by-deck dd + dd {
  margin-top: 0.3rem;
}

.by-deck .share-of {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* A table's own name above it, as a chart's caption is. */
table.deck-statistics caption {
  font-weight: 600;
  text-align: start;
  padding-bottom: 0.5rem;
}

/* What is hard: a card a line, how often it was forgotten after it. */
.hardest-cards {
  margin: 0.5rem 0 1.25rem;
  padding-left: 1.5rem;
}

.hardest-cards li {
  margin: 0.25rem 0;
}

/* A course's chapters done, as a bar under its title. */
.course-statistics progress {
  display: block;
  width: 100%;
  height: 0.4rem;
  margin-bottom: 0.75rem;
  accent-color: var(--primary);
}

/* Trying the app as a guest (docs/guest-mode.md). */
.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* The first thing a visitor is offered: one big button. */
.guest-start {
  margin-bottom: 1.25rem;
}

.guest-start button.primary {
  width: 100%;
  margin: 0.35rem 0 0;
  padding: 0.85rem 1.25rem;
  font-size: 1.15rem;
}

.guest-transfer {
  margin-bottom: 1.5rem;
}

.guest-moved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.85rem;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--primary);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
}

.guest-moved p {
  margin: 0;
}

/* Text from data in Markdown (ui/Markdown.tsx, docs/markdown.md): blocks
   aligned to where their lines start (the left, or the right in a language
   written right to left), at the size of the place they are in; on a
   card's face, at a reading size however large the face's own text, and a
   note's blocks as quiet as its paragraph, but aligned as all blocks are. */
.md {
  max-width: 40rem;
  line-height: 1.55;
  text-align: start;
}

.card-face > .md {
  width: 100%;
  font-size: 1.15rem;
}

.card-face > .card-note.md {
  font-size: 0.95rem;
  text-align: start;
}

.course-theory.md {
  line-height: 1.65;
}

.md > :first-child {
  margin-top: 0;
}

.md > :last-child {
  margin-bottom: 0;
}

.md p,
.md ul,
.md ol,
.md blockquote,
.md hr,
.md .md-code,
.md .md-table {
  margin: 0 0 0.75rem;
}

.md ul,
.md ol {
  padding-inline-start: 1.5rem;
}

.md li > ul,
.md li > ol {
  margin-bottom: 0;
}

.md blockquote {
  padding-inline-start: 0.9rem;
  border-inline-start: 4px solid var(--border-strong);
  color: var(--text-muted);
}

.md hr {
  border: none;
  border-top: 1px solid var(--border-strong);
}

/* A code span from data; a code block's code is styled with its block. */
.md-inline-code {
  padding: 0.05em 0.3em;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* A code block: its white space as written, scrolled sideways rather than
   wrapped, for in code a line break means something. */
.md-code {
  position: relative;
}

.md-code-lang {
  display: block;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.md pre {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre;
  overflow-x: auto;
}

.md pre code {
  font-family: var(--font-mono);
}

/* A table scrolls sideways in its own region, as wide as its columns. */
.md-table {
  overflow-x: auto;
  border-radius: var(--radius);
}

.md-table table {
  width: auto;
  min-width: 100%;
  margin: 0;
  overflow: visible;
}

.md-table th {
  color: var(--text);
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.md-table th,
.md-table td {
  vertical-align: top;
}

.md-table .md-align-left {
  text-align: left;
}

.md-table .md-align-center {
  text-align: center;
}

.md-table .md-align-right {
  text-align: right;
}

/* Where a link whose text is not its address leads. */
.md-link-host {
  color: var(--text-muted);
  font-size: 0.9em;
}

/* The card editor's Markdown toggle, its hint under it, and the cheat
   sheet behind a disclosure: what to type, as code, beside what it gives. */
.markdown-toggle {
  margin: 0.5rem 0 1rem;
}

.markdown-toggle > label {
  margin-bottom: 0.4rem;
}

.markdown-toggle .field-hint {
  margin: 0 0 0.4rem;
}

.markdown-help {
  margin-top: 0.25rem;
}

.markdown-help p {
  margin: 0.4rem 0;
}

.markdown-help td {
  vertical-align: top;
}

.markdown-help pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: pre;
}

/* A text's own hints (what of its Markdown would not show as meant), under it. */
.entry-hints {
  padding-inline-start: 1.25rem;
}

.entry-hints li {
  margin: 0.15rem 0;
}

/* The card being written, as it will be studied, under the fields. */
.card-preview .practice-card {
  margin-top: 0.5rem;
}

.card-preview-option {
  margin: 0.75rem 0 0;
}

.card-preview-option-name {
  color: var(--text-muted);
}

/* A card's wrong options: a list of them, each with its note, id and
   buttons; a retired one muted; the one being written in its own box. */
.distractor-list,
.distractor-issues {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.distractor-list > li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.distractor-list > li.retired .distractor-text {
  color: var(--text-muted);
}

.distractor-list p {
  margin: 0;
}

.distractor-id {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.distractor-issues li {
  margin: 0.4rem 0;
}

.distractor-editor {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

/* Prose as the course player will show it, under its field (ui/ProseField.tsx). */
.prose-preview {
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* A type index's notes and cautions in the registration chooser, under its radio. */
.registration-target-notes {
  margin: 0 0 0.5rem 1.6rem;
}

.registration-target-notes .warning {
  margin: 0.25rem 0;
}