/* ============================================================
   UMAIMA'S DIGITAL NOTEBOOK — main stylesheet
   Warm, playful, kid-friendly design system.
   Structural language (card grids, glass panels, rings, hover
   lift) follows the reference layout; palette/type/tone are
   reworked for a Grade 3 learner.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800&family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');

:root{
  /* --- candy pastel palette --- */
  --cream:            #FFF8EC;
  --cream-deep:       #FFF1DC;
  --paper:            #FFFFFF;
  --ink:              #3A2E4D;
  --ink-soft:         #6B5E80;

  --sun:              #FFB627;   /* home / accents */
  --sun-deep:         #F58A07;
  --sky:              #33A1DE;   /* English */
  --sky-deep:         #1C7BB0;
  --leaf:             #3FA66A;   /* Urdu */
  --leaf-deep:        #278049;
  --coral:            #FF6F59;   /* Math */
  --coral-deep:       #E24E39;
  --gold:             #C89B3C;  /* Islamiyat */
  --gold-deep:        #9C7623;
  --grape:            #8B5FBF;   /* General Knowledge */
  --grape-deep:       #6A3FA0;

  --good:             #2FB380;
  --bad:              #E85D5D;

  --shadow-soft:      rgba(58, 46, 77, 0.10);
  --shadow-med:        rgba(58, 46, 77, 0.16);
  --shadow-strong:     rgba(58, 46, 77, 0.24);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  --sp-xs: .4rem;
  --sp-sm: .8rem;
  --sp-md: 1.4rem;
  --sp-lg: 2.2rem;
  --sp-xl: 3.2rem;

  --font-en-head: 'Baloo 2', 'Segoe UI', sans-serif;
  --font-en-body: 'Nunito', 'Segoe UI', sans-serif;
  --font-ur: 'Noto Nastaliq Urdu', serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; font-size:16px; }
body{
  font-family: var(--font-en-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(255,182,39,.16), transparent 40%),
    radial-gradient(circle at 92% 18%, rgba(51,161,222,.14), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(139,95,191,.10), transparent 45%),
    var(--cream);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom: 4rem;
}

.container{ max-width:1080px; margin:0 auto; padding:0 var(--sp-md); }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

/* ---------- [lang] blocks: per-block direction/typography ---------- */
[lang="ur"]{
  font-family: var(--font-ur);
  direction: rtl;
  text-align: right;
  line-height: 2.15;
  font-size: 1.18rem;
}
[lang="en"]{
  font-family: var(--font-en-body);
  direction: ltr;
  text-align: left;
}
h1[lang="ur"], h2[lang="ur"], h3[lang="ur"], .card-title[lang="ur"]{
  line-height: 2;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:40;
  background: rgba(255,248,236,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid rgba(58,46,77,0.06);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: .9rem; padding-bottom:.9rem;
}
.logo{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-en-head); font-weight:800; font-size:1.3rem;
  color: var(--ink);
}
.logo .logo-badge{
  width:42px; height:42px; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--sun), var(--coral));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow: 0 4px 14px var(--shadow-med);
}
.header-ring{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-en-head); font-weight:700; font-size:.85rem; color:var(--ink-soft); }
.breadcrumbs{ font-size:.85rem; color:var(--ink-soft); font-weight:600; }
.breadcrumbs a{ color:var(--sky-deep); }
.breadcrumbs a:hover{ text-decoration:underline; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ text-align:center; padding: var(--sp-xl) 0 var(--sp-lg); }
.hero h1{
  font-family: var(--font-en-head); font-weight:800;
  font-size: clamp(1.9rem, 5vw, 3rem);
  color: var(--ink);
  margin-bottom:.5rem;
}
.hero p{ color:var(--ink-soft); font-size:1.05rem; font-weight:600; }
.hero .hero-emoji{ font-size:2.4rem; display:block; margin-bottom:.3rem; }

/* ============================================================
   PROGRESS RINGS
   ============================================================ */
