/* =====================================================================
   Study Compass type scale (UX brief v1.2, sections 26 to 30, 12 Oct 2026)
   Loaded last on the student and parent pages (body.app-ui). The public home page keeps its own styles.
   Sizes are rem at a 100% root, so browser font preferences and zoom still work. Line heights are unitless.
   Mobile values apply below 48rem, desktop values from 48rem.
   ===================================================================== */
html{font-size:100%}
body.app-ui{
  --font-sans:"Inter","Inter Fallback",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* the shared scale (section 26) */
  --t-meta:.8125rem;   --t-meta-lh:1.3846;   /* 13 / 18 */
  --t-small:.875rem;   --t-small-lh:1.4286;  /* 14 / 20 */
  --t-nav:.9375rem;    --t-nav-lh:1.4667;    /* 15 / 22 */
  --t-body:1rem;       --t-body-lh:1.5;      /* 16 / 24 */
  --t-reading:1.125rem;--t-reading-lh:1.6667;/* 18 / 30 */
  --t-card:1.125rem;   --t-card-lh:1.4444;   /* 18 / 26 */
  --t-section:1.375rem;--t-section-lh:1.3636;/* 22 / 30 mobile */
  --t-page:1.75rem;    --t-page-lh:1.2857;   /* 28 / 36 mobile */
  --t-value:1.75rem;   --t-value-lh:1.2857;  /* 28 / 36 mobile */
  /* the older tokens point at the scale, so existing screens follow it */
  --fs-meta:var(--t-meta); --fs-label:var(--t-small); --fs-sm:var(--t-small); --fs-xs:var(--t-meta);
  --fs-body:var(--t-body); --fs-md:var(--t-body); --fs-read:var(--t-reading); --fs-lg:var(--t-reading);
  --fs-h4:var(--t-body); --fs-xl:var(--t-card); --fs-2xl:var(--t-section); --fs-3xl:var(--t-section);
  --fs-h2-ui:var(--t-section); --fs-h1:var(--t-page);
  font-family:var(--font-sans);font-size:var(--t-body);line-height:var(--t-body-lh);letter-spacing:0
}
@media (min-width:48rem){
  body.app-ui{--t-section:1.5rem;--t-section-lh:1.3333;--t-page:2rem;--t-page-lh:1.25;--t-value:2rem;--t-value-lh:1.25}
}
body.app-ui :is(button,input,select,textarea){font-family:inherit}

