/* Shared styles for every page. Page-specific styles live next to each page in src/pages/<id>/style.css.
   Layout: a squared school notebook (מחברת משבצות) with the red margin line on the right, as in Hebrew notebooks.
   Red pen = feedback, highlighter = emphasis, stickers = rewards. In dark mode the notebook becomes a chalkboard. */
:root{
  --paper:#F6F9FC; --grid:#DCE7F2; --grid-strong:#BCD0E6;
  --ink:#18264A; --ink-soft:#4A5878;
  --pen:#D0342C; --pen-ink:#FFFFFF;
  --hi:#E6FA62; --hi-ink:#18264A;
  --blue:#2D5BFF;
  --card:#FFFFFF; --line:#C9D6E6; --margin:#EFA3A0;
  --tape:rgba(255,236,150,.8);
  --panel:#18264A; --panel-fg:#F6F9FC; --panel-soft:rgba(246,249,252,.78); --panel-line:rgba(246,249,252,.16); --panel-no:#FFA196;
  --wa:#0F7F43; --wa-ink:#FFFFFF;
  --b1:#FFB4A2; --b2:#9FD8C3; --b3:#A9C4FF; --b4:#E0B8FF;
  --display:"Karantina","Secular One","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans Hebrew","Assistant","Segoe UI",Arial,sans-serif;
  --hand:"Playpen Sans Hebrew","Comic Sans MS",cursive;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --cell:24px;
  --led-bg:#141414; --led:#FFB000;  /* bus-sign LED: same in both themes on purpose */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15221E; --grid:#20332D; --grid-strong:#2B443C;
    --ink:#EEF3EC; --ink-soft:#A9BBB2;
    --pen:#FF8D7E; --pen-ink:#15221E;
    --hi:#D8F05A; --hi-ink:#15221E;
    --blue:#8DB3FF;
    --card:#1B2B26; --line:#2F4840; --margin:#6B3A36;
    --tape:rgba(216,240,90,.28);
    --panel:#0C1512; --panel-fg:#EEF3EC; --panel-soft:rgba(238,243,236,.78); --panel-line:rgba(238,243,236,.14); --panel-no:#FF8D7E;
    --wa:#25D366; --wa-ink:#0C1512;
    --b1:#7A4A40; --b2:#2F6656; --b3:#3B4F86; --b4:#5D4378;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15221E; --grid:#20332D; --grid-strong:#2B443C;
  --ink:#EEF3EC; --ink-soft:#A9BBB2;
  --pen:#FF8D7E; --pen-ink:#15221E;
  --hi:#D8F05A; --hi-ink:#15221E;
  --blue:#8DB3FF;
  --card:#1B2B26; --line:#2F4840; --margin:#6B3A36;
  --tape:rgba(216,240,90,.28);
  --panel:#0C1512; --panel-fg:#EEF3EC; --panel-soft:rgba(238,243,236,.78); --panel-line:rgba(238,243,236,.14); --panel-no:#FF8D7E;
  --wa:#25D366; --wa-ink:#0C1512;
  --b1:#7A4A40; --b2:#2F6656; --b3:#3B4F86; --b4:#5D4378;
  color-scheme:dark;
}
/* accessibility menu settings (after the theme blocks so they win) */
:root.t1{font-size:112.5%}
:root.t2{font-size:125%}
:root.hc{--ink-soft:var(--ink);--line:var(--ink);--grid:transparent;--grid-strong:transparent;--margin:transparent}
:root.ul a{text-decoration:underline!important;text-underline-offset:3px}
:root.still *,:root.still *::before,:root.still *::after{animation:none!important;transition:none!important}
:root.plain{--hand:var(--body)}

/* base */
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
body{
  margin:0;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}
