/* ============================================================================
   MILKMAN ZERO — coarse-pointer (phone / touch) chrome.
   Loaded for everyone; EVERY rule is scoped under html[data-chrome="mobile"],
   which the inline detector in index.html sets from
   matchMedia('(pointer: coarse)'). At fine pointer (data-chrome="desktop")
   this file contributes nothing — the desktop chrome is untouched.

   Layered over the working desktop engine (Tasks 2-8), this restages:
     - the absolutely-positioned desktop icons as a 3-column launcher grid
     - every .win window as a full-screen sheet
     - touch targets to >= 44px
     - safe-area (notch / home-indicator) insets
   Input branches (single-tap open, no drag, no zoom, no fake cursor) live
   in js/desktop.js behind the COARSE flag; hover affordances are guarded
   with @media (hover: hover) in css/desktop.css.

   NOTE (Task 9 amendments): there is NO #menu-tickets element. The mobile
   tickets CTA = the ticketnote sheet (auto-opens at boot) + the TICKETS
   launcher tile (#icon-tickets). No pinned top-bar button exists or is added.
   ============================================================================ */

/* ---- Page: lock to the dynamic viewport, no rubber-band, no page scroll --- */
html[data-chrome="mobile"],
html[data-chrome="mobile"] body {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

/* core.css pins 1rem via a min() formula derived from the show's 16:9 render
   output (divergence entry 7) — wrong for a portrait phone. Re-pin the root
   to a fixed size so the desktop chrome's rem-derived sizes behave. */
html[data-chrome="mobile"] {
  font-size: 16px !important;
}

/* ---- MENU BAR: safe-area padded, taller for touch, menus hidden --------- */
html[data-chrome="mobile"] #menubar {
  height: auto;
  min-height: 44px;
  padding-top: env(safe-area-inset-top);
  padding-left: calc(10px + env(safe-area-inset-left));
  padding-right: calc(10px + env(safe-area-inset-right));
  align-items: center;
}

/* File / Edit / View / Special titles: no dropdowns on touch. The sigil and
   the clock (#clock, not a .menu-title) stay. */
html[data-chrome="mobile"] .menu-title {
  display: none;
}

/* ---- DESKTOP -> LAUNCHER GRID ------------------------------------------- */
/* #desktop is position:fixed (top:36px, bottom:0) in desktop.css. Override
   top to sit below the taller mobile menubar; bottom:0 already gives the
   height, so no height calc is needed here. */
html[data-chrome="mobile"] #desktop {
  top: calc(44px + env(safe-area-inset-top));
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: 1fr tracks floor at each cell's
     min-content width, and .icon-label is nowrap in desktop.css — a long
     label (about.txt) blows the track past the viewport and forces
     a horizontal page scroll. minmax(0, ...) lets tracks compress below
     min-content; the label wrap rule below keeps the text legible once
     the track is narrower than the word. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 8px;
  padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Kill the absolute desktop slots (and any inline left/top the drag path
   might have written) so every icon flows into the grid. */
html[data-chrome="mobile"] #desktop .icon {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto;
  min-height: 84px;
  gap: 6px;
  touch-action: manipulation;
}

/* Icon ordering: the grid follows index.html DOM order, which IS the
   canonical marketing order (MILKMAN ZERO, about.txt, trailer.mov, TEAM,
   PRESS, Mail, TICKETS, Milk Pouch, Recycle Bin) — no `order` overrides,
   but explicit placement below (Map removal leaves deliberate blanks
   the natural grid flow would otherwise fill). */

/* Explicit launcher placement — row 3 and 4 have deliberate blank cells:
   Milkman About Trailer / Team Press Mail / Tickets – – / Milk Pouch – Recycle */
