/* ==========================================================================
   हिंदी समझ पुस्तिका — THE LISTENING BOOK: styles
   --------------------------------------------------------------------------
   Same palette as the Hindi Reading Lab, so the two feel like one place.
   Tablet first: every word in a line is a button a finger can hit (44px),
   the Devanagari is always the biggest thing on the card, and the colours
   carry the feedback: green = the tablet heard it, orange = listen to this
   one, indigo = the word being spoken right now.
   ========================================================================== */

:root {
  --hs-ink: #23222A;
  --hs-ink-soft: #5D5B69;
  --hs-paper: #FFFFFF;
  --hs-ground: #FDFBF7;
  --hs-ground-2: #F5F0E8;
  --hs-line: #E7E0D4;
  --hs-saffron: #E4572E;
  --hs-saffron-ink: #B53A17;
  --hs-saffron-soft: #FCE9E1;
  --hs-green: #0E8C7F;
  --hs-green-ink: #0A6B61;
  --hs-green-soft: #DCF1EE;
  --hs-gold: #E0A500;
  --hs-gold-soft: #FFF4D1;
  --hs-indigo: #4B3F9E;
  --hs-indigo-soft: #ECE9FB;
  --hs-r: 16px;
  --hs-r-lg: 22px;
  --hs-tap: 44px;
  --hs-shadow: 0 1px 2px rgba(35,34,42,.05), 0 8px 24px rgba(35,34,42,.07);
  --hs-deva: 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', 'Nirmala UI', serif;
}

.hs-app, .hs-sheet {
  font-family: 'Jost', 'Nunito', system-ui, -apple-system, sans-serif;
  color: var(--hs-ink);
  font-size: 18px;
  line-height: 1.55;
}
.hs-app { background: var(--hs-ground); min-height: 60vh; }
.hs-app *, .hs-app *::before, .hs-app *::after,
.hs-sheet *, .hs-sheet *::before, .hs-sheet *::after { box-sizing: border-box; }
.hs-app button, .hs-sheet button { font-family: inherit; }
/* common.css paints every heading purple Fredoka One — take them back */
.hs-app h1, .hs-app h2, .hs-app h3, .hs-sheet h1, .hs-sheet h2 {
  font-family: 'Jost', sans-serif; font-weight: 600; color: var(--hs-ink); margin: 0; letter-spacing: 0;
}
[lang="hi"], .hs-line, .hs-chunk-hi, .hs-td-hi, .hs-sheet-word, .hs-beats-row, .hs-part-hi, .hs-kicker {
  font-family: var(--hs-deva);
}

.hs-page { max-width: 820px; margin: 0 auto; padding: 0 16px 80px; }
.hs-how { color: var(--hs-ink-soft); margin: 10px 0 14px; font-size: 1rem; }
.hs-gloss { color: var(--hs-ink-soft); margin: 4px 0 12px; }
.hs-h2 { font-size: 1.2rem; margin: 30px 0 8px; }
.hs-green { color: var(--hs-green-ink); font-weight: 600; }
.hs-orange { color: var(--hs-saffron-ink); font-weight: 600; }

/* ------------------------------------------------------------------ buttons */

.hs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--hs-tap); padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--hs-line); background: var(--hs-paper); color: var(--hs-ink);
  font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hs-btn span { font-family: var(--hs-deva); font-weight: 400; font-size: 1.02rem; }
