/* ─────────── dictionary ─────────── */
.dict-word { margin: 0; font-size: 1.875rem; font-weight: 600; letter-spacing: -.03em; overflow-wrap: break-word; }
.entry-body { padding: 0 var(--pad) 2.125rem; font-size: 0.96875rem; line-height: 1.5; color: #dde2ea; }
/* The Worm components emit their own markup, so the entry is styled by element
 * rather than by class. */
.entry-body :is(h1, h2, h3, h4) { font-size: 0.9375rem; font-weight: 600; letter-spacing: .02em; margin: 1.625rem 0 0.625rem; color: var(--text); }
.entry-body h1 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; margin-top: 1.875rem; }
.entry-body em, .entry-body i { color: var(--muted); }
.entry-body ol, .entry-body ul { margin: 0 0 0.875rem; padding-left: 1.25rem; }
.entry-body li { margin-bottom: 0.375rem; }
.entry-body li::marker { color: var(--faint); }
.entry-body blockquote { margin: 0.75rem 0; padding: 0.125rem 0 0.125rem 0.875rem; border-left: 2px solid var(--line-strong); color: var(--muted); }
.entry-body a { color: var(--link); }
.entry-body audio { max-width: 100%; height: 2rem; }
.entry-body button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 0.3125rem; padding: 0.125rem 0.4375rem; font-size: 0.75rem; cursor: pointer; }

/* ─────────── dictionary entry ─────────── */
/* Merriam-Webster's own structure, rendered by app/renderers/dict. */
.dict-entry-section, .dict-sense { margin: 0.875rem 0; }
.dict-badge { background: var(--raised); border-radius: 0.25rem; padding: 0 0.3125rem; }
/* Following "in the meaning defined at sense 1" marks the sense you land on. */
.dict-sense:target .dict-badge { background: var(--accent); color: #1a1206; }
.dict-small-caps { font-variant: small-caps; }
.dict-muted { color: var(--muted); }

/* The recorded pronunciation replaces the native player with two buttons. */
.dict-pronunciation audio { display: none; }
.dict-audio-button { line-height: 1; padding: 0.125rem 0.375rem; vertical-align: middle; }
.dict-audio-button .icon { font-size: 0.8125rem; }
.hidden { display: none; }

/* Etymology is long and rarely what you came for, so it folds away. A checkbox
 * and two labels do it without a controller. */
/* Positioned, so the input below is laid out against this box. Left static it
 * would take its containing block from the app shell and add itself to what the
 * shell has to scroll to reach. */
.dict-collapse { position: relative; }
.dict-collapse input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.dict-collapse-show, .dict-collapse-hide {
  cursor: pointer; color: var(--muted); font-size: 0.8125rem;
  border-bottom: 1px dashed var(--line-strong);
}
.dict-collapse-show { display: inline-block; }
.dict-collapse-hide, .dict-collapse-content { display: none; }
.dict-collapse input:checked ~ .dict-collapse-show { display: none; }
.dict-collapse input:checked ~ .dict-collapse-hide { display: inline-block; }
.dict-collapse input:checked ~ .dict-collapse-content { display: block; }

/* ─────────── spoilers ─────────── */
/* A flashcard hides its definitions until you ask for one: the span is
 * focusable, so a tap or a keyboard focus reveals it. Descendants are covered
 * explicitly, or a cross-reference link inside would keep its own colour and
 * give the answer away. */
.spoiler {
  background: var(--raised);
  border: 1px dashed var(--line-strong);
  border-radius: 0.25rem;
  cursor: help;
}
.spoiler:not(:focus):not(:focus-within),
.spoiler:not(:focus):not(:focus-within) * { color: transparent; }
.spoiler:focus, .spoiler:focus-within { background: none; border-color: transparent; cursor: auto; }