/* The phone header's More menu (increment S; more-menu.js).
 *
 * Below 1100px the header's row of links (Fleet · Ledger · Settings) comes
 * off the page and the More button stands at the row's end, as Android's own
 * overflow menu does. It opens a short list under itself: Fleet board, Month
 * ledger, Settings. At 1100px and wider none of this shows — the desk keeps
 * its row of links exactly as it was.
 *
 * Tokens only (light and dark are one definition). Nothing here grows a
 * transform, a filter or an overflow on .shell or a view (views.css rule 2):
 * the list is absolutely placed in the header's tools row, and its ground is
 * `position: fixed`, which that rule is what keeps true to the screen.
 */

/* -------------------------------------------------------------- the button */

/* The tray button's own shape (tray.css .tray-btn), so the row reads as one
 * set of controls: a quiet pill, 44 px tall, at the row's type step
 * (tray.css takes --text-md itself since the wave-M integration). */
.more-btn {
  font-size: var(--text-md);
}

.more-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  /* Its own pressed and open looks (below) say it was tapped; Android's grey
   * flash over the pill's square box would say it twice, and badly. */
  -webkit-tap-highlight-color: transparent;
}

.more-btn:active {
  background: var(--surface-sunken);
}

.more-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.more-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Open, it wears the chosen wash inside the structural green's edge: the
 * button and its list read as one thing. The word is --ink, not the green:
 * --accent on the dark wash is 3.96:1, short of what words owe; --ink on it
 * is 15.5:1 light and 11.4:1 dark. */
.more-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--tint-chosen);
  color: var(--ink);
}

/* ---------------------------------------------------------------- the list */

/* The row is the list's anchor. No z-index here, so it is no stacking
 * context: the list's own z-index is weighed against the dock and the tabs. */
.shell__tools {
  position: relative;
}

/* Under the button, at the row's right edge. Above the dock (2), the tabs
 * (1), the update notice (9) and the toast (10); under every sheet (20). */
.more-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 15;
  min-width: 13rem;
  max-width: calc(100vw - 2 * var(--space-4));
}

/* The ground round the list: the whole screen, so a tap beside the list
 * lands on the list's own box — more-menu.js closes it, and the tap reaches
 * nothing under it (a card's link, a tab), as Android's menus behave.
 * Fixed to the screen, which holds because no ancestor has a transform. */
.more-menu::before {
  content: "";
  position: fixed;
  inset: 0;
}

/* `position: relative` puts the card over its own ground. */
.more-menu__list {
  position: relative;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

/* Each link is the whole row: 48 px tall (Android's own measure — it costs
 * nothing here) and as wide as the list. */
.more-menu__link {
  display: flex;
  align-items: center;
  min-height: var(--touch-lg);
  padding: 0 var(--space-4);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.more-menu__link:hover,
.more-menu__link:active {
  background: var(--surface-sunken);
}

.more-menu__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* The page that is open: heavier, on the chosen wash, with a green bar at
 * its start — three cues, none of them colour alone (WCAG 1.4.1). The words
 * stay --ink for the reason the open button's do. */
.more-menu__link[aria-current="page"] {
  background: var(--tint-chosen);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 700;
}

/* ------------------------------------------------ which of the two is shown
 *
 * LAST in this file, so it outranks the button's own `display` above.
 * `display: none`, not a visual trick: a link merely pushed off-screen is
 * still in the tab order and still read out (views.css says the same of the
 * Fleet link). The numbers are --bp-desktop, which a media query cannot read. */
@media (max-width: 1099.98px) {
  .shell__nav {
    display: none;
  }
}

@media (min-width: 1100px) {
  .more-btn,
  .more-menu {
    display: none;
  }
}