/* ==========================================================================
   Cosmic Calculus — responsive.css (mobile overrides only)
   Every rule lives inside a media query: desktop layout is untouched.
   Load order: this file must come AFTER the inline <style> blocks in <head>
   (place <link rel="stylesheet" href="build/responsive.css"> just before
   </head>). !important is used only where the competing rule is either an
   inline style (JS-built #notesPanel), a body-level <style> block that loads
   after this file (.gate-modal in #dob-pin-gate-styles), or already
   !important in index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PHONES + SMALL TABLETS (portrait) — stack the card, kid surface first
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* No horizontal scroll, ever */
  html, body { overflow-x: hidden; }
  .fg-wrap, #wrap { max-width: 100vw; }

  /* Page chrome: reclaim space */
  #wrap { padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .pageHeader { margin: 8px 0 6px; }

  /* Card: one column. Problem/answer/numpad (#problemWrap) FIRST,
     animation + settings column (#options) second. */
  .card {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding: 14px 12px;
    max-width: 100%;
  }
  #problemWrap { order: -1; }

  /* Grid/flex blowout guard: the fixed 376px .mm-stage (and other fixed-width
     controls) must not force the column wider than the phone. min-width:0
     lets containers shrink so the overflow-x rules below can clip/scroll. */
  .card > #options, .card > #problemWrap { min-width: 0; }
  #options > *, #optsRow > * { min-width: 0; max-width: 100%; }
  #orbitControls, #orbitControlsBody, #orbitVisualControls { min-width: 0; }

  /* Kill the desktop-only 0.9 scale (it leaves phantom empty space) */
  #problemWrap {
    transform: none;
    width: 100%;
    max-width: 100%;
  }
  #options { width: 100%; max-width: 100%; }
  #optsRow { width: 100%; }

  /* Work area: fluid, scrolls inside itself as a last resort */
  #problemGroup { max-width: 100%; }
  #workArea { max-width: 100%; overflow-x: auto; }

  /* Sun animation scales to the container, keeps 396x220 aspect */
  #sunCanvas {
    width: 100%;
    max-width: 396px;
    height: auto;
    aspect-ratio: 396 / 220;
    margin: 0 auto 10px;
  }
  /* Maximized visualizer: 3x of a 396px canvas is unusable on a phone */
  body.sun-max-active #sunCanvas {
    width: 100vw;
    max-width: 100vw;
    transform: translate(-50%, -50%) scale(1.35);
  }

  /* Answer box: full width, digits sized to viewport */
  #answer {
    width: 100%;
    max-width: 420px;
    font-size: clamp(28px, 8.5vw, 40px);
  }
  #answer::placeholder { font-size: clamp(20px, 6.5vw, 32px); }

  /* Numpad: fluid 3-column grid, >=56px touch targets, centered */
  #numpad {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(3, minmax(56px, 1fr));
    gap: 10px;
    justify-content: center;
  }
  #numpad button {
    min-height: 56px;
    min-width: 56px;
    font-size: clamp(18px, 5.5vw, 24px);
    padding: 10px;
  }

  /* Action buttons: comfortable thumb targets */
  #actionsRow .btn { min-height: 48px; }
  #scoreBar { flex-wrap: wrap; gap: 10px 24px; }

  /* Settings panel -> full-width, centered, scrollable sheet.
     (Desktop rule pins it absolute at top:44px/left:8px, width 540px.) */
  #settingsPanel {
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
  }
  #settingsPanel .row { grid-template-columns: minmax(118px, 42%) minmax(0, 1fr); }
  .pin-req-popup { max-width: 100%; }

  /* Notes panel is built by JS with inline styles — !important required */
  #notesPanel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
  }

  /* Work pads: the mm-stage is a fixed 376px absolute-positioned stage;
     let the pad scroll sideways inside itself instead of pushing the page */
  #bottomMachines { max-width: 100%; }
  #multWrap, #addingWrap {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  /* --ccPadStageW drives #noteGridExtra's !important width */
  :root { --ccPadStageW: min(376px, 100%); }

  /* Animation controls row wraps inside the column */
  #orbitControls { max-width: 100%; }
  #orbitControlsBody { max-width: 100%; }

  /* Modals fit small screens.
     .gate-modal styles are declared in <style> tags inside <body> (after this
     stylesheet), so they need !important to win. */
  .gate-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 92vh !important;
    padding: 10px !important;
  }
  .cc-modal-card {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: 92vh;
  }
  .cc-modal-body {
    max-height: calc(92vh - 62px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 10px 14px;
  }
  .cc-confirm-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: 92vh;
    overflow-y: auto;
  }
  /* Mastery/score tables: tighter columns; modal body scrolls x as backstop */
  .cc-mastery-grid, .cc-score-grid {
    grid-template-columns: minmax(70px, auto) 1fr minmax(110px, 1fr) auto;
    gap: 6px;
  }
}

/* --------------------------------------------------------------------------
   SMALL PHONES (<=520px) — tighter paddings, digit columns via #workArea vars
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {

  #wrap { padding: 6px 6px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .pageHeader { margin: 6px 0 4px; }
  .card {
    padding: 12px 10px;
    border-radius: 14px;
    row-gap: 14px;
  }

  /* Problem digits: override the existing #workArea vars so a 4-digit
     problem (op + 4 columns) — and up to ~9 note columns — fits 375px.
     --digitSize recomputes automatically from --colW. */
  #workArea {
    --colW: clamp(24px, 8.5vw, 44px);
    --colGap: clamp(3px, 1vw, 8px);
  }

  /* Keypad stays >=48px targets */
  #numpad { max-width: 340px; gap: 8px; }
  #numpad button {
    min-height: 48px;
    min-width: 48px;
    padding: 8px;
  }

  #answer {
    font-size: clamp(24px, 8vw, 34px);
    padding: 8px 10px;
  }
  #answer::placeholder { font-size: clamp(18px, 6vw, 28px); }

  #scoreBar { font-size: 17px; gap: 8px 18px; }
  .machineHead .machineTitle { font-size: 18px; }

  /* Settings rows: stack label above control so nothing collides */
  #settingsPanel { padding: 10px; font-size: 13px; }
  #settingsPanel .row {
    grid-template-columns: 1fr;
    row-gap: 3px;
    margin: 8px 0;
  }
}

/* --------------------------------------------------------------------------
   LANDSCAPE PHONES (short viewports, touch only) — trim vertical space.
   pointer:coarse keeps short DESKTOP windows exactly as-is.
   No JS: the animation canvas is simply hidden (except while maximized,
   where hiding it would leave a black screen with no way back).
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {

  body:not(.sun-max-active) #sunCanvas { display: none; }
  body:not(.sun-max-active) #sunMaxBtn { display: none; }

  #wrap { padding-top: 4px; padding-bottom: 6px; }
  .pageHeader { margin: 4px 0 2px; }
  .card {
    padding-top: 10px;
    padding-bottom: 10px;
    row-gap: 10px;
  }
  #scoreBar { margin-top: 8px; }
  #numpad { margin-top: 8px; }
  #numpad button { min-height: 44px; padding: 6px; }
  #copyrightFooter { padding: 4px 0 calc(env(safe-area-inset-bottom, 0px) + 4px); }
}
