/* grade-page-specific styles (loaded after app-common.css). */

/* LEFT RAIL — Figma node 2375:18990 (light app nav) */

/* Desktop: scorecard lives in the right rail (node 3068:7298), not the top bar */

.grade-wrap{padding:20px 24px;flex:1;opacity:0}

.grade-wrap.ready{opacity:1}

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(41,40,39,.5);flex-wrap:wrap;position:sticky;top:0;z-index:3;background:#F5F2EF;padding:16px 0;margin:-20px 0 24px}

/* Grade switcher */

.gs-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px}

.gs-pill{padding:5px 14px;border:1px solid rgba(0,0,0,.12);background:none;font-family:'UntitledSans';font-size:12px;font-weight:500;color:#97948E;cursor:pointer;border-radius:20px;white-space:nowrap;flex-shrink:0}

/* Grade header */
/* Section header + segmented progress bar — Figma node 5896:28984 (exact). */
.grade-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}

.gsh-icon{font-size:22px;line-height:1;flex-shrink:0;display:flex;align-items:center}

.gsh-icon svg{width:24px;height:24px;display:block}

.gsh-prog{display:flex;flex-direction:column;align-items:flex-end;gap:2px;width:200px}

.gsh-prog-label{font-size:12px;line-height:16px;color:rgba(41,40,39,.7)}

