/* Base: colour tokens (light + dark), reset, page shell, header, language menu, "How to use" panel, tabs, footer. */
/* Layout: a field guide. Header with tabs → collection grouped by status class, practice deck, and confusable pairs. Card art is the hero; the UI stays quiet around it. */
:root{
  --bg:#F3F1F7; --surface:#FFFFFF; --ink:#33202F; --muted:#6E6176; --line:#E1DCE8; --soft:#E9E5F0;
  --accent:#5A3352; --good:#2E9D6B; --bad:#D2554A;
  --c1:#9B8BE8; --c2:#4FC38F; --c3:#78B6E2; --c4:#F2A15A; --c5:#EE776B;
  --display:"Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#18131C; --surface:#231C29; --ink:#F2ECF4; --muted:#ABA0B3; --line:#3A3042; --soft:#2E2535;
  --accent:#E7B8DB; --good:#5DD29C; --bad:#F07F74; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#18131C; --surface:#231C29; --ink:#F2ECF4; --muted:#ABA0B3; --line:#3A3042; --soft:#2E2535;
  --accent:#E7B8DB; --good:#5DD29C; --bad:#F07F74; color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5; margin:0}
.wrap{max-width:1120px; margin:0 auto; padding-inline:16px; padding-block:24px 56px}
header{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px}
.brand h1{font-family:var(--display); font-weight:800; font-size:clamp(40px,8vw,64px); line-height:.95; margin:0; letter-spacing:-.01em; color:var(--accent)}
/* RSP-125: the title is the logo link to the Collection; it looks like the title, not like a link. */
.brand h1 a{color:inherit; text-decoration:none; border-radius:8px}
.brand h1 a:focus-visible{outline:3px solid var(--accent); outline-offset:4px}
.brand p{margin:6px 0 0; color:var(--muted); max-width:46ch}
.brand .dots{display:flex; gap:6px; margin-top:12px}
.brand .dots i{width:28px; height:8px; border-radius:4px; display:block}
/* Language menu (RSP-109): a pill with the current language opens a list of all languages, each in its own language.
   Phones show the short code (UA), wider screens the full name. Every target is at least 44px tall. */
.langmenu{position:relative}
.langbtn{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 12px; border:1.5px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink); font:700 14px var(--body); cursor:pointer}
.langbtn:hover{border-color:var(--accent)}
.langbtn svg{width:18px; height:18px; flex:none}
.langbtn .lang-icon{color:var(--accent)}
.langbtn .lang-chev{width:14px; height:14px; color:var(--muted); transition:transform .15s}
.langbtn[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}
.langbtn .lang-name{display:none}
@media (min-width:600px){.langbtn .lang-code{display:none} .langbtn .lang-name{display:inline}}
/* On phones the button sits at the right end of the "How to use" row: next to the logo it covered the title with larger system text. */
@media (max-width:599px){.tools{width:100%; justify-content:space-between}}
.langlist{position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:200px; margin:0; padding:6px; list-style:none;
  background:var(--surface); border:1.5px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgb(0 0 0 / .14)}
.langlist button{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:8px 12px;
  border:0; border-radius:10px; background:none; color:var(--ink); font:600 15px var(--body); text-align:left; cursor:pointer}
.langlist button:hover{background:var(--soft)}
.langlist button:focus-visible{outline-offset:-3px}
.langlist button[aria-checked="true"]{font-weight:800; color:var(--accent)}
.langlist .lang-check{display:inline-flex; width:18px; height:18px; flex:none}
.langlist .lang-check svg{width:18px; height:18px}
/* "How to use": a link-style button in the header and a dismissable panel above the views (RSP-98). */
.tools{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.linkbtn{border:0; background:none; padding:7px 2px; color:var(--accent); font:700 14px var(--body); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.howto{margin-top:20px; background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:16px 20px; display:grid; gap:10px}
.howto h2{font:800 20px var(--display); margin:0}
.howto ol{margin:0; padding-left:1.4em; display:grid; gap:6px}
.howto .note{margin:0; color:var(--muted); font-size:14px}
.howto-done{justify-self:start; border:1.5px solid var(--line); background:var(--soft); color:var(--ink); border-radius:999px; padding:6px 16px; font:700 14px var(--body); cursor:pointer}
nav.tabs{display:flex; gap:6px; margin-top:24px; border-bottom:2px solid var(--line); overflow-x:auto}
nav.tabs button{border:0; background:none; font:700 17px var(--display); color:var(--muted); padding:8px 14px 6px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap}
nav.tabs button[aria-selected="true"]{color:var(--ink); border-color:var(--accent)}
button:focus-visible,.card:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
section.view{padding-top:24px}
footer{margin-top:40px; color:var(--muted); font-size:13px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}