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

/* Lock badge on the Enrichment tab (coming soon) — same as the other pages. */

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

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

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(41,40,39,.5);margin-bottom:24px;flex-wrap:wrap}

/* Exam / band switcher — grouped chips, Figma parity with grade switcher */

.gs-chips{display:flex;flex-wrap:wrap;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;text-decoration:none}

/* Section header — Figma node 5896:28984 */
.grade-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}

.gsh-icon{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center}

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

.grade-section-sub{font-size:13px;color:rgba(41,40,39,.5);margin-bottom:16px}

/* Chapter list — full-width rows, click-to-expand accordion (one open at a
   time). Same pattern/DS as maths-grade-3.html. */
.about-section{margin-bottom:24px}

.section-divider{border:none;border-top:1px solid #EDE8E3;margin:0 0 24px}

.ch-row-num{font-size:12px;font-weight:500;color:rgba(41,40,39,.5);width:16px;flex-shrink:0;text-align:center}

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

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

/* Block / worksheet rows with a proper CTA (Mock Test / Practice) */
.block-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px}

.block-row .block-name{font-size:13px;color:#1C1917;line-height:1.35;min-width:0}

.block-row.locked .block-name{color:#97948E}

.block-cta{height:32px;min-width:96px;padding:0 14px;border-radius:4px;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;flex-shrink:0}

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

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

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

.block-cta.ghost{border-color:transparent}

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

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

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

/* About-unit placeholder rows (TBD, no content written yet) */
.ch-row-lessons .block-locked{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 10px;font-size:13px;line-height:1.35;color:#97948E}

.ch-row-lessons .block-tag{font-size:10px;color:#97948E;flex-shrink:0;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}

.about-topic{border-radius:4px;cursor:pointer}

.about-topic:hover{background:rgba(0,0,0,.04)}

.about-topic-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 10px;font-size:13px;font-weight:600;color:#1C1917;line-height:1.35}

.about-topic-caret{color:#97948E;transition:transform .15s ease;flex-shrink:0;display:flex}

.about-topic-caret svg{width:16px;height:16px;fill:currentColor;display:block}

.about-topic.open .about-topic-caret{transform:rotate(180deg)}

.about-topic-body{display:none;padding:2px 10px 12px}

.about-topic.open .about-topic-body{display:block}

.about-topic-body p{font-size:13px;color:#57534E;line-height:1.6;margin-bottom:10px}

.about-faq-item{margin-bottom:10px}

.about-faq-q{font-size:13px;font-weight:700;color:#1C1917;margin-bottom:3px}

.about-faq-a{font-size:13px;color:#57534E;line-height:1.6}

/* RIGHT RAIL — Figma node 3068:7298: scorecard (tall pills) + MathFit card */

/* Sign-up gradient CTA — Cuemath brand gradient (orange → purple) */
.rp-cta{border:2px solid transparent;border-radius:8px;padding:16px;
  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}

.rp-cta-tag{display:block;font-size:10px;line-height:14px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(41,40,39,.6);margin-bottom:8px}

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

.rp-cta-sub{font-size:12px;line-height:16px;color:rgba(41,40,39,.7);margin-bottom:16px}

.rp-cta-btn{display:block;width:100%;text-align:center;background:#1C1917;color:#F9F7F5;border:1px solid #1C1917;border-radius:4px;padding:10px;font-family:'UntitledSans';font-size:12px;font-weight:500;text-decoration:none}

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

/* Other Exams — quick-switch list (right rail on desktop) */
.rp-exam-nav{background:#fff;border:1px solid #EDE8E3;border-radius:8px;overflow:hidden}

.ren-title{font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#97948E;padding:12px 16px;border-bottom:1px solid #EDE8E3}

.ren-item{display:block;padding:12px 16px;border-bottom:1px solid #EDE8E3;font-size:13px;line-height:20px;color:rgba(41,40,39,.7);text-decoration:none}

.ren-item:hover{background:#FAF1E6;color:#1C1917}

.ren-item.active{color:#1C1917;font-weight:500;background:#FAF1E6}

.ren-item:last-child{border-bottom:none}

/* Tablet/mobile copy of the CTA (right rail is hidden ≤1024) */
.cta-mobile{display:none}

/* Bottom tab bar (tablet + mobile) — Figma node 5896:29167 */

@media(max-width:1024px){
  .rightpanel{display:none}
  /* Tablet: gradient spans the top, list cards share the row below it — same
     arrangement as the grade and topic tabs (this page stacks the rail's
     content inside .main rather than showing the rail itself). */
  .cta-mobile{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start;margin-bottom:24px}
  .cta-mobile .rp-cta{grid-column:1 / -1}
  .cta-mobile .rp-exam-nav{grid-column:1 / -1}
  .shell{grid-template-columns:minmax(0,1fr)}
  .main{min-width:0}
}

@media(max-width:767px){
  .gs-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}

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

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