/* responsive-mobile.css — PHONE MODE
   ============================================================
   The app's normal layout is a desktop two-column split that simply STACKS on a
   narrow screen: header, board, the whole right panel, footer. On a phone that
   left the board about a third of the screen — unreadable at arm's length, which
   is exactly when a phone gets used (walking the room, showing one kid a
   position).

   Phone Mode is the answer: board and arrows, nothing else, plus one button.

   Everything here hangs off `body.phone-mode`, which js/features/phone.js adds
   and removes. With the class absent this file changes nothing at all, so the
   desktop layout cannot be affected by anything below.

   The floating controls are NOT drawn over the board. A square board on a ~19.5:9
   phone leaves a deep empty band at the bottom; #board-cell reserves exactly that
   band as padding, fitBoard() sizes the board into what's left (it already reads
   the cell's padding), and the dock sits in the gap. Nothing overlaps, so nothing
   has to be translucent to stay usable.
   ============================================================ */

:root {
  /* 44px is the Apple/Android minimum tap target. Below this a coach taps twice. */
  --phone-tap: 2.85rem;
  /* How far the dock floats off the bottom edge. */
  --phone-dock-gap: 0.55rem;
  /* The band #board-cell reserves at the bottom. DERIVED, not hand-tuned: it has
     to cover the pill's real height (tap target + 0.3rem padding top and bottom +
     borders) plus the float gap, plus clearance. Two independently-tuned numbers
     drifted 1px apart during development and the pill sat on the file labels —
     deriving one from the other is what stops that recurring the next time a
     padding changes. */
  --phone-dock-h: calc(var(--phone-tap) + 0.6rem + 2px + var(--phone-dock-gap) + 0.55rem);
}

/* ---- chrome that phone mode removes ------------------------------------- */
body.phone-mode #main-header,
body.phone-mode #main-footer,
body.phone-mode #right-panel {
  display: none !important;
}

/* Board fills what's left. The bottom padding is the dock's reserved band; the
   safe-area inset keeps it clear of the iPhone home indicator. */
body.phone-mode #main-area {
  padding: 0 !important;
  gap: 0 !important;
}
body.phone-mode #board-cell {
  padding: 0.35rem 0.35rem calc(var(--phone-dock-h) + env(safe-area-inset-bottom, 0px)) !important;
}

/* Thinner board frame — at phone size the desktop 5px ring eats a visible slice
   of every edge square. */
body.phone-mode #board-surface {
  border-width: 3px;
}

/* Coordinates are part of the minimum, not overhead to be trimmed. Board, arrows
   and coordinates is the whole screen — you cannot say "look at c4" to a room
   without them, and a coordinate too small to read at arm's length is the same as
   no coordinate.

   They were shrunk to 0.7rem here at first, to buy the board pixels. Wrong trade:
   the ~8px it bought is invisible on a 344px board, and it cost the one label the
   feature exists to keep. They now run LARGER than the desktop's phone-width size
   (0.875rem), and the column is sized so a digit never crowds the board edge. */
body.phone-mode #rank-labels,
body.phone-mode #rank-labels-right {
  width: 1.4rem;
}
body.phone-mode #file-labels,
body.phone-mode #file-labels-top,
body.phone-mode #rank-labels,
body.phone-mode #rank-labels-right {
  font-size: 1rem;
  letter-spacing: 0.02em;
}
/* Full-strength ink. The desktop uses slate-500 on a light panel; in phone mode
   these sit on the app's dark gradient with nothing else competing, so they can
   afford to be as legible as the pieces. */
body.phone-mode #file-labels,
body.phone-mode #file-labels-top,
body.phone-mode #rank-labels,
body.phone-mode #rank-labels-right {
  color: rgb(51 65 85);
}
.dark body.phone-mode #file-labels,
.dark body.phone-mode #file-labels-top,
.dark body.phone-mode #rank-labels,
.dark body.phone-mode #rank-labels-right {
  color: rgb(241 245 249);
}

/* ---- the chalkboard --------------------------------------------------------
   The Golden-Rules chalkboard (/rgy, /rule 1-3) is `left-0 top-1/2 -translate-y-1/2
   w-64`: on a desktop that parks it in the empty margin beside the board. A phone
   has no margin, so it landed dead across the middle of the board — covering the
   very position the class is voting on, which defeats the whole point of this mode.

   Move it into the empty band ABOVE the board and let it span the width. Only
   `--tw-translate-y` is cancelled, not `transform` itself, so the slide-in-from-
   the-left animation still plays; killing the transform outright would leave it
   fading in place. */
body.phone-mode #chalkboard-overlay {
  top: calc(0.6rem + env(safe-area-inset-top, 0px)) !important;
  bottom: auto !important;
  left: 0.6rem !important;
  right: 0.6rem !important;
  width: auto !important;
  --tw-translate-y: 0 !important;
  padding: 0.8rem 1rem !important;
  border-radius: 1rem;
}
body.phone-mode #chalkboard-text {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ---- the dock: nav pill + menu button ------------------------------------ */
/* Hidden unless phone mode is on; js/features/phone.js builds them once. */
#phone-dock { display: none; }
body.phone-mode #phone-dock {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--phone-dock-gap) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  pointer-events: none;   /* the band is inert; only the controls take taps */
}
#phone-dock > * { pointer-events: auto; }

