/* AI Seekho Pakistan, by BirdView Logic: the learner app stylesheet.
 *
 * The look (owner, 2026-10-25: "the mobile app should look like professional edu tech"): clean
 * light surfaces, generous spacing, 12 to 20px radii, soft shadows instead of outlines, ONE strong
 * accent (brand purple #6C3BFF and its tints), a dark ink for text, one success green and one warm
 * streak orange. Dark mode follows the phone (or Profile's choice). Seekho is its own product: no
 * BvLogic academy style, font or asset is used here.
 *
 * Rules kept from the start:
 *   - everything is same-origin (the shell's CSP is default-src 'self'; fonts are self-hosted in
 *     /seekho/fonts with their OFL licences), no inline styles anywhere (widths go through the CSSOM);
 *   - every tap target is at least 44px; a visible focus ring; motion is off under reduced motion;
 *   - text pairs meet WCAG AA (body and muted text at 4.5:1 or more in both themes; the -ink colours
 *     are the text colours on their own -50 tints);
 *   - NOTHING may make the page wider than the phone: no fixed width or min-width above 360px
 *     outside a min-width media query, and no sideways transform of a layout box (the old track
 *     map shifted its stops 34px left and right and pushed them past the edge).
 *     SeekhoAppLookGuardTest fails if either comes back.
 */

/* Latin and Roman Urdu: Inter (OFL, fonts/OFL-Inter.txt), the variable latin subset, 100 to 900. */
@font-face{font-family:'SK Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/seekho/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Urdu script: a local Nastaliq first (zero bytes), else the self-hosted arabic subset of
   Noto Nastaliq Urdu (OFL, fonts/OFL.txt; 239,060 bytes, the same file LiteMode counts).
   unicode-range means a screen with no Urdu letters never downloads it, and swap means
   the text shows at once in the fallback while it arrives on slow 3G. */
@font-face{font-family:'SK Nastaliq';font-style:normal;font-weight:400 700;font-display:swap;
  src:local('Noto Nastaliq Urdu'),local('NotoNastaliqUrdu'),local('Jameel Noori Nastaleeq'),
      url('/seekho/fonts/noto-nastaliq-urdu-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}

:root{
  /* brand: one accent and its tints */
  --brand:#6C3BFF; --brand-strong:#5B2BEF; --brand-ink:#4B1FD1; --brand-50:#F1ECFF; --brand-100:#E4DAFF; --on-brand:#FFFFFF;
  /* status: success green, streak orange, error red, a warm note */
  --ok:#079455; --ok-ink:#067647; --ok-50:#E8F8EF;
  --streak:#EA580C; --streak-ink:#B54708; --streak-50:#FFF1E5;
  --bad:#D92D20; --bad-ink:#B42318; --bad-50:#FEEDEB;
  --warn-ink:#8A5300; --warn-50:#FFF7E0;
  /* neutrals */
  --ink:#14112B; --text:#14112B; --muted:#5E5A73; --bg:#F6F5FA; --surface:#FFFFFF; --surface-2:#F3F1FA;
  --line-c:#E6E3F0; --track:#ECE9F5; --link:#4B1FD1; --focus:#6C3BFF; --white:#FFFFFF;
  /* depth: soft shadows, never outlines */
  --sh-1:0 1px 2px rgba(20,17,43,.05),0 1px 3px rgba(20,17,43,.07);
  --sh-2:0 8px 24px rgba(20,17,43,.08),0 2px 6px rgba(20,17,43,.04);
  --sh-brand:0 10px 24px rgba(108,59,255,.28);
  --r-sm:12px; --r:16px; --r-lg:20px; --r-pill:999px;
  /* type: one sans for Latin and Roman Urdu, Nastaliq for Urdu script */
  --sans:'SK Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --head:var(--sans); --body:var(--sans);
  --urdu:'SK Nastaliq','Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Urdu Typesetting','Noto Naskh Arabic',serif;
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-md:17px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:28px; --fs-4xl:32px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand-ink:#C9B8FF; --brand-50:#231B45; --brand-100:#2F2560;
    --ok:#32D583; --ok-ink:#6CE9A6; --ok-50:#0F2A1F;
    --streak:#FB923C; --streak-ink:#FDB022; --streak-50:#33200F;
    --bad:#F97066; --bad-ink:#FDA29B; --bad-50:#3A1513;
    --warn-ink:#FEC84B; --warn-50:#33270C;
    --text:#F3F1FA; --muted:#B4AECB; --bg:#0E0C1A; --surface:#181528; --surface-2:#221E36;
    --line-c:#2E2945; --track:#2E2945; --link:#B9A4FF; --focus:#B9A4FF;
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 24px rgba(0,0,0,.45); --sh-brand:0 10px 24px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand-ink:#C9B8FF; --brand-50:#231B45; --brand-100:#2F2560;
  --ok:#32D583; --ok-ink:#6CE9A6; --ok-50:#0F2A1F;
  --streak:#FB923C; --streak-ink:#FDB022; --streak-50:#33200F;
  --bad:#F97066; --bad-ink:#FDA29B; --bad-50:#3A1513;
  --warn-ink:#FEC84B; --warn-50:#33270C;
  --text:#F3F1FA; --muted:#B4AECB; --bg:#0E0C1A; --surface:#181528; --surface-2:#221E36;
  --line-c:#2E2945; --track:#2E2945; --link:#B9A4FF; --focus:#B9A4FF;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 24px rgba(0,0,0,.45); --sh-brand:0 10px 24px rgba(0,0,0,.45);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:var(--fs-base); line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-tap-highlight-color:transparent; min-height:100vh;
  overflow-wrap:break-word; font-feature-settings:'cv11','ss01'}
a{color:var(--link); font-weight:600; text-underline-offset:2px}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, audio:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
/* Route changes move focus to the heading for screen readers; no ring for that programmatic focus. */
h1[tabindex="-1"]:focus{outline:none}
h1,h2,h3{font-family:var(--head); font-weight:750; line-height:1.2; margin:0; letter-spacing:-.01em}
h1{font-size:var(--fs-3xl); letter-spacing:-.02em} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)}
p{margin:0}
img,svg,video{max-width:100%}
button{font:inherit; color:inherit}
/* XP, streak, scores, ranks and prices line up digit for digit. */
.sk-num, .sk-chip, .sk-xp, .sk-score b, .sk-rank, .sk-price, .sk-board b, .sk-timer b, .sk-stat b, .sk-hstat b, .sk-ring b{font-variant-numeric:tabular-nums}
/* Icons take the colour of their text (a few are drawn with a fixed stroke in the markup). */
.sk-main svg:not(.sk-bivi), .sk-top svg, .sk-nav svg, .sk-toast svg{stroke:currentColor}

/* Urdu blocks: right to left, Nastaliq, room for its tall stacks. */
.ur{font-family:var(--urdu); line-height:2.15; font-size:1.08em; font-weight:400; unicode-bidi:isolate}
h1 .ur, h2 .ur, h3 .ur, .ur-head{font-family:var(--urdu); font-weight:700}
.ur-kicker{display:block; font-family:var(--urdu); font-weight:700; font-size:var(--fs-base); line-height:2; color:var(--muted); margin-bottom:0}
.sk-grape .ur-kicker, .sk-ink .ur-kicker{color:var(--on-brand)}

.sk-skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--brand); color:var(--on-brand); border-radius:var(--r-sm); padding:10px 14px}
.sk-skip:focus{left:8px}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- frame ---------- */
.sk-top{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px; background:var(--surface); color:var(--text);
  border-bottom:1px solid var(--line-c)}
.sk-brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:750;
  font-size:var(--fs-lg); letter-spacing:-.01em; min-height:44px; min-width:0}
.sk-brand img{width:30px; height:30px; flex:0 0 auto; border-radius:9px}
.sk-brand span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sk-topstats{display:flex; gap:8px; flex:0 0 auto}
.sk-main{max-width:560px; margin:0 auto; padding:16px 16px calc(96px + env(safe-area-inset-bottom)); outline:none; min-width:0}
.sk-main.no-nav{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.sk-stack{display:flex; flex-direction:column; gap:16px; min-width:0}
.sk-stack > *{min-width:0}
.sk-nav{position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; justify-content:space-around; gap:0;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line-c);
  box-shadow:0 -4px 16px rgba(20,17,43,.04)}
