/* =====================================================================
   Main menu (#app-menu) — approved prototype, 2 Oct 2026
   (ui-review/menu-prototype.html), same family as the reference WTG card.

     Menu                                   [✕]
     [ ⚠ SOS — emergency call            [›] ]   ← fixed, top
     [ T  Test · Inspector · signed in    [›] ]   ← Me, one row
     [ ▣ Campaigns     ] [ ▣ Weather      ]       ← even tiles: icon + name,
       102 of 210 done     T4-006 · rain 16%        one live line each
     …                    [ ▣ Radio (grey) ]       ← not built: whole tile grey
     [ ⇅ Edit order    ] [ ⏻ Close app    ]       ← even, bottom (Android)
            App version 1.107-test

   Warm-grey sheet, white cards, rounded-square icon badges (tone tokens).
   Tokens only: no hex, no px font sizes, no !important. Shared dialog
   rules are guarded with :not(:where(#app-menu …)) (scripts/exempt-scope.py).
   ===================================================================== */

#app-menu {
  box-sizing: border-box;
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 90dvh;
  margin: 0;
  padding: var(--hx-space-2) var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--hx-radius-sheet) var(--hx-radius-sheet) 0 0;
  background: var(--hx-page);
  box-shadow: var(--hx-shadow-sheet);
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-text-body);
  line-height: var(--hx-leading-body);
}
#app-menu[open] { display: flex; flex-direction: column; gap: var(--hx-space-2); }
#app-menu > * { flex-shrink: 0; }
#app-menu::backdrop { background: var(--hx-scrim); }
#app-menu::before {
  content: "";
  flex: none;
  align-self: center;
  width: var(--hx-space-5);
  height: var(--hx-space-1);
  border-radius: var(--hx-radius-chip);
  background: var(--hx-hairline);
}
@media (min-width: 761px) {
  #app-menu {
    inset: 0;
    width: min(var(--hx-dialog-width), calc(100% - 2 * var(--hx-gutter)));
    height: fit-content;
    margin: auto;
    border-radius: var(--hx-radius-sheet);
  }
  #app-menu::before { display: none; }
}

/* ---------- Heading: title + Close (52px square) ---------------------- */
#app-menu > .menu-heading {
  display: flex;
  align-items: center;
  gap: var(--hx-space-2);
  margin: 0;
  padding: 0 var(--hx-space-1);
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--hx-ink);
}
#app-menu > .menu-heading h2 {
  flex: 1;
  margin: 0;
  color: var(--hx-ink);
  font-size: var(--hx-text-display);
  font-weight: var(--hx-weight-strong);
  line-height: var(--hx-leading-tight);
}
#app-menu > .menu-heading > button {
  box-sizing: border-box;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--hx-target-action);
  min-width: var(--hx-target-action);
  height: var(--hx-target-action);
  min-height: var(--hx-target-action);
  margin: 0;
  padding: 0;
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-ink);
  cursor: pointer;
}
#app-menu > .menu-heading > button svg { width: var(--hx-icon-size); height: var(--hx-icon-size); stroke-width: var(--hx-icon-stroke); }
#app-menu .menu-arrange-hint {
  margin: 0;
  padding: var(--hx-space-2) var(--hx-space-3);
  border-radius: var(--hx-radius-card);
  background: var(--hx-info-tint);
  color: var(--hx-info);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-action);
}

/* ---------- Shared parts: icon badge, name, line, chevron square ------ */
#app-menu :is(.menu-sos-slot, .menu-me-slot, .menu-items, .menu-foot) button {
  box-sizing: border-box;
  margin: 0;
  font-family: var(--hx-font);
  text-align: left;
  cursor: pointer;
}
#app-menu .menu-icon {
  --menu-icon: calc(var(--hx-badge-size) * 1.25);   /* 40 px: larger icons, notification style (user, 5 Oct 2026) */
  display: grid;
  place-items: center;
  flex: none;
  width: var(--menu-icon);
  height: var(--menu-icon);
  border-radius: var(--hx-radius-badge);
  background: var(--hx-page);
  color: var(--hx-ink);
}
#app-menu .menu-icon svg { width: calc(var(--hx-icon-size) * .9); height: calc(var(--hx-icon-size) * .9); }
#app-menu .menu-icon[data-tone="green"]  { background: var(--hx-tone-green-bg);  color: var(--hx-tone-green-ink); }
#app-menu .menu-icon[data-tone="blue"]   { background: var(--hx-tone-blue-bg);   color: var(--hx-tone-blue-ink); }
#app-menu .menu-icon[data-tone="violet"] { background: var(--hx-tone-violet-bg); color: var(--hx-tone-violet-ink); }
#app-menu .menu-icon[data-tone="amber"]  { background: var(--hx-tone-amber-bg);  color: var(--hx-tone-amber-ink); }
#app-menu .menu-icon[data-tone="teal"]   { background: var(--hx-tone-teal-bg);   color: var(--hx-tone-teal-ink); }
#app-menu .menu-icon[data-tone="grey"]   { background: var(--hx-tone-grey-bg);   color: var(--hx-tone-grey-ink); }
/* The tile name shrinks only when the tile is too narrow for it (120% text on a 360 px phone or the Fold6 cover screen,
   5 Oct 2026): the room beside the icon divided by the length of "Bookmarks" (about 5.6 letters-widths), the longest name.
   Wider tiles keep body size. */
