/* ============================================================================
   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;
  --mz-zoom: 1; /* the desktop zoom (index.html) never applies to sheets */
}

/* ---- 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;
  /* Tablets now get this chrome too: keep the launcher a phone-width
     column (<= 600px) centred on wide screens instead of three 340px
     tiles with label chips stretched across them. */
  padding: 18px max(12px, calc((100vw - 600px) / 2)) 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;
  /* Desktop's 19.7px ChicagoFLF is too big for a 3-col phone tile: on a
     360px Galaxy the tile's inner width is ~90px and "MILKMAN" alone is
     104px, so break-word split it mid-word ("MILKMA / N ZERO"). Derive the
     size from the viewport so the longest single word (MILKMAN ~5.25em)
     always fits one line: tile inner = (100vw - 40px)/3 - 16px, and
     (100vw - 96px)/16 keeps a few px of slack. 320px -> 14px,
     360 -> 16.5px, 390 -> 18.4px, >=412 -> the desktop size. */
  font-size: clamp(12px, (100vw - 96px) / 16, var(--fs-px));
}

/* ---- 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;
}
/* desktop.css caps the title cartouche at 60% of the bar: on a <=360px
   sheet that ellipsized "milkman0.exe" to "milkman0..." and clipped
   "Matt Romein". The right-hand controls are hidden on mobile, so the
   title can have everything but the 44px close box and some air. */
html[data-chrome="mobile"] .win-title-text {
  max-width: calc(100% - 72px);
}
/* Folder info strip ("8 items, 1,023.9 MB available"): nowrap text
   poked through the window border at 320px wide. Clip + ellipsize. */
html[data-chrome="mobile"] .win-info-strip {
  display: block;        /* the text is a bare text node — flex can't ellipsize it */
  line-height: 36px;     /* desktop.css height: 36px, was vertically centered by flex */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 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;
  /* The bare classic-Mac close square wasn't legible as "close" on
     phones — an inline-SVG ✕ makes it read as one (Matt, 2026-08-31).
     Desktop keeps the empty period square. */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 4l10 10M14 4L4 14' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

/* No zoom or collapse on touch: hide the title-bar zoom control
   (toggleZoom is inert under COARSE), the collapse box (a confusing
   no-op against the forced sheet height — Matt, 2026-08-31), and the
   dormant exe launch ring layer. */
html[data-chrome="mobile"] .win-zoom-btn,
html[data-chrome="mobile"] .win-collapse-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;
  /* desktop.css fixes cells at 172px; two of them (344px) don't fit a
     360px sheet's ~318px grid interior, so TEAM / Milk Pouch / Press
     fell into ONE column (8 members = five screens of scrolling with an
     empty right half). Fluid: two columns on any portrait phone, up to
     the desktop 172px in landscape. */
  width: clamp(140px, 33.33%, 172px);
}

/* 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 sheet itself scrolls. desktop.css clips .win-body (overflow:hidden)
   and gives the Body row flex:1 / min-height:0 so it absorbs whatever is
   left — on a landscape phone (sheet ~260px tall) "whatever is left" is
   nothing: the Subject and Body rows vanished below the clip with no way
   to scroll to them. Let the Body row take its natural height and the
   whole compose stack scroll instead. */
html[data-chrome="mobile"] .mail-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html[data-chrome="mobile"] .mail-compose-row-tall {
  flex: 0 0 auto;
}
/* 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;
}
/* Landscape phones: the note's centered flex column is taller than a
   ~260px sheet, and flex centering pushes the overflow off BOTH ends —
   the headline lost its top and GET TICKETS its bottom, unscrollably
   (the .win-body clips). Start-align + scroll, with auto-margin
   pseudo-elements that still center the stack whenever it fits. */
html[data-chrome="mobile"] .note-body {
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html[data-chrome="mobile"] .note-body::before,
html[data-chrome="mobile"] .note-body::after {
  content: '';
  margin: auto 0;
}

/* ---- exe title art: fit the 126-char ASCII banner into a ~390px sheet ---- */
html[data-chrome="mobile"] .exe-title-art {
  /* desktop.css sizes the art from the body's content width (100cqw / 76).
     Landscape: width alone would size the art ~10px on a 780px-wide
     phone — ~550px of banner on a ~260px sheet, with the NEW GAME menu
     and show date below the fold and no scrollbar to say so. Also cap
     by height: the art is 27 rows at line-height 1.05 (~28.4 x font
     size); leave ~220px for the menu + date + gaps. Floor at 3px.
     vh first for browsers without dvh. */
  font-size: max(3px, min(100cqw / 76, (100vh - 220px) / 28.4));
  font-size: max(3px, min(100cqw / 76, (100dvh - 220px) / 28.4));
}

/* Phone sheet: a touch less margin than the 16px desktop window so the
   ~340px-wide banner keeps its glyphs readable. */
html[data-chrome="mobile"] .exe-body {
  --exe-pad: 12px;
}

/* 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 {
  /* Both axes: in landscape a width-fitted photo was taller than the
     sheet and cropped at the bottom. Replaced elements keep their
     aspect ratio under max-width + max-height with auto sizes. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}


/* ---- Document windows (.win-doc, divergence entry 26) -------------------- */
/* The sheet fills the viewport; the doc scroll container needs momentum
   scrolling, and links need >= 44px-ish tap targets (inline-block +
   vertical padding grows the hit box without breaking text flow). */
html[data-chrome="mobile"] .win-doc-scroll {
  -webkit-overflow-scrolling: touch;
}
html[data-chrome="mobile"] .win-doc {
  font-size: 18px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  max-width: 720px;   /* readable measure on a landscape tablet sheet */
  margin: 0 auto;
}
html[data-chrome="mobile"] .win-doc .doc-h1 {
  font-size: 25px;
}
html[data-chrome="mobile"] .win-doc a,
html[data-chrome="mobile"] .team-bio a,
html[data-chrome="mobile"] .contact-email {
  display: inline-block;
  padding: 8px 0;
  margin: -8px 0;
}

/* The contact window's big email anchor (2.2rem body size = ~481px wide)
   overflows a 390px sheet — cap it so the address always fits whole. */
html[data-chrome="mobile"] .contact-email {
  font-size: 22px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Mail-arrive banner: clear the taller mobile menubar + notch. */
html[data-chrome="mobile"] .mail-notify {
  top: calc(56px + env(safe-area-inset-top));
  right: 12px;
  max-width: calc(100vw - 24px);
}

/* Trailer COMING SOON card: bigger type on the phone sheet — the two
   words wrap onto their own lines like the poster treatment. */
html[data-chrome="mobile"] .movie-placeholder {
  font-size: min(20vw, 96px);
  line-height: 1.15;
}