.sk-nav a{flex:1 1 0; min-width:0; max-width:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:56px; border-radius:var(--r-sm); color:var(--muted); text-decoration:none; font-size:var(--fs-xs); font-weight:600; line-height:1.2}
.sk-nav a > span:last-child{white-space:nowrap; letter-spacing:-.01em}
.sk-nav a[aria-current="page"]{color:var(--brand-ink)}
.sk-nav a[aria-current="page"] .sk-navic{background:var(--brand-50)}
/* The five tabs: an icon over a short label; a ring on keyboard focus, on top of the fill. */
.sk-nav a:focus-visible{outline:3px solid var(--focus); outline-offset:-2px}
/* the smallest phones: the five labels stay apart */
@media (max-width:360px){.sk-nav a{font-size:11px} .sk-nav a > span:last-child{letter-spacing:-.02em}}
.sk-navic{display:flex; align-items:center; justify-content:center; width:52px; height:30px; border-radius:var(--r-pill); line-height:1}
.sk-navic svg{width:22px; height:22px}

.sk-offline{position:sticky; top:0; z-index:30; margin:0; padding:10px 16px; background:var(--warn-50); color:var(--warn-ink);
  border-bottom:1px solid var(--line-c); font-weight:600; text-align:center; font-size:var(--fs-sm)}
.sk-toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:40;
  width:max-content; max-width:min(calc(100vw - 32px),480px); background:#14112B; color:#FFFFFF; border-radius:var(--r);
  padding:12px 16px; font-weight:600; font-size:var(--fs-sm); box-shadow:var(--sh-2); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.sk-toast button{margin-inline-start:auto}

