/* Study desk additions for the Vietnamese site (/vi/study/). The desk itself is
   styled by beta/vi/css/50-study.css (folded into /vi/vi.css); this file is
   copied to /vi/study/study.css and linked from the page head by
   beta/vi/pages/study.mjs. It only holds what the shared sheets do not yet
   have. Tokens only, no literal colors. Rules worth folding into 50-study.css
   / 15-components.css are marked FOLD. */

/* FOLD (15-components): brick callout for the critical points of a skill, always first in the card. */
.vi-then-chot { border-left-width: 6px; margin-top: 0; }
.vi-then-chot .vi-etiqueta { color: var(--ambar-tinta); }
.vi-then-chot p:last-child { font-weight: 600; }

/* FOLD (15-components): the "Ẩn cách đọc gần đúng" toggle hides every cue line. */
html.vi-doc-an .vi-cau__doc { display: none; }

/* FOLD (50-study): bottom bar shows four items on phones; Tình huống and Kế hoạch
   live on the side rail (from 900px) and are reached from the Hôm nay cards. */
.est-nav__phu { display: none; }
.est-nav__them { display: none; }
@media (min-width: 900px) {
  .est-nav__phu { display: block; }
  .est-nav__them { display: inline; }
}

/* Pronunciation toggle bar (once per page, shown on Hôm nay, Kỹ năng, Tiếng Anh khi thi). */
.est-doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0 0 var(--s4); }
.est-doc[hidden] { display: none; }
.est-doc .vi-nota { margin: 0; flex: 1 1 14rem; }
.est-doc .vi-boton { min-height: var(--toque); }

/* Câu tiếng Anh hôm nay */
.est-homnay .vi-cau { margin-top: var(--s3); }
.est-homnay .vi-acciones { margin-top: var(--s3); }

/* Skill card: English toggle and the step lines. */
.est-xem { margin: var(--s4) 0 var(--s3); }
.est-pasos li p { margin: 0; max-width: none; }
.est-pasos .est-paso-en { margin-top: var(--s1); color: var(--marino); font-weight: 600; }
.est-pasos .est-paso-en[hidden] { display: none; }
.est-destreza .vi-cau { margin-block: var(--s3); }

/* 60-question mock in English only: the Vietnamese sits behind "Xem tiếng Việt". */
.est-xemviet { margin: 0 0 var(--s4); border-top: 1px solid var(--linea); }
.est-xemviet > summary { display: flex; align-items: center; min-height: var(--toque); font-weight: 600; color: var(--agave); cursor: pointer; }
.est-xemviet > p { font-weight: 500; margin: var(--s2) 0; }
.est-xemviet__lua { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: var(--s2); }
.est-xemviet__lua li { max-width: none; }
.vi-pregunta__enunciado[lang="en"] { color: var(--marino); }
#englishOnly[aria-pressed="true"]::after { content: " ✓"; }

/* Interpreter rule and cue legend. */
.est-regla { margin: 0 0 var(--s3); font-weight: 600; }
.vi-cau__legend { margin: 0 0 var(--s4); font-size: var(--texto-chico); max-width: 40rem; }
/* Slow-listen button sits beside the listen button inside a bridge card. */
.vi-cau .vi-escuchar--cham, .est-oido .vi-escuchar--cham { margin-inline-start: var(--s2); }