/* ═══════════════════════════════════════════════════════════════════════════
   practice.css — the free practice pages (/practice/), built by buildPractice()
   in build.mjs. Loaded after pronounce.css and reuses its boxes (.pr-box,
   .pr-hero, .pr-app, .pr-cards). Mobile first: text 16px or more, every button
   at least 48px tall, nothing wider than the screen at 360px.
   ═══════════════════════════════════════════════════════════════════════ */
.px { font-size: max(1rem, var(--t-body)); }
.px-h1 { font-size: clamp(2.3rem, 1.4rem + 4.5vw, 4.6rem); letter-spacing: -.035em; line-height: 1; overflow-wrap: anywhere; }
.px-h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -.02em; line-height: 1.1; }
.px-intro, .px-lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.45; max-width: 48ch; color: var(--ink-2); }
.px-small { font-size: 1rem; color: var(--ink-2); }
.px-small a, .px-note a, .px-back a { color: var(--sound-2); text-decoration: underline; text-underline-offset: 3px; }
.px-hi { color: var(--sound); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.px-n { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cyc-2); font-weight: 700; font-size: 1rem; }

/* the video: a picture until they press play */
.px-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-2); }
.px-player button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; display: grid; place-items: center; background: none; cursor: pointer; }
.px-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-play { position: relative; width: 76px; height: 76px; border-radius: 50%; background: var(--live); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(232, 53, 43, .45); transition: transform var(--dur-1) var(--ease-out); }
.px-play svg { width: 32px; height: 32px; margin-left: 4px; fill: #fff; }
.px-player button:hover .px-play { transform: scale(1.08); }
.px-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* what you learned: one card per sound */
.px-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.px-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--radius-sm); background: var(--sound-soft); }
.px-card-n { position: absolute; top: 12px; right: 14px; font-size: .9rem; font-weight: 700; color: var(--ink-3); }
.px-card-s .ipa { font-size: 2rem; line-height: 1; }
.px-card-w { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.3; font-variation-settings: 'opsz' 32, 'wdth' 100, 'wght' 600; }
.px-card-note { color: var(--ink-2); font-size: 1rem; line-height: 1.4; }
.px-card-hear { justify-self: start; min-height: 48px; background: var(--cyc); border-color: transparent; font-size: 1rem; }
.px-note { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--pen-soft); line-height: 1.45; }

