/* ══════════════════════════════════════════════════════════════════════
   home-redesign.css — phonics-inspired home, unit-level sidebar,
   unit-overview screen, bonus-rule chips, confirm-on-Next modal.
   Everything is namespaced (.rc-* / --rc-*) and self-contained so it does
   NOT collide with course.css. Design ported from _design/home-redesign/.
   Accent standardised to the official brand turquoise #00A896.
   ══════════════════════════════════════════════════════════════════════ */

/* Vars on :root (NOT #course-body) so body-appended nodes — e.g. the confirm
   modal — can resolve them too. */
:root{
  --rc-ink:#292524; --rc-ink-mid:#57534E; --rc-ink-soft:#8A827B;
  --rc-cream:#FBF7F0; --rc-cream-2:#F3EDE3; --rc-line:#EBE4D8;
  --rc-teal:#00A896; --rc-teal-dark:#0C6E6A; --rc-teal-pale:#E7F5F4;
  --rc-red:#FF3131;                         /* brand red + "wrong" strikethrough */
  --rc-green:#22B455; --rc-greenp:#E5F7EC;  /* "done ✓" success — NOT tied to a unit */
  /* Unit hues — a single spectral gradient: teal → green → yellow → orange → red */
  --rc-u1:#00A896; --rc-u1p:#E0F5F2;
  --rc-u2:#22B455; --rc-u2p:#E5F7EC;
  --rc-u3:#EAB308; --rc-u3p:#FDF6DC;
  --rc-u4:#F97316; --rc-u4p:#FFEDDF;
  --rc-u5:#F0463A; --rc-u5p:#FFEAE7;
  --rc-amber:#B4790C; --rc-amberp:#FEF4E1; --rc-amberb:#F6DBA0;
  --rc-radius:18px;
}

/* ── shared ── */
.rc-mascot-img{object-fit:contain;}
.rc-arrowsvg{width:16px;height:16px}
.rc-sec-label{font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--rc-ink-soft); margin:0 2px 14px;}

/* ══ SIDEBAR (unit-level) ══ */
/* position:static defends against course.css's global `nav{position:fixed}` in
   case the wrapper is ever a <nav> again. */
#sidebar .rc-sb{position:static; display:flex; flex-direction:column; gap:4px; padding:8px 12px 16px; min-height:100%;}
.rc-sb-brand{display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:4px 10px 18px; margin-bottom:6px; border-bottom:1px solid var(--rc-line);}
.rc-sb-brand img{width:74px; height:74px; object-fit:contain; margin-bottom:4px;
  filter:drop-shadow(0 6px 10px rgba(12,110,106,.16));}
.rc-sb-brand .rc-mark{font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.3rem;
  letter-spacing:-.015em; line-height:1; color:var(--rc-teal);}
.rc-sb-brand .rc-mark span{color:var(--rc-red);}
.rc-sb-brand .rc-sub{font-size:.72rem; color:var(--rc-ink-soft); font-weight:500; margin-top:3px;}
.rc-sb-lbl{font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--rc-ink-soft); padding:14px 12px 6px;}
.rc-sb-item{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:12px;
  cursor:pointer; transition:background .12s; border:none; background:none; width:100%; text-align:left;
  font-family:'Fredoka',sans-serif;}
