/* ============================================================
   RAAH
   راہ — "the path". The visual idea is a route with milestones,
   so the one loud element on the page is the path itself and
   everything around it stays quiet.

   Light: pale sage paper, indigo ink. Easier than pure white on
   the cheap LCD phone screens most students are holding.
   Dark:  the same indigo, deepened, so the palette is one family
   in two lights rather than two unrelated designs.
   ============================================================ */
:root{
  --ink:#121B2E; --ink-2:#3A4A66; --ink-3:#6C7B93;
  --page:#EDEFE9; --page-2:#E5E8E0; --card:#FFFFFF;
  --jade:#0E6B52; --jade-soft:#E1EDE7;
  --marigold:#E8A32B; --marigold-soft:#FBEED3; --marigold-ink:#8A5C05;
  --clay:#B24A3C; --clay-soft:#F6E4E1;
  --line:#D5DACF; --line-2:#E7EAE3;
  --shadow:0 6px 24px rgba(18,27,46,.16);
  --on-accent:#FFFFFF;
  --r-s:6px; --r-m:12px; --r-l:20px;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Bricolage Grotesque",var(--sans);
  --urdu:"Noto Nastaliq Urdu",serif;
  color-scheme:light;
}
[data-theme="dark"]{
  --ink:#E7EBE4; --ink-2:#B3BECE; --ink-3:#7D8BA1;
  --page:#0E131C; --page-2:#141A25; --card:#171E2A;
  --jade:#54B894; --jade-soft:#16332A;
  --marigold:#E8A32B; --marigold-soft:#372C12; --marigold-ink:#F0C169;
  --clay:#E08476; --clay-soft:#3A211D;
  --line:#28313F; --line-2:#1E2632;
  --shadow:0 6px 24px rgba(0,0,0,.5);
  --on-accent:#0E131C;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease,color .2s ease;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:4px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:11px 18px;border-radius:999px;font-weight:600;font-size:15px;
  background:var(--ink);color:var(--page);transition:transform .12s ease,filter .15s ease}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);filter:none}
.btn.jade{background:var(--jade);color:var(--on-accent)}
.btn.danger{background:transparent;color:var(--clay);box-shadow:inset 0 0 0 1.5px var(--clay)}
.btn.small{padding:7px 13px;font-size:13.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:3px 10px;border-radius:999px;background:var(--line-2);color:var(--ink-2)}
.pill.live{background:var(--marigold-soft);color:var(--marigold-ink)}
.pill.done{background:var(--jade-soft);color:var(--jade)}
.pill.warn{background:var(--clay-soft);color:var(--clay)}
.muted{color:var(--ink-3)}
.small{font-size:13.5px}

/* theme toggle: shows the mode you'd switch to, not the one you're in */
.themebtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);color:var(--ink-2);flex:none}
.themebtn:hover{border-color:var(--ink-3);color:var(--ink)}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .themebtn .moon,:root:not([data-theme="dark"]) .themebtn .sun{display:none}