/* ---------- primitives ---------- */
.sk-card{background:var(--surface); color:var(--text); border:1px solid var(--line-c); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:18px; min-width:0}
.sk-card.sk-grape{background:linear-gradient(140deg,#7B4DFF 0%,#5B2BEF 100%); color:var(--on-brand); border-color:transparent; box-shadow:var(--sh-brand)}
.sk-card.sk-grape a:not(.sk-btn){color:var(--on-brand)}
.sk-card.sk-sun{background:var(--streak-50); border-color:transparent; box-shadow:none}
.sk-card.sk-mint{background:var(--ok-50); border-color:transparent; box-shadow:none}
.sk-card.sk-sky{background:var(--brand-50); border-color:transparent; box-shadow:none}
.sk-card.sk-coral{background:var(--bad-50); border-color:transparent; box-shadow:none}
.sk-card.sk-lilac{background:var(--surface-2); border-color:transparent; box-shadow:none}
.sk-card.sk-grape .sk-muted, .sk-card.sk-grape .sk-hint{color:rgba(255,255,255,.88)}
.sk-muted{color:var(--muted); font-weight:500}
.sk-small{font-size:var(--fs-sm)}
.sk-eyebrow{display:block; font-size:var(--fs-sm); font-weight:600; letter-spacing:0; color:var(--muted)}
.sk-grape .sk-eyebrow{color:rgba(255,255,255,.88)}
.sk-sun .sk-eyebrow{color:var(--streak-ink)} .sk-mint .sk-eyebrow{color:var(--ok-ink)} .sk-sky .sk-eyebrow{color:var(--brand-ink)}
.sk-coral .sk-eyebrow{color:var(--bad-ink)}
.sk-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.sk-between{display:flex; gap:12px; align-items:center; justify-content:space-between; min-width:0}
.sk-between > *{min-width:0}
.sk-grow{flex:1 1 auto; min-width:0}
.sk-label{font-weight:600}

/* buttons: one filled primary (brand), a quiet secondary, and a text link */
.sk-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 20px; max-width:100%;
  border-radius:14px; border:1px solid var(--line-c); background:var(--surface); color:var(--text); font-family:var(--body); font-weight:650;
  font-size:var(--fs-base); line-height:1.2; text-decoration:none; box-shadow:var(--sh-1); cursor:pointer; text-align:center;
  transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease}
.sk-btn:hover{background:var(--surface-2)}
.sk-btn:active{transform:scale(.98)}
.sk-btn.is-sun, .sk-btn.is-grape{background:var(--brand); color:var(--on-brand); border-color:transparent; box-shadow:var(--sh-brand)}
.sk-btn.is-sun:hover, .sk-btn.is-grape:hover{background:var(--brand-strong)}
.sk-btn.is-ink{background:#14112B; color:#FFFFFF; border-color:transparent}
.sk-btn.is-ink:hover{background:#2A2440}
.sk-btn.is-mint{background:var(--ok-50); color:var(--ok-ink); border-color:transparent; box-shadow:none}
.sk-btn.is-sky{background:var(--brand-50); color:var(--brand-ink); border-color:transparent; box-shadow:none}
.sk-btn.is-coral{background:var(--bad-50); color:var(--bad-ink); border-color:transparent; box-shadow:none}
.sk-btn.is-block{display:flex; width:100%}
/* a small back or side action sits at its own width, never stretched across a column */
.sk-stack > .sk-btn.is-sm, .sk-stack > .sk-btn.is-link{align-self:flex-start}
.sk-hero > .sk-btn.is-link, .sk-actions > .sk-btn.is-link, .sk-actionbar > .sk-btn.is-link{align-self:center}
.sk-btn.is-sm{min-height:44px; padding:0 14px; font-size:var(--fs-sm); border-radius:var(--r-sm)}
.sk-btn.is-link{background:transparent; border-color:transparent; box-shadow:none; color:var(--link); text-decoration:underline; min-height:44px; padding:0 8px}
.sk-btn.is-link:hover{background:transparent}
.sk-btn[disabled], .sk-btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.sk-btn svg{flex:0 0 auto}
.sk-grape .sk-btn:not(.is-sun):not(.is-ink){background:#FFFFFF; color:#14112B; border-color:transparent}
.sk-grape .sk-btn.is-sun{background:#FFFFFF; color:#4B1FD1; box-shadow:none}
/* The primary action stays in reach at the bottom of a long screen (lesson, quiz, lab, onboarding). */
.sk-actionbar{position:sticky; bottom:0; z-index:5; display:flex; flex-direction:column; gap:8px; margin:0 -16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom, rgba(246,245,250,0), var(--bg) 30%)}
:root[data-theme="dark"] .sk-actionbar{background:linear-gradient(to bottom, rgba(14,12,26,0), var(--bg) 30%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sk-actionbar{background:linear-gradient(to bottom, rgba(14,12,26,0), var(--bg) 30%)}}

.sk-chip{display:inline-flex; align-items:center; gap:6px; min-height:32px; border-radius:var(--r-pill); padding:4px 12px;
  font-weight:600; font-size:var(--fs-sm); background:var(--surface-2); color:var(--text); line-height:1.2; max-width:100%}
.sk-chip.is-sun{background:var(--streak-50); color:var(--streak-ink)}
.sk-chip.is-mint{background:var(--ok-50); color:var(--ok-ink)}
.sk-chip.is-coral{background:var(--bad-50); color:var(--bad-ink)}
.sk-chip.is-sky, .sk-chip.is-lilac{background:var(--brand-50); color:var(--brand-ink)}
.sk-top .sk-chip{background:var(--surface-2)}
.sk-top .sk-chip.is-sun{background:var(--streak-50)}
.sk-grape .sk-chip{background:rgba(255,255,255,.18); color:#FFFFFF}

.sk-bar{display:block; height:8px; background:var(--track); border-radius:var(--r-pill); overflow:hidden}
.sk-bar > span{display:block; height:100%; width:0; background:var(--brand); border-radius:var(--r-pill); transition:width .4s ease}
.sk-grape .sk-bar{background:rgba(255,255,255,.25)}
.sk-grape .sk-bar > span{background:#FFFFFF}
.sk-mint .sk-bar > span, .sk-crit .sk-bar > span{background:var(--ok)}

.sk-field{display:flex; flex-direction:column; gap:6px}
.sk-field label{font-weight:600; font-size:var(--fs-sm)}
.sk-input, .sk-textarea{width:100%; min-height:52px; padding:12px 14px; border:1.5px solid var(--line-c); border-radius:var(--r-sm); background:var(--surface);
  color:var(--text); font:inherit; font-size:var(--fs-base); transition:border-color .15s ease, box-shadow .15s ease}
.sk-input:hover, .sk-textarea:hover{border-color:var(--muted)}
.sk-textarea{min-height:140px; resize:vertical; line-height:1.55}
.sk-input:focus, .sk-textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-100)}
.sk-input:focus-visible, .sk-textarea:focus-visible{outline:3px solid transparent}
select.sk-input{appearance:auto}
.sk-hint{font-size:var(--fs-sm); color:var(--muted); font-weight:500}
.sk-error{background:var(--bad-50); color:var(--bad-ink); border-radius:var(--r-sm); padding:12px 14px; font-weight:600; font-size:var(--fs-sm)}
.sk-note{background:var(--warn-50); color:var(--warn-ink); border-radius:var(--r-sm); padding:12px 14px; font-weight:500; font-size:var(--fs-sm)}
.sk-ok{background:var(--ok-50); color:var(--ok-ink); border-radius:var(--r-sm); padding:12px 14px; font-weight:600; font-size:var(--fs-sm)}
[aria-invalid="true"]{border-color:var(--bad)!important}
/* checkboxes: the age box and the terms box at sign-up, the show-password toggle */
.sk-check{display:flex; gap:12px; align-items:flex-start; font-weight:500; min-height:44px; padding:4px 0; cursor:pointer}
.sk-check input, .sk-showpass input{appearance:none; -webkit-appearance:none; flex:0 0 auto; width:22px; height:22px; margin:1px 0 0; border:1.5px solid var(--muted);
  border-radius:6px; background:var(--surface); display:grid; place-content:center; cursor:pointer}
.sk-check input::before, .sk-showpass input::before{content:""; width:12px; height:12px; transform:scale(0); transition:transform .12s ease;
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background:#FFFFFF}
.sk-check input:checked, .sk-showpass input:checked{background:var(--brand); border-color:var(--brand)}
.sk-check input:checked::before, .sk-showpass input:checked::before{transform:scale(1)}
.sk-check input:focus-visible, .sk-showpass input:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.sk-check .ur{display:block; font-size:var(--fs-sm); color:var(--muted); line-height:2}
/* The age (2026-10-26): sign-up's month and year; the self-check list of a learner under 18. */
.sk-birth{border:0; margin:0; padding:0; min-width:0}
/* A fieldset's legend sits on its border by default: floated, it is an ordinary first line of the card (seen at 390px, 2026-10-26). */
.sk-birth legend, .sk-selfcheck legend{float:left; width:100%; padding:0; margin:0 0 8px; font-weight:600}
.sk-birth legend + *, .sk-selfcheck legend + *{clear:both}
.sk-selfcheck{min-width:0}
.sk-showpass{display:flex; align-items:center; gap:10px; min-height:44px; font-size:var(--fs-sm); font-weight:500; cursor:pointer}

/* choice cards (onboarding, quiz): real radios or buttons, the whole card is the target */
.sk-choices{display:grid; gap:10px; margin:0; padding:0; border:0; min-width:0}
.sk-choices legend{padding:0; margin-bottom:14px; font-family:var(--head); font-weight:700; font-size:var(--fs-xl); line-height:1.35; letter-spacing:-.01em}
.sk-choice{position:relative; display:flex; align-items:center; gap:14px; min-height:60px; padding:14px 16px; border:1.5px solid var(--line-c);
  border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-1); cursor:pointer; font-weight:600; min-width:0;
  transition:border-color .15s ease, background-color .15s ease}
.sk-choice:hover{border-color:var(--brand-100)}
.sk-choice > span:last-child{min-width:0}
.sk-choice input{position:absolute; opacity:0; width:1px; height:1px}
.sk-choice .dot{flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--muted); background:var(--surface)}
.sk-choice:has(input:checked), .sk-choice.is-on{border-color:var(--brand); background:var(--brand-50); color:var(--text); box-shadow:0 0 0 1px var(--brand)}
.sk-choice:has(input:checked) .dot, .sk-choice.is-on .dot{border-color:var(--brand); background:var(--brand); box-shadow:inset 0 0 0 4px var(--surface)}
.sk-choice:has(input:focus-visible){outline:3px solid var(--focus); outline-offset:2px}
.sk-choice.is-right{border-color:var(--ok); background:var(--ok-50); color:var(--text)}
.sk-choice.is-wrong{border-color:var(--bad); background:var(--bad-50); color:var(--text)}
.sk-steps{display:flex; gap:6px}
.sk-steps span{flex:1; height:6px; border-radius:var(--r-pill); background:var(--track)}
.sk-steps span.on{background:var(--brand)}

/* ---------- welcome ---------- */
.sk-hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding-top:8px}
.sk-hero .sk-bivi{width:64px; height:64px; padding:8px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-2)}
.sk-hero h1{font-size:var(--fs-4xl); line-height:1.12}
.sk-hero .sk-line{font-size:var(--fs-lg); font-weight:600; color:var(--brand-ink); max-width:30ch}
.sk-hero .by{font-weight:500; color:var(--muted); font-size:var(--fs-sm); margin-top:4px}
.sk-hero .sk-actions{display:flex; flex-direction:column; gap:10px; width:100%; max-width:360px; margin-top:4px}
.sk-hero > .sk-hint{max-width:36ch}
.sk-points{list-style:none; margin:0; padding:6px 16px; display:grid; gap:0; text-align:start; width:100%; max-width:420px}
.sk-points li{display:flex; gap:14px; align-items:center; font-weight:500; padding:12px 0; border-bottom:1px solid var(--line-c)}
.sk-points li:last-child{border-bottom:0}
.sk-points li > span:last-child{min-width:0}
/* The landing under the hero (SEO audit 2026-11-05, C2): the server's first paint and the welcome screen. */
.sk-hero .sk-lede{max-width:36ch; font-weight:500}
.sk-landing .sk-points{padding:0; max-width:none}
.sk-landing .sk-paths li{flex-direction:column; align-items:flex-start; gap:2px}
.sk-landing .sk-ur-intro h2{line-height:2}
.sk-landing .sk-faq h3{font-size:var(--fs-base); margin-bottom:4px}
.sk-ic{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--brand-50); color:var(--brand-ink)}
.sk-ic.is-ok{background:var(--ok-50); color:var(--ok-ink)} .sk-ic.is-streak{background:var(--streak-50); color:var(--streak-ink)}
.sk-ic.is-plain{background:var(--surface-2); color:var(--text)}

/* ---------- home: today's plan, stats, the next steps ---------- */
.sk-home{gap:18px}
.sk-hhead{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px}
.sk-hbrand{display:flex; align-items:center; gap:10px; min-width:0}
.sk-hbrand img{width:34px; height:34px; border-radius:10px; flex:0 0 auto}
.sk-homehead{font-size:var(--fs-xl); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sk-hstats{display:flex; gap:6px; flex:0 0 auto}
.sk-hstat{display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:4px 11px; border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--line-c); font-weight:700; font-size:var(--fs-sm)}
.sk-hstat.is-streak svg{color:var(--streak)} .sk-hstat.is-xp svg{color:var(--brand)}
.sk-greet{display:flex; flex-direction:column; gap:2px}
.sk-greet p{font-size:var(--fs-2xl); font-weight:750; letter-spacing:-.02em; line-height:1.2}
.sk-greet span{color:var(--muted); font-weight:500}
.sk-plan{gap:12px; padding:20px}
.sk-plan .sk-plantitle{font-size:var(--fs-xl); font-weight:700; line-height:1.3; overflow-wrap:anywhere}
.sk-plan .sk-planmeta{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:var(--fs-sm); font-weight:500; color:rgba(255,255,255,.9)}
.sk-plan .sk-btn{margin-top:4px}
.sk-homelevel{gap:12px}
.sk-homelvl{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.sk-homelvl span{font-weight:600; font-size:var(--fs-sm); color:var(--muted)}
.sk-homelvl b{font-size:var(--fs-lg); font-weight:700; line-height:1.25}
.sk-xpbar{height:10px}
.sk-homexp{font-size:var(--fs-sm); font-weight:500; color:var(--muted)}
.sk-homexp b{font-weight:700; color:var(--text)}
.sk-homemission{gap:12px}
.sk-homemtitle{font-weight:700; font-size:var(--fs-lg); line-height:1.3; overflow-wrap:anywhere}
.sk-mrow{display:flex; gap:14px; align-items:flex-start}
.sk-mrow > div{min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:4px}
.sk-homego{min-height:52px}
.sk-homerule{display:none}
.sk-hsec{font-size:var(--fs-lg); font-weight:700; margin-top:4px}
.sk-homelist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.sk-homecard{display:flex; align-items:center; gap:14px; min-height:76px; padding:14px 16px; background:var(--surface); color:var(--text);
  border:1px solid var(--line-c); border-radius:var(--r-lg); box-shadow:var(--sh-1); text-decoration:none; min-width:0;
  transition:box-shadow .15s ease, transform .1s ease}
a.sk-homecard:hover{box-shadow:var(--sh-2)}
a.sk-homecard:active{transform:scale(.99)}
.sk-homecard-b{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.sk-homecard-go{flex:0 0 auto; color:var(--muted)}
.sk-homecard.is-static{flex-wrap:wrap}
.sk-homecard.is-static .sk-btn{flex:1 1 100%}
.sk-homecard.is-done{background:var(--ok-50); border-color:transparent; box-shadow:none}
.sk-homecard-k{font-size:var(--fs-sm); font-weight:600; color:var(--muted)}
.sk-homecard-v{font-weight:700; font-size:var(--fs-md); line-height:1.3; overflow-wrap:anywhere}
.sk-homecard-s{font-size:var(--fs-sm); font-weight:500; color:var(--muted)}
.sk-homecard.is-done .sk-homecard-s, .sk-homecard.is-done .sk-homecard-k{color:var(--ok-ink)}
.sk-homecard-s small{font-size:var(--fs-sm)}

/* ---------- Learn: tracks as cards ---------- */
.sk-tracks{display:grid; gap:10px}
.sk-track{display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--text); background:var(--surface);
  border:1px solid var(--line-c); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:14px; min-height:76px; min-width:0;
  transition:box-shadow .15s ease, transform .1s ease}
a.sk-track:hover{box-shadow:var(--sh-2)}
a.sk-track:active{transform:scale(.99)}
.sk-track .ic{flex:0 0 auto; width:48px; height:48px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; background:var(--brand-50); color:var(--brand-ink); font-size:var(--fs-xl); font-weight:750}
.sk-track:nth-child(4n+2) .ic{background:var(--ok-50); color:var(--ok-ink)}
.sk-track:nth-child(4n+3) .ic{background:var(--streak-50); color:var(--streak-ink)}
.sk-track:nth-child(4n) .ic{background:var(--surface-2); color:var(--text)}
.sk-track .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}
.sk-track b{font-size:var(--fs-base); font-weight:650; line-height:1.3; overflow-wrap:anywhere}
.sk-track .sk-chip{min-height:26px; padding:2px 10px; font-size:var(--fs-sm)}
.sk-pathlist{margin:0; padding-inline-start:20px; display:grid; gap:12px}
.sk-pathlist li{font-weight:600}
.sk-pathlist .sk-bar{margin-top:8px}

/* ---------- track map: a vertical timeline of days ---------- */
.sk-path{list-style:none; margin:0; padding:4px 0 8px; display:flex; flex-direction:column; gap:10px; position:relative}
/* the rail runs through the centre of the 44px nodes (16px card padding + 22px) */
.sk-path::before{content:""; position:absolute; top:24px; bottom:24px; inset-inline-start:37px; width:2px; background:var(--line-c)}
.sk-path li{position:relative; min-width:0}
.sk-path li.sk-week{margin:12px 0 0; padding-inline-start:4px}
.sk-path li.sk-week span{position:relative; z-index:1; display:inline-block; background:var(--bg); color:var(--muted); padding:2px 8px 2px 0;
  font-weight:700; font-size:var(--fs-sm)}
.sk-stop{position:relative; z-index:1; display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text);
  min-height:72px; width:100%; padding:12px 16px; background:var(--surface); border:1px solid var(--line-c); border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.sk-node{flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--surface-2); color:var(--muted);
  font-weight:700; font-size:var(--fs-base); display:flex; align-items:center; justify-content:center; border:2px solid var(--line-c)}
