/* ==========================================================================
   surfaces.css — Phase 4 + Phase 7 of docs/RESPONSIVE_APP_UI_PLAN.md
   Per-surface fixes and the accessibility/orientation polish.

   Phase 4's checklist is mostly satisfied globally by responsive-base.css
   (overflow, touch targets, iOS zoom) and tablet-layouts.css (density). What
   remains is the handful of surfaces with behaviour the global rules cannot
   express - chiefly the video player, which the plan singled out as the
   highest-risk surface on the site.
   ========================================================================== */

/* ==========================================================================
   1. Lesson / video player  (Phase 4 priority 4)
   The plan flagged landscape phone playback as the highest risk here, and the
   measurement bore it out: the player sizes itself with
   `max-width: min(100%, calc((100vh - 230px) * 16 / 9))`.

   Two problems with that on a phone:
     - 100vh is the *tallest* viewport, so while the browser chrome is visible
       the player is computed larger than the space it actually has.
     - The 230px subtraction assumes a portrait layout with a header, tabs and
       content below. Rotated to landscape the whole viewport is ~390px tall,
       so the calc goes small or negative and the video collapses.
   ========================================================================== */

/* dvh tracks the visible viewport, so the player stops resizing as the
   browser chrome appears and disappears. */
body.tutor-lesson-screen .tutor-video-player {
  max-width: min(100%, calc((100dvh - 230px) * 16 / 9));
}

@media (max-width: 767px) {
  /* On a phone the video is the screen: full width, no reserved chrome. */
  body.tutor-lesson-screen .tutor-video-player {
    max-width: 100%;
  }

  body.tutor-lesson-screen .tutor-video-player-wrapper {
    /* Bleed past the page gutter - a letterboxed video with side margins
       looks like an embed; edge to edge looks like a player. */
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
  }
}

/* Landscape phone: the video takes the screen and the rest gets out of the
   way. Targeting orientation AND a short viewport avoids catching tablets,
   which are landscape but tall enough to keep their normal layout. */