.hs-btn:focus-visible, .hs-w:focus-visible, .hs-part:focus-visible { outline: 3px solid var(--hs-indigo); outline-offset: 2px; }
.hs-btn:disabled { opacity: .45; cursor: default; }
.hs-mic { background: var(--hs-saffron); border-color: var(--hs-saffron); color: #fff; padding: 8px 20px; }
.hs-mic span { color: #fff; }
.hs-mic.is-on, .is-listening .hs-mic { background: var(--hs-ink); border-color: var(--hs-ink); }
.hs-play.is-on, .hs-slow.is-on { background: var(--hs-indigo-soft); border-color: var(--hs-indigo); }
.hs-go { background: var(--hs-ink); border-color: var(--hs-ink); color: #fff; }
.hs-go span { color: #fff; }
.hs-big { font-size: 1.15rem; padding: 12px 26px; min-height: 52px; }
.hs-ghost { background: transparent; }
.hs-yes { background: var(--hs-green); border-color: var(--hs-green); color: #fff; }
.hs-yes span { color: #fff; }
.hs-rec.is-on { background: var(--hs-saffron-soft); border-color: var(--hs-saffron); }
.hs-mini { min-height: var(--hs-tap); padding: 6px 14px; font-size: .95rem; }
.hs-x { width: var(--hs-tap); padding: 0; font-size: 1.1rem; }

/* --------------------------------------------------------------------- hero */

.hs-hero { padding: 26px 0 6px; }
.hs-kicker { margin: 0; font-size: 1rem; color: var(--hs-saffron-ink); }
.hs-title { font-size: clamp(1.6rem, 5.4vw, 2.4rem); line-height: 1.25; margin: 4px 0 8px; }
.hs-title span { font-family: var(--hs-deva); font-weight: 400; color: var(--hs-saffron-ink); }
.hs-sub { color: var(--hs-ink-soft); margin: 0 0 16px; }

.hs-miccard {
  background: var(--hs-paper); border: 1.5px solid var(--hs-line); border-radius: var(--hs-r);
  padding: 14px 16px; margin: 8px 0 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.hs-miccard > b { flex: 1 1 260px; font-weight: 500; }
.hs-miccard .hs-fb { flex-basis: 100%; }
.hs-miccard.is-off { border-color: var(--hs-gold); background: var(--hs-gold-soft); display: block; }
.hs-say { font-size: 1.25rem; font-weight: 400; }

.hs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hs-stat { background: var(--hs-paper); border: 1.5px solid var(--hs-line); border-radius: var(--hs-r); padding: 12px 14px; text-align: center; }
.hs-stat b { display: block; font-size: 1.45rem; font-weight: 600; }
.hs-stat span { font-size: .88rem; color: var(--hs-ink-soft); }

.hs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 6px; }
.hs-cta-where { color: var(--hs-ink-soft); font-size: .95rem; }
.hs-cta-where [lang="hi"] { font-size: 1.1rem; color: var(--hs-ink); }
.hs-done { font-weight: 600; color: var(--hs-green-ink); }

.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-chip { background: var(--hs-saffron-soft); border-color: var(--hs-saffron); }
.hs-chip [lang="hi"] { font-size: 1.35rem; font-weight: 400; }

.hs-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hs-part {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 12px;
  background: var(--hs-paper); border: 1.5px solid var(--hs-line); border-radius: var(--hs-r);
  color: var(--hs-ink); text-decoration: none; box-shadow: var(--hs-shadow); min-height: 44px;
}
.hs-part.is-next { border-color: var(--hs-saffron); }
.hs-part-n { font-size: .82rem; letter-spacing: .08em; color: var(--hs-saffron-ink); font-weight: 600; font-family: var(--hs-deva); }
.hs-part-hi { font-size: 1.3rem; line-height: 1.35; }
.hs-part-en { font-size: .92rem; color: var(--hs-ink-soft); }
.hs-part-c { font-size: .86rem; color: var(--hs-ink-soft); }
.hs-part .hs-prog-bar { flex: none; height: 8px; margin-top: auto; }
.hs-next { position: absolute; top: 10px; right: 12px; font-size: .8rem; font-weight: 600;
  background: var(--hs-saffron); color: #fff; border-radius: 999px; padding: 2px 10px; }
.hs-footlinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------------------------------------------------------------- progress */

.hs-prog { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.hs-prog-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--hs-ground-2); overflow: hidden; display: block; margin: 6px 0 2px; }
.hs-prog-bar i { display: block; height: 100%; background: var(--hs-green); border-radius: 999px; }
.hs-prog-n { font-size: .88rem; color: var(--hs-ink-soft); white-space: nowrap; }

/* ------------------------------------------------------------------ top bar */

.hs-top { padding: 16px 0 4px; }
.hs-back { display: inline-flex; align-items: center; min-height: var(--hs-tap); color: var(--hs-ink-soft);
  text-decoration: none; font-weight: 600; font-family: var(--hs-deva); font-size: 1.02rem; }
.hs-top-t h1 { font-size: clamp(1.35rem, 4.6vw, 1.9rem); line-height: 1.35; }
.hs-top-t h1[lang="hi"] { font-family: var(--hs-deva); font-weight: 400; }
.hs-top-t p { margin: 2px 0 0; color: var(--hs-ink-soft); }

/* --------------------------------------------------------------------- card */

.hs-card {
  background: var(--hs-paper); border: 1.5px solid var(--hs-line); border-radius: var(--hs-r-lg);
  padding: 14px 16px 12px; margin: 12px 0; box-shadow: var(--hs-shadow);
  transition: border-color .2s, box-shadow .2s;
}
.hs-card.is-listening { border-color: var(--hs-saffron); box-shadow: 0 0 0 4px var(--hs-saffron-soft); }
.hs-card.is-focus { border-color: var(--hs-indigo); box-shadow: 0 0 0 4px var(--hs-indigo-soft); }

.hs-line { font-size: clamp(1.45rem, 4.4vw, 1.85rem); line-height: 1.9; }
.hs-w {
  font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 3px solid transparent;
  border-radius: 8px; padding: 2px 4px; margin: 0 -1px; min-height: var(--hs-tap); cursor: pointer;
  display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}
.hs-w.is-hit { background: #C8ECE5; border-bottom-color: var(--hs-green); color: var(--hs-green-ink); }
.hs-w.is-miss { background: #FBD3C3; border-bottom-color: var(--hs-saffron); color: var(--hs-saffron-ink); }
.hs-w.is-now { background: #DCD6FA; border-bottom-color: var(--hs-indigo); color: var(--hs-indigo); }
.hs-punct { color: var(--hs-ink-soft); }

.hs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.hs-pill { margin-left: auto; font-size: .9rem; font-weight: 600; padding: 3px 12px; border-radius: 999px; font-family: var(--hs-deva); }
.hs-st1 { background: var(--hs-saffron-soft); color: var(--hs-saffron-ink); }
.hs-st2 { background: var(--hs-green-soft); color: var(--hs-green-ink); }
.hs-st3 { background: var(--hs-green); color: #fff; }
.hs-st4 { background: var(--hs-gold-soft); color: #7A5A00; border: 1.5px solid var(--hs-gold); }

.hs-fb { font-size: 1rem; margin-top: 8px; }
.hs-fb:empty { display: none; }
.hs-fb.is-good { color: var(--hs-green-ink); }
.hs-fb.is-try { color: var(--hs-ink); }
.hs-fb.is-note { color: var(--hs-ink-soft); }
.hs-fb-row { margin-top: 8px; }
.hs-note { margin: 0 0 6px; font-size: .95rem; color: var(--hs-ink-soft); }
.hs-ear { color: var(--hs-saffron-ink); font-family: var(--hs-deva); font-size: 1.1rem; animation: hs-pulse 1.2s ease-in-out infinite; }
@keyframes hs-pulse { 50% { opacity: .45; } }
.hs-heard { margin-top: 6px; font-size: .9rem; color: var(--hs-ink-soft); font-family: var(--hs-deva); }
.hs-heard [lang="hi"] { font-size: 1.05rem; color: var(--hs-ink); }

.hs-hint { margin: 10px 0 0; font-size: .92rem; color: var(--hs-ink-soft); font-style: italic; }
.hs-hint[hidden], .hs-after[hidden] { display: none; }
.hs-en { margin-top: 10px; font-size: 1.02rem; color: var(--hs-ink); border-left: 4px solid var(--hs-green); padding: 2px 0 2px 12px; }
.hs-en [lang="hi"] { font-size: 1.1rem; }
.hs-whole { margin-top: 8px; font-weight: 600; }
.hs-alt { margin-top: 6px; font-size: .95rem; color: var(--hs-ink-soft); }
.hs-alt [lang="hi"] { font-size: 1.12rem; color: var(--hs-ink); }

/* compact cards: one word or a short phrase */
.hs-compact { padding: 10px 12px; margin: 8px 0; border-radius: var(--hs-r); }
.hs-compact .hs-line { font-size: clamp(1.55rem, 5vw, 1.9rem); line-height: 1.5; }
.hs-compact .hs-actions { margin-top: 4px; gap: 6px; }
.hs-compact .hs-btn { padding: 6px 12px; }
.hs-compact .hs-slow { display: none; }

.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 12px; }

/* story, poem */
.hs-para { border-left: 4px solid var(--hs-line); padding-left: 12px; margin: 22px 0; }
.hs-para-n { font-family: var(--hs-deva); font-size: .95rem; color: var(--hs-saffron-ink); font-weight: 600; }
.hs-para-en { margin: 10px 0 0; padding: 10px 14px; background: var(--hs-green-soft); border-radius: var(--hs-r); font-size: 1.02rem; }
.hs-para-en[hidden] { display: none; }
.hs-moral { border-left-color: var(--hs-gold); }
.hs-stanza { border-left: 4px solid var(--hs-indigo-soft); padding-left: 12px; margin: 18px 0; }
.hs-who { background: var(--hs-paper); border: 1.5px solid var(--hs-line); border-radius: var(--hs-r); padding: 12px 16px; }
.hs-who ul { margin: 6px 0 0; padding-left: 20px; }
.hs-who-hi { font-size: 1.2rem; }

/* words */
.hs-grp { font-size: 1.1rem; margin: 26px 0 4px; padding-bottom: 4px; border-bottom: 2px solid var(--hs-line); }
.hs-grp [lang="hi"] { font-size: 1.25rem; font-weight: 400; }
.hs-wordgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 12px; align-items: start; }
.hs-wordrow .hs-card { margin: 10px 0; }
.hs-mean { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--hs-line); }
.hs-mean .hs-en { margin-top: 0; }
.hs-mean .hs-card { box-shadow: none; background: var(--hs-ground); margin: 6px 0 0; }
.hs-anslabel { margin-top: 10px; font-size: .9rem; color: var(--hs-ink-soft); font-family: var(--hs-deva); }

/* chunks */
.hs-chunks { border-collapse: collapse; width: 100%; margin-top: 12px; font-size: .98rem; table-layout: auto; }
.hs-chunks td, .hs-chunks th { border: 1.5px solid var(--hs-line); padding: 6px 8px; text-align: center; vertical-align: middle; }
.hs-chunks th { font-size: .85rem; color: var(--hs-ink-soft); font-weight: 600; width: 1%; white-space: nowrap; }
.hs-chunk-hi { font-size: 1.25rem; }
.hs-wrong, .hs-right { margin: 10px 0 0; padding: 6px 12px; border-left: 5px solid var(--hs-saffron); background: var(--hs-saffron-soft); border-radius: 0 10px 10px 0; }
.hs-right { border-left-color: var(--hs-green); background: var(--hs-green-soft); font-weight: 600; }

.hs-idea { background: var(--hs-paper); border: 2px solid var(--hs-ink); border-radius: var(--hs-r); padding: 12px 16px; margin: 16px 0; }
.hs-idea b { font-size: 1.3rem; font-weight: 400; display: block; line-height: 1.5; }
.hs-idea p { margin: 6px 0 0; color: var(--hs-ink-soft); }
.hs-method { border: 1.5px dashed var(--hs-ink-soft); border-radius: var(--hs-r); padding: 12px 16px; margin: 16px 0; }
.hs-method ol { margin: 8px 0 0; padding-left: 22px; }
.hs-method li { margin: 6px 0; }
.hs-method [lang="hi"] { font-size: 1.12rem; }

.hs-partnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 30px; }
.hs-partnav .hs-go { margin-left: auto; }

/* compare yourself */
.hs-more:empty { display: none; }
.hs-compare { margin-top: 10px; padding: 12px; border-radius: var(--hs-r); background: var(--hs-ground-2); }
.hs-compare-how { margin: 0 0 8px; font-size: .95rem; }
.hs-compare-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.hs-compare-row[hidden] { display: none; }

/* ------------------------------------------------------------- word helper */

.hs-sheet-back {
  position: fixed; inset: 0; z-index: 100; background: rgba(35,34,42,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.hs-sheet {
  background: var(--hs-paper); width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  border-radius: 24px 24px 0 0; padding: 14px 18px 24px; box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
@media (min-width: 700px) {
  .hs-sheet-back { align-items: center; }
  .hs-sheet { border-radius: 24px; }
}
.hs-sheet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hs-sheet-word { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1.35; }
.hs-beats { margin: 4px 0 6px; }
.hs-beats-l { font-size: .9rem; color: var(--hs-ink-soft); font-family: var(--hs-deva); }
.hs-beats-row { font-size: 2rem; line-height: 1.5; }
.hs-beat { background: var(--hs-indigo-soft); border-radius: 10px; padding: 0 8px; }
.hs-beat-dot { color: var(--hs-indigo); margin: 0 4px; }
.hs-beat-gap { color: var(--hs-ink-soft); margin: 0 8px; }
.hs-tips { margin-top: 12px; display: grid; gap: 8px; }
.hs-tip { border-left: 4px solid var(--hs-gold); background: var(--hs-gold-soft); padding: 8px 12px; border-radius: 0 12px 12px 0; }
.hs-tip b { display: block; }
.hs-tip p { margin: 3px 0 0; font-size: .98rem; }
.hs-cmp-wrap { margin-top: 12px; }
.hs-cmp-wrap summary { cursor: pointer; font-weight: 600; min-height: var(--hs-tap); display: flex; align-items: center; }

/* ------------------------------------------------------------- grown-ups */

.hs-grown p { margin: 6px 0 10px; }
.hs-dev { padding-left: 0; list-style: none; margin: 6px 0; }
.hs-dev li { margin: 6px 0; }
.hs-dev .is-ok { color: var(--hs-green-ink); }
.hs-dev .is-bad { color: var(--hs-saffron-ink); }
.hs-table { border-collapse: collapse; width: 100%; }
.hs-table th, .hs-table td { border-bottom: 1px solid var(--hs-line); padding: 6px 8px; text-align: left; }
.hs-td-hi { font-size: 1.3rem; }
.hs-hardline { padding: 8px 0; border-bottom: 1px solid var(--hs-line); }

@media (prefers-reduced-motion: reduce) {
  .hs-ear { animation: none; }
  .hs-card, .hs-w { transition: none; }
}