/* =============================================================
   Koi Hor Nahi Hai Mera — page styles
   One ground, one ink, one font. Restraint.
   ============================================================= */

:root {
  /* One red, one cream. Everything derives. */
  --kh-bg:        #6b0e16;                       /* richer, more vibrant deep red */
  --kh-ink:       #f4ead0;                       /* warm light-yellow cream */
  --kh-ink-soft:  rgba(244, 234, 208, 0.68);
  --kh-ink-mid:   rgba(244, 234, 208, 0.28);
  --kh-rule:      rgba(244, 234, 208, 0.18);

  /* Cormorant retains the devotional display character. EB Garamond is the
     companion IAST face: its Latin Extended glyphs keep dots, rings, macrons,
     and under-marks optically consistent at large mobile sizes. */
  --kh-serif:   "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --kh-iast-serif: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

html, body {
  background: var(--kh-bg);
  color: var(--kh-ink);
  font-family: var(--kh-serif);
}

.song-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 36px 140px;
  color: var(--kh-ink);
  font-family: var(--kh-serif);
  padding-bottom: calc(156px + env(safe-area-inset-bottom));
}

.song-home {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kh-ink);
  background: var(--kh-bg);
  border: 1px solid var(--kh-ink-mid);
  border-radius: 50%;
  text-decoration: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, transform 120ms ease;
}
.song-home:hover { background: rgba(244, 234, 208, 0.10); border-color: rgba(244, 234, 208, 0.55); }
.song-home:active { transform: scale(0.94); }
.song-home:focus-visible { outline: 2px solid var(--kh-ink); outline-offset: 3px; }

/* ---------- Fixed top controls ----------
   These are deliberately quiet counterparts to the integrated bottom player:
   share remains available in standalone/PWA mode, while the link control makes
   the active auto-scroll state legible without adding a persistent text label. */
#songShare,
#songSync {
  position: fixed;
  /* Sit just into the upper safe-area margin on a phone: present without
     consuming the first reading line below the status area. One name for the
     resting offset: app.css adds the scroll compensation to it during a view
     swipe and must not restate the expression. */
  --song-control-top: max(8px, calc(env(safe-area-inset-top) - 16px));
  top: var(--song-control-top);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--kh-ink-mid);
  border-radius: 50%;
  color: var(--kh-ink);
  /* This is deliberately a solid ground-colour disc — exactly the player
     ground and the home control's visual family, not a translucent overlay
     or a second accent red. */
  background-color: var(--kh-bg);
  opacity: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
  z-index: 45;
}
/* Named for the same reason as --song-control-top: app.css subtracts the
   containing-block inset from these during a swipe. */
#songSync { --song-control-left: max(18px, calc(10px + env(safe-area-inset-left))); left: var(--song-control-left); }
#songShare { --song-control-right: max(18px, calc(10px + env(safe-area-inset-right))); right: var(--song-control-right); }
#songShare:hover,
#songSync:hover,
#songSync[aria-pressed="true"] {
  border-color: rgba(244, 234, 208, 0.55);
  background-color: var(--kh-bg);
}
#songShare:active,
#songSync:active { transform: scale(0.94); }
#songShare:focus-visible,
#songSync:focus-visible { outline: 2px solid var(--kh-ink); outline-offset: 3px; }
#songShare svg,
#songSync svg { width: 18px; height: 18px; }

/* A matched lock pair communicates the state directly without changing the
   control's ring, weight, or position. Locked means lyrics follow playback;
   unlocked means the reader has detached scrolling from playback. */
#songSync .sync-icon { display: block; }
#songSync[aria-pressed="true"] .sync-icon-unlock,
#songSync[aria-pressed="false"] .sync-icon-lock { display: none; }

/* A quiet confirmation, deliberately adjacent to Share rather than a modal or
   screen-wide banner. It exists only after a desktop copy attempt. */