#app-menu .menu-tile { container-type: inline-size; }
#app-menu .menu-name {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: min(var(--hx-text-body), calc((100cqi - var(--hx-badge-size) * 1.25 - var(--hx-space-2)) / 5.6));
  font-weight: var(--hx-weight-strong);
  line-height: var(--hx-leading-head);   /* notification rhythm (5 Oct 2026): title 1.3, the line under it follows with no gap */
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app-menu .menu-name small {
  display: block;
  margin-top: 0;
  line-height: var(--hx-leading-body);
  overflow: hidden;
  color: var(--hx-muted);
  font-size: var(--hx-text-meta);
  font-weight: var(--hx-weight-action);
  text-overflow: ellipsis;
}
#app-menu .menu-go {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--hx-badge-size);
  height: var(--hx-badge-size);
  margin-left: auto;
  border-radius: var(--hx-radius-badge);
  background: var(--hx-page);
  color: var(--hx-ink);
}
#app-menu .menu-go svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }
#app-menu [aria-disabled="true"] { cursor: default; }

/* ---------- SOS: full width, top -------------------------------------- */
#app-menu .menu-sos-slot:empty { display: none; }
#app-menu .menu-sos-slot > .menu-sos {
  display: flex;
  align-items: center;
  gap: var(--hx-space-3);
  width: 100%;
  min-height: calc(var(--hx-target-action) + var(--hx-space-3));
  padding: var(--hx-space-3);   /* 12 px all round, as the tiles */
  border: 1px solid var(--hx-sos-bg);
  border-radius: var(--hx-radius-card);
  background: var(--hx-sos-bg);
  color: var(--hx-on-dark);
}
#app-menu .menu-sos .menu-icon,
#app-menu .menu-sos .menu-go { background: var(--hx-on-dark-fill); color: var(--hx-on-dark); }
#app-menu .menu-sos .menu-name { white-space: normal; }
#app-menu .menu-sos .menu-name small { color: var(--hx-on-dark); }

/* ---------- Me: one row ------------------------------------------------ */
#app-menu .menu-me-slot:empty { display: none; }
#app-menu .menu-me-slot > .menu-me {
  display: flex;
  align-items: center;
  gap: var(--hx-space-3);
  width: 100%;
  min-height: calc(var(--hx-target-action) + var(--hx-space-3));
  padding: var(--hx-space-3);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-ink);
}
#app-menu .menu-me .menu-icon { background: var(--hx-tone-green-bg); color: var(--hx-ink); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); }

/* ---------- Tiles: two even columns; icon on the left, centred on the name and its live line (notification layout,
   user 5 Oct 2026: "110 of 210 done" under "Campaigns") ------- */
#app-menu .menu-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--hx-space-2);
}
#app-menu .menu-items > .menu-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 0 var(--hx-space-2);
  min-height: calc(var(--hx-target-action) * 1.6);
  padding: var(--hx-space-3);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-ink);
}
#app-menu .menu-items > .menu-tile:active { background: var(--hx-page); }
#app-menu .menu-items > .menu-tile > .menu-icon { grid-column: 1; grid-row: 1 / -1; }
#app-menu .menu-items > .menu-tile > .menu-name { grid-column: 2; grid-row: 1; }
#app-menu .menu-line {
  grid-column: 2;
  grid-row: 2;
  line-height: var(--hx-leading-body);
  overflow: hidden;
  color: var(--hx-muted);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-action);
  overflow-wrap: anywhere;   /* wraps on narrow tiles instead of "…" */
}
#app-menu .menu-line b { color: var(--hx-ink); font-weight: var(--hx-weight-strong); }
/* Not built yet (Radio): the whole tile is grey. */
#app-menu .menu-items > .menu-soon {
  border-color: transparent;
  background: var(--hx-track);
  color: var(--hx-muted);
}
#app-menu .menu-soon .menu-icon { background: var(--hx-hairline); color: var(--hx-muted); }
#app-menu .menu-items > .menu-soon:active { background: var(--hx-track); }

