/* composer-focus.css — Mobile composition focus mode.
   Hides site header, post breadcrumb, music player (visual only) and floating
   notifications while the user is typing in a .rhk-composer form on narrow
   viewports, giving the soft keyboard and editor maximum usable room.
   Audio/source/pause state is never touched. */

@media (max-width: 760px), (max-width: 960px) and (pointer: coarse) and (orientation: landscape) {

  /* --- Body-level class applied by composer-focus.js --- */

  body.composer-focus > .site-header {
    visibility: hidden;
    pointer-events: none;
    position: static;        /* un-sticky: keep document flow, avoid scroll jump */
  }

  body.composer-focus .post-breadcrumb {
    visibility: hidden;
    pointer-events: none;
    position: static;
  }

  body.composer-focus > .music-player {
    visibility: hidden;
    pointer-events: none;
    /* stays position:fixed so body padding-bottom stays valid — no layout shift */
  }

  /* Floating live-activity cards can cover the typing area */
  body.composer-focus .live-activity {
    visibility: hidden;
    pointer-events: none;
  }

  /* Reduce root scroll-padding so the editor can sit close to viewport top */
  html:has(body.composer-focus) {
    scroll-padding-top: 12px;
  }

  /* Keyboard-safe available-height variable for editor sizing.
     Set by JS via VisualViewport or window.innerHeight fallback. */
  body.composer-focus .rhk-focus-form .rhk-editor .ql-editor {
    min-height: min(240px, var(--rhk-editor-avail, 40dvh)) !important;
    max-height: var(--rhk-editor-avail, 40dvh) !important;
  }

  /* Keep the existing 16px text size */
  body.composer-focus .rhk-focus-form .rhk-editor .ql-editor {
    font-size: 16px;
  }
}