.song-control-status {
  position: fixed;
  top: max(62px, calc(50px + env(safe-area-inset-top)));
  right: max(16px, calc(10px + env(safe-area-inset-right)));
  z-index: 46;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--kh-rule);
  border-radius: 999px;
  color: var(--kh-ink);
  background: var(--kh-bg);
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.2;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ---------- Hint inside the hero, above the divider ---------- */
.song-hint {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--kh-serif);
  font-size: 15px;
  color: var(--kh-ink-soft);
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* ---------- Hero ---------- */
.song-hero {
  margin: 0 0 72px;
  padding: 0 0 36px;
  border-bottom: 1px solid var(--kh-rule);
  text-align: center;
}
.song-title {
  font-family: var(--kh-iast-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 56px;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--kh-ink);
  letter-spacing: 0.005em;
}
.song-meta {
  display: grid;
  justify-items: center;
  gap: 17px;
}
.song-credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px 28px;
  margin: 0;
}
.song-credit-entry {
  display: grid;
  gap: 3px;
  min-width: 112px;
}
.song-credit-entry dt {
  color: var(--kh-ink-soft);
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  line-height: 1.2;
  text-transform: uppercase;
}
.song-credit-entry dd {
  color: var(--kh-ink);
  font-family: var(--kh-iast-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.25;
  margin: 0;
}
.song-meta-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.song-tag {
  border: 1px solid var(--kh-rule);
  border-radius: 999px;
  color: var(--kh-ink-soft);
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1;
  padding: 6px 9px;
  white-space: nowrap;
}
.song-tag.subject-tag {
  border-color: rgba(244, 234, 208, 0.44);
  color: var(--kh-ink);
}

/* One compact, remembered text choice for pages with a sourced alternate
   edition. There is deliberately no explanatory block competing with the
   poem or the recording. */
.edition-switch {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.edition-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--kh-ink-soft);
  border-bottom: 1px solid var(--kh-ink-soft);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.edition-select {
  appearance: none;
  min-height: 28px;
  max-width: min(100%, 228px);
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--kh-rule);
  border-radius: 999px;
  color: var(--kh-ink-soft);
  background: var(--kh-bg);
  font: 500 10px/1.2 Inter, sans-serif;
  letter-spacing: 0.035em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, opacity 120ms ease;
}
.edition-select:hover { color: var(--kh-ink); border-color: rgba(244, 234, 208, 0.48); }
.edition-select:active { opacity: 0.76; }
.edition-select:focus-visible { outline: 2px solid var(--kh-ink); outline-offset: 2px; }
.edition-select option { color: #2a0710; background: #f4ead0; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Source notices for composite liturgies ---------- */
.source-notice {
  border-top: 1px solid var(--kh-rule);
  margin: 64px 0 30px;
  padding-top: 24px;
  text-align: left;
}
.source-notice:first-child { margin-top: 0; }
.source-notice h2 {
  color: var(--kh-ink);
  font-family: var(--kh-serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0;
}
.source-notice-poet {
  color: var(--kh-ink);
  font-family: var(--kh-serif);
  font-size: 16px;
  line-height: 1.3;
  margin: 7px 0 0;
}
.source-notice-poet span {
  color: var(--kh-ink-soft);
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  margin-right: 8px;
  text-transform: uppercase;
}
.source-notice-detail {
  color: var(--kh-ink-soft);
  font-family: Inter, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  margin: 8px 0 0;
}

/* ---------- Audio player (fixed, blends into body) ---------- */
.audio-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 60px;
  padding: 10px 28px max(10px, env(safe-area-inset-bottom));
  background: var(--kh-bg);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 40;
}
.ap-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--kh-ink);
  background: transparent;
  color: var(--kh-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 140ms ease, transform 120ms ease;
}
.ap-btn:hover { background: rgba(244, 234, 208, 0.10); }
.ap-btn:active { transform: scale(0.94); }
.ap-btn .ap-icon-play  { margin-left: 2px; }
.ap-btn .ap-icon-pause { display: none; }
.ap-btn.is-playing .ap-icon-play  { display: none; }
.ap-btn.is-playing .ap-icon-pause { display: inline-block; }

