/* Shared look for every page ("comic clean"): white dotted background, black outlines with a hard shadow, one reading column.
   Light only. Colors are tokens. */
:root{
  --paper:#FAFAFC; --grid:#EEEEF4; --card:#FFFFFF; --ink:#17171F; --muted:#5F6070;
  --line:#FF3D7F; --hl:#FFE14D; --blue:#2F6FEB; --green:#0E9A5E;
  --ok:#0E8752; --ok-bg:#E3F7EC; --err:#D0263F; --err-bg:#FDECEE; --hint-bg:#FFF8D1;
  --border:#17171F; --soft:#E4E4EC; --hard:#17171F;
  --f-display:"Secular One", "Rubik", sans-serif;
  --f-body:"Rubik", "Segoe UI", Arial, sans-serif;
  --f-math:"STIX Two Text", "Times New Roman", serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html{direction:rtl}
body{
  margin:0;
  background-color:var(--paper);
  background-image:radial-gradient(var(--grid) 1.3px, transparent 1.6px);
  background-size:22px 22px;
  color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6;
}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--blue)}
.wrap{max-width:980px; margin:0 auto; padding-inline:16px; padding-block:20px 80px; display:flex; flex-direction:column; gap:28px}
h1,h2,h3{font-family:var(--f-display); font-weight:400; line-height:1.2; text-wrap:balance; margin:0}
h1{font-size:clamp(2rem,6vw,3.2rem)}
h2{font-size:clamp(1.5rem,4vw,2rem)}
h3{font-size:1.2rem}
p{margin:0}
.eyebrow{font-size:.85rem; letter-spacing:.06em; color:var(--line); font-weight:700}
header.page h1::after{content:""; display:block; width:3.2em; height:.28em; margin-top:.15em; background:var(--hl); border:2px solid var(--border); border-radius:4px}
header.page{display:flex; flex-direction:column; gap:12px; padding-block:4px 12px}
header.page .lead{max-width:62ch; font-size:1.15rem}
nav.toc{display:flex; flex-wrap:wrap; gap:8px}
nav.toc a{color:var(--ink); text-decoration:none; background:var(--card); border:1.5px solid var(--border); border-radius:999px; padding:4px 14px; font-weight:600; font-size:.95rem}
nav.toc a:hover,nav.toc a:focus-visible{border-color:var(--line); outline:none}

/* site bar + breadcrumbs */
.sitebar{display:flex; flex-direction:column; align-items:flex-start; gap:10px; font-size:.95rem}
.sitebar .brand{font-family:var(--f-display); color:var(--ink); text-decoration:none; font-size:1.15rem}
.crumbs{display:flex; flex-wrap:wrap; gap:6px; color:var(--muted)}

