/* =====================================================================================================================
   Main menu window (js/ui/pages/menu.js). Needs css/ui-tokens.css + css/ui-kit.css. Scoped to .gwin[data-win="menu"].
   Landscape: pilot card (left) + tile grid (right, first row = four big tiles). Portrait: compact pilot strip on top,
   3-column tiles below. The tile grid stretches with the window height up to a cap, then scrolls inside .gscroll.
   ===================================================================================================================== */

[data-win="menu"] .mm {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(calc(240 * var(--u)), calc(340 * var(--u))) minmax(0, 1fr);
  gap: calc(16 * var(--u));
}

/* ------------------------------------------------------------------------------------------------- pilot card */
[data-win="menu"] .mm-pilot {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  min-height: 0;
  padding: calc(14 * var(--u));
  --fill: linear-gradient(180deg, var(--text-a04), transparent 40%), var(--panel2-a90);
}
[data-win="menu"] .mm-ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  flex: none;
}
[data-win="menu"] .mm-lv b {
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--text);
}
/* hangar camera feed: the class preview render, faded into the card, with scanlines and corner brackets */
[data-win="menu"] .mm-feed {
  position: relative;
  flex: 1 1 0;
  min-height: calc(90 * var(--u));
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 58%, rgba(57, 198, 217, 0.16), transparent 70%),
    linear-gradient(180deg, #10181a, #0b1112);
  -webkit-clip-path: polygon(var(--cut-md) 0, 100% 0, 100% calc(100% - var(--cut-md)), calc(100% - var(--cut-md)) 100%, 0 100%, 0 var(--cut-md));
  clip-path: polygon(var(--cut-md) 0, 100% 0, 100% calc(100% - var(--cut-md)), calc(100% - var(--cut-md)) 100%, 0 100%, 0 var(--cut-md));
}
[data-win="menu"] .mm-feed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(0.8) contrast(1.12) brightness(0.86);
  -webkit-mask-image: radial-gradient(62% 58% at 50% 46%, #000 52%, transparent 100%);
  mask-image: radial-gradient(62% 58% at 50% 46%, #000 52%, transparent 100%);
  pointer-events: none;
}
[data-win="menu"] .mm-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(11, 15, 16, 0.75)),
    repeating-linear-gradient(0deg, rgba(5, 8, 9, 0.22) 0 1px, transparent 1px 3px),
    var(--grid-faint);
}
[data-win="menu"] .mm-brk {
  position: absolute;
  inset: calc(8 * var(--u));
  pointer-events: none;
  --l: calc(16 * var(--u));
  --c: var(--info-dim);
  background:
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l) no-repeat;
}
[data-win="menu"] .mm-cam {
  position: absolute;
  left: calc(12 * var(--u));
  bottom: calc(8 * var(--u));
  color: var(--info);
  opacity: 0.85;
}
[data-win="menu"] .mm-id {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
  flex: none;
}
[data-win="menu"] .mm-name {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-win="menu"] .mm-name.th {
  letter-spacing: 0;
}
[data-win="menu"] .mm-cls {
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 1.35;
}
[data-win="menu"] .mm-bars {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  flex: none;
}
[data-win="menu"] .mm-barrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.3;
}
[data-win="menu"] .mm-barrow + .gbar {
  margin-bottom: calc(4 * var(--u));
}
[data-win="menu"] .mm-bl {
  font-family: var(--f-head);
  font-weight: 600;
}
[data-win="menu"] .mm-bv {
  color: var(--text);
  font-size: var(--fs-sm);
}
[data-win="menu"] .mm-loc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  flex: none;
  padding-top: calc(10 * var(--u));
  border-top: 1px solid var(--line);
}
[data-win="menu"] .mm-where {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
}
[data-win="menu"] .mm-where > .gglyph {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  color: var(--info);
}
[data-win="menu"] .mm-where > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
[data-win="menu"] .mm-where small {
  font-size: var(--fs-label);
  color: var(--dim);
}
[data-win="menu"] .mm-where b {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-win="menu"] .mm-quest b.th {
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  color: var(--good);
}

