/* Learn v2: Start, Lessons and Me are three calm screens, one column, one main action each.
   Logical properties only, so dir="rtl" mirrors it. Loads after desktop.css. */
.v2{max-width:560px;margin-inline:auto;padding-block-end:24px}
.v2head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block-end:8px}
.v2head .langsw{margin:0}
.v2hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-block:18px 8px}
.v2ring{position:relative;width:148px;height:148px;margin-block-end:8px}
.v2ring svg{width:100%;height:100%;transform:rotate(-90deg)}
body[data-ar="1"] .v2ring svg{transform:scaleX(-1) rotate(-90deg)}
.v2ring circle{fill:none;stroke-width:10}
.v2ring .rb{stroke:var(--line2)}
.v2ring .rf{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease,ease)}
.v2ring .rn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;font:600 18px var(--sans);color:var(--muted)}
.v2ring .rn b{font:700 38px var(--serif,var(--sans));color:var(--ink)}
.v2next{margin:0;display:flex;flex-direction:column;gap:2px}
.v2next small{font:600 14px var(--sans);color:var(--muted)}
.v2next b{font:700 24px/1.25 var(--serif,var(--sans));color:var(--ink);text-wrap:balance}
.v2where{margin:0 0 12px;font-size:15px}
.v2hero .btn{width:100%;max-width:360px}
.v2hero .linkbtn{margin-block-start:6px}
.v2foot{margin-block-start:26px;padding-block-start:14px;border-block-start:1px solid var(--line2);text-align:center}
.v2foot .linkbtn{margin-inline:auto}
.v2card{display:flex;align-items:center;gap:10px;margin-block-start:18px;padding:14px 16px;border:1.5px solid var(--line2);border-radius:var(--r-3);background:var(--surface);color:var(--ink);text-decoration:none;font:600 15px var(--sans);min-height:var(--tap)}
.v2card .ic{flex:none;color:var(--muted)}
.v2card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.v2-lessons h1{margin-block-end:2px}
.v2sub{margin:0 0 14px}
.v2list{display:flex;flex-direction:column;gap:10px}
.v2list .lrow{margin:0;min-height:56px}
.v2list .ln{font:700 18px var(--sans);color:var(--ink)}
.v2more{margin-block-start:18px}
.v2more>summary{display:flex;align-items:center;min-height:var(--tap);cursor:pointer;font:600 16px var(--sans);color:var(--ink);padding-block:6px}
.v2more[open]>summary{margin-block-end:8px}
.v2links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-block-start:20px}
.v2links .linkbtn{margin:0;justify-content:flex-start;text-align:start}
.v2back{margin-block-end:6px}
.v2-me h1{margin-block-end:4px}
.v2c{margin-block-start:14px}
.v2set>summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;font:600 16px var(--sans)}
.v2set[open]>summary{margin-block-end:8px}
.v2-me .langsw{margin-block-start:10px}
@media (min-width:900px){
  .v2{margin-inline:0 auto;width:min(100%,560px)}
  .v2hero .linkbtn,.v2foot .linkbtn{margin-inline:0}
  .v2foot{text-align:start}
  body[data-tab="today"] .v2head .logo{display:none}
  body[data-tab="today"] .v2head{justify-content:flex-start}
  .v2hero{align-items:flex-start;text-align:start}
  body[data-tab="course"] #app>.v2,body[data-tab="me"] #app>.v2{grid-column:1/-1}
  .v2list .lrow{min-height:60px}
}