/* Desktop layout (900 px and wider). Phones and tablets below 900 px keep the original layout; nothing here applies to them.
   Left sidebar replaces the bottom bar (right side in right-to-left), the main area uses the width, screens go multi-column.
   Logical properties only, so dir="rtl" mirrors it. Colours come from the tokens in styles.css (light and late-night). */

/* the sidebar parts exist in the markup but stay hidden on phones */
.tb-brand,.tb-foot{display:none}
.sitelink{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);color:var(--accent-text);font:600 14px var(--sans);text-decoration:none;border-radius:var(--r-1)}
.sitelink:hover span{text-decoration:underline}
.sitelink:focus-visible,.tb-logo:focus-visible,.tb-fb:focus-visible,.tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sitelink .ic{flex:none;transform:scaleX(-1)}
.sitelink[dir="rtl"] .ic{transform:none}
.sitelink.sl-top{margin-block:-6px 4px}
.nw{white-space:nowrap}
/* layout wrappers added for desktop: invisible on phones */
.pg,.pg-side,.pg-main,.dy-cols,.dy-l,.dy-r,.gm-cols,.gm-l,.gm-r,.of-grid,.of-foot{display:contents}

@media (min-width:900px){
  :root{--sbw:248px;--gut:48px;--maxw:1280px}

  /* ---------- sidebar ---------- */
  .tabbar{left:auto;right:auto;inset-inline-start:0;top:0;bottom:0;width:var(--sbw);border-top:0;border-inline-end:1px solid var(--line2);flex-direction:column;justify-content:flex-start;gap:6px;padding:22px 14px calc(18px + env(safe-area-inset-bottom,0px));background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;overflow-y:auto}
  .tb-brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0 6px 16px;margin-block-end:8px;border-block-end:1px solid var(--line)}
  .tb-logo{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px;border-radius:var(--r-2)}
  .tb-back{font-size:13px;min-height:36px}
  .tabbar .in{flex-direction:column;max-width:none;gap:4px}
  .tab{flex:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:50px;padding:8px 16px;border-radius:var(--r-pill);font-size:17px;text-align:start;border:1.5px solid transparent;transition:background var(--t-fast),border-color var(--t-fast)}
  .tab:hover{background:var(--surface2)}
  .tab[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:var(--ink);color:var(--accent-text);box-shadow:var(--hard-sm)}
  .tab[aria-selected="true"]::before{display:none}
  .tab[aria-selected="true"] .ic{transform:none}
  .tab .dot{position:static;margin-inline-start:auto}
  .tb-foot{display:block;margin-block-start:auto;padding-block-start:12px;border-block-start:1px solid var(--line)}
  .tb-fb{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:8px 16px;border:0;border-radius:var(--r-pill);background:none;color:var(--muted);font:600 16px var(--sans);cursor:pointer;text-align:start}
  .tb-fb:hover{background:var(--surface2);color:var(--ink)}

  /* ---------- main area: left aligned, wide, generous padding ---------- */
  #app{max-width:none;margin:0;padding-block:calc(env(safe-area-inset-top,0px) + 36px) 56px;padding-inline-start:calc(var(--sbw) + max(var(--gut),calc((100% - var(--sbw) - var(--maxw)) / 2)));padding-inline-end:max(var(--gut),calc((100% - var(--sbw) - var(--maxw)) / 2))}
  body.is-welcome #app{padding-inline:max(var(--gut),calc((100% - 1120px) / 2))}
  .sitelink.sl-top{display:none}
  h1{font-size:40px}
  /* screens that are plain long text keep a readable line inside the wide area */
  .toast{left:calc(50% + var(--sbw) / 2);bottom:32px}
  html[dir="rtl"] .toast{left:calc(50% - var(--sbw) / 2)}

  /* Arabic reading chosen: the sidebar moves to the right edge and the main area follows */
  body[data-ar="1"] .tabbar,html[dir="rtl"] .tabbar{inset-inline-start:auto;left:auto;right:0;border-inline-end:0;border-inline-start:1px solid var(--line2)}
  body[data-ar="1"] #app{padding-inline-start:max(var(--gut),calc((100% - var(--sbw) - var(--maxw)) / 2));padding-inline-end:calc(var(--sbw) + max(var(--gut),calc((100% - var(--sbw) - var(--maxw)) / 2)))}
  body[data-ar="1"] .toast{left:calc(50% - var(--sbw) / 2)}

  /* ---------- Today: two-column dashboard ---------- */
  body[data-tab="today"] #app>.hud{margin-block-end:22px}
  .td-cols{display:block}
  .td-l,.td-r{min-width:0}
  .td-l .mission{margin-block-start:0}
  .td-r>:first-child{margin-block-start:0}
  .hud .logo .lt b{font-size:20px}

  /* ---------- Recipes: lessons flow into columns under each tray heading ---------- */
  body[data-tab="course"] #app{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px 16px;align-items:stretch}
  body[data-tab="course"] #app>:is(h1,p,.mod,.noprint,div:not(.lrow),.langsw){grid-column:1/-1}
  body[data-tab="course"] #app>.tabbar{grid-column:auto}
  body[data-tab="course"] #app>.lrow{margin-bottom:0}
  body[data-tab="course"] #app>.mod{margin-block:26px 0}

  /* ---------- Build home: tiles in a grid ---------- */
  body[data-tab="build"] .bgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  body[data-tab="build"][data-scr="build:home::"] #app{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start}
  body[data-tab="build"][data-scr="build:home::"] #app>:is(h1,p,.explore-t,.noprint,.langsw){grid-column:1/-1}
  body[data-tab="build"][data-scr="build:home::"] #app>p{grid-row:2}
  body[data-tab="build"][data-scr="build:home::"] #app>.sec{grid-row:3}
  body[data-tab="build"][data-scr="build:home::"] #app>.sec:first-of-type{grid-column:1}
  body[data-tab="build"][data-scr="build:home::"] #app>.sec~.sec{grid-column:2}
  body[data-tab="build"][data-scr="build:home::"] #app>.makehero{grid-column:1;grid-row:4}
  body[data-tab="build"][data-scr="build:home::"] #app>.cherob{grid-column:2;grid-row:4}
  body[data-tab="build"][data-scr="build:home::"] #app>.explore-t{grid-row:5}
  body[data-tab="build"] #app>.tabbar{grid-column:auto}

  /* ---------- Pantry: lists in two columns ---------- */
  body[data-tab="book"] #app{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;align-items:start}
  body[data-tab="book"] #app>*{grid-column:1/-1}
  body[data-tab="book"] #app>.li{grid-column:auto}
  body[data-tab="book"] #app>.seg{max-width:560px}

  /* ---------- Me: two columns ---------- */
  .me-cols{columns:2;column-gap:28px;margin-block-start:18px}
  .me-c{display:contents}
  .me-cols .card,.me-cols .tiles,.me-cols .fcard,.me-cols .prow{break-inside:avoid}
  .me-cols>.me-c>:first-child{margin-block-start:0!important}

  /* ---------- Slides gallery ---------- */
  .sld-gal{padding-block-end:24px}
  .sld-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .sld-q{max-width:520px}
  .sld-thumbs{margin-block-end:12px;max-height:340px}

  /* ---------- lesson player: reading column, centred, wider ---------- */
  .player .top,.player .body{max-width:880px}
  .player .foot .in{max-width:832px}
  .player .body{padding:20px 24px 36px}
  .player .top{padding-inline:24px}
  .player .foot{padding-inline:24px}
}