/* ------------------------------------------------------------------------------------------------------ tiles */
[data-win="menu"] .mm-tilescroll {
  height: 100%;
  margin: calc(-4 * var(--u)) calc(-6 * var(--u)) calc(-4 * var(--u)) 0;
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) 0; /* room for the corner badges */
}
[data-win="menu"] .mm-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(calc(150 * var(--u)), 1.4fr) repeat(2, minmax(calc(112 * var(--u)), 1fr));
  gap: calc(12 * var(--u));
  height: 100%;
  min-height: min-content;
}
[data-win="menu"] .mm-tile {
  min-height: 0;
  height: 100%;
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  justify-content: space-between;
  gap: calc(6 * var(--u));
}
[data-win="menu"] .mm-tile.is-main {
  --bd: var(--line-strong);
  --fill:
    radial-gradient(90% 70% at 0% 100%, var(--accent-a08), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, var(--text-a08), transparent 60%),
    var(--panel2-a90);
  padding: calc(18 * var(--u));
}
[data-win="menu"] .mm-wm {
  position: absolute;
  right: 5%;
  top: 50%;
  height: 72%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--text);
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}
[data-win="menu"] .mm-wm .gglyph {
  width: 100%;
  height: 100%;
}
[data-win="menu"] .mm-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  min-width: 0;
}
[data-win="menu"] .mm-tile .gt-glyph {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}
[data-win="menu"] .mm-tile.is-main .gt-glyph {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
}
[data-win="menu"] .mm-eye {
  margin-top: calc(2 * var(--u));
  white-space: nowrap;
}
[data-win="menu"] .mm-tag {
  flex: none;
}
[data-win="menu"] .mm-bot {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
  padding-right: calc(22 * var(--u)); /* the key hint */
}
[data-win="menu"] .mm-tile .gt-label {
  font-size: var(--fs-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-win="menu"] .mm-tile.is-main .gt-label {
  font-size: var(--fs-xl);
}
[data-win="menu"] .mm-st {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.3;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-win="menu"] .mm-st.k-good {
  color: var(--good);
}
[data-win="menu"] .mm-st.k-warn,
[data-win="menu"] .mm-st.k-accent {
  color: var(--accent);
}
[data-win="menu"] .mm-st.k-danger {
  color: var(--bad);
}
[data-win="menu"] .mm-kbd {
  position: absolute;
  right: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
}
[data-win="menu"] .mm-badge {
  top: calc(-6 * var(--u));
  right: calc(-6 * var(--u));
  min-width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  line-height: calc(22 * var(--u));
  font-size: var(--fs-sm);
  font-weight: 700;
}
[data-win="menu"] .mm-tile.locked .mm-st {
  color: var(--accent);
}
[data-win="menu"] .mm-tile.preview .gt-label {
  color: var(--dim);
}

/* --- compact tier (1366x768, tablets) --- */
html[data-tier="compact"] [data-win="menu"] .mm {
  grid-template-columns: minmax(calc(230 * var(--u)), calc(290 * var(--u))) minmax(0, 1fr);
  gap: calc(12 * var(--u));
}
html[data-tier="compact"] [data-win="menu"] .mm-tiles {
  grid-template-rows: minmax(calc(128 * var(--u)), 1.3fr) repeat(2, minmax(calc(100 * var(--u)), 1fr));
  gap: calc(10 * var(--u));
}
html[data-tier="compact"] [data-win="menu"] .mm-tile.is-main .gt-glyph {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
}

/* --- phone tier (844x390): everything visible without scrolling --- */
html[data-tier="phone"] [data-win="menu"] .mm {
  grid-template-columns: minmax(calc(200 * var(--u)), calc(236 * var(--u))) minmax(0, 1fr);
  gap: calc(10 * var(--u));
}
html[data-tier="phone"] [data-win="menu"] .mm-pilot {
  padding: calc(10 * var(--u));
  gap: calc(6 * var(--u));
}
html[data-tier="phone"] [data-win="menu"] .mm-feed {
  min-height: calc(56 * var(--u));
}
html[data-tier="phone"] [data-win="menu"] .mm-cam,
html[data-tier="phone"] [data-win="menu"] .mm-loc small {
  display: none;
}
html[data-tier="phone"] [data-win="menu"] .mm-name {
  font-size: var(--fs-xl);
}
html[data-tier="phone"] [data-win="menu"] .mm-loc {
  padding-top: calc(6 * var(--u));
  gap: calc(6 * var(--u));
}
html[data-tier="phone"] [data-win="menu"] .mm-tiles {
  grid-template-rows: minmax(calc(96 * var(--u)), 1.2fr) repeat(2, minmax(calc(84 * var(--u)), 1fr));
  gap: calc(8 * var(--u));
}
html[data-tier="phone"] [data-win="menu"] .mm-tile,
html[data-tier="phone"] [data-win="menu"] .mm-tile.is-main {
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u));
}
html[data-tier="phone"] [data-win="menu"] .mm-eye {
  display: none;
}
html[data-tier="phone"] [data-win="menu"] .mm-tile .gt-glyph {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}
html[data-tier="phone"] [data-win="menu"] .mm-tile.is-main .gt-glyph {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
}
html[data-tier="phone"] [data-win="menu"] .mm-tile .gt-label,
html[data-tier="phone"] [data-win="menu"] .mm-tile.is-main .gt-label {
  font-size: var(--fs-body);
}
html[data-tier="phone"] [data-win="menu"] .mm-bot {
  padding-right: 0;
}
html[data-tier="phone"] [data-win="menu"] .mm-tag {
  height: calc(18 * var(--u));
  padding: 0 calc(5 * var(--u));
}

