/* פריסה: עמודה אחת צרה, כמו מחברת שמתמלאת שורה אחרי שורה */
:root{
  --bg:#f6f8f5; --fg:#1d2420; --muted:#5d6b62; --line:#d9e1db; --accent:#2f6b4f; --soft:#e7efe9;
  --display:"Frank Ruhl Libre",Georgia,serif; --body:"Assistant",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121614; --fg:#e6ebe7; --muted:#97a69c; --line:#27302b; --accent:#7cc39d; --soft:#1a221e; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121614; --fg:#e6ebe7; --muted:#97a69c; --line:#27302b; --accent:#7cc39d; --soft:#1a221e; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:1.075rem;line-height:1.7;padding:0 20px}
main{max-width:40rem;margin:0 auto;padding-block:clamp(48px,10vw,110px) 64px;display:grid;gap:56px}
.eyebrow{font-size:.8rem;letter-spacing:.08em;color:var(--muted);display:flex;gap:10px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1.1;margin:14px 0 18px;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
.lead{color:var(--muted);max-width:32rem;margin:0}
h2{font-family:var(--display);font-weight:500;font-size:1.5rem;margin:0 0 14px}
section p{margin:0}
.age{display:flex;align-items:baseline;gap:12px;padding:18px 0;border-block:1px solid var(--line)}
.age b{font-family:var(--display);font-size:2.6rem;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.age span{color:var(--muted)}
ol.log{list-style:none;margin:0;padding:0;display:grid;gap:0}
ol.log li{display:grid;grid-template-columns:5.5rem 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
ol.log li:first-child{border-top:1px solid var(--line)}
.ver{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem;padding-top:2px}
.ver strong{display:block;color:var(--fg);font-weight:600}
li.next{color:var(--muted)}
li.next .ver strong{color:var(--muted)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);padding-top:20px}
button{font:inherit;color:var(--fg);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}
button:hover{border-color:var(--accent)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
a{color:inherit}
.back{font-size:.9rem;color:var(--muted);text-decoration:none}
.back:hover{color:var(--accent)}
ul.topics{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.topic{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--soft);text-decoration:none}
a.topic:hover{border-color:var(--accent)}
a.topic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.topic h3{font-family:var(--display);font-weight:700;font-size:1.35rem;margin:0}
.topic p{grid-column:1;color:var(--muted);margin:0;font-size:.95rem}
.topic .go{grid-row:1/3;grid-column:2;color:var(--accent);font-size:1.3rem}
.topic.soon{background:transparent;border-style:dashed;color:var(--muted)}
.topic.soon h3{font-weight:500;font-size:1.1rem}
ol.topics{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.num{display:inline-block;min-width:1.6em;color:var(--accent);font-variant-numeric:tabular-nums}
.placeholder{color:var(--muted);padding:20px;border:1px dashed var(--line);border-radius:14px}
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.pn{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;text-decoration:none}
.pn:hover{border-color:var(--accent)}
.pn small{color:var(--muted);font-size:.8rem}
.pn.next{text-align:left}
.content{font-family:var(--display);font-size:1.22rem;line-height:2.05;display:grid;gap:1.1em}
.content p{margin:0}
.content h2.ch{font-size:1.7rem;font-weight:700;margin:0;color:var(--accent)}
.lead-in{font-weight:700}
.src{font-family:var(--body);font-size:.8em;color:var(--muted);white-space:normal}
.br{color:var(--muted)}
ol.karet{list-style:none;margin:0;padding:0 1.2em 0 0;display:grid;gap:.35em}
ol.karet .mark{font-weight:700;color:var(--accent);margin-inline-end:.35em}
.story{display:grid;gap:1.1em;padding:1.1em 1.3em;background:var(--soft);border-radius:14px}
.toc{border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.toc summary{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;cursor:pointer;font-weight:600;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"▾";color:var(--accent)}
.toc[open] summary::after{content:"▴"}
.toc-count{color:var(--muted);font-weight:400;margin-inline-start:auto}
.toc ol{list-style:none;margin:0;padding:4px 10px 12px;display:grid;gap:2px;max-height:60vh;overflow:auto}
.toc a{display:flex;gap:8px;padding:6px 8px;border-radius:8px;text-decoration:none}
.toc a:hover{background:var(--bg)}
.toc a.current{background:var(--bg);color:var(--accent);font-weight:600}
.toc a.empty{color:var(--muted)}
.sec{display:grid;gap:28px;scroll-margin-top:16px}
.sec-head{display:grid;gap:4px}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:1.8rem;margin:0;color:var(--accent)}
ol.notes{margin:0;padding:16px 1.4em 0 0;border-top:1px solid var(--line);font-family:var(--body);font-size:.8em;line-height:1.8;color:var(--muted);display:grid;gap:6px}
sup.fn a{color:var(--accent);text-decoration:none;font-family:var(--body);font-size:.7em}
[hidden]{display:none!important}
.pn{font:inherit;color:var(--fg);background:transparent;cursor:pointer;text-align:start}
.pn.mid{background:var(--soft);text-align:center;justify-items:center}
@media (max-width:520px){.pager{grid-template-columns:1fr 1fr}.pn.mid{grid-column:1/-1;grid-row:2}}
.credit{font-size:.85rem;color:var(--muted);margin:8px 0 0}
.credit a{color:var(--accent)}
ol.notes li p{margin:0}
ol.notes li p+p{margin-top:4px}
a.nb{text-decoration:none;color:var(--accent);margin-inline-start:4px}
/* Bottom bar of each section: read mark, self-quiz, and the pager stay stuck to the screen bottom */
.sec-foot{position:sticky;bottom:0;z-index:5;display:grid;gap:8px;padding:10px 0 12px;background:var(--bg);border-top:1px solid var(--line);margin-top:-8px}
.sec-tools{display:flex;justify-content:space-between;align-items:center;gap:12px}
.read-mark{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;padding:6px 12px;border:1px solid var(--line);border-radius:999px}
.read-mark input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.read-mark:has(input:checked){border-color:var(--accent);color:var(--accent);background:var(--soft)}
.quiz-btn{font-weight:600}
.sec-foot .pn{padding:8px 12px}
.sec-foot .pn:not(.mid){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sec-foot .pn small{display:block}
.toc a.done::after{content:"✓";color:var(--accent);margin-inline-start:auto;font-weight:700}
@media (max-width:520px){
  .sec-foot .pager{grid-template-columns:1fr auto 1fr}
  .sec-foot .pn.mid{grid-column:auto;grid-row:auto}
  .sec-foot .pn{font-size:0;padding:8px 10px}
  .sec-foot .pn small{font-size:.85rem;color:var(--fg)}
  .sec-foot .pn.prev small::before{content:"→ "}
  .sec-foot .pn.next small::after{content:" ←"}
}
dialog.quiz{max-width:36rem;width:calc(100% - 32px);max-height:85vh;border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--bg);color:var(--fg);font-family:var(--body)}
dialog.quiz::backdrop{background:rgb(0 0 0 / .45)}
.quiz-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:12px}
.quiz-head h3{font-family:var(--display);color:var(--accent);margin:2px 0 0;font-size:1.4rem}
.quiz-head small{color:var(--muted)}
.quiz-head .x{padding:4px 10px}
.qq{border:0;border-top:1px solid var(--line);margin:0;padding:14px 0}
.qq legend{font-weight:600;padding:0;margin-bottom:10px;float:right;width:100%}
.opts{display:grid;gap:8px;clear:both}
.opts.tf{grid-template-columns:1fr 1fr}
.opts button{border-radius:10px;text-align:start;padding:10px 12px}
.opts.tf button{text-align:center}
.qq.done .opts button{cursor:default}
.opts button.ok{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--bg));font-weight:600}
.opts button.bad{border-color:#c0504d;background:color-mix(in srgb,#c0504d 15%,var(--bg))}
.why{margin:10px 0 0;color:var(--muted);font-size:.95rem}
.quiz-end{border-top:1px solid var(--line);padding-top:14px}
.quiz-end p{margin:0 0 10px;font-size:1.1rem}
.end-btns{display:flex;gap:10px;flex-wrap:wrap}
/* Accounts */
.acct{display:flex;gap:8px;justify-content:flex-start;align-items:center;font-size:.9rem;color:var(--muted);margin-bottom:-32px}
.acct a{color:var(--accent)}
button.link{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;font:inherit;cursor:pointer}
main.checking .sec .content,main.checking .sec-tools{visibility:hidden}
main.locked .sec .content,main.locked .sec-tools,main.quiz-only .sec .content,main.quiz-only .read-mark{display:none}
.lock-note{padding:16px 18px;border:1px dashed var(--line);border-radius:14px;background:var(--soft);color:var(--muted)}
.lock-note a{color:var(--accent);font-weight:600}
main.quiz-only .sec-tools{justify-content:flex-end}
.form{display:grid;gap:14px;max-width:24rem}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form select{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
.form .primary,.primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600;padding:10px 18px}
.tabs{display:flex;gap:8px}
.tabs button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:600}
.msg{margin:0;color:var(--muted)}
.msg.err{color:#c0504d}