/* SPDX-License-Identifier: GPL-3.0-or-later */
/* The one menu style (menu.mjs): one type scale, row height, spacing and focus ring for every
   screen. #pause is the overlay host of train.html and index.html; #controllers is login.html's and index.html's
   standalone host of the controllers screens. */
.menu:not(body) { /* body.menu is the shell's settings flag */
  --menu-row-h: 2.2em; --menu-gap: 2px; --menu-accent: #5ab4ff; --menu-fg: #f2f2ec; --menu-dim: #a4abb6;
  --menu-bg: #15171d; --menu-bg-focus: #1d2027;
  color: var(--menu-fg); font: 15px/20px system-ui, sans-serif;
}
.menu-title { margin: 0 0 8px; font: 700 clamp(28px, 5vw, 48px)/1 "Arial Narrow", system-ui, sans-serif; letter-spacing: .12em; }
.menu-rows { list-style: none; margin: 0; padding: 0; }
.menu-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  height: var(--menu-row-h); box-sizing: border-box; padding: 0 14px; margin-bottom: var(--menu-gap);
  background: var(--menu-bg); border-left: 3px solid transparent; cursor: pointer; }
.menu-rows li b { font-weight: 700; letter-spacing: .08em; }
.menu-rows li span { color: var(--menu-dim); }
.menu-rows li.focus { outline: 2px solid var(--menu-accent); outline-offset: -2px;
  background: color-mix(in srgb, var(--menu-accent) 14%, var(--menu-bg-focus)); border-left-color: var(--menu-accent); }
.menu-rows li.focus b { color: var(--menu-accent); }
.menu-rows li.disabled { opacity: .45; cursor: default; }
/* controllers.mjs: a row that lost its input to a later bind, and the row waiting for one */
.menu-rows li.amber { border-left-color: #ffb648; }
.menu-rows li.amber span, .menu-rows li.binding span { color: #ffb648; }
.menu-rows li[data-kind="info"] { color: var(--menu-dim); font-style: italic; cursor: default; }
.menu-note { margin: 16px 0 0; font-size: 13px; line-height: 16px; color: var(--menu-dim); }
.menu-note:empty { display: none; }
/* The overlay (train.html, index.html #pause): the dim sheet over the picture and the HUD, under the crash panel.
   It scrolls inside itself on a short phone, never the page. */
#pause, #controllers { position: fixed; inset: 0; z-index: 5; box-sizing: border-box; overflow-y: auto; padding: 16px;
  display: grid; align-content: safe center; justify-content: center; background: rgba(0,0,0,.62); }
#pause[hidden], #controllers[hidden] { display: none; }
#pause > *, #controllers > * { width: min(560px, calc(100vw - 32px)); }