/* ==========================================================
   Calligraphy page — self-writing hero, Practice Pad,
   Nib Angle Lab, lettering styles.
   Shared bits live in course-page.css.
   ========================================================== */

/* ---------- Hero ---------- */
.cl-hero{ width:100%; max-width:500px; display:block; margin:0 auto; overflow:visible; filter: drop-shadow(0 26px 34px rgba(60,20,0,.3)); }
.cl-hero .cl-word{ font-family: 'Great Vibes', 'Fraunces', cursive; font-size:76px; text-anchor:middle; fill: var(--navy); stroke: var(--navy); stroke-width:1.2; }
.cl-hero .cl-hindi{ font-family: Kalam, 'Noto Sans Devanagari', sans-serif; font-weight:700; font-size:50px; text-anchor:middle; fill: var(--coaching-accent); stroke: var(--coaching-accent); stroke-width:1; }

/* ---------- Practice pad ---------- */
.pad-card{ padding:1.3rem; }
.pad-toolbar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.6rem 1rem; margin-bottom:.7rem; }
.pad-group{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; }
.pad-label{ font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--slate); margin-right:.2rem; }
.pad-color{
  width:28px; height:28px; border-radius:50%; border:3px solid #fff; background: var(--ink); box-shadow: 0 0 0 1.5px var(--line);
  transition: transform .15s ease, box-shadow .15s ease; padding:0;
}
.pad-color:hover{ transform: scale(1.1); }
.pad-color.is-active{ box-shadow: 0 0 0 2.5px var(--ink); transform: scale(1.1); }
.pad-guide[lang="hi"]{ font-family: Kalam, sans-serif; }
.pad-check{ font-size:.82rem; font-weight:600; color: var(--slate); display:flex; align-items:center; gap:.35rem; cursor:pointer; }
.pad-canvas-wrap{ border:1.5px solid var(--line); border-radius: var(--radius-md); overflow:hidden; background:#FFFDF6; }
#padCanvas{ display:block; width:100%; touch-action:none; cursor:crosshair; }

/* ---------- Nib lab ---------- */
.nib-control{ display:block; margin-bottom:.7rem; }
.nib-control span{ display:flex; justify-content:space-between; font-size:.8rem; font-weight:700; color: var(--slate); margin-bottom:.2rem; }
.nib-control b{ color: var(--coaching-accent); font-family: var(--font-display); }
.nib-control input[type=range]{ width:100%; accent-color: var(--coaching-accent); }
.nib-svg{ width:100%; display:block; background:#FFFDF6; border:1px solid var(--line); border-radius: var(--radius-md); }
.nib-svg .nib-label{ font-family: var(--font-body); font-weight:700; font-size:12px; fill: var(--slate); text-anchor:middle; }
.nib-icon{ width:52px; height:52px; flex:none; }
.nib-tip{ font-size:.86rem; color: var(--ink); font-weight:600; }

/* ---------- Styles ---------- */
.style-card{ padding:1.2rem; }
.style-sample{ font-size:2.2rem; line-height:1.2; color: var(--navy); margin-bottom:.5rem; min-height:2.8rem; }
.style-italic{ font-family: Fraunces, Georgia, serif; font-style:italic; font-weight:600; }
.style-script{ font-family: 'Great Vibes', cursive; font-size:2.6rem; }
.style-block{ font-family: var(--font-display); font-weight:800; letter-spacing:.06em; }
.style-hindi{ font-family: Kalam, sans-serif; font-weight:700; color: var(--coaching-accent); }