.site{direction:rtl;position:relative}
.site::before{content:"";position:fixed;top:0;bottom:0;inset-inline-start:max(6px,calc((100vw - 1120px)/2 - 26px));width:2px;background:var(--margin);pointer-events:none;z-index:-1}
img,svg{max-width:100%}
h1,h2,h3,h4{text-wrap:balance;margin:0;line-height:1.15}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.math{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.hand{font-family:var(--hand)}
.muted{color:var(--ink-soft)}
.hl{background:linear-gradient(100deg,transparent 2%,var(--hi) 4%,var(--hi) 94%,transparent 97%);color:var(--hi-ink);padding:0 .15em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{font-family:var(--hand);color:var(--pen);font-size:1.0625rem;display:inline-block;transform:rotate(-2deg)}
.display{font-family:var(--display);font-weight:700;line-height:.92}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.blank{font-family:var(--hand);font-weight:400;color:var(--pen);border-bottom:2px dotted currentColor;padding-inline:.3em;white-space:nowrap}

/* sections */
.sec{padding-block:56px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:24px}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(2.75rem,6vw,4rem);line-height:.95}
.sec-head p{color:var(--ink-soft);max-width:46ch}

/* buttons and chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:1rem;line-height:1.2;border:2px solid var(--ink);border-radius:12px;padding:12px 20px;background:var(--hi);color:var(--hi-ink);cursor:pointer;text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.wa{background:var(--wa);color:var(--wa-ink)}
.btn.sm{padding:8px 14px;font-size:.9375rem;box-shadow:3px 3px 0 var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--ink)}
.linkish{font:inherit;font-size:.9375rem;background:none;border:0;padding:0;color:var(--ink-soft);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.linkish:hover{color:var(--ink)}
.chip{font:inherit;font-size:.875rem;line-height:1.4;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;padding:4px 14px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.chip:hover{background:var(--hi);color:var(--hi-ink)}
.chip[aria-pressed="true"]{background:var(--hi);color:var(--hi-ink);font-weight:700}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{font:inherit;font-size:.875rem;border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:3px 12px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}

/* answer rows used by every exercise */
.answer-row{display:flex;gap:8px;align-items:stretch}
.answer-row input{flex:1 1 0;width:0;min-width:0;font:inherit;font-family:var(--mono);font-size:1.25rem;direction:ltr;text-align:center;padding:8px 10px;border:2px dashed var(--ink-soft);border-radius:8px;background:var(--paper);color:var(--ink)}
.answer-row input:focus{border-style:solid;border-color:var(--blue);outline:none}
.answer-row input:disabled{opacity:.7}
.fb{font-family:var(--hand);font-size:1.125rem;min-height:1.7em;margin-top:8px;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.fb.ok{color:var(--blue)}
.fb.no{color:var(--pen)}
.hint{width:100%;font-family:var(--body);font-size:.9375rem;color:var(--ink-soft);border-inline-start:3px solid var(--hi);padding-inline-start:10px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.bar{display:flex;align-items:center;gap:14px;padding-block:9px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo-mark{width:36px;height:36px;display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);border-radius:6px;overflow:hidden;transform:rotate(-6deg);transition:transform .35s}
.logo:hover .logo-mark{transform:rotate(84deg)}
.logo-mark span{border:1px solid var(--ink)}
.logo-mark span:nth-child(1){background:var(--hi)}
.logo-mark span:nth-child(4){background:var(--pen)}
.logo-word{font-family:var(--display);font-size:2.25rem;font-weight:700;line-height:1}
.nav{display:flex;gap:2px;margin-inline-start:auto}
.nav a{text-decoration:none;padding:6px 11px;border-radius:999px;font-weight:500;font-size:.9375rem;white-space:nowrap}
.nav a:hover{background:var(--hi);color:var(--hi-ink)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.util{display:flex;gap:8px;align-items:center;flex:none}
.pill{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.875rem;font-weight:500;line-height:1.3;color:var(--ink);background:var(--card);border:1.5px solid var(--ink);border-radius:999px;padding:5px 11px;cursor:pointer;text-decoration:none;white-space:nowrap}
.pill:hover{background:var(--hi);color:var(--hi-ink)}
.pill .ic{width:18px;height:18px}
.pill kbd{font-family:var(--mono);font-size:.6875rem;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--ink-soft)}
.pill .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pill.bump{animation:bump .6s}
@keyframes bump{30%{transform:scale(1.2) rotate(-5deg);background:var(--hi)}}
.menu-btn{display:none}
@media (max-width:1060px){.pill kbd,.top-cta{display:none}}
@media (max-width:860px){
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:2px solid var(--ink);padding:10px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}
  .nav.open a{font-size:1.0625rem;padding:10px 12px}
  .menu-btn{display:inline-flex}
  .util{margin-inline-start:auto}
  .pill .lbl{display:none}
}
@media (max-width:400px){.logo-word{font-size:1.875rem}.util{gap:6px}.pill{padding:5px 9px}}

/* mobile tab bar and desktop WhatsApp button */
.tabbar{display:none}
.wa-fab{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:calc(22px + env(safe-area-inset-left,0px));z-index:44;display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:var(--wa-ink);border:2px solid var(--ink);border-radius:999px;padding:10px 16px 10px 14px;font-weight:700;font-size:.9375rem;text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.wa-fab .ic{width:22px;height:22px}
.wa-fab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
@media (max-width:860px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--card);border-top:2px solid var(--ink);padding:6px max(16px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:.6875rem;font-weight:500;color:var(--ink);text-decoration:none;padding:4px 0;border-radius:10px}
  .tabbar .ic{width:23px;height:23px}
  .tabbar a[aria-current="page"]{color:var(--pen)}
  .tabbar .wa-tab{color:var(--wa)}
  .site{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .wa-fab{display:none}
}

/* toasts */
.toasts{position:fixed;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:95;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (max-width:860px){.toasts{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}
.toast{pointer-events:auto;direction:rtl;display:flex;align-items:center;gap:12px;max-width:min(560px,100%);background:var(--panel);color:var(--panel-fg);border:2px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:5px 5px 0 var(--pen);font-size:.9375rem;line-height:1.5;animation:toastIn .4s cubic-bezier(.2,1.4,.4,1)}
.toast b{color:var(--hi)}
.toast q{font-style:normal;color:var(--hi)}
.toast small{color:var(--panel-soft)}
.toast-act{flex:none;font:inherit;font-weight:700;font-size:.875rem;color:var(--hi-ink);background:var(--hi);border:0;border-radius:8px;padding:6px 12px;text-decoration:none;cursor:pointer}
.toast-x{flex:none;font:inherit;font-size:1.25rem;line-height:1;background:none;border:0;color:var(--panel-soft);cursor:pointer;padding:2px 4px}
.toast.out{transition:opacity .3s,transform .3s;opacity:0;transform:translateY(10px)}
@keyframes toastIn{from{transform:translateY(18px) scale(.96);opacity:0}}

/* stickers */
.stk{--size:76px;--c:var(--b3);width:var(--size);height:var(--size);flex:none;border-radius:50%;display:grid;place-items:center;background:var(--c);border:calc(var(--size) * .07) solid var(--card);box-shadow:0 0 0 1.5px var(--ink),3px 4px 0 var(--grid-strong);transform:rotate(var(--r,-5deg));color:var(--ink);font-family:var(--display);font-weight:700;font-size:calc(var(--size) * .5);line-height:1;position:relative;user-select:none}
.stk .tx{display:block;transform:translateY(5%)}
.stk .tx.mono{font-family:var(--mono);font-style:italic;font-weight:500;font-size:.8em;transform:none}
.stk .tx.pen{color:var(--pen);font-size:.72em;border:2px solid var(--pen);border-radius:50%;padding:.18em .12em .05em}
.stk svg{width:60%;height:60%;stroke:var(--ink);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.stk svg .f{fill:var(--pen);stroke:none;opacity:.7}
.stk svg .d{fill:var(--ink);stroke:none}
.stk.locked{background:transparent;border:2px dashed var(--ink-soft);box-shadow:none;color:var(--ink-soft)}
.stk.locked > *{display:none}
.stk.locked::after{content:"?";font-size:calc(var(--size) * .42)}
.stk.new{animation:stickIn .8s cubic-bezier(.2,1.6,.4,1)}
@keyframes stickIn{0%{transform:scale(1.9) rotate(20deg);opacity:0}100%{transform:scale(1) rotate(var(--r,-5deg));opacity:1}}

/* teacher's stamp */
.stamp{display:inline-grid;place-items:center;align-content:center;width:150px;height:150px;border-radius:50%;border:5px double var(--pen);color:var(--pen);font-family:var(--display);font-weight:700;font-size:2.75rem;line-height:.85;text-align:center;transform:rotate(-12deg);padding:12px}
.stamp small{display:block;font-family:var(--hand);font-size:.875rem;font-weight:400;line-height:1.2;margin-top:6px}
.stamp.go{animation:stamp .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes stamp{0%{transform:scale(2.2) rotate(-26deg);opacity:0}100%{transform:scale(1) rotate(-12deg);opacity:1}}

/* the mascot: a notebook square with a face */
.mascot{width:64px;height:64px;flex:none;overflow:visible}
.mascot .m-all{transform-box:fill-box;transform-origin:50% 100%}
.mascot .m-body{fill:var(--hi);stroke:var(--ink);stroke-width:2.5}
.mascot .m-line{stroke:var(--ink);stroke-width:1.5;opacity:.3;fill:none}
.mascot .m-eyes{transition:transform .25s}
.mascot .m-eye{fill:var(--ink);transform-box:fill-box;transform-origin:center;animation:blink 4.8s infinite}
.mascot .m-mouth{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mascot .mo-happy{fill:var(--ink)}
.mascot .m-cheek{fill:var(--pen);opacity:0;transition:opacity .3s}
.mascot .mo-happy,.mascot .mo-oops{display:none}
.mascot.happy .mo-idle,.mascot.oops .mo-idle{display:none}
.mascot.happy .mo-happy,.mascot.oops .mo-oops{display:inline}
.mascot.happy .m-cheek{opacity:.55}
.mascot.happy .m-all{animation:hop .7s}
.mascot.oops .m-all{animation:wobble .55s}
.mascot.think .m-eyes{transform:translate(3px,-3px)}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes hop{35%{transform:translateY(-12px) rotate(-6deg)}70%{transform:translateY(0) rotate(3deg)}}
@keyframes wobble{25%{transform:rotate(-9deg)}70%{transform:rotate(6deg)}}

/* exercise cards (home grid and "related" rows) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.ex{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:4px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:9px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0;font:inherit;text-align:start;cursor:pointer}
.ex:nth-child(3n+1){transform:rotate(-.6deg)}
.ex:nth-child(3n+2){transform:rotate(.5deg)}
.ex:hover{transform:rotate(0) translateY(-4px);border-color:var(--ink);box-shadow:6px 6px 0 var(--grid-strong)}
.ex.live{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--hi)}
.ex.live::before{content:"";position:absolute;top:-11px;inset-inline-end:28px;width:78px;height:22px;background:var(--tape);transform:rotate(4deg)}
.ex[data-band="1"]{--band:var(--b1)}.ex[data-band="2"]{--band:var(--b2)}.ex[data-band="3"]{--band:var(--b3)}.ex[data-band="4"]{--band:var(--b4)}
.ex-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.badge{font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:4px;background:var(--band,var(--b3));color:var(--ink);white-space:nowrap}
.kind{font-family:var(--hand);font-size:.875rem;color:var(--ink-soft);white-space:nowrap}
.ex h3{font-size:1.1875rem;font-weight:700;line-height:1.3}
.ex p{color:var(--ink-soft);font-size:.9375rem}
.ex .preview{font-family:var(--mono);font-size:.9375rem;direction:ltr;text-align:right;background:var(--paper);border:1px dashed var(--line);border-radius:4px;padding:7px 10px;overflow-x:auto;white-space:nowrap}
.ex-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);font-size:.8125rem;color:var(--ink-soft)}
.diff{display:flex;gap:3px;align-items:center}
.diff i{width:10px;height:10px;border:1.5px solid var(--ink);border-radius:2px;display:inline-block}
.diff i.on{background:var(--pen);border-color:var(--pen)}
.prog-chip{font-family:var(--hand);color:var(--blue);font-size:.875rem}
.soon-tag{font-family:var(--hand);font-size:.8125rem;color:var(--pen);border:1.5px solid var(--pen);border-radius:999px;padding:0 9px;transform:rotate(-3deg);display:inline-block;white-space:nowrap}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.faq details{background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:0 18px}
.faq details[open]{border-color:var(--ink)}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:500;color:var(--pen);font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details > div{padding-bottom:16px;color:var(--ink-soft);max-width:68ch}

/* search */
.search-ov{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--panel) 50%,transparent);display:flex;justify-content:center;align-items:flex-start;padding:calc(9vh + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));direction:rtl}
.search-box{width:min(640px,100%);background:var(--card);border:2px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.search-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:2px solid var(--ink)}
.search-row .ic{width:22px;height:22px}
.search-row input{flex:1;min-width:0;font:inherit;font-size:1.1875rem;border:0;background:transparent;color:var(--ink);outline:none}
.search-row button{font:inherit;font-size:.75rem;font-family:var(--mono);border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink-soft);padding:2px 8px;cursor:pointer}
.results{max-height:min(58vh,520px);overflow:auto;padding-block:6px}
.results-lbl{padding:8px 16px 2px;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--ink-soft)}
.result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;text-decoration:none;color:var(--ink);cursor:pointer}
.result.sel,.result:hover{background:var(--hi);color:var(--hi-ink)}
.result b{display:block;font-weight:700}
.result .rs{display:block;font-size:.8125rem;color:var(--ink-soft)}
.result.sel .rs,.result:hover .rs{color:var(--hi-ink)}
.result .rt{font-size:.75rem;font-weight:700;border:1.5px solid currentColor;border-radius:999px;padding:1px 9px;white-space:nowrap;flex:none}
.search-empty{padding:18px 16px;font-family:var(--hand);color:var(--ink-soft)}
.search-foot{padding:9px 16px;font-size:.8125rem;color:var(--ink-soft);border-top:1px dashed var(--line);display:flex;gap:6px 14px;flex-wrap:wrap}
.search-foot kbd{font-family:var(--mono);font-size:.6875rem;border:1px solid var(--line);border-radius:4px;padding:0 5px}

/* accessibility menu */
.a11y{position:fixed;top:calc(68px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px));z-index:85;width:min(320px,calc(100vw - 32px));background:var(--card);border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:16px;direction:rtl}
.a11y-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.a11y-head h2{font-size:1.125rem}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-grid button{font:inherit;font-size:.875rem;line-height:1.3;padding:10px 8px;border:1.5px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);cursor:pointer}
.a11y-grid button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.a11y-grid button small{display:block;font-size:.75rem;opacity:.8}
.a11y-foot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:.875rem}

