/* Remarkable worksheets, posters and reading comprehension: the paper, on screen and in print.
   The paper is always white with dark ink, whatever the theme of the page around it. */
/* Digits use a plain system face (Atkinson Hyperlegible draws a slashed zero, which is confusing on a maths sheet) */
@font-face{font-family:"WSDigits";font-weight:400;src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Helvetica"),local("Liberation Sans"),local("Roboto"),local("Segoe UI");unicode-range:U+0030-0039}
@font-face{font-family:"WSDigits";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold"),local("Roboto Bold"),local("Segoe UI Bold");unicode-range:U+0030-0039}
.wspaper{background:#fff;color:#141414;max-width:794px;margin:0 auto;padding:13mm 13mm 11mm;box-shadow:0 12px 30px -14px rgba(0,0,0,.45);border-radius:2px}
@media(max-width:640px){.wspaper{padding:16px 14px 12px}}

.ws{--ink:#141414;--mute:#4f5753;--rule:#8a928d;--hair:#cdd3cf;--acc:#146C4E;--accsoft:#E5F1EA;--fs:15px;--ln:34px;
  font:var(--fs)/1.5 "WSDigits","Atkinson Hyperlegible","Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;text-align:left;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-text-size-adjust:100%}
.ws,.ws *{box-sizing:border-box}
.ws p{margin:0}
.wsg12{--fs:17.5px;--ln:40px}.wsg3{--fs:16px;--ln:34px}.wsg45{--fs:14.5px;--ln:30px}.wsg67{--fs:14px;--ln:29px}
.wssubj-english{--acc:#7A3E9D;--accsoft:#F0E8F5}

/* ----- the header ----- */
.wshead{border-top:5px solid var(--acc);padding-top:9px;margin-bottom:4px}
.wshtop{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:24px}
.wsschool{font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--mute)}
.wsbadge{margin-left:auto;font-size:.8em;font-weight:700;border:1.5px solid var(--ink);border-radius:999px;padding:2px 12px;white-space:nowrap}
.wstitle{font:400 1.8em/1.1 "Young Serif",Georgia,serif;margin:5px 0 2px;color:var(--ink)}
.wssub{color:var(--mute);font-size:.92em}
.wsmtag{display:inline-block;font:700 .38em/1 "WSDigits","Atkinson Hyperlegible",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:6px;padding:.5em .8em;vertical-align:.5em;margin-left:.5em}
.wsfields{display:flex;flex-wrap:wrap;gap:10px 18px;margin:13px 0 3px;align-items:flex-end}
.wsf{display:flex;align-items:flex-end;gap:7px;font-weight:700}
.wsf label{font-size:.9em}
.wsf i{flex:1;border-bottom:1.5px solid var(--ink);height:1.35em;min-width:30px}
.wsf-name{flex:3 1 190px}.wsf-date{flex:1.6 1 110px}.wsf-class{flex:1 1 80px}
.wsscore{display:flex;align-items:flex-end;gap:6px;font-weight:700;border:1.5px solid var(--ink);border-radius:9px;padding:3px 11px;font-size:.95em}
.wsscore i{width:2.3em;border-bottom:1.5px solid var(--ink);height:1.25em}
.wsintro{background:var(--accsoft);border-left:4px solid var(--acc);padding:7px 13px;border-radius:0 9px 9px 0;margin:11px 0 0}

/* ----- sections ----- */
.wssec{margin-top:13px}
.wssh{display:flex;align-items:center;gap:10px;margin:0;font:400 1.17em/1.2 "Young Serif",Georgia,serif;border-bottom:2px solid var(--ink);padding-bottom:5px;break-after:avoid;page-break-after:avoid;color:var(--ink)}
.wssl{flex:none;display:inline-grid;place-items:center;width:1.75em;height:1.75em;border-radius:7px;background:var(--acc);color:#fff;font-size:.92em}
.wsst{flex:1;min-width:0}
.wslv{display:inline-flex;gap:4px;flex:none}
.wslv i{width:.72em;height:.72em;border-radius:50%;border:1.6px solid var(--ink);display:block}
.wslv i.on{background:var(--ink)}
.wssm{flex:none;font:700 .68em/1 "WSDigits","Atkinson Hyperlegible",Arial,sans-serif;color:var(--mute);letter-spacing:.04em}
.wsinstr{margin-top:7px;font-weight:700;font-size:.95em;break-after:avoid;page-break-after:avoid}

/* ----- questions ----- */
.wsqs{display:block}
.wsq{display:grid;align-items:baseline;grid-template-columns:2.3em minmax(0,1fr) auto;column-gap:6px;padding:7px 0 1px;break-inside:avoid;page-break-inside:avoid}
.wsn{font-weight:700;text-align:right;padding-right:1px}
.wsn::after{content:"."}
.wsm{font-size:.82em;color:var(--mute);white-space:nowrap;padding-top:.2em;font-weight:700}
.wsb{min-width:0}
.wsrow{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}
.wstx{flex:1;min-width:0}
.wsside{flex:none;padding:2px 6px 0 0}
.wsvis{margin-top:6px}
.wsvis-ans{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.wsvis-ans .wsans{flex:1;margin:0 0 3px;max-width:300px}
.wsvg{display:block;max-width:100%;height:auto}
.wsq1+.wsq1{margin-top:6px}
.wsfill{line-height:1.8}
.wsblank{display:inline-block;border-bottom:1.5px solid var(--ink);height:1.05em;vertical-align:-.12em;margin:0 .2em}
.wsfr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.08;margin:0 .12em;font-size:.94em;font-weight:inherit}
.wsfr>span{padding:0 .2em}
.wsfr>span:first-child{border-bottom:1.5px solid currentColor}

.wslines{margin-top:2px}
.wslines i{display:block;height:var(--ln);border-bottom:1px solid #858d88}
.wswork{margin-top:7px;border:1.5px dashed var(--rule);border-radius:9px;position:relative}
.wswork>span{position:absolute;top:4px;left:10px;font:700 .64em/1 "WSDigits","Atkinson Hyperlegible",Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#7d8580}
.wsans{display:flex;align-items:flex-end;gap:8px;margin-top:8px;font-weight:700;font-size:.9em;max-width:300px}
.wsans i{flex:1;border-bottom:1.5px solid var(--ink);height:1.4em}
.wswork .wsans{position:absolute;right:12px;bottom:7px;margin:0;width:46%}

.wsopts{margin-top:7px}
.wsopts-r{display:flex;flex-wrap:wrap;gap:6px 30px}
.wsopts-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 24px}
.wsopts-1{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.wso{display:flex;gap:9px;align-items:center}
.wsob{flex:none;width:1.65em;height:1.65em;border:1.5px solid var(--ink);border-radius:50%;display:inline-grid;place-items:center;font-size:.86em;font-weight:700}
.wstf{flex:none;display:flex;gap:9px;padding-top:1px}
.wstf span{border:1.5px solid var(--ink);border-radius:999px;padding:1px 15px;font-weight:700;font-size:.9em}

.wsmatch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 34px;margin-top:8px}
.wsml,.wsmr{display:flex;align-items:center;gap:9px;min-height:1.9em}
.wsml b{flex:none;width:1.5em;text-align:right}
.wsml b::after{content:"."}
.wsmr b{flex:none;width:1.65em;height:1.65em;border:1.5px solid var(--ink);border-radius:50%;display:inline-grid;place-items:center;font-size:.86em}
.wsml span,.wsmr span{min-width:0}
.wsbox{flex:none;display:inline-block;width:1.9em;height:1.5em;border:1.5px solid var(--ink);border-radius:5px;background:#fff}
.wsml .wsbox{margin-left:auto}
.wsorder{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:8px}
.wsorder-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.wsoi{display:flex;align-items:center;gap:10px}

.wstab{border-collapse:collapse;margin-top:8px;min-width:55%;max-width:100%}
.wstab th,.wstab td{border:1.5px solid var(--ink);padding:5px 14px;text-align:center;height:2.5em;vertical-align:middle}
.wstab th{background:#e8eeea;font-weight:700}
.wstab-memo th{background:#e8eeea}

/* ----- reading passage ----- */
.wspassage{border:2px solid var(--ink);border-radius:13px;padding:11px 20px 6px;margin-top:12px;break-inside:avoid;page-break-inside:avoid}
.wsptop{display:flex;justify-content:flex-start}
.wsgenre{font:700 .68em/1 "WSDigits","Atkinson Hyperlegible",Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;background:var(--acc);color:#fff;border-radius:5px;padding:.45em .8em}
.wsptitle{font:400 1.5em/1.2 "Young Serif",Georgia,serif;margin:8px 0 8px;color:var(--ink)}
.wsptext p{margin:0 0 .5em;line-height:1.55;font-size:1.02em}
.wspoem p{white-space:pre-line;margin-bottom:.9em}
.wsvocab{margin-top:8px;border:1.5px dashed var(--rule);border-radius:11px;padding:8px 16px 9px;break-inside:avoid;page-break-inside:avoid}
.wsvocab h3{margin:0 0 5px;font:700 .72em/1 "WSDigits","Atkinson Hyperlegible",Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.wsvocab dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 26px;margin:0;font-size:.93em}
.wsvocab dl div{display:block}
.wsvocab dt{display:inline;font-weight:700}
.wsvocab dt::after{content:":";margin-right:.3em}
.wsvocab dd{display:inline;margin:0}
.wstotal{text-align:right;margin-top:11px;font-size:.95em}

/* ----- the memo ----- */
.wsstudent+.wsmemo{break-before:page;page-break-before:always;margin-top:34px;padding-top:26px;border-top:3px dashed #b9bfbb}
.wsnote{margin-top:10px;background:var(--accsoft);border-left:4px solid var(--acc);padding:7px 13px;border-radius:0 9px 9px 0;font-size:.92em}
.wsmt{width:100%;border-collapse:collapse;margin-top:6px}
.wsmt th{background:#e8eeea;text-align:left;font-size:.74em;text-transform:uppercase;letter-spacing:.08em;padding:6px 10px;border-bottom:2px solid var(--ink)}
.wsmt td{border-bottom:1px solid var(--hair);padding:5px 10px;vertical-align:top}
.wsmt tr{break-inside:avoid;page-break-inside:avoid}
.wsmt .c{width:4.2em;text-align:center}
.wsmt .lvc{width:8.4em;font-size:.9em;color:var(--mute)}
.wsmt th.c{text-align:center}
.wsmt-lv{max-width:360px}
.wsa{font-weight:700;color:#0c5439}
.wssubj-english .wsa{color:#5c2a78}
.wsw{display:block;color:var(--mute);font-size:.88em;margin-top:3px}
.wsmmatch div+div{margin-top:3px}
.wsmorder{margin:0;padding-left:1.4em}
.wsmorder li{padding-left:.2em}
.wsmemo .wssh{margin-top:2px}

/* ----- posters ----- */
.wsposter{--c0:#146C4E;--c1:#B4540A;--c2:#1F5A99;--c3:#7A3E9D;--c4:#A8323A;--band:#146C4E;break-inside:avoid;page-break-inside:avoid;font-size:13.5px}
.wsposter.wssj-english{--c0:#7A3E9D;--c1:#146C4E;--c2:#B4540A;--c3:#1F5A99;--c4:#A8323A;--band:#5A2D7A}
.wspband{background:var(--band);color:#fff;border-radius:14px;padding:11px 22px 11px}
.wspmeta{display:flex;justify-content:space-between;gap:10px;font-size:.76em;font-weight:700;text-transform:uppercase;letter-spacing:.11em}
.wspt{font:400 2.5em/1.05 "Young Serif",Georgia,serif;margin:6px 0 0;color:#fff}
.wspgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.wspn1 .wspb,.wspn3 .wspb:last-child,.wspn5 .wspb:last-child,.wspn7 .wspb:last-child{grid-column:1/-1}
.wspwide{grid-column:1/-1}
.wspb{--c:var(--c0);border:2.2px solid var(--c);border-radius:13px;overflow:hidden;background:#fff;padding-bottom:7px;break-inside:avoid}
.wspc1{--c:var(--c1)}.wspc2{--c:var(--c2)}.wspc3{--c:var(--c3)}.wspc4{--c:var(--c4)}
.wspb h2{background:var(--c);color:#fff;font:400 1.08em/1.2 "Young Serif",Georgia,serif;margin:0 0 6px;padding:5px 11px;display:flex;gap:9px;align-items:center}
.wspnum{flex:none;width:1.7em;height:1.7em;border-radius:50%;background:#fff;color:var(--c);display:inline-grid;place-items:center;font:700 .86em "WSDigits","Atkinson Hyperlegible",Arial,sans-serif}
.wspb p,.wspb ul{margin:0 12px 6px}
.wspb ul{padding-left:1.15em}
.wspb li{margin-bottom:3px}
.wspv{margin:2px 12px 2px;display:flex;justify-content:center}
.wspv .wsv-fcircle{width:66px;height:66px}.wspv .wsv-fbar{width:170px;height:auto}.wspv .wsv-clock{width:92px;height:92px}
.wspv .wsvg{max-width:100%}
.wspv .wsv-angle,.wspv .wsv-solid,.wspv .wsv-poly,.wspv .wsv-cubes,.wspv .wsv-spinner{max-height:100px;width:auto}.wspv .wsv-grid{max-height:118px;width:auto}
.wspex{margin:5px 10px 0;border:1.6px dashed var(--c);border-radius:9px;padding:5px 11px 6px;background:#fbfbf7}
.wspex>span{font:700 1.02em/1.1 "Kalam","Comic Sans MS",cursive;color:var(--c);display:block}
.wspex p{margin:1px 0 0;font-weight:700}
.wspbottom{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px;margin-top:8px}
.wspkw{border:2.2px solid var(--ink);border-radius:13px;padding:6px 13px 7px}
.wspkw h3{margin:0 0 4px;font:400 1.1em "Young Serif",Georgia,serif}
.wspkw dl{margin:0;display:grid;gap:3px;font-size:.93em}
.wspkw dt{display:inline;font-weight:700}
.wspkw dt::after{content:":";margin-right:.3em}
.wspkw dd{display:inline;margin:0}
.wsptip{background:#FFF0A6;border:2.2px solid var(--ink);border-radius:13px;padding:10px 15px;display:flex;flex-direction:column;justify-content:center}
.wsptip>span{font:700 1.35em/1 "Kalam","Comic Sans MS",cursive;margin-bottom:4px}
.wsptip p{font-weight:700;font-size:1.04em;line-height:1.35}
/* on paper the poster fills the page: the rows share the spare height and each example sits at the foot of its box */
.wspb{display:flex;flex-direction:column}
.wspb .wspex{margin-top:auto}
.wspv{margin-bottom:7px}
@media(min-width:561px){.wsposter{display:flex;flex-direction:column;min-height:258mm}.wspgrid{flex:1 1 auto}}
@media(max-width:560px){.wspgrid,.wspbottom{grid-template-columns:minmax(0,1fr)}.wspn3 .wspb:last-child,.wspn5 .wspb:last-child{grid-column:auto}}

/* ----- the footer ----- */
.wsfoot{margin-top:16px;border-top:1px solid var(--hair);padding-top:6px;text-align:center;font-size:.72em;letter-spacing:.05em;color:#6b7370;background:#fff}
.wsv-clock{width:124px;height:124px}.wsv-fcircle{width:84px;height:84px}.wsv-shape{width:104px;height:104px}

/* ----- phones: questions stack their pictures and keep tidy ----- */
@media(max-width:520px){
  .wsrow{flex-wrap:wrap;gap:8px}.wsside{padding:0}
  .wsopts-2{grid-template-columns:minmax(0,1fr)}
  .wsmatch{gap:8px 14px}
  .wsorder-2{grid-template-columns:minmax(0,1fr)}
  .wsvocab dl{grid-template-columns:minmax(0,1fr)}
  .wssh{flex-wrap:wrap}
}

/* ----- print: the paper size comes from WS.pageCss(), added by the page that prints ----- */
@media print{
  .wspaper{padding:0!important;box-shadow:none!important;max-width:none!important;border-radius:0}
  .ws{font-size:var(--fs)}
  /* the footer repeats on every page: each page fragment keeps a strip of padding free for it (box-decoration-break) */
  .wsdoc{padding-bottom:9mm;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .wsfoot{position:fixed;left:0;right:0;bottom:0;margin:0;border:0;padding:0}
}

/* small phones: tables shrink to fit the screen (print is unaffected) */
@media screen and (max-width:520px){.wstab{width:100%;table-layout:fixed}.wstab th,.wstab td{padding:5px 6px;overflow-wrap:anywhere}}
