/* ky-mobile — phone-only corrections for the mirror.

   Everything here is scoped to <=767px and, wherever it touches something the
   original page owns, it only adds breathing room: no restyling, no new design
   language. The two real defects it fixes are (1) our injected theme pill
   sitting on top of the first nav item and (2) transport buttons that were
   well under a comfortable thumb target. */

@media (max-width: 767px) {

  /* ---- 1. the theme pill was covering "Services" -------------------------
     #ky-sw is ours (fixed, z 99999) and it landed at x 338-376 / y 14-52,
     straight over the first nav link at x 302-363 / y 27-51. The nav column
     runs to y~139 and the music bar owns the whole bottom edge, so the pill
     drops to just under the nav and keeps the right-hand side it has on
     desktop. */
  #ky-sw {
    top: 152px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
  }
  /* the panel must open upward-left from there and stay on screen */
  #ky-sw-panel {
    max-width: min(280px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 220px);
    overflow-y: auto;
  }
  #ky-sw-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* ---- 2. the nav is deliberately left alone ------------------------------
     Its links hide a duplicated label behind `overflow:hidden` for the
     hover-slide, so their height cannot grow without exposing the second
     copy; and adding row spacing simply pushed the column back down into
     the pill. The original spacing stays exactly as the site ships it. */

  /* ---- 3. the hero calendar was being clipped in half --------------------
     #ky-cal builds a 7-column day grid whose cells are sized in px, so it
     measures ~202px wide no matter the viewport. It sits inside

       div.overflow-clip > span.block.max-w-[15ch]

     and 15ch of the mono face resolves to ~252px at desktop type sizes but
     only ~132px once the phone type scale kicks in. The span therefore caps
     the calendar 70px short of its own content and the .overflow-clip parent
     cuts it: "AUG 2026" loses its year and the S/M/T/W/T/F/S column runs off
     the gutter, taking Friday and Saturday with it.

     The grid cell around it is 218px wide, which already clears the 202px the
     calendar needs, so nothing has to be resized or re-flowed — the cap just
     has to stop applying. :has(> #ky-cal) resolves at #id strength, so it wins
     over the utility class without !important, and it can only ever match the
     one element that directly wraps the calendar. */
  span:has(> #ky-cal) { max-width: none; }

  /* ---- 4. player transport ----------------------------------------------
     prev/next were 26px and play 34px. Grow the hit area only; the flex bar
     absorbs it and the volume slider is free to shrink. */
  #ky-music .kym-sk,
  #ky-music .kym-play {
    min-width: 40px;
    min-height: 40px;
  }
  #ky-music .kym-play { min-width: 44px; min-height: 44px; }
}