.ring{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
.ring svg{ transform: rotate(-90deg); }
.ring circle{ fill:none; stroke-linecap:round; }
.ring .ring-track{ stroke: rgba(58,46,77,0.1); }
.ring .ring-fill{ stroke: var(--sun-deep); transition: stroke-dashoffset .6s ease; }
.ring .ring-label{
  position:absolute; font-family:var(--font-en-head); font-weight:800;
  color:var(--ink); font-size:.8rem;
}

/* ============================================================
   CARD GRIDS (subjects + chapters)
   ============================================================ */
.card-grid{
  display:grid; gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: var(--sp-lg) 0;
}
.subject-card, .chapter-card{
  position:relative; overflow:hidden;
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: var(--sp-lg) var(--sp-md);
  box-shadow: 0 10px 26px var(--shadow-soft), 0 2px 6px var(--shadow-soft);
  border: 3px solid transparent;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease;
  display:flex; flex-direction:column; gap:.5rem;
  text-decoration: none; /* important: cards are <a> links */
  cursor: pointer;
}
.subject-card:hover, .chapter-card:hover{
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: 0 18px 34px var(--shadow-med);
  border-color: var(--accent, var(--sun));
}
.subject-card::after, .chapter-card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:8px;
  background: var(--accent, var(--sun));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transition: height .2s ease;
}
.subject-card:hover::after, .chapter-card:hover::after{ height:10px; }
.subject-card .card-icon, .chapter-card .card-icon{
  font-size:2.4rem; line-height:1;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.subject-card:hover .card-icon, .chapter-card:hover .card-icon{
  transform: scale(1.15) rotate(-3deg);
}
.subject-card .card-title{
  font-family: var(--font-en-head); font-weight:700; font-size:1.25rem; color:var(--ink);
}
.subject-card .card-title[lang="ur"]{ font-size:1.5rem; }
.chapter-card .card-title{ font-family: var(--font-en-head); font-weight:700; font-size:1.1rem; color:var(--ink); }
.chapter-card .card-title[lang="ur"]{ font-size:1.3rem; }
.subject-card .card-desc, .chapter-card .card-desc{ color:var(--ink-soft); font-size:.92rem; font-weight:600; }
.card-progress-row{ display:flex; align-items:center; gap:.6rem; margin-top:.4rem; }
.bar{ flex:1; height:10px; border-radius:var(--r-full); background:rgba(58,46,77,.08); overflow:hidden; }
.bar-fill{ height:100%; border-radius:var(--r-full); background: var(--accent, var(--sun-deep)); transition: width .5s ease; }
.bar-label{ font-size:.78rem; font-weight:800; color:var(--ink-soft); font-family:var(--font-en-head); min-width:2.6rem; text-align:right; }

.chapter-card .chapter-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.page-tag{
  display:inline-flex; align-items:center; gap:.3rem;
  background: var(--cream-deep); color: var(--ink-soft);
  border-radius: var(--r-full); padding:.25rem .7rem; font-size:.75rem; font-weight:800;
  font-family: var(--font-en-head); white-space:nowrap;
}
.badge{
  font-family:var(--font-en-head); font-weight:800; font-size:.78rem;
  background: rgba(47,179,128,.14); color: var(--good);
  border-radius: var(--r-full); padding:.2rem .6rem;
}

/* subject accent classes — exposes --accent and --accent-deep */
.acc-english{ --accent: var(--sky); --accent-deep: var(--sky-deep); }
.acc-urdu{ --accent: var(--leaf); --accent-deep: var(--leaf-deep); }
.acc-math{ --accent: var(--coral); --accent-deep: var(--coral-deep); }
.acc-islamiyat{ --accent: var(--gold); --accent-deep: var(--gold-deep); }
.acc-gk{ --accent: var(--grape); --accent-deep: var(--grape-deep); }

/* ============================================================
   CHAPTER PAGE
   ============================================================ */
.chapter-hero{
  background: var(--paper); border-radius: var(--r-xl);
  padding: var(--sp-lg); margin: var(--sp-md) 0 var(--sp-lg);
  box-shadow: 0 10px 26px var(--shadow-soft);
  border-top: 8px solid var(--accent, var(--sun));
}
.chapter-hero .unit-tag{
  font-family:var(--font-en-head); font-weight:800; font-size:.85rem;
  color: var(--accent-deep, var(--sun-deep)); text-transform:none;
  display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem;
}
.chapter-hero h1{ font-family:var(--font-en-head); font-weight:800; font-size:1.9rem; color:var(--ink); }
.chapter-hero h1[lang="ur"]{ font-size:2.3rem; }
.chapter-hero .lesson-outcomes{
  margin-top:1rem; background: var(--cream-deep); border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
}
.chapter-hero .lesson-outcomes summary{ cursor:pointer; font-family:var(--font-en-head); font-weight:700; color:var(--ink); }
.chapter-hero .lesson-outcomes ul{ margin-top:.6rem; padding-left:1.3rem; color:var(--ink-soft); font-size:.92rem; }
.chapter-hero .lesson-outcomes li{ margin-bottom:.3rem; }

.section-block{
  background: var(--paper); border-radius: var(--r-lg);
  padding: var(--sp-lg); margin-bottom: var(--sp-md);
  box-shadow: 0 6px 18px var(--shadow-soft);
}
.section-block h2{
  font-family: var(--font-en-head); font-weight:700; font-size:1.3rem;
  color: var(--ink); margin-bottom:.9rem;
  display:flex; align-items:center; gap:.5rem;
}
.section-block h2[lang="ur"]{ flex-direction:row-reverse; justify-content:flex-end; }

.story-text p{ margin-bottom:.9rem; font-size:1.05rem; }
.story-text[lang="ur"] p{ margin-bottom:1.1rem; }
.story-text .kw{ color: var(--coral-deep); font-weight:800; }

.dialogue-row{ display:flex; gap:.8rem; margin-bottom:.8rem; align-items:baseline; }
.dialogue-row .speaker{ font-family:var(--font-en-head); font-weight:800; color:var(--sky-deep); min-width:5.5rem; }
.dialogue-row[lang="ur"]{ flex-direction:row-reverse; text-align:right; }
.dialogue-row[lang="ur"] .speaker{ color: var(--leaf-deep); }
.dialogue-row .stage{ font-style:italic; color:var(--ink-soft); }

.vocab-grid{ display:grid; gap:.7rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.vocab-item{ background:var(--cream-deep); border-radius:var(--r-md); padding:.8rem 1rem; }
.vocab-item .w{ font-family:var(--font-en-head); font-weight:800; color:var(--coral-deep); }
.vocab-item .w[lang="ur"]{ color:var(--leaf-deep); }
.vocab-item .m{ color:var(--ink-soft); font-size:.92rem; }

.think-list, .wrap-list{ list-style:none; padding-left:0; }
.think-list li, .wrap-list li{
  position:relative; padding-left:1.6rem; margin-bottom:.6rem; color:var(--ink);
}
.think-list li::before, .wrap-list li::before{ content:"💭"; position:absolute; left:0; }
.wrap-list li::before{ content:"🎁"; }
[lang="ur"].think-list li, [lang="ur"].wrap-list li{ padding-left:0; padding-right:1.6rem; }
[lang="ur"].think-list li::before, [lang="ur"].wrap-list li::before{ left:auto; right:0; }

/* page number chip like the book's cloud badge */
.cloud-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background: #EAF6FF; color:#1C7BB0; font-family:var(--font-en-head); font-weight:800;
  font-size:.75rem; padding:.3rem .8rem; border-radius:50% 50% 50% 4px / 60% 60% 40% 40%;
  box-shadow: 0 2px 8px rgba(28,123,176,.25);
}

/* ============================================================
   EXERCISES
   ============================================================ */
.exercise{
  background: var(--paper); border-radius: var(--r-lg);
  padding: var(--sp-lg); margin-bottom: var(--sp-md);
  box-shadow: 0 6px 18px var(--shadow-soft);
  border-left: 6px solid var(--accent, var(--sun));
}
.exercise[lang="ur"]{ border-left:none; border-right: 6px solid var(--accent, var(--sun)); }
.exercise-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:1rem; }
.exercise-head h3{ font-family:var(--font-en-head); font-weight:700; font-size:1.15rem; color:var(--ink); }
.exercise-head .instructions{ color:var(--ink-soft); font-size:.9rem; font-weight:600; margin-top:.2rem; }