section.card{background:var(--card); border:2px solid var(--border); border-radius:16px; box-shadow:-5px 5px 0 var(--hard); padding:26px clamp(18px,3vw,34px); display:flex; flex-direction:column; gap:16px; scroll-margin-top:16px}
.sec-head{display:flex; align-items:baseline; gap:12px}
.sec-num{font-family:var(--f-display); background:var(--hl); color:var(--ink); border:2px solid var(--border); border-radius:10px; font-size:1.15rem; padding:0 .45em; align-self:center}
.text{max-width:66ch}
.eq{font-family:var(--f-math); direction:ltr; unicode-bidi:isolate; white-space:nowrap; font-size:1.12em}
.eq i{font-style:italic}
.eq-run{unicode-bidi:isolate}
.big-eq{font-size:clamp(1.8rem,6vw,2.8rem); text-align:center}
.frac{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; font-size:.72em; line-height:1.05; margin:0 .1em}
.frac>span:first-child{border-bottom:1px solid currentColor; padding:0 .15em}
.m{color:var(--line); font-weight:600}
.b{background:var(--hl); color:#3B2C00; border-radius:4px; padding:0 .2em}
.bl{color:var(--blue); font-weight:700}
.gr{color:var(--green); font-weight:700}

.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.two>*{min-width:0}
.mini{display:flex; flex-direction:column; gap:8px; border:1.5px solid var(--soft); border-radius:12px; padding:16px; background:var(--paper)}
.callout{background:var(--hint-bg); border:2px solid var(--border); border-inline-start:6px solid var(--hl); border-radius:12px; padding:12px 16px}

/* graphs */
svg.g{width:100%; max-width:320px; height:auto; display:block; margin-inline:auto; direction:ltr; touch-action:manipulation}
svg.g.clickable{cursor:crosshair}
.g .grid{stroke:var(--grid); stroke-width:1}
.g .axis{stroke:var(--ink); stroke-width:1.3}
.g .tick{fill:var(--muted); font:7px var(--f-body)}
.g .ln{stroke:var(--line); stroke-width:3; fill:none; stroke-linecap:round}
.g .ln2{stroke:var(--blue); stroke-width:2.4; fill:none; stroke-linecap:round}
.g .dot{fill:var(--hl); stroke:var(--ink); stroke-width:1.2}
.g .pt{fill:var(--blue); stroke:var(--card); stroke-width:1.2}
.g .pt-ok{fill:var(--ok); stroke:var(--card); stroke-width:1.2}
.g .pt-err{fill:var(--err); stroke:var(--card); stroke-width:1.2}
.g .ptlbl{fill:var(--ink); font:700 8px var(--f-body); paint-order:stroke; stroke:var(--card); stroke-width:2.5px}
.g .tri{stroke:var(--blue); stroke-width:2; stroke-dasharray:4 3; fill:none}
.g .trilbl{fill:var(--blue); font:700 9px var(--f-body); paint-order:stroke; stroke:var(--card); stroke-width:2.5px}
.g .bg{fill:var(--card)}

/* lab: graph + controls side by side */
.lab{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:center}
@media (max-width:700px){.lab{grid-template-columns:minmax(0,1fr)}}
.ctrl{display:flex; flex-direction:column; gap:14px}
.ctrl label.slider{display:flex; justify-content:space-between; font-weight:700}
input[type=range]{width:100%; accent-color:var(--line)}
input[type=range].hl{accent-color:#C99A00}
input[type=range].blue{accent-color:var(--blue)}
.tries{display:flex; flex-wrap:wrap; gap:8px}
.explain{display:flex; flex-direction:column; gap:6px}

button{font:inherit; font-weight:700; font-size:.95rem; border-radius:10px; padding:6px 14px; cursor:pointer; border:2px solid var(--border); box-shadow:-2px 2px 0 var(--hard); background:var(--card); color:var(--ink); transition:transform .06s}
button:hover{background:var(--paper)}
button:active:not(:disabled){transform:translate(-2px,2px); box-shadow:none}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
button.primary{background:var(--line); color:#fff}
button.primary:hover{background:var(--line); filter:brightness(1.05)}
button:disabled{opacity:.45; cursor:default}

ol.steps{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; counter-reset:s}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start}
ol.steps li::before{content:counter(s); font-family:var(--f-display); font-size:1.3rem; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff; border:2px solid var(--border)}

.stepper{display:flex; flex-direction:column; gap:10px}
.stepbox{min-height:5.5em}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.counter{color:var(--muted); font-weight:600}

.fb{border-radius:12px; border:1.5px solid currentColor; padding:10px 14px; font-size:.98rem}
.fb.ok{background:var(--ok-bg); color:var(--ok); font-weight:600}
.fb.err{background:var(--err-bg); color:var(--err)}
.fb.hint{background:var(--hint-bg); border-color:#E9CF55}
.fb ul{margin:4px 0 0; padding-inline-start:20px}

.inputs{display:flex; flex-wrap:wrap; gap:12px; align-items:end}
.inputs label{display:flex; flex-direction:column; gap:4px; font-weight:700}
.inputs input{font:1.1rem var(--f-math); width:7em; padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:var(--paper); color:var(--ink); direction:ltr; text-align:center}

/* value tables (x / y) */
.vt{border-collapse:collapse; direction:ltr; font-family:var(--f-math); margin-inline:auto}
.vt th,.vt td{border:1px solid var(--soft); padding:4px 10px; text-align:center; min-width:3.2em}
.vt th{background:var(--paper); font-style:italic}
.vt input{width:3.4em; font:1rem var(--f-math); text-align:center; border:1px solid var(--border); border-radius:6px; background:var(--paper); color:var(--ink); padding:2px}
.scroll-x{overflow-x:auto}

/* matching game */
.bank{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--border); border-radius:999px; padding:2px 12px; background:var(--paper)}
.chip.done{opacity:.4; text-decoration:line-through}
.hw{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:820px){.hw{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.hw{grid-template-columns:1fr}}
.hwc{border:2px solid var(--border); border-radius:14px; box-shadow:-4px 4px 0 var(--hard); padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--card)}
.hwc.solved{border-color:var(--ok); box-shadow:0 0 0 2px var(--ok-bg)}
.hwc .top{display:flex; justify-content:space-between; align-items:center}
.letter{font-family:var(--f-display); font-size:1.4rem}
select{font:1rem var(--f-body); padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--paper); color:var(--ink); width:100%}
.progress{font-weight:700}
.bar{height:10px; border-radius:99px; background:var(--grid); overflow:hidden}
.bar>div{height:100%; background:var(--ok); width:0; transition:width .4s}

/* prev / next topic */
.topic-nav{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.topic-nav a{display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink); background:var(--card); border:2px solid var(--border); border-radius:14px; box-shadow:-4px 4px 0 var(--hard); padding:12px 16px; transition:transform .1s, box-shadow .1s}
.topic-nav a:hover{transform:translate(-1px,-1px); box-shadow:-6px 6px 0 var(--hard)}
.topic-nav small{color:var(--muted); font-weight:700}
.topic-nav .next{text-align:left}
.topic-nav .empty{visibility:hidden}

footer.site{color:var(--muted); font-size:.9rem; text-align:center}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* brand line under the home H1 */
h1 .slogan{display:block; font-size:.42em; color:var(--line); margin-top:.2em}

/* questions people search for, at the end of a topic page */
.faq{display:flex; flex-direction:column; gap:6px}
.faq h3{margin-top:12px}
.faq h3:first-child{margin-top:0}

/* Miri: sitebar avatar and the "רמז ממירי" label on hint boxes */
.sitebar .brand{display:inline-flex; align-items:center; gap:8px}
.sitebar .avatar{width:32px; height:32px; border-radius:50%}
.miri-tip{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; margin-bottom:4px}
.miri-tip img{width:40px; height:40px; border-radius:50%; flex:none}

/* breadcrumbs: clear path subject › grade › chapter › topic */
.crumbs{font-weight:600; align-items:center; row-gap:2px}
.crumbs a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--soft); text-underline-offset:3px}
.crumbs a:hover{text-decoration-color:var(--line)}
.crumbs [aria-current="page"]{color:var(--line)}
.crumbs .sep{color:var(--muted)}
.crumbs{font-size:1rem; background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:4px 14px}
.related{margin:0}
.sfx-mute{display:inline-block; margin-top:10px; min-height:40px; padding:6px 14px; font-size:.95rem}
/* card / step view on phones (assets/cards.js adds body.cards-on; without JS the page stays one long page) */
.cards-on .wrap > section.card:not(.card-on){display:none}
.cards-pre body:not(.cards-on) .wrap > section.card ~ section.card{display:none}
.cards-typing .cards-nav{display:none}
.cards-on .wrap > section.card.card-on{margin-bottom:84px}
.cards-top{position:sticky; top:0; z-index:5; background:var(--paper); padding:8px 2px 10px; margin-bottom:8px}
.cards-meta{display:flex; justify-content:space-between; gap:10px; font-weight:700; font-size:.95rem; margin-bottom:6px}
.cards-title{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cards-bar{height:10px; border:2px solid var(--border); border-radius:99px; background:var(--card); overflow:hidden}
.cards-bar span{display:block; height:100%; width:0; background:var(--line); transition:width .25s}
@media (prefers-reduced-motion: reduce){.cards-bar span{transition:none}}
.cards-nav{position:fixed; bottom:0; inset-inline:0; z-index:6; display:flex; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--paper); border-top:2px solid var(--border)}
.cards-nav button{flex:1; min-height:52px; font-size:1.1rem}
.cards-on:not(.cards-last) .topic-nav, .cards-on:not(.cards-last) .related, .cards-on:not(.cards-last) footer.site{display:none}
.cards-resume{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.done-mark{color:var(--green); font-weight:800}
.progress-reset{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted)}
.prog-mark{color:var(--blue); font-weight:800}
.prog-sum{margin:14px 0 0} .prog-h{font-family:var(--f-display); font-weight:700; font-size:1.25rem; margin:0 0 6px} .prog-sum p{margin:0 0 6px}
.tile-prog{color:var(--green); font-weight:700}
.prog-list{margin:0; padding-inline-start:1.2em} .prog-list li{margin:4px 0} .prog-list small{color:var(--muted)}