/* the practices */
.px-act { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); border-radius: var(--radius); border: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 24px); }
.px-act-head { display: grid; gap: 6px; }
.px-how { color: var(--ink-2); line-height: 1.45; max-width: 60ch; }
.px-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.px-q, .px-say { display: grid; gap: 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--cyc-2); transition: background var(--dur-1); }
.px-q.is-right { background: var(--wb-soft); }
.px-q.is-wrong { background: var(--live-soft); }
.px-q-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.px-listen { min-height: 48px; background: var(--ink); border-color: var(--ink); color: var(--cyc); font-size: 1rem; }
.px-listen:hover { color: var(--cyc); }
.px-word { font-family: var(--f-display); font-size: 1.6rem; font-variation-settings: 'opsz' 32, 'wdth' 100, 'wght' 700; }
.px-word[hidden] { display: none; }
.px-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .px-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.px-opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--cyc); color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.px-opt .ipa { font-size: 1.35rem; }
.px-opt:hover { border-color: var(--ink); }
.px-opt[aria-disabled="true"] { cursor: default; }
.px-opt[aria-disabled="true"]:hover { border-color: var(--line-2); }
.px-opt.is-answer, .px-opt.is-answer:hover { border-color: var(--wb); background: var(--wb); color: #fff; }
.px-opt.is-picked, .px-opt.is-picked:hover { border-color: #B3261E; background: var(--cyc); color: #B3261E; text-decoration: line-through; }
.px-fb { font-size: 1.05rem; line-height: 1.45; }
.px-fb:empty { display: none; }

/* which word is different */
.px-odd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.px-oddw { display: grid; gap: 6px; }
.px-pick { font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem); min-height: 56px; overflow-wrap: anywhere; font-variation-settings: 'opsz' 32, 'wdth' 100, 'wght' 700; }
.px-mini { justify-content: center; min-height: 48px; padding: 6px; background: var(--cyc); border-color: transparent; }

/* say it and compare */
.px-say.is-said { background: var(--wb-soft); }
.px-say-tag { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-2); }
.px-say-tag .ipa { font-size: 1.3rem; color: var(--ink); }
.px-sent { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.65rem); line-height: 1.35; }
.px-gloss { font-size: 1rem; color: var(--ink-2); font-style: italic; }
.px-say-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.px-say-btns > * { min-height: 48px; font-size: 1rem; }
.px-me { background: var(--ink); border-color: var(--ink); color: var(--cyc); }
.px-me:hover { color: var(--cyc); }
.px-you { background: var(--cyc); }
.px-you:disabled { opacity: .45; cursor: default; }
.px-rec { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--live); background: var(--cyc); color: #B3261E; font: inherit; font-weight: 700; cursor: pointer; }
.px-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--live); }
.px-rec.is-on { background: var(--live); color: #fff; }
.px-rec.is-on .px-dot { background: #fff; border-radius: 2px; animation: px-blink 1s infinite; }
@keyframes px-blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .px-rec.is-on .px-dot { animation: none; } }
.px-self { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.px-self[hidden] { display: none; }
.px-self span { font-weight: 700; width: 100%; }
.px-self .px-opt { flex: 1 1 140px; }

/* your score */
.px-result { background: var(--pen-soft); border-color: transparent; }
.px-score { font-family: var(--f-display); font-size: clamp(2.6rem, 2rem + 3vw, 4rem); line-height: 1; font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 800; }
.px-score span + span { font-size: .45em; color: var(--ink-2); }
.px-result .btn { justify-self: start; }
.px-result [hidden] { display: none; }

/* sign-up and the rest */
.px-join-box .join { margin-top: 0; max-width: 520px; }
.px-app .px-small { margin-top: 2px; }
.px-back { font-weight: 600; }
.px-back a { display: inline-flex; align-items: center; min-height: 48px; }

/* the index */
.px-vids { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.px-vids a { display: grid; gap: 6px; padding: 10px 10px 16px; border-radius: var(--radius); background: var(--cyc); border: 1px solid var(--line); color: var(--ink); text-decoration: none; height: 100%; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1); }
.px-vids img { width: 100%; height: auto; border-radius: var(--radius-sm); aspect-ratio: 16 / 9; object-fit: cover; }
.px-vid-t { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.15; padding: 4px 6px 0; font-variation-settings: 'opsz' 32, 'wdth' 100, 'wght' 760; }
.px-vid-s { color: var(--ink-2); padding: 0 6px; }
@media (hover: hover) { .px-vids a:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); } }

@media (max-width: 420px) {
  .px-opts { grid-template-columns: minmax(0, 1fr); }
  .px-odd { gap: 6px; }
  .px-q, .px-say { padding: 12px; }
}

/* nothing under 16px on these pages, and links big enough for a thumb */
.px .eyebrow, .px .pr-crumb, .px-card-n, .px .join-note, .px .pr-app-k, .px .pr-cs, .px .hear { font-size: 1rem; }
.px-small a, .px .join-note a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.px-nw { white-space: nowrap; }

/* usage videos (for example "though"): a card is one idea with example sentences, and answers are written sentences */
.px-card-t { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.2; padding-right: 28px; font-variation-settings: 'opsz' 32, 'wdth' 100, 'wght' 760; }
.px-card-t .ipa { font-size: 1.5rem; }
.px-card-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 1.05rem; line-height: 1.4; }
.px-card-ex li { padding-left: 14px; border-left: 3px solid var(--line-2); }
.px-line { font-size: 1.3rem; line-height: 1.25; }
.px-opts-text { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .px-opts-text { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.px-opts-text .px-opt { font-size: 1.05rem; }
/* longer odd-one-out words (though, through, thought) must not break in the middle at 360px */
.px-pick { padding-inline: 4px; }
@media (max-width: 420px) { .px-pick { font-size: 1.05rem; } }