/* =========================================================
   Lesson Planning Micro-Course — Design Tokens
   Palette rooted in the Indian classroom greenboard + the
   marigold garlands used at teacher functions.
   ========================================================= */
:root{
  --ink:        #14312B;   /* chalkboard green — primary text / dark surfaces */
  --ink-soft:   #3E5A52;   /* secondary text */
  --ink-faint:  #6C8078;
  --paper:      #F4F7F1;   /* chalk-dust tinted paper */
  --card:       #FFFFFF;
  --line:       #DCE3DA;
  --marigold:   #E7A33E;   /* primary accent — CTAs, thread nodes */
  --marigold-deep:#C77F1F;
  --marigold-tint:#FBEBD2;
  --sky:        #3E6E8E;   /* evidence / links */
  --sky-tint:   #E4EEF3;
  --coral:      #D3573F;   /* needs attention / alerts */
  --coral-tint: #FBE7E2;
  --success:    #4C8C63;
  --success-tint:#E7F3EB;
  --shadow: 0 1px 2px rgba(20,49,43,.06), 0 6px 20px rgba(20,49,43,.08);
  --shadow-lg: 0 8px 30px rgba(20,49,43,.14);
  --radius: 16px;
  --radius-sm: 10px;
  --font-display: Georgia, "Noto Serif", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Noto Sans Mono", Menlo, Consolas, monospace;
  --maxw: 640px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}
img{max-width:100%;display:block;}
button{font-family:inherit;}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0 0 .4em;color:var(--ink);}
p{margin:0 0 .8em;}
[lang="hi"]{font-family:var(--font-body);}