@media (orientation: landscape) and (max-height: 500px) {
  body.tutor-lesson-screen .tutor-video-player {
    max-width: min(100%, calc(100dvh * 16 / 9));
  }

  /* Reclaim every pixel of height for the video. */
  body.tutor-lesson-screen .header-float-wrap,
  body.tutor-lesson-screen .site-footer,
  body.tutor-lesson-screen .em-shell-nav {
    display: none;
  }

  body.tutor-lesson-screen .site {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* In landscape the notch moves to the side, so left/right insets matter
     and top/bottom do not. */
  body.tutor-lesson-screen .tutor-video-player-wrapper {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
}

/* The lesson screen hides the site header (style.css:11987) and supplies its
   own bar with "Back to course" and "Course content". Two consequences,
   measured on a logged-in lesson at 360x800:

   1. app-bar.css pads .site down by the app-bar height to clear a fixed header
      that is not there on this screen, leaving the lesson bar at top:102px.
   2. Those two controls render at 34x34 - under the 44px minimum, and they are
      the primary navigation on a screen with no other way out. */
@media (max-width: 767px) {
  body.tutor-lesson-screen .site {
    padding-top: var(--safe-top);
  }

  /* The WordPress admin bar is position:fixed at phone widths and was sitting
     over the lesson header. Only logged-in editors see it, but that includes
     everyone testing the screen. */
  body.admin-bar.tutor-lesson-screen .site {
    padding-top: calc(var(--safe-top) + 46px);
  }
}

/* The helper-bot launcher covered the Previous/Next lesson controls, which are
   the main way through a course. Lift it clear of the tab bar and the footer
   nav on this screen specifically. */
@media (max-width: 767px) {
  body.tutor-lesson-screen .emhb-root {
    bottom: calc(var(--sp-5) + var(--tabbar-total));
  }
}

/* style.css:12083 sets an explicit 34x34, which beats min-width/min-height.
   Grow the hit area with padding and pull it back with an equal negative
   margin: the button still *looks* 34px and the bar does not reflow, but the
   tappable region is 44px. Phones and tablets only - on desktop with a mouse
   the 34px box is correct. */
@media (max-width: 1199px) {
  body.tutor-lesson-screen .em-learn-icon-btn,
  body.tutor-lesson-screen .tutor-course-topic-single-header .tutor-iconic-btn {
    padding: 5px;
    margin: -5px;
    box-sizing: content-box;
  }

  /* Restore the gap the negative margins would otherwise close up. */
  body.tutor-lesson-screen .em-learn-icon-btn + .em-learn-icon-btn,
  body.tutor-lesson-screen .tutor-course-topic-single-header .tutor-iconic-btn + .tutor-iconic-btn {
    margin-left: var(--sp-2);
  }
}

/* Any embedded iframe keeps its shape rather than being squashed. */
.tutor-ratio-16x9,
.plyr__video-embed,
.em-video-embed {
  aspect-ratio: 16 / 9;
  height: auto;
}

.wp-block-embed__wrapper iframe,
.em-video-embed iframe {
  max-width: 100%;
}

/* ==========================================================================
   2. Excel shortcuts  (Phase 4 priority 13)
   The plan expected a wide table. It is actually a card/accordion list of
   .sc-* blocks, so it needs density and tap-target work, not table scrolling.
   It is still the heaviest page on the site (~1.3 MB), so the rules here are
   deliberately cheap.
   ========================================================================== */
@media (max-width: 767px) {
  .sc-cat-head {
    min-height: var(--tap-min);
    gap: var(--sp-2);
  }

  /* Key combinations must never wrap mid-chord or overflow the card. */
  .sc-keys {
    flex-wrap: wrap;
    min-width: 0;
  }

  .sc-copy,
  .sc-action {
    min-height: var(--tap-min);
    min-width: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sc-other-list {
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   3. Cart / checkout  (Phase 4 priority 7)
   Woo's own small-screen stylesheet handles the table collapse; what it does
   not do is make the order totals reachable without scrolling past the form.
   ========================================================================== */
@media (max-width: 767px) {
  .woocommerce table.shop_table_responsive tbody th,
  .woocommerce-page table.shop_table_responsive tbody th {
    display: none;
  }

  /* Quantity steppers are small by default and are a primary control. */
  .woocommerce .quantity .qty {
    min-height: var(--tap-min);
    min-width: 64px;
    text-align: center;
  }

  /* The place-order button is the goal of the screen: full width, and clear
     of the tab bar. */
  .woocommerce #place_order,
  .woocommerce .checkout-button,
  .woocommerce button.button.alt {
    width: 100%;
    justify-content: center;
  }

  .woocommerce-checkout .form-row {
    margin-bottom: var(--sp-4);
  }
}

/* ==========================================================================
   4. Dashboard  (Phase 4 priority 5)
   ========================================================================== */
@media (max-width: 767px) {
  /* Tutor's dashboard nav is a vertical list that eats the first screen.
     Horizontal scroll turns it into a segmented control. */
  .tutor-dashboard-permalinks {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: var(--sp-1);
  }

  .tutor-dashboard-permalinks::-webkit-scrollbar {
    display: none;
  }

  .tutor-dashboard-permalinks > li {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .tutor-dashboard-permalinks > li > a {
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   5. Login / registration  (Phase 4 priority 6)
   The app shell is suppressed on these screens, so they need their own
   bottom clearance.
   ========================================================================== */
@media (max-width: 767px) {
  .em-reg-wrap,
  .em-login-wrap {
    padding-bottom: calc(var(--sp-7) + var(--safe-bottom));
  }

  .em-reg-field,
  .em-login-field {
    margin-bottom: var(--sp-4);
  }

  /* Submit is the only action that matters on these screens. */
  .em-reg-submit,
  .em-login-submit,
  .em-reg-wrap button[type="submit"] {
    width: 100%;
    min-height: var(--tap-min);
    justify-content: center;
  }
}

/* ==========================================================================
   6. Blog / archive / 404  (Phase 4 priority 12)
   ========================================================================== */
@media (max-width: 767px) {
  .nav-links,
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
  }

  .entry-single img,
  .entry-content img {
    border-radius: var(--r-md);
  }
}

/* ==========================================================================
   7. Accessibility  (Phase 7.1)
   ========================================================================== */

/* Icon-only controls need an accessible name; where the markup provides one
   via aria-label this is a no-op, but it documents the requirement. */
.em-shell-nav__link:focus-visible {
  outline: 2px solid var(--accent, #388E3C);
  outline-offset: -3px;
  border-radius: var(--r-md);
}

/* Skip link: keyboard users should not have to tab the whole nav first. */
.em-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  color: var(--accent, #388E3C);
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--r-md) 0;
  box-shadow: var(--sh-md);
}

.em-skip-link:focus {
  left: var(--safe-left);
  top: var(--safe-top);
}

/* High-contrast mode: the tab bar's active state is conveyed by colour
   alone, which disappears under forced colours. */
@media (forced-colors: active) {
  .em-shell-nav {
    border-top: 1px solid CanvasText;
  }

  .em-shell-nav__link.is-active {
    outline: 1px solid CanvasText;
    outline-offset: -4px;
  }
}

/* ==========================================================================
   8. Orientation and foldables  (Phase 7.2 / 7.3)
   ========================================================================== */

/* Landscape phone.
   A rotated phone is 700-950px wide, which lands in the tablet range and gave
   it the 72px icon rail - measured at 844x390. A rail is wrong there: it steals
   width from an already short viewport, and the device is still a phone held in
   two hands, where the bottom edge is what the thumbs reach.

   max-height is what separates a rotated phone from a real tablet: a landscape
   tablet is 768px+ tall and keeps its rail. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1199px) {
  /* Shorter bar: the full 58px would be 15% of a 390px viewport. */
  :root {
    --tabbar-h: 46px;
  }

  /* Override the tablet rail from app-shell.css and go back to a bottom bar. */
  .em-shell-nav {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border-right: 0;
    border-top: 1px solid rgba(0, 0, 0, .07);
    box-shadow: var(--sh-up);
    padding-top: 0;
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }

  .em-shell-nav__list {
    flex-direction: row;
    height: 46px;
    padding-top: 0;
    gap: 0;
  }

  .em-shell-nav__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .em-shell-nav__link {
    flex-direction: row;
    gap: var(--sp-2);
    min-height: 46px;
    margin: 0;
    width: 100%;
    border-radius: 0;
  }

  /* The rail marks the active item with a tinted pill. Inherited into this
     short bar it became a full-height green block across the whole cell, so
     the active state goes back to the tab-bar convention: colour plus a top
     indicator, no fill. */
  .em-shell-nav__link.is-active {
    background: none;
    box-shadow: inset 0 2px 0 0 var(--accent, #388E3C);
  }

  /* Icon and label sit side by side: there is horizontal room to spare in
     landscape, and it keeps the bar short. */
  .em-shell-nav__label {
    font-size: 11px;
  }

  .em-shell-nav__icon i {
    font-size: 18px;
  }

  /* Undo the rail's page offset and restore the bottom clearance. */
  .site,
  .header-float-wrap {
    margin-left: 0;
  }

  .site {
    padding-bottom: var(--tabbar-total);
  }

  /* The helper bot follows the bar back to the bottom edge. */
  .emhb-root {
    bottom: calc(14px + var(--tabbar-total));
  }
}

/* Very short landscape (~360px tall): drop labels entirely rather than
   shrink the bar further. */
@media (orientation: landscape) and (max-height: 380px) and (max-width: 1199px) {
  .em-shell-nav__label {
    display: none;
  }
}

/* Very narrow (folded phones, ~280px): stop five tab labels from colliding. */
@media (max-width: 320px) {
  .em-shell-nav__label {
    font-size: 9px;
    letter-spacing: -.2px;
  }

  .em-shell-nav__icon i {
    font-size: 18px;
  }

  :root {
    --gutter: 12px;
  }
}

/* ==========================================================================
   9. Performance  (Phase 7.5)
   ========================================================================== */

/* Images below the fold decode off the main thread where supported. */
img[loading="lazy"] {
  content-visibility: auto;
}

/* Long, uniform lists get cheap virtualisation. contain-intrinsic-size gives
   the browser a height estimate so the scrollbar does not jump. */
@media (max-width: 767px) {
  .em-qa-item,
  .hcard,
  .tutor-course-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 260px;
  }
}

/* ==========================================================================
   10. Print
   ========================================================================== */
@media print {
  .em-shell-nav,
  .header-float-wrap,
  .emhb-root,
  .site-footer {
    display: none !important;
  }

  .site {
    padding: 0 !important;
    margin: 0 !important;
  }
}