.sk-node svg{width:20px; height:20px}
.sk-stop .lbl{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; font-weight:600; font-size:var(--fs-base); line-height:1.3}
.sk-stop .lbl > span:first-child{font-size:var(--fs-sm); color:var(--muted); font-weight:600}
.sk-stop .lbl small{font-size:var(--fs-sm); color:var(--muted); font-weight:500}
.sk-stop.is-done .sk-node{background:var(--ok); border-color:var(--ok); color:#FFFFFF}
.sk-stop.is-current{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--sh-2)}
.sk-stop.is-current .sk-node{background:var(--brand); border-color:var(--brand); color:#FFFFFF; box-shadow:0 0 0 5px var(--brand-100)}
.sk-stop.is-locked{background:var(--surface-2); box-shadow:none}
.sk-stop.is-locked .sk-node{background:var(--surface); color:var(--muted)}

/* ---------- unit flow ---------- */
.sk-flowbar{display:flex; align-items:center; gap:12px}
.sk-flowbar .sk-bar{flex:1}
.sk-close{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line-c); color:var(--text); text-decoration:none}
.sk-reader{padding:20px 18px}
.sk-lesson{font-size:var(--fs-md); line-height:1.7; max-width:68ch}
.sk-lesson > :first-child{margin-top:0}
.sk-lesson h2, .sk-lesson h3{margin:26px 0 10px; line-height:1.3}
.sk-lesson h2{font-size:var(--fs-2xl)} .sk-lesson h3{font-size:var(--fs-xl)}
.sk-lesson p, .sk-lesson ul, .sk-lesson ol, .sk-lesson pre, .sk-lesson .sk-codeblock{margin:0 0 16px}
.sk-lesson ul, .sk-lesson ol{padding-inline-start:24px}
.sk-lesson li{margin-bottom:8px}
.sk-lesson li::marker{color:var(--brand)}
.sk-lesson strong{font-weight:700}
.sk-lesson code{background:var(--surface-2); border-radius:6px; padding:1px 6px; font-size:.92em}
.sk-lesson pre{white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font-family:inherit; font-size:var(--fs-base); line-height:1.65}
.sk-lesson pre code{background:transparent; padding:0; color:inherit; font-size:inherit; font-family:inherit}
.sk-lesson blockquote{margin:0 0 16px; padding:12px 16px; border-inline-start:4px solid var(--brand); background:var(--brand-50); border-radius:var(--r-sm)}
/* a prompt example: a tidy block with its own Copy button */
.sk-codeblock{border:1px solid var(--brand-100); background:var(--brand-50); border-radius:var(--r); overflow:hidden}
.sk-codehead{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 6px 6px 14px; border-bottom:1px solid var(--brand-100)}
.sk-codehead span{font-size:var(--fs-sm); font-weight:700; color:var(--brand-ink); font-family:var(--sans)}
.sk-codehead .sk-btn{min-height:44px; font-family:var(--sans)}
.sk-codeblock pre{padding:14px 16px; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; margin:0}   /* a prompt wraps everywhere, not only inside .sk-lesson: the tool page and the prompt library clipped long lines (the block hides overflow) */
.sk-lesson[dir="rtl"]{font-family:var(--urdu); line-height:2.3; font-size:var(--fs-xl)}
.sk-lesson[dir="rtl"] h2, .sk-lesson[dir="rtl"] h3{font-family:var(--urdu); line-height:2}
.sk-lesson[dir="rtl"] blockquote{font-family:var(--sans); line-height:1.6; font-size:var(--fs-base)}
.sk-lesson[dir="rtl"] .sk-codeblock pre{line-height:2.5}
.sk-audio{width:100%; min-height:48px}
.sk-rubric{margin:0; padding-inline-start:22px}
.sk-rubric li{margin-bottom:6px; font-weight:500}
.sk-output{white-space:pre-wrap; background:var(--surface-2); border-radius:var(--r); padding:14px 16px; max-height:340px;
  overflow:auto; font-size:var(--fs-sm); line-height:1.6}