html[data-chrome="mobile"] #icon-milkman   { grid-area: 1 / 1; }
html[data-chrome="mobile"] #icon-about     { grid-area: 1 / 2; }
html[data-chrome="mobile"] #icon-trailer   { grid-area: 1 / 3; }
html[data-chrome="mobile"] #icon-team      { grid-area: 2 / 1; }
html[data-chrome="mobile"] #icon-press     { grid-area: 2 / 2; }
html[data-chrome="mobile"] #icon-mail      { grid-area: 2 / 3; }
html[data-chrome="mobile"] #icon-tickets   { grid-area: 3 / 1; }
html[data-chrome="mobile"] #icon-milkpouch { grid-area: 4 / 1; }
html[data-chrome="mobile"] #icon-recycle   { grid-area: 4 / 3; }

/* Icon label: desktop.css hardcodes white-space: nowrap (never wraps) and a
   fixed 28px line-height (single-line only). On mobile the 3-col grid can
   compress a track narrower than a long label's min-content (e.g.
   about.txt), so nowrap forces horizontal overflow. Let the label
   wrap to 2 lines instead, filling the tile width so the wrap has somewhere
   to break. The white background/border chip and the 1px black border are
   untouched — only the text-flow properties and line-height change. */
html[data-chrome="mobile"] #desktop .icon-label {
  width: 100%;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  text-align: center;
}

/* ---- WINDOWS -> FULL-SCREEN SHEETS -------------------------------------- */
/* Real class is .win (not .window). Normally position:absolute with a
   transform for placement; here it becomes a fixed full-viewport sheet. */
html[data-chrome="mobile"] .win {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(44px + env(safe-area-inset-top)) !important;
  bottom: env(safe-area-inset-bottom) !important;
  width: 100vw !important;
  height: auto !important;
  max-width: 100vw !important;
  margin: 0 !important; /* .win's normal 8px margin (outline-stacking
    compensation, desktop.css) would otherwise over-constrain this
    position:fixed sheet the same way it does .win.fake-fullscreen
    (desktop.css ~line 1801) — shifts it down/right and pushes the
    close box partially off-screen. */
  transform: none !important;
  border-radius: 0;
}

/* Title bar: >= 44px touch height; keep the drag region tappable (bring to
   front) even though drag itself is disabled under COARSE. */
html[data-chrome="mobile"] .win-title-bar {
  height: auto;
  min-height: 44px;
}

/* Close box: 44px touch target; visual is a box drawn on ::before at
   ~90% of the touch square (40px), full-opacity. desktop.css draws the
   box directly on .win-close-btn itself (border + background — ::after
   is a hover-only accent that never paints on touch), so the element's
   own border/fill is stripped and the glyph painted on ::before,
   centered in the touch target. */
html[data-chrome="mobile"] .win-close-btn {
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-chrome="mobile"] .win-close-btn::before {
  content: '';
  display: block;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border: 2px solid #000;
  background: #fff;
}

/* No zoom on touch: hide the title-bar zoom control (toggleZoom is also
   inert under COARSE) and the dormant exe launch ring layer. Collapse box
   is left visible but is a no-op against the forced sheet height. */
html[data-chrome="mobile"] .win-zoom-btn,
html[data-chrome="mobile"] #zoom-layer {
  display: none !important;
}

/* Fullscreen control: a sheet already fills the viewport, so the movie
   window's fake-fullscreen toggle is redundant — hide it (amendment note). */
html[data-chrome="mobile"] .win-fullscreen-btn {
  display: none !important;
}

/* Folder / recycle / TEAM grid cells: >= 44px touch rows. */
html[data-chrome="mobile"] .win-grid-cell {
  min-height: 44px;
}

/* Mail signup sheet: the desktop compose puts labels in a 170px side
   column — on a narrow sheet that wraps the labels and crowds the
   values. Stack each row instead (label above value, full width) and
   keep the editable field a >= 44px touch target. */