/* ---------- landing ---------- */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--page) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:14px;height:66px}
.mark{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.mark b{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:.01em}
.mark span{font-family:var(--urdu);font-size:19px;color:var(--jade);line-height:1;position:relative;top:2px}
.navlinks{display:flex;gap:22px;margin-left:auto;font-size:14.5px;font-weight:500}
.navlinks a{text-decoration:none;color:var(--ink-2)}
.navlinks a:hover{color:var(--ink)}
@media(max-width:900px){.navlinks{display:none}.topbar .wrap{gap:10px}.mark{margin-right:auto}}

.hero{padding:64px 0 8px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.hero h1{font-size:clamp(38px,6.4vw,66px);max-width:12ch}
.hero .lede{margin-top:22px;font-size:19px;line-height:1.5;max-width:46ch;color:var(--ink-2)}
.hero .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hero .foot{margin-top:26px;font-size:14px;color:var(--ink-3);max-width:44ch}
@media(max-width:900px){.hero{padding-top:34px}.hero-grid{grid-template-columns:1fr;gap:34px}}

.path svg{width:100%;height:auto;overflow:visible}
.path .track{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round}
.path .walked{fill:none;stroke:var(--jade);stroke-width:2.5;stroke-linecap:round;
  animation:walk 2.4s .35s cubic-bezier(.4,0,.2,1) forwards}
@keyframes walk{to{stroke-dashoffset:0}}
.node circle{fill:var(--card);stroke:var(--ink);stroke-width:2}
.node.on circle{fill:var(--jade);stroke:var(--jade)}
.node.now circle{fill:var(--marigold);stroke:var(--marigold)}
.node text.n{font-family:var(--display);font-weight:700;font-size:13px;fill:var(--ink)}
.node.on text.n,.node.now text.n{fill:var(--on-accent)}
.node text.l{font-family:var(--sans);font-weight:600;font-size:14.5px;fill:var(--ink)}
.node text.s{font-family:var(--sans);font-size:12.5px;fill:var(--ink-3)}

.stripe{margin-top:56px;border-block:1px solid var(--line);background:var(--page-2)}
.stripe .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.stripe div{padding:22px 26px 22px 0}
.stripe div + div{padding-left:26px;border-left:1px solid var(--line)}
.stripe b{font-family:var(--display);font-size:15px;display:block;margin-bottom:3px}
.stripe p{font-size:14px;color:var(--ink-2);max-width:34ch}
@media(max-width:760px){.stripe .wrap{grid-template-columns:1fr}
  .stripe div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

.sec{padding:72px 0}
.sec h2{font-size:clamp(27px,4vw,40px);max-width:18ch}
.sec .sub{margin-top:14px;max-width:56ch;color:var(--ink-2);font-size:17px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:40px}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:28px}}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:26px}
.feat h3{font-size:20px;margin-bottom:9px}
.feat p{color:var(--ink-2);font-size:15px}
.feat ul{margin:14px 0 0;padding-left:18px;color:var(--ink-2);font-size:15px}
.feat li{margin-bottom:5px}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin-top:38px}
.roles article{background:var(--card);padding:26px 22px}
.roles h3{font-size:18px}
.roles ul{margin:12px 0 0;padding-left:17px;font-size:14.5px;color:var(--ink-2)}
.roles li{margin-bottom:4px}
@media(max-width:820px){.roles{grid-template-columns:1fr}}
.callout{background:var(--ink);color:var(--page);border-radius:var(--r-l);padding:36px}
.callout h2{color:var(--page);font-size:clamp(23px,3.4vw,34px)}
.callout p{margin-top:14px;color:color-mix(in srgb,var(--page) 75%,var(--ink));max-width:56ch}
.callout .btn{margin-top:24px;background:var(--marigold);color:#20180A}
footer{border-top:1px solid var(--line);padding:34px 0 60px;font-size:14px;color:var(--ink-3)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- auth ---------- */
#auth{min-height:100vh;display:grid;place-items:center;padding:40px 20px;background:var(--page-2)}
.authcard{width:min(440px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:32px 30px}
.authcard .mark{justify-content:center;margin-bottom:24px}
.authcard h2{font-size:25px;margin-bottom:6px}
.authcard .why{color:var(--ink-3);font-size:14.5px;margin-bottom:22px}
.authcard .btn{width:100%;margin-top:6px}
.authswap{margin-top:20px;text-align:center;font-size:14.5px;color:var(--ink-3)}
.authswap button{color:var(--jade);font-weight:600;text-decoration:underline}
.seg{display:flex;gap:8px;margin-bottom:20px}
.seg button{flex:1;padding:10px;border-radius:var(--r-s);border:1.5px solid var(--line);
  font-size:14px;font-weight:600;color:var(--ink-3)}
.seg button[aria-pressed="true"]{border-color:var(--jade);background:var(--jade-soft);color:var(--jade)}
.err{background:var(--clay-soft);color:var(--clay);padding:10px 13px;border-radius:var(--r-s);
  font-size:14px;margin-bottom:16px}
.ok{background:var(--jade-soft);color:var(--jade);padding:10px 13px;border-radius:var(--r-s);
  font-size:14px;margin-bottom:16px}

/* ---------- app shell ---------- */
.appbar{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--page)}
.appbar .wrap{display:flex;align-items:center;gap:12px;height:60px}
.appbar .mark b{color:var(--page);font-size:21px}
.appbar .mark span{color:var(--marigold)}
.appbar .themebtn{border-color:color-mix(in srgb,var(--page) 30%,transparent);color:var(--page)}
.who{margin-left:auto;display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--marigold);color:#20180A;
  display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.bell{position:relative;color:var(--page)}
.bell .dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;
  background:var(--clay);border:2px solid var(--ink)}
.tabs{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:60px;z-index:35;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .wrap{display:flex;gap:2px;min-width:max-content}
.tabs a{padding:13px 14px;font-size:14.5px;font-weight:500;color:var(--ink-3);
  border-bottom:2.5px solid transparent;white-space:nowrap;text-decoration:none}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--jade);font-weight:600}
main.screen{padding:26px 0 80px;min-height:60vh}
.screen h1{font-size:27px;margin-bottom:4px}
.screen .subhead{color:var(--ink-3);font-size:15px;margin-bottom:22px}

