/* site.css — מעטפת האתר. אותם טוקנים כמו באפליקציות (styles.css + a11y.css), כדי שהאתר והתרגול ייראו כמקשה אחת. */
:root{
  --ink:#1B2430; --ink-soft:#44525F; --ink-faint:#5E6B78;
  --paper:#FAFBFC; --panel:#FFFFFF; --grid:#DCE5EE; --rule:#C9D5E2;
  --pen:#2B5BA8; --pen-soft:#E8EFF9; --red:#C22B47; --red-soft:#FBE9ED;
  --amber:#8A5F06; --amber-soft:#FBF1DC; --green:#1A7058; --green-soft:#E1F1EC;
  --shadow:0 1px 2px rgba(27,36,48,.06),0 10px 26px -16px rgba(27,36,48,.35);
  --display:"Frank Ruhl Libre",Georgia,serif; --body:"Assistant","Segoe UI",Arial,sans-serif; --num:"Rubik","Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#E7ECF2; --ink-soft:#A8B4C2; --ink-faint:#8B98A6; --paper:#11161C; --panel:#181F27; --grid:#1D2831; --rule:#2B3643;
  --pen:#7FA9E8; --pen-soft:#18273B; --red:#F0748C; --red-soft:#331A22; --amber:#E3B44C; --amber-soft:#2E2515; --green:#4FC39F; --green-soft:#0F2A23;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.9);
}}

/* ---- עמודי האתר (לא האפליקציות) ---- */
body.site{margin:0; direction:rtl; text-align:right; font-family:var(--body); color:var(--ink); background-color:var(--paper);
  background-image:repeating-linear-gradient(to left,var(--grid) 0 1px,transparent 1px 30px),repeating-linear-gradient(to bottom,var(--grid) 0 1px,transparent 1px 30px);
  font-size:17px; line-height:1.6; -webkit-tap-highlight-color:transparent}
body.site *{box-sizing:border-box}
.site .wrap{max-width:860px; margin:0 auto; padding-inline:16px; padding-block:0 48px}
.site a{color:var(--pen); text-underline-offset:3px}
.site h1,.site h2{font-family:var(--display); font-weight:900; line-height:1.15}
.site h2{font-size:clamp(22px,4.4vw,28px); margin:34px 0 10px}
.site h3{font-size:19px; margin:22px 0 6px}
.site p,.site li{max-width:66ch}
.site .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site .skip{position:absolute; inset-inline-start:8px; top:-60px; z-index:100; background:var(--pen); color:#fff; padding:8px 14px; border-radius:5px; font-weight:700; text-decoration:none}
.site .skip:focus{top:8px}
.site a:focus-visible,.site button:focus-visible,.site [tabindex]:focus-visible{outline:3px solid var(--pen); outline-offset:3px; border-radius:4px}

/* ---- פס עליון ---- */
.shead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-block:14px; border-bottom:1px solid var(--rule); margin-bottom:8px}
.logo{font-family:var(--display); font-weight:900; font-size:26px; color:var(--ink)!important; text-decoration:none; letter-spacing:-.01em}
.logo span{color:var(--pen)}
.dev{font-family:var(--num); font-size:12px; font-weight:500; color:var(--amber); background:var(--amber-soft);
  border:1px solid currentColor; border-radius:999px; padding:3px 10px; white-space:nowrap}
.shead nav{margin-inline-start:auto; display:flex; gap:14px; flex-wrap:wrap; font-size:15px}

/* ---- פס האתר שמעל אפליקציה ---- */
.sitebar{max-width:860px; margin:0 auto; padding:8px 16px 0; font-size:14px; color:var(--ink-faint); font-family:var(--body); direction:rtl}
.sitebar a{color:var(--pen); text-underline-offset:3px}
.sitebar .logo{font-size:17px}

/* ---- עמוד הנחיתה ---- */
.lhero{padding:26px 0 8px}
.lhero h1{font-size:clamp(34px,8vw,54px); margin:0 0 10px}
.lhero .lead{font-size:clamp(18px,3.4vw,21px); color:var(--ink-soft); margin:0 0 14px}
.facts{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 6px; list-style:none}
.facts li{font-size:14.5px; font-weight:600; background:var(--panel); border:1px solid var(--rule); border-radius:999px; padding:5px 13px}
.gradepick{display:flex; gap:10px; margin:26px 0 14px; flex-wrap:wrap}
.gradepick button{font:inherit; font-family:var(--display); font-weight:900; font-size:22px; cursor:pointer; background:var(--panel);
  color:var(--ink); border:1.5px solid var(--rule); border-radius:6px; padding:10px 12px; flex:1 1 0; min-width:92px; box-shadow:var(--shadow)}
