/* WordScrambleLab — Teacher Activity Pack generator: the configuration form, the preview, and the
   printed worksheet. Phase 4C, 10 Sep 2026. Hand-written; loaded only by /teach/activity-pack/ and
   its Thai pair, after site.css (and site-th.css on the Thai route), so every token here is one
   site.css already defines.

   The print half is the half that matters. A worksheet is judged on paper, and until this page the
   site had no @page rule at all: every printed sheet inherited the browser's default margin plus
   .wrap's padding, and drew its answer lines in var(--rule), which is 1.29:1 against white and can
   come out of a laser printer as nothing. Both are fixed below, and every rule that carries meaning
   is at least 3:1 against white — #767676 (4.54:1) for dividers, #666 (5.74:1) for the word-bank
   frame, #333 (12.6:1) for the lines a student writes on.

   Two rules in the first draft of this file each cost a worksheet, and both were element selectors
   that stopped describing the markup: `section` hid the whole answer key, whose activity groups are
   the only <section> elements on the page, and hiding the application unconditionally meant a
   teacher who pressed Print before generating got one blank sheet with no explanation. Prefer a
   class you control to an element name you share. */

/* An author `display:` rule beats the `hidden` attribute, so every element this page shows and
   hides from script needs saying twice. The study tray was invisible on every page for weeks in
   September 2026 for exactly this reason; .fl below is display:flex and would repeat it. */
[hidden]{display:none!important}

/* ---------------- screen: the configuration form ---------------- */
.start{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px 24px;margin:18px 0 0}
.start h2{font:800 20px/1.2 var(--display);margin:0 0 10px}
.start ol{margin:0;padding-left:22px;color:var(--ink-soft);font-size:15.5px;line-height:1.7}
html[lang="th"] .start ol{line-height:1.9}

.pack{background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);padding:22px 24px;margin:18px 0 0}
.grp{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--rule)}
.grp:last-of-type{border-bottom:0;margin-bottom:8px}
.grph{font:800 19px/1.2 var(--display);margin:0 0 12px}
.hint{font-size:14px;color:var(--ink-soft);margin:0 0 12px;max-width:62ch}
html[lang="th"] .hint{font-size:14.5px;line-height:1.8}