/* ---------- pieces ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:20px;margin-bottom:16px}
.panel h3{font-size:17px;margin-bottom:12px}
.rowlist{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:14px;align-items:center;padding:13px 15px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m);text-align:left;width:100%}
a.row,button.row{text-decoration:none}
a.row:hover,button.row:hover{border-color:var(--ink-3)}
.row .body{flex:1;min-width:0}
.row .body b{font-weight:600;font-size:15.5px;display:block}
.row .body p{font-size:13.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb{width:54px;height:54px;border-radius:var(--r-s);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:19px;flex:none;
  background:var(--jade-soft);color:var(--jade)}
.thumb.m{background:var(--marigold-soft);color:var(--marigold-ink)}
.thumb.c{background:var(--clay-soft);color:var(--clay)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}
.split-sm{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px}
@media(max-width:900px){.grid2,.grid3,.split,.split-sm{grid-template-columns:1fr}}
.bar{height:7px;background:var(--line-2);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--jade);border-radius:999px;transition:width .4s ease}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px}
.stat b{font-family:var(--display);font-size:29px;display:block;line-height:1.1}
.stat span{font-size:13.5px;color:var(--ink-3)}

.player{background:#000;border-radius:var(--r-m);aspect-ratio:16/9;overflow:hidden}
.player video,.player iframe{width:100%;height:100%;border:0;display:block}
.player.empty{display:grid;place-items:center;color:#9AA8BE;text-align:center;padding:20px;font-size:14px}
.lect{display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:var(--r-s);
  width:100%;text-align:left;text-decoration:none}
.lect:hover{background:var(--line-2)}
.lect[aria-current="true"]{background:var(--jade-soft)}
.lect.locked{opacity:.55}
.tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:12px;color:var(--on-accent)}
.tick.on{background:var(--jade);border-color:var(--jade)}
.modhead{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink-2);
  padding:14px 13px 6px;border-top:1px solid var(--line-2);margin-top:6px}
.modhead:first-child{border-top:0;margin-top:0}

.chat{display:flex;flex-direction:column;height:min(58vh,520px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.chat .log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:82%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:var(--ink);color:var(--page);border-bottom-right-radius:5px}
.msg.assistant,.msg.them{align-self:flex-start;background:var(--line-2);border-bottom-left-radius:5px}
.msg.sys{align-self:center;background:var(--marigold-soft);color:var(--marigold-ink);
  font-size:13px;max-width:100%;border-radius:8px}
.composer{display:flex;gap:9px;padding:12px;border-top:1px solid var(--line)}
.composer input{flex:1;border-radius:999px}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 12px 12px}
.chip{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.chip:hover{border-color:var(--jade);color:var(--jade)}

input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-s);font:inherit;font-size:15px;background:var(--page);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--jade);outline-offset:0;border-color:transparent}
input[type=checkbox]{width:auto}
label.f{display:block;margin-bottom:14px;font-size:14px;font-weight:600}
label.f > span{display:block;margin-bottom:5px}
label.f em{font-style:normal;font-weight:400;color:var(--ink-3)}
label.check{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:400;margin-bottom:12px}

.qopt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:14px 16px;
  border:1.5px solid var(--line);border-radius:var(--r-m);margin-bottom:10px;
  background:var(--card);font-size:15.5px}
.qopt:hover{border-color:var(--ink-3)}
.qopt[data-state="picked"]{border-color:var(--ink);background:var(--line-2)}
.qopt[data-state="right"]{border-color:var(--jade);background:var(--jade-soft)}
.qopt[data-state="wrong"]{border-color:var(--clay);background:var(--clay-soft)}
.qletter{width:24px;height:24px;border-radius:50%;background:var(--line-2);display:grid;
  place-items:center;font-size:13px;font-weight:700;flex:none}

table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-weight:600;color:var(--ink-3);font-size:13px;padding:0 12px 9px;
  border-bottom:1px solid var(--line)}
td{padding:13px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tscroll{overflow-x:auto}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);
  color:var(--page);padding:12px 20px;border-radius:999px;font-size:14.5px;z-index:80;
  box-shadow:var(--shadow);max-width:calc(100% - 40px);text-align:center}
.spinner{width:22px;height:22px;border:2.5px solid var(--line);border-top-color:var(--jade);
  border-radius:50%;animation:spin .7s linear infinite;margin:32px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:44px 20px;color:var(--ink-3)}
.empty b{display:block;font-family:var(--display);font-size:18px;color:var(--ink);margin-bottom:6px}