/* v104 mobile sticky preview for all editor pages
   Canvas/preview tetap terlihat saat ngedit di HP. */
@media (max-width: 760px) {
  body.has-topnav:not(.dashboard-page) {
    scroll-padding-top: 50svh;
  }

  /* Pages where preview is its own main column */
  body.has-topnav:not(.fulltime-v72-page):not(.daily-recap-page):not(.standings-page) .main-stage,
  .live-reaction-page .lr-stage,
  .quotes-page .stage {
    position: sticky;
    top: max(6px, env(safe-area-inset-top));
    z-index: 35;
    margin: 0 8px 10px;
    padding: 10px !important;
    border-radius: 18px;
    border: 1px solid rgba(51, 218, 255, .16);
    background: linear-gradient(180deg, rgba(8,22,35,.98), rgba(5,14,24,.96));
    box-shadow: 0 16px 38px rgba(0,0,0,.42);
  }

  /* Pages that have advanced controls inside .stage-grid: sticky only the canvas column. */
  .daily-recap-page .canvas-column,
  .standings-page .canvas-column {
    position: sticky;
    top: max(6px, env(safe-area-inset-top));
    z-index: 35;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid rgba(51, 218, 255, .16);
    background: linear-gradient(180deg, rgba(8,22,35,.98), rgba(5,14,24,.96));
    box-shadow: 0 16px 38px rgba(0,0,0,.42);
  }

  .daily-recap-page .main-stage,
  .standings-page .main-stage {
    padding-top: 8px !important;
  }

  /* Full-Time keeps its own v103 layout, just refined here. */
  .fulltime-v72-page .ft72-stage {
    top: max(6px, env(safe-area-inset-top));
  }

  body.has-topnav:not(.dashboard-page) .preview-header,
  .live-reaction-page .lr-preview-header {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 7px;
  }

  body.has-topnav:not(.dashboard-page) .preview-label,
  .live-reaction-page .preview-label {
    font-size: 10px;
    margin-bottom: 1px;
  }

  body.has-topnav:not(.dashboard-page) .preview-header h2,
  .live-reaction-page .lr-preview-header h2 {
    font-size: 15px;
    line-height: 1.05;
  }

  body.has-topnav:not(.dashboard-page) .status-dot,
  .live-reaction-page .status-dot {
    transform: scale(.82);
    transform-origin: right center;
    padding: 5px 8px;
  }

  body.has-topnav:not(.dashboard-page) .canvas-stage,
  .live-reaction-page .lr-canvas-wrap,
  .quotes-page .canvas-shell {
    max-height: 45svh;
    min-height: 0 !important;
    overflow: hidden;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  body.has-topnav:not(.dashboard-page) #posterCanvas,
  .live-reaction-page #posterCanvas,
  .quotes-page canvas {
    width: auto !important;
    max-width: 100% !important;
    max-height: min(39svh, 380px) !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 12px !important;
  }

  .daily-recap-page .stage-grid,
  .standings-page .stage-grid {
    gap: 10px;
  }

  .daily-recap-page .controls-rail,
  .standings-page .controls-rail,
  body.has-topnav:not(.dashboard-page) .sidebar,
  .live-reaction-page .lr-sidebar,
  .fulltime-v72-page .ft72-left,
  .fulltime-v72-page .ft72-right {
    scroll-margin-top: 51svh;
  }

  .live-reaction-page .lr-hint {
    display: none;
  }
}

@media (max-width: 420px) {
  body.has-topnav:not(.dashboard-page) .canvas-stage,
  .live-reaction-page .lr-canvas-wrap,
  .quotes-page .canvas-shell {
    max-height: 43svh;
  }

  body.has-topnav:not(.dashboard-page) #posterCanvas,
  .live-reaction-page #posterCanvas,
  .quotes-page canvas {
    max-height: min(37svh, 350px) !important;
  }
}