/* =====================================================================
 * responsive.css
 *
 * Width:   ≤1500 laptop · ≤1180 narrow desktop · ≤1024 tablet · ≤860 small
 *          tablet · ≤720 mobile · ≤560 narrow phone · ≤400 very small
 * Height:  ≤860 short · ≤740 shorter
 *
 * The height blocks are deliberately placed BEFORE the narrow-width ones.
 * A phone is both narrow and short, and where the two disagree the width
 * rules should have the last word — a touch target sized for a thumb is
 * not something a short viewport gets to shrink.
 *
 * Rule: the page never scrolls horizontally at any width.
 * ===================================================================== */

/* ---------- laptop desktop: 1200–1500 ----------------------------------
 * The gap this fills. Everything above was written for a large display and
 * held its full size all the way down to 1180, where the narrow-desktop
 * rules finally took over. A 1440-wide laptop therefore got big-screen
 * spacing on a two-thirds-size screen — which is what "it looks zoomed in"
 * describes: nothing is actually scaled up, the furniture simply never
 * stepped down. This is that step.
 * ---------------------------------------------------------------------- */
@media (max-width: 1500px) {
  :root {
    --gap: 19px;
    --stage-pad: clamp(14px, 1.8vw, 22px);
    --list-w: clamp(310px, 25vw, 360px);
    --panel-w: clamp(272px, 21vw, 330px);
    --edge: clamp(14px, 2.2vw, 24px);
  }

  .meta__title { font-size: 25px; }
  .meta__desc  { max-width: 62ch; }
}

/* ---------- short viewports --------------------------------------------
 * Width is only half the story, and on a laptop it is the quieter half. A
 * 1440x900 Mac gives the page roughly 1440x730 once the menu bar, the tab
 * strip and the address bar have taken their share — so the page is not
 * 16:9 any more, it is nearer 2:1, and the landing footage (16:9, covered)
 * loses a fifth of its height off the top and bottom. That crop is the
 * zoom people see.
 *
 * Two answers here. The vertical furniture gives ground so the fold stops
 * cutting things off, and the footage is re-anchored so what it loses is
 * ceiling and floor rather than the murti and the diyas.
 * ---------------------------------------------------------------------- */
@media (max-height: 860px) {
  :root {
    --topbar-h: 54px;
    --edge-top: clamp(62px, 8vh, 74px);
    --handle-top: clamp(12px, 2.2vh, 20px);
  }

  /* Cover on a letterbox-shaped viewport crops top and bottom. Centred, it
     eats the canopies above and the row of diyas below — the two things
     that frame the composition. Held a little above centre it gives up
     empty floor instead. */
  .landing__video { object-position: 50% 42%; }
  .landing.no-video::before { background-position: 50% 42%; }

  .landing__cta-wrap { padding-bottom: clamp(20px, 3.4vh, 34px); }
}

