/* Short landscape phones use the same bottom panel as portrait phones (Show details / Hide details button)
   instead of the side-by-side document and details layout. Load after student.css / tutor.css and
   panel-toggle.css; pair with QR.panelQuery in the page so the zoom and highlight behaviour match. */

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --sq-sheet-peek: 84px;
  }

  /* question list stays a vertical column on the left; extra bottom padding keeps its last dot above the panel */
  .sq-rail {
    padding-bottom: calc(var(--sq-sheet-peek) + 8px + env(safe-area-inset-bottom));
  }

  .sq-doc .qr-doc-scroll {
    padding-bottom: calc(var(--sq-sheet-peek) + 16px + env(safe-area-inset-bottom));
  }

  .sq-doc .qr-zoom {
    bottom: calc(var(--sq-sheet-peek) + 14px + env(safe-area-inset-bottom));
  }

  /* the details panel spans the full width at the bottom */
  .sq-app .sq-detail {
    position: fixed;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    flex: none;
    width: auto;
    height: calc(var(--sq-sheet-peek) + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(18, 38, 63, 0.16);
    transition: height 0.22s ease;
  }

  /* open: covers the sub-header band too and stops under the yellow title bar (36px in landscape) */
  .sq-app .sq-detail[data-sheet="open"] {
    height: calc(100vh - 36px);
    height: calc(100dvh - 36px);
  }

  .sq-detail .qr-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    width: 100%;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sq-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
  }

  .qr-toggle-chevron {
    transition: transform 0.2s;
  }

  .sq-detail[data-sheet="open"] .qr-toggle-chevron {
    transform: rotate(180deg);
  }

  /* peek shows the question number, chevrons and a one-line result */
  .sq-app .sq-detail-head {
    padding: 0 16px 8px;
    border-bottom: 0;
    background: #fff;
  }

  .sq-head-meta {
    display: block;
    margin-top: 0;
    font-size: 12px;
  }

  .sq-app .sq-detail-body {
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--sq-border);
  }
}