/* Shared app shell: top bar, bottom bar, right rail, scorecard, modal,
   MathFit card, resources — identical across grade/topic/exam pages. */

@font-face{font-family:'Athletics';src:url('/fonts/Athletics-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

@font-face{font-family:'Athletics';src:url('/fonts/Athletics-Regular.woff2') format('woff2');font-weight:400;font-display:swap}

@font-face{font-family:'UntitledSans';src:url('/fonts/untitled-sans-regular.woff2') format('woff2');font-weight:400;font-display:swap}

@font-face{font-family:'UntitledSans';src:url('/fonts/untitled-sans-medium.woff2') format('woff2');font-weight:500;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%;overflow:hidden}

/* Base font is set with the `html body` selector (specificity 0,0,2) so it beats
   the _document global reset's `body,div,span,…{font:inherit}` (each 0,0,1)
   REGARDLESS of stylesheet order. Setting it on plain `body` (0,0,1) loses when
   this sheet loads before the reset (as a <link> it can); a `.page` class only
   covers the app subtree and misses the TpModal/feature modals, which render as
   siblings of .page. `html body` here fixes the base font everywhere it inherits. */
html body{font-family:'UntitledSans',-apple-system,system-ui,sans-serif;font-weight:400;font-size:15px;line-height:1.5;color:#1C1917;background:#F5F2EF}

.page{display:flex;flex-direction:column;height:100vh;overflow:hidden}

.shell{flex:1;min-height:0;display:grid;grid-template-columns:1fr 312px;overflow:hidden}

/* MAIN */
.main{overflow-y:auto;display:flex;flex-direction:column;min-height:0;background:#F5F2EF}

/* Top tab bar — Figma node 5896:28909 (real assets) */
.topbar{height:56px;flex-shrink:0;background:#EDE8E3;border-bottom:2px solid #C7BEB8;display:flex;align-items:center;gap:16px;padding:0 24px;position:relative}

.tb-logo-link{display:flex;align-items:center;flex-shrink:0;transition:opacity .12s}

.tb-logo-link:hover{opacity:.85}

.tb-logo{height:32px;width:auto;opacity:.5;display:block;flex-shrink:0}

.tb-logo-link:hover .tb-logo{opacity:.85}

.tb-tabs{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;height:100%}

.tb-tab{display:flex;align-items:center;gap:6px;height:100%;font-family:'UntitledSans';font-size:14px;font-weight:500;color:rgba(41,40,39,.7);text-decoration:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}

/* Nav tab glyphs (top + bottom bars). Each icon is two paths: .ic-shape (outer
   outline) + .ic-detail (interior dashed construction lines). Inactive: muted
   outline, background-matched fill. Selected tab: gold fill + dark outline, and
   the detail lines darken. bb-tab only renders on mobile (.bottombar is
   display:none on desktop), so its rules are inert there. */
.tb-tab .tab-ico,.bb-tab .tab-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.tb-tab .tab-ico svg{width:16px;height:16px;display:block}
.bb-tab .tab-ico svg{width:28px;height:28px;display:block}
.tab-ico .ic-shape{fill:#EDE8E3;stroke:#84807B;stroke-width:1;stroke-linejoin:round}
.tab-ico .ic-detail{fill:none;stroke:#84807B;stroke-width:.5;stroke-linejoin:round;stroke-dasharray:1 .5}
.tb-tab.active .tab-ico .ic-shape,.bb-tab.active .tab-ico .ic-shape{fill:#F4AB52;stroke:#1C1917}
.tb-tab.active .tab-ico .ic-detail,.bb-tab.active .tab-ico .ic-detail{stroke:#292827;stroke-opacity:.7}

.tb-tab.active{color:#1C1917;border-bottom-color:#1C1917}

.ico-lock-badge{position:absolute;right:-5px;bottom:-4px;width:13px;height:13px;border-radius:50%;background:#EDE8E3;display:flex;align-items:center;justify-content:center;color:#524B47}

.ico-lock-badge svg{width:11px;height:11px;display:block;fill:currentColor}

.tb-scorecard{display:flex;gap:8px;margin-left:auto}

.tb-pill{height:32px;display:flex;align-items:center;gap:6px;background:#F5F2EF;border:1px solid rgba(41,40,39,.1);border-radius:40px;padding:0 16px}

.tb-pill img{width:14px;height:14px;display:block;object-fit:contain}

.tb-pill-val{font-size:14px;line-height:20px;font-weight:500}

.tb-avatar{width:40px;height:40px;border-radius:50%;display:block;flex-shrink:0}

.tb-kebab{display:none;background:none;border:none;cursor:pointer;color:#1C1917;padding:4px;flex-shrink:0;align-items:center}

.tb-kebab svg{width:16px;height:24px;display:block}

.crumb a{color:rgba(41,40,39,.5);text-decoration:none}

.crumb a:hover{color:#1C1917}

.crumb-cur{color:#1C1917;font-weight:500}

.gs-pill:hover{border-color:#1C1917;color:#1C1917}

.gs-pill.active{background:#1C1917;color:#fff;border-color:#1C1917}

.ch-row{background:#fff;border:1px solid transparent;border-radius:8px;transition:border-color .12s}

.ch-row:hover,.ch-row.open{border-color:#C7BEB8}

.ch-row-header{display:flex;align-items:center;gap:16px;padding:16px;cursor:pointer}

.ch-row-icon{position:relative;width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center}

.ch-ic svg{width:22px;height:22px;display:block}

.ch-row-name{font-family:'Athletics';font-size:16px;font-weight:700;color:#1C1917;flex:1;min-width:0;display:flex;align-items:center;gap:6px}

.ch-row-meta{display:flex;align-items:center;gap:12px;flex-shrink:0}

.ch-row-count{font-size:12px;color:rgba(41,40,39,.5);white-space:nowrap}

.ch-row-chevron{color:rgba(41,40,39,.5);transition:transform .15s ease;flex-shrink:0;display:flex}

.ch-row-chevron svg{width:20px;height:20px;fill:currentColor;display:block}

.ch-row.open .ch-row-chevron{transform:rotate(180deg);color:#1C1917}

.ch-row.open .ch-row-body{grid-template-rows:1fr}

.ch-row-body-inner{overflow:hidden}

.rp-inner{padding:40px 16px 24px 15px;display:flex;flex-direction:column;gap:16px;position:relative;width:295px}

.rp-scorecard{display:flex;gap:12px;justify-content:flex-start}

.rp-score{height:88px;flex:0 0 auto;background:#F5F2EF;border:1px solid rgba(41,40,39,.1);border-radius:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 12px 12px;overflow:hidden}

.rp-score-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}

.rp-score-icon img{width:16px;height:16px;display:block;object-fit:contain}

.rp-score-txt{display:flex;flex-direction:column;align-items:center}

.rp-score-label{font-size:10px;line-height:14px;color:rgba(41,40,39,.7);margin-bottom:-2px}

.rp-score-val{font-size:14px;line-height:20px;font-weight:500}

.rp-points{color:#A055BE}

.rp-streak{color:#BC551F}

.rp-sparks{color:#CE7E12}

.lr-cta.locked-out:hover,.block-cta.locked-out:hover{background:#fff}

/* Locked-CTA tooltip. Replaces the native title= (slow, unstyleable). Sits to the
   LEFT of the button, not above: the accordion bodies are overflow:hidden, so a
   bubble above the row would be clipped. Pure CSS off data-tip. */
.cm-tip{position:relative}

.cm-tip::after,.cm-tip::before{opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;position:absolute;z-index:60}

.cm-tip::after{content:attr(data-tip);right:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#1C1917;color:#F9F7F5;font-family:'UntitledSans';font-size:12px;line-height:16px;font-weight:500;white-space:nowrap;padding:8px;border-radius:4px}

.cm-tip::before{content:'';right:calc(100% + 4px);top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:#1C1917}

.cm-tip:hover::after,.cm-tip:hover::before,.cm-tip:focus-visible::after,.cm-tip:focus-visible::before{opacity:1;visibility:visible}

/* Touch has no :hover, so a locked CTA showed nothing on tap. useCmTip toggles
   .cm-tip-open on tap (touch only) so the "Coming soon" tip appears there too. */
.cm-tip.cm-tip-open::after,.cm-tip.cm-tip-open::before{opacity:1;visibility:visible}

/* Right-rail locked CTAs (MathFit / Help card) sit inside the rail's overflow:auto
   box, so a left bubble is clipped — put theirs above the button instead. */
.rp-mf-btn.cm-tip::after,.rp-cta-btn.cm-tip::after{right:auto;left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)}
.rp-mf-btn.cm-tip::before,.rp-cta-btn.cm-tip::before{right:auto;left:50%;top:auto;bottom:calc(100% + 2px);transform:translateX(-50%);border-left-color:transparent;border-top-color:#1C1917}

/* Touch has no hover, and there isn't room to the left of the CTA on a phone —
   the bubble ran off the screen edge. Tapping a locked CTA already opens the
   out-of-sparks modal, which explains it properly, so drop the tooltip here. */
/* "Coming soon" is short enough to sit left of the CTA at every width. */
/* Phone/tablet: the CTA wraps to its own line on the left, and the enrolment
   button is full width, so neither side has room — put the bubble above the
   button, centred, and let it wrap inside the viewport. */
@media(max-width:1024px){
  .cm-tip::after{left:50%;right:auto;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);white-space:normal;text-align:center}
  .cm-tip::before{left:50%;right:auto;top:auto;bottom:calc(100% + 2px);transform:translateX(-50%);border-left-color:transparent;border-top-color:#1C1917}
}

/* DS focus ring instead of the UA blue one, and only for keyboard focus. */
.lr-cta:focus,.block-cta:focus{outline:none}

.lr-cta:focus-visible,.block-cta:focus-visible{outline:2px solid #1C1917;outline-offset:2px}

/* Pre-launch "Coming soon" state for the enrolment CTAs. !important because it
   has to beat each page's own solid-dark button rules; drop this block and the
   cm-soon classes when the content goes live. */
.cm-soon{background:#F5F2EF!important;color:#97948E!important;border-color:rgba(41,40,39,.18)!important;box-shadow:none!important;cursor:not-allowed}

.cm-soon:hover{background:#F5F2EF!important;color:#97948E!important}

/* Shared across the grade / topic / exam page sheets (moved here so the
   identical rules live once). */
.tab-ico-lock{position:relative;display:inline-flex;align-items:center;flex-shrink:0}

.ch-row-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}

.rightpanel{background:#F5F2EF;border-left:1px solid #EDE8E3;overflow-y:auto;background-image:url("/static/maths-curriculum/app/rail-pattern.svg");background-repeat:no-repeat;background-position:top left}

.bottombar{display:none}

.lr-cta.locked-out,.block-cta.locked-out{cursor:not-allowed;background:#F5F2EF;color:#97948E;border-color:rgba(41,40,39,.18);box-shadow:none}

/* ============================================================
   Shared grade/topic/exam rules (moved from per-page sheets).
   Byte-identical across every page sheet that declared them;
   consolidated here so they live once. Do NOT re-add to the
   per-page sheets — override only if a page needs a variant.
   ============================================================ */
.bb-tab .ico-lock-badge{width:15px;height:15px;right:-6px;bottom:-2px}

.bb-tab .ico-lock-badge svg{width:12px;height:12px}

.tb-pill svg{width:12px;height:12px;display:block}

.grade-switcher{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}

.gs-group-label{font-family:'UntitledSans';font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#97948E;margin-bottom:8px}

.gs-chips::-webkit-scrollbar{display:none}

.grade-switcher::-webkit-scrollbar{display:none}

.gsh-left{display:flex;align-items:center;gap:8px;min-width:0}

.grade-section-title{font-family:'Athletics';font-size:20px;line-height:28px;font-weight:400;color:#1C1917}

.gsh-right{display:flex;align-items:center;gap:12px;flex-shrink:0}

.gsh-menu{color:rgba(41,40,39,.5);display:flex;flex-shrink:0;cursor:pointer}

.gsh-menu svg{width:auto;height:20px;display:block}

.wc-icon{line-height:1;flex-shrink:0;display:flex}

.wc-eyebrow{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(41,40,39,.7)}

.wc-title{font-family:'Athletics';font-size:24px;line-height:32px;color:#1C1917}

.wc-sub{font-size:14px;line-height:20px;color:#1C1917}

.chapter-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}

.ch-ring{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}

.ch-ring-t{fill:none;stroke:#EDE8E3;stroke-width:3}

/* NOTE: .ch-row-lessons::before (the 45° checkerboard left gutter) is NOT shared —
   it lives in grade.css + topic.css only. Their .ch-row-lessons is position:relative
   so it stays a 40px gutter; the exam sheet's .ch-row-lessons is unpositioned, so
   hoisting the ::before here made it escape to a full-height strip. Keep it per-sheet. */

.lr-item{position:relative;display:flex;align-items:center;gap:20px;padding:14px 0}

.lr-item::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:#1C1917;transform:translateX(-50%);z-index:0}

.lr-item:first-child::before{top:50%}

.lr-item:last-child::before{bottom:50%}

.lr-sno{position:relative;z-index:1;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#fff;border:1.5px solid var(--c);display:flex;align-items:center;justify-content:center}

.lr-sno-num{font-family:'Athletics';font-size:18px;line-height:1;color:var(--cd);font-weight:400}

.lr-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}

.lr-name{font-size:16px;line-height:24px;color:#1C1917}

.lr-cta-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}

.lr-cta{height:32px;min-width:88px;padding:0 12px;border-radius:8px;border:1px solid #1C1917;background:#fff;color:#1C1917;font-family:'UntitledSans';font-size:12px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.16)}

.lr-cta:hover{background:#F5F2EF}

.lr-cta.solid{background:#1C1917;color:#F9F7F5;border-color:#1C1917}

.lr-cta.solid:hover{background:#38322E;color:#F9F7F5}

.lr-cta.signin{background:#1C1917;color:#F9F7F5;border-color:#1C1917}

.lr-item + .lr-item::after{content:'';position:absolute;left:40px;right:0;top:0;height:1px;background:rgba(41,40,39,.1)}

.rp-mathfit{border:2px solid transparent;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:16px;align-items:flex-end;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 146' preserveAspectRatio='none'><g transform='matrix(14 -7.3 5.7335 8.7144 140 73)'><foreignObject x='-237.01' y='-237.01' width='474.02' height='474.02'><div xmlns='http://www.w3.org/1999/xhtml' style='background-image: conic-gradient(from 90deg, rgb(116,172,252) 0%, rgb(180,172,167) 25%, rgb(244,171,82) 50%, rgb(234,169,169) 75%, rgb(224,166,255) 100%); opacity:0.5; height:100%; width:100%;'></div></foreignObject></g></svg>"),
    linear-gradient(rgb(250,248,245),rgb(250,248,245)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 146' preserveAspectRatio='none'><g transform='matrix(14 -7.3 5.7335 8.7144 140 73)'><foreignObject x='-237.01' y='-237.01' width='474.02' height='474.02'><div xmlns='http://www.w3.org/1999/xhtml' style='background-image: conic-gradient(from 90deg, rgb(116,172,252) 0%, rgb(244,171,82) 50%, rgb(224,166,255) 100%); height:100%; width:100%;'></div></foreignObject></g></svg>");
  background-clip:padding-box,padding-box,border-box;
  background-origin:border-box;
  background-size:100% 100%;
  background-repeat:no-repeat;align-items:stretch;justify-content:space-between}

.rp-mf-text{width:100%}

.rp-mf-eyebrow{font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(28,25,23,.65);margin-bottom:6px}

.rp-mf-title{font-family:'Athletics';font-size:18px;line-height:24px;font-weight:700;color:#1C1917;margin-bottom:6px}

.rp-mf-sub{font-size:14px;line-height:20px;color:rgba(28,25,23,.85)}

.rp-mf-btn{width:100%;background:#1C1917;color:#F9F7F5;border:1px solid #1C1917;border-radius:8px;padding:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;text-decoration:none}

.rp-mf-btn:hover{background:#38322E;color:#F9F7F5}

.tp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}

.tp-modal-overlay.open{display:flex}

.tp-modal{background:#fff;width:480px;max-width:100%;padding:32px;position:relative;border-radius:8px}

.tp-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:#97948E}

.tp-modal-close:hover{color:#1C1917}

.tp-modal-title{font-family:'Athletics';font-size:24px;line-height:32px;font-weight:700;color:#1C1917;margin-bottom:8px}

.tp-modal-sub{font-size:15px;line-height:24px;color:rgba(41,40,39,.7);margin-bottom:24px}

.tp-modal-cta{display:block;width:100%;text-align:center;background:#1C1917;color:#F9F7F5;border:1px solid #1C1917;border-radius:8px;padding:16px;font-family:'UntitledSans';font-size:15px;font-weight:500;text-decoration:none}

.tp-modal-cta:hover{background:#38322E;color:#F9F7F5}

@media(max-width:1024px){
  .tb-tabs{display:none}
  .rp-inner{width:auto;padding:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
  .rp-mathfit{grid-column:1 / -1}
  .rp-scorecard{display:none}
  .bottombar{display:flex;flex-shrink:0;background:#EDE8E3;border-top:2px solid #C7BEB8;align-items:stretch;justify-content:space-around;padding:0 16px}
  .bb-tab{flex:1;max-width:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 4px;text-decoration:none;color:rgba(41,40,39,.7);font-family:'UntitledSans';font-size:12px;font-weight:500;border-bottom:2px solid transparent;white-space:nowrap}
  .bb-tab.active{color:#1C1917;border-bottom-color:#1C1917}
}

@media(max-width:767px){
  .grade-section-title{font-size:16px;line-height:24px}
  .ch-row-header{gap:12px;padding:14px}
  .ch-row-name{font-size:14px}
  .topbar{padding:0 16px;gap:12px}
  .tb-logo-link{display:none}
  .tb-avatar{order:-1;margin-right:auto}
  .tb-scorecard{margin-left:0;gap:6px}
  .tb-pill{padding:0 12px}
  .tb-kebab{display:flex;order:10}
  .grade-wrap{padding:16px}
  .rp-inner{grid-template-columns:1fr;padding:16px}
  .rp-mathfit{grid-column:auto}
  .lr-item{flex-wrap:wrap;gap:10px}
  .lr-cta-wrap{flex-basis:calc(100% - 50px);margin-left:50px}
  .lr-name{font-size:14px;line-height:20px}
  .lr-item + .lr-item::after{left:50px}
  .wc-title{font-size:20px;line-height:28px}
  .gs-chips::-webkit-scrollbar{display:none}
  .gs-pill{flex-shrink:0}
}

@media(min-width:1025px){
  .tb-scorecard{display:none}
  .tb-avatar{margin-left:auto}
}