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

/* Content wrap */
.topic-wrap{padding:20px 24px;flex:1;opacity:0}

.topic-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}

.crumb-sep{color:rgba(41,40,39,.3)}

/* Topic hero — white card (Today's Workout component, node 2375:18990) */
.t-hero{margin-bottom:24px}

.workout-card{background:#fff;border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:14px;margin-bottom:14px}

.wc-head{display:flex;align-items:center;gap:16px;min-width:0}

.wc-icon .ch-ic{width:56px;height:56px}

.wc-icon .ch-ic svg{width:34px;height:34px}

.wc-headtext{display:flex;flex-direction:column;gap:4px;min-width:0}

.t-pills{display:flex;flex-wrap:wrap;gap:8px}

.t-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid rgba(41,40,39,.12);border-radius:20px;font-size:12px;color:rgba(41,40,39,.7)}

.t-pill strong{color:#1C1917;font-weight:500}

/* Grade filter chips — reuse grade-page chip style */
.gf-bar{margin-bottom:20px}

.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 sections — accordion rows styled like the grade-page chapter rows */
.section-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}

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

.gradebadge{background:var(--c2,#EDE8E3);color:var(--cd,#1C1917);font-family:'Athletics';font-size:15px;font-weight:400}

/* Per-chapter hue panel + faint pattern band (matches grade-page lesson panel) */
.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}

.t-chap-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 6px}

.t-chap-name{font-family:'UntitledSans';font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--cd,#1C1917);min-width:0}

/* Lesson rows — grade-page lesson timeline look */

.lr-cta.ghost{border-color:transparent;background:none;box-shadow:none;min-width:0;color:var(--cd,#1C1917);gap:6px;transition:background .12s,color .12s}

.lr-cta.ghost .cta-arrow{display:inline-block;transition:transform .15s ease}

.lr-cta.ghost:hover{background:rgba(28,25,23,.06);color:#1C1917}

.lr-cta.ghost:hover .cta-arrow{transform:translateX(3px)}

/* RIGHT RAIL — Figma node 3068:7298: #F5F2EF bg + #EDE8E3 left border + pattern */

/* MathFit card — angular gradient (grade-page inspect) */

/* Topic rail sections in white cards (match grade Resources) */
.rp-section{background:#fff;border:1px solid #EDE8E3;border-radius:8px;padding:0 16px}

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

.related-topic{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #EDE8E3;text-decoration:none}

.related-topic:hover .rt-name{color:#A055BE}

.rt-icon{font-size:16px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

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

.rt-name{font-size:14px;font-weight:500;color:#1C1917;transition:color .12s}

.rt-meta{font-size:11px;color:rgba(41,40,39,.5);margin-left:auto}

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

@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}
  .rightpanel{border-left:none;border-top:1px solid #EDE8E3;background-image:none;overflow-y:visible}
  /* Tablet: rail cards side by side (gradient spans the top, lists share a row).
     auto-fit so a single list card fills the width instead of sitting at half. */

  /* Stack header meta below the name so long "Grade N — Topic" titles get full width */
  .ch-row-header{flex-wrap:wrap}
  .ch-row-name{flex:1 1 0}
  .ch-row-chevron{order:2}
  /* Basis must exclude the indent, or the row runs 56px past its container. */
  .ch-row-meta{order:3;flex-basis:calc(100% - 56px);margin-left:56px;margin-top:2px}
}

@media(max-width:767px){
  .topic-wrap{padding:16px}
  /* Phone: rail back to a single column, 16px page margin */

  .workout-card{padding:16px}
  .wc-icon .ch-ic{width:44px;height:44px}
  .wc-icon .ch-ic svg{width:28px;height:28px}

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

  /* Chapter head stacks so a long chapter name doesn't collide with the link */
  .t-chap-head{flex-direction:column;align-items:flex-start;gap:4px;padding-bottom:8px}

  /* Start drops below and left-aligns with the lesson name (circle 40 + gap 10) */
  /* 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. */
}

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

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

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

/* Locked CTA once the 5 sparks are spent — greyed and inert. */
/* Greyed with real colours, not opacity: opacity would also fade the tooltip
   bubble, which is a ::after on this same element. */