.gradepick button[aria-pressed="true"]{background:var(--pen); border-color:var(--pen); color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gradepick button[aria-pressed="true"]{color:#11161C}}
.grade{margin-top:6px}
.grade[hidden]{display:none}
.grade h2{margin-top:10px}
.subjects{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; padding:0; margin:0; list-style:none}
.subj{display:block; height:100%; text-decoration:none; color:var(--ink)!important; background:var(--panel); border:1px solid var(--rule);
  border-radius:6px; padding:16px 16px 14px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:transform .12s,border-color .12s}
.subj::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:5px; background:var(--sc)}
.subj:hover{border-color:var(--sc); transform:translateY(-1px)}
.subj h3{margin:0 0 4px; font-size:20px; font-family:var(--display); font-weight:900}
.subj p{margin:0 0 8px; font-size:14.5px; color:var(--ink-soft)}
.subj .meta{font-family:var(--num); font-size:12.5px; color:var(--ink-faint)}
.s-math{--sc:#2B5BA8} .s-heb{--sc:#B0491F} .s-eng{--sc:#1A7058} .s-sci{--sc:#8A3FA8}
.how{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; padding:0; margin:12px 0 0; list-style:none}
.how li{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:14px 16px; font-size:15.5px}
.how b{display:block; font-size:16.5px; margin-bottom:2px}

/* ---- עמודי טקסט ---- */
.page h1{font-size:clamp(30px,6.5vw,42px); margin:24px 0 6px}
.page .upd{font-family:var(--num); font-size:13px; color:var(--ink-faint); margin:0 0 18px}
.page .card{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:18px 20px; box-shadow:var(--shadow); margin:14px 0}
.page .draft{background:var(--amber-soft); border:1px dashed var(--amber); border-radius:6px; padding:10px 14px; font-size:15px; margin:10px 0 18px}
.page table{border-collapse:collapse; width:100%; font-size:15.5px; margin:10px 0}
.page th,.page td{border:1px solid var(--rule); padding:7px 10px; text-align:right; vertical-align:top}
.page th{background:var(--pen-soft); color:var(--ink)}
.page .tblwrap{overflow-x:auto}
.quote p{font-size:18px; line-height:1.75}
.changes{list-style:none; padding:0}
.changes li{border-inline-start:3px solid var(--pen); padding:4px 12px; margin:0 0 12px}
.changes time{font-family:var(--num); font-size:13px; color:var(--ink-faint); display:block}

/* ---- תחתית ---- */
.sfoot{max-width:860px; margin:30px auto 0; padding:16px 16px 40px; border-top:1px solid var(--rule); font-size:14px; color:var(--ink-faint); direction:rtl; font-family:var(--body)}
.sfoot nav{display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:8px}
.sfoot a,.sfoot .fblink{color:var(--pen); text-underline-offset:3px}
.fblink{color:var(--pen); font:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline}
.sfoot p{margin:4px 0}
#foot .sfoot{margin:14px 0 0; padding:12px 0 0; max-width:none}

/* ---- דיאלוג המשוב ---- */
.fbdlg{direction:rtl; text-align:right; border:1px solid var(--rule); border-radius:8px; padding:0; width:min(520px,calc(100vw - 24px));
  background:var(--panel); color:var(--ink); box-shadow:0 20px 50px -20px rgba(0,0,0,.5); font-family:var(--body)}
.fbdlg::backdrop{background:rgba(17,22,28,.55)}
.fbform,.fbdone{padding:20px 20px 18px}
.fbdlg h2{font-family:var(--display); font-weight:900; font-size:24px; margin:0 0 6px}
.fbdlg label{display:block; font-weight:700; margin:12px 0 5px; font-size:15.5px}
.fbdlg .fbopt{font-weight:400; color:var(--ink-faint)}
.fbdlg textarea,.fbdlg input{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1.5px solid var(--rule); border-radius:5px; padding:9px 11px}
.fbdlg textarea:focus,.fbdlg input:focus{outline:3px solid var(--pen); outline-offset:1px; border-color:var(--pen)}
.fbctx,.fbnote{font-size:14px; color:var(--ink-soft); margin:0}
.fbnote{margin-top:12px}
.fberr{color:var(--red); font-weight:700; font-size:14.5px; min-height:1em; margin:8px 0 0}
.fbbtns{display:flex; gap:10px; margin-top:12px}
.fbdlg .btn,.site .btn{font:inherit; font-size:16px; font-weight:700; cursor:pointer; background:var(--pen); color:#fff; border:0; border-radius:5px; padding:10px 22px}
.fbdlg .btn.sec,.site .btn.sec{background:var(--panel); color:var(--ink-soft); border:1px solid var(--rule)}
.fbdlg .btn:focus-visible{outline:3px solid var(--pen); outline-offset:3px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fbdlg .btn:not(.sec),:root:not([data-theme="light"]) .site .btn:not(.sec){color:#11161C}}
@media (prefers-reduced-motion:reduce){.subj{transition:none}}