/* a result: the score large, out of what, and what is left today */
.sk-score{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px}
.sk-score > svg{flex:0 0 auto; width:44px; height:44px; padding:10px; border-radius:var(--r-sm); background:var(--surface)}
.sk-score b{font-size:var(--fs-4xl); font-weight:800; line-height:1; letter-spacing:-.02em}
.sk-score > span:not(.sk-small){font-weight:600; color:var(--muted)}
.sk-score .sk-small{flex:1 1 100%; color:var(--muted)}
.sk-score .sk-bar{flex:1 1 100%; margin-top:6px}
.sk-score .sk-eyebrow{flex:1 1 100%}
.sk-mint.sk-score > svg{color:var(--ok)} .sk-coral.sk-score > svg{color:var(--bad)} .sk-sun.sk-score > svg{color:var(--streak)}
.sk-mint.sk-score .sk-bar > span{background:var(--ok)} .sk-coral.sk-score .sk-bar > span{background:var(--bad)}
.sk-explain{font-size:var(--fs-sm); font-weight:500; margin-top:6px}
.sk-done{text-align:center; align-items:center}
.sk-xp{font-weight:800; font-size:56px; line-height:1; color:var(--brand); letter-spacing:-.03em}
.sk-xp small{font-size:var(--fs-xl); font-weight:700}
:root[data-theme="dark"] .sk-xp{color:#B9A4FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sk-xp{color:#B9A4FF}}
.sk-burst{position:relative; width:120px; height:120px; margin:0 auto}
.sk-burst i{position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:3px; background:var(--brand);
  animation:sk-pop 900ms ease-out forwards}
.sk-burst i:nth-child(3n+2){background:var(--ok); border-radius:50%}
.sk-burst i:nth-child(3n){background:var(--streak)}
@keyframes sk-pop{from{transform:translate(-50%,-50%) scale(.2); opacity:1}
  to{transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(1) rotate(160deg); opacity:0}}
.sk-burst .sk-bivi{position:absolute; inset:24px; width:72px; height:auto}

/* ---------- league, profile, paywall, certificate ---------- */
.sk-board{list-style:none; margin:0; padding:6px; display:grid; gap:2px; background:var(--surface); border:1px solid var(--line-c); border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.sk-board li{display:flex; align-items:center; gap:12px; min-height:56px; border-radius:var(--r-sm); padding:8px 10px; min-width:0}
.sk-board li + li{border-top:1px solid var(--line-c)}
.sk-board li.is-me{background:var(--brand-50); border-top-color:transparent}
.sk-board li.is-me + li{border-top-color:transparent}
.sk-board b{flex:0 0 auto; font-weight:700}
.sk-rank{flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--surface-2); color:var(--text);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm)}
.sk-board li:nth-child(1) .sk-rank{background:#FEF0C7; color:#93370D}
.sk-board li:nth-child(2) .sk-rank{background:#EAECF0; color:#344054}
.sk-board li:nth-child(3) .sk-rank{background:#FDE5D4; color:#9A3412}
.sk-board li.is-me .sk-rank{background:var(--brand); color:#FFFFFF}
.sk-toggle{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; cursor:pointer; font-weight:600}
.sk-toggle input{appearance:none; -webkit-appearance:none; flex:0 0 auto; width:52px; height:32px; border-radius:var(--r-pill);
  background:var(--track); position:relative; cursor:pointer; margin:0; transition:background-color .15s ease}
.sk-toggle input::after{content:""; position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; background:#FFFFFF;
  box-shadow:0 1px 3px rgba(20,17,43,.25); transition:left .15s ease}
.sk-toggle input:checked{background:var(--brand)}
.sk-toggle input:checked::after{left:24px}
.sk-seg{display:flex; gap:4px; flex-wrap:wrap; padding:4px; background:var(--surface-2); border-radius:14px; width:fit-content; max-width:100%}
.sk-seg button{min-height:44px; padding:0 16px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-weight:600; cursor:pointer}
.sk-seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--sh-1)}
.sk-badges{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.sk-badge{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:var(--fs-sm); font-weight:600; line-height:1.3; min-width:0}
.sk-plate{width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--streak-50); color:var(--streak-ink);
  font-size:26px}
.sk-badge:nth-child(4n+2) .sk-plate{background:var(--ok-50); color:var(--ok-ink)}
.sk-badge:nth-child(4n+3) .sk-plate{background:var(--brand-50); color:var(--brand-ink)}
.sk-badge:nth-child(4n) .sk-plate{background:var(--surface-2); color:var(--text)}
.sk-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.sk-list li{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line-c); border-radius:var(--r); padding:12px 14px; background:var(--surface); min-width:0}
.sk-list li.sk-ok{border-color:transparent; background:var(--ok-50); color:var(--text)}
.sk-list li.sk-error{border-color:transparent; background:var(--bad-50); color:var(--text)}
.sk-list li.sk-ok b{color:var(--ok-ink)} .sk-list li.sk-error b{color:var(--bad-ink)}
.sk-list li b{display:inline-flex; align-items:center; gap:6px}
/* A list row that is a stack (a portfolio item): its lines take the row's width and shrink with it,
   and a long link breaks instead of pushing the card past the screen (render check 2026-10-26). */
.sk-list li.sk-stack{align-items:stretch; justify-content:flex-start}
.sk-url, .sk-url a{min-width:0; overflow-wrap:anywhere}
/* A pill or a figure ("Self-checked", "8/10", "64/100") stays on one line. A row's pills sit in
   .sk-marks, which wraps them as whole pills, never wider than its widest pill. */
.sk-nw{white-space:nowrap}
.sk-chip.sk-nw{flex:0 0 auto}
.sk-marks{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; flex:0 1 auto}
.sk-between > .sk-marks, .sk-list li > .sk-marks{min-width:min-content}
.sk-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700; font-size:var(--fs-xl); letter-spacing:.06em;
  background:var(--surface); border-radius:var(--r-sm); padding:8px 14px; overflow-wrap:anywhere; width:fit-content; max-width:100%}
