/* Vocabulary Ladder pages beyond the ladder: flashcards, quizzes, the word list, word pages and the print page.
   Uses the ladders' .mlp theme (math.css) and vocab.css; classes start with vop- (vp- on the print page). Light and dark;
   the print page prints its laid-out cards. */
.vop{--vacc:#476600;--vaccs:rgba(71,102,0,.10);--vgold:#b8963e}
html[data-theme="dark"] .vop{--vacc:#b6d36b;--vaccs:rgba(182,211,107,.14)}
.vop a{color:var(--vacc)}
.vop-head{margin:0 0 .9rem}
.vop-head h1{font:700 2rem/1.15 Georgia,"Times New Roman",serif;margin:.2rem 0 .45rem;color:var(--ink)}
.vop-head p{margin:0;color:var(--muted);line-height:1.55;max-width:46rem}
.vop-head .mlp-eyebrow a{color:inherit;text-decoration:none}
.vop-nav{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem}
.vop-nav a{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600}
.vop-nav a:hover{border-color:var(--vacc)}
.vop-nav a.on{background:var(--vacc);border-color:var(--vacc);color:#fff}
html[data-theme="dark"] .vop-nav a.on{color:#14200f}
.vop-help{margin:0 0 1rem;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:.55rem .85rem}
.vop-help summary{cursor:pointer;font-weight:700}
.vop-help ol{margin:.5rem 0 .2rem;padding-left:1.3rem;line-height:1.55}
.vop-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;margin:0 0 1rem;box-shadow:var(--shadow)}
.vop-box h2{font:700 1.15rem/1.3 Georgia,serif;margin:0 0 .5rem;color:var(--ink)}
.vop-box h2 small{font:400 .8rem system-ui,sans-serif;color:var(--muted)}
.vop-setup{display:flex;flex-direction:column;gap:.75rem}
.vop-row{display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;align-items:flex-end}
.vop-field{display:flex;flex-direction:column;gap:.3rem;min-width:0;max-width:100%}
.vop-grow{flex:1 1 16rem}
.vop-lab{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.vop select,.vop input[type=search]{padding:.45rem .55rem;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink);font-size:.95rem;max-width:100%;min-width:0;width:100%}
.vop-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--card);max-width:100%}
.vop-seg button{flex:1 1 auto;border:0;border-right:1px solid var(--line2);background:transparent;color:var(--ink);padding:.45rem .75rem;font:inherit;font-size:.9rem;cursor:pointer;white-space:nowrap}
@media (max-width:520px){.vop-seg{display:flex;gap:1px;background:var(--line2)}.vop-seg button{border-right:0;background:var(--card)}.vop-seg button.on{background:var(--vacc)}}
.vop-seg button:last-child{border-right:0}
.vop-seg button.on{background:var(--vacc);color:#fff}
html[data-theme="dark"] .vop-seg button.on{color:#14200f}
.vop-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.vop-chips button{border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:999px;padding:.32rem .75rem;font:inherit;font-size:.88rem;cursor:pointer}
.vop-chips button[aria-pressed="true"]{background:var(--vaccs);border-color:var(--vacc);font-weight:700}
.vop-chips button[aria-pressed="true"]::before{content:"✓ ";color:var(--vacc)}
.vop-check{display:inline-flex;gap:.4rem;align-items:center;font-size:.92rem}
.vop-count{margin-left:auto;color:var(--muted);font-size:.9rem}
.vop-link{background:none;border:0;padding:0;color:var(--vacc);text-decoration:underline;cursor:pointer;font:inherit}
.vop-msg,.vop-msg2{color:var(--muted)}
/* flashcards */
.vop-focus{max-width:820px;margin:1.1rem auto 1.4rem}
.vop-bar{display:flex;align-items:center;gap:.7rem;font-size:.84rem;color:var(--muted);margin-bottom:.5rem}
.vop-prog{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden;min-width:3rem}
.vop-prog i{display:block;height:100%;width:0;background:var(--vgold);transition:width .3s}
.vop-stage{min-height:300px;outline:none;cursor:pointer;border-radius:16px}
.vop-stage:focus-visible{outline:3px solid var(--vgold);outline-offset:3px}
.vop-card{position:relative;animation:vopIn .25s ease}
.vop-card.turned{animation:vopFlip .3s ease}
@keyframes vopIn{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes vopFlip{from{opacity:.3;transform:rotateY(12deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vop-card,.vop-card.turned{animation:none}}
.vop-face{position:relative}
.vop-front .vo-card{padding-top:1.6rem}
.vop-tag{position:absolute;top:.55rem;left:.8rem;z-index:1;font:700 .66rem system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--vgold)}
.vop-front .vo-card-front .vo-pic{max-width:420px;margin:0 auto}
.vop-q{text-align:center;font:600 1.05rem/1.4 Georgia,serif;color:var(--muted);margin:.7rem 0 0}
.vop-wordface .vo-card{min-height:200px;display:flex;align-items:center;justify-content:center}
.vop-done{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--vacc);border-radius:16px;padding:1.4rem;text-align:center}
.vop-done h3{font:700 1.3rem Georgia,serif;margin:0 0 .4rem}
.vop-actions{display:flex;justify-content:center;margin:.9rem 0 .4rem}
.vop-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;width:100%;max-width:560px}
.vg{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.55rem .3rem;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
.vg b{font-size:1rem}.vg small{font-size:.75rem;color:var(--muted)}
.vg1{border-color:#d9822b}.vg2{border-color:#c9a227}.vg3{border-color:#2e8b57}.vg4{border-color:#2f6fc4}
.vg:hover{background:var(--vaccs)}
.vop-tools{text-align:center;font-size:.88rem;color:var(--muted);margin:.3rem 0 0}
.vop-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem;margin:.3rem 0 .6rem}
.vop-nums div{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.5rem .65rem;font-size:.85rem;color:var(--muted)}
.vop-nums b{display:block;font:700 1.35rem Georgia,serif;color:var(--ink)}
/* quizzes */
.vop-quizbox{max-width:780px;margin:0 auto 1.5rem}
.vop-qhead{display:flex;align-items:center;gap:.7rem;font-size:.86rem;color:var(--muted);margin:0 0 .5rem}
.vop-timer{height:5px;border-radius:9px;background:var(--line);overflow:hidden;margin:0 0 .6rem}
.vop-timer i{display:block;height:100%;width:100%;background:#d9822b;transition:width .1s linear}
.vop-qcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;box-shadow:var(--shadow)}
.vop-qq{font-size:1.1rem;line-height:1.5;margin:0 0 .8rem}
.vop-opts{display:grid;gap:.45rem}
.vop-opt{display:flex;gap:.6rem;align-items:flex-start;text-align:left;padding:.6rem .75rem;border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:1rem;line-height:1.4;cursor:pointer}
.vop-opt:hover:not(:disabled){border-color:var(--vacc);background:var(--vaccs)}
.vop-opt:disabled{cursor:default}
.vop-opt.ok{border-color:var(--right);background:var(--rightbg)}
.vop-opt.no{border-color:var(--wrong);background:var(--wrongbg)}
.vop-optl{flex:none;display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--vaccs);font-weight:800;font-size:.85rem;color:var(--vacc)}
.vop-fb{margin:.8rem 0 0;padding:.6rem .8rem;border-radius:10px;line-height:1.5;font-size:.96rem}
.vop-fb.ok{background:var(--rightbg)}.vop-fb.no{background:var(--wrongbg)}
.vop-okm{color:var(--right)}.vop-nom{color:var(--wrong)}
.vop-qact{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin:.8rem 0 0}
.vop-result{text-align:center}
.vop-result h2{font:700 1.8rem Georgia,serif;margin:0 0 .2rem}
.vop-result h3{font:700 1.05rem Georgia,serif;margin:1rem 0 .4rem}
.vop-misslist{text-align:left;max-width:560px;margin:0 auto .5rem;padding-left:1.2rem;line-height:1.6}
.vop-result .vop-qact{justify-content:center}
/* the word list */
.vop-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.vop-table{width:100%;border-collapse:collapse;font-size:.94rem}
.vop-table th{position:sticky;top:0;background:var(--paper);text-align:left;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:.5rem .6rem;border-bottom:1px solid var(--line)}
.vop-table td{padding:.42rem .6rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4}
.vop-table tr:last-child td{border-bottom:0}
.vop-n{color:var(--muted);font-size:.8rem;width:2.5rem}
.vop-wd{white-space:nowrap}
.vop-wl{font:700 1.02rem Georgia,serif;text-decoration:none}
.vop-wl0{font:600 1.02rem Georgia,serif;color:var(--ink)}
.vop-pos{color:var(--muted);font-style:italic;font-size:.78rem}
.vop-g{color:var(--ink)}
.vop-col-t{font-size:.84rem;min-width:9rem}
.vop-col-t a{color:var(--muted)}
@media (max-width:640px){.vop-col-t,.vop-n{display:none}.vop-wd{white-space:normal}}
.vop-dialog{max-width:min(860px,94vw);width:100%;border:0;border-radius:16px;padding:0;background:transparent}
.vop-dialog::backdrop{background:rgba(10,20,15,.55)}
.vop-dlg-in{max-height:80vh;overflow:auto}
.vop-dialog form{display:flex;justify-content:flex-end;margin-top:.5rem}
.vop-dlg-links{margin:.5rem 0 0;padding:.6rem .8rem;background:var(--paper);border-radius:10px;font-size:.92rem}
/* a word's page */
.vop-word .vo-card{margin:0 0 1rem}
.vop-word h1.vo-w{font-size:2rem}
.vop-wordnav{display:flex;flex-wrap:wrap;gap:.6rem 1rem;justify-content:space-between;align-items:center;font-size:.95rem}
/* the print page: choosing what to print */
.vp-kind{align-self:flex-start}
.vp-panel[hidden]{display:none}
.vp-tlist{max-height:22rem;overflow:auto;border:1px solid var(--line2);border-radius:10px;padding:.3rem .6rem;background:var(--paper)}
.vp-lv{border:0;margin:0 0 .3rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:0 .8rem}
.vp-lv legend{font:700 .72rem system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.4rem 0 .15rem}
.vp-t{display:flex;gap:.45rem;align-items:flex-start;padding:.2rem 0;font-size:.93rem;line-height:1.35;cursor:pointer;min-width:0}
.vp-t input{margin-top:.18rem;flex:none;accent-color:var(--vacc)}
.vp-sum{margin:0;font-weight:600;color:var(--ink)}
.vp-parts p{margin:0 0 .5rem;color:var(--muted)}
.vp-partbtns{display:flex;flex-wrap:wrap;gap:.5rem}
.vp-partbtns .mlp-btn small{font-weight:400;opacity:.8;margin-left:.3rem}
.vp-hint{margin:.4rem 0 0;font-size:.92rem;line-height:1.55;color:var(--muted);max-width:52rem}
.vp-empty{display:none}
/* the sheets have the printed page's exact size (US Letter or A4 inside the margins) on screen too, so print.js can fit each
   card before printing; on screen a wrapper shows them scaled to the window (--k) */
.vop-book{--k:1;display:flex;flex-direction:column;gap:1.2rem;align-items:center}
.vop-sheetw{box-sizing:content-box;width:calc(7.78in*var(--k));height:calc(10.2in*var(--k));padding:calc(.22in*var(--k));background:#fff;border:1px solid #d8d2c4;box-shadow:0 2px 10px rgba(0,0,0,.08);overflow:hidden}
.vop-paper-a4 .vop-sheetw{width:calc(191.5mm*var(--k));height:calc(275mm*var(--k))}
.vop-sheetw>.vop-sheet{transform:scale(var(--k));transform-origin:0 0}
.vop-sheet{width:7.78in;height:10.2in;background:#fff;color:#1f2420;padding:.03in;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:.18in;box-sizing:border-box;overflow:hidden}
.vop-paper-a4 .vop-sheet{width:191.5mm;height:275mm}
.vop-cell{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.vop-cell .vo-pic{max-width:var(--pw,3.3in);margin:0 auto 3pt}
.vop-cell .vo-card{flex:1;min-height:0;overflow:hidden;--vo-paper:#fffdf7;--vo-ink:#1f2420;--vo-muted:#555;--vo-line:#d9d2c0;background:#fffdf7;color:#1f2420}
.vop-cellt{margin:1.5pt 0 0;font:600 7pt/1.2 system-ui,sans-serif;color:#8a8170;text-align:right}
.vop-title{display:flex;align-items:center;justify-content:center;text-align:center}
.vop-title-in{grid-column:1/-1;grid-row:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4pt;padding:.3in .5in}
.vop-title h2{font:700 30pt/1.1 Georgia,serif;margin:2pt 0;color:#2f4a00}
.vop-tb{font:700 10pt system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8a6a1a;margin:0}
.vop-tv{font:600 14pt Georgia,serif;margin:0}
.vop-ti{font:10.5pt/1.55 Georgia,serif;max-width:5.5in;margin:6pt 0}
.vop-toc{columns:2;column-gap:.35in;width:6.4in;max-width:100%;box-sizing:border-box;text-align:left;font:9pt/1.45 system-ui,sans-serif;margin:4pt 0;padding:0}
.vop-toc li{margin-left:2.2em;break-inside:avoid}
.vop-tf{font:9pt system-ui,sans-serif;color:#666;margin:6pt 0 0}
.vop-tc{font:600 10pt system-ui,sans-serif;color:#666;margin:0}
/* cards per page: 2 (one above the other, the picture beside the words), 4 (2 x 2) or 6 (2 x 3) */
.vop-per-2 .vop-sheet{grid-template-columns:minmax(0,1fr)}
.vop-per-6 .vop-sheet{grid-template-rows:repeat(3,minmax(0,1fr))}
.vop-per-2 .vo-card-print{display:grid;grid-template-columns:var(--pw,3.6in) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:10pt;align-content:start}
.vop-per-2 .vo-card-print .vo-head{grid-column:1/-1}
.vop-per-2 .vop-cell .vo-pic{max-width:none;width:var(--pw,3.6in);margin:0}
.vop-per-2 .vop-title-in,.vop-per-6 .vop-title-in{grid-row:1/-1}
/* black and white: the pictures are turned gray by print.js; the card's colors become grays here */
.vop-bw .vop-cell .vo-card{--vo-acc:#333;--vo-accs:#eeeeee;--vo-hl:#111;--vo-hlbg:#e2e2e2;--vo-tag:#444;--vo-part:#efefef;--vo-partb:#9a9a9a;--vo-paper:#fff;--vo-line:#bbb;background:#fff}
.vop-bw .vo-mn{border-left-color:#555}
.vop-bw .vop-title h2{color:#111}
.vop-bw .vop-tb{color:#444}
@media print{
  header.header,footer.footer,.trb-social,.vop-noprint,.top-link,nav#menu,.breadcrumbs{display:none!important}
  main.main{max-width:none!important;padding:0!important;margin:0!important}
  body{background:#fff!important}
  .vop-book{gap:0;display:block}
  .vop-sheetw{width:auto!important;height:auto!important;padding:0;border:0;box-shadow:none;overflow:visible;break-after:page;page-break-after:always}
  .vop-sheetw>.vop-sheet{transform:none}
  .vop-print,.vop-book{margin:0!important;padding:0!important}
  .vop-sheetw:last-child{break-after:auto;page-break-after:auto}
  .vop-book:empty+.vp-empty{display:block;font:14pt Georgia,serif;text-align:center;margin:2in 0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}