.hidden{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ---------- App shell ---------- */
#app{max-width:var(--maxw);margin:0 auto;min-height:100vh;position:relative;background:var(--paper);}

.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;background:rgba(244,247,241,.92);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar .back-btn{
  border:none;background:transparent;color:var(--ink);
  font-size:22px;line-height:1;padding:6px;border-radius:8px;cursor:pointer;
}
.topbar .back-btn:hover{background:var(--marigold-tint);}
.topbar .title{flex:1;font-weight:700;font-size:15px;font-family:var(--font-display);}
.lang-toggle{
  display:flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;
  font-size:12px;font-weight:700;flex-shrink:0;
}
.lang-toggle button{
  border:none;background:var(--card);color:var(--ink);
  padding:7px 12px;cursor:pointer;min-width:44px;min-height:36px;
}
.lang-toggle button.active{background:var(--ink);color:var(--paper);}

main{padding:16px 16px 40px;}

/* ---------- Signature motif: the planning thread ---------- */
.thread{
  display:flex;align-items:center;justify-content:space-between;
  margin:6px 0 18px;padding:0 4px;
}
.thread .seg{flex:1;height:2px;background:repeating-linear-gradient(to right,var(--marigold) 0 6px, transparent 6px 11px);margin:0 2px;}
.thread .node{
  width:11px;height:11px;border-radius:50%;background:var(--marigold-tint);
  border:2px solid var(--marigold-deep);flex-shrink:0;
}
.thread .node.done{background:var(--marigold);}
.thread .node.current{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 4px var(--marigold-tint);}

.thread-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-faint);margin:-12px 0 20px;padding:0 1px;font-weight:600;letter-spacing:.02em;}
.thread-labels span{flex:1;text-align:center;}
.thread-labels span:first-child{text-align:left;}
.thread-labels span:last-child{text-align:right;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:999px;font-weight:700;font-size:15px;
  padding:14px 22px;cursor:pointer;min-height:48px;
  transition:transform .12s ease, box-shadow .12s ease;
  font-family:var(--font-body);
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--marigold);color:var(--ink);box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--marigold-deep);color:#fff;}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn-ink:hover{background:#0c211d;}
.btn-outline{background:transparent;border:1.5px solid var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--card);}
.btn-ghost{background:transparent;color:var(--sky);padding:10px 14px;}
.btn-block{width:100%;}
.btn-sm{padding:9px 14px;font-size:13px;min-height:38px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- Home ---------- */
.hero{
  padding:34px 4px 10px;text-align:left;
}
.hero .eyebrow{color:var(--marigold-deep);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.hero h1{font-size:32px;line-height:1.1;margin-bottom:6px;}
.hero h1 .bilingual{display:block;font-size:19px;color:var(--ink-soft);font-weight:400;margin-top:4px;font-family:var(--font-body);}
.hero .tagline{font-size:16px;color:var(--ink-soft);font-style:italic;font-family:var(--font-display);margin:10px 0 22px;}
.hero .cta-group{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.badge{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;font-size:12.5px;color:var(--ink-soft);font-weight:600;
  display:flex;align-items:center;gap:6px;
}

/* ---------- Framework diagram ---------- */
.framework-diagram{
  background:var(--ink);border-radius:var(--radius);padding:22px 16px;margin:18px 0 28px;color:var(--paper);
}
.framework-diagram .fw-title{color:var(--marigold);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:14px;}
.fw-step{
  display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-bottom:1px dashed rgba(244,247,241,.18);
}
.fw-step:last-child{border-bottom:none;padding-bottom:0;}
.fw-step .fw-icon{
  width:34px;height:34px;border-radius:50%;background:var(--marigold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;
}
.fw-step .fw-body b{display:block;font-family:var(--font-display);font-size:16px;color:#fff;}
.fw-step .fw-body span.hi{display:block;font-size:13px;color:var(--marigold);margin:1px 0 3px;}
.fw-step .fw-body p{margin:0;font-size:13.5px;color:#CFE0D9;}
.fw-arrow{text-align:center;color:var(--marigold);font-size:12px;margin:-4px 0;}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:14px;box-shadow:var(--shadow);
}
.card h3{font-size:18px;margin-bottom:6px;}
.section-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--marigold-deep);margin-bottom:6px;}

/* ---------- Dashboard ---------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;text-align:left;}
.stat-card .num{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);}
.stat-card .lbl{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.progress-bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden;margin:6px 0 2px;}
.progress-bar > i{display:block;height:100%;background:var(--marigold);border-radius:999px;transition:width .3s ease;}

.part-group{margin-bottom:22px;}
.part-group .part-title{
  font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px 2px;
}
.lesson-row{
  display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 14px;margin-bottom:8px;cursor:pointer;text-align:left;width:100%;
}
.lesson-row:disabled, .lesson-row[aria-disabled="true"]{opacity:.55;cursor:not-allowed;}
.lesson-row .lnum{
  width:34px;height:34px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink-soft);flex-shrink:0;font-size:14px;
}
.lesson-row.done .lnum{background:var(--success);border-color:var(--success);color:#fff;}
.lesson-row .ltext{flex:1;min-width:0;}
.lesson-row .ltext .lt-title{font-weight:700;font-size:14.5px;}
.lesson-row .ltext .lt-sub{font-size:12px;color:var(--ink-faint);}
.lesson-row .chev{color:var(--ink-faint);font-size:18px;}

/* ---------- Lesson cycle ---------- */
.cycle-tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px;}
.cycle-tabs button{
  flex-shrink:0;border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);
  border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.cycle-tabs button.active{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.cycle-tabs button.done{border-color:var(--success);color:var(--success);}

.lesson-title{font-size:22px;margin-bottom:4px;}
.lesson-sub{color:var(--ink-soft);font-size:14px;margin-bottom:18px;}

.example-box{border-left:4px solid var(--coral);background:var(--coral-tint);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:12px 14px;margin:10px 0;}
.example-box.good{border-left-color:var(--success);background:var(--success-tint);}
.example-box .tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:4px;}
.example-box.good .tag{color:var(--success);}
.example-box:not(.good) .tag{color:var(--coral);}

.option-list{display:flex;flex-direction:column;gap:8px;margin:14px 0;}
.option-btn{
  text-align:left;border:1.5px solid var(--line);background:var(--card);border-radius:var(--radius-sm);
  padding:13px 14px;font-size:14.5px;cursor:pointer;min-height:48px;color:var(--ink);
}
.option-btn:hover{border-color:var(--sky);}
.option-btn.selected{border-color:var(--sky);background:var(--sky-tint);}
.option-btn.correct{border-color:var(--success);background:var(--success-tint);}
.option-btn.incorrect{border-color:var(--coral);background:var(--coral-tint);}

.feedback-box{border-radius:var(--radius-sm);padding:13px 14px;margin-top:10px;font-size:14px;}
.feedback-box.correct{background:var(--success-tint);color:#1f5138;border:1px solid var(--success);}
.feedback-box.incorrect{background:var(--coral-tint);color:#7a2e20;border:1px solid var(--coral);}

.nav-row{display:flex;gap:10px;margin-top:22px;}
.nav-row .btn{flex:1;}

/* ---------- Forms (builder) ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-weight:700;font-size:13.5px;margin-bottom:5px;}
.field .hint{font-size:12px;color:var(--ink-faint);margin-bottom:6px;}
.field input[type=text], .field input[type=number], .field textarea, .field select{
  width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 13px;font-size:15px;font-family:inherit;background:var(--card);color:var(--ink);
}
.field textarea{min-height:88px;resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--sky);}

.check-row{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);}
.check-row:last-child{border-bottom:none;}
.check-status{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;}
.check-status.strong{background:var(--success);}
.check-status.attention{background:var(--marigold-deep);}
.check-status.missing{background:var(--coral);}
.check-body b{font-size:14px;}
.check-body .suggestion{font-size:13px;color:var(--ink-soft);margin-top:3px;}

/* ---------- Assessment ---------- */
.q-progress{font-size:12px;color:var(--ink-faint);font-weight:700;margin-bottom:8px;}
.q-text{font-size:17px;font-weight:600;margin-bottom:14px;}
.score-ring{
  width:120px;height:120px;border-radius:50%;margin:16px auto;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  border:8px solid var(--marigold);
}
.score-ring b{font-size:28px;font-family:var(--font-display);}
.score-ring span{font-size:11px;color:var(--ink-soft);}

/* ---------- Certificate ---------- */
.certificate{
  background:var(--card);border:2px solid var(--marigold);border-radius:var(--radius);
  padding:30px 20px;text-align:center;position:relative;overflow:hidden;
}
.certificate::before{
  content:"";position:absolute;inset:8px;border:1px solid var(--marigold-tint);border-radius:12px;pointer-events:none;
}
.certificate .cert-eyebrow{color:var(--marigold-deep);font-weight:800;letter-spacing:.12em;font-size:11px;text-transform:uppercase;}
.certificate h2{font-size:20px;margin:10px 0 2px;}
.certificate .cert-sub{color:var(--ink-soft);font-size:13px;margin-bottom:18px;}
.certificate .cert-name{font-family:var(--font-display);font-size:26px;border-bottom:2px solid var(--ink);display:inline-block;padding:0 10px 6px;margin:10px 0 16px;}
.certificate .cert-body{font-size:13.5px;color:var(--ink-soft);max-width:420px;margin:0 auto 18px;}
.cert-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-faint);border-top:1px dashed var(--line);padding-top:12px;font-family:var(--font-mono);}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;
  font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

/* ---------- Install banner ---------- */
.install-banner{
  display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);
  border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:16px;
}
.install-banner span{flex:1;font-size:13px;}

@media (min-width: 480px){
  .hero h1{font-size:36px;}
}