/* ---------- headings and page shell (section 27) ---------- */
body.app-ui #app h1,body.app-ui .wiz h1,body.app-ui .qtop h1{font-size:var(--t-page);line-height:var(--t-page-lh);font-weight:700;letter-spacing:-.02em}
body.app-ui #app h2,body.app-ui .wiz h2{font-size:var(--t-section);line-height:var(--t-section-lh);font-weight:600;letter-spacing:0}
body.app-ui #app h3,body.app-ui .wiz h3,
body.app-ui #app .card h2,body.app-ui #app .side-box h2,body.app-ui #app .sel-wh h2,body.app-ui #app .sel-pre h2{font-size:var(--t-card);line-height:var(--t-card-lh);font-weight:600;letter-spacing:0}
body.app-ui #app #selar{font-size:var(--t-section);line-height:var(--t-section-lh)}   /* "Your five areas" is a section, not a card */
body.app-ui #app :is(.topic-head,.sel-head,.qtop) p.muted{font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:400}
/* featured next activity */
body.app-ui #app :is(.sel-next,.gs-next) h2,body.app-ui #app .sx-detail h2{font-size:var(--t-section);line-height:var(--t-section-lh);font-weight:600}
body.app-ui #app :is(.sel-next,.gs-next) p{font-size:var(--t-body);line-height:var(--t-body-lh)}
body.app-ui #app .sel-next .sel-sub{font-size:var(--t-body);font-weight:500}
/* parent summary headline: 22/30 desktop, 20/28 mobile */
body.app-ui #app .ov-title{font-size:1.25rem;line-height:1.4;font-weight:600}
@media (min-width:48rem){body.app-ui #app .ov-title{font-size:1.375rem;line-height:1.3636}}
/* overlines: the only text with positive tracking */
body.app-ui :is(.eyebrow,.sel-k,.t-eyebrow,.gs-next .eyebrow){font-size:var(--t-meta);line-height:var(--t-meta-lh);font-weight:600;letter-spacing:.04em}
/* navigation: global, parent sidebar, tabs and segmented controls */
body.app-ui .topnav button{font-size:var(--t-nav);line-height:var(--t-nav-lh);font-weight:500;padding-left:10px;padding-right:10px}
body.app-ui .topnav button[aria-current="page"]{font-weight:600}
body.app-ui .gu-nav button{font-size:var(--t-nav);line-height:var(--t-nav-lh);font-weight:500}
body.app-ui .gu-nav button[aria-current="page"]{font-weight:600}
body.app-ui :is(.sel-tabs [role=tab],.gu-sub button,.tabs button,.chips .chip,.selw-tabs .chip){font-size:var(--t-nav);line-height:var(--t-nav-lh);font-weight:600}
body.app-ui :is(.back,.crumbs a){font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:500}
/* child context */
body.app-ui .kidswitch button{font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:600}
body.app-ui .qtop .kidswitch + p,body.app-ui .qtop h1 + p.muted{font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:400}
body.app-ui :is(.av,.kidswitch .av){font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:600}
/* metrics */
body.app-ui :is(.sel-area .n,.gs-big,.tile b,.ov-num,.stat b){font-size:var(--t-value);line-height:var(--t-value-lh);font-weight:700;font-variant-numeric:tabular-nums}
body.app-ui :is(.tile span,.sel-area .muted){font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:500}
body.app-ui .sel-wh > .muted{font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:600}
body.app-ui :is(.sel-meta,.sel-fine,.ins-when,.work-row .muted){font-size:var(--t-meta);line-height:var(--t-meta-lh);font-weight:400}

/* ---------- plans, lessons and assessments (section 28) ---------- */
body.app-ui :is(.sel-row b,.work-row b,.review-item b,.cur-topic summary b,.sx-list button b,.sel-area > b){font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:600}
body.app-ui :is(.sel-grp > summary b,.sel-sec > summary b,.sel-about > summary b,details > summary){font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:600}
body.app-ui :is(.sel-row > span > .muted,.review-item .muted,.task .reason,.dl-reason){font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:400}
body.app-ui :is(.sx-list button .muted,.sel-grp > summary .muted){font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:400}
body.app-ui :is(.sel-days li,.ov-day > span:first-child,.week){font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:600;font-variant-numeric:tabular-nums}
body.app-ui :is(.sel-days li > span:nth-child(2),.sel-days li .w){font-weight:400}
/* lesson player */
body.app-ui #app .slide h2{font-size:1.5rem;line-height:1.3333;font-weight:700}
@media (min-width:48rem){body.app-ui #app .slide h2{font-size:1.75rem;line-height:1.2857}}
body.app-ui :is(.slide p,.slide li,.slide ul,.slide ol,.t-text p,.rd-text p,.passage p,.tt-rev-passage p,.selw-prompt p,.lx-panel > p){font-size:var(--t-reading);line-height:var(--t-reading-lh);font-weight:400;max-width:68ch}
body.app-ui :is(.slide p,.t-text p,.rd-text p,.passage p){margin-bottom:1em}
body.app-ui :is(.qtext,.lx-q,.tt-q){font-size:var(--t-reading);line-height:var(--t-reading-lh);font-weight:500;max-width:68ch}
body.app-ui :is(.opt,.tt-opt,.lx-opt){font-size:var(--t-reading);line-height:1.5556;font-weight:400}
body.app-ui :is(#weditor,.selw-text,.lx-field input,.lx-field select){font-size:var(--t-reading);line-height:var(--t-reading-lh);font-weight:400}
body.app-ui :is(.hint,.feedback,.feedback p,.tt-work,.tt-ans,.solution,.ev){font-size:var(--t-body);line-height:1.625;font-weight:400}
body.app-ui :is(.t-timer > span,#selwclock,#selbclock,.tt-clock){font-size:1.5rem;line-height:1.3333;font-weight:600;font-variant-numeric:tabular-nums}
body.app-ui #app .sel-break .sel-bclock{font-size:clamp(3rem,6vw,4.5rem);line-height:1}   /* the break clock is a display value, deliberately large */
body.app-ui :is(.tt-qn,.tt-map button,.tt-maphead,.t-mode){font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:600;font-variant-numeric:tabular-nums}
body.app-ui :is(.sel-rules li,.tt-rules li){font-size:var(--t-body);line-height:1.625;font-weight:400}
body.app-ui #app .ldone h1{font-size:var(--t-section);line-height:var(--t-section-lh);font-weight:600;letter-spacing:0}
body.app-ui #app .ldone p{font-size:var(--t-body);line-height:var(--t-body-lh)}

/* ---------- controls, feedback and reporting (section 29) ---------- */
body.app-ui .btn,body.app-ui .btn.small{font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:600;min-height:44px;white-space:normal}
body.app-ui .linkish{font-size:inherit;line-height:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
body.app-ui :is(input,select,textarea){font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:400}
body.app-ui :is(.form-row label,.field label,.lx-field label,.selw-label){font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:600}
body.app-ui label.check{font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:400}
body.app-ui :is(.note,.tc-err,.form-row .hint){font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:400}
body.app-ui :is(.st,.tag,.pill,.sel-m,.lx-tag){font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:500;white-space:normal}
body.app-ui :is(.att h4,.empty-h,.insight h3){font-size:1.25rem;line-height:1.4;font-weight:600}
body.app-ui :is(.att p,.empty,.insight dd,.insight dt,.todo p,.todo li,.doing li,.gs-list dd){font-size:var(--t-body);line-height:1.625;font-weight:400}
body.app-ui .gs-list dt{font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:600}
body.app-ui .toast{font-size:var(--t-body);line-height:var(--t-body-lh);font-weight:400}
body.app-ui th{font-size:var(--t-small);line-height:var(--t-small-lh);font-weight:600}
body.app-ui td{font-size:var(--t-small);line-height:1.5714;font-weight:400}
body.app-ui :is(.sel-days li,td.num,.score,.tt-score){font-variant-numeric:tabular-nums}
body.app-ui #app > :is(p.note,.note:last-child){font-size:var(--t-meta);line-height:var(--t-meta-lh)}
body.app-ui #app select,body.app-ui .wiz select{line-height:var(--t-body-lh)}
/* labels wrap rather than clip when text is enlarged or spaced out (TYPE 02) */
body.app-ui :is(.subj,.sel-area,.sx-list button) :is(b,span){white-space:normal;overflow-wrap:anywhere;min-width:0}