/* Media Path · interactive worksheet styles (screen + print) */
/* Answer fonts (learners' typed answers only; chosen with the toolbar Font menu, saved per site in localStorage).
   All self-hosted, SIL Open Font License 1.1 (see fonts/OFL.txt). Caveat and DM Sans faces live in media-path.css. */
@font-face{font-family:'Lexend';src:url('fonts/Lexend-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Literata';src:url('fonts/Literata-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
body{--ans-font:'Caveat','Caveat-fb','DMSans',cursive;--ans-size:17px;--ans-size-blank:16px;}
body[data-answer-font="sans"]{--ans-font:'DMSans','DMSans-fb',system-ui,sans-serif;--ans-size:14.5px;--ans-size-blank:14px;}
body[data-answer-font="easy"]{--ans-font:'Lexend','DMSans',sans-serif;--ans-size:14px;--ans-size-blank:13.5px;}
body[data-answer-font="serif"]{--ans-font:'Literata',Georgia,serif;--ans-size:14.5px;--ans-size-blank:14px;}
.webnav .fontpick{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#fff;}
.webnav .fontpick select{font-family:'DMMono','DMMono-fb','Inter',monospace;font-size:12.5px;color:#fff;background:transparent;border:1.5px solid #fff;border-radius:999px;padding:4px 8px;max-width:9.5em;cursor:pointer;}
.webnav .fontpick select option{color:#14141f;background:#fff;}
.webnav .fontpick select:focus-visible{outline:3px solid var(--sun);outline-offset:2px;}
.wi{position:relative;}
.wi textarea{display:block;width:100%;min-height:inherit;margin:0;padding:3px 4px 0;border:0;background:transparent;resize:none;overflow:hidden;
  font-family:var(--ans-font);font-size:var(--ans-size);line-height:26px;color:#5B3DF5;outline:none;}
.wi textarea:focus-visible,.blank-in:focus-visible{box-shadow:0 0 0 2px #5B3DF5;border-radius:3px;}
.blank-in{display:inline-block;border:0;border-bottom:1.3px solid var(--ink2);background:transparent;font-family:var(--ans-font);font-size:var(--ans-size-blank);line-height:1.1;color:#5B3DF5;padding:0 2px;vertical-align:-2px;max-width:100%;}
canvas.pad{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:auto;}
canvas.pad.always,.draw-mode canvas.pad{pointer-events:auto;touch-action:none;cursor:crosshair;}
.draw-mode .wi{outline:1.5px dashed rgba(91,61,245,.45);outline-offset:2px;}
.wi-frame{position:relative;}
.padtools{position:absolute;right:3px;bottom:3px;display:none;gap:4px;z-index:3;}
.draw-mode .padtools,.padtools.always{display:flex;}

.padtools button{background:rgba(255,255,255,.92);}
.padtools button,.reveal,.webnav button{font-family:'DMMono','DMMono-fb','Inter',monospace;font-size:11px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:2px 8px;cursor:pointer;}
.padtools button:focus-visible,.reveal:focus-visible,.webnav button:focus-visible,.webnav a:focus-visible{outline:3px solid var(--sun);outline-offset:2px;}
.reveal{display:block;margin:4px auto 0;font-size:10px;padding:1px 8px;}
.answers.revealed{transform:none;color:var(--ink2);}
.rate .opt{cursor:pointer;border-radius:999px;padding:1px 3px;}
.rate .opt[aria-checked="true"]::before{background:var(--violet);border-color:var(--violet);box-shadow:inset 0 0 0 1.5px #fff;}
.rate .opt[aria-checked="true"]{color:var(--ink);font-weight:500;}
.rate .opt:focus-visible,.tk:focus-visible,.meter:focus-visible{outline:2px solid var(--violet);outline-offset:2px;}
.meter{cursor:pointer;}
.meter span.on{background:var(--violet)!important;border-color:var(--violet);}
.tk{cursor:pointer;}
.tick .tk[aria-checked="true"]::before,.check .tk[aria-checked="true"]::before{background:var(--violet);border-color:var(--violet);box-shadow:inset 0 0 0 2px #fff;}
.webnav .tools{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;}
.webnav button{font-size:12.5px;padding:5px 12px;border-color:#fff;background:transparent;color:#fff;}
.webnav button[aria-pressed="true"]{background:var(--lime);color:var(--ink);border-color:var(--lime);}
.webnav .status{font-size:11px;color:var(--lime);opacity:0;transition:opacity .3s;min-width:9em;}
.webnav .status.on{opacity:1;}
.webhelp{max-width:8.5in;margin:14px auto 0;padding:0 16px;font-size:14px;line-height:1.45;color:var(--ink2);}
.webnav .in{max-width:1100px;}
img.pad-print{display:none;}
@media print{
  .webnav,.webonly,.padtools,.reveal{display:none!important;}
  .answers.revealed{transform:rotate(180deg);color:var(--muted);}
  .draw-mode .wi{outline:none;}
  .wi{overflow:hidden;}
  .wi textarea{overflow:hidden;}
  canvas.pad{display:none;}
  img.pad-print{display:block;position:absolute;inset:0;width:100%;height:100%;}
}
/* print date line (filled by interactive.js; print only, sits in the bottom margin under the footer) */
.print-stamp{display:none;}
@media print{
  .print-stamp{display:block;position:absolute;left:0.62in;right:0.62in;bottom:0.12in;text-align:right;font-family:'DMMono','DMMono-fb',monospace;font-size:6.6pt;letter-spacing:.05em;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;}
}

/* Reserved space (Oct 13, 2026): interactive.js adds the Font picker and the Show-answer buttons after the page has
   painted. Their space is held here, so nothing below them moves (layout shift). Draw stays first, then Font. */
.webnav .tools>*{order:2;}
.webnav .tools>[data-act="draw"]{order:0;}
.webnav .tools>.fontpick,.webnav .tools::before{order:1;}
.webnav .fontpick{box-sizing:border-box;width:150px;height:29px;}
.webnav .fontpick select{flex:1 1 auto;min-width:0;max-width:none;}
.webnav .tools:has(>[data-act="draw"])::before{content:"";display:block;width:150px;height:29px;}
.webnav .tools.has-font::before{content:none;display:none;}
@media screen{
  .answers{margin-top:26px;}
  .answers[style*="margin:8px 0 20px"]{margin-top:30px!important;}  /* self-check answers carry their own 8px */
  .answers[style*="margin-top:6px"]{margin-top:28px!important;}
  .reveal{box-sizing:border-box;height:18px;line-height:13px;margin:4px auto -22px;position:relative;z-index:1;}
}
canvas.pad{contain:strict;}

/* Mobile header without layout shift (Oct 13, 2026): on narrow screens the header reflowed when the web fonts
   arrived (wider DMMono text pushed the Practice link and a toolbar button onto new rows, CLS about 0.29).
   The rows are now fixed whatever the font: the Practice link always has its own row, and the toolbar is a
   two-column grid (Draw · Font / Print my work · Print blank / Clear · status), so nothing below the header moves. */
@media screen and (max-width:860px){
  .webnav .lr .practice-link{flex-basis:100%;}
  .webnav .tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;align-items:center;}
  .webnav .tools>button{min-width:0;white-space:normal;line-height:1.25;}
  .webnav .tools>.fontpick,.webnav .tools::before{width:auto;min-width:0;}
}