/* Shared by the five language pages: mots-du-jour, spanish, portuguese,
 * japanese and ukrainian.
 *
 * These five had byte-identical <style> blocks -- the same 8.6 KB copied five
 * times. Not "similar": the SHA of four of them matched exactly, and the fifth
 * differed only in the three rules that set a Japanese font. Any change to the
 * look of a language page previously had to be made five times, and the one
 * time it was not, the pages drifted.
 *
 * Linked AFTER assets/css/site.css and BEFORE the page's own <style>, so the
 * cascade order is unchanged: foundation, then language-page rules, then
 * whatever a single page overrides.
 */
    body { font-size:var(--fs-body); line-height:var(--leading-body); }
    .wrap { max-width:640px; margin:0 auto; padding:0 2rem 4rem; }


    header { padding:3rem 0 2rem; border-bottom:1px solid var(--line); opacity:0; animation:rise .8s ease forwards .1s; }
    h1 { font-size:clamp(1.75rem,4.6vw,2.6rem); font-weight:400; line-height:1.1; }
    h1 em { font-style:italic; color:var(--accent); }
    .intro { margin-top:1rem; color:var(--muted); font-size: var(--fs-base); max-width:480px; }
    .date-line { margin-top:.9rem; font-family: var(--font-ui); font-size: var(--fs-3xs); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

    .streak { margin-top:1.2rem; display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-ui); font-size: var(--fs-3xs); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); opacity:0; transition:opacity .3s; }

    .voice-tip { margin-top:.8rem; font-size: var(--fs-xs); font-style:italic; color:var(--muted); max-width:440px; line-height:1.5; }
    /* No font-weight. It used to say 500, which was a third signal on top of
       two that already work: this run is upright inside an italic sentence
       and full ink inside a muted one. Any one of those three reads as
       emphasis on its own, and EB Garamond's 500 is heavy enough that all
       three together read as shouting. */
    .voice-tip strong { font-style:normal; color:var(--ink); }
    .streak.visible { opacity:1; }

    .voice-picker { margin-top:.9rem; display:none; align-items:center; gap:.5rem; font-family: var(--font-ui); font-size: var(--fs-4xs); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
    .voice-picker select { font-family: var(--font-serif); font-size: var(--fs-sm); background:var(--bg); color:var(--ink); border:1px solid var(--line-strong); border-radius:2px; padding:.3rem .5rem; max-width:230px; }

    .words { padding:2.2rem 0; display:flex; flex-direction:column; }
    .word-card {
      display:flex; align-items:center; gap:1.1rem;
      padding:1.5rem 0; border-bottom:1px solid var(--line);
      opacity:0; animation:rise .8s ease forwards;
    }
    .word-card:nth-of-type(1){ animation-delay:.25s; }
    .word-card:nth-of-type(2){ animation-delay:.35s; }
    .word-card:nth-of-type(3){ animation-delay:.45s; }
    .word-card:nth-of-type(4){ animation-delay:.55s; }
    .word-card:nth-of-type(5){ animation-delay:.65s; }

    .word-icon {
      display:inline-flex; align-items:center; justify-content:center;
      width:30px; height:30px; border-radius:7px; align-self:center;
      background:#eee7da; font-size: var(--fs-base); line-height:1;
    }

    .play-btn {
      flex-shrink:0; width:44px; height:44px; border-radius:50%;
      border:1px solid var(--line); background:transparent; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      color:var(--accent); font-size: var(--fs-md); transition:all .2s;
    }
    .play-btn:hover { border-color:var(--accent); background:var(--accent); color:#fdf9f2; }
    .play-btn:active { transform:scale(.94); }
    .play-btn.playing { background:var(--accent); color:#fdf9f2; }

    .word-body { flex:1; min-width:0; }
    .word-top { display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
    /* The vocabulary word, and the biggest thing in the card by a factor of
       two. It does not also need to be the heaviest: at 27px, size alone has
       already said "this is the word". The 500 that used to be here was a
       tier borrowed from body copy, where a word does have to fight for
       attention, and EB Garamond's 500 is a good deal blacker than the
       Cormorant 400 it replaced.

       Smoothing for the same reason h1 has it in site.css -- this is display
       size, and there is no lighter cut to fall back on. */
    .word-fr {
      font-size: var(--fs-2xl); line-height:1.25;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .word-pos { font-family: var(--font-ui); font-size: var(--fs-4xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:2px; padding:.15rem .4rem; }
    .word-ipa { font-family: var(--font-mono); font-size: var(--fs-xs); color:var(--accent); margin-top:.25rem; }
    .word-en { font-style:italic; color:var(--muted); font-size: var(--fs-base); margin-top:.15rem; }

    .learned-dot {
      position:relative; flex-shrink:0; width:9px; height:9px; border-radius:50%;
      border:1px solid var(--line-strong); background:none; padding:0; appearance:none; -webkit-appearance:none;
      cursor:pointer; transition:background .25s,border-color .25s;
    }
    /* The ring stays 9px; this invisible overlay is the thing you actually
       tap. WCAG 2.5.8 asks for 24x24 and the ring is barely a third of it.
       It overflows the button box on purpose: the card's 1.1rem gap and
       1.5rem vertical padding mean it reaches nothing else clickable. */
    .learned-dot::after {
      content:''; position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%); width:24px; height:24px;
    }
    .learned-dot.on { background:var(--accent); border-color:var(--accent); }

    .no-speech { font-size: var(--fs-sm); color:var(--muted); font-style:italic; padding:1rem 0; }

    .review-section { padding:.4rem 0 1.6rem; }
    .review-label { font-family: var(--font-ui); font-size: var(--fs-3xs); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; }
    .review-stats { font-family: var(--font-ui); font-size: var(--fs-3xs); color:var(--muted); margin-bottom:1.1rem; line-height:1.6; }
    .review-empty { font-size: var(--fs-sm); color:var(--muted); font-style:italic; padding:.6rem 0 1.2rem; }
    .review-card { display:flex; align-items:center; gap:.8rem; padding:1rem 0; border-bottom:1px solid var(--line); }
    .review-card:last-child { border-bottom:none; }
    .review-play { flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size: var(--fs-base); transition:all .2s; }
    .review-play:hover { border-color:var(--accent); background:var(--accent); color:#fdf9f2; }
    .review-play.playing { background:var(--accent); color:#fdf9f2; }
    .review-body { flex:1; min-width:0; }
    .review-fr { font-size: var(--fs-md); line-height:1.7; }
    .review-answer { margin-top:.3rem; display:none; }
    .review-answer.shown { display:block; }
    .review-fr-answer { font-style:italic; font-size: var(--fs-md); line-height:1.7; }
    .review-ipa { font-family: var(--font-mono); font-size: var(--fs-xs); color:var(--accent); margin-left:.5rem; }
    .review-actions { flex-shrink:0; display:flex; gap:.5rem; }
    .review-btn {
      font-family: var(--font-ui); font-size: var(--fs-4xs); letter-spacing:.06em; text-transform:uppercase;
      padding:.5rem .75rem; border-radius:999px; cursor:pointer; border:1px solid var(--line-strong);
      background:transparent; color:var(--ink); transition:all .2s; white-space:nowrap;
    }
    .review-btn:hover { border-color:var(--accent); color:var(--accent); }
    .review-btn.again:hover { border-color:#6f1e1e; color:#6f1e1e; }

    .phrases { padding:.4rem 0 1.6rem; }
    .phrases-label { font-family: var(--font-ui); font-size: var(--fs-3xs); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:1.2rem; }
    .phrase-item { display:flex; align-items:flex-start; gap:.9rem; padding:1rem 0; border-bottom:1px solid var(--line); }
    .phrase-item:last-child { border-bottom:none; }
    .phrase-play { flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size: var(--fs-sm); transition:all .2s; margin-top:.1rem; }
    .phrase-play:hover { border-color:var(--accent); background:var(--accent); color:#fdf9f2; }
    .phrase-play.playing { background:var(--accent); color:#fdf9f2; }
    .phrase-fr { font-size: var(--fs-md); }
    .phrase-en { font-style:italic; color:var(--muted); font-size: var(--fs-sm); margin-top:.2rem; }

    .settings { margin-top:1rem; border-top:1px solid var(--line); opacity:0; animation:rise .9s ease forwards .8s; }
    .settings-trigger {
      display:flex; align-items:center; justify-content:space-between;
      padding:1.1rem 0; cursor:pointer; list-style:none; user-select:none;
      font-family: var(--font-ui); font-size: var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
    }
    .settings-trigger::-webkit-details-marker { display:none; }
    .settings-chevron { color:var(--muted); transition:transform .25s; }
    details[open] .settings-chevron { transform:rotate(90deg); }
    .settings-body { padding:.2rem 0 2rem; font-size: var(--fs-sm); color:var(--muted); line-height:1.6; }
    .settings-body p + p { margin-top:.6rem; }

    footer { padding:1rem 0 1rem; }
    footer p { font-family: var(--font-ui); font-size: var(--fs-3xs); letter-spacing:.1em; color:var(--muted); }


    @media (max-width:520px) {
      .wrap { padding:0 1.2rem 3rem; }
      .word-fr { font-size: var(--fs-xl); }
      .word-icon { width:26px; height:26px; font-size: var(--fs-sm); border-radius:6px; }
      .play-btn { width:38px; height:38px; }
      .review-card { flex-wrap:wrap; }
      .review-play { width:32px; height:32px; }
      .review-actions { width:100%; margin-top:.6rem; flex-wrap:wrap; }
    }