.sk-price{font-weight:800; font-size:var(--fs-4xl); line-height:1.1; letter-spacing:-.02em}
.sk-price small{font-size:var(--fs-lg)}
.sk-ticks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.sk-ticks li{display:flex; gap:10px; align-items:flex-start; font-weight:500}
.sk-ticks li svg{flex:0 0 auto; width:20px; height:20px; padding:3px; margin-top:1px; border-radius:50%; background:var(--ok-50); color:var(--ok-ink)}
.sk-pay{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.sk-cert{background:#FFFFFF; color:#14112B; border:1px solid #E6E3F0; border-radius:var(--r-lg); padding:26px 20px; text-align:center;
  display:flex; flex-direction:column; gap:10px; box-shadow:var(--sh-2); position:relative; overflow:hidden}
.sk-cert::before{content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,#6C3BFF,#9E7BFF)}
.sk-cert .sk-cert-title{font-weight:750; font-size:var(--fs-xl); line-height:1.25}
.sk-cert .sk-cert-name{font-weight:800; font-size:var(--fs-3xl); color:#4B1FD1; overflow-wrap:anywhere}
.sk-cert .sk-cert-fine{font-size:var(--fs-sm); font-weight:500; color:#5E5A73}
.sk-cert .sk-chip{align-self:center}
.sk-cert .sk-qrslot{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:8px}
.sk-cert .sk-qr{width:120px; height:120px; padding:6px; background:#FFFFFF; border:1px solid #E6E3F0; border-radius:8px}
.sk-avatar{flex:0 0 auto; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-ink); font-weight:750; font-size:var(--fs-2xl)}
.sk-phead{display:flex; align-items:center; gap:14px; min-width:0}
.sk-phead > div{min-width:0}
.sk-stats{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.sk-stats .sk-chip{flex-direction:column; align-items:flex-start; gap:2px; border-radius:var(--r); padding:10px 12px; min-height:64px; font-size:var(--fs-sm); white-space:normal}
.sk-stats .sk-chip svg{width:18px; height:18px}

/* ---------- the loop: watch, try, level up, build ---------- */
.sk-wrap{flex-wrap:wrap}
.sk-h3{font-size:var(--fs-lg)}
.sk-pre{white-space:pre-line}
/* WATCH: our own poster; the YouTube frame is created only on tap (more.js wireVideo). Sized to the width. */
.sk-video{position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:#14112B; box-shadow:var(--sh-2)}
.sk-video-poster{position:absolute; inset:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border:0; background:linear-gradient(140deg,#7B4DFF 0%,#3A1DB0 100%); color:#FFFFFF; cursor:pointer; font-weight:650; padding:12px; text-align:center}
.sk-video-poster small{font-weight:500; opacity:.9; font-size:var(--fs-sm)}
.sk-video-play{width:64px; height:64px; border-radius:50%; background:#FFFFFF; color:#4B1FD1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sk-video-play svg{width:28px; height:28px; stroke:#4B1FD1!important; fill:#4B1FD1}
.sk-video-frame{position:absolute; inset:0; width:100%; height:100%; border:0; background:#14112B}
/* one-tap choices (the AI IQ test) */
.sk-taps button.sk-choice{width:100%; text-align:start; color:var(--text); font:inherit; font-weight:600}
.sk-taps button.sk-choice.is-on{color:var(--text)}
.sk-taps.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sk-taps.is-grid button.sk-choice{min-height:72px; align-items:flex-start}
.sk-obbar{display:flex; align-items:center; gap:12px}
.sk-obbar .sk-bar{flex:1 1 auto}
.sk-obbar .sk-chip{flex:0 0 auto}
.sk-obhead h1{font-size:var(--fs-lg); color:var(--muted); font-weight:600; letter-spacing:0}
.sk-obhead .ur-kicker{font-size:var(--fs-sm)}
/* LEVEL UP: a small pop; still and readable with reduced motion. */
.sk-levelup{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; animation:sk-lvl 700ms ease-out both}
.sk-levelup b{font-size:var(--fs-2xl); font-weight:800; line-height:1.15}
@keyframes sk-lvl{0%{transform:scale(.6); opacity:0} 70%{transform:scale(1.04); opacity:1} 100%{transform:scale(1)}}
.sk-card.is-later{opacity:.75}
.sk-portfolio-work{white-space:normal; overflow-wrap:anywhere}
details.sk-card summary{min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:600}

/* loading */
.sk-skel{border-radius:var(--r-lg); background:var(--track); min-height:84px; animation:sk-pulse 1.2s ease-in-out infinite}
@keyframes sk-pulse{50%{opacity:.55}}
.sk-spin{display:inline-block; width:18px; height:18px; border:2.5px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:sk-rot .7s linear infinite}
@keyframes sk-rot{to{transform:rotate(360deg)}}

@media (min-width:600px){
  .sk-main{padding-top:28px}
}

/* the game: mission briefs, the boss timer, score bars, the share card */
.sk-facts{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:0; font-size:var(--fs-sm)}
.sk-facts dt{font-weight:600; color:var(--muted)}
.sk-facts dd{margin:0; font-weight:500}
.sk-grape .sk-facts dt{color:rgba(255,255,255,.85)}
.sk-timer b{font-size:var(--fs-4xl); font-weight:800; line-height:1}
.sk-rankcard b{font-size:var(--fs-xl); line-height:1.3}
.sk-crit{gap:12px}
.sk-crit li{list-style:none}
.sk-missioncard{text-decoration:none; color:inherit; transition:box-shadow .15s ease}
a.sk-card:hover{box-shadow:var(--sh-2)}
.sk-missioncard b{font-size:var(--fs-md); font-weight:700}

/* the five tiers: side by side on a wide screen, stacked on a phone */
.sk-main.is-wide{max-width:1120px}
.sk-tiers{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start}
.sk-tier{display:flex; flex-direction:column; gap:12px}
.sk-tier.is-current{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--sh-2); background:var(--surface)}
.sk-tier h2{font-size:var(--fs-xl)}
.sk-tier .sk-price{font-size:var(--fs-3xl)}
.sk-tier .sk-ticks{flex:1 1 auto; align-content:start}
.sk-tier .sk-ticks li{font-size:var(--fs-sm)}
/* One package, its periods (owner, 2026-11-03): each a small card with its own price and button. */
.sk-offers{display:grid; gap:10px}
.sk-offer{display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--line-c); border-radius:var(--r-sm); background:var(--surface)}
.sk-tier .sk-offer .sk-price{font-size:var(--fs-2xl)}
.sk-was{color:var(--muted); font-weight:600; font-size:var(--fs-lg); text-decoration:line-through; margin-inline-start:8px}
/* the comparison (owner, 2026-10-25): every function of a plan, from GET plan's matrix. Included or
   limited: a green tick, the name and the plan's own words; not included: a muted cross; coming soon:
   a chip, said as such. The learner's own plan carries the brand ring (is-current above). */
.sk-feats{gap:8px}
.sk-feats li{align-items:flex-start}
.sk-feats li > span{display:flex; flex-direction:column; gap:2px; min-width:0}
.sk-feats li b{font-weight:650}
/* "18+" on a live AI line, for a learner under 18 (GET me live_ai: false; AgeGate on the server) */
.sk-age18{display:inline-block; margin-inline-start:6px; padding:0 7px; border-radius:var(--r-pill); background:var(--streak-50); color:var(--streak-ink);
  font-size:var(--fs-xs); font-weight:700; line-height:1.6; white-space:nowrap; vertical-align:1px}
.sk-fd{color:var(--muted); font-weight:450; font-size:var(--fs-sm); overflow-wrap:anywhere}
.sk-ticks li.sk-fgroup{padding-top:6px}
.sk-ticks li.sk-fgroup:first-child{padding-top:0}
.sk-fno, .sk-fsoon{gap:8px; border-top:1px solid var(--line-c); padding-top:12px}
.sk-noes{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.sk-noes li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:var(--fs-sm); font-weight:500}
.sk-noes li svg{flex:0 0 auto; width:20px; height:20px; padding:4px; border-radius:50%; background:var(--surface-2); color:var(--muted)}
.sk-fsoon .sk-row{flex-wrap:wrap; gap:6px}
.sk-homecard.is-locked .sk-homecard-v{color:var(--muted)}
@media (min-width:760px){
  .sk-tiers{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
}
/* "Delete my account": the confirmation step and the public pages */
.sk-danger{border:1px solid var(--bad)}
.sk-doc h2{font-size:var(--fs-xl)}
.sk-doc ul{margin:0; padding-inline-start:22px; display:grid; gap:6px}
.sk-doc li{font-weight:500}

/* the terms gate: a calm full-screen prompt when the learner's accepted terms are out of date */
.sk-gate{position:fixed; inset:0; z-index:60; background:var(--bg); overflow-y:auto; display:flex; align-items:center; justify-content:center;
  padding:calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
.sk-gate-in{width:100%; max-width:440px; text-align:center; align-items:center}
.sk-gate-in img{width:56px; height:56px; border-radius:16px; box-shadow:var(--sh-2)}
.sk-gate-in h1{font-size:var(--fs-2xl)}
.sk-gate-in p{color:var(--muted); line-height:1.6}
body.has-gate{overflow:hidden}

/* The AI tool library (P0 audit, 2026-10-25): the list, a tool's page, the lesson's tool links,
   and Home's reason line. Cards and chips are the app's own; only the pieces below are new. */
.sk-toolrow .ic, .sk-toolmark{font-weight:800; font-size:var(--fs-xl); line-height:1}
.sk-toolwhat{font-size:var(--fs-sm); color:var(--muted); font-weight:500; line-height:1.45; overflow-wrap:anywhere}
.sk-toolhead{display:flex; align-items:center; gap:12px; min-width:0}
.sk-toolhead h1{overflow-wrap:anywhere}
.sk-toolmark{flex:0 0 auto; width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-ink)}
.sk-toollist{margin:0; padding-inline-start:22px; display:grid; gap:8px; line-height:1.55}
.sk-toollist li{overflow-wrap:anywhere}
.sk-tool .sk-codeblock pre{white-space:pre-wrap; overflow-wrap:anywhere; margin:0}
.sk-toolunit{display:flex; flex-direction:column; gap:2px; min-height:44px; justify-content:center; color:var(--text); text-decoration:none; min-width:0}
.sk-toolunit span{font-weight:600; overflow-wrap:anywhere}
.sk-toolunit small{color:var(--muted); font-size:var(--fs-sm)}
.sk-toollinks{gap:8px}
.sk-toolchip{min-height:44px; text-decoration:none}
.sk-plan .sk-planreason{margin:0; font-size:var(--fs-sm); line-height:1.4}

/* Real hands-on labs (2026-10-25): the AI Lab tab (a chat with a real model, templates, history) and a
   unit's lab session (runs, then a grading card in three parts). The app's own tokens; only the pieces
   below are new. The input stays in reach: sticky above the tab bar, or at the bottom of a unit. */
.sk-labmark{flex:0 0 auto; width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18)}
.sk-labhero p{line-height:1.5}
.sk-labdoor .sk-toolwhat{display:block}
.sk-tpldrawer > summary{display:flex; align-items:center; gap:8px; min-height:44px; font-weight:700; cursor:pointer; list-style:none}
.sk-tpldrawer > summary::-webkit-details-marker{display:none}
.sk-tpldrawer > summary::after{content:""; margin-inline-start:auto; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg)}
.sk-tpldrawer[open] > summary::after{transform:rotate(-135deg)}
.sk-tplbody{margin-top:12px}
.sk-seg button.ur{font-family:var(--urdu); line-height:1.6}
.sk-labchips{display:flex; flex-wrap:wrap; gap:8px}
.sk-labchip{min-height:44px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--line-c); background:var(--surface); color:var(--text);
  font:inherit; font-weight:600; font-size:var(--fs-sm); cursor:pointer}
.sk-labchip[aria-pressed="true"]{background:var(--brand-50); color:var(--brand-ink); border-color:var(--brand-100)}
.sk-tpls{display:grid; gap:8px}
.sk-tpl{display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; min-height:44px; padding:12px 14px; text-align:start;
  border-radius:var(--r); border:1px solid var(--line-c); background:var(--surface-2); color:var(--text); font:inherit; cursor:pointer}
.sk-tpl:hover{border-color:var(--brand-100)}
.sk-tpl b{font-weight:700}
.sk-tpl > span{font-size:var(--fs-sm); color:var(--muted); font-weight:500; max-width:100%; overflow:hidden; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.sk-chat{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; min-width:0}
.sk-msg{display:flex; gap:8px; align-items:flex-start; min-width:0; scroll-margin-bottom:220px}
.sk-msg.is-me{justify-content:flex-end}
.sk-msg.is-note{justify-content:center}
.sk-msg.is-note > *{max-width:100%}
.sk-bubble{max-width:86%; padding:12px 14px; border-radius:18px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; min-width:0}
.sk-msg.is-me .sk-bubble{background:var(--brand); color:var(--on-brand); border-end-end-radius:6px}
.sk-msg.is-me.is-blocked .sk-bubble{background:var(--surface-2); color:var(--muted)}
.sk-msg.is-ai .sk-msgbody{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px}
.sk-msg.is-ai .sk-bubble{max-width:100%; background:var(--surface); color:var(--text); border:1px solid var(--line-c); box-shadow:var(--sh-1); border-end-start-radius:6px}
.sk-bubble .ur{line-height:2.2}
/* an AI answer or feedback, rendered (more.js answerHtml; UAT 2026-11-05, M1): paragraphs, lists, tables.
   Normal wrapping inside the pre-wrap bubble and output boxes; a wide table scrolls inside its own box,
   never the page. */
.sk-answer{white-space:normal; overflow-wrap:anywhere; min-width:0}
.sk-answer > :first-child{margin-top:0}
.sk-answer > :last-child{margin-bottom:0}
.sk-answer p, .sk-answer ul, .sk-answer ol, .sk-answer pre, .sk-answer blockquote, .sk-answer .sk-tablewrap{margin:0 0 10px}
.sk-answer ul, .sk-answer ol{padding-inline-start:22px}
.sk-answer li{margin-bottom:4px}
.sk-answer strong{font-weight:700}
.sk-answer code{background:var(--surface-2); border-radius:6px; padding:1px 5px; font-size:.92em}
.sk-answer pre{white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface-2); border-radius:var(--r-sm); padding:10px 12px; font-family:inherit}
.sk-answer pre code{background:transparent; padding:0; font-size:inherit}
.sk-answer blockquote{padding:8px 12px; border-inline-start:4px solid var(--brand); background:var(--brand-50); border-radius:var(--r-sm)}
.sk-answer hr{border:0; border-top:1px solid var(--line-c); margin:10px 0}
.sk-answer[dir="rtl"]{font-family:var(--urdu); line-height:2.2}
.sk-tablewrap{max-width:100%; overflow-x:auto; border-radius:var(--r-sm)}
.sk-table{border-collapse:collapse; font-size:var(--fs-sm); line-height:1.45; width:100%}
.sk-table th, .sk-table td{border:1px solid var(--line-c); padding:6px 8px; text-align:start; vertical-align:top; overflow-wrap:normal; word-break:normal; min-width:72px}
.sk-table th{background:var(--surface-2); font-weight:700}
.sk-aimark{flex:0 0 auto; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--brand-50); color:var(--brand-ink)}
.sk-msgacts{display:flex; flex-wrap:wrap; gap:6px}
.sk-msgacts .sk-btn{min-height:44px; padding:0 12px; background:transparent; box-shadow:none; color:var(--muted)}
.sk-msgacts .sk-btn:hover{color:var(--text)}
/* every AI-written block with its Report control (more.js aiBlock; owner's Play audit 2026-11-05, item 4) */
.sk-aiblock{display:flex; flex-direction:column; gap:6px; min-width:0}
.sk-typing{display:inline-flex; align-items:center; gap:8px; color:var(--muted)}
.sk-composer{position:sticky; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:6; display:flex; gap:8px; align-items:flex-end; padding:8px;
  background:var(--surface); border:1.5px solid var(--line-c); border-radius:var(--r-lg); box-shadow:var(--sh-2)}
.sk-composer:focus-within{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-100)}
.sk-composer .sk-labin{flex:1 1 auto; min-width:0; min-height:52px; max-height:220px; resize:none; border:0; padding:12px; box-shadow:none; background:transparent}
.sk-composer .sk-labin:focus{box-shadow:none}
.sk-composer .sk-send{flex:0 0 auto; width:52px; padding:0; border-radius:var(--r)}
.sk-composer.is-session{bottom:calc(8px + env(safe-area-inset-bottom)); flex-direction:column; align-items:stretch; padding:12px}
.sk-composer.is-session .sk-label{font-size:var(--fs-sm)}
.sk-composer.is-session .sk-labin{border:1.5px solid var(--line-c); background:var(--surface); min-height:96px}
.sk-composer.is-session .sk-labin:focus{border-color:var(--brand)}
.sk-composerbar{display:flex; flex-wrap:wrap; gap:8px}
.sk-composerbar .sk-btn{flex:1 1 130px}
.sk-runs{min-height:32px}
.sk-histrow .body{min-width:0}
.sk-histrow b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}
.sk-histrow[aria-current="page"]{border-color:var(--brand-100); background:var(--brand-50)}
.sk-grade .sk-subscore{display:flex; flex-direction:column; gap:6px}
.sk-grade .sk-subscore b{font-weight:800}
.sk-grade .sk-subscore .sk-chip{min-height:24px; padding:2px 8px; margin-inline-start:6px}
.sk-reportbox .sk-row .sk-btn{min-height:44px}

/* ---------- the simple app (owner, 2026-10-27: "make the easy for students simple", like Coursiv) ----------
   Aaj: a greeting, the course and its bar, ONE big card; Courses: one card per course; a lesson as
   short screens with one big AGLA; the tap quiz; Mubarak. One primary action per screen, tap targets
   of 48px and more, the same tokens as everything else. */
.sk-btn.is-big{min-height:60px; font-size:var(--fs-lg); font-weight:750; border-radius:var(--r)}
.sk-aaj{gap:20px}
.sk-aajhead{display:flex; align-items:center; justify-content:space-between; gap:12px}
.sk-aajhi{font-size:var(--fs-2xl); line-height:1.2; overflow-wrap:anywhere}
.sk-flame{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:6px 14px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-c); color:var(--muted); font-weight:750; font-size:var(--fs-md)}
.sk-flame.is-lit{background:var(--streak-50); border-color:transparent; color:var(--streak-ink)}
.sk-flame b{font-variant-numeric:tabular-nums}
/* Coursiv's Mon to Sun streak row (COURSIV_GAP C2): a tick per day with a lesson, a ring on today. */
.sk-week{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; margin:0; padding:0; list-style:none}
.sk-wkday{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0}
.sk-wkname{font-size:var(--fs-xs, 12px); font-weight:650; color:var(--muted); letter-spacing:.02em}
.sk-wkdot{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:var(--track); color:var(--white)}
.sk-wkday.is-done .sk-wkdot{background:var(--streak)}
.sk-wkday.is-today .sk-wkdot{background:var(--surface); box-shadow:inset 0 0 0 2px var(--streak)}
.sk-wkday.is-today .sk-wkname{color:var(--streak-ink)}
.sk-wkday.is-ahead .sk-wkdot{opacity:.55}
/* The streak moment before Mubarak. */
.sk-streakup{gap:18px; padding-block:12px}
.sk-streakup .sk-week{width:100%; max-width:360px}
.sk-bigflame{display:inline-flex; align-items:center; justify-content:center; width:120px; height:120px; border-radius:50%;
  background:var(--streak-50); color:var(--streak)}
@media (prefers-reduced-motion:no-preference){.sk-bigflame{animation:sk-flamein .5s cubic-bezier(.2,.9,.3,1.3) both}}
@keyframes sk-flamein{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}
.sk-aajcourse{display:flex; flex-direction:column; gap:10px; min-height:48px; padding:14px 16px; border-radius:var(--r); background:var(--surface);
  border:1px solid var(--line-c); box-shadow:var(--sh-1); color:var(--text); text-decoration:none}
.sk-aajcourse b{font-weight:700; overflow-wrap:anywhere}
/* Coursiv's program card on Home (COURSIV_GAP C3): one tile per live course. */
.sk-program{gap:12px}
.sk-progtiles{display:flex; gap:10px; margin:0; padding:0 0 4px; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain}
.sk-progtiles > li{flex:0 0 156px; scroll-snap-align:start; min-width:0}
.sk-progtile{display:flex; flex-direction:column; gap:6px; height:100%; min-width:0; min-height:48px; padding:12px; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--text); text-decoration:none}
.sk-progtile b{font-weight:700; line-height:1.3; overflow-wrap:anywhere}
.sk-progtile .ic{font-size:22px; line-height:1}
.sk-progtile.is-done{background:var(--ok-50)}
.sk-progtile .sk-chip{align-self:flex-start}
.sk-aajcourse .sk-chip{flex:0 0 auto}
.sk-today{padding:24px 20px; gap:14px}
.sk-today .sk-eyebrow{text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.sk-today .sk-plantitle{font-size:var(--fs-2xl); line-height:1.25}
.sk-chsoon{display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--r); background:var(--surface-2); color:var(--muted);
  font-weight:600; font-size:var(--fs-sm)}
.sk-chsoon svg{flex:0 0 auto}
.sk-nw{white-space:nowrap}
.sk-center{justify-content:center}

/* Courses */
.sk-courselist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.sk-course{display:flex; gap:14px; align-items:center; min-height:88px; padding:16px; border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--line-c); box-shadow:var(--sh-1); color:var(--text); text-decoration:none}
a.sk-course:hover{box-shadow:var(--sh-2)}
.sk-course .ic{flex:0 0 auto; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-ink); font-weight:800; font-size:var(--fs-lg)}
.sk-course .body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px}
.sk-course b{font-size:var(--fs-md); font-weight:700; line-height:1.3; overflow-wrap:anywhere}
.sk-course small{font-size:var(--fs-sm)}
.sk-course.is-soon{opacity:.62; box-shadow:none; background:var(--surface-2)}
.sk-course.is-soon .ic{background:var(--surface); color:var(--muted)}
.sk-course.is-soon{min-height:72px}
.sk-course.is-soon .body{gap:6px; align-items:flex-start}

