/* ============================================================================
 * styles.css — बच्चों के लिए रंग-बिरंगा, मोबाइल-फ़र्स्ट UI + प्रिंट नियम
 * ==========================================================================*/
:root{
  --blue:#1d6fd6; --blue2:#0f4fa8; --orange:#e07b1a; --green:#2fa84f;
  --pink:#e0568a; --purple:#7a4fd0; --sun:#f4c02a;
  --ink:#20242c; --mut:#5c6672; --line:#e2e6ee; --card:#fff; --bg:#f5f8fd;
  --radius:16px; --shadow:0 8px 24px rgba(20,50,90,.10);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 "Noto Sans Devanagari","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
h1,h2,h3{font-family:"Baloo 2","Tiro Devanagari Hindi",Georgia,serif;line-height:1.25;margin:0 0 .4em}
a{color:var(--blue2);text-decoration:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}

/* ---------- header ---------- */
header{
  background:linear-gradient(100deg,var(--blue),var(--purple)); color:#fff;
  padding:12px 5vw; display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20; box-shadow:0 2px 12px rgba(20,40,80,.18);
}
.logo{color:#fff;font:800 22px "Baloo 2",serif}
header nav{display:flex;gap:6px;flex-wrap:wrap}
header nav a{color:#fff;font-weight:700;font-size:15px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.14)}
header nav a:hover{background:rgba(255,255,255,.28)}

main{max-width:1150px;margin:0 auto;padding:20px 5vw 48px}
.crumb{margin:2px 0 12px}
.crumb a{font-weight:700}
.page{font-size:clamp(26px,5vw,40px);color:var(--blue2)}
.section-sub{color:var(--mut);max-width:70ch;margin-top:-6px}
.empty{color:var(--mut);font-style:italic}

/* ---------- buttons ---------- */
.btn,button,select,input{
  font:inherit; min-height:46px; border-radius:12px; border:1px solid var(--line);
  padding:9px 15px; background:#fff; color:var(--ink);
}
.btn,button.btn{background:var(--blue); color:#fff; border-color:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; cursor:pointer}
.btn:hover,button.btn:hover{background:var(--blue2);border-color:var(--blue2)}
.btn.ghost{background:#fff;color:var(--blue2);border-color:var(--line)}
.btn.ghost:hover{background:#eef4ff}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.inline{display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:15px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chip{cursor:pointer;min-height:40px;padding:6px 14px;border-radius:999px;font-weight:700;font-size:14px;
  background:#fff;border:1px solid var(--line)}
.chip[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.chip:hover{border-color:var(--blue)}

/* ---------- home ---------- */
.hero{padding:14px 0 6px}
.hero h1{font-size:clamp(30px,7vw,54px);color:var(--blue2)}
.lede{color:var(--mut);max-width:62ch;font-size:clamp(16px,2.3vw,19px)}
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:24px 0}
.mod{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.mod:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,50,90,.16)}
.mod-ico{font-size:38px;display:block;line-height:1}
.mod h3{margin:8px 0 4px;color:var(--blue2);font-size:20px}
.mod p{margin:0;color:var(--mut);font-size:14px}
.today-card{display:flex;gap:20px;align-items:center;background:linear-gradient(100deg,#fff6e6,#ffeccd);
  border:2px dashed var(--orange);border-radius:var(--radius);padding:18px 22px;flex-wrap:wrap}
.today-num{font:800 64px "Baloo 2",serif;color:var(--orange);line-height:1}

/* ---------- tables ---------- */
.num-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;margin-top:16px}
.num-card{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 10px;
  box-shadow:var(--shadow);transition:transform .12s ease}
.num-card:hover{transform:translateY(-3px);border-color:var(--blue)}
.num-big{font:800 42px "Baloo 2",serif;color:var(--blue)}
.num-sub{font-size:13px;color:var(--mut);font-weight:700}
.tbl-head{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.sheet-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);margin:16px 0}
.sheet-wrap canvas{width:100%;height:auto;display:block;border-radius:10px}

table.tt{width:100%;border-collapse:collapse}
table.tt td{padding:10px 8px;border-bottom:1px dashed var(--line);font:700 22px "Baloo 2",serif}
table.tt tr:nth-child(odd){background:#f7faff}
table.tt td.prod{color:var(--blue2);font-size:26px}
table.tt td.word{text-align:right;color:var(--mut);font:400 16px "Noto Sans Devanagari",sans-serif}
table.tt td.eq{white-space:nowrap}
table.tt td.eqs{width:30px;color:var(--mut);text-align:center}

/* ---------- charts ---------- */
.chart-grid{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:10px}
.ch-item{background:#f7faff;border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:84px}
.ch-item b{font:700 20px "Baloo 2",serif}
.ch-item.big{min-height:104px}
.ch-item.big b{font-size:32px}
.ch-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ch-table{background:#f7faff;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.ch-table>b{display:block;font:700 19px "Baloo 2",serif;color:var(--blue2);margin-bottom:6px}
.ch-table .eq{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;font:600 16px "Baloo 2",serif}
.ch-table .eq span{color:var(--ink)}
.ch-item small{color:var(--mut);font-size:12px}
.ch-item .emoji{font-size:34px;line-height:1}
.ch-item .shape{font-size:34px;line-height:1;color:var(--blue)}
.ch-item .sw{width:40px;height:40px;border-radius:50%;border:2px solid rgba(0,0,0,.12);display:block}
.ch-item.seq .step{font:800 15px "Baloo 2",serif;background:var(--blue);color:#fff;border-radius:999px;padding:1px 9px}
.ch-list{display:flex;flex-direction:column;gap:8px}
.ch-row{display:flex;gap:14px;align-items:baseline;background:#f7faff;border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;flex-wrap:wrap}
.ch-row b{font:700 18px "Baloo 2",serif;min-width:130px}
.ch-row span{color:var(--mut);font-size:14px}
@media(max-width:620px){.chart-grid{grid-template-columns:repeat(min(var(--cols,5),4),minmax(0,1fr))}}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);transition:transform .14s ease}
.tile:hover{transform:translateY(-3px);border-color:var(--blue)}
.tile-ico{font-size:32px;line-height:1}
.tile h3{margin:6px 0 2px;font-size:19px;color:var(--blue2)}
.tile p{margin:0;font-size:13px;color:var(--mut)}

/* ---------- projects ---------- */
.proj-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pill{background:#eef4ff;color:var(--blue2);border:1px solid #d6e4ff;border-radius:999px;
  padding:4px 12px;font-weight:700;font-size:13px}
.mats,.steps{padding-left:22px}
.mats li,.steps li{margin:6px 0}
.learn{background:#eafaf0;border-left:5px solid var(--green);padding:10px 14px;border-radius:0 10px 10px 0;margin:14px 0}
.tip{background:#fff6e6;border-left:5px solid var(--orange);padding:10px 14px;border-radius:0 10px 10px 0}

/* ---------- worksheets ---------- */
.ws-controls{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.ws-pick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}

/* ---------- quiz ---------- */
.quiz{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-top:16px}
.quiz-bar{display:flex;justify-content:space-between;color:var(--mut);font-weight:700;font-size:14px}
.quiz-q{font:800 clamp(34px,8vw,56px) "Baloo 2",serif;color:var(--blue2);text-align:center;margin:14px 0}
.quiz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.opt{font:800 24px "Baloo 2",serif;min-height:64px;border-radius:14px;border:2px solid var(--line);background:#f7faff;cursor:pointer}
.opt:hover{border-color:var(--blue)}
.opt.right{background:#e7f8ec;border-color:var(--green);color:#12662d}
.opt.wrong{background:#fdeaea;border-color:#e05252;color:#a01c1c}
.quiz-fb{text-align:center;font-weight:800;min-height:1.4em;margin-top:12px}
.quiz-end{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;box-shadow:var(--shadow);margin-top:16px}
.score{font:800 54px "Baloo 2",serif;color:var(--green)}

/* ---------- about / footer ---------- */
.about{max-width:900px;margin:0 auto;padding:8px 5vw 30px;color:var(--mut)}
.about h2{color:var(--blue2)}
footer{background:#20242c;color:#cbd3de;padding:16px 5vw;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}
footer a{color:#fff}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- print footer (website address) ---------- */
.print-foot{display:none}

/* ---------- print ---------- */
@media print{
  header,footer,#about,.crumb,.row,.chips,.ws-controls,.inline,.nav-links,.tbl-head .row{display:none!important}
  body{background:#fff}
  main{padding:0;max-width:none}
  .sheet-wrap{border:0;box-shadow:none;padding:0;margin:0}
  .page{margin-bottom:10px}
  .print-foot{display:block;text-align:center;margin:16px 0 4px;font-size:12px;color:#555;
    border-top:1px solid #ddd;padding-top:8px}
  @page{margin:12mm}
}
@media(max-width:600px){
  header{padding:10px 4vw}
  header nav a{padding:6px 9px;font-size:14px}
  main{padding:16px 4vw 40px}
  .num-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
  .num-big{font-size:34px}
}

/* ---------- static SEO pages ---------- */
.static-main{max-width:1000px}
.lead{color:var(--mut);max-width:70ch}
.cta{margin:16px 0}
.rel,.linkrow{font-size:14px;line-height:2}
.rel a,.linkrow a{display:inline-block;margin:0 6px 4px 0;padding:3px 10px;border:1px solid var(--line);
  border-radius:999px;background:#fff}
.linkbox{margin-top:28px;border-top:1px solid var(--line);padding-top:14px}
.linkbox h2{font-size:18px;margin:14px 0 6px}
.static .tt{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}