/* ---------- Edit order: tap a tile, then where it goes (tiles only) --- */
#app-menu.menu-rearranging .menu-items > button {
  border-style: dashed;
  border-color: var(--hx-action-border);
}
#app-menu.menu-rearranging :is(.menu-sos-slot, .menu-me-slot) { opacity: .45; pointer-events: none; }
/* The icon shows the tile's place number while editing. */
#app-menu.menu-rearranging .menu-tile .menu-icon { background: var(--hx-track); color: var(--hx-ink); }
#app-menu.menu-rearranging .menu-tile .menu-icon svg { display: none; }
#app-menu.menu-rearranging .menu-tile .menu-icon::after { content: attr(data-pos); font-size: var(--hx-text-label); font-weight: var(--hx-weight-strong); }
#app-menu.menu-rearranging .menu-items > .menu-picked {
  border: var(--hx-action-border-width) solid var(--hx-info);
  background: var(--hx-info-tint);
}
#app-menu.menu-rearranging .menu-picked .menu-icon { background: var(--hx-info-solid); color: var(--hx-on-dark); }

/* ---------- Bottom: Edit order + Close app, even ---------------------- */
#app-menu .menu-foot { display: flex; gap: var(--hx-space-2); }
#app-menu .menu-foot > .menu-exit-slot { display: contents; }
#app-menu .menu-foot button {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hx-space-2);
  min-width: 0;
  max-width: none;
  min-height: var(--hx-target-action);
  padding: 0 var(--hx-space-3);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-ink);
  font-size: var(--hx-text-body);
  font-weight: var(--hx-weight-action);
  text-align: center;
}
/* "Close app" also matches old close-icon rules ([aria-label^="Close"], 44px). */
#app-menu .menu-foot > .menu-exit-slot > .menu-exit { width: auto; height: auto; color: var(--hx-muted); }
#app-menu .menu-foot .menu-exit .menu-icon { width: auto; height: auto; background: none; color: inherit; }
#app-menu .menu-foot > .rearrange-menu[aria-pressed="true"] {
  border-color: transparent;
  background: var(--hx-primary-bg);
  color: var(--hx-primary-ink);
}

#app-menu :is(.menu-version, .website-version, .menu-credit) {
  margin: 0;
  padding: 0 var(--hx-space-1);
  color: var(--hx-muted);
  font-size: var(--hx-text-meta);
  font-weight: var(--hx-weight-action);
  text-align: center;
}
#app-menu .menu-version:empty { display: none; }

/* Focus ring: keyboard only, dark (tokens), never the old blue. */
#app-menu :focus { outline: none; }
#app-menu :focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 2px; }
#app-menu .menu-sos-slot > .menu-sos:focus-visible { outline-color: var(--hx-ink); }

/* =====================================================================
   Menu, Apple Maps style (owner, 6 Oct 2026; mockup docs/ui-proposals/apple-maps-pages/, page 4):
   your account first (big avatar, name, role), then SOS, then every item as one grouped list — icon · name · live value · ›.
   The order stays yours (Edit order still works on the rows).
   ===================================================================== */
#app-menu > .menu-heading { order: -3; }
#app-menu > .menu-me-slot { order: -2; }
#app-menu > .menu-sos-slot { order: -1; }
#app-menu .menu-me-slot > .menu-me { min-height: 0; padding: var(--hx-space-1) 0 var(--hx-space-2); border: 0; background: none; }
#app-menu .menu-me .menu-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--hx-primary-bg); color: var(--hx-primary-ink); font-size: var(--hx-text-title); }
#app-menu .menu-me .menu-me-name { font-size: var(--hx-text-title); font-weight: var(--hx-weight-strong); }
#app-menu .menu-items { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0; overflow: hidden; border-radius: var(--hx-radius-card); background: var(--hx-card); }
#app-menu .menu-items > .menu-tile { display: flex; align-items: center; gap: var(--hx-space-3); min-height: var(--hx-target-action); padding: var(--hx-space-1) var(--hx-space-3); border: 0; border-radius: 0; background: none; text-align: left; }
#app-menu .menu-items > .menu-tile + .menu-tile { box-shadow: inset calc(32px + 2 * var(--hx-space-3)) 1px 0 -1px var(--hx-card), inset 0 1px 0 var(--hx-hairline); }
#app-menu .menu-items > .menu-tile:active { background: var(--hx-track); }
#app-menu .menu-items > .menu-tile > .menu-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; }
#app-menu .menu-items > .menu-tile > .menu-name { flex: 1; min-width: 0; font-size: var(--hx-text-body); }
#app-menu .menu-items > .menu-tile > .menu-line { flex: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; text-align: right; }
#app-menu .menu-items > .menu-tile::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--hx-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
#app-menu .menu-items > .menu-soon::after { content: none; }
#app-menu .menu-items > .menu-soon { background: none; opacity: .6; }
#app-menu::before { order: -4; }
#app-menu > .menu-heading > button { border: 0; border-radius: 50%; background: var(--hx-card); }