/* Profile's More list */
.sk-more{padding:0}
details.sk-card.sk-more > summary{display:flex; flex-direction:column; align-items:flex-start; text-align:start; gap:2px; min-height:56px; justify-content:center; padding:14px 48px 14px 18px; cursor:pointer; list-style:none}
.sk-more summary::-webkit-details-marker{display:none}
.sk-more summary::after{content:'+'; position:absolute; inset-inline-end:20px; font-size:var(--fs-xl); color:var(--muted)}
.sk-more{position:relative}
.sk-more[open] summary::after{content:'\2212'}
.sk-morelist{list-style:none; margin:0; padding:0 8px 8px}
.sk-morelist a{display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 10px; border-radius:var(--r-sm); color:var(--text); text-decoration:none; font-weight:600}
.sk-morelist a:hover{background:var(--surface-2)}
.sk-morelist .sk-ic{width:36px; height:36px}
.sk-morelist a > svg{color:var(--muted)}

/* A lesson as screens */
.sk-screens{gap:18px; min-height:calc(100vh - 64px)}
.sk-scrbar{display:flex; align-items:center; gap:12px}
.sk-scrbar .sk-bar{flex:1 1 auto}
.sk-scrbar .sk-close{width:48px; height:48px}
.sk-scrn{flex:0 0 auto; font-size:var(--fs-sm); font-weight:650; color:var(--muted); font-variant-numeric:tabular-nums}
.sk-screen{display:flex; flex-direction:column; gap:14px; padding:22px 20px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-1)}
.sk-scrtitle{font-size:var(--fs-2xl); line-height:1.25; overflow-wrap:anywhere}
.sk-screen .sk-lesson{font-size:var(--fs-lg); line-height:1.65}
.sk-screen .sk-lesson > :last-child{margin-bottom:0}
.sk-screen[dir="rtl"] .sk-lesson, .sk-screen[dir="rtl"] .sk-scrtitle{font-family:var(--urdu); line-height:2.1}
.sk-listen{align-self:flex-start; min-height:48px; border-radius:var(--r-pill); background:var(--brand-50); color:var(--brand-ink); border-color:transparent; box-shadow:none}
/* The track bar (owner 2026-11-05): 10 s back, Suniye, 10 s forward; the bar with the time reached and the length */
.sk-player{display:flex; flex-direction:column; gap:8px; width:100%}
.sk-player-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sk-player-row .sk-listen{align-self:auto; flex:1 1 auto; justify-content:center}
.sk-skip{flex:0 0 auto; min-height:48px; min-width:64px; padding:0 12px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--text); border-color:transparent; box-shadow:none; font-variant-numeric:tabular-nums; direction:ltr}
.sk-trackbar{display:flex; flex-direction:column; gap:2px; width:100%; direction:ltr}
.sk-seek{width:100%; min-height:32px; margin:0; accent-color:var(--brand); cursor:pointer}
.sk-seek:disabled{cursor:default; opacity:.5}
.sk-tracktime{display:flex; justify-content:space-between; color:var(--muted); font-size:var(--fs-sm); font-variant-numeric:tabular-nums}
.sk-scrnav{flex-direction:row; align-items:stretch; margin-top:auto}
.sk-scrnav .is-big{flex:1 1 auto}
.sk-prev{flex:0 0 auto; width:60px; min-height:60px; padding:0; border-radius:var(--r)}