.rc-sb-item:hover{background:var(--rc-cream);}
.rc-sb-item.active{background:var(--rc-teal-pale);}
.rc-sb-ic{width:30px; height:30px; flex-shrink:0; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:.95rem; background:var(--rc-cream-2);}
.rc-sb-nm{flex:1; min-width:0; font-size:.88rem; font-weight:500; line-height:1.15; color:var(--rc-ink);}
.rc-sb-nm small{display:block; font-size:.68rem; font-weight:400; color:var(--rc-ink-soft); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rc-sb-item.active .rc-sb-nm{color:var(--rc-teal-dark); font-weight:600;}
.rc-sb-ct{font-family:'DM Mono',monospace; font-size:.7rem; color:var(--rc-ink-soft); flex-shrink:0;}
.rc-sb-ct.done{color:var(--rc-green);}
.rc-sb-spacer{flex:1;}

/* ── sidebar unit accordion (module dropdown) ── */
.rc-sb-unit-btn{width:100%;}
.rc-sb-caret-btn{margin-left:4px; border:none; background:none; cursor:pointer; padding:5px; border-radius:7px; display:flex; align-items:center; flex-shrink:0;}
.rc-sb-caret-btn:hover{background:var(--rc-cream-2);}
.rc-sb-caret{font-size:.62rem; color:var(--rc-ink-soft); transition:transform .16s ease; display:inline-block;}
.rc-sb-unit.open .rc-sb-caret{transform:rotate(180deg);}
.rc-sb-modules{display:none; margin:2px 0 6px 26px; padding-left:8px; border-left:1.5px solid var(--rc-line); flex-direction:column; gap:1px;}
.rc-sb-unit.open .rc-sb-modules{display:flex;}
.rc-sb-mod{display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:none;
  cursor:pointer; padding:6px 9px; border-radius:9px; font-family:'Fredoka',sans-serif; transition:background .12s;}
.rc-sb-mod:hover{background:var(--rc-cream);}
.rc-sb-mod.active{background:var(--rc-teal-pale);}
.rc-sb-mod-num{width:22px; height:22px; flex-shrink:0; border-radius:7px; background:var(--rc-cream-2);
  color:var(--rc-ink-mid); font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center;}
.rc-sb-mod.done .rc-sb-mod-num{background:var(--rc-greenp); color:#0F9B46;}
.rc-sb-mod.active .rc-sb-mod-num{background:var(--rc-teal); color:#fff;}
.rc-sb-mod-title{font-size:.78rem; color:var(--rc-ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rc-sb-mod.active .rc-sb-mod-title{color:var(--rc-teal-dark); font-weight:600;}
.rc-sb-ov-link{display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
  padding:7px 9px 6px; margin-top:2px; font-family:'Fredoka',sans-serif; font-size:.72rem; font-weight:600; color:var(--rc-teal-dark);}
.rc-sb-ov-link:hover{text-decoration:underline;}

/* ══ HOME ══ */
#home-view .rc-home{max-width:920px; margin:0 auto;}
.rc-greet{font-size:1.9rem; font-weight:600; line-height:1.1; color:var(--rc-ink);}
.rc-greet-sub{font-family:'Lora',serif; font-style:italic; color:var(--rc-ink-mid); font-size:1rem; margin:5px 0 22px;}

.rc-top{display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:30px;}
.rc-top.solo{grid-template-columns:1fr;}
.rc-continue{position:relative; overflow:hidden; border-radius:var(--rc-radius); cursor:pointer;
  background:linear-gradient(135deg, var(--rc-teal-dark), var(--rc-teal)); padding:22px 24px;
  display:flex; align-items:center; gap:16px; box-shadow:0 16px 30px -16px rgba(12,110,106,.7);}
.rc-continue::after{content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);}
.rc-cont-num{width:52px; height:52px; flex-shrink:0; border-radius:14px; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.4rem; color:#fff;}
.rc-cont-info{flex:1; min-width:0; color:#fff;}
.rc-cont-eyebrow{font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:4px;}
.rc-cont-title{font-size:1.15rem; font-weight:600; line-height:1.2;}
.rc-cont-group{font-size:.78rem; color:rgba(255,255,255,.78); margin-top:3px;}
.rc-cont-go{flex-shrink:0; background:#fff; color:var(--rc-teal-dark); font-weight:600; font-size:.86rem;
  padding:10px 16px; border-radius:30px;}

.rc-summary{background:#fff; border:1px solid var(--rc-line); border-radius:var(--rc-radius); padding:18px 20px;
  display:flex; flex-direction:column; justify-content:center; box-shadow:0 6px 18px -14px rgba(41,37,36,.5);}
.rc-sum-top{display:flex; align-items:baseline; gap:8px; margin-bottom:3px;}
.rc-sum-pct{font-size:1.9rem; font-weight:700; color:var(--rc-teal-dark); line-height:1;}
.rc-sum-of{font-size:.8rem; color:var(--rc-ink-soft);}
.rc-sum-label{font-size:.78rem; color:var(--rc-ink-mid); margin-bottom:12px;}
.rc-sum-seg{display:flex; gap:5px;}
.rc-sum-seg span{flex:1; height:8px; border-radius:6px; background:var(--rc-cream-2); overflow:hidden;}
.rc-sum-seg span i{display:block; height:100%; border-radius:6px;}

.rc-grid{display:grid; grid-template-columns:1fr 1fr; gap:15px;}

.rc-unit{position:relative; background:#fff; border:1px solid var(--rc-line); border-radius:var(--rc-radius);
  padding:18px 18px 15px 20px; cursor:pointer; box-shadow:0 6px 18px -14px rgba(41,37,36,.5);
  transition:transform .15s ease, box-shadow .15s ease; overflow:hidden; display:flex; flex-direction:column;}
.rc-unit:hover{transform:translateY(-3px); box-shadow:0 16px 30px -16px rgba(41,37,36,.55);}
.rc-unit::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--rc-c);}
.rc-unit.current{border-color:var(--rc-cb); box-shadow:0 12px 26px -14px var(--rc-cs);}
.rc-u-head{display:flex; align-items:flex-start; gap:12px;}
.rc-u-body{flex:1; min-width:0;}
.rc-u-chiprow{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:2px;}
.rc-u-chip{font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rc-cd); background:var(--rc-cp); padding:3px 8px; border-radius:20px;}
.rc-u-tag{font-size:.62rem; font-weight:600; padding:3px 9px; border-radius:20px;
  color:var(--rc-teal-dark); background:var(--rc-teal-pale); border:1px solid #CDE9E6;}
.rc-u-tag.muted{color:var(--rc-ink-soft); background:var(--rc-cream); border:1px solid var(--rc-line);}
.rc-u-name{font-size:1.12rem; font-weight:600; color:var(--rc-ink); line-height:1.1; margin-top:6px;}
.rc-u-outcome{font-family:'Lora',serif; font-size:.86rem; line-height:1.45; color:var(--rc-ink-mid); margin-top:7px;}
.rc-u-mascot{width:58px; height:58px; flex-shrink:0; object-fit:contain; background:var(--rc-cp); border-radius:14px; padding:5px;}
.rc-u-chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:11px;}
.rc-u-chips .rc-wr{font-family:'DM Mono',monospace; font-size:.72rem; background:var(--rc-cream);
  border:1px solid var(--rc-line); border-radius:7px; padding:3px 8px; color:var(--rc-ink-mid); white-space:nowrap;}
.rc-u-chips .rc-wr s{color:var(--rc-red); text-decoration-thickness:1.5px;}
.rc-u-chips .rc-wr b{color:var(--rc-teal-dark); font-weight:600;}
.rc-u-foot{display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:14px;}
.rc-badge{font-size:.72rem; font-weight:600; white-space:nowrap; flex-shrink:0;}
.rc-badge.done{color:var(--rc-green);}
.rc-badge.prog{color:var(--rc-cd);}
.rc-badge.new{color:var(--rc-ink-soft); background:var(--rc-cream); border:1px solid var(--rc-line); padding:3px 10px; border-radius:20px;}
.rc-u-bar{flex:1; height:5px; border-radius:5px; background:var(--rc-cream-2); overflow:hidden;}
.rc-u-bar i{display:block; height:100%; border-radius:5px; background:var(--rc-c);}
.rc-u-arrow{flex-shrink:0; color:var(--rc-cd); display:flex;}
.rc-continue-pill{margin-left:auto; flex-shrink:0; font-size:.72rem; font-weight:600; color:var(--rc-cd);
  background:var(--rc-cp); padding:5px 11px; border-radius:20px;}

.rc-unit-wide{grid-column:1 / -1; flex-direction:row; align-items:center; gap:20px; padding:16px 24px;}
.rc-unit-wide .rc-u-mascot{width:64px; height:64px;}
.rc-unit-wide .rc-uw-body{flex:0 1 320px; min-width:0;}
.rc-unit-wide .rc-uw-chips{display:flex; flex-wrap:wrap; gap:6px; flex:1;}
.rc-unit-wide .rc-uw-right{display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0;}
.rc-unit-wide .rc-uw-right .rc-u-bar{width:130px; flex:none;}

/* ══ UNIT OVERVIEW ══ */
#overview-view{max-width:920px; margin:0 auto;}
.rc-back{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600;
  color:var(--rc-ink-mid); background:none; border:none; cursor:pointer; margin-bottom:16px; font-family:'Fredoka',sans-serif;}
.rc-back:hover{color:var(--rc-teal-dark);}
.rc-ov-head{position:relative; overflow:hidden; background:#fff; border:1px solid var(--rc-line); border-radius:var(--rc-radius);
  padding:22px 24px 22px 26px; display:flex; gap:18px; align-items:center; box-shadow:0 8px 22px -16px rgba(41,37,36,.5); margin-bottom:26px;}
.rc-ov-head::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--rc-c);}
.rc-ov-mascot{width:78px; height:78px; flex-shrink:0; object-fit:contain; background:var(--rc-cp); border-radius:16px; padding:6px;}
.rc-ov-info{flex:1; min-width:0;}
.rc-ov-name{font-size:1.5rem; font-weight:600; line-height:1.1; color:var(--rc-ink);}
.rc-ov-outcome{font-family:'Lora',serif; font-size:.92rem; color:var(--rc-ink-mid); margin:6px 0 14px; line-height:1.45;}
.rc-ov-progrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.rc-ov-bar{flex:1; max-width:280px; height:7px; border-radius:6px; background:var(--rc-cream-2); overflow:hidden;}
.rc-ov-bar i{display:block; height:100%; border-radius:6px; background:var(--rc-c);}
.rc-ov-count{font-size:.78rem; font-weight:600; color:var(--rc-cd); white-space:nowrap;}
.rc-ov-continue{margin-left:auto; background:var(--rc-cd); color:#fff; font-weight:600; font-size:.84rem;
  padding:10px 16px; border-radius:30px; white-space:nowrap; cursor:pointer; border:none; font-family:'Fredoka',sans-serif;}

.rc-mod-list{display:flex; flex-direction:column; gap:9px;}
.rc-mod-row{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--rc-line); border-radius:14px;
  padding:13px 17px; cursor:pointer; transition:transform .13s ease, box-shadow .13s ease; box-shadow:0 4px 14px -12px rgba(41,37,36,.5);}