@media (max-height: 740px) {
  :root { --topbar-h: 50px; --gap: 15px; }

  .landing__video { object-position: 50% 40%; }
  .landing.no-video::before { background-position: 50% 40%; }

  /* The card is the one thing on the landing that grows with its text, so
     it is the one thing that runs past a short fold. Capped, and its own
     scroll takes over. */
  .sidepanel__card { max-height: calc(100dvh - var(--edge-top) - var(--edge)); }

  .chakra__label { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------- narrow desktop -------------------------------------------- */
@media (max-width: 1180px) {
  :root { --gap: 18px; --list-w: clamp(300px, 30vw, 350px); }

  .row__btn { grid-template-columns: 20px 100px minmax(0, 1fr); gap: 10px; }
  .row__title { font-size: 13.5px; }

  /* Below this a panel would take most of the landing, so app.js starts
     both of them folded here and the visitor opens the one they want. */
  :root { --panel-w: min(360px, calc(100vw - 120px)); }
}

/* ---------- tablet: playlist drops below ------------------------------- */
@media (max-width: 1024px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 28px;
  }

  .col-list {
    position: static;
    max-height: min(62vh, 560px);
  }

  /* video first, list second */
  .col-player { order: 1; }
  .col-list   { order: 2; }

  .meta__desc { max-width: none; }
}

/* ---------- small tablet / large phone --------------------------------- */
@media (max-width: 860px) {
  :root { --topbar-h: 56px; }

  .landing__inner { padding-top: 6vh; }


  .controls { padding: 40px 10px 10px; }
  .iconbtn { width: 36px; height: 36px; }
  .iconbtn--primary { width: 42px; height: 42px; }
}

/* ---------- mobile ------------------------------------------------------ */
@media (max-width: 720px) {
  body { font-size: 14px; }

  .stage { padding: 12px 12px 26px; gap: 14px; }

  /* full-bleed player on phones */
  .player__frame { border-radius: 12px; }

  /* the control bar must stay usable — drop the optional controls */
  .volume .slider--inline { display: none; }
  .timecode { margin-left: 5px; font-size: 11.5px; }
  .controls__row { gap: 4px; }
  .controls__group { gap: 0; }
  .iconbtn { width: 34px; height: 34px; }
  .iconbtn .ico { width: 19px; height: 19px; }
  .iconbtn--primary { width: 40px; height: 40px; }
  .iconbtn--primary .ico { width: 22px; height: 22px; }

  #pipBtn { display: none; }

  /* tooltips are hover-only affordances — hide on touch, labels remain in ARIA */
  [data-tip]::before { display: none; }

  .abpanel, .menu { left: 10px; right: 10px; bottom: 70px; width: auto; }
  .abpanel { padding: 14px; }

  .loopchip { top: 10px; left: 10px; font-size: 10.5px; padding: 5px 10px; }

  .meta__title { font-size: 20px; }
  .meta__title-en { font-size: 12px; }
  .meta__desc { font-size: 13.5px; }

  .col-list { max-height: none; border-radius: 14px; }
  .list { max-height: 58vh; }

  .row__btn { grid-template-columns: 20px 104px minmax(0, 1fr); padding: 8px; gap: 10px; }

  /* A phone has no room to flank anything, so an opened panel takes the
     screen — near enough full-bleed, with its own header carrying the way
     out, and stopping clear of the chakra rising at the bottom. */
  :root { --edge: 14px; --panel-w: calc(100vw - 2 * var(--edge)); }
  .sidepanel--l, .sidepanel--r { bottom: clamp(140px, 19vh, 190px); }
  .sidepanel__scroll { padding: 2px 16px 20px; }
  .sidepanel__head { padding: 14px 10px 12px 16px; }
  .sidepanel__title { font-size: 17px; }
  .paneldock { width: 34px; height: 34px; }
  .paneldock .ico { width: 18px; height: 18px; }

  :root { --tool-h: 36px; }
  .landing__tools--l { left: 10px; }
  .landing__tools--r { right: 10px; }
  .landing__tools { gap: 7px; }
  .coach { font-size: 11.5px; max-width: calc(100vw - 32px); }
  .audiodock:hover .audiodock__pop,
  .audiodock:focus-within .audiodock__pop,
  .audiodock.pop-open .audiodock__pop { width: 104px; }

  /* Neither cluster may grow into the other. They are two fixed elements
     pinned to opposite edges of the same row, so nothing in the layout
     stops them meeting in the middle — this is the stop. */
  .landing__tools { max-width: calc(50vw - var(--edge) - 5px); }
  .landing__tools .audiodock,
  .audiodock__btn { min-width: 0; }
  .audiodock__label { overflow: hidden; text-overflow: ellipsis; }

  /* The mantra dock left the bottom-left corner for the top row a while
     ago, so there is nothing down here for the chakra to clear any more.
     It also stops being ranged right: pushing a 200px button to the edge
     of a 400px screen only crowds that edge, and centred is where a single
     action belongs on a phone. */
  .landing__cta-wrap {
    padding-bottom: clamp(24px, 4vh, 40px);
    transform: none;
  }

  .toast { bottom: 22px; }
}

/* ---------- narrow phones: the mantra dock loses its name ----------------
 * Two clusters, five controls and a two-word label do not fit across 560px
 * with both edges honoured. The label is the part that can go: the bars
 * already animate while the mantra plays, so the control still says what it
 * is, and the button keeps its aria-label for anyone who cannot see them.
 * ------------------------------------------------------------------------ */
@media (max-width: 560px) {
  .audiodock__label { display: none; }
  .landing__tools .audiodock__btn { padding: 0 6px; }
  .landing__tools { gap: 6px; }
  /* din/raat (6 Oct): phone par sirf chal raha chinh dikhe - chaar button ek
     line me samaayein (pehle aakhri handle kinaare par kat raha tha) */
  .landing__tools .langbtn { padding: 0 10px; }
  .modebtn .langbtn__sep,
  .modebtn .modebtn__night { display: none; }
  body.mode-night .modebtn .modebtn__day { display: none; }
  body.mode-night .modebtn .modebtn__night { display: inline; }
}

/* ---------- very small phones -------------------------------------------- */
@media (max-width: 400px) {
  .chakra__label { font-size: 15px; padding: 13px 26px; }
  /* 360px phone: landing ke 4 button ek line me (6 Oct) */
  .landing__tools { gap: 4px; }
  .landing__tools .langbtn { padding: 0 8px; }
  .paneldock { width: 32px; height: 32px; }

  #speedBtn { display: none; }
  .row__btn { grid-template-columns: 18px 88px minmax(0, 1fr); gap: 9px; }
  .row__sub { display: none; }
  .brand__text em { display: none; }

  /* The transport bar, counted out. At 320 there are 276px between the
     control bar's own padding, and the row wanted 353 — so the right-hand
     end of it (fullscreen, share) was being clipped clean off, and the
     grid it sits in dragged the scrub bar out of the frame with it.
     Everything below is that 353 brought under 276. */
  .controls { padding: 36px 6px 8px; }
  .iconbtn { width: 30px; height: 30px; }
  .iconbtn .ico { width: 17px; height: 17px; }
  .iconbtn--primary { width: 36px; height: 36px; }
  .iconbtn--primary .ico { width: 20px; height: 20px; }

  /* A–B is the one control that cannot earn its 30px here: setting a range
     by hand wants a screen, and the loops this Poojan actually uses are
     already declared per section and offered from the sequence list. Plain
     loop, share and fullscreen all stay. */
  #abBtn { display: none; }
  .iconbtn.autobtn { padding: 0 6px; }
  .autobtn__label { display: none; }
  .timecode { margin-left: 4px; font-size: 11.5px; }
}

/* Below 360 even the duration has to go — the scrub bar carries position,
   and each section's length is printed on its row in the sequence. */
@media (max-width: 360px) {
  .timecode__sep, #tTotal { display: none; }
}

/* ---------- landscape phones: keep the player dominant --------------------- */
@media (max-width: 940px) and (orientation: landscape) and (max-height: 520px) {
  .topbar { height: 48px; }
  .col-list { max-height: 46vh; }
  .landing__inner { padding-top: 2vh; }
  .landing__title { font-size: clamp(22px, 5vw, 40px); }
  .chakra__label { font-size: 15px; padding: 12px 24px; }
}

/* ---------- lyrics: room, and the bar underneath ---------------------------
   The lift in style.css is measured against the control bar's normal
   padding. Fullscreen gives that bar more and a phone gives it less, so
   the line has to be told about both or it either floats or is sat on.

   Every breakpoint sets --cue-size and nothing else. It never touches
   font-size directly, because font-size is --cue-size TIMES the scale the
   visitor's config asked for — write to font-size here and that scale is
   silently thrown away on exactly the screens that most needed it. */
.player__frame:fullscreen .player:not(.is-idle) .cues,
.player__frame:-webkit-full-screen .player:not(.is-idle) .cues { transform: translateY(-94px); }
.player__frame:fullscreen .cues,
.player__frame:-webkit-full-screen .cues {
  bottom: 74px;
  --cue-size: clamp(28px, 2.1vw + 14px, 58px);
}

@media (max-width: 1024px) {
  .cues { bottom: 40px; --cue-size: clamp(21px, 2.4vw + 8px, 34px); }
}

@media (max-width: 720px) {
  .cues {
    bottom: 26px; padding: 0 3%;
    --cue-size: clamp(18px, 3.4vw + 6px, 26px);
  }
  .player:not(.is-idle) .cues { transform: translateY(-60px); }
  .cue { max-width: 96%; line-height: 1.4; }
}

@media (max-width: 400px) {
  .cues { bottom: 18px; --cue-size: 17px; }
  /* The bar itself is 36px shorter down here (see .controls above). */
  .player:not(.is-idle) .cues { transform: translateY(-48px); }
  .cue { padding: .6em 1em; }
}

/* ---------- fullscreen: hide chrome ---------------------------------------- */
body.is-fullscreen .topbar,
body.is-fullscreen .col-list,
body.is-fullscreen .meta { display: none; }
body.is-fullscreen .stage { padding: 0; max-width: none; }

/* ---------- pointer:coarse — controls must not depend on hover -------------- */
@media (hover: none) {
  .controls { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .scrub__knob { opacity: 1; }
  .volume .slider--inline { width: 0; opacity: 0; }
}

/* There is no hover on a touch screen to reveal the mantra slider, so it is
   held open — but only where there is room for it. On a phone those 104px
   were a quarter of the screen, and they are what pushed the left cluster
   into the right one: the language toggle landed on top of the dock and the
   volume readout was sliced down to "20". Below 720 the speaker button is
   the whole control (tap to mute, tap to bring the mantra back) and the
   phone's own volume keys do the rest. */
@media (hover: none) and (min-width: 721px) {
  .audiodock__pop { width: 104px; opacity: 1; padding: 0 8px 0 4px; }
}

/* ---------- print ------------------------------------------------------------ */
@media print {
  body { background: #fff; color: #000; }
  .landing, .app, .toast, .veil, .sidepanel, .landing__tools { display: none !important; }
}