@media(max-width:1180px){ .wrap{padding:38px 26px 120px;} .topbar{padding-inline:26px;} }

/* The rail already shows XP, the progress bar and the rank. The topbar pill is
   the only XP readout once the rail collapses into a drawer, so it appears
   there and nowhere else. */
@media(min-width:941px){ .lvl-pill{display:none;} }

@media(max-width:1024px){
  .rail{width:290px;}
  .stats{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:940px){
  body{--fs:15.5px; overflow-x:hidden; line-height:1.9;}
  .rail{position:fixed; inset-inline-start:0; top:0; height:100dvh; transform:translateX(101%); transition:transform .28s cubic-bezier(.2,.8,.2,1); width:min(330px,88vw); box-shadow:-18px 0 50px rgba(0,0,0,.45); z-index:60;}
  .rail.open{transform:translateX(0);}
  .rail-close{display:grid; place-items:center;}
  .rail-head{padding:18px 18px 16px; padding-top:max(18px,env(safe-area-inset-top));}
  .rail-foot{padding-bottom:max(14px,env(safe-area-inset-bottom));}
  .topbar{padding:9px 14px; gap:9px;}
  .crumb .mono{display:none;}
  .crumb b{font-size:13px;}
  .lvl-pill{padding:5px 9px; font-size:11.5px;} .lvl-pill i{font-size:13px;}
  .wrap{padding:22px 15px 122px;}
  .step-meter{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap;}
.sm-txt{font-size:12.5px; color:var(--muted); white-space:nowrap;}
.sm-txt b{color:var(--ink); font-weight:700;}
.sm-bar{flex:1; min-width:90px; height:3px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden;}
.sm-bar i{display:block; height:100%; background:var(--ink); border-radius:var(--r-pill); transition:width .5s;}
.sm-phase{font-size:11.5px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); padding:var(--s1) var(--s3); border-radius:var(--r-pill); white-space:nowrap;}
h1.title{font-size:26px; line-height:1.5; letter-spacing:-.4px;}
  h1.title .lv{font-size:11px; letter-spacing:1px;}
  .sub{font-size:14.8px; margin-top:8px;}
  .meta{gap:10px 14px; font-size:12px; margin-top:13px;}
  .eyebrow{gap:6px; margin-bottom:14px;} .chip{font-size:10.5px; padding:4px 9px;}
  .body{padding-inline-start:16px; margin-inline-start:3px;}
  .body h2{font-size:18px; margin:30px 0 10px;} .body h2::before{inset-inline-start:-23px; width:9px; height:9px; top:.6em;}
  .body h3{font-size:15.3px;}
  .body ul,.body ol{margin-inline-start:16px;}
  pre{font-size:12px; padding:15px 15px; line-height:1.8; border-radius:11px;}
  .copy{opacity:1; top:8px; inset-inline-end:8px; padding:4px 8px; font-size:10px;}
  .callout{padding:13px 15px; font-size:14px; border-radius:13px;}
  .example{padding:14px 16px; border-radius:13px;}
  table{font-size:13.3px;} th,td{padding:9px 11px;}
  .quiz{padding:19px 15px; border-radius:17px; margin-top:42px;}
  .quiz-top{gap:11px;} .quiz-ic{width:34px; height:34px; font-size:18px; border-radius:10px;}
  .quiz-top h2{font-size:17.5px;} .quiz-sub{font-size:12.6px;}
  .qcount{position:absolute; opacity:0; pointer-events:none;}
  .q-text{font-size:14.8px;}
  .opt{padding:13px 12px; gap:9px; font-size:14.2px; min-height:52px; border-radius:13px;}
  .opt-key{width:26px; height:26px;}
  .q-why{font-size:13px; padding:10px 12px;}
  .quiz-actions{gap:8px;} .quiz-actions .btn{flex:1; justify-content:center; padding:12px 12px;}
  .result{width:100%; margin-inline-start:0; justify-content:center; font-size:13.4px;}
  .gate{padding:13px 15px; font-size:13px; align-items:flex-start;}
  .lesson-nav{display:none;}
  .sign{margin-top:26px;}
  .hero h1{font-size:27px; letter-spacing:-.5px;} .hero .lead{font-size:15px; line-height:1.95;}
  .stat{padding:14px 15px;} .stat b{font-size:19px;}
  .step{padding:13px 15px; gap:11px;} .step b{font-size:14.4px;} .step p{font-size:13px;}
  .namebox{padding:17px 16px;}
  .toc{margin:18px 0 4px;}
  .cert{padding:30px 18px 24px; border-radius:17px;}
  .cert::before{inset:9px;}
  .cert-seal{width:56px; height:56px; font-size:27px;}
  .cert h1{font-size:20px; line-height:1.55;}
  .cert .who{font-size:25px; min-width:100%; padding-bottom:9px;}
  .cert .desc{font-size:13.8px; line-height:1.95; margin-top:18px;}
  .cert-grid{grid-template-columns:1fr; gap:9px; margin:22px 0 18px;}
  .cert-foot{flex-direction:column; align-items:flex-start; gap:14px;}
  .cert-id{text-align:start;}
  .cert-actions .btn{flex:1; justify-content:center;}
  .to-top{bottom:80px; inset-inline-end:14px; width:40px; height:40px; font-size:15px;}
  .toast{bottom:82px;}
  .mob{
    display:flex; position:fixed; bottom:0; inset-inline:0; z-index:40; gap:8px;
    padding:9px 12px; padding-bottom:max(9px,env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--surface) 95%, transparent); backdrop-filter:blur(16px); border-top:1px solid var(--line);
  }
  .mob .btn{padding:12px 10px; font-size:13.5px;}
  .mob .sq{width:48px; flex-shrink:0; justify-content:center; padding:12px 0;}
  .mob .grow{flex:1; justify-content:center;}
}