.rc-mod-row:hover{transform:translateX(3px); box-shadow:0 10px 22px -14px rgba(41,37,36,.5);}
.rc-mod-num{position:relative; width:34px; height:34px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem; background:var(--rc-cream-2); color:var(--rc-ink-mid);}
.rc-mod-row.done .rc-mod-num{background:var(--rc-greenp); color:#0F9B46;}
.rc-mod-check{position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; background:var(--rc-green);
  color:#fff; font-size:.58rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.15);}
.rc-mod-row.current{border-color:var(--rc-cb); box-shadow:0 10px 24px -14px var(--rc-cs);}
.rc-mod-row.current .rc-mod-num{background:var(--rc-cd); color:#fff;}
.rc-mod-thumb{width:46px; height:46px; flex-shrink:0; border-radius:11px; object-fit:contain; background:var(--rc-cp); padding:4px;}
.rc-mod-main{flex:1; min-width:0;}
.rc-mod-title{font-size:.98rem; font-weight:600; color:var(--rc-ink); line-height:1.2;}
.rc-mod-desc{font-family:'Lora',serif; font-size:.8rem; color:var(--rc-ink-mid); line-height:1.4; margin-top:2px;}
.rc-mod-sub{display:flex; align-items:center; gap:7px; margin-top:7px; flex-wrap:wrap;}
.rc-mod-ws{font-size:.64rem; font-weight:600; color:var(--rc-teal-dark); background:var(--rc-teal-pale); border:1px solid #CDE9E6; padding:2px 8px; border-radius:20px;}
.rc-mod-bonus{font-size:.64rem; font-weight:600; color:var(--rc-amber); background:var(--rc-amberp); border:1px solid var(--rc-amberb);
  padding:2px 8px; border-radius:20px; display:inline-flex; align-items:center; gap:4px;}
.rc-mod-bonus .rc-caret{transition:transform .15s ease; display:inline-block;}
.rc-mod-bonus.open .rc-caret{transform:rotate(180deg);}
.rc-mod-bonuslist{display:none; flex-basis:100%; margin-top:8px; padding:10px 12px; background:var(--rc-amberp);
  border:1px solid var(--rc-amberb); border-radius:10px;}
.rc-mod-bonuslist.open{display:block;}
.rc-mod-bonuslist ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px;}
.rc-mod-bonuslist li{font-size:.76rem; color:#7A5307; line-height:1.35; padding-left:16px; position:relative;}
.rc-mod-bonuslist li::before{content:"✦"; position:absolute; left:0; color:var(--rc-amber); font-size:.68rem;}
.rc-mod-right{flex-shrink:0; display:flex; align-items:center; gap:12px;}
.rc-mod-state{font-size:.72rem; font-weight:600; color:var(--rc-ink-soft);}
.rc-mod-state.done{color:var(--rc-green);}
.rc-mod-state.current{color:var(--rc-cd);}
.rc-mod-continue{background:var(--rc-cd); color:#fff; font-weight:600; font-size:.76rem; padding:7px 13px; border-radius:20px;}
.rc-mod-arrow{color:var(--rc-ink-soft); display:flex;}

/* ══ CONFIRM-ON-NEXT MODAL + injected module footer ══ */
.rc-modfoot{margin:36px auto 8px; max-width:640px; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-top:22px; border-top:1px dashed var(--rc-line); text-align:center;}
.rc-modfoot-hint{font-size:.82rem; color:var(--rc-ink-soft); font-family:'Lora',serif; font-style:italic;}
.rc-modfoot-btn{background:var(--rc-teal); color:#fff; font-weight:700; font-size:.95rem; padding:13px 26px; border-radius:30px;
  border:none; cursor:pointer; font-family:'Fredoka',sans-serif; box-shadow:0 10px 24px -12px rgba(0,168,150,.6); transition:transform .12s ease;}
.rc-modfoot-btn:hover{transform:translateY(-2px);}
.rc-modfoot-btn.finish{background:linear-gradient(135deg,var(--rc-u5),#E05530); box-shadow:0 10px 24px -12px rgba(255,107,68,.6);}

.rc-confirm-overlay{position:fixed; inset:0; z-index:4000; background:rgba(41,37,36,.5); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; padding:24px;}
.rc-confirm-overlay.open{display:flex;}
.rc-confirm{background:#fff; border-radius:20px; max-width:380px; width:100%; padding:26px 24px 22px; text-align:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4); font-family:'Fredoka',sans-serif;}
.rc-confirm-emoji{font-size:2rem; margin-bottom:6px;}
.rc-confirm-mascot{width:64px; height:64px; object-fit:contain; display:block; margin:0 auto 8px;}
.rc-confirm-title{font-size:1.12rem; font-weight:700; color:var(--rc-ink); margin-bottom:5px;}
.rc-confirm-sub{font-size:.85rem; color:var(--rc-ink-mid); line-height:1.4; margin-bottom:18px;}
.rc-confirm-actions{display:flex; flex-direction:column; gap:9px;}
.rc-confirm-yes{background:var(--rc-teal); color:#fff; font-weight:700; font-size:.92rem; padding:12px; border-radius:12px;
  border:none; cursor:pointer; font-family:'Fredoka',sans-serif;}
.rc-confirm-no{background:none; color:var(--rc-ink-mid); font-weight:600; font-size:.86rem; padding:10px; border-radius:12px;
  border:1px solid var(--rc-line); cursor:pointer; font-family:'Fredoka',sans-serif;}
.rc-confirm-no:hover{background:var(--rc-cream);}

/* ══ MOBILE NOTICE STRIP + mobile brand (shown only when the sidebar is hidden) ══ */
.rc-mobile-notice{display:none;}
.rc-mobile-brand{display:none;}
@media(max-width:900px){
  .rc-mobile-notice{display:flex; align-items:center; justify-content:center; gap:7px;
    position:sticky; top:56px; z-index:90;   /* pin under the fixed 56px nav; below the in-module nav bar (z:100) */
    font-size:.8rem; font-weight:600; color:var(--rc-teal-dark); background:var(--rc-teal-pale);
    border-bottom:1px solid #CDE9E6; padding:10px 16px; text-align:center; line-height:1.3;}
  .rc-mobile-notice b{font-weight:700; color:#E05530;}  /* coral pop, matching the phonics-course strip */
  .rc-mobile-brand{display:flex; align-items:center; gap:9px; margin-bottom:16px;}
}

/* ── responsive ── */
@media(max-width:760px){
  #home-view .rc-top{grid-template-columns:1fr;}
  #home-view .rc-grid{grid-template-columns:1fr;}
  .rc-unit-wide{flex-direction:column; align-items:flex-start; gap:12px;}
  /* row-layout flex sizing would reserve vertical space in a column → reset it */
  .rc-unit-wide .rc-uw-body{flex:0 0 auto;}
  .rc-unit-wide .rc-uw-chips{flex:0 0 auto;}
  .rc-unit-wide .rc-uw-right{margin-left:0;}
  .rc-greet{font-size:1.55rem;}
  .rc-ov-head{flex-direction:column; text-align:center;}
  .rc-ov-continue{margin-left:0;}
}