/* ═══════════════════════════════════════════════════════════════
   کمک درسی (/learn): کارت درس‌ها، پایه‌ها، درس‌نامه و تمرین
   از متغیرهای رنگ و فاصله‌ی site.css و چند جزء مشترک python.css (نوار ورود، کارت موضوع، پنجره‌ی ورود) استفاده می‌کند.
   رنگ هر درس: ریاضی طلایی، علوم سبز، انگلیسی آبی، فرانسه گلی (همان خانواده‌ی رنگ بخش بچه‌های صفحه‌ی اصلی).
   ═══════════════════════════════════════════════════════════════ */
.ln-gold{--ln:#7A5200;--ln-bg:#FFF3DC;--ln-line:#F0D9A6}
.ln-green{--ln:#0D5F41;--ln-bg:#E6F4EC;--ln-line:#B9DFC9}
.ln-blue{--ln:#0B4C78;--ln-bg:#E3F1FC;--ln-line:#B8D9F2}
.ln-rose{--ln:#8C1D47;--ln-bg:#FCE9F0;--ln-line:#F1C3D4}

.ln-hero-art{color:var(--gold-l)}
.ln-h2{font-family:var(--font-d);font-weight:400;color:var(--navy);font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);margin:0 0 16px}

/* ── فهرست درس‌ها (/learn) ── */
.ln-subjects{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:720px){.ln-subjects{grid-template-columns:1fr}}
.ln-subject{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-l);border-radius:22px;overflow:hidden;transition:box-shadow .18s ease,transform .18s ease}
.ln-subject:hover{box-shadow:0 14px 30px rgba(3,36,83,.10);transform:translateY(-2px)}
.ln-subject > a{display:flex;gap:14px;padding:18px 18px 12px;text-decoration:none;color:var(--ink);flex:1}
.ln-subject-ic{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--ln-bg);color:var(--ln)}
.ln-subject-ic svg{width:48px;height:48px}
.ln-subject-body{display:flex;flex-direction:column;min-width:0}
.ln-subject-title{color:var(--navy);font-weight:800;font-size:1.2rem;line-height:1.6}
.ln-subject-lead{color:var(--ink-2);font-size:.92rem;line-height:1.9;margin-top:2px}
.ln-subject-meta{margin-top:auto;padding-top:8px;color:#5E6A92;font-size:.85rem}
.ln-done{display:inline-block;margin-inline-start:8px;padding:0 9px;border-radius:var(--r-pill);background:#E6F4EC;color:#0D5F41;font-weight:700}
.ln-groups{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 16px}
.ln-groups a{display:inline-flex;align-items:center;min-height:36px;padding:2px 12px;border-radius:var(--r-pill);background:var(--ln-bg);color:var(--ln);font-weight:700;font-size:.84rem;text-decoration:none;border:1px solid var(--ln-line)}
.ln-groups a:hover{background:#fff}

/* ── پایه‌های یک درس (/learn/{درس}) ── */
.ln-grades{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.ln-grade{background:var(--paper);border:1px solid var(--line-l);border-radius:20px;padding:6px 6px 12px}
.ln-grade-head{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;text-decoration:none;background:var(--ln-bg)}
.ln-grade-head:hover{box-shadow:inset 0 0 0 2px var(--ln-line)}
.ln-grade-badge{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--ln);color:#fff;font-family:var(--font-d);font-size:1.35rem}
.ln-grade-title{display:block;color:var(--navy);font-weight:800;font-size:1.08rem;line-height:1.5}
.ln-grade-meta{display:block;color:#5E6A92;font-size:.84rem}
.ln-grade-topics{margin:10px 0 0;padding:0 14px 0 0;padding-inline-start:30px;line-height:2.1}
.ln-grade-topics a{color:var(--navy-3);font-weight:600;text-decoration:none}
.ln-grade-topics a:hover{text-decoration:underline}
.ln-grade-topics li::marker{color:var(--ln);font-weight:700}
.ln-grade-topics li.is-done a::after{content:"";display:inline-block;width:.32em;height:.62em;margin-inline-start:.5em;border:solid #1B8A5E;border-width:0 .15em .15em 0;transform:rotate(45deg) translateY(-.12em)}
.ln-back{margin-top:22px}
.ln-back a{color:var(--navy-3);font-weight:700}

/* ── موضوع‌های یک پایه ── */
.ln-topics .py-num{background:var(--ln);color:#fff}
.ln-topic-card.is-done .py-num{background:#1B8A5E}
.ln-stars{display:inline-flex;align-items:center;gap:6px;margin-inline-start:8px;color:#8A5F00;font-weight:700}
.ln-other{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;color:var(--ink-2);font-size:.92rem}
.ln-other a{display:inline-flex;align-items:center;min-height:38px;padding:2px 14px;border-radius:var(--r-pill);border:1.5px solid var(--line-l);background:#fff;color:var(--navy);font-weight:700;text-decoration:none}
.ln-other a:hover{border-color:var(--gold)}

/* ── یک موضوع: درس‌نامه، واژه‌ها، تمرین ── */
.ln-wrap{max-width:860px}
.ln-card{background:var(--paper);border:1px solid var(--line-l);border-radius:22px;padding:clamp(16px,3vw,26px);margin-bottom:18px;box-shadow:0 6px 18px rgba(3,36,83,.04)}
.ln-card-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--navy);font-size:1.25rem;font-weight:800}
.ln-card-title::before{content:"";flex:none;width:14px;height:14px;background:var(--ln,var(--gold));clip-path:var(--star)}
.ln-lesson > p{color:var(--ink);line-height:2.05;margin:0 0 1em;font-size:1.02rem}
.ln-list{margin:0 0 1em;padding-inline-start:1.3em;line-height:2.05}
.ln-list li::marker{color:var(--gold-d)}
.ln-example{margin:0 0 1.1em;background:var(--ln-bg,#F5F7FC);border:1px solid var(--ln-line,var(--line-l));border-radius:16px;padding:12px 16px}
.ln-example figcaption{font-weight:800;color:var(--ln,var(--navy));margin-bottom:4px}
.ln-example p{margin:0;line-height:2.05;color:var(--ink)}
.ln-tip{position:relative;background:#FFF7E6;border:1px solid #F0D9A6;border-radius:16px;padding:12px 16px;color:#5A3F09;line-height:2;margin:0 0 1em}
.ln-tip strong{color:#7A5200}
.ln-note{color:var(--ink-2);line-height:1.9;margin:0 0 12px}
.ln-best{margin:0 0 12px;color:#0D5F41;font-weight:700}

/* عبارت ریاضی چپ‌به‌راست و کسر روی هم */
.lm{unicode-bidi:isolate;direction:ltr;white-space:nowrap;font-variant-numeric:tabular-nums}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .15em;font-size:.88em;font-weight:700}
.fr-n{padding:0 .2em .08em;border-bottom:1.5px solid currentColor}
.fr-d{padding:.08em .2em 0}

/* واژه‌ها و جمله‌ها */
.ln-words{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
.ln-words li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ln-line,var(--line-l));border-radius:16px;padding:10px 12px}
/* شکل واژه: تصویر SVG ِ روی همین سایت (نه فونت شکلک دستگاه)، کاشی عدد یا خانه‌ی رنگ */
.ln-pic{flex:none;line-height:1;width:44px;height:44px;display:grid;place-items:center;background:var(--ln-bg,#F5F7FC);border-radius:12px;overflow:hidden}
.ln-pic img{display:block;width:32px;height:32px}
.ln-pic-num{font:800 1.3rem/1 system-ui,Arial,sans-serif;color:var(--navy)}
.ln-pic.is-broken{font:800 1.15rem/1 system-ui,Arial,sans-serif;color:var(--ink-2)}
.ln-sw{display:block;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(16,24,40,.18)}
.ln-sw-red{background:#E53935}.ln-sw-blue{background:#1E88E5}.ln-sw-yellow{background:#FDD835}.ln-sw-green{background:#43A047}
.ln-sw-orange{background:#FB8C00}.ln-sw-purple{background:#8E24AA}.ln-sw-pink{background:#F48FB1}.ln-sw-brown{background:#8D6E63}
.ln-sw-black{background:#212121}.ln-sw-white{background:#fff;box-shadow:inset 0 0 0 1.5px #B8C0CC}.ln-sw-gray{background:#9E9E9E}
/* شکل‌های کوچک (بلندگو، ستاره) با SVG؛ رنگشان رنگ متن است */
.ln-ic{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em}
.ln-star{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em}
.ln-star path{fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}
.ln-star.is-off path{fill:none}
.ln-word{display:flex;flex-direction:column;min-width:0;flex:1}
.ln-w{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:700;color:var(--navy);font-size:1.08rem;text-align:right;unicode-bidi:isolate}
.ln-fa{color:var(--ink);font-size:.95rem}
.ln-say{color:#5E6A92;font-size:.82rem}
.ln-speak,.ln-play{flex:none;min-width:44px;min-height:44px;border-radius:50%;border:1.5px solid var(--ln-line,var(--line-l));background:var(--ln-bg,#F5F7FC);cursor:pointer;font-size:1.1rem;color:var(--navy);display:inline-grid;place-items:center}
.ln-speak:hover,.ln-play:hover{background:#fff}
.ln-speak[hidden],.ln-play[hidden]{display:none}
.ln-play{border-radius:var(--r-pill);padding:4px 16px;font:700 .9rem var(--font-b);color:var(--navy);margin:6px 0;display:inline-flex;align-items:center;gap:8px}
.ln-sents{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ln-sents li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ln-line,var(--line-l));border-radius:14px;padding:8px 12px}
.ln-sent{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.ln-sent .ln-w{font-weight:600}

/* تمرین */
.ln-practice{border-color:var(--ln-line,var(--line-l));box-shadow:0 14px 34px rgba(3,36,83,.08)}
.ln-quiz:focus{outline:none}
.ln-q-head{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink-2);font-size:.9rem;font-weight:700}
.ln-q-score{color:#0D5F41}
.ln-bar{height:8px;border-radius:99px;background:#EEF1F8;margin:8px 0 16px;overflow:hidden}
.ln-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l));border-radius:99px;transition:width .3s ease}
.ln-q-text{font-size:clamp(1.08rem,1rem + .4vw,1.25rem);font-weight:700;color:var(--navy);line-height:2;margin:0 0 12px}
.ln-q-text:focus{outline:none}
.ln-fq{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;unicode-bidi:isolate}
.ln-q-pic{display:grid;place-items:center;width:112px;height:112px;margin:0 auto 12px;background:var(--ln-bg,#F5F7FC);border-radius:24px;line-height:1}
.ln-q-pic img{display:block;width:84px;height:84px}
.ln-q-pic.ln-pic-num{font:800 3rem/1 system-ui,Arial,sans-serif;color:var(--navy)}
.ln-q-pic .ln-sw{width:72px;height:72px}
.ln-q-pic.is-broken{width:auto;height:auto;padding:14px 22px;font:800 1.4rem/1.4 var(--font-b);color:var(--navy)}
.ln-art{display:block;margin:0 auto 14px;max-width:100%}
.ln-dots{width:min(230px,100%)}
.ln-dots circle{fill:var(--gold)}
.ln-clock{width:190px;height:190px}
.ln-clock .face{fill:#fff;stroke:var(--navy);stroke-width:5}
.ln-clock text{font:700 17px var(--font-b);fill:var(--navy)}
.ln-clock .hour{stroke:var(--navy);stroke-width:7;stroke-linecap:round}
.ln-clock .min{stroke:#B07A00;stroke-width:4;stroke-linecap:round}
.ln-clock .pin,.ln-angle .pin{fill:var(--navy)}
.ln-angle{width:min(260px,100%)}
.ln-angle .ray{stroke:var(--navy);stroke-width:4;stroke-linecap:round}
.ln-angle .arc{fill:none;stroke:#B07A00;stroke-width:3}
.ln-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px}
.ln-opt{min-height:52px;padding:10px 14px;border-radius:14px;border:2px solid var(--line-l);background:#fff;color:var(--ink);font:600 1.02rem/1.7 var(--font-b);cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.ln-opt[dir=ltr]{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.ln-opt:hover:not(:disabled){border-color:var(--gold);background:#FFFBF2}
.ln-opt:disabled{cursor:default}
.ln-opt.is-right{border-color:#1B8A5E;background:#E6F4EC;color:#0D5F41}
.ln-opt.is-wrong{border-color:#C0392B;background:#FDECEA;color:#8E241A}
.ln-num{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.ln-num input{flex:1 1 160px;min-width:0;font:700 1.25rem/1.4 var(--font-b);padding:10px 14px;border:2px solid #C9D1E6;border-radius:14px;min-height:52px;text-align:left;box-sizing:border-box}
.ln-num input:focus{outline:none;border-color:var(--navy-3);box-shadow:0 0 0 3px rgba(42,63,126,.15)}
.ln-num input.is-right{border-color:#1B8A5E;background:#E6F4EC}
.ln-num input.is-wrong{border-color:#C0392B;background:#FDECEA}
.ln-num .btn{min-height:52px}
.ln-spell input{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.02em}
.ln-hint{color:#5E6A92;font-size:.86rem;margin:8px 0 0}
.ln-hint.is-err{color:#A12E22;font-weight:700}
.ln-keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;direction:ltr}
.ln-key{min-width:44px;min-height:44px;border-radius:12px;border:1.5px solid var(--line-l);background:#fff;font:700 1.1rem system-ui,Arial,sans-serif;color:var(--navy);cursor:pointer}
.ln-key:hover{border-color:var(--gold)}
.ln-tiles,.ln-tiles-target{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ln-tiles-target{min-height:56px;padding:8px;border:2px dashed var(--line-l);border-radius:14px;margin-bottom:10px;counter-reset:tile}
.ln-tiles-target.is-right{border-style:solid;border-color:#1B8A5E;background:#F2FAF5}
.ln-tiles-target.is-wrong{border-style:solid;border-color:#C0392B;background:#FFF5F4}
.ln-tiles-target:not(.is-foreign) li{counter-increment:tile;display:flex;align-items:center;gap:6px;width:100%}
.ln-tiles-target:not(.is-foreign) li::before{content:counter(tile,persian);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:700;font-size:.85rem}
.ln-tiles:not(.is-foreign){flex-direction:column}
.ln-tile{min-height:46px;padding:8px 14px;border-radius:12px;border:2px solid var(--line-l);background:#fff;color:var(--ink);font:600 1rem/1.6 var(--font-b);cursor:pointer;text-align:start}
.ln-tiles-target:not(.is-foreign) .ln-tile{flex:1}
.is-foreign .ln-tile{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:center}
.ln-tile:hover:not(:disabled){border-color:var(--gold)}
.ln-tile.is-in{background:var(--ln-bg,#F5F7FC);border-color:var(--ln-line,var(--line-l))}
.ln-check{margin-top:12px;min-height:48px}
.ln-fb{margin-top:14px;padding:14px 16px;border-radius:16px;line-height:1.95}
.ln-fb p{margin:6px 0 0}
.ln-fb.is-ok{background:#E9F6EF;border:1px solid #B9DFC9;color:#0B4F36}
.ln-fb.is-no{background:#FFF4F2;border:1px solid #F3C5BE;color:#7C2318}
.ln-fb strong{font-size:1.05rem}
.ln-correct span[dir=ltr]{font-family:system-ui,Arial,sans-serif;font-weight:700}
.ln-why{color:var(--ink)}
.ln-next{margin-top:12px;min-height:48px}
.ln-result{text-align:center;padding:10px 0}
.ln-result:focus{outline:none}
.ln-result-stars{font-size:2.6rem;color:#D49B12;margin:0;display:flex;justify-content:center;gap:.12em}
.ln-result h3{color:var(--navy);font-size:1.3rem;margin:6px 0}
.ln-result-n{color:var(--ink-2);font-weight:700;margin:0 0 8px}
.ln-save{color:#0D5F41;font-weight:700;min-height:1.6em;margin:0 0 12px}
.ln-result-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ln-result-acts .btn{min-height:48px}
.ln-review{margin-top:18px;text-align:start;background:#F8F9FC;border:1px solid var(--line-l);border-radius:16px;padding:10px 14px}
.ln-review summary{cursor:pointer;font-weight:800;color:var(--navy);min-height:40px;display:flex;align-items:center}
.ln-review-item{border-top:1px solid var(--line-l);padding:10px 0}
.ln-review-q{font-weight:700;color:var(--navy);margin:0}

@media (max-width:560px){
  .ln-opts{grid-template-columns:1fr}
  .ln-subject > a{padding:16px 14px 10px}
  .ln-groups{padding:0 14px 14px}
}
@media (prefers-reduced-motion:reduce){
  .ln-subject,.ln-bar span,.ln-opt{transition:none}
  .ln-subject:hover{transform:none}
}
.ln-opt:focus-visible,.ln-tile:focus-visible,.ln-key:focus-visible,.ln-speak:focus-visible,.ln-play:focus-visible,.ln-groups a:focus-visible,.ln-other a:focus-visible,.ln-grade-head:focus-visible{outline:3px solid var(--gold-d);outline-offset:2px}