/* Nav pill — centred, deliberately quiet. Two big targets, nothing else. */
#phone-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem;
  border-radius: 9999px;
}
#phone-nav button,
#phone-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--phone-tap);
  min-height: var(--phone-tap);
  border-radius: 9999px;
  color: rgb(71 85 105);
  transition: transform 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.dark #phone-nav button,
.dark #phone-menu-btn { color: rgb(203 213 225); }

#phone-nav button:active,
#phone-menu-btn:active { transform: scale(0.92); }

/* Menu button — pinned right, so the thumb finds it without looking. */
#phone-menu-btn {
  position: absolute;
  right: 0.85rem;
  bottom: 0;
}

/* Glass treatment shared by the pill and the button. Matches .glass-panel rather
   than inventing a second material. */
.phone-glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.7);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.13);
}
.dark .phone-glass {
  background: rgba(15, 17, 21, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* ---- the sheet ----------------------------------------------------------- */
/* Slides up from the bottom. Scrim closes it, so does a swipe down or Esc. */
#phone-sheet {
  position: fixed;
  inset: 0;
  z-index: 620;   /* above the board and dock, below toasts (z-500 is lower) */
  display: none;
}
#phone-sheet.open { display: block; }

#phone-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
#phone-sheet.open #phone-sheet-scrim { opacity: 1; }

#phone-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  border-radius: 1.5rem 1.5rem 0 0;
  background: rgb(248 250 252);
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.dark #phone-sheet-panel {
  background: rgb(20 23 30);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}
#phone-sheet.open #phone-sheet-panel { transform: translateY(0); }

/* Grab handle — the affordance that says "this drags down". */
#phone-sheet-grip {
  width: 2.5rem;
  height: 0.25rem;
  margin: 0.4rem auto 0.9rem;
  border-radius: 9999px;
  background: rgba(100, 116, 139, 0.4);
}

#phone-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
@media (max-width: 359px) {
  /* iPhone SE and similar — 4 across gets cramped once labels are in. */
  #phone-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.phone-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.7rem 0.25rem;
  border-radius: 1rem;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: rgb(51 65 85);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: transform 0.14s ease, background-color 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.dark .phone-action {
  color: rgb(203 213 225);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
.phone-action:active { transform: scale(0.94); }
.phone-action i,
.phone-action svg { width: 1.35rem; height: 1.35rem; }

/* The escape hatch back to the full layout reads as a row, not a tile — it is a
   different kind of thing from "open the explorer". */
#phone-sheet-exit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.85rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgb(100 116 139);
  background: transparent;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  -webkit-tap-highlight-color: transparent;
}
.dark #phone-sheet-exit { color: rgb(148 163 184); }

/* ---- editing on a phone ----------------------------------------------------
   Editing is the one job this mode can't do with a bare board: the palette, turn
   toggle, castling rights, en passant and Cancel/Done all live in #right-panel.
   While the editor is open it comes back as a bottom sheet, the board shares the
   screen with it, and the nav dock stands down (there are no moves to step
   through in the editor anyway, and Done/Cancel are right there instead). */
body.phone-mode.phone-editing #right-panel {
  display: flex !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 75;
  max-height: 58vh;
  border-radius: 1.25rem 1.25rem 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -8px 30px rgba(2, 6, 23, 0.35);
}
body.phone-mode.phone-editing #phone-dock { display: none; }
/* Board sits above the sheet rather than under it — same reservation trick as
   the dock, so the position stays fully visible while you set it up. */
body.phone-mode.phone-editing #board-cell {
  padding-bottom: 59vh !important;
}
/* The editor's own scroll area is short here; let the sheet do the scrolling so
   the palette and the Done button are always reachable with one thumb. */
body.phone-mode.phone-editing #editor-panel { height: auto; }
body.phone-mode.phone-editing #editor-panel > .flex-1 { padding: 0.75rem 1rem 1.25rem; }
body.phone-mode.phone-editing #piece-palette { gap: 0.6rem; }

/* ---- landscape phones ------------------------------------------------------
   Height is the scarce dimension here (a phone on its side is ~390-430 tall), so
   the dock has to give some back — at the portrait size it would eat 17% of the
   screen. Smaller targets are the right trade when the alternative is a smaller
   board; these are still at the 44px minimum. */
@media (max-height: 560px) {
  /* Only the inputs change; --phone-dock-h recomputes from them. */
  :root { --phone-tap: 2.75rem; --phone-dock-gap: 0.35rem; }
  body.phone-mode #board-cell {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  /* The chalkboard can't sit above the board in landscape — there is no band to
     sit in. Tuck it into the left margin the square board leaves behind. */
  body.phone-mode #chalkboard-overlay {
    top: 50% !important;
    left: 0.5rem !important;
    right: auto !important;
    width: 40vw !important;
    max-width: 18rem !important;
    --tw-translate-y: -50% !important;
  }
  #phone-sheet-panel { max-height: 92vh; }
}

/* Respect a user who has asked the OS for less motion. */
@media (prefers-reduced-motion: reduce) {
  #phone-sheet-panel,
  #phone-sheet-scrim,
  .phone-action,
  #phone-nav button,
  #phone-menu-btn { transition: none; }
}