/* ============================================================================
   PianoBoss — M3.2 iPad Lesson Studio
   Per M2 blueprint. Activates on iPad (768-1366px width + coarse pointer).
   Landscape: visible side rails + wide piano. Portrait: slide-over drawers.
   No 304 px piano sidebar offset — piano fills full container width.
   ========================================================================= */

/* The body class `t31-active` is set by ipad-lesson.js when:
     - viewport matches the iPad media query, AND
     - a lesson view is currently active.
   All M3.2 styles below are scoped to it so nothing bleeds into desktop. */

/* ---- Stop overlay reuses M3.1 styles (loaded earlier). No re-definition. ---- */

@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {

  /* ---- Compact header for tablet density ---- */
  body.t31-active header {
    padding: 8px 24px;
  }
  body.t31-active header .brand-name { font-size: 22px; }
  body.t31-active header nav { gap: 4px; }
  body.t31-active header .nav-btn {
    padding: 7px 12px;
    font-size: 13px;
  }
  body.t31-active header .user-menu .pill,
  body.t31-active header .user-menu button {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* ---- Container: tighter horizontal padding so panels and piano breathe ---- */
  body.t31-active .container {
    padding: 16px 16px 60px;
  }

  /* ---- LANDSCAPE: visible side rails + wide piano below ---- */
}

@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) and (orientation: landscape) {

  /* Override the desktop @media (min-width: 1024px) sidebar/piano-shell layout.
     iPad rails are NARROWER (220 px not 280) — gives more room to the piano. */
  body.t31-active #view-lesson.active {
    display: block;
    position: relative;
    padding-left: 244px; /* 220 sidebar + 24 gutter */
  }
  body.t31-active #view-lesson.active.has-right-panel {
    padding-right: 244px;
  }
  body.t31-active .lesson-sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 220px;
    overflow-y: auto;
    margin-bottom: 0;
    padding: 14px;
    transition: width 0.22s ease, padding 0.22s ease;
  }
  body.t31-active #view-lesson.active.has-right-panel .lesson-right-panel {
    position: absolute;
    top: 0; right: 0;
    width: 220px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    margin-top: 0;
    padding: 14px;
    transition: width 0.22s ease, padding 0.22s ease;
  }

  /* CRITICAL FIX: piano-shell ignores the sidebar offset and fills the
     container. This is the bug Jean reported — the desktop CSS forced
     padding-left: 304 px which squeezed the keyboard to ~32 px keys. */
  body.t31-active #view-lesson.active ~ #piano-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    margin-top: 16px;
  }

  /* ---- Collapsible rails ----
     A small tab handle lives on the inner edge of each panel. Tapping it
     collapses the panel to a 32 px sliver; tap again to expand. */
  body.t31-active .t31-rail-toggle {
    position: absolute;
    top: 14px;
    width: 22px; height: 28px;
    background: rgba(212, 175, 55, 0.18);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--brass-hi);
    font-size: 13px;
    line-height: 26px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 5;
    user-select: none;
  }
  body.t31-active .lesson-sidebar .t31-rail-toggle { right: 6px; }
  body.t31-active .lesson-right-panel .t31-rail-toggle { left: 6px; }

  /* Collapsed states: panel shrinks, piano area gains the room. */
  body.t31-active.t31-collapsed-left #view-lesson.active {
    padding-left: 56px;
  }
  body.t31-active.t31-collapsed-left .lesson-sidebar {
    width: 32px;
    padding: 14px 4px;
    overflow: hidden;
  }
  body.t31-active.t31-collapsed-left .lesson-sidebar > *:not(.t31-rail-toggle) {
    display: none;
  }
  body.t31-active.t31-collapsed-right #view-lesson.active.has-right-panel {
    padding-right: 56px;
  }
  body.t31-active.t31-collapsed-right .lesson-right-panel {
    width: 32px;
    padding: 14px 4px;
    overflow: hidden;
  }
  body.t31-active.t31-collapsed-right .lesson-right-panel > *:not(.t31-rail-toggle) {
    display: none;
  }
}

/* ---- PORTRAIT: drawers (slide-over) + full-width piano ---- */

@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) and (orientation: portrait) {

  body.t31-active #view-lesson.active {
    display: block;
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }

  /* Sidebar + right panel become off-canvas drawers. Same pattern as M3.1. */
  body.t31-active .lesson-sidebar,
  body.t31-active #view-lesson.active.has-right-panel .lesson-right-panel {
    position: fixed !important;
    top: 60px !important;
    bottom: 0 !important;
    width: min(60vw, 360px) !important;
    max-height: none !important;
    z-index: 200;
    overflow-y: auto;
    background: linear-gradient(180deg, #131321 0%, #0a0a12 100%);
    margin: 0 !important;
    padding: 18px !important;
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  body.t31-active .lesson-sidebar {
    left: 0 !important; right: auto !important;
    border-right: 1px solid rgba(212, 175, 55, 0.25);
    transform: translateX(-105%);
  }
  body.t31-active #view-lesson.active.has-right-panel .lesson-right-panel {
    right: 0 !important; left: auto !important;
    border-left: 1px solid rgba(212, 175, 55, 0.25);
    transform: translateX(105%);
  }
  body.t31-active.t31-drawer-left .lesson-sidebar {
    transform: translateX(0);
  }
  body.t31-active.t31-drawer-right .lesson-right-panel {
    transform: translateX(0);
  }

  /* Drawer backdrop */
  body.t31-active .t31-backdrop {
    position: fixed;
    top: 60px; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
  }
  body.t31-active.t31-drawer-left .t31-backdrop,
  body.t31-active.t31-drawer-right .t31-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer trigger handles (visible on screen edges in portrait) */
  body.t31-active .t31-edge-handle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 60px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), transparent);
    color: var(--brass);
    text-align: center;
    line-height: 60px;
    font-size: 14px;
    z-index: 60;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  body.t31-active .t31-edge-handle.left { left: 0; }
  body.t31-active .t31-edge-handle.right {
    right: 0; left: auto;
    background: linear-gradient(270deg, rgba(212, 175, 55, 0.18), transparent);
  }

  /* Piano shell: NO offsets. Full width. */
  body.t31-active #view-lesson.active ~ #piano-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    margin-top: 16px;
  }

  /* Compact lesson header in portrait */
  body.t31-active .lesson-header {
    padding: 10px 14px;
  }
  body.t31-active #lesson-title { font-size: 18px; }
}

/* ---- Tablet piano: wider keys for touch ---- */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
  body.t31-active .piano {
    height: 200px; /* slightly shorter than desktop's 220, more compact for tablet */
  }
  /* Hide the M3.1 mobile-only landscape nudge on iPad */
  body.t31-active .landscape-nudge { display: none !important; }
}