/* computer science: code blocks and the optional "הריצו בעצמכם" Python box (assets/pyrun.js) */
pre.code, .pyrun-code, .pyrun-in, .pyrun-out{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.95rem; line-height:1.5; direction:ltr; text-align:left; unicode-bidi:isolate}
pre.code{background:var(--card); border:2px solid var(--border); border-radius:12px; padding:10px 12px; overflow-x:auto; margin:10px 0; white-space:pre}
.pyrun{display:grid; gap:8px; margin:12px 0}
.pyrun-code, .pyrun-in{width:100%; box-sizing:border-box; border:2px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--card); color:var(--ink); resize:vertical}
.pyrun-code{min-height:140px} .pyrun-in{min-height:44px}
.pyrun-out{margin:0; min-height:2.5em; border:2px dashed var(--soft); border-radius:12px; padding:8px 12px; white-space:pre-wrap; overflow-wrap:anywhere}
.pyrun-out:empty{display:none}
.pyrun-out.ok{border-color:var(--ok); background:var(--ok-bg)} .pyrun-out.err{border-color:var(--err); background:var(--err-bg); color:var(--err)} .pyrun-out.wait{color:var(--muted)}
.pyrun-out.he{direction:rtl; text-align:right; font-family:var(--f-body)}
/* step tracer (assets/pytrace.js) */
.pt-code{max-height:22em; padding:8px 0; counter-reset:none}
.pt-line{display:block; padding:0 12px 0 0; border-inline-start:4px solid transparent}
.pt-line.on{background:var(--hl); border-inline-start-color:var(--line)}
.pt-n{display:inline-block; width:2.2em; padding-inline:6px; color:var(--muted); text-align:right; user-select:none}
.pt-pad{align-items:center} .pt-count{color:var(--muted); font-size:.9rem}
.pt-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:10px}
@media (max-width: 560px){.pt-grid{grid-template-columns:minmax(0,1fr)}}
.pt-h{font-weight:700; margin:0 0 4px}
.pt-vars{width:100%; border-collapse:collapse; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.95rem}
.pt-vars th, .pt-vars td{border:2px solid var(--border); padding:4px 8px; text-align:left; overflow-wrap:anywhere}
.pt-vars th{width:auto; background:var(--card)} .pt-vars tr.ch td{background:var(--hl)}
.pt-vars .pt-empty{color:var(--muted); font-family:var(--f-body); text-align:right; direction:rtl}
.pt-out{margin:0; min-height:3em; border:2px dashed var(--soft); border-radius:12px; padding:8px 12px; white-space:pre-wrap; overflow-wrap:anywhere; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.pt-in{margin:0 0 4px; font-size:.9rem; color:var(--muted)}