.row{display:flex;flex-wrap:wrap;gap:12px 16px;margin:0 0 14px}
.fl{display:flex;flex-direction:column;gap:5px;min-width:150px}
.fl.grow{flex:1 1 260px}
.fl label,.lbl{font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
html[lang="th"] .fl label,html[lang="th"] .lbl{letter-spacing:.02em;text-transform:none;font-size:13.5px}
/* 1.5px #7A90AA is the site's interactive border since package 30 — 3.28:1, which var(--rule) is not */
.fl input,.fl select{width:100%;font:500 15px var(--body);padding:9px 10px;border:1.5px solid #7A90AA;border-radius:8px;background:var(--paper);color:var(--ink);min-height:44px}
.fl input[type=number]{max-width:120px}

.segs{display:flex;flex-wrap:wrap;gap:8px}
.seg{appearance:none;font:600 14.5px var(--body);padding:9px 15px;min-height:44px;border-radius:22px;border:1.5px solid #7A90AA;background:var(--paper);color:var(--ink);cursor:pointer}
.seg[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.acts,.opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:10px 18px}
.acts label,.opts label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:7px 0;min-height:32px}
.acts input,.opts input{margin-top:3px;width:20px;height:20px;flex:0 0 auto;accent-color:var(--ink)}
.acts b{display:block;font:700 15.5px var(--body);color:var(--ink)}
.acts span{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.opts span{font-size:15px;color:var(--ink)}
html[lang="th"] .acts span,html[lang="th"] .opts span{line-height:1.7}

.results{list-style:none;margin:10px 0 0;padding:0;max-height:290px;overflow:auto;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.results li{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--rule);font-size:15px}
.results li:last-child{border-bottom:0}
.results .w{font:700 15.5px var(--body);min-width:9ch}
.results .m{color:var(--ink-soft);font-size:14px;flex:1 1 auto}
.results .lv{font:700 12px var(--body);color:var(--ink-soft);border:1px solid var(--rule);border-radius:12px;padding:2px 8px}
.results button{appearance:none;font:600 13.5px var(--body);padding:6px 13px;min-height:32px;border-radius:18px;border:1.5px solid #7A90AA;background:var(--card);color:var(--ink);cursor:pointer;flex:0 0 auto}
.results li[aria-selected="true"] button{background:var(--ink);border-color:var(--ink);color:#fff}

.chosenhead{display:flex;align-items:baseline;gap:12px;margin:14px 0 8px}
.chosen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chosen li{display:flex;align-items:center;gap:7px;border:1.5px solid #7A90AA;border-radius:18px;padding:4px 6px 4px 12px;font:600 14.5px var(--body);background:var(--paper)}
.chosen button{appearance:none;border:0;background:none;cursor:pointer;color:var(--ink-soft);font:700 15px var(--body);line-height:1;padding:6px 8px;min-width:28px;min-height:28px;border-radius:14px}
.chosen button:hover{background:var(--rule);color:var(--ink)}

.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.btn{appearance:none;font:700 16px var(--body);padding:12px 22px;min-height:48px;border-radius:10px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.lnk{appearance:none;background:none;border:0;font:600 14.5px var(--body);color:var(--ink-soft);text-decoration:underline dotted;cursor:pointer;padding:8px 4px;min-height:32px}

.notice{background:#FFF8E6;border:1px solid #EBD9A6;border-radius:8px;padding:10px 14px;font-size:15px;max-width:70ch;margin:0 0 16px}
.notice.err{background:#FFF3F0;border-color:#E8C4BA}
.noscript{background:#FFF8E6;border:1px solid #EBD9A6;border-radius:8px;padding:10px 14px;font-size:15px;max-width:66ch;margin:0 0 14px}

/* ---------------- screen: the preview ---------------- */
.previewhead{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:26px 0 6px;padding-top:22px;border-top:1px solid var(--rule)}
.previewhead h2{margin:0}
.leftout{background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--b2);border-radius:8px;padding:12px 16px;margin:0 0 16px;font-size:14.5px;color:var(--ink-soft)}
.leftout h3{font:700 14px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px}
html[lang="th"] .leftout h3{letter-spacing:.02em;text-transform:none;font-size:14.5px}
.leftout ul{margin:0;padding-left:20px;line-height:1.6}
html[lang="th"] .leftout ul{line-height:1.85}

/* ---------------- the worksheet itself ---------------- */
.sheet{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:26px 28px;margin-top:18px}
.sheet .title{font:800 24px/1.2 var(--display);margin:0 0 4px}
.sheet .sub{font-size:14px;color:var(--ink-soft);margin:0 0 16px}
.fields{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--rule);font-size:15px}
.fields span{white-space:nowrap}
.rule{display:inline-block;border-bottom:1.5px solid var(--rule);min-width:132px;margin-left:10px;height:1.15em;vertical-align:-.2em}
.rule.sm{min-width:96px}
.rule.lg{min-width:200px}

.act{margin:0 0 26px}
.act h2{font:800 19px/1.2 var(--display);margin:0 0 3px}
.act .ins{font-size:15px;color:var(--ink-soft);margin:0 0 12px}
html[lang="th"] .act .ins{font-size:15.5px;line-height:1.8}
ol.items{margin:0;padding-left:26px}
ol.items li{margin:0 0 11px;line-height:1.55;break-inside:avoid}
ol.items.two{columns:2;column-gap:34px}
@media(max-width:620px){ol.items.two{columns:1}}
.scram{font:700 19px/1.2 var(--body);letter-spacing:.16em}
.qword{font-weight:700}
.cefr{font:700 11.5px var(--body);color:var(--ink-soft);border:1px solid var(--rule);border-radius:10px;padding:1px 6px;margin-left:7px;vertical-align:1px}
.opts-row{display:flex;flex-wrap:wrap;gap:6px 20px;margin:5px 0 0;font-size:15px}
.opts-row span{white-space:nowrap}
.bank{border:2px dashed var(--rule);border-radius:8px;padding:12px 15px;margin:0 0 18px}
.bank b{display:block;font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
/* .bank b is the English string "Word bank" on both routes (the owner's printed-sheet rule),
   so it keeps the same uppercase treatment in Thai — the sheet looks the same whichever page
   it was made from, which is the promise the maker's own note makes. */
html[lang="th"] .bank b{letter-spacing:.06em;font-size:13px}
.bank .words{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15.5px}
.match{display:grid;grid-template-columns:1fr 1.4fr;gap:22px}
@media(max-width:620px){.match{grid-template-columns:1fr}}
.match ol,.match ul{margin:0;padding-left:0;list-style:none}
.match li{margin:0 0 10px;break-inside:avoid;display:flex;gap:7px;align-items:baseline}
/* the label is drawn from the pack model, so the list must not draw one of its own */
ul.items.labelled{list-style:none;padding-left:0}
.lab{font-weight:700;min-width:2.1ch;flex:0 0 auto}
.match .col h3{font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 9px}
html[lang="th"] .match .col h3{letter-spacing:.02em;text-transform:none;font-size:13.5px}
.answers{margin-top:26px;padding-top:16px;border-top:1px dashed var(--rule)}
.answers h2{font:800 19px var(--display);margin:0 0 12px}
.answers section{border:0;padding:0 0 12px;margin:0}
.answers h3{font:700 14px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 5px}
html[lang="th"] .answers h3{letter-spacing:.02em;text-transform:none;font-size:14.5px}
.answers .list{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14.5px;color:var(--ink)}
.licence{margin-top:20px;padding-top:9px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-soft)}

/* ---------------- print ---------------- */
/* A4 is the default because Thailand and most of the site's audience use it. US Letter cannot be
   selected by a class — @page takes no selector — so activity-pack.js rewrites this one rule in a
   <style id="ap-page"> element when the teacher changes the paper. This declaration is the fallback
   for the case where that script has not run. */
@page{size:A4 portrait;margin:15mm}

@media print{
  /* The application disappears ONCE THERE IS A WORKSHEET — activity-pack.js puts .has-pack on the
     body when a pack is drawn. Before that, printing shows the page's own three steps and its
     noscript panel, which is what a teacher who pressed Print too early actually needs to read.
     site.css already drops the header, footer, skip link and menu button; study.js hides its tray.
     NOTE: no bare element selector here. `section` used to be in this list and hid the answer key,
     whose activity groups are the only <section> elements the page has. */
  .crumb,.notice,.previewhead,.hint,.leftout,.pack{display:none!important}
  /* Before a pack exists, printing gives the page's own explanation — the heading, the lede, the
     three steps, and the noscript panel that points at the worksheet library, which prints without
     JavaScript. One useful sheet instead of one blank one. */
  body.has-pack h1,body.has-pack .lede,body.has-pack .noscript,
  body.has-pack .start{display:none!important}

  /* site-th.css sets html[lang="th"] body{font-size:18px}, which is more specific than a bare
     `body` rule and would otherwise print the Thai route a page longer, with Thai leading applied
     to English sentences. */
  html body{background:#fff;color:#000;font-size:12pt;line-height:1.45}
  html[lang="th"] body{font-size:12pt;line-height:1.6}
  body.wsl-hastray{padding-bottom:0}                 /* study.js hides the tray, not its space */
  .wrap{max-width:none;padding:0}                    /* @page owns the margin now */
  .sheet{border:0;box-shadow:none;padding:0;background:none;margin:0}
  .sheet .title{font-size:17pt}
  .act h2{font-size:13pt}

  /* rules a laser printer can actually put on paper — var(--rule) is 1.29:1 */
  .rule{border-bottom-color:#333}                    /* 12.6:1 — the line a student writes on */
  .fields{border-bottom-color:#767676}               /* 4.54:1; #999 is 2.85:1 and misses the bar */
  .bank{border-color:#666}                           /* 5.74:1 */
  .answers,.licence{border-top-color:#767676}        /* the line that says where the key begins */
  .cefr{border-color:#666;color:#333}
  a{color:#000;text-decoration:none}

  /* Breaks. A question is never split; a heading never stands alone; the key starts its own page
     when the teacher asked for that, and does not strand its own heading when they did not.
     `.match` itself carries NO break-inside:avoid: a 30-word matching block is 1,235 px against
     1,009 px of printable A4, so the constraint is unsatisfiable and a browser that cannot satisfy
     it drops it and breaks wherever it likes — including between a column heading and its rows.
     The per-row rule below is the protection that was actually wanted. */
  .act{break-inside:auto}
  .act h2,.act .ins,.match .col h3,.answers h2,.answers h3,.bank b{break-after:avoid}
  ol.items li,.match li,.bank{break-inside:avoid}
  .answers.own-page{break-before:page}
  .answers section{break-inside:avoid}
  .sheet>*{orphans:3;widows:3}
}