/* --- portrait (390x844): pilot strip on top, three tile columns --- */
html[data-orient="portrait"] [data-win="menu"] .mm {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(10 * var(--u));
}
html[data-orient="portrait"] [data-win="menu"] .mm-pilot {
  display: grid;
  grid-template-columns: calc(104 * var(--u)) minmax(0, 1fr);
  grid-template-areas: "feed ph" "feed id" "feed bars" "loc loc";
  column-gap: calc(12 * var(--u));
  row-gap: calc(4 * var(--u));
  padding: calc(10 * var(--u));
}
html[data-orient="portrait"] [data-win="menu"] .mm-ph {
  grid-area: ph;
}
html[data-orient="portrait"] [data-win="menu"] .mm-feed {
  grid-area: feed;
  min-height: calc(120 * var(--u));
}
html[data-orient="portrait"] [data-win="menu"] .mm-cam {
  display: none;
}
html[data-orient="portrait"] [data-win="menu"] .mm-id {
  grid-area: id;
}
html[data-orient="portrait"] [data-win="menu"] .mm-name {
  font-size: var(--fs-xl);
}
html[data-orient="portrait"] [data-win="menu"] .mm-bars {
  grid-area: bars;
}
html[data-orient="portrait"] [data-win="menu"] .mm-loc {
  grid-area: loc;
  margin-top: calc(4 * var(--u));
  padding-top: calc(8 * var(--u));
}
html[data-orient="portrait"] [data-win="menu"] .mm-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(calc(96 * var(--u)), auto);
  height: auto;
  gap: calc(8 * var(--u));
}
html[data-orient="portrait"] [data-win="menu"] .mm-tile,
html[data-orient="portrait"] [data-win="menu"] .mm-tile.is-main {
  padding: calc(10 * var(--u));
}
html[data-orient="portrait"] [data-win="menu"] .mm-tile .gt-glyph,
html[data-orient="portrait"] [data-win="menu"] .mm-tile.is-main .gt-glyph {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
}
html[data-orient="portrait"] [data-win="menu"] .mm-tile .gt-label,
html[data-orient="portrait"] [data-win="menu"] .mm-tile.is-main .gt-label {
  font-size: var(--fs-body);
}
html[data-orient="portrait"] [data-win="menu"] .mm-eye,
html[data-orient="portrait"] [data-win="menu"] .mm-wm {
  display: none;
}
html[data-orient="portrait"] [data-win="menu"] .mm-bot {
  padding-right: 0;
}

/* every tile carries a faint watermark of its glyph; smaller and fainter on the second and third rows */
[data-win="menu"] .mm-tile:not(.is-main) .mm-wm {
  height: 58%;
  right: 6%;
  opacity: 0.045;
}
html[data-tier="phone"] [data-win="menu"] .mm-tile:not(.is-main) .mm-wm {
  display: none;
}

/* the tile grid's own width decides the column count (tablets, phone landscape at UI scale 1.3) */
[data-win="menu"] .mm-tbox {
  container: mmt / inline-size;
  height: 100%;
}
/* (not on the phone tier: phone landscape keeps four short columns so every tile shows without scrolling) */
@container mmt (max-width: 700px) {
  html:not([data-tier="phone"]):not([data-orient="portrait"]) [data-win="menu"] .mm-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(calc(92 * var(--u)), 1fr));
  }
  html:not([data-tier="phone"]):not([data-orient="portrait"]) [data-win="menu"] .mm-eye {
    display: none;
  }
  html:not([data-tier="phone"]):not([data-orient="portrait"]) [data-win="menu"] .mm-tile.is-main .gt-label {
    font-size: var(--fs-lg);
  }
  html:not([data-tier="phone"]):not([data-orient="portrait"]) [data-win="menu"] .mm-tile.is-main .gt-glyph {
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
  }
}
/* portrait: statuses may take two lines; the PREVIEW tag gives way (the status says it) */
html[data-orient="portrait"] [data-win="menu"] .mm-st {
  white-space: normal;
}
html[data-orient="portrait"] [data-win="menu"] .mm-tag {
  display: none;
}
html[data-orient="portrait"] [data-win="menu"] .mm-tbox {
  height: auto;
}

/* 2026-10-09 review: English tile names ('Pilot manual', 'Appearance') take two lines on narrow screens instead of an
   ellipsis */
html:is([data-tier="phone"], [data-orient="portrait"]):lang(en) [data-win="menu"] .mm-tile .gt-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  line-height: 1.15;
}