.ex-item{ margin-bottom:1.1rem; }
.ex-item:last-child{ margin-bottom:0; }
.ex-prompt{ font-weight:700; margin-bottom:.55rem; }

/* MCQ */
.mcq-options{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mcq-opt{
  border:2px solid rgba(58,46,77,.14); background:var(--cream);
  border-radius: var(--r-full); padding:.5rem 1rem; font-weight:700; font-size:.92rem;
  transition: all .15s ease;
}
.mcq-opt:hover{ border-color: var(--accent, var(--sky)); }
.mcq-opt.selected-correct{ background: rgba(47,179,128,.18); border-color:var(--good); color:#1d7355; }
.mcq-opt.selected-wrong{ background: rgba(232,93,93,.16); border-color:var(--bad); color:#b23f3f; }
.mcq-opt.reveal-correct{ border-color:var(--good); }
.mcq-opt[disabled]{ cursor:default; }

/* True/False */
.tf-buttons{ display:flex; gap:.6rem; }
.tf-btn{ border:2px solid rgba(58,46,77,.14); background:var(--cream); border-radius:var(--r-full); padding:.45rem 1.3rem; font-weight:800; }
.tf-btn.selected-correct{ background:rgba(47,179,128,.18); border-color:var(--good); }
.tf-btn.selected-wrong{ background:rgba(232,93,93,.16); border-color:var(--bad); }

/* Fill in blank */
.fib-input{
  border:2px solid rgba(58,46,77,.16); border-radius:var(--r-sm);
  padding:.45rem .7rem; font-family:inherit; font-size:1rem; width:180px; max-width:100%;
}
.fib-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.fib-icon{ font-size:1.2rem; width:1.4rem; text-align:center; }
.fib-input.correct{ border-color:var(--good); background:rgba(47,179,128,.08); }
.fib-input.wrong{ border-color:var(--bad); background:rgba(232,93,93,.08); }

/* Match */
.match-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.match-col{ display:flex; flex-direction:column; gap:.55rem; }
.match-chip{ border:2px solid rgba(58,46,77,.14); background:var(--cream); border-radius:var(--r-md); padding:.55rem .8rem; font-weight:700; text-align:left; }
.match-chip.selected{ border-color: var(--accent, var(--sky)); background:rgba(51,161,222,.12); }
.match-chip.correct{ border-color:var(--good); background:rgba(47,179,128,.16); }
.match-chip.wrong{ border-color:var(--bad); background:rgba(232,93,93,.14); }
.match-chip[disabled]{ opacity:.55; cursor:default; }
@media (max-width:560px){ .match-grid{ grid-template-columns:1fr; } }

/* Sort / classify */
.sort-source{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; padding:.8rem; background:var(--cream-deep); border-radius:var(--r-md); min-height:3.2rem; }
.sort-chip{ border:2px solid rgba(58,46,77,.16); background:var(--paper); border-radius:var(--r-full); padding:.4rem .9rem; font-weight:700; cursor:grab; }
.sort-chip.tapped{ outline:3px solid var(--accent,var(--sky)); }
.sort-buckets{ display:grid; gap:.9rem; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.sort-bucket{ border:2px dashed rgba(58,46,77,.22); border-radius:var(--r-md); padding:.8rem; min-height:4.5rem; }
.sort-bucket-title{ font-family:var(--font-en-head); font-weight:800; margin-bottom:.5rem; color:var(--ink-soft); font-size:.9rem; }
.sort-bucket .sort-chip{ margin:.2rem; cursor:default; }
.sort-bucket.over{ background:rgba(51,161,222,.08); border-color:var(--sky); }
.sort-chip.chip-correct{ border-color:var(--good); }
.sort-chip.chip-wrong{ border-color:var(--bad); }

/* Dropdown */
.dd-select{ border:2px solid rgba(58,46,77,.16); border-radius:var(--r-sm); padding:.4rem .6rem; font-family:inherit; font-weight:700; }
.dd-select.correct{ border-color:var(--good); }
.dd-select.wrong{ border-color:var(--bad); }

/* Sequencing */
.seq-list{ list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.seq-item{ background:var(--cream); border:2px solid rgba(58,46,77,.14); border-radius:var(--r-md); padding:.6rem .9rem; display:flex; align-items:center; gap:.7rem; cursor:grab; }
.seq-item .handle{ opacity:.5; }
.seq-item.correct{ border-color:var(--good); }
.seq-item.wrong{ border-color:var(--bad); }

/* Rewrite / reveal */
.reveal-btn{
  border:2px solid var(--accent, var(--sky)); background:transparent; color:var(--accent-deep, var(--sky-deep));
  border-radius:var(--r-full); padding:.4rem 1rem; font-weight:800; font-size:.85rem; margin-top:.5rem;
}
.reveal-box{ margin-top:.6rem; background:var(--cream-deep); border-radius:var(--r-md); padding:.7rem 1rem; display:none; }
.reveal-box.show{ display:block; }

/* Checklist (discussion) */
.check-row{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.6rem; }
.check-row input{ width:1.2rem; height:1.2rem; margin-top:.2rem; accent-color: var(--accent, var(--good)); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--font-en-head); font-weight:700; font-size:.95rem;
  border-radius: var(--r-full); padding:.6rem 1.4rem; border:none;
  background: var(--sun); color:#3A2200; box-shadow: 0 6px 16px rgba(255,182,39,.35);
  transition: transform .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-outline{ background:transparent; border:2px solid rgba(58,46,77,.2); color:var(--ink); box-shadow:none; }

.check-order-btn{ margin-top:.8rem; }

/* toast */
#toast-root{ position:fixed; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:.5rem; align-items:center; }
.toast{
  background: var(--ink); color:#fff; font-family:var(--font-en-head); font-weight:700;
  padding:.7rem 1.3rem; border-radius: var(--r-full); box-shadow:0 10px 24px rgba(0,0,0,.25);
  opacity:0; transform: translateY(10px); animation: toast-in .3s ease forwards, toast-out .3s ease forwards 2.4s;
}
@keyframes toast-in{ to{ opacity:1; transform:translateY(0); } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(-8px); } }

/* footer nav */
.chapter-nav{ display:flex; justify-content:space-between; margin-top:var(--sp-lg); gap:1rem; flex-wrap:wrap; }

/* Empty subject state */
.empty-note{ background:var(--paper); border-radius:var(--r-lg); padding:var(--sp-lg); text-align:center; color:var(--ink-soft); font-weight:600; box-shadow:0 6px 18px var(--shadow-soft); }

/* Poem & Text Styling */
.poem-text{ margin: 1rem 0; font-family: var(--font-ur); text-align: right; direction: rtl; }
.poem-couplet{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  background: var(--cream); border-radius: var(--r-md); padding: 0.75rem 1.25rem;
  margin-bottom: 0.6rem; border-right: 4px solid var(--accent, var(--leaf));
  font-size: 1.25rem; line-height: 2.1; color: var(--ink);
}
.poem-couplet .line1, .poem-couplet .line2{ flex: 1; min-width: 200px; }
.story-text p{ margin-bottom: 0.9rem; line-height: 1.8; color: var(--ink); }
.story-text[lang="ur"] p{ font-family: var(--font-ur); font-size: 1.2rem; line-height: 2.2; text-align: right; direction: rtl; }

@media (max-width:600px){
  .container{ padding:0 1rem; }
  .section-block, .exercise, .chapter-hero{ padding: 1.2rem; }
  .poem-couplet{ flex-direction: column; gap: 0.2rem; }
}