/* v489: larger Gurmukhi for elders. Only when /sit is Punjabi
   (html lang=pa, or the app lang state data-lang=pa).
   Noto Sans Gurmukhi is already loaded by i18n.js (font-display: swap,
   the family is the Gurmukhi subset). Other languages are untouched.
   Body copy is 20px. Library card descriptions are 23px with line-height 1.65.
   Titles sit above that, line-height 1.6–1.7, weight 400 so the strokes stay readable. */

html:is([lang="pa"], [data-lang="pa"]) {
  --pa-gurmukhi: "Noto Sans Gurmukhi", "Raavi", "Nirmala UI", sans-serif;
}

html:is([lang="pa"], [data-lang="pa"]) :is(
  .ls-lib-title,
  .ls-name,
  .lib-name,
  .sit-name,
  .lane-title,
  .sit-box-title,
  .earned-title,
  .mc-title,
  .sit-checkin-title,
  .sit-intro-title,
  .sit-title,
  .why-stamps-title,
  .a2hs-title
) {
  font-family: var(--pa-gurmukhi);
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

html:is([lang="pa"], [data-lang="pa"]) .ls-lib-title {
  font-size: 30px;
  line-height: 1.55;
}

html:is([lang="pa"], [data-lang="pa"]) :is(.ls-name, .lib-name, .sit-name) {
  font-size: 26px;
  line-height: 1.6;
}

html:is([lang="pa"], [data-lang="pa"]) :is(.lane-title, .sit-name-line) {
  font-size: 28px;
  line-height: 1.6;
  max-width: 100%;
}

/* The player name was already large, with a line-height tight enough to
   clip Gurmukhi. Keep it large, and give the vowel signs room. */
html:is([lang="pa"], [data-lang="pa"]) .sit-box-title {
  font-size: 34px;
  line-height: 1.6;
  font-weight: 400;
  max-width: min(18.5rem, 100%);
}

/* Library card descriptions sit above the 20px body copy so the line is easy to read. */
html:is([lang="pa"], [data-lang="pa"]) .sit-line {
  font-family: var(--pa-gurmukhi);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: break-word;
  word-break: normal;
}

html:is([lang="pa"], [data-lang="pa"]) :is(
  .day-subline,
  .timer-audio,
  .timer-state,
  .sit-box-line,
  .sit-box-nudge,
  .sit-box-soon,
  .sit-invite,
  .earned-fruit,
  .earned-kind,
  .earned-thanks,
  .earned-keepsake,
  .sit-checkin p,
  .sit-intro-copy,
  .sit-intro-kicker,
  .mc-line,
  .mc-meta,
  .mc-eyebrow,
  .why-stamps p,
  .gym-return-open,
  .gym-return-line,
  .gym-kicker,
  .stamp-seal-line,
  .stamp-seal-title
) {
  font-family: var(--pa-gurmukhi);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: break-word;
  word-break: normal;
}

html:is([lang="pa"], [data-lang="pa"]) :is(
  .day-subline,
  .timer-audio,
  .timer-state,
  .sit-box-line,
  .sit-box-nudge,
  .sit-invite,
  .earned-fruit,
  .earned-kind,
  .earned-thanks,
  .sit-checkin p,
  .sit-intro-copy,
  .mc-line,
  .mc-meta,
  .why-stamps p,
  .gym-return-open,
  .gym-return-line,
  .stamp-seal-line
) {
  font-size: 20px;
  line-height: 1.65;
}

html:is([lang="pa"], [data-lang="pa"]) .earned-keepsake,
html:is([lang="pa"], [data-lang="pa"]) body.is-earned-open .earned-screen[data-finish] .earned-keepsake {
  font-size: 22px;
  line-height: 1.55;
  font-weight: 400;
}

html:is([lang="pa"], [data-lang="pa"]) body.is-earned-open :is(.earned-fruit, .earned-kind) {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
}

html:is([lang="pa"], [data-lang="pa"]) .mc-title {
  font-size: 26px;
  line-height: 1.45;
}

html:is([lang="pa"], [data-lang="pa"]) .mc-eyebrow,
html:is([lang="pa"], [data-lang="pa"]) .sit-intro-kicker,
html:is([lang="pa"], [data-lang="pa"]) .gym-kicker {
  font-size: 16px;
  line-height: 1.5;
}

html:is([lang="pa"], [data-lang="pa"]) .sit-checkin-title,
html:is([lang="pa"], [data-lang="pa"]) .sit-intro-title,
html:is([lang="pa"], [data-lang="pa"]) .stamp-seal-title {
  font-size: 28px;
  line-height: 1.5;
}

html:is([lang="pa"], [data-lang="pa"]) .sit-title {
  line-height: 1.35;
}

/* English gloss under a Gurmukhi title stays a quiet Latin line. */
html:is([lang="pa"], [data-lang="pa"]) .ls-en {
  font-family: Outfit, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.45;
}

html:is([lang="pa"], [data-lang="pa"]) :is(
  .btn,
  button#begin-sit,
  .sit-box-play,
  .day-phase button,
  .play,
  .ls-more-en,
  .back-pill,
  .sit-headphones,
  .sit-howto-link,
  .phase-switch,
  .lib-chip,
  .lib-len-btn,
  .finish-stamp-btn,
  .finish-stamp-link,
  .earned-exit,
  .sit-menu-link,
  .sit-menu .full-site,
  .sit-menu .dd-share,
  .i18n-menu li,
  .more-sheet-list a,
  .a2hs-pill,
  .sit-checkin-link,
  .why-stamps-close,
  .stamp-seal-go,
  .stamp-seal-skip,
  .sit-box-tool
) {
  font-family: var(--pa-gurmukhi);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}

html:is([lang="pa"], [data-lang="pa"]) :is(
  .btn,
  button#begin-sit,
  .sit-box-play,
  .play,
  .ls-more-en,
  .back-pill,
  .sit-headphones,
  .phase-switch,
  .finish-stamp-btn,
  .earned-exit,
  .sit-menu-link,
  .sit-menu .full-site,
  .sit-menu .dd-share,
  .a2hs-pill,
  .stamp-seal-go,
  .stamp-seal-skip,
  .lib-len-btn,
  .sit-box-tool
) {
  font-size: 20px;
}

html:is([lang="pa"], [data-lang="pa"]) :is(
  .btn,
  button#begin-sit,
  .sit-box-play,
  .day-phase button,
  .play,
  .ls-more-en,
  .back-pill,
  .sit-howto-link,
  .phase-switch,
  .finish-stamp-btn,
  .finish-stamp-link,
  .earned-exit,
  .sit-menu-link,
  .sit-menu .dd-share,
  .i18n-menu li,
  .more-sheet-list a,
  .a2hs-pill,
  .lib-chip,
  .lib-len-btn,
  .sit-box-tool,
  .stamp-seal-go,
  .stamp-seal-skip,
  .timer-digits,
  .sit-box-digits
) {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}

html:is([lang="pa"], [data-lang="pa"]) .day-phase button {
  height: auto;
  font-size: 20px;
  padding: 0.45rem 0.85rem;
  line-height: 1.35;
}

html:is([lang="pa"], [data-lang="pa"]) .sit-howto-link {
  font-size: 20px;
  font-weight: 400;
}

html:is([lang="pa"], [data-lang="pa"]) .play {
  height: auto;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
}

html:is([lang="pa"], [data-lang="pa"]) .ls-more-en {
  height: auto;
  max-width: 100%;
  white-space: normal;
}

html:is([lang="pa"], [data-lang="pa"]) .lib-chip:not(.lib-search-chip) {
  height: auto;
  font-size: 20px;
  padding: 0.4rem 0.95rem;
  white-space: nowrap;
}

html:is([lang="pa"], [data-lang="pa"]) .lib-chip:not(.lib-search-chip)::before {
  top: 0;
  bottom: 0;
  height: auto;
  transform: none;
}

html:is([lang="pa"], [data-lang="pa"]) .lib-search-chip.lib-chip {
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 0;
}

html:is([lang="pa"], [data-lang="pa"]) .i18n-menu li {
  font-size: 20px;
  white-space: nowrap;
}

html:is([lang="pa"], [data-lang="pa"]) .i18n-header-pill {
  font-family: var(--pa-gurmukhi);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
}

html:is([lang="pa"], [data-lang="pa"]) body.is-earned-open :is(.finish-stamp-btn, .earned-exit, .finish-stamp-link) {
  font-family: var(--pa-gurmukhi);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  min-height: 44px;
}

html:is([lang="pa"], [data-lang="pa"]) :is(.ls-lib, .ls-row, .sit-box-panel, .day-home, .earned-screen, .mc-card) {
  max-width: 100%;
}

html:is([lang="pa"], [data-lang="pa"]) .ls-row > div:not(.sit-actions) {
  min-width: 0;
}

@media (max-width: 420px) {
  html:is([lang="pa"], [data-lang="pa"]) .sit-quiet-links.mc-cards {
    grid-template-columns: 1fr;
  }
}