html[data-chrome="mobile"] .mail-compose-row {
  flex-direction: column;
  padding: 10px 0 12px;
}
html[data-chrome="mobile"] .mail-compose-label {
  width: 100%;
  font-size: 16px;
  line-height: 22px;
  padding-top: 0;
  letter-spacing: 1px;
}
html[data-chrome="mobile"] .mail-static-value,
html[data-chrome="mobile"] .mail-field-mirror,
html[data-chrome="mobile"] .mail-field-input {
  font-size: 20px;
  line-height: 28px;
}
html[data-chrome="mobile"] .mail-static-value {
  padding: 4px 0 0;
}
html[data-chrome="mobile"] .mail-field-wrap {
  min-height: 44px;
  padding: 4px 0 0;
}
html[data-chrome="mobile"] .mail-field-mirror {
  top: 4px;
}
/* The tall Body row: let the pre-written text size itself and scroll
   inside the remaining sheet space. */
html[data-chrome="mobile"] .mail-compose-row-tall .mail-static-value {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Send: full-width app-style button in the toolbar. */
html[data-chrome="mobile"] .mail-toolbar {
  height: auto;
  min-height: 56px;
  padding: 8px 14px;
}
html[data-chrome="mobile"] .mail-btn {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

/* Tickets CTA (ticketnote sheet's GET TICKETS button): >= 44px, tap feedback
   comes from .note-cta:active (kept; the :hover invert is hover-guarded). */
html[data-chrome="mobile"] .note-cta {
  min-height: 44px;
  touch-action: manipulation;
}

/* ---- exe title art: fit the 126-char ASCII banner into a ~390px sheet ---- */
/* Desktop uses 9px; drop to 5px on phones so the art never wraps. white-space
   is already `pre` (no wrap) with overflow-x:auto as a belt-and-suspenders
   scroll fallback on the narrowest devices. */
html[data-chrome="mobile"] .exe-title-art {
  font-size: 5px;
}

/* Title menu + show-opens date: 15% smaller than the inherited size on
   the phone sheet so the GeistPixel lines don't crowd the narrow art. */
html[data-chrome="mobile"] .exe-title-menu,
html[data-chrome="mobile"] .exe-date {
  font-size: 0.85em;
}

/* Milk Monster: the 960x622 scare frame is landscape — object-fit:cover
   (desktop) crops it into an over-zoomed blob on a portrait phone.
   Contain + a 1.35x push: the face fills the phone screen without the
   cover-crop zoom (edges past the viewport just clip into the flash). */
html[data-chrome="mobile"] #scare-overlay img {
  object-fit: contain;
  transform: scale(1.35);
}

/* ---- No fake cursor on touch (mousemove init is also skipped under COARSE) */
html[data-chrome="mobile"] #fake-cursor {
  display: none !important;
}

/* ---- ALERT DIALOG: fluid width (fix wave) ------------------------------- */
/* Desktop centers #alert-dialog via left:50% + width:600px +
   transform:translate(-50%,-50%). On a 390px viewport that's a 600px box
   half off-screen either side, and #alert-ok (position:absolute, right:22px
   INSIDE that box) lands ~9px on-screen — untappable. Every mobile mail send
   raises showAlert('Message Sent.'), so this stuck an overlay at z-2000 on
   every send. Stretch the box between two fixed margins instead of centering
   it by width, and drop only the horizontal half of desktop's transform —
   top:34% + translateY(-50%) alone still centers it vertically exactly like
   desktop does. */
html[data-chrome="mobile"] #alert-dialog {
  left: 12px;
  right: 12px;
  width: auto;
  transform: translateY(-50%);
}

/* #alert-ok is position:absolute inside the now-fluid dialog. Desktop's
   padding (2px 28px 3px) plus the inherited 36px line-height lands just
   under the 44px touch minimum — size it explicitly instead. */
html[data-chrome="mobile"] #alert-ok {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
}

/* Pouch/photo windows: the dithered canvas must fit the sheet, never crop. */
html[data-chrome="mobile"] .win-image-body {
  overflow: auto;
}
html[data-chrome="mobile"] .win-image-body canvas,
html[data-chrome="mobile"] .win-image-body img {
  max-width: 100%;
  height: auto;
}