/* ============================ ARTICLES PAGE (student-facing) ============================ */
    body.articles-mode > .aurora,
    body.articles-mode > .wrap,
    body.articles-mode > section:not(#articles-page){ display:none !important; }

    /* Cosmic backdrop ONLY for the articles page — twinkling stars + nebula glow,
       drawn from CSS so we don't ship any extra assets. */
    body.articles-mode{ position:relative; }
    body.articles-mode::before{
      content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
      background:
        radial-gradient(700px 500px at 12% 8%,  rgba(124, 92, 255, .22), transparent 60%),
        radial-gradient(620px 460px at 88% 14%, rgba( 16,185,229, .18), transparent 60%),
        radial-gradient(560px 420px at 50% 92%, rgba(198,242, 78, .12), transparent 60%);
      animation:nebulaDrift 28s ease-in-out infinite alternate;
    }
    body.articles-mode::after{
      content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
      background-image:
        radial-gradient(1.4px 1.4px at 18% 22%, #fff, transparent 60%),
        radial-gradient(1px 1px   at 42% 36%, #b9c7ff, transparent 60%),
        radial-gradient(1.3px 1.3px at 71% 14%, #fff, transparent 60%),
        radial-gradient(1px 1px   at 86% 58%, #d2c1ff, transparent 60%),
        radial-gradient(1.6px 1.6px at 27% 78%, #fff, transparent 60%),
        radial-gradient(1px 1px   at 60% 84%, #9bd8ff, transparent 60%),
        radial-gradient(1.2px 1.2px at 8% 56%, #fff, transparent 60%),
        radial-gradient(1px 1px   at 94% 88%, #ffd6ff, transparent 60%);
      animation:starsTwinkle 6s ease-in-out infinite;
    }
    @keyframes nebulaDrift{
      0%   { transform:translate3d(0,0,0)        scale(1); }
      50%  { transform:translate3d(-2%, 1%, 0)   scale(1.04); }
      100% { transform:translate3d(2%, -1.5%, 0) scale(1.02); }
    }
    @keyframes starsTwinkle{
      0%,100% { opacity:.35; }
      50%     { opacity:.7; }
    }
    body.articles-mode > header   { position:relative; z-index:50; }
    body.articles-mode > footer,
    body.articles-mode > .admin-fab,
    body.articles-mode > #articles-page{ position:relative; z-index:1; }
    /* Day-mode is too bright for the nebula — soften it */
    :root[data-theme="light"] body.articles-mode::before{ opacity:.55; }
    :root[data-theme="light"] body.articles-mode::after { opacity:.25; }

    .articles-page{
      max-width:1140px; margin:0 auto; padding:42px 24px 90px;
    }
    .articles-head{
      margin-bottom:32px; text-align:center; position:relative;
    }
    .articles-head .eyebrow{
      font-size:11.5px; font-weight:800; letter-spacing:3px; opacity:.8;
      color:var(--lime); text-transform:uppercase;
    }
    .articles-head h2{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:clamp(32px, 5vw, 46px); letter-spacing:-1.5px;
      margin:6px 0 10px;
      background:linear-gradient(120deg, #fff 0%, #c6f24e 45%, #7c5cff 100%);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent; color:transparent;
    }
    :root[data-theme="light"] .articles-head h2{
      background:linear-gradient(120deg, #14080d 0%, #4f7d18 50%, #6235e0 100%);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .articles-head p{ color:var(--muted); font-size:16px; max-width:560px; margin:0 auto; }
    .articles-filter{
      display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; justify-content:center;
    }
    .articles-filter button{
      background:rgba(255,255,255,.04); border:1px solid var(--glass-line); color:var(--muted);
      padding:8px 18px; border-radius:99px; font-weight:700; font-size:13px;
      cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1);
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
      backdrop-filter:blur(8px);
    }
    .articles-filter button:hover{ color:var(--text); border-color:rgba(198,242,78,.4); transform:translateY(-1px); }
    .articles-filter button.active{
      background:linear-gradient(135deg, var(--lime), #7eea3a);
      color:var(--on-lime); border-color:var(--lime);
      box-shadow:0 6px 24px -6px rgba(198,242,78,.55);
    }
    :root[data-theme="light"] .articles-filter button{
      background:#ffffff; border-color:rgba(20,8,13,.10); color:#475569;
    }
    :root[data-theme="light"] .articles-filter button:hover{
      color:#0f172a; border-color:rgba(101,163,13,.5);
    }
    :root[data-theme="light"] .articles-filter button.active{
      /* Was #65a30d→#4f7d18: white on the #65a30d end is only 3.09:1, so the
         LEFT HALF of every active pill failed AA. Both stops now clear 4.5:1. */
      background:linear-gradient(135deg, #4f7d18, #3d6212);
      color:#fff; border-color:#4f7d18;
      box-shadow:0 6px 24px -6px rgba(101,163,13,.45);
    }
    /* Speaking pill carries the navy/gold speaking identity, distinct from level pills */
    .articles-filter button.art-filter-speaking{
      color:#e7d49a; border-color:rgba(201,168,76,.4);
      background:linear-gradient(135deg, rgba(27,58,92,.55), rgba(201,168,76,.10));
    }
    .articles-filter button.art-filter-speaking:hover{
      color:#fff; border-color:rgba(201,168,76,.7);
    }
    .articles-filter button.art-filter-speaking.active{
      background:linear-gradient(135deg, #1b3a5c, #c9a84c);
      color:#fff; border-color:#c9a84c;
      box-shadow:0 6px 24px -6px rgba(201,168,76,.6);
    }
    :root[data-theme="light"] .articles-filter button.art-filter-speaking{
      color:#8a6d1f; border-color:rgba(201,168,76,.45);
      background:linear-gradient(135deg, rgba(27,58,92,.08), rgba(201,168,76,.14));
    }
    :root[data-theme="light"] .articles-filter button.art-filter-speaking.active{
      background:linear-gradient(135deg, #1b3a5c, #c9a84c);
      color:#fff; border-color:#c9a84c;
      box-shadow:0 6px 24px -6px rgba(201,168,76,.5);
    }
    .articles-grid{
      display:grid;
      /* `minmax(290px, 1fr)` cannot go below 290px, so once the container is
         narrower than that the track overflows and gets clipped (the page has
         fixed 24px gutters, so that is any viewport under ~338px). `min()`
         caps the floor at the container width — identical at every width where
         290px fits, which is every desktop and tablet size. Same idiom
         `.pb-grid` below already uses. */
      grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr));
      gap:22px; margin-top:34px;
    }

    /* Article card — calm, clean, "polished" hover.
       No spinning gradients (too busy). Instead we use a static gradient border
       that brightens on hover, a soft purple glow underneath, and a one-pass
       diagonal shine sweep that runs ONCE per hover for that "premium" feel. */
    .article-card{
      position:relative; cursor:pointer; isolation:isolate;
      display:flex; flex-direction:column;
      padding:24px 22px 22px; border-radius:20px;
      text-decoration:none !important; color:var(--text) !important;
      background:linear-gradient(180deg, rgba(22,18,32,.85), rgba(18,14,26,.78));
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      overflow:hidden;
      transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s cubic-bezier(.22,.61,.36,1),
        border-color .35s ease;
      animation:ac-rise .55s cubic-bezier(.2,.8,.2,1) backwards;
    }
    :root[data-theme="light"] .article-card{
      background:#ffffff;
      border-color:rgba(20,8,13,.10);
      box-shadow:0 6px 20px -10px rgba(30,40,80,.12);
    }
    :root[data-theme="light"] .article-card h3{
      color:#0f172a;
      background:none;
      -webkit-text-fill-color:initial;
    }
    :root[data-theme="light"] .article-card .ac-summary{ color:#475569; }
    :root[data-theme="light"] .article-card .ac-cat,
    :root[data-theme="light"] .article-card .ac-date{ color:#64748b; }
    :root[data-theme="light"] .article-card .ac-read{ color:#3f6212; }
    /* Staggered entrance */
    .articles-grid > .article-card:nth-child(1){ animation-delay:.04s; }
    .articles-grid > .article-card:nth-child(2){ animation-delay:.08s; }
    .articles-grid > .article-card:nth-child(3){ animation-delay:.12s; }
    .articles-grid > .article-card:nth-child(4){ animation-delay:.16s; }
    .articles-grid > .article-card:nth-child(5){ animation-delay:.20s; }
    .articles-grid > .article-card:nth-child(6){ animation-delay:.24s; }
    .articles-grid > .article-card:nth-child(n+7){ animation-delay:.28s; }
    @keyframes ac-rise{
      from{ opacity:0; transform:translateY(14px); }
      to  { opacity:1; transform:translateY(0); }
    }

    /* Static gradient border that intensifies on hover. Painted as an inset
       linear-gradient on the ::before, masked into a 1px ring. */
    .article-card::before{
      content:""; position:absolute; inset:0; border-radius:inherit;
      padding:1px;
      background:linear-gradient(135deg,
        rgba(124, 92,255,.0)  0%,
        rgba(124, 92,255,.35) 35%,
        rgba(198,242, 78,.30) 65%,
        rgba( 16,185,229,.0) 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      opacity:.45; pointer-events:none;
      transition:opacity .4s ease;
      z-index:1;
    }
    .article-card:hover::before{ opacity:1; }

    /* One-pass diagonal shine — slides across the card on hover. */
    .article-card::after{
      content:""; position:absolute; top:0; bottom:0;
      left:-60%; width:55%;
      background:linear-gradient(115deg,
        transparent 0%,
        rgba(255,255,255,.0)   30%,
        rgba(255,255,255,.10)  50%,
        rgba(255,255,255,.0)   70%,
        transparent 100%);
      transform:skewX(-18deg);
      transition:left .9s cubic-bezier(.22,.61,.36,1);
      pointer-events:none;
      z-index:2;
    }
    :root[data-theme="light"] .article-card::after{
      background:linear-gradient(115deg,
        transparent 0%,
        rgba(124,92,255,.0)  30%,
        rgba(124,92,255,.14) 50%,
        rgba(124,92,255,.0)  70%,
        transparent 100%);
    }
    .article-card:hover::after{ left:120%; }

    .article-card:hover{
      transform:translateY(-4px);
      border-color:transparent;
      box-shadow:
        0 18px 40px -18px rgba(124, 92,255,.45),
        0 6px 18px  -8px  rgba(  0,  0,  0,.4);
    }
    :root[data-theme="light"] .article-card:hover{
      box-shadow:
        0 18px 40px -18px rgba(124, 92,255,.25),
        0 6px 18px  -8px  rgba( 30,  0, 60,.12);
    }

    /* Inner content sits above the ::before border but below the shine sweep
       so the shine washes over text without breaking it. */
    .article-card > *{ position:relative; z-index:3; }
    /* Shine should NOT cover text */
    .article-card::after{ z-index:1; }
    .article-card::before{ z-index:1; }

    .article-card .ac-top{
      display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;
    }
    .article-card .ac-level{
      font-size:11px; font-weight:800; padding:4px 11px; border-radius:7px;
      letter-spacing:.6px; text-transform:uppercase;
      box-shadow:0 4px 14px -4px currentColor;
    }
    .ac-level.lvl-b1{ background:linear-gradient(135deg,#60a5fa,#3b82f6); color:#fff; }
    .ac-level.lvl-b2{ background:linear-gradient(135deg,#6ee7b7,#34d399); color:#06281d; }
    .ac-level.lvl-c1{ background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#3a2400; }
    .ac-level.lvl-c2{ background:linear-gradient(135deg,#fb7185,#ec4899); color:#fff; }
    .article-card .ac-cat{ font-size:12px; color:var(--muted); font-weight:600; }
    .article-card .ac-date{
      font-size:11px; color:var(--muted); margin-left:auto; opacity:.7;
      text-decoration:none !important;
    }
    .article-card .ac-recent{
      background:linear-gradient(135deg, #dc2626, #f87171);
      color:#fff; font-size:10.5px; font-weight:800;
      padding:4px 10px; border-radius:99px; letter-spacing:.5px;
      box-shadow:0 6px 20px -6px rgba(220,38,38,.6);
      animation:ac-pulse 2.4s ease-in-out infinite;
    }
    @keyframes ac-pulse{
      0%,100% { box-shadow:0 6px 20px -6px rgba(220,38,38,.6); }
      50%     { box-shadow:0 6px 28px -4px rgba(220,38,38,.95); }
    }
    .article-card h3{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:19px; line-height:1.3; letter-spacing:-.3px;
      margin-bottom:10px; color:var(--text);
      text-decoration:none !important;
      transition:transform .3s ease;
    }
    .article-card:hover h3{ transform:translateX(2px); }
    .article-card .ac-summary{
      font-size:14px; line-height:1.6; color:var(--muted);
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
      overflow:hidden; flex:1;
      text-decoration:none !important;
    }
    .article-card .ac-read{
      margin-top:16px; font-size:13.5px; font-weight:700; color:var(--lime);
      display:inline-flex; align-items:center; gap:6px;
      text-decoration:none !important;
      transition:gap .25s ease, letter-spacing .25s ease;
    }
    .article-card:hover .ac-read{ gap:12px; letter-spacing:.3px; }
    .article-card .ac-read .ar-arrow{
      display:inline-block; transition:transform .35s cubic-bezier(.2,.7,.2,1);
    }
    .article-card:hover .ac-read .ar-arrow{ transform:translateX(4px); }

    /* Any nested element should never carry a default link underline */
    .article-card, .article-card *{ text-decoration:none !important; }

    .articles-empty{
      text-align:center; padding:60px 20px;
      background:rgba(20,16,28,.55); border:1px dashed var(--glass-line); border-radius:18px;
      color:var(--muted);
      backdrop-filter:blur(8px);
    }
    :root[data-theme="light"] .articles-empty{
      background:#ffffff; border-color:rgba(20,8,13,.14); color:#475569;
    }

    /* ============================ SPEAKING ARTICLES — GRID CHIP ============================ */
    .article-card .ac-speaking{
      font-size:11px; font-weight:800; letter-spacing:.3px;
      padding:4px 11px; border-radius:99px; color:#08121a;
      background:linear-gradient(135deg, #8b6dff, #4ee0f2);
      box-shadow:0 5px 16px -6px rgba(139,109,255,.65);
      white-space:nowrap;
    }
    /* Speaking cards lean violet→cyan instead of the default lime/violet ring */
    .article-card.is-speaking::before{
      background:linear-gradient(135deg,
        rgba(139,109,255,0)   0%,
        rgba(139,109,255,.42) 35%,
        rgba( 78,224,242,.34) 65%,
        rgba(139,109,255,0)  100%);
      opacity:.6;
    }
    .article-card.is-speaking:hover{
      box-shadow:
        0 18px 40px -18px rgba(78,224,242,.45),
        0 6px 18px  -8px  rgba( 0,  0,  0,.4);
    }
    .article-card.is-speaking .ac-read{ color:#7fe6f0; }
    :root[data-theme="light"] .article-card.is-speaking .ac-read{ color:#0e7490; }

    /* "Designed for Band 8+ candidates" notice — these speaking articles carry
       C1/C2 language and Band-9 model answers, so the card says so up front.
       Gold, to read as an aspiration marker rather than a warning. */
    .article-card .ac-band-note{
      margin-top:14px;
      /* Shrink-wrap: a full-bleed bar competed with the CTA and read as an
         alert. As a pill that hugs its own text it sits quietly under the copy. */
      align-self:flex-start; max-width:100%;
      display:inline-flex; align-items:center; gap:6px;
      padding:5px 12px 5px 9px; border-radius:99px;
      font-size:11px; font-weight:600; line-height:1.5;
      color:#f0d69a; letter-spacing:.1px; white-space:nowrap;
      background:linear-gradient(135deg, rgba(251,191,36,.14), rgba(251,191,36,.05));
      border:1px solid rgba(251,191,36,.24);
      transition:border-color .35s ease, background .35s ease;
    }
    .article-card .ac-band-note b{ color:#fcd34d; font-weight:800; letter-spacing:.2px; }
    .article-card .ac-band-ico{
      font-size:11.5px; line-height:1; flex:none;
      transition:transform .45s cubic-bezier(.2,.7,.2,1);
    }
    .article-card:hover .ac-band-note{
      border-color:rgba(251,191,36,.5);
      background:linear-gradient(135deg, rgba(251,191,36,.2), rgba(251,191,36,.08));
    }
    .article-card:hover .ac-band-ico{ transform:scale(1.18) rotate(-8deg); }
    :root[data-theme="light"] .article-card .ac-band-note{
      color:#92400e;
      background:linear-gradient(135deg, rgba(251,191,36,.18), rgba(251,191,36,.07));
      border-color:rgba(180,83,9,.28);
    }
    :root[data-theme="light"] .article-card .ac-band-note b{ color:#78350f; }
    :root[data-theme="light"] .article-card:hover .ac-band-note{
      border-color:rgba(180,83,9,.45);
      background:linear-gradient(135deg, rgba(251,191,36,.28), rgba(251,191,36,.12));
    }
    @media (prefers-reduced-motion: reduce){
      .article-card .ac-band-ico{ transition:none; }
      .article-card:hover .ac-band-ico{ transform:none; }
    }

    /* ============================ SPEAKING PHRASEBOOK (reader) ============================
       Articles whose category contains "speak" render their body as grouped,
       interactive phrase cards. Each set cycles through an accent colour
       (--accent / --accent2) so neighbouring sets read as distinct. */
    .phrasebook{ margin-top:26px; }

    .pb-toolbar{
      display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:28px;
    }
    .pb-search{ position:relative; flex:1 1 280px; display:flex; align-items:center; }
    .pb-search svg{
      position:absolute; left:14px; width:17px; height:17px; color:var(--muted); pointer-events:none;
    }
    .pb-search input{
      width:100%; padding:12px 16px 12px 42px; border-radius:12px;
      background:rgba(20,16,28,.6); border:1px solid var(--glass-line); color:var(--text);
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif; font-size:14px;
      backdrop-filter:blur(10px);
      transition:border-color .25s, box-shadow .25s, background .25s;
    }
    .pb-search input::placeholder{ color:var(--muted); }
    .pb-search input:focus{
      outline:none; border-color:rgba(139,109,255,.6);
      box-shadow:0 0 0 4px rgba(139,109,255,.14);
      background:rgba(20,16,28,.85);
    }
    .pb-hint{ font-size:12px; color:var(--muted); font-weight:600; }
    :root[data-theme="light"] .pb-search input{ background:#fff; border-color:rgba(20,8,13,.12); color:#0f172a; }
    :root[data-theme="light"] .pb-search input:focus{ border-color:rgba(109,40,217,.5); box-shadow:0 0 0 4px rgba(109,40,217,.12); }
    :root[data-theme="light"] .pb-hint{ color:#64748b; }

    .pb-noresults{ color:var(--muted); padding:22px 6px; font-size:15px; }
    .pb-noresults span{ color:var(--text); font-weight:600; }

    .pb-cat{ margin:0 0 36px; }
    .pb-cat[hidden]{ display:none; }
    .pb-cat-head{
      display:flex; align-items:center; gap:12px; margin:0 0 16px;
      opacity:0; transform:translateY(10px);
      transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
    }
    .pb-cat-head.in{ opacity:1; transform:none; }
    .pb-cat-no{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:13px; letter-spacing:.5px;
      color:#08101e; line-height:1;
      background:linear-gradient(135deg, var(--accent), var(--accent2));
      padding:6px 10px; border-radius:9px;
      box-shadow:0 6px 18px -6px var(--accent);
    }
    .pb-cat-head h3{
      flex:1; margin:0;
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800;
      font-size:21px; letter-spacing:-.4px; line-height:1.2; color:var(--text);
    }
    .pb-cat-count{
      font-size:12px; font-weight:700; color:var(--muted);
      border:1px solid var(--glass-line); border-radius:99px; padding:3px 11px;
    }
    :root[data-theme="light"] .pb-cat-head h3{ color:#0f172a; }
    :root[data-theme="light"] .pb-cat-count{ color:#64748b; border-color:rgba(20,8,13,.14); }

    .pb-grid{
      display:grid; gap:14px;
      grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    }

    .pb-card{
      position:relative; isolation:isolate; overflow:hidden;
      display:flex; flex-direction:column; gap:9px;
      padding:18px 18px 16px; border-radius:16px;
      background:linear-gradient(180deg, rgba(24,20,34,.82), rgba(18,15,27,.74));
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      opacity:0; transform:translateY(16px);
      transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1),
                 box-shadow .4s ease, border-color .35s ease;
    }
    .pb-card.in{ opacity:1; transform:none; }
    .pb-card[hidden]{ display:none !important; }

    /* Accent gradient ring — lights up on hover */
    .pb-card::before{
      content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
      background:linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 55%, transparent),
        color-mix(in srgb, var(--accent2) 32%, transparent));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      opacity:0; transition:opacity .35s ease; pointer-events:none; z-index:1;
    }
    .pb-card:hover::before{ opacity:1; }
    /* Soft accent wash from the top-left corner on hover */
    .pb-card::after{
      content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
      background:radial-gradient(440px 240px at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
      opacity:0; transition:opacity .4s ease;
    }
    .pb-card:hover::after{ opacity:1; }
    .pb-card > *{ position:relative; z-index:2; }
    .pb-card.in:hover{
      transform:translateY(-4px); border-color:transparent;
      box-shadow:
        0 18px 38px -18px color-mix(in srgb, var(--accent) 58%, transparent),
        0 6px 16px  -8px  rgba(0,0,0,.45);
    }

    .pb-card-top{ display:flex; align-items:flex-start; gap:10px; }
    .pb-phrase{
      flex:1; margin:0;
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:700;
      font-size:16.5px; line-height:1.35; letter-spacing:-.2px; color:var(--text);
    }
    .pb-speak{
      flex:none; width:30px; height:30px; border-radius:9px; cursor:pointer;
      display:grid; place-items:center;
      background:rgba(255,255,255,.05); border:1px solid var(--glass-line); color:var(--muted);
      transition:color .2s, border-color .2s, transform .2s, background .2s;
    }
    .pb-speak svg{ width:15px; height:15px; }
    .pb-speak:hover{
      color:var(--accent); transform:scale(1.08);
      border-color:color-mix(in srgb, var(--accent) 50%, transparent);
      background:color-mix(in srgb, var(--accent) 10%, transparent);
    }
    .pb-speak.pronouncing{ color:var(--accent); animation:pb-pulse .9s ease infinite; }
    @keyframes pb-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.15); } }

    .pb-meaning{ margin:0; font-size:13.5px; line-height:1.5; color:var(--muted); }
    .pb-example{
      margin:2px 0 0; font-size:13.5px; line-height:1.55; font-style:italic;
      color:var(--text); opacity:.94;
      padding:8px 12px; border-radius:0 10px 10px 0;
      border-left:2px solid color-mix(in srgb, var(--accent) 70%, transparent);
      background:color-mix(in srgb, var(--accent) 8%, transparent);
    }
    .pb-example strong{ font-style:normal; font-weight:700; color:var(--accent); }

    .pb-actions{ display:flex; gap:8px; margin-top:auto; padding-top:5px; }
    .pb-act{
      display:inline-flex; align-items:center; gap:6px; cursor:pointer;
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif; font-weight:700; font-size:12px;
      padding:7px 12px; border-radius:9px;
      background:rgba(255,255,255,.04); border:1px solid var(--glass-line); color:var(--muted);
      transition:color .2s, border-color .2s, background .2s, transform .2s;
    }
    .pb-act svg{ width:14px; height:14px; }
    .pb-act:hover{
      color:var(--text); transform:translateY(-1px);
      border-color:color-mix(in srgb, var(--accent) 50%, transparent);
      background:color-mix(in srgb, var(--accent) 10%, transparent);
    }
    .pb-copy.ok{ color:#34d399; border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.12); }
    .pb-save.saved{
      color:var(--accent);
      border-color:color-mix(in srgb, var(--accent) 55%, transparent);
      background:color-mix(in srgb, var(--accent) 12%, transparent);
    }

    /* Touch targets. The shared layer in 31-responsive-global.css grows the
       speaking-article icons (.sb-speak/.sb-save) but never reached the
       phrasebook reader, whose pronounce button is 30px square and whose
       Copy / Save pills are ~30px tall — under the ~40px a fingertip needs, on
       the surface a student taps most in this view. */
    @media (pointer:coarse), (max-width:900px){
      .pb-speak{ width:40px; height:40px; }
      .pb-speak svg{ width:17px; height:17px; }
      .pb-act{ min-height:40px; padding:9px 14px; }
    }

    /* Light mode */
    :root[data-theme="light"] .pb-card{
      background:#ffffff; border-color:rgba(20,8,13,.10);
      box-shadow:0 6px 20px -12px rgba(30,40,80,.16);
    }
    :root[data-theme="light"] .pb-phrase{ color:#0f172a; }
    :root[data-theme="light"] .pb-meaning{ color:#475569; }
    :root[data-theme="light"] .pb-example{ color:#1f2937; }
    :root[data-theme="light"] .pb-speak,
    :root[data-theme="light"] .pb-act{ background:#f4f4f6; border-color:rgba(20,8,13,.12); color:#475569; }

    /* Empty state (article created but no phrases pasted yet) */
    .pb-empty{
      text-align:center; padding:52px 22px; color:var(--muted);
      background:rgba(20,16,28,.5); border:1px dashed var(--glass-line); border-radius:18px;
      backdrop-filter:blur(8px);
    }
    .pb-empty-ic{ font-size:34px; margin-bottom:10px; }
    .pb-empty p{ margin:0 0 6px; color:var(--text); font-weight:700; }
    .pb-empty span{ font-size:13.5px; line-height:1.6; }
    .pb-empty code{
      background:rgba(255,255,255,.08); padding:2px 6px; border-radius:6px;
      font-family:ui-monospace, SFMono-Regular, Menlo, 'Native Emoji', monospace; font-size:12.5px;
    }
    :root[data-theme="light"] .pb-empty{ background:#fff; border-color:rgba(20,8,13,.14); }
    :root[data-theme="light"] .pb-empty code{ background:rgba(20,8,13,.07); }

    @media (prefers-reduced-motion: reduce){
      .pb-card, .pb-cat-head{ opacity:1 !important; transform:none !important; transition:none; }
    }

    /* ===================================================================
       SPEAKING ARTICLE (docx-imported, structured blocks)
       Reproduces the Word layout — navy hero card, gold accents, navy
       "circle" question badges, two-column vocabulary panel and cue card —
       as a self-contained navy/gold sub-theme that reads on both site themes.
       =================================================================== */
    .sb-root{
      --sb-navy:#1b3a5c; --sb-navy-2:#12283d; --sb-gold:#c9a84c;
      --sb-blue:#c8d8e8; --sb-cream:#fdf6e3; --sb-tint:#e8f0f7;
      --sb-hl:#a8cdf0;                 /* highlight ink (dark theme) */
      --sb-panel:rgba(255,255,255,.04);
      --sb-panel-line:var(--glass-line);
      --sb-fs:1.02rem;
    }
    :root[data-theme="light"] .sb-root{ --sb-hl:#1b3a5c; --sb-panel:#fff; --sb-panel-line:rgba(15,23,42,.10); }
    .sb-root.fs-s  { --sb-fs:.92rem; }
    .sb-root.fs-l  { --sb-fs:1.16rem; }
    .sb-root.fs-xl { --sb-fs:1.3rem; }

    .sb-doc{ max-width:840px; margin:0 auto; }

    /* reveal */
    .sb-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
    .sb-reveal.in{ opacity:1; transform:none; }

    /* ---- Hero card ------------------------------------------------- */
    .sb-hero{
      position:relative; overflow:hidden;
      border-radius:22px; padding:34px 34px 30px;
      background:linear-gradient(155deg, #214b74 0%, var(--sb-navy) 42%, var(--sb-navy-2) 100%);
      box-shadow:0 30px 70px -34px rgba(8,20,38,.85), inset 0 1px 0 rgba(255,255,255,.06);
      border:1px solid rgba(201,168,76,.22);
      margin-bottom:26px;
    }
    .sb-hero-glow{
      position:absolute; inset:-40% -10% auto auto; width:60%; height:160%;
      background:radial-gradient(closest-side, rgba(201,168,76,.22), transparent 70%);
      pointer-events:none; filter:blur(6px);
    }
    .sb-hero-inner{ position:relative; }
    .sb-eyebrow{
      display:inline-block; font-size:11px; font-weight:700; letter-spacing:.18em;
      text-transform:uppercase; color:var(--sb-gold); margin-bottom:12px;
    }
    .sb-title{
      margin:0; color:#fff; font-weight:800; line-height:1.12;
      font-size:clamp(26px, 4.4vw, 40px); letter-spacing:-.01em;
    }
    /* The hero card is navy in BOTH themes, so the title must stay solid white —
       override the generic `.article-reader h1` gradient, which turns dark in light mode. */
    .sb-hero .sb-title,
    :root[data-theme="light"] .sb-hero .sb-title{
      background:none;
      -webkit-background-clip:border-box; background-clip:border-box;
      -webkit-text-fill-color:#fff; color:#fff;
    }
    .sb-dek{
      margin:12px 0 0; color:var(--sb-blue); font-style:italic;
      font-size:clamp(14px,1.7vw,16.5px); line-height:1.55; max-width:62ch;
    }
    .sb-meta{ margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
    .sb-meta-item{
      font-size:12px; font-weight:600; color:var(--sb-gold);
      padding:5px 11px; border-radius:999px;
      border:1px solid rgba(201,168,76,.36); background:rgba(201,168,76,.08);
    }

    /* ---- Section banners ("KEY VOCABULARY …", "IELTS SPEAKING …") --- */
    .sb-banner{
      margin:34px 0 18px; padding:13px 20px; border-radius:13px;
      background:linear-gradient(135deg, var(--sb-navy), var(--sb-navy-2));
      border-left:4px solid var(--sb-gold);
      box-shadow:0 14px 30px -20px rgba(8,20,38,.8);
    }
    .sb-banner span{
      color:#fff; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    }

    /* ---- Headings + prose ------------------------------------------ */
    .sb-h2{
      margin:30px 0 12px; font-size:clamp(19px,2.4vw,23px); font-weight:750;
      color:#dcecfb; letter-spacing:-.01em; position:relative; padding-left:14px;
    }
    .sb-h2::before{
      content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px;
      border-radius:3px; background:linear-gradient(var(--sb-gold), #e7cf8f);
    }
    :root[data-theme="light"] .sb-h2{ color:var(--sb-navy); }
    .sb-p{
      margin:0 0 15px; color:var(--text); line-height:1.78;
      font-size:var(--sb-fs); text-align:justify; -webkit-hyphens:auto; hyphens:auto;
    }
    .sb-hl{
      background:linear-gradient(transparent 62%, rgba(201,168,76,.30) 0);
      color:var(--sb-hl); font-weight:600; padding:0 1px; border-radius:2px;
    }

    /* ---- Pull-quote ------------------------------------------------ */
    .sb-quote{
      position:relative; margin:26px 0; padding:24px 26px 24px 58px;
      border-radius:16px; background:var(--sb-panel); border:1px solid var(--sb-panel-line);
      box-shadow:0 18px 40px -28px rgba(8,20,38,.6);
    }
    .sb-quote::before{
      content:"\201C"; position:absolute; left:14px; top:-4px;
      font-size:64px; line-height:1; color:var(--sb-gold); font-family:Georgia, 'Native Emoji', serif; opacity:.85;
    }
    .sb-quote blockquote{
      margin:0; font-style:italic; font-size:clamp(15px,2vw,18px); line-height:1.6;
      color:var(--text); font-weight:500;
    }
    :root[data-theme="light"] .sb-quote{ background:var(--sb-cream); border-color:rgba(201,168,76,.32); }

    /* ---- Vocabulary panel (two columns) ---------------------------- */
    .sb-vocab{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:6px 0 8px; }
    .sb-vocab-col{
      border-radius:16px; padding:18px 18px 20px;
      background:var(--sb-panel); border:1px solid var(--sb-panel-line);
    }
    :root[data-theme="light"] .sb-colloc-col{ background:var(--sb-tint); border-color:rgba(27,58,92,.16); }
    :root[data-theme="light"] .sb-terms-col { background:var(--sb-cream); border-color:rgba(201,168,76,.30); }
    .sb-vocab-h{
      margin:0 0 12px; font-size:14px; font-weight:750; letter-spacing:.01em;
      color:#dcecfb; padding-bottom:8px; border-bottom:1px solid var(--sb-panel-line);
    }
    :root[data-theme="light"] .sb-vocab-h{ color:var(--sb-navy); }
    .sb-colloc-list{ list-style:none; margin:0; padding:0; }
    .sb-colloc-item{
      display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px;
      font-size:calc(var(--sb-fs) - .08rem); color:var(--text); transition:background .18s ease;
    }
    .sb-colloc-item:hover{ background:rgba(201,168,76,.10); }
    .sb-colloc-item::before{
      content:""; flex:none; width:6px; height:6px; border-radius:50%;
      background:var(--sb-gold); box-shadow:0 0 0 3px rgba(201,168,76,.18);
    }
    .sb-colloc-text{ flex:1; }
    .sb-colloc-tools{ display:inline-flex; gap:5px; opacity:0; transform:translateX(4px); transition:.2s ease; }
    .sb-colloc-item:hover .sb-colloc-tools{ opacity:1; transform:none; }
    .sb-term-list{ margin:0; }
    .sb-term{ padding:9px 0; border-bottom:1px dashed var(--sb-panel-line); }
    .sb-term:last-child{ border-bottom:0; }
    .sb-term-h{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
    .sb-term-word{ font-weight:700; color:var(--sb-hl); font-size:calc(var(--sb-fs) - .06rem); }
    :root[data-theme="light"] .sb-term-word{ color:var(--sb-navy); }
    .sb-term-def{ margin:3px 0 0; color:var(--muted); font-size:calc(var(--sb-fs) - .12rem); line-height:1.55; }
    .sb-term .sb-speak, .sb-term .sb-save,
    .sb-colloc-item .sb-speak, .sb-colloc-item .sb-save{ width:26px; height:26px; }

    /* ---- Part divider --------------------------------------------- */
    .sb-part{ display:flex; align-items:center; gap:12px; margin:28px 0 14px; }
    .sb-part-tag{
      flex:none; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
      color:#fff; background:linear-gradient(135deg, var(--sb-navy), var(--sb-navy-2));
      padding:6px 12px; border-radius:999px; box-shadow:0 8px 20px -12px rgba(8,20,38,.8);
    }
    .sb-part-label{ font-size:clamp(15px,2vw,18px); font-weight:700; color:#cfe1f3; }
    :root[data-theme="light"] .sb-part-label{ color:var(--sb-navy); }
    .sb-part::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--sb-panel-line), transparent); }

    /* ---- Practice question (the "circle") -------------------------- */
    .sb-q{
      display:flex; align-items:flex-start; gap:14px; padding:14px 16px; margin:10px 0;
      border-radius:14px; background:var(--sb-panel); border:1px solid var(--sb-panel-line);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .sb-q:hover{
      transform:translateY(-2px); border-color:rgba(201,168,76,.4);
      box-shadow:0 20px 40px -26px rgba(8,20,38,.7);
    }
    .sb-q-num{
      flex:none; width:38px; height:38px; border-radius:50%;
      display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px;
      background:radial-gradient(120% 120% at 30% 25%, #2f5d8a 0%, var(--sb-navy) 55%, var(--sb-navy-2) 100%);
      box-shadow:0 8px 18px -8px rgba(8,20,38,.8), inset 0 1px 0 rgba(255,255,255,.18);
      border:1.5px solid rgba(201,168,76,.45); transition:transform .22s ease;
    }
    .sb-q:hover .sb-q-num{ transform:scale(1.06) rotate(-3deg); }
    .sb-q-main{ flex:1; min-width:0; }
    .sb-q-head{ display:flex; align-items:flex-start; gap:12px; }
    .sb-q-text{ margin:0; flex:1; color:var(--text); line-height:1.6; font-size:var(--sb-fs); padding-top:6px; }
    .sb-q-speak{ margin-top:5px; opacity:0; transform:translateX(4px); transition:.2s ease; }
    .sb-q:hover .sb-q-speak{ opacity:1; transform:none; }

    /* ---- Band-9 model answers ("See answer") ----------------------- */
    .sb-ans-block{ margin-top:11px; }
    .sb-ans-btn{
      display:inline-flex; align-items:center; gap:8px; cursor:pointer;
      padding:7px 13px 7px 11px; border-radius:999px; font:inherit;
      font-size:12.5px; font-weight:800; letter-spacing:.02em; color:var(--sb-gold);
      background:linear-gradient(135deg, rgba(201,168,76,.17), rgba(201,168,76,.05));
      border:1px solid rgba(201,168,76,.36);
      transition:transform .2s cubic-bezier(.2,.85,.25,1), box-shadow .24s ease,
                 background .24s ease, border-color .24s ease;
    }
    .sb-ans-btn:hover{
      transform:translateY(-1.5px); border-color:rgba(201,168,76,.62);
      background:linear-gradient(135deg, rgba(201,168,76,.26), rgba(201,168,76,.09));
      box-shadow:0 12px 26px -16px rgba(201,168,76,.95);
    }
    .sb-ans-btn:active{ transform:scale(.96); }
    .sb-ans-btn-ic{ font-size:12.5px; transition:transform .4s cubic-bezier(.2,.85,.25,1); }
    .sb-ans-block.is-open .sb-ans-btn-ic{ transform:rotate(16deg) scale(1.18); }
    .sb-ans-btn-count{
      font-size:10.5px; font-weight:900; padding:1px 7px; border-radius:999px;
      background:rgba(201,168,76,.24); color:inherit;
    }
    .sb-ans-btn-ch{ width:13px; height:13px; transition:transform .4s cubic-bezier(.2,.85,.25,1); }
    .sb-ans-block.is-open .sb-ans-btn-ch{ transform:rotate(180deg); }

    /* Height is measured and set in JS (see the .sb-ans-btn handler): the
       0fr→1fr grid trick resolves to 0 here, and a fixed max-height makes the
       easing lie about the distance. */
    .sb-ans-panel{
      height:0; overflow:hidden; opacity:0; margin-top:0;
      transition:height .48s cubic-bezier(.2,.85,.25,1),
                 opacity .32s ease, margin-top .4s cubic-bezier(.2,.85,.25,1);
    }
    .sb-ans-block.is-open .sb-ans-panel{ opacity:1; margin-top:12px; }

    .sb-ans-card{
      position:relative; margin:0 0 10px; padding:14px 16px 14px 18px; border-radius:14px;
      background:var(--sb-panel); border:1px solid var(--sb-panel-line);
      box-shadow:0 20px 40px -32px rgba(8,20,38,.9);
      opacity:0; transform:translateY(16px) scale(.975);
      transition:opacity .46s ease, transform .54s cubic-bezier(.2,.9,.25,1);
      transition-delay:calc(var(--k, 0) * 95ms);
    }
    .sb-ans-block.is-open .sb-ans-card{ opacity:1; transform:none; }
    .sb-ans-card:last-child{ margin-bottom:2px; }
    .sb-ans-card::before{
      content:""; position:absolute; left:0; top:13px; bottom:13px; width:3px;
      border-radius:0 3px 3px 0;
      background:linear-gradient(180deg, var(--sb-gold), rgba(201,168,76,0));
    }
    .sb-ans-card-top{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
    .sb-ans-badge{
      font-size:9.5px; font-weight:900; letter-spacing:.11em; text-transform:uppercase;
      color:var(--sb-navy-2); background:linear-gradient(135deg, var(--sb-gold), #e7cf8f);
      padding:3px 9px; border-radius:999px;
    }
    /* everything after the label sits on the right edge */
    .sb-ans-n{ font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.04em; margin-right:auto; }
    /* spoken length of a Part 2 long turn — proof it fills the two minutes */
    .sb-ans-time{
      font-size:11px; font-weight:800; letter-spacing:.03em;
      color:var(--sb-gold); background:rgba(201,168,76,.14);
      border:1px solid rgba(201,168,76,.32); padding:2px 9px; border-radius:999px;
    }
    :root[data-theme="light"] .sb-ans-time{ color:var(--sb-navy); background:rgba(27,58,92,.09); border-color:rgba(27,58,92,.2); }
    .sb-ans-card-top .sb-speak{ width:26px; height:26px; }

    /* Part 2 answers carry a full 2-minute turn — give them more room to read */
    .sb-ans-block--cue .sb-ans-card{ padding:16px 18px 16px 20px; border-radius:16px; }
    .sb-ans-block--cue .sb-ans-tx{ font-size:calc(var(--sb-fs) - .01rem); line-height:1.8; }
    .sb-ans-block--cue .sb-ans-badge{ font-size:10px; padding:3px 10px; }
    .sb-ans-tx{ margin:0; color:var(--text); line-height:1.74; font-size:calc(var(--sb-fs) - .04rem); }
    /* the article's own target language, shown working inside real speech */
    .sb-ans-hl{
      background:linear-gradient(180deg, transparent 62%, rgba(201,168,76,.34) 62%);
      color:inherit; padding:0 1px; border-radius:2px; font-weight:600;
    }
    :root[data-theme="light"] .sb-ans-card{ background:var(--sb-tint); border-color:rgba(27,58,92,.16); }
    :root[data-theme="light"] .sb-ans-btn{
      color:var(--sb-navy); border-color:rgba(27,58,92,.26);
      background:linear-gradient(135deg, rgba(27,58,92,.10), rgba(27,58,92,.03));
    }
    :root[data-theme="light"] .sb-ans-btn:hover{ background:linear-gradient(135deg, rgba(27,58,92,.16), rgba(27,58,92,.06)); }
    :root[data-theme="light"] .sb-ans-btn-count{ background:rgba(27,58,92,.14); }
    :root[data-theme="light"] .sb-ans-hl{ background:linear-gradient(180deg, transparent 62%, rgba(201,168,76,.5) 62%); }

    /* ---- Cue card -------------------------------------------------- */
    .sb-cue{
      margin:14px 0 8px; padding:22px; border-radius:18px;
      background:var(--sb-panel); border:1px solid var(--sb-panel-line);
      box-shadow:0 22px 48px -30px rgba(8,20,38,.7); position:relative; overflow:hidden;
    }
    :root[data-theme="light"] .sb-cue{ background:var(--sb-tint); border-color:rgba(27,58,92,.16); }
    .sb-cue-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
    .sb-cue-badge{
      font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
      color:var(--sb-navy-2); background:linear-gradient(135deg, var(--sb-gold), #e7cf8f);
      padding:5px 11px; border-radius:999px;
    }
    .sb-cue-task{ margin:0 0 14px; font-size:clamp(16px,2.2vw,19px); font-weight:700; font-style:italic; color:var(--text); line-height:1.5; }
    .sb-cue-label{ margin:0 0 8px; font-weight:700; color:#cfe1f3; font-size:13.5px; }
    :root[data-theme="light"] .sb-cue-label{ color:var(--sb-navy); }
    .sb-cue-says{ margin:0 0 12px; padding-left:4px; list-style:none; }
    .sb-cue-says li{ position:relative; padding:5px 0 5px 22px; color:var(--text); line-height:1.5; font-size:calc(var(--sb-fs) - .04rem); }
    .sb-cue-says li::before{ content:""; position:absolute; left:4px; top:.85em; width:7px; height:7px; border-radius:50%; background:var(--sb-gold); }
    .sb-cue-closing{ margin:0; color:var(--muted); font-style:italic; line-height:1.55; font-size:calc(var(--sb-fs) - .06rem); }

    /* ---- Speak / Save icon buttons --------------------------------- */
    .sb-speak, .sb-save{
      flex:none; width:30px; height:30px; display:inline-grid; place-items:center;
      border-radius:9px; cursor:pointer; color:var(--muted);
      background:rgba(255,255,255,.05); border:1px solid var(--sb-panel-line);
      transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
    }
    .sb-speak svg, .sb-save svg{ width:15px; height:15px; }
    .sb-speak:hover, .sb-save:hover{ color:var(--sb-gold); border-color:rgba(201,168,76,.5); background:rgba(201,168,76,.12); transform:translateY(-1px); }
    .sb-speak:active, .sb-save:active{ transform:scale(.92); }
    .sb-speak.pronouncing{ color:var(--sb-gold); animation:sb-pulse 1s ease infinite; }
    @keyframes sb-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,168,76,.45);} 50%{ box-shadow:0 0 0 6px rgba(201,168,76,0);} }
    .sb-save.saved{ color:#34d399; border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.14); }
    :root[data-theme="light"] .sb-speak, :root[data-theme="light"] .sb-save{ background:#fff; border-color:rgba(15,23,42,.12); color:#64748b; }

    @media (max-width:640px){
      .sb-vocab{ grid-template-columns:1fr; }
      .sb-hero{ padding:26px 20px 22px; }
      .sb-colloc-tools, .sb-q-speak{ opacity:1; transform:none; }   /* touch: always show */
      /* Model answers run long (a Part 2 turn is ~320 words). Don't let them
         inherit the question's number-circle gutter — on a narrow screen that
         costs a third of the width. Pull them back to the card's edge.
         38px circle + 14px gap = 52px. */
      /* Scoped to .sb-q: the -52px cancels the QUESTION's 38px number circle
         + 14px gap. The Part-2 cue card has no number circle, so the same pull
         shoved its "See answer" block 29px left of its own card and 5px off the
         screen edge (clipped, unreachable) on every phone. */
      .sb-q .sb-ans-block{ margin-left:-52px; }
      .sb-ans-card{ padding:13px 14px 13px 16px; }
    }
    @media (prefers-reduced-motion: reduce){
      .sb-reveal{ opacity:1 !important; transform:none !important; transition:none; }
      .sb-q, .sb-q-num, .sb-speak, .sb-save{ transition:none; }
      .sb-speak.pronouncing{ animation:none; }
      .sb-ans-panel, .sb-ans-btn, .sb-ans-btn-ch, .sb-ans-btn-ic{ transition:none; }
      .sb-ans-card{ transition:none; transition-delay:0s; opacity:1; transform:none; }
    }

    /* ============================ FREE / PREMIUM TIERS ============================ */
    /* Gold "Premium" chip on cards. Entitled accounts see 👑; non-entitled (the
       body was stripped server-side) see the 🔒 variant. */
    .article-card .ac-premium{
      font-size:11px; font-weight:800; letter-spacing:.3px;
      padding:4px 11px; border-radius:99px; color:#3a2400;
      background:linear-gradient(135deg,#fde68a,#f59e0b);
      box-shadow:0 5px 16px -6px rgba(245,158,11,.6);
      white-space:nowrap;
    }
    .article-card .ac-premium.is-locked{
      color:#fff; background:linear-gradient(135deg,#9ca3af,#4b5563);
      box-shadow:0 5px 16px -7px rgba(0,0,0,.6);
    }
    /* Locked cards: gold ring + the title/summary dimmed a touch behind the lock */
    .article-card.is-locked::before{
      background:linear-gradient(135deg,
        rgba(245,158,11,0)   0%,
        rgba(245,158,11,.40) 35%,
        rgba(251,191,36,.30) 65%,
        rgba(245,158,11,0)  100%);
      opacity:.6;
    }
    .article-card.is-locked h3,
    .article-card.is-locked .ac-summary{ opacity:.82; }
    .article-card.is-locked .ac-read{ color:#f59e0b; }
    :root[data-theme="light"] .article-card.is-locked .ac-read{ color:#b45309; }

    /* Count badge inside each filter pill */
    .articles-filter button .art-pill-count{
      display:inline-block; margin-left:7px; padding:1px 7px; border-radius:99px;
      font-size:11px; font-weight:800; line-height:1.5;
      background:rgba(255,255,255,.10); color:inherit;
      border:1px solid rgba(255,255,255,.14);
    }
    .articles-filter button.active .art-pill-count{
      background:rgba(0,0,0,.18); border-color:transparent;
    }
    :root[data-theme="light"] .articles-filter button .art-pill-count{
      background:rgba(20,8,13,.06); border-color:rgba(20,8,13,.12);
    }

    /* "X articles · Y free · Z premium" summary line under the filter pills */
    .articles-count{
      text-align:center; color:var(--muted); font-size:13px; font-weight:600;
      letter-spacing:.2px; margin:14px auto 0; min-height:18px;
    }

    /* ============================ ARTICLE PAYWALL (reader) ============================ */
    .article-locked{
      max-width:560px; margin:24px auto; padding:48px 32px; text-align:center;
      background:rgba(20,16,28,.55); border:1px solid var(--glass-line);
      border-radius:22px; backdrop-filter:blur(10px);
    }
    :root[data-theme="light"] .article-locked{
      background:#ffffff; border-color:rgba(20,8,13,.12);
      box-shadow:0 18px 48px -24px rgba(20,8,13,.25);
    }
    .article-locked-ico{
      font-size:46px; margin-bottom:8px;
      filter:drop-shadow(0 8px 20px rgba(245,158,11,.45));
    }
    .article-locked-tags{
      display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:16px;
    }
    .article-locked-title{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:26px; line-height:1.25; letter-spacing:-.4px; margin:0 0 12px; color:var(--text);
    }
    .article-locked-summary{
      font-size:15px; line-height:1.65; color:var(--muted); margin:0 0 18px;
      font-style:italic;
    }
    .article-locked-text{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:0 0 22px; }
    .article-locked-cta{ min-width:180px; }
    .article-locked-sub{ margin-top:14px; font-size:12.5px; color:var(--muted); opacity:.75; }

    /* ============================ "READ" STATE ============================ */
    /* A card the user has read gets the "aurora achievement" identity — a
       vivid cyan→blue→indigo sweep. Deliberately NOT another green: the site
       is lime/emerald everywhere, which made the old pill invisible. The pill
       drifts its gradient, pulses a soft glow, and the whole card ring + CTA
       switch to the same blue so read cards pop at a glance. */
    .article-card.is-read{
      border-color:rgba(56,189,248,.42);
      background:
        linear-gradient(160deg, rgba(59,130,246,.14), rgba(59,130,246,0) 46%),
        linear-gradient(180deg, rgba(22,18,32,.85), rgba(18,14,26,.78));
    }
    :root[data-theme="light"] .article-card.is-read{
      border-color:rgba(59,130,246,.45);
      background:linear-gradient(160deg, rgba(59,130,246,.08), #ffffff 52%);
    }
    /* the gradient border ring follows the aurora identity */
    .article-card.is-read::before{
      background:linear-gradient(135deg,
        rgba(34,211,238,0)    0%,
        rgba(34,211,238,.45) 30%,
        rgba(59,130,246,.45) 55%,
        rgba(129,140,248,.40) 80%,
        rgba(34,211,238,0)  100%);
      opacity:.65;
    }
    .article-card.is-read:hover{
      box-shadow:
        0 18px 40px -18px rgba(59,130,246,.5),
        0 6px 18px  -8px  rgba(0,0,0,.4);
    }
    :root[data-theme="light"] .article-card.is-read:hover{
      box-shadow:
        0 18px 40px -18px rgba(59,130,246,.32),
        0 6px 18px  -8px  rgba(30,0,60,.12);
    }
    .article-card.is-read .ac-read{ color:#60a5fa; }
    :root[data-theme="light"] .article-card.is-read .ac-read{ color:#2563eb; }
    .article-card .ac-read-flag{
      position:absolute; bottom:18px; right:18px; z-index:4;
      display:inline-flex; align-items:center; gap:6px; overflow:hidden;
      padding:5px 12px 5px 5px; border-radius:99px;
      font-size:11.5px; font-weight:800; letter-spacing:.4px; white-space:nowrap;
      color:#fff;
      background:linear-gradient(120deg,#22d3ee,#3b82f6 45%,#818cf8 75%,#22d3ee);
      background-size:220% 220%;
      box-shadow:0 6px 18px -6px rgba(59,130,246,.65), inset 0 0 0 1px rgba(255,255,255,.22);
      animation:
        acReadPop   .5s  cubic-bezier(.2,.9,.3,1.35) both,
        acReadDrift 4s   ease-in-out .5s infinite,
        acReadGlow  2.6s ease-in-out .5s infinite;
    }
    .article-card .ac-read-flag .ac-read-tick{
      display:inline-flex; align-items:center; justify-content:center;
      width:16px; height:16px; border-radius:50%;
      background:rgba(255,255,255,.94); color:#2563eb;
      font-size:10px; font-weight:900; line-height:1;
    }
    /* shine sweep across the pill when the card is hovered */
    .article-card .ac-read-flag::after{
      content:""; position:absolute; inset:0; border-radius:inherit;
      background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
      transform:translateX(-130%); pointer-events:none;
    }
    .article-card.is-read:hover .ac-read-flag::after{
      transition:transform .8s ease; transform:translateX(130%);
    }
    @keyframes acReadPop{
      from{ opacity:0; transform:translateY(7px) scale(.7); }
      to  { opacity:1; transform:none; }
    }
    @keyframes acReadDrift{
      0%,100%{ background-position:0% 50%; }
      50%    { background-position:100% 50%; }
    }
    @keyframes acReadGlow{
      0%,100%{ box-shadow:0 6px 18px -6px rgba(59,130,246,.55), inset 0 0 0 1px rgba(255,255,255,.22); }
      50%    { box-shadow:0 8px 24px -4px rgba(99,102,241,.85), inset 0 0 0 1px rgba(255,255,255,.32); }
    }

    /* One-time "Read ✓" celebration that pops in the reader at the halfway mark:
       a ring draws itself, a checkmark snaps in, a glow ripples out, then it fades. */
    .ar-read-burst{
      position:fixed; top:86px; left:50%; transform:translateX(-50%) scale(.6);
      z-index:200; pointer-events:none;
      display:flex; flex-direction:column; align-items:center; gap:8px;
      opacity:0; transition:opacity .3s ease, transform .45s cubic-bezier(.2,.9,.3,1.4);
    }
    .ar-read-burst.go{ opacity:1; transform:translateX(-50%) scale(1); }
    .ar-read-burst.out{ opacity:0; transform:translateX(-50%) translateY(-16px) scale(.96); }
    .ar-read-burst .ar-read-check{ width:64px; height:64px; filter:drop-shadow(0 6px 18px rgba(59,130,246,.5)); }
    .ar-read-burst .ar-read-c{ stroke:#38bdf8; stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; }
    .ar-read-burst.go .ar-read-c{ animation:arReadCircle .5s ease forwards; }
    .ar-read-burst .ar-read-p{ stroke:#60a5fa; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; }
    .ar-read-burst.go .ar-read-p{ animation:arReadCheck .35s .42s ease forwards; }
    .ar-read-burst .ar-read-ring{
      position:absolute; top:2px; left:50%; width:64px; height:64px; margin-left:-32px;
      border-radius:50%; border:2px solid rgba(96,165,250,.6);
    }
    .ar-read-burst.go .ar-read-ring{ animation:arReadRipple .75s .1s ease-out forwards; }
    .ar-read-burst .ar-read-label{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:15px;
      color:#3b82f6; letter-spacing:.4px; padding:4px 14px; border-radius:99px;
      background:rgba(59,130,246,.14); border:1px solid rgba(96,165,250,.4); backdrop-filter:blur(6px);
    }
    @keyframes arReadCircle{ to{ stroke-dashoffset:0; } }
    @keyframes arReadCheck{ to{ stroke-dashoffset:0; } }
    @keyframes arReadRipple{ 0%{ transform:scale(.7); opacity:.8; } 100%{ transform:scale(1.85); opacity:0; } }
    @media (prefers-reduced-motion: reduce){
      .ar-read-burst, .ar-read-burst *{ animation:none !important; transition:opacity .2s !important; }
      .ar-read-burst .ar-read-c, .ar-read-burst .ar-read-p{ stroke-dashoffset:0 !important; }
      .article-card .ac-read-flag{ animation:none !important; }
    }



/* ============================================================================
   SINGLE-ARTICLE READER
   Recovered from writing/07-writing-topics.css, which was deleted during the
   CSS reorganisation without these rules being re-homed. Everything below is
   emitted by content/07-articles.js (renderArticleReader) and had NO matching
   CSS in the bundle, so /articles/<id> was rendering with browser defaults:
   a #0000EE back link, raw grey #efefef toolbar buttons and zero page padding.
   ============================================================================ */

    /* Single-article reader */
    body.article-reader-mode > .aurora,
    body.article-reader-mode > .wrap,
    body.article-reader-mode > section:not(#article-reader){ display:none !important; }

    /* Cosmic backdrop (same recipe as articles list) */
    body.article-reader-mode{ position:relative; }
    body.article-reader-mode::before{
      content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
      background:
        radial-gradient(600px 460px at 88% 6%,  rgba( 16,185,229, .14), transparent 60%),
        radial-gradient(600px 460px at 8% 92%,  rgba(124, 92,255, .14), transparent 60%);
      animation:nebulaDrift 32s ease-in-out infinite alternate;
    }
    body.article-reader-mode > header   { position:relative; z-index:50; }
    body.article-reader-mode > footer,
    body.article-reader-mode > .admin-fab,
    body.article-reader-mode > #article-reader{ position:relative; z-index:1; }

    /* Reading progress bar — fixed at the very top, fills as you scroll */
    .reader-progress{
      position:fixed; top:0; left:0; height:3px; width:0%;
      background:linear-gradient(90deg, #7c5cff, #10b9e5 50%, #c6f24e);
      box-shadow:0 0 12px rgba(124,92,255,.7);
      z-index:50; transition:width .08s linear;
    }

    .article-reader{
      max-width:780px; margin:0 auto; padding:40px 24px 100px;
    }
    .article-reader-back{
      display:inline-flex; align-items:center; gap:6px;
      padding:9px 16px; border-radius:10px;
      background:rgba(255,255,255,.04); border:1px solid var(--glass-line);
      color:var(--text); text-decoration:none; font-weight:600; font-size:13.5px;
      transition:all .25s;
      margin-bottom:26px;
      backdrop-filter:blur(8px);
    }
    .article-reader-back:hover{
      background:var(--glass); transform:translateX(-2px);
      border-color:rgba(198,242,78,.4);
    }
    :root[data-theme="light"] .article-reader-back{
      background:#ffffff; border-color:rgba(20,8,13,.10); color:#0f172a;
      box-shadow:0 4px 12px -6px rgba(30,40,80,.12);
    }
    :root[data-theme="light"] .article-reader-back:hover{
      background:#f4f4f6; border-color:rgba(101,163,13,.5);
    }
    .article-reader h1{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:clamp(30px, 5vw, 48px); letter-spacing:-1.5px; line-height:1.1;
      margin-bottom:14px;
      background:linear-gradient(120deg, var(--text) 0%, #c6f24e 90%);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    :root[data-theme="light"] .article-reader h1{
      background:linear-gradient(120deg, #14080d 0%, #6235e0 100%);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .article-reader-meta{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
      margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--glass-line);
    }
    .article-reader-summary{
      font-size:18.5px; line-height:1.65; color:var(--text);
      font-style:italic; margin-bottom:28px;
      padding:18px 22px;
      background:linear-gradient(135deg, rgba(124,92,255,.10), rgba(198,242,78,.06));
      border-left:3px solid var(--lime); border-radius:0 14px 14px 0;
    }
    :root[data-theme="light"] .article-reader-summary{
      background:linear-gradient(135deg, rgba(109,40,217,.07), rgba(101,163,13,.05));
      border-left-color:#65a30d; color:#0f172a;
    }
    .article-reader-image{
      max-width:100%; border-radius:16px; margin-bottom:28px; display:block;
      box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
    }
    .article-reader-body{
      font-size:17.5px; line-height:1.85; color:var(--text);
      font-family:'Hanken Grotesk', Georgia, 'Native Emoji', serif;
      letter-spacing:.005em;
      position:relative;
      user-select:text;
    }
    /* Real paragraphs (no more pre-wrap blob) — each one fades in as you scroll */
    .article-reader-body p{
      margin:0 0 1.15em;
      opacity:0; transform:translateY(14px);
      transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
    }
    .article-reader-body p.in{ opacity:1; transform:none; }
    /* First paragraph: bigger, slightly bolder — sets the tone */
    .article-reader-body p.lead{
      font-size:1.13em; line-height:1.75; font-weight:500;
      color:var(--text);
    }
    /* Drop cap on the FIRST paragraph only (not every paragraph) */
    .article-reader-body p.lead::first-letter{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:3.6em; line-height:.9; font-weight:800;
      float:left; padding:6px 12px 0 0; margin-top:4px;
      background:linear-gradient(135deg, #7c5cff, #c6f24e);
      -webkit-background-clip:text; background-clip:text;
      /* `-webkit-text-fill-color` is NOT honoured on ::first-letter, so the
         glyph painted solid --text straight over the gradient. `color` is. */
      -webkit-text-fill-color:transparent; color:transparent;
    }
    :root[data-theme="light"] .article-reader-body p.lead::first-letter{
      background:linear-gradient(135deg, #6d28d9, #65a30d);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent; color:transparent;
    }
    /* Pull quote — any paragraph wrapped in &quot; or " */
    .article-reader-body p.pull{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:1.4em; line-height:1.35; font-weight:600;
      font-style:italic; letter-spacing:-.3px;
      margin:1.6em 0; padding:18px 24px;
      border-left:3px solid var(--lime);
      background:linear-gradient(135deg, rgba(124,92,255,.10), rgba(198,242,78,.05));
      border-radius:0 14px 14px 0;
      color:var(--text);
    }
    :root[data-theme="light"] .article-reader-body p.pull{
      background:linear-gradient(135deg, rgba(109,40,217,.07), rgba(101,163,13,.05));
      border-left-color:#65a30d; color:#0f172a;
    }
    .article-reader-body p.pull::before{
      content:"\201C"; font-size:1.4em; line-height:0;
      vertical-align:-.15em; margin-right:4px; opacity:.55;
    }
    /* Heading-like lines (short, no terminal punctuation) become section heads */
    .article-reader-body h3.section-head{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:1.45em; letter-spacing:-.3px; line-height:1.25;
      margin:1.6em 0 .5em; font-weight:800;
      color:var(--text);
      opacity:0; transform:translateY(14px);
      transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
    }
    .article-reader-body h3.section-head.in{ opacity:1; transform:none; }
    .article-reader-body h3.section-head::before{
      content:""; display:inline-block; width:24px; height:2px;
      background:linear-gradient(90deg, #7c5cff, #c6f24e);
      vertical-align:middle; margin-right:10px; transform:translateY(-3px);
    }
    /* Subtle divider every few paragraphs */
    .article-reader-body hr.section-divider{
      border:none; height:1px;
      background:linear-gradient(90deg, transparent, var(--glass-line), transparent);
      margin:2em auto; width:60%;
    }
    /* Reading tools: font size, study mode, etc. */
    .reader-tools{
      display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 24px;
      padding:10px 12px; border-radius:14px;
      background:rgba(20,16,28,.65); border:1px solid var(--glass-line);
      backdrop-filter:blur(10px); align-items:center;
    }
    :root[data-theme="light"] .reader-tools{
      background:#ffffff;
      border-color:rgba(20,8,13,.10);
      box-shadow:0 6px 20px -10px rgba(30,40,80,.18);
    }
    .reader-tools .rt-label{
      font-size:11px; font-weight:800; letter-spacing:1.2px;
      color:var(--muted); text-transform:uppercase; margin-right:6px;
    }
    .reader-tools button{
      background:transparent; border:1px solid var(--glass-line); color:var(--text);
      padding:6px 12px; border-radius:8px; font-weight:600; font-size:12.5px;
      cursor:pointer; transition:all .2s;
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
    }
    :root[data-theme="light"] .reader-tools button{
      border-color:rgba(20,8,13,.14);
      color:#0f172a;
    }
    .reader-tools button:hover{ border-color:rgba(198,242,78,.5); color:var(--lime); }
    .reader-tools button.active{
      background:var(--lime); color:var(--on-lime); border-color:var(--lime);
    }
    :root[data-theme="light"] .reader-tools button.active{
      background:#65a30d; color:#fff; border-color:#65a30d;
    }
    .reader-tools .rt-spacer{ flex:1; }
    .reader-tools .rt-stat{ font-size:12px; color:var(--muted); font-weight:600; }
    :root[data-theme="light"] .reader-tools .rt-stat{ color:#475569; }
    :root[data-theme="light"] .reader-tools .rt-label{ color:#475569; }

    /* Font-size scale variants applied to the body */
    .article-reader-body.fs-s{ font-size:15.5px; line-height:1.85; }
    .article-reader-body.fs-l{ font-size:19.5px; line-height:2.0; }
    .article-reader-body.fs-xl{ font-size:21.5px; line-height:2.05; }


/* ============================================================================
   SELECTION POPOVER + CONFIRM TOAST
   The markup for both has been in index.html and driven by 07-articles.js all
   along, but neither ever had a stylesheet — so selecting a word in an article
   dropped an unstyled row of buttons into the page and left "✓ Saved to
   QuizBank" permanently visible in the corner instead of flashing once.

   Positioned against #article-reader, which the takeover already makes
   position:relative — showPopoverForSelection() measures against that same
   box, so left/top from the JS land where the selection is.
   ========================================================================== */
.ar-popover{
  position:absolute; z-index:60; left:0; top:0; width:max-content;
  max-width:min(340px, calc(100vw - 24px));
  padding:10px; border-radius:14px;
  background:var(--bg-soft); border:1px solid var(--glass-line);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.97);
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,1.3,.4,1), visibility .16s;
  pointer-events:none;
}
.ar-popover.open{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}

/* ---- the action row ---- */
.ar-pop-actions{ display:flex; align-items:center; gap:2px; }
.ar-pop-actions button{
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:9px; border:0; background:transparent;
  color:var(--text); font:inherit; font-size:13px; font-weight:650;
  white-space:nowrap; transition:background .16s, color .16s;
}
.ar-pop-actions button:hover{ background:var(--chip-bg-hover); }
.ar-pop-actions button:active{ transform:scale(.97); }
.ar-pop-actions .pb-icon{ font-size:14px; line-height:1; }
.pb-sep{ width:1px; height:18px; flex:none; background:var(--hairline); }
/* Lookup-only mode (speaking articles) hides Highlight and the separators, so
   the row must not keep their gaps. */
.ar-popover.lookup-only .ar-pop-actions{ gap:0; }

/* ---- the definition / translation card ---- */
.ar-pop-def{ margin-bottom:9px; padding-bottom:9px; border-bottom:1px solid var(--hairline); }
.ar-pop-def[hidden]{ display:none; }
.ar-pop-langs{ display:flex; gap:4px; margin-bottom:9px; flex-wrap:wrap; }
.ar-pop-lang{
  cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px; border:1px solid var(--hairline);
  background:var(--chip-bg); color:var(--muted);
  font:inherit; font-size:11px; font-weight:700;
  transition:background .16s, border-color .16s, color .16s;
}
.ar-pop-lang:hover{ color:var(--text); background:var(--chip-bg-hover); }
.ar-pop-lang.is-active{
  color:var(--text);
  background:color-mix(in srgb,var(--lime) 16%,transparent);
  border-color:color-mix(in srgb,var(--lime) 44%,transparent);
}
.ar-pop-lang-flag{ font-size:12px; line-height:1; }

.ar-pop-term{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ar-pop-word{ font-size:15px; font-weight:800; letter-spacing:-.2px; }
.ar-pop-speak{
  cursor:pointer; width:24px; height:24px; flex:none; display:grid; place-items:center;
  border-radius:7px; border:1px solid var(--hairline); background:var(--chip-bg);
  color:var(--text); padding:0; transition:background .16s, transform .18s;
}
.ar-pop-speak:hover{ background:var(--chip-bg-hover); transform:scale(1.08); }
.ar-pop-speak svg{ width:13px; height:13px; }
.ar-pop-phon{ font-size:12px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.ar-pop-body{ margin-top:7px; font-size:13px; line-height:1.6; }
.ar-pop-pos{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;
}
.ar-pop-def-text, .ar-pop-body .ar-pop-def{
  border:0; padding:0; margin:0; color:var(--text);
}
.ar-pop-trans-word{ color:var(--text); font-weight:650; }
.ar-pop-trans-phrase{ font-weight:500; }
.ar-pop-loading{ color:var(--muted); font-style:italic; font-size:12.5px; }

/* ---- the confirm toast ----
   It lives at the end of #article-reader and was showing permanently because
   nothing hid it; `.show` is the class 07-articles.js toggles for 1.8s. */
.ar-confirm{
  position:fixed; left:50%; bottom:26px; z-index:70;
  padding:10px 18px; border-radius:999px; white-space:nowrap;
  background:var(--bg-soft); border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);
  box-shadow:var(--shadow-lg);
  font-size:13px; font-weight:700; color:var(--text);
  opacity:0; visibility:hidden; transform:translate(-50%, 12px);
  transition:opacity .22s ease, transform .28s cubic-bezier(.2,1.3,.4,1), visibility .22s;
  pointer-events:none;
}
.ar-confirm.show{ opacity:1; visibility:visible; transform:translate(-50%, 0); }

@media (prefers-reduced-motion: reduce){
  .ar-popover, .ar-confirm, .ar-pop-actions button, .ar-pop-lang, .ar-pop-speak{
    transition:none !important;
  }
  .ar-pop-speak:hover, .ar-pop-actions button:active{ transform:none !important; }
}