/* ============================================
   BAMA for Kids — Shared design system
   ============================================ */

:root{
  --ink:#241B14;
  --text:#2B2118;
  --muted:#8a7d5c;
  --faint:#c9c2b3;
  --bg:#ffffff;
  --surface:#FAF9F6;
  --surface-2:#F3EFE6;
  --border:#EAE4D8;
  --accent:#1F6E5C;
  --accent-light:#E8F5EE;
  --accent-2:#C68A2E;
  --accent-2-light:#FBF1DF;
  --red:#B23A2E;
  --red-light:#FDECEB;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:24px;
  --shadow:0 1px 2px rgba(36,27,20,.04), 0 8px 20px rgba(36,27,20,.06);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:var(--surface);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.page{
  max-width:460px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  padding:20px 20px 60px;
}
.burmese{font-family:'Padauk',sans-serif;}
.display{font-family:'Baloo 2',sans-serif;font-weight:700;}

/* ---- Header / brand ---- */
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(155deg, var(--accent) 0%, #164f42 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Padauk',sans-serif;font-weight:700;font-size:18px;
  box-shadow:0 3px 8px rgba(31,110,92,.28);
}
.brand-name{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;color:var(--ink);}
.header-links{display:flex;gap:14px;}
.header-links a{font-size:12.5px;color:var(--muted);text-decoration:none;font-weight:600;}
.header-links a:hover{color:var(--accent);}

/* ---- Dropdown / select ---- */
select.grade-select{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;color:var(--ink);
  border:1.5px solid var(--border);border-radius:var(--radius-s);
  padding:9px 14px;background:var(--bg);
  box-shadow:var(--shadow);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7d5c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:30px;
}

/* ---- Status line ---- */
.status-line{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:18px;
}
.status-line.paid{color:var(--accent);}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--faint);}
.status-line.paid .status-dot{background:var(--accent);}

.greeting{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:19px;color:var(--ink);
  margin-bottom:4px;
}

/* ---- Section titles ---- */
h2.section-title{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;color:var(--ink);
  margin:24px 0 10px;display:flex;align-items:center;gap:8px;
}
.section-line{flex:1;height:1px;background:var(--border);}
.soon{font-style:italic;color:var(--faint);font-weight:500;font-size:12.5px;}

/* ---- Letter line / tiles ---- */
.letter-line{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center;}
.tile{
  width:48px;height:48px;border-radius:var(--radius-s);
  display:flex;align-items:center;justify-content:center;
  font-family:'Padauk',sans-serif;font-size:23px;text-decoration:none;position:relative;flex-shrink:0;
  transition:transform .1s ease;
}
.tile.unlocked{background:var(--accent-2-light);color:var(--ink);border:1.5px solid #EEDBB0;}
.tile.unlocked.mastered{background:var(--accent-light);border-color:#BFE3D6;}
.tile.locked{background:var(--surface-2);color:var(--faint);}
.tile.blank{background:transparent;}
.tile .star{position:absolute;top:-5px;right:-5px;font-size:12px;}

/* ---- Collapsible chapter sections ---- */
details.chapter-collapse{margin-bottom:10px;}
details.chapter-collapse summary{
  display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  padding:8px 2px;font-family:'Padauk',sans-serif;font-size:15px;color:var(--muted);
}
details.chapter-collapse summary::-webkit-details-marker{display:none;}
details.chapter-collapse summary .chev{transition:transform .15s;flex-shrink:0;color:var(--faint);}
details.chapter-collapse[open] summary .chev{transform:rotate(90deg);}
details.chapter-collapse summary .done-badge{
  margin-left:auto;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:var(--accent);
  background:var(--accent-light);padding:3px 9px;border-radius:10px;
}
details.chapter-collapse .letter-line{margin-top:4px;}
@media (min-width:700px){
  .page{max-width:640px;padding:24px 30px 60px;}
  .tile{width:52px;height:52px;font-size:24px;}
  .letter-line{gap:9px;}
}

/* ---- Review pills ---- */
.review-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.review-pill{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12px;
  padding:8px 14px;border-radius:20px;text-decoration:none;
  background:var(--accent-2-light);color:var(--ink);border:1.5px solid #EEDBB0;
}
.review-pill.mastered{background:var(--accent-light);color:var(--accent);border-color:#BFE3D6;}
.review-pill.locked{background:var(--surface-2);color:var(--faint);border-color:transparent;pointer-events:none;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;
  padding:13px 18px;border-radius:var(--radius-s);border:none;text-decoration:none;
  cursor:pointer;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 10px rgba(31,110,92,.22);}
.btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--border);}
.btn-block{width:100%;}
.btn-ghost-icon{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);text-decoration:none;font-size:18px;background:var(--surface-2);border:none;
}
.btn-ghost-icon.ticked{background:var(--accent);color:#fff;}

/* ---- Cards ---- */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-m);
  padding:16px;box-shadow:var(--shadow);
}
.note-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:14px;font-size:12.5px;color:var(--muted);
}

/* ---- Forms ---- */
label.field-label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin:14px 0 5px;}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select.field{
  width:100%;padding:12px 13px;border:1.5px solid var(--border);border-radius:var(--radius-s);
  font-size:14px;font-family:'Inter',sans-serif;color:var(--text);background:#fff;
}
input:disabled{background:var(--surface-2);color:var(--faint);}
.field-sub{font-size:11.5px;color:var(--muted);margin-top:2px;}
.error-box{background:var(--red-light);color:var(--red);padding:11px 14px;border-radius:var(--radius-s);font-size:13px;margin-bottom:12px;}
.msg-box{background:var(--accent-light);color:var(--accent);padding:11px 14px;border-radius:var(--radius-s);font-size:13px;margin-bottom:12px;}