@media (min-width:1200px){
  .sld-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-tab="course"] #app{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* tablets keep the phone layout with a wider cap */
@media (min-width:600px) and (max-width:899px){
  #app{max-width:720px}
  .tabbar .in{max-width:720px}
}

/* ================= DESKTOP PASS 2: inner screens (screen only, never print) ================= */
@media screen and (min-width:900px){
  :root{--cg:repeat(auto-fill,minmax(min(100%,330px),1fr))}
  /* Build home with "Learn and explore" open: sections flow in two columns */
  body[data-scr="build:home::"] #app>.explore{grid-column:1/-1;grid-row:6;columns:2;column-gap:40px;margin-block-start:6px}
  .explore>*{break-inside:avoid}
  .explore>.sec{break-after:avoid}
  body[data-tab="build"] .explore .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .explore .linkgrid{display:flex;flex-wrap:wrap}

  /* shared: card galleries (templates, examples, toolkit, talk) */
  :is([data-scr^="build:templates"],[data-scr^="build:showcase"],[data-scr^="build:toolkit"],[data-scr^="build:talk"],[data-scr^="build:workspace"]) #app{display:grid;grid-template-columns:var(--cg);gap:18px 20px;align-items:start}
  :is([data-scr^="build:templates"],[data-scr^="build:showcase"],[data-scr^="build:toolkit"],[data-scr^="build:talk"],[data-scr^="build:workspace"]) #app>*{margin-block:0;min-width:0}
  :is([data-scr^="build:templates"],[data-scr^="build:showcase"],[data-scr^="build:toolkit"],[data-scr^="build:talk"],[data-scr^="build:workspace"]) #app>:is(.back,h1,p,.seg,.eyebrow,.btn,.vs,.dd,.wsbox,.tabbar){grid-column:1/-1}
  :is([data-scr^="build:templates"],[data-scr^="build:showcase"],[data-scr^="build:toolkit"],[data-scr^="build:talk"],[data-scr^="build:workspace"]) #app>.tabbar{grid-column:auto}
  [data-scr^="build:templates"] #app>.card:nth-last-child(2),[data-scr^="build:talk"] #app>.eyebrow+.card,[data-scr^="build:workspace"] #app>.eyebrow+.card{grid-column:1/-1}
  [data-scr^="build:showcase"] #app>p.muted,[data-scr^="build:templates"] #app>p.muted,[data-scr^="build:toolkit"] #app>p.muted{max-width:820px}

  /* a path: side panel (title and tabs) plus content */
  .pg-main{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px 20px;align-items:start;padding-block-start:6px}
  .pg-main>*{margin-block:0!important;min-width:0}
  .pg-main>:is(.eyebrow,.btn,.seg,.row,.bar,.bstep,.muted,p,.lrow){grid-column:1/-1}
  .pg-main[data-t="overview"]>.card:first-child{grid-column:1/-1;padding:22px 26px}
  .pg-main[data-t="overview"]>.card:first-child p{font-size:22px;line-height:1.4}
  .pg-main[data-t="overview"]>.card:has(.shot){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}
  .pg-main[data-t="overview"]>.card:has(.shot)>div{padding:24px 28px!important}
  .pg-main[data-t="overview"]>.card:has(.shot) .shot{max-height:300px;height:300px}
  .pg-main .shot{max-height:230px;width:100%;object-fit:cover;object-position:top}
  .pg-main[data-t="prompts"]{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
  .pg-main>.btn{max-width:420px}

  /* the 7-day course */
  .cwrap>.langsw{min-width:260px}
  [data-scr^="build:course"] .cwrap>.langsw{justify-self:start}
  [data-scr^="build:course"] .cwrap>.skiplink{justify-self:start}
  [data-scr^="build:course"] .cwrap .cday,[data-scr^="build:course"] .cwrap .lrow{min-height:84px}

  /* one course day: steps and links on one side, checkpoint and explain-back on the other */
  [data-scr^="build:cday"] .cwrap>:is(.back,.langsw){justify-self:start}

  /* the offer screen: equal option cards side by side */
  [data-scr^="build:offer"] .cwrap>:is(.back,.langsw){justify-self:start}
  [data-scr^="build:offer"] .cwrap>.card.exnote{max-width:760px}

  /* certificate: form on one side, certificate on the other */
  [data-scr^="build:cert"] .cwrap:not(:has(.cert)){max-width:620px}

  /* the live game builder: game left (sticky), tasks right */
  /* welcome: words and the start button on one side, the little phone on the other */
  .wel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"top top" "copy stage" "cta stage";grid-template-rows:auto auto 1fr;column-gap:72px;align-content:start}
  .wel-top{grid-area:top}
  .wel-copy{grid-area:copy;align-self:end;margin-top:8vh}
  .wel-copy h1{font-size:64px;line-height:1.02}
  .wel-copy .eyebrow{font-size:14px}
  .wel-art{justify-content:flex-start;margin-top:18px}
  .wel-art .bkx{width:44px;height:44px}
  .wel-stage{grid-area:stage;min-height:520px;margin-block:20px}
  .wel-stage .wp{transform:scale(1.22);transform-origin:center}
  .wel-cta{grid-area:cta;align-self:start;max-width:440px;margin-top:28px}
  .wel-cta .btn{font-size:21px;min-height:68px}
  .wel-course{justify-content:flex-start}

  /* lesson player: one wide centred column with large text; answer choices side by side */
  .player .top,.player .body{max-width:1040px}
  .player .foot .in{max-width:944px}
  .player .top{padding-inline:48px}
  .player .body{padding:36px 48px 48px;font-size:19px}
  .player .body h1{font-size:46px}
  .player .body h2{font-size:38px;max-width:30ch}
  .player .body p{font-size:19px}
  .player .body .opts{margin-top:26px}
  .player .body .opts:has(.opt:nth-child(4)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .player .body .opt{font-size:20px;min-height:68px;padding:16px 22px}
  .player .body .opts.two .opt{min-height:84px;font-size:22px}
  .player .body .flips{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .player .body .alts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .player .body .sentence{font-size:26px}
  .player .body .pm-cols{gap:20px}
  .player .body textarea.code{min-height:220px;font-size:16px}
  /* the review screen keeps a readable width */
  body[data-tab="rush"] #app>:not(.tabbar){max-width:860px}
}
@media screen and (min-width:1200px){
  .stu-coach{flex-basis:clamp(480px,40%,660px)}
}
@media screen and (min-width:1700px){
  .stu-coach{flex-basis:clamp(480px,38%,720px)}

}

@media screen and (min-width:1100px){
  .pg{display:grid;grid-template-columns:280px minmax(0,1fr);gap:0 44px;align-items:start}
  .pg-side{display:block;position:sticky;top:28px}
  .pg-side .seg{display:flex;flex-direction:column;align-items:stretch;border-radius:var(--r-3);padding:6px;gap:4px;overflow:visible}
  .pg-side .seg button{justify-content:flex-start;text-align:start;border-radius:var(--r-2);min-height:46px;padding-inline:16px}
  .pg-side .row{margin-block:10px 20px!important}
  [data-scr^="build:course"] .cwrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;align-items:stretch}
  [data-scr^="build:course"] .cwrap>*{margin-block:0}
  [data-scr^="build:course"] .cwrap>:is(.back,.langsw,h1,p,.jcard,.skiplink){grid-column:1/-1}
  [data-scr^="build:course"] .cwrap>.coffer{grid-column:1/-1}
  .dy-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 36px;align-items:start;margin-block-start:14px}
  .dy-l,.dy-r{display:block;min-width:0}
  .dy-l{position:sticky;top:24px}
  .dy-r>.card:first-child{margin-block-start:0}
  .dy-l .vidcard{margin-block-start:14px}
  .of-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-block:16px 22px;align-items:stretch}
  .of-grid>.card{margin:0;display:flex;flex-direction:column}
  .of-grid>.card .btn{margin-block-start:auto}
  .of-foot{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
  .of-foot>*{margin:0!important}
  .of-foot>.btn{grid-column:1/-1;max-width:420px}
  [data-scr^="build:cert"] .cwrap:has(.cert){display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0 40px;align-items:start}
  [data-scr^="build:cert"] .cwrap:has(.cert)>:is(.back,.langsw){grid-column:1/-1;justify-self:start}
  [data-scr^="build:cert"] .cwrap:has(.cert)>.cert{grid-column:2;grid-row:3/span 4}
  [data-scr^="build:cert"] .cwrap:has(.cert)>:not(.back):not(.langsw):not(.cert){grid-column:1}
  [data-scr^="build:game"] #app{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:36px;align-items:start}
  [data-scr^="build:game"] #app>:is(.back,h1,.stepdots,.goalline,div:not(.gm-cols)){grid-column:1/-1}
  .gm-cols{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 36px;align-items:start}
  .gm-l{display:block;position:sticky;top:24px}
  .gm-r{display:block}
  .gm-r>.eyebrow:first-child{margin-block-start:0}
}
@media screen and (min-width:1280px){
  .of-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .of-grid>.card{grid-column:span 2}
  .of-grid>.card:nth-child(n+4){grid-column:span 3}
}
@media screen and (min-width:1100px) and (max-width:1279px){
  .of-grid>.card:nth-child(odd):last-child{grid-column:1/-1}
}