@media(max-width:560px){
  body{--fs:15px;}
  .stats{grid-template-columns:repeat(2,1fr); gap:9px;}
  .stat{padding:12px 13px;} .stat b{font-size:18px;} .stat span{font-size:11.5px;}
  .chip.hash{display:none;}
  .step-meter{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap;}
.sm-txt{font-size:12.5px; color:var(--muted); white-space:nowrap;}
.sm-txt b{color:var(--ink); font-weight:700;}
.sm-bar{flex:1; min-width:90px; height:3px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden;}
.sm-bar i{display:block; height:100%; background:var(--ink); border-radius:var(--r-pill); transition:width .5s;}
.sm-phase{font-size:11.5px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); padding:var(--s1) var(--s3); border-radius:var(--r-pill); white-space:nowrap;}
h1.title{font-size:23.5px;}
  .hero h1{font-size:24px;}
  .phase-card{font-size:13.2px; padding:11px 13px;}
  .cert .who{font-size:21px;}
  .cert-actions{flex-direction:column;} .cert-actions .btn{width:100%;}
}

@media(max-width:380px){
  .wrap{padding:18px 12px 118px;}
  .body{padding-inline-start:13px;} .body h2::before{inset-inline-start:-20px;}
  .opt{grid-template-columns:auto 1fr; } .opt-mark{display:none;}
  .opt.ok,.opt.no{position:relative;}
}

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

@media(max-width:560px){.sim-cols{grid-template-columns:1fr; gap:7px;} .sim-col{min-height:0;}}

@media print{
  .rail,.overlay,.topbar,.mob,.toast,.modal-bg,.to-top,.cert-actions,.ach-actions,.ach-share-panel{display:none!important;}
  body.no-scroll{overflow:visible;}
  .app{display:block;}
  .main{width:100%;}
  .wrap{padding:0!important; max-width:none;}
  .cert,.ach-card{box-shadow:none; break-inside:avoid;}
}

/* ============ English (LTR) direction adjustments ============
   The layout is authored RTL-first and mirrors through logical properties.
   These rules cover the few cases logical properties cannot express:
   physical transforms/shadows, direction-dependent icons, and the
   Persian strings baked into CSS ::after content. */

/* Mobile drawer slides in from the inline-start edge in both directions. */
@media (max-width:940px){
  html[dir="ltr"] .rail{transform:translateX(-101%); box-shadow:18px 0 50px rgba(0,0,0,.45);}
  html[dir="ltr"] .rail.open{transform:translateX(0);}
}

/* Arrow/caret icons encode direction, so mirror them in LTR.
   Non-directional and brand icons are untouched. */
html[dir="ltr"] .ph-arrow-left::before,
html[dir="ltr"] .ph-arrow-right::before,
html[dir="ltr"] .ph-caret-left::before,
html[dir="ltr"] .ph-caret-right::before{display:inline-block; transform:scaleX(-1);}

/* Quiz answer chips: the label text lives in CSS content, so localize it.
   The correct option no longer carries a tag — see styles/quiz.css. */
html[lang="en"] .opt.no::after{content:'Your choice';}
html[lang="en"] .q-item.need::after{content:'Unanswered';}

/* Code stays LTR in both languages (already set on pre); keep inline code isolated. */
code{unicode-bidi:isolate;}