/* v310 · teaching panels easier to read (an outside review measured 12.5–14px for instructions and translations on a
   computer), learner tasks, role-play support levels, Conversation mode, Guided exchange and 🔈 English sounds.
   Computers (≥1024px) start one step larger; html.vc-teach-lg (🔠 Large text, vc_teach_text) adds another. */

/* ---- new pieces ---- */
.vc-plan-ready{ margin:0 0 10px; padding:9px 12px; border-radius:12px; background:#e9f7f2; border:1px solid #b9e0d3; color:#0b4f49; font-size:14px; line-height:1.4; }
.vc-plan-ready[hidden]{ display:none !important; }
.vc-lpt-aa{ font-weight:800; letter-spacing:-.02em; } .vc-lpt-aa small{ font-size:.72em; } .vc-lpt-aa.on{ background:#0F766E !important; color:#fff !important; }
.vc-lpt-do.vc-lpt-sees{ background:#f6faf8; border-style:dashed; }
.vc-lpt-do.vc-lpt-task{ background:#eef9f4; border-color:#9fd6c3; }
.vc-lpt-do.vc-lpt-task .vc-lpt-do-h{ color:#0b5f58; }
.vc-lpt-corr{ display:inline-block; margin-top:8px; padding:4px 10px; border-radius:999px; background:#fff7e6; border:1px solid #f1d59b; color:#7a4b00; font-size:13px; font-weight:700; }
.vc-sd-modes{ margin:6px 0 4px; } .vc-sd-modes button{ font-size:13px; padding:6px 8px; }
.vc-sd-b.hid{ background:#fff; }
.vc-sd-goal{ font-size:16px; line-height:1.4; color:#14352d; } .vc-sd-goal b{ font-weight:800; }
.vc-sd-tip{ font-size:13px; color:#4b6158; margin-top:4px; line-height:1.4; }
.vc-sd-peek{ margin-top:8px !important; min-height:36px; }
.vc-sd-twist{ margin:4px 0 6px; padding:8px 11px; border-radius:12px; background:#fff4e5; border:1px solid #f3cf93; color:#5b3a00; font-size:14px; line-height:1.4; }
.vc-sd-done .check-btn{ margin-top:8px; }
.vc-sd-ask{ text-align:center; font-size:13px; font-weight:800; color:#0b5f58; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.sit-card.fit{ box-shadow:0 0 0 2px #0F766E inset; }
.vc-sitq-ans.pc{ background:#f7f9ff; border-color:#cfd8f3; }
.vc-sitq-pc{ font-size:12.5px; color:#3b4a7a; font-weight:700; }
.vc-tm-text{ display:block; width:calc(100% - 16px); margin:2px 8px 6px; padding:7px 10px; border-radius:10px; border:1px solid #cfe0da; background:#f6faf8; font:700 13px var(--font, inherit); color:#0b5f58; cursor:pointer; text-align:left; }
.vc-tm-text[aria-pressed="true"]{ background:#0F766E; color:#fff; border-color:#0F766E; }
.vc-ex-pick .deck-label{ margin-top:8px; }
.vc-ex-seg{ flex-wrap:wrap; } .vc-ex-seg button{ font-size:13px; }
/* 🔈 English sounds */
.vc-ens-sets{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.vc-ens-sets .sit-card{ text-align:left; } .vc-ens-sets small{ display:block; margin-top:3px; color:#5b6f68; }
.vc-ens-set{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0; font-size:15px; }
.vc-ens-change{ margin:0 !important; min-height:32px; padding:4px 10px !important; }
.vc-ens-opts .vc-sd-opt{ font-size:20px; font-weight:800; min-height:56px; }
.vc-ens-res{ margin:6px 0; padding:7px 10px; border-radius:10px; font-size:14.5px; background:#f3f6f5; }
.vc-ens-res.ok{ background:#e6f6ee; color:var(--ok-ink, #166534); } .vc-ens-res.no{ background:#fff4e5; color:#7a4b00; }
.vc-ens-say{ margin:8px 0; padding:10px 12px; border-radius:12px; border:1px solid #cfe0da; background:#fbfdfc; font-size:14.5px; }
.vc-ens-big{ display:block; font-size:30px; font-weight:800; margin:6px 0; color:#0b4f49; }

/* the earlier dialogue stays readable (it used to fade to .72) */
.vc-sd-b:not(.cur){ opacity:1; }
.vc-sd-b:not(.cur) .sit-t{ color:#33463f; }

body.dark-mode .vc-plan-ready{ background:#16332b; border-color:#2b5a4c; color:#d5efe6; }
body.dark-mode .vc-lpt-do.vc-lpt-sees, body.dark-mode .vc-lpt-do.vc-lpt-task, body.dark-mode .vc-sd-b.hid, body.dark-mode .vc-ens-say{ background:#14211e; border-color:#2b3d38; }
body.dark-mode .vc-sd-goal{ color:#e6f1ec; } body.dark-mode .vc-sd-tip{ color:#b9cdc5; }
body.dark-mode .vc-sd-twist, body.dark-mode .vc-lpt-corr{ background:#33270f; border-color:#5c4a22; color:#f3dcae; }
body.dark-mode .vc-sd-b:not(.cur) .sit-t{ color:#d4e4dd; }
body.dark-mode .vc-ens-res{ background:#1b2b26; color:#d4e4dd; } body.dark-mode .vc-ens-big{ color:#bfe9da; }
body.dark-mode .vc-tm-text{ background:#14211e; border-color:#2b3d38; color:#cfe3da; }
body.dark-mode .vc-sitq-ans.pc{ background:#1a2033; border-color:#34406a; }

/* ---- computers: one step larger by default ---- */
@media (min-width:1024px){
  .vc-lpt{ width:440px; max-height:calc(100vh - 150px); }
  .vc-lpt-now b.vc-lpt-step{ font-size:21px; }
  .vc-lpt-do p{ font-size:17px !important; }
  .vc-lpt-do p.vc-lpt-do-alt{ font-size:15px !important; }
  .vc-lpt-go{ font-size:15px; padding:9px 15px; }
  .vc-lpt-w b{ font-size:16px; } .vc-lpt-w span{ font-size:15px; }
  .vc-sd-how{ font-size:15px; }
  .vc-sd-b .sit-t{ font-size:17px; }
  .vc-sd-b .sit-g{ font-size:15px; }
  .vc-sd-b small{ font-size:13px; }
  .vc-sd-b.cur .sit-t{ font-size:23px; }
  .vc-sd-goal{ font-size:18px; } .vc-sd-tip{ font-size:15px; }
  .vc-sd-modes button{ font-size:14px; }
  .vc-sit-duo .sit-t{ font-size:17px; } .vc-sit-duo .sit-g{ font-size:15px; }
  .vc-sitq-hint{ font-size:16px; } .vc-sitq-txt{ font-size:16px; }
  .vc-drill-en{ font-size:16px; } .vc-drill-answer{ font-size:19px; }
  .vc-sd-word{ font-size:28px; }
}
/* ---- 🔠 Large text ---- */
html.vc-teach-lg .vc-lpt{ width:min(520px, calc(100vw - 32px)); }
html.vc-teach-lg .vc-lpt-now b.vc-lpt-step{ font-size:24px; }
html.vc-teach-lg .vc-lpt-do p{ font-size:19px !important; }
html.vc-teach-lg .vc-lpt-do p.vc-lpt-do-alt{ font-size:17px !important; }
html.vc-teach-lg .vc-lpt-go, html.vc-teach-lg .vc-sit-duo-btns button, html.vc-teach-lg .vc-lpt-nav button{ font-size:17px; }
html.vc-teach-lg .vc-lpt-w b{ font-size:18px; } html.vc-teach-lg .vc-lpt-w span{ font-size:17px; }
html.vc-teach-lg .vc-sd-how, html.vc-teach-lg .vc-sd-tip{ font-size:17px; }
html.vc-teach-lg .vc-sd-b .sit-t, html.vc-teach-lg .vc-sit-duo .sit-t{ font-size:19px; }
html.vc-teach-lg .vc-sd-b .sit-g, html.vc-teach-lg .vc-sit-duo .sit-g{ font-size:17px; }
html.vc-teach-lg .vc-sd-b.cur .sit-t{ font-size:27px; }
html.vc-teach-lg .vc-sd-goal{ font-size:20px; }
html.vc-teach-lg .vc-sitq-hint, html.vc-teach-lg .vc-sitq-txt, html.vc-teach-lg .vc-drill-en{ font-size:18px; }
html.vc-teach-lg .vc-drill-answer{ font-size:22px; } html.vc-teach-lg .vc-sd-word{ font-size:32px; }

/* v310 · "－ Show less" on a computer flashcard page (owner: "I still don't see a show less on computer") — it only
   hid the small tools row, so nothing seemed to change. Now it works like the phone: the banner, level strip, Session
   Queue column, ✎ / ➕ / topic tag, font size and Key go; the card is one centred, larger column. */
@media (min-width:1024px){
  body.vc-focus-less:not(.focus-mode) #vd-learn :is(.vc244-learn-head, #vdLearnBar, #vdLearnSide, .vc244-stage-label){ display:none !important; }
  body.vc-focus-less:not(.focus-mode) #vd-learn .vc244-learn-page > .grid{ grid-template-columns:minmax(0, 1fr) !important; }
  body.vc-focus-less:not(.focus-mode) #vd-learn #vdLearnMain{ grid-column:1 / -1 !important; width:100%; max-width:860px; margin:0 auto; }
  body.vc-focus-less:not(.focus-mode) #tab-learn :is(#flashcardCat, #flashEditWord, #flashAddDeck, #toneLegendRow, #iconLegendShow, #contextToggle, #vcHwLearn, #srsFeedback:empty){ display:none !important; }
  body.vc-focus-less:not(.focus-mode) #learnBrowseArea > div:has(> .font-size-ctrl){ display:none !important; }
  body.vc-focus-less:not(.focus-mode) #tab-learn #flashcard{ min-height:min(46vh, 460px); }
  body.vc-focus-less:not(.focus-mode) #tab-learn #cardTools #flashSpeak{ max-width:none; flex:0 1 160px; flex-direction:row; gap:6px; }
}