/* footer: the back cover of the notebook */
.foot{margin-top:64px;background:var(--panel);color:var(--panel-fg);position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--panel-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-line) 1px,transparent 1px);background-size:var(--cell) var(--cell);opacity:.5;pointer-events:none}
.foot > *{position:relative}
.foot-in{display:grid;grid-template-columns:1.2fr .9fr .9fr 1.3fr;gap:32px;padding-block:48px 28px}
.foot .logo-mark{border-color:var(--panel-fg)}
.foot .logo-mark span{border-color:var(--panel-fg)}
.foot h3{font-size:.8125rem;font-weight:700;letter-spacing:.05em;color:var(--hi);margin-bottom:12px}
.foot p{color:var(--panel-soft);font-size:.9375rem;margin-top:12px;max-width:36ch}
.foot-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.foot-col a{color:var(--panel-soft);text-decoration:none;font-size:.9375rem}
.foot-col a:hover{color:var(--hi)}
.grade-links{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.grade-links a{border:1px solid var(--panel-line);border-radius:6px;text-align:center;padding:3px 0;font-size:.875rem}
.grade-links a:hover{background:var(--hi);color:var(--hi-ink)}
.channel{margin-top:18px;border:1.5px dashed var(--panel-soft);border-radius:10px;padding:14px;display:grid;gap:6px;justify-items:start}
.channel b{font-family:var(--display);font-size:1.75rem;line-height:1;color:var(--panel-fg)}
.channel span{font-size:.875rem;color:var(--panel-soft)}
.channel .btn{border-color:var(--panel-fg);box-shadow:3px 3px 0 var(--pen);margin-top:4px}
.times{border-collapse:collapse;font-family:var(--mono);font-size:.75rem;font-variant-numeric:tabular-nums;width:100%;max-width:340px;table-layout:fixed;direction:ltr}
.times th,.times td{border:1px solid var(--panel-line);text-align:center;padding:3px 0;color:var(--panel-soft);transition:background .12s,color .12s}
.times th{color:var(--hi);font-weight:500}
.times .hr,.times .hc{background:var(--panel-line);color:var(--panel-fg)}
.times .hx{background:var(--hi);color:var(--hi-ink);font-weight:700}
.times-out{font-family:var(--hand);color:var(--hi);min-height:1.6em;margin-top:6px;font-size:1rem}
.times-link{color:var(--panel-soft);font-size:.875rem}
.times-link:hover{color:var(--hi)}
.foot-legal{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:flex-start;padding-block:16px 30px;border-top:1px solid var(--panel-line);font-size:.8125rem;color:var(--panel-soft)}
.foot-legal a{color:var(--panel-soft)}
.foot-legal details{max-width:62ch}
.foot-legal summary{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.foot-legal details p{margin-top:8px;font-size:.8125rem;max-width:62ch}
@media (max-width:960px){.foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-in{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ================= production additions ================= */
.skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* building blocks shared by the inner pages */
.crumbs{padding-block:18px 0;font-size:.875rem;color:var(--ink-soft)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.crumbs li:not(:last-child)::after{content:"‹";margin-inline:8px}
.crumbs a{color:var(--ink-soft)}
.ws-sec{padding-block:44px;scroll-margin-top:calc(var(--hdr,64px) + 16px)}
.ws-sec > h2,.sec-title{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,4.6vw,3.1rem);line-height:.95}
.intro{color:var(--ink-soft);margin-top:8px;max-width:62ch}
.facts-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts-list li{font-size:.8125rem;border:1.5px solid var(--ink);border-radius:999px;padding:3px 12px;background:var(--card)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn.big{font-size:1.1875rem;padding:15px 28px}
.micro{font-size:.8125rem;color:var(--ink-soft)}
.share-mini{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:.875rem;padding-top:14px;border-top:1px dashed var(--line)}
.share-mini a{color:var(--ink)}
.fx{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;font-weight:700;font-variant-numeric:tabular-nums;margin:0 .1em;font-size:.95em}
.fx b{padding:0 .15em .02em;border-bottom:.09em solid currentColor;min-width:1em;text-align:center;font-weight:inherit}
.fx i{font-style:normal;padding:.02em .15em 0}

/* preview-first PDF pages: the real pages are the first thing on screen */
.pv-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto 1fr;grid-template-areas:"viewer title" "viewer side";gap:18px 48px;padding-block:16px 44px}
.pv-title{grid-area:title;min-width:0}
.pv-title h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5.2vw,4.3rem);line-height:.92;margin-block:8px 12px}
.pv-sub{font-size:1.125rem;color:var(--ink-soft);max-width:46ch}
.pv-viewer{grid-area:viewer;display:grid;gap:14px;justify-items:center;align-content:start;min-width:0}
.pv-side{grid-area:side;display:grid;gap:16px;align-content:start;min-width:0}
.pv-main{display:block;width:100%;max-width:520px;position:relative;transform:rotate(-1deg);transition:transform .25s}
.pv-main:hover{transform:rotate(0) translateY(-3px)}
.pv-main img{display:block;width:100%;height:auto;background:#fff;border:1px solid #C7CCD6;border-radius:3px;box-shadow:8px 10px 0 var(--grid-strong)}
.pv-main .zoom-hint{position:absolute;bottom:14px;left:14px;background:var(--panel);color:var(--panel-fg);font-size:.75rem;font-weight:500;padding:3px 10px;border-radius:999px}
.pv-thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pv-thumbs button{padding:3px;border:2px solid transparent;border-radius:6px;background:none;cursor:pointer;width:66px;display:grid;gap:2px;color:var(--ink-soft);font:inherit}
.pv-thumbs button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.pv-thumbs img{display:block;width:100%;height:auto;border:1px solid #C7CCD6;background:#fff}
.pv-thumbs small{font-size:.6875rem;text-align:center}
@media (max-width:900px){.pv-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"title" "viewer" "side";gap:20px}.pv-main{max-width:420px}}

/* cards that show the first page of a PDF */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px}
.feat{display:grid;grid-template-rows:auto 1fr;background:var(--card);border:2px solid var(--ink);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.feat:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--hi)}
.feat-img{display:block;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:var(--cell) var(--cell);padding:18px 18px 0;height:220px;overflow:hidden;border-bottom:2px solid var(--ink)}
.feat-img img{display:block;width:78%;height:auto;margin-inline:auto;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--grid-strong);border:1px solid #C7CCD6;background:#fff}
.feat-t{display:grid;gap:4px;padding:14px 16px 16px;align-content:start}
.feat-t .badge{justify-self:start}
.feat-t b{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1}
.feat-t small{color:var(--ink-soft);font-size:.9375rem}
@media (max-width:860px){
  .feat-grid{grid-template-columns:minmax(0,1fr)}
  .feat{grid-template-columns:118px minmax(0,1fr);grid-template-rows:none}
  .feat-img{height:auto;padding:10px;border-bottom:0;border-inline-end:2px solid var(--ink)}
  .feat-img img{width:100%}
}

/* related pages and the help band */
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.mini{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:12px;text-decoration:none;color:var(--ink)}
.mini:hover{border-color:var(--ink)}
.mini img{width:64px;height:auto;border:1px solid #C7CCD6;background:#fff;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--grid-strong)}
.mini b{display:block;font-size:.9375rem;line-height:1.3}
.mini small{display:block;color:var(--ink-soft);font-size:.8125rem}
.help{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;background:var(--card);border:2px dashed var(--pen);border-radius:8px;padding:20px 22px}
.help .mascot{width:56px;height:56px}
.help > div{flex:1;min-width:220px}
.help b{font-size:1.125rem;display:block}
.help p{color:var(--ink-soft)}
.tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}
.tip{background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:20px}
.tip h3{font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:1}
.tip ul{margin:10px 0 0;padding-inline-start:18px;color:var(--ink-soft);display:grid;gap:6px}
@media (max-width:860px){.more-grid,.tips{grid-template-columns:minmax(0,1fr)}}

/* text pages: accessibility statement, privacy, 404 */
.legal{max-width:760px;padding-block:8px 64px}
.legal h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);line-height:.95;margin-block:14px 12px}
.legal h2{font-size:1.25rem;margin-top:28px}
.legal p,.legal li{color:var(--ink-soft);max-width:68ch}
.legal ul{padding-inline-start:20px;display:grid;gap:6px}
.legal .updated{font-size:.875rem}
.nf .cta-row{margin-top:18px}

@media print{.top,.foot,.tabbar,.wa-fab,.toasts,.skip{display:none !important}}