/* 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','DMSans',cursive;--ans-size:17px;--ans-size-blank:16px;}
body[data-answer-font="sans"]{--ans-font:'DMSans',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','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','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%;}
}