.gsh-prog-label b{color:#1C1917;font-weight:500}

.gsh-bar{position:relative;width:200px;height:4px}

.gsh-bar-track{position:absolute;left:0;right:30px;top:0;height:4px;border-radius:4px;background:rgba(51,49,47,.2)}

.gsh-bar-fill{position:absolute;left:0;top:0;height:4px;border-radius:4px;background:#2A2623}

.gsh-bar-seg{position:absolute;top:0;height:4px;width:8px;border-radius:4px;background:rgba(51,49,47,.2)}

@media(max-width:767px){.gsh-prog,.gsh-bar{width:130px}}

/* Mastery + Today's Workout — Figma node 2375:18990 */

.workout-card{background:#fff;border-radius:8px;padding:26px 24px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}

.wc-icon img{width:64px;height:64px;display:block;object-fit:contain}

@media(max-width:767px){.workout-card{padding:16px}.wc-left{gap:16px}.wc-icon{font-size:40px}}

/* Chapter list — full-width rows, click-to-expand accordion (one open at a
   time; opening the next chapter closes whichever was open). No separate
   chapter page anymore, so the whole header is the toggle target. */
/* Chapter accordion — rows that expand inline to a lesson timeline
   (Figma Student-App node 5907:25552 / Image #10). Colours from Hive DS. */

.ch-ic{width:34px;height:34px;border-radius:50%;background:#F5F2EF;display:flex;align-items:center;justify-content:center}

/* Expand wrapper — grid-template-rows 0fr→1fr pushes siblings down (normal flow) */

.ch-row-lessons{position:relative;background:var(--cb,#F9F7F5);padding:12px 24px 16px 20px;border-top:1px solid #EDE8E3;margin-top:-1px;overflow:hidden}

.ch-row-lessons::before{content:'';position:absolute;left:0;top:0;bottom:0;width:40px;background-image:linear-gradient(45deg,var(--c) 25%,transparent 25%,transparent 75%,var(--c) 75%),linear-gradient(45deg,var(--c) 25%,transparent 25%,transparent 75%,var(--c) 75%);background-size:12px 12px;background-position:0 0,6px 6px;opacity:.12;pointer-events:none}

/* Pattern band ends at the circle centre (x=40), so the timeline runs along its edge (node 3068:7303 / Image #44) */

@media(max-width:767px){.ch-row-progress-track{width:56px}}

/* Lesson rows with real Start/Resume/Review state — ported from the retired
   chapter page (maths-grade-3-chapter.html), generalized with a chIdx
   parameter since every chapter's lessons now render on this one page. */
/* Lesson rows — Figma node 3068:7303: hue numbered circle + eyebrow + name +
   accuracy + Start/Resume/Review/locked CTA, dividers between. Hue from row. */

/* Vertical timeline connector through the circle centres (Image #44) */

.lr-item.locked::before{background:rgba(41,40,39,.18)}

.lr-sno.done{background:var(--c);border:2px solid #1C1917}

.lr-sno.done .lr-sno-num{color:#1C1917}

.lr-sno.current{background:#fff;border:2.5px solid #1C1917;box-shadow:0 0 0 5px rgba(41,40,39,.08)}

.lr-sno.current .lr-sno-num{color:#1C1917}

.lr-sno.locked{background:var(--c2);border:1.5px solid var(--c2)}

.lr-sno.locked .lr-sno-num{color:var(--cd)}

.lr-sno-badge{position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:#1C1917;display:flex;align-items:center;justify-content:center}

.lr-sno-badge svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.lr-sno-lock{position:absolute;top:-5px;right:-6px;width:16px;height:16px}

.lr-sno-lock svg{width:16px;height:16px;display:block}

.lr-eyebrow{font-size:10px;line-height:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--cd)}

.lr-acc{font-size:12px;line-height:16px;color:rgba(41,40,39,.7)}

.lr-acc b{color:var(--cd);font-weight:500}

.lr-cta.ghost{border-color:transparent;background:#fff}

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

.lr-cta.disabled{opacity:.4;cursor:default;background:none;box-shadow:none}

.lr-cta.disabled:hover{background:none}

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

/* Lesson-preview + sign-in modals — ported from the retired chapter page */

.modal{background:#fff;width:400px;max-width:90vw;padding:28px 28px 24px;position:relative;border-radius:8px}

/* Out-of-sparks nudge. The markup uses these classes, which only the topic and
   exam pages defined — here the modal fell back to raw text and a default blue
   link. Same rules as maths-topic.html so all three read identically. */

/* App download CTA — ported from /maths-curriculum/, same component/colors */

/* RIGHT RAIL — Figma node 2375:18990 (scorecard pills + MathFit upgrade card) */
/* Right rail — Figma node 3068:7298 (Website-2026): #F5F2EF bg + #EDE8E3 left border + pattern; scorecard (tall pills) + MathFit card */

/* MathFit card — Figma inspect: angular gradient #74ACFC 0% / #F4AB52 50% / #E0A6FF 100%.
   Fill = gradient @50% over #FAF8F5; stroke = same gradient @100% (2px, inside). */

/* Resources list — same links as the landing page's "More ways to learn" */
.rp-resources{background:#fff;border:1px solid #EDE8E3;border-radius:8px;padding:0 16px}

.rp-res-title{font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#97948E;padding:16px 0 12px}

.rp-res-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #EDE8E3;text-decoration:none;color:#1C1917;font-size:14px;line-height:20px;font-weight:500}

.rp-res-item:hover .rp-res-name{text-decoration:underline}

.rp-res-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.rp-res-icon svg{width:18px;height:18px;display:block}

/* Bottom tab bar (tablet + mobile) — Figma node 5896:29167.
   Tabs move from the top bar to a fixed bottom bar; right rail is dropped. */

@media(max-width:1024px){
  /* Rail flows below the content (scorecard already lives in the top bar) */
  .shell{display:block;overflow-y:auto}
  .main{overflow-y:visible;border-right:none}
  .rightpanel{border-left:none;border-top:1px solid #EDE8E3;background-image:none;overflow-y:visible}
  /* Tablet: gradient spans the top, list cards share the row below it —
     same arrangement as the topic and exam tabs. auto-fit so a single list
     card fills the width instead of sitting at half. */

  /* Only one list card here, and the spanning CTA keeps both tracks alive so
     auto-fit can't collapse the empty one — span the card as well. */
  .rp-resources{grid-column:1 / -1}
}

@media(max-width:767px){
  /* Mobile top bar — Figma node 3064:5322: avatar left, pills + kebab right, no logo/tabs */

  /* Phone: rail back to a single column, 16px page margin */

  /* basis must exclude the 50px indent, or the row runs 50px past its
     container and the CTA clips at the screen edge on a phone. */

  /* Section header: smaller title + bar so a long grade name doesn't crush */

  .gsh-prog,.gsh-bar{width:96px}
  /* Workout card: shrink icon, arrow-only button so "23 problems" fits one line */
  .workout-card{padding:16px;align-items:center}
  .wc-icon img{width:44px;height:44px}

  /* Full-bleed at phone width — chips reach the screen edges */
  .gs-chips{margin:0 -16px;padding:0 16px 2px}

  /* Chapter row: drop the decorative progress track, give the name room */

  .ch-row-meta{gap:10px}
  .ch-row-count{font-size:11px}
}

/* Test Prep intro modal (opened from the Test Prep tab) */

/* Greyed with real colours, not opacity: opacity would also fade the tooltip
   bubble, which is a ::after on this same element. */