.reference-page { padding: 0 24px 32px; }
.reference-header,.reference-topnav,.reference-page main,.reference-footer { max-width: 1120px; margin-inline: auto; }
.reference-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px; }
.reference-brand { display:flex; align-items:center; gap:10px; font-weight:650; font-size:1.25rem; text-decoration:none; color:var(--ink); }
.reference-header .header-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.reference-header button,.reference-header select { min-height:44px; max-width:100%; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); padding:8px 12px; }
.reference-header #reference-theme { width:44px; font-size:0; }
/* Visually hidden label, as on the home page (learning.css); this page does not load learning.css, so the rule is repeated here. */
.reference-header .language-picker { display:flex; align-items:center; gap:8px; }
.reference-header .language-picker > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.reference-header #reference-theme::after { content:'◐'; font-size:24px; }
.reference-topnav { display:flex; gap:24px; padding-block:14px; border-block:1px solid var(--line); flex-wrap:wrap; }
.reference-topnav a { color:var(--muted); padding-block:6px; text-decoration:none; }
.reference-topnav a[aria-current] { color:var(--accent); font-weight:650; }
.reference-crumbs { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; font-size:.9rem; color:var(--muted); }
.reference-crumbs a { color:inherit; }
.reference-intro { display:grid; grid-template-columns:1fr auto; align-items:center; gap:32px; margin-block:36px 24px; }
.reference-intro h1 { font-size:clamp(2.3rem,5.3vw,4.5rem); line-height:1.07; letter-spacing:-.045em; margin-block:12px 24px; text-wrap:balance; }
.reference-intro p { max-width:60ch; line-height:1.65; color:var(--muted); }
.reference-intro .reference-eyebrow { color:var(--accent); font-size:.9rem; font-weight:600; }
.reference-stamp { width:170px; aspect-ratio:1; display:grid; place-content:center; background:var(--warm); color:var(--ink); border-radius:36% 50% 40% 45%; font-size:2.5rem; font-weight:650; line-height:1.05; transform:rotate(7deg); }
.reference-language-note { background:var(--subtle); padding:16px 20px; border-radius:14px; font-size:.88rem; line-height:1.6; color:var(--muted); }
.reference-category { margin-block:44px; }
.reference-category-heading { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.reference-category-heading>span { color:var(--accent); font-size:.85rem; }
.reference-category h2 { margin:0; font-size:1.4rem; font-weight:550; }
.reference-topics { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.reference-topic { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px; background:var(--word); color:var(--ink); text-decoration:none; border-radius:18px; transition:transform .15s; }
.reference-category:nth-of-type(even) .reference-topic { background:var(--lesson); }
.reference-topic strong { display:block; font-size:1.25rem; font-weight:550; margin-bottom:6px; }
.reference-topic span span { color:var(--muted); font-size:.9rem; }
.reference-topic:hover { transform:translateY(-2px); }
.reference-search { display:grid; gap:8px; margin-block:28px; font-weight:550; }
.reference-search input { width:100%; font:inherit; padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.reference-entry { min-width:0; border-bottom:1px solid var(--line); padding-block:12px; }
.reference-entry[hidden] { display:none; }
.word-entry summary { cursor:pointer; display:list-item; padding:14px 8px; font-size:1.2rem; font-weight:550; }
/* The Swedish word headings on the verb, noun and adjective pages use the logo coral. */
.word-entry summary > [lang=sv] { color:var(--coral); }
.word-meaning { display:block; color:var(--muted); font-size:1rem; font-weight:400; padding-top:6px; }
.word-entry[open] { background:var(--surface); border-radius:16px; padding-inline:20px; margin-block:10px; }
.word-content { padding-bottom:20px; }
.word-forms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.word-forms>div { background:var(--word); padding:16px; border-radius:12px; }
.word-forms dt { color:var(--muted); font-size:.85rem; margin-bottom:8px; }
.word-forms dd { margin:0; font-size:1.2rem; overflow-wrap:anywhere; }
.reference-entry p { max-width:68ch; line-height:1.75; overflow-wrap:anywhere; }
.reference-entry blockquote { border-inline-start:3px solid var(--coral); margin:20px 0; padding:10px 20px; font-size:1.2rem; line-height:1.7; }
.reference-group { margin-block:20px; }
.reference-group .reference-group { padding-inline-start:16px; border-inline-start:2px solid var(--line); }
.reference-entry small { color:var(--muted); }
.reference-table { overflow-x:auto; max-width:100%; padding:4px; }
.reference-table table { border-collapse:collapse; width:100%; }
.reference-table th,.reference-table td { padding:12px; border-bottom:1px solid var(--line); text-align:start; line-height:1.5; }
.reference-table th { background:var(--word); }
.reference-speak,.reference-audio button { min-width:44px; min-height:44px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; font:inherit; cursor:pointer; padding:8px; margin-inline:4px; }
.reference-speak { font-size:1.3rem; }
.reference-audio:not([hidden]) { display:inline-flex; align-items:center; flex-wrap:wrap; max-width:100%; gap:8px; font-size:1rem; }
.reference-next { background:var(--lesson); border-radius:24px; padding:28px; margin-block:40px; }
.reference-next h2 { margin-top:0; }
.reference-next a { display:inline-block; color:var(--accent); margin-inline-end:24px; padding-block:10px; }
.reference-footer { border-top:1px solid var(--line); padding-block:24px; color:var(--muted); line-height:1.6; }
.reference-footer a,.reference-exercise-link { color:var(--accent); }
.reference-page :focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.reference-page [hidden] { display:none!important; }
@media(max-width:767px) {
  /* Phones: same 44px touch target, but a quiet circle so the phrase stays the focus. */
  .reference-speak { border:0; background:var(--surface); border-radius:999px; padding:0; margin-inline:2px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
  /* The Stop button carries a text label, so it grows to fit it rather than sitting in a circle. */
  .reference-audio button { min-width:44px; min-height:44px; width:auto; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:0 14px; margin-inline:2px; white-space:nowrap; font-size:.9rem; }
  .reference-speak { font-size:1rem; }
  .reference-page { padding-inline:16px; }
  .reference-header { flex-wrap:wrap; gap:16px; }
  .reference-header .header-actions { display:contents; }
  .reference-header #reference-theme { order:1; margin-inline-start:auto; }
  .reference-header .language-picker { min-width:0; max-width:100%; }
  .reference-header .language-picker select { min-width:0; width:auto; max-width:200px; text-overflow:ellipsis; }
  .reference-header .language-picker { order:2; width:100%; }
  .reference-topnav { gap:18px; font-size:.9rem; }
  .reference-intro { grid-template-columns:1fr; margin-block:16px; }
  .reference-intro h1 { font-size:2rem; margin-block:10px 16px; }
  .reference-crumbs { margin-top:16px; }
  .reference-stamp { display:none; }
  .reference-topics,.word-forms { grid-template-columns:1fr; }
  .reference-topic { padding:20px; }
  .word-entry[open] { padding-inline:12px; }
  .reference-group .reference-group { padding-inline-start:8px; }
}
@media(prefers-reduced-motion:reduce) { .reference-topic { transition:none; } .reference-topic:hover { transform:none; } }
.reference-english { display:block; margin-top:8px; color:var(--muted); font-size:.9rem; font-weight:400; }
.reference-missing { color:var(--muted); font-size:.9rem; font-weight:400; }
.reference-english-toggle { min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); cursor:pointer; }

.reference-controls{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 1rem}
#reference-load-more{min-height:44px;padding:.55rem .95rem;border:1px solid var(--line,#d8d0c4);border-radius:999px;background:var(--paper,#fff);color:inherit;font:inherit;cursor:pointer}
#reference-load-more:hover{background:var(--wash,#f6f1e8)}
#reference-shown,.reference-progress{margin:0;color:var(--ink-soft,#666);font-size:.95rem}
.word-links { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.word-links a { display:inline-block; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--accent);}
.word-links a:hover { background:var(--surface);}
.word-common,.word-related { margin-block:24px;}
.word-common h2,.word-related h2,.word-example h2 { font-size:1.15rem;}
.word-page-actions { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; margin-top:24px;}
.word-page-actions a { display:inline-block; min-height:44px; padding-block:10px;}
.word-page .word-meaning { font-size:1.15rem;}
.word-lead { font-size:1.1rem; line-height:1.7; max-width:68ch;}
.word-forms-section h2,.word-expressions h2 { font-size:1.15rem;}
.word-forms-section h2 small { color:var(--muted); font-weight:400; font-size:.9rem; margin-inline-start:6px;}
.word-expressions ul { list-style:none; margin:0; padding:0;}
.word-expressions li { border-top:1px solid var(--line); padding-block:14px;}
.word-expressions li p { margin:0 0 6px;}
.word-expressions blockquote { margin:10px 0 6px; padding:6px 16px; font-size:1.05rem;}
/* WP53 word search: suggestions, form notice, filters and next word. */
.reference-search { margin-block-end:0; }
.reference-suggestions { list-style:none; margin:6px 0 0; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 8px 24px rgb(0 0 0 / .08); }
.reference-suggestions li { display:flex; justify-content:space-between; align-items:baseline; gap:12px; min-height:44px; padding:10px 12px; border-radius:10px; cursor:pointer; }
.reference-suggestions li[aria-selected="true"],.reference-suggestions li:hover { background:var(--subtle); outline:2px solid var(--focus); outline-offset:-2px; }
.suggestion-word { font-weight:600; overflow-wrap:anywhere; }
.suggestion-meaning { color:var(--muted); font-size:.9rem; text-align:end; overflow-wrap:anywhere; }
.reference-notice { margin:12px 0 0; padding:12px 16px; border-radius:12px; background:var(--subtle); line-height:1.6; }
.reference-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-block:16px 28px; }
.reference-filters { display:flex; flex-wrap:wrap; gap:8px; }
.reference-chip,.reference-next-word { min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; }
.reference-chip[aria-pressed="true"] { background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:600; }
.reference-chip[aria-pressed="true"]::before { content:"✓ "; }
.reference-next-word { border-color:var(--accent); color:var(--accent); font-weight:600; }
.reference-next-word::after { content:" ↻"; }
.reference-notice .reference-chip { min-height:36px; padding:4px 12px; margin-block:4px; }
/* WP54 grammar hints: an info button beside each form label, one explanation panel per word. */
.hint-button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:-14px -6px -14px 0; padding:0; border:0; background:transparent; color:var(--accent); font:inherit; font-size:1.1rem; line-height:1; cursor:pointer; vertical-align:middle; }
.hint-button::before { content:"ⓘ"; }
.hint-button[aria-expanded="true"]::before { content:"✕"; font-size:.95rem; }
.hint-button[aria-expanded="true"] { color:var(--ink); }
.grammar-hint { margin-block:12px 4px; padding:14px 16px; border-radius:12px; background:var(--subtle); border-inline-start:4px solid var(--accent); line-height:1.55; }
.grammar-hint[hidden] { display:none; }
.grammar-hint strong { display:block; margin-bottom:4px; }
.grammar-hint p { margin:0 0 6px; max-width:60ch; }
.grammar-hint .grammar-example { margin:0; font-weight:600; }
.grammar-hint .grammar-hint-note { margin:8px 0 0; font-size:.85rem; color:var(--muted); }
/* WP55 accordion sections: long reference pages open one section at a time. */
.reference-accordion { padding-block:0; }
.reference-accordion > summary { display:flex; align-items:center; gap:10px; min-height:56px; padding:12px 8px; cursor:pointer; list-style:none; }
.reference-accordion > summary::-webkit-details-marker { display:none; }
.reference-accordion > summary::before { content:"▸"; color:var(--accent); font-size:1.1rem; flex:none; transition:transform .15s; }
.reference-accordion[open] > summary::before { transform:rotate(90deg); }
.reference-accordion > summary h2 { flex:1; min-width:0; margin:0; font-size:clamp(1rem,4.6vw,1.25rem); font-weight:600; line-height:1.3; overflow-wrap:break-word; }
.accordion-icon { font-size:1.4rem; flex:none; }
.accordion-count { margin-inline-start:auto; flex:none; min-width:2em; padding:2px 10px; border-radius:999px; background:var(--subtle); color:var(--muted); font-size:.85rem; text-align:center; }
.reference-accordion[open] { background:var(--surface); border-radius:16px; padding-inline:16px; margin-block:10px; border-bottom-color:transparent; }
.accordion-body { padding-bottom:12px; }
.accordion-body > .reference-group { margin-top:4px; }
.reference-group[hidden] { display:none; }
.reference-say { display:flex; align-items:center; gap:10px; margin-block:4px 8px; font-size:1.15rem; }
.reference-group h2 .reference-speak,.reference-group h3 .reference-speak { vertical-align:middle; margin-inline-start:8px; }
@media (prefers-reduced-motion: reduce) { .reference-accordion > summary::before { transition:none; } }