/* The tap quiz: right in green, wrong in red, each with its mark */
.sk-quiz .sk-choice{width:100%; text-align:start; cursor:pointer; background:var(--surface); font:inherit; color:var(--text)}
.sk-quiz .sk-choice > span:first-child{flex:1 1 auto; min-width:0}
.sk-quiz .sk-choice[disabled]{cursor:default; opacity:1}
.sk-mark{flex:0 0 auto; display:inline-flex}
.sk-choice.is-right .sk-mark{color:var(--ok-ink)} .sk-choice.is-wrong .sk-mark{color:var(--bad-ink)}
.sk-choice.is-right, .sk-choice.is-on.is-right{border-color:var(--ok); background:var(--ok-50); box-shadow:0 0 0 1px var(--ok)}
.sk-choice.is-wrong, .sk-choice.is-on.is-wrong{border-color:var(--bad); background:var(--bad-50); box-shadow:0 0 0 1px var(--bad)}
.sk-done{align-items:center; text-align:center}
.sk-done .sk-actionbar{align-self:stretch}

.sk-rubricbox summary{display:flex; align-items:center; min-height:48px; cursor:pointer; color:var(--brand-ink); text-decoration:underline}
.sk-rubricbox[open] summary{text-decoration:none}

/* Motion is decoration here: everything still reads with it off. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .sk-burst i{display:none}
}

/* The five tabs (owner decision 2026-10-27): Learn's finder, the Challenges tab's locked rows, the
   tab labels in Urdu script for an Urdu-script learner. */
.sk-finder{gap:12px}
.sk-filters{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px}
.sk-filter{display:flex; flex-direction:column; gap:4px; min-width:0}
.sk-filter .sk-input{min-height:44px}
.sk-homecard.is-locked{background:var(--surface-2); box-shadow:none}
.sk-homecard.is-locked .sk-ic{color:var(--muted)}
.sk-chtab .sk-stop .lbl > span:first-child{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sk-nav a > span.ur:last-child{font-family:var(--urdu); line-height:1.4; font-size:var(--fs-sm)}