/* ================= DESKTOP PASS 3: 900 to 1440 px (where most laptops sit) ================= */
@media screen and (min-width:900px){
  /* the sidebar already shows the logo: no second one in the page */
  body[data-tab="today"] #app>.hud{display:none}
  /* Start: the side panel (streak, practice, presentations) goes below the main column and lays its rows out side by side */
  .td-r{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px 18px;align-items:start;margin-block-start:14px}
  .td-r>:is(.qline,.sec){grid-column:1/-1}
  .td-r>*{margin-block:0;min-width:0}
  .td-r>.st-side{margin:0}
}
/* below 1100 px the sidebar shrinks to a rail of icons (names show as tooltips) so the content keeps the room */
@media screen and (min-width:900px) and (max-width:1099px){
  :root{--sbw:76px;--gut:32px}
  .tabbar{padding-inline:10px}
  .tb-brand{align-items:center;padding-inline:0}
  .tb-logo .lt,.tb-back{display:none}
  .tb-logo{justify-content:center}
  .tabbar .in{align-items:center}
  .tab{position:relative;justify-content:center;width:52px;min-height:52px;padding:0;gap:0}
  .tab .tl,.tb-fb span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tab .dot{position:absolute;inset-block-start:2px;inset-inline-end:0;margin:0}
  .tb-fb{width:52px;min-height:52px;padding:0;justify-content:center;gap:0;margin-inline:auto}
}
@media screen and (min-width:1440px){
  .td-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 36px;align-items:start}
  .td-r{display:block}
  .td-r>:first-child{margin-block-start:0}
  .td-r>.sec,.td-r>.prow,.td-r>.st-side{margin-block-start:12px}
}

/* Studio between 900 and 1200 px: a wider editor pane, tabs and the preview bar that wrap instead of cutting words */
@media screen and (min-width:900px) and (max-width:1199px){
  .stu-coach{flex:0 0 max(410px,42%)}
}
@media screen and (min-width:900px){
  .stu-livebar{flex-wrap:wrap;row-gap:6px}
  .stu-livetag{flex:1 1 140px;white-space:normal;overflow:visible;text-overflow:clip}
  .stu-tb span{overflow:visible;text-overflow:clip}
  .stu-tb{padding-inline:4px;gap:5px}
}