.ap-progress {
  flex: 1;
  position: relative;
  padding: 14px 0;             /* invisible vertical hit area for grabbing */
  cursor: pointer;
  touch-action: none;          /* let pointer events drive seek, not page scroll */
}
.ap-progress::before {         /* the visible 1px track */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--kh-rule);
  transform: translateY(-50%);
}
.ap-progress-bar {
  position: absolute;
  left: 0; top: 50%;
  height: 1px;
  width: 0%;
  background: var(--kh-ink);
  transform: translateY(-50%);
  transition: width 140ms linear;
}
.ap-time {
  font-family: var(--kh-serif);
  font-size: 16px;
  color: var(--kh-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  min-width: 82px;
  text-align: center;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.ap-time-sep { color: var(--kh-ink-mid); padding: 0 3px; }
.ap-time-total { color: var(--kh-ink-soft); }
.audio-player audio { display: none; }

/* ---------- Line block ---------- */
.line {
  position: relative;
  margin: 0 0 36px;
  padding: 6px 56px 6px 16px;
  margin-left: -16px;
  margin-right: -16px;
  text-align: left;
  border-radius: 4px;
  transition: background-color 280ms ease;
}
.line-source,
.line-roman,
.line-english {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-user-select: text;
  user-select: text;
}
.line-seek {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--kh-ink-mid);
  border-radius: 50%;
  color: var(--kh-ink-soft);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.58;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, opacity 140ms ease, transform 120ms ease;
}
.line-seek svg { margin-left: 1px; }
.line:hover .line-seek,
.line.is-singing .line-seek,
.line-seek:focus-visible {
  opacity: 1;
  color: var(--kh-ink);
  border-color: rgba(244, 234, 208, 0.55);
}
.line-seek:hover { background: rgba(244, 234, 208, 0.08); }
.line-seek:active { transform: scale(0.92); }
.line-seek:focus-visible { outline: 2px solid var(--kh-ink); outline-offset: 2px; }
.line.is-singing {
  background: rgba(244, 234, 208, 0.06);
}
.line-roman {
  font-family: var(--kh-iast-serif);
  font-size: 26px;
  line-height: 1.5;
  color: var(--kh-ink);
  margin: 0 0 10px;
  letter-spacing: 0.005em;
  font-weight: 400;
}

.line-source {
  color: var(--kh-ink);
  font-family: var(--kh-serif);
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.line-english {
  font-family: var(--kh-serif);
  font-style: normal;
  font-size: 22px;
  line-height: 1.55;
  color: var(--kh-ink-soft);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* Repetition badge — single cream tone, hairline pill. */
.rep {
  display: inline-block;
  margin-left: 14px;
  padding: 2px 12px;
  font-family: var(--kh-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--kh-ink);
  background: transparent;
  border: 1px solid rgba(244, 234, 208, 0.32);
  border-radius: 999px;
  vertical-align: 0.18em;
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.02em;
}

.adapted-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px dashed rgba(244, 234, 208, 0.45);
  border-radius: 999px;
  color: var(--kh-ink-soft);
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  vertical-align: 0.28em;
  white-space: nowrap;
}
.line.is-adapted {
  box-shadow: inset 1px 0 rgba(244, 234, 208, 0.34);
}

/* ---------- Linked source, romanized, and English word spans ---------- */
/* One mapping drives all three textual layers. The inset outline does not
   shift text or interfere with selection and copying. */
.line .word-link {
  cursor: pointer;
  padding: 1px 3px;
  margin: 0 -3px;
  transition: box-shadow 140ms ease, color 140ms ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 3px;
}
.line .word-link.is-hi {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(244, 234, 208, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .line .word-link:hover {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(244, 234, 208, 0.55);
  }
}

.line-english .we.is-hi {
  color: var(--kh-ink);
}

/* ---------- Word tooltip ---------- */
.word-tooltip {
  position: absolute;
  z-index: 50;
  max-width: 340px;
  padding: 12px 16px;
  font-family: var(--kh-serif);
  font-style: normal;
  font-size: 17px;
  line-height: 1.5;
  color: var(--kh-ink);
  background: #1a0306;                /* darker than body for clear separation */
  border: none;
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55),
              0 2px 8px  rgba(0, 0, 0, 0.30);
  pointer-events: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .song-page { padding: 76px 22px calc(186px + env(safe-area-inset-bottom)); }
  .song-title { font-size: 40px; line-height: 1.15; }
  .song-attrib em { font-size: 19px; }
  .song-hero { margin-bottom: 56px; padding-bottom: 28px; }
  .line { margin-bottom: 32px; padding: 5px 48px 5px 12px; margin-left: -12px; margin-right: -12px; }
  .line-seek { top: 8px; right: 10px; width: 32px; height: 32px; }
  .line-roman { font-size: 23px; line-height: 1.55; font-weight: 400; }
  .line-english { font-size: 20px; line-height: 1.55; }
  .rep { font-size: 14px; padding: 2px 11px; margin-left: 12px; }
  .word-tooltip {
    max-width: 82vw;
    font-size: 17px;
    line-height: 1.5;
    padding: 11px 14px;
  }

  .audio-player {
    min-height: 60px;
    padding: 6px 18px max(24px, env(safe-area-inset-bottom));
    gap: 14px;
  }
  .ap-btn { width: 36px; height: 36px; }
  .song-home { width: 36px; height: 36px; }
  #songShare,
  #songSync {
    /* Redefine the custom property, never `top` directly: app.css adds the
       swipe compensation to --song-control-top, and a raw override here would
       leave it correcting against the wrong resting offset. */
    --song-control-top: max(6px, calc(env(safe-area-inset-top) - 18px));
    width: 36px;
    height: 36px;
  }
  #songSync { --song-control-left: max(14px, calc(8px + env(safe-area-inset-left))); }
  #songShare { --song-control-right: max(14px, calc(8px + env(safe-area-inset-right))); }
  .song-control-status {
    top: max(60px, calc(48px + env(safe-area-inset-top)));
    right: max(12px, calc(8px + env(safe-area-inset-right)));
  }
  .ap-time { font-size: 14px; min-width: 74px; }
}

@media (max-width: 380px) {
  .audio-player { padding-right: 14px; padding-left: 14px; gap: 10px; }
  .ap-time { font-size: 13px; min-width: 68px; }
}

@media (max-width: 720px) {
  html.bhakti-standalone .audio-player {
    padding-top: 10px;
    padding-bottom: max(38px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 720px) and (display-mode: standalone),
       (max-width: 720px) and (display-mode: fullscreen) {
  .audio-player {
    padding-top: 10px;
    padding-bottom: max(38px, env(safe-area-inset-bottom));
  }
}

/* Touch devices: hover-only styles off. */
@media (hover: none) {
  .line .word-link { padding: 2px 3px; margin: 0 -3px; }
  .line .word-link:hover { background: transparent; }
  .line .word-link.is-hi { background: rgba(244, 234, 208, 0.18); }
}

/* ---------- Tablet / iPad ----------
   This range intentionally avoids a desktop-like narrow column on an iPad.
   Larger type and controls preserve the reading-first feel at arm's length. */
@media (min-width: 721px) and (max-width: 1100px) {
  .song-page {
    max-width: 860px;
    padding: 78px 48px calc(174px + env(safe-area-inset-bottom));
  }
  .song-title { font-size: 60px; }
  .song-hero { margin-bottom: 66px; }
  .line { margin-bottom: 42px; padding: 8px 66px 8px 20px; margin-left: -20px; margin-right: -20px; }
  .line-seek { top: 11px; right: 14px; width: 38px; height: 38px; }
  .line-source { font-size: 28px; }
  .line-roman { font-size: 29px; }
  .line-english { font-size: 25px; }
  .ap-btn,
  .song-home,
  #songShare,
  #songSync { width: 42px; height: 42px; }
}

/* ---------- Monitor / television ----------
   A large display needs a wider, deliberately scaled reading column rather
   than browser zoom. The values use viewport width only as a gentle scaling
   input and stop before long poetic lines become hard to scan. */
@media (min-width: 1101px) {
  .song-page {
    max-width: min(1040px, calc(100vw - 160px));
    padding: 104px 58px 188px;
  }
  .song-title {
    font-size: clamp(60px, 4vw, 88px);
    margin-bottom: 24px;
  }
  .song-hero { margin-bottom: 84px; padding-bottom: 46px; }
  .song-hint { font-size: clamp(16px, 1.15vw, 20px); margin-top: 28px; }
  .song-credit-entry dd { font-size: clamp(19px, 1.3vw, 23px); }
  .song-tag { font-size: 10px; padding: 7px 11px; }
  .line {
    margin-bottom: clamp(42px, 4vh, 62px);
    padding: 10px 80px 10px 24px;
    margin-left: -24px;
    margin-right: -24px;
  }
  .line-seek { top: 13px; right: 16px; width: 40px; height: 40px; }
  .line-source { font-size: clamp(28px, 1.85vw, 40px); line-height: 1.32; }
  .line-roman { font-size: clamp(30px, 2vw, 43px); line-height: 1.46; margin-bottom: 12px; }
  .line-english { font-size: clamp(26px, 1.7vw, 36px); line-height: 1.5; }
  .rep { font-size: clamp(17px, 1.15vw, 22px); }
  .source-notice { margin-top: 82px; }
  .source-notice h2 { font-size: clamp(27px, 1.75vw, 37px); }
  .source-notice-poet { font-size: clamp(18px, 1.2vw, 23px); }
  .source-notice-detail { font-size: clamp(12px, 0.9vw, 15px); }
  .audio-player { min-height: 72px; padding: 12px 42px max(12px, env(safe-area-inset-bottom)); }
  .ap-btn,
  .song-home,
  #songShare,
  #songSync { width: 42px; height: 42px; }
  .ap-time { font-size: 19px; min-width: 100px; }
  #songSync { --song-control-left: max(30px, calc(18px + env(safe-area-inset-left))); }
  #songShare { --song-control-right: max(30px, calc(18px + env(safe-area-inset-right))); }
}