/* tw-metro-appnav.css - THE ONE RAIL, drawn one way (2026-10-05).
 *
 * studio-navigation, THE RULE: every page carries the same way to every
 * other family - one include (_shared/tw-app-nav.js), one list
 * (DESTINATIONS), one vocabulary. Until this sheet the list was one but the
 * drawing was three: Home and Admin wore the Atlas's rail (tw-atlas.css),
 * the Bonus Editor wore the editor shell's rail (tw-editor-shell.css, with a
 * "Go to" item and an expand chevron the others do not have), the Bank wore
 * a hand-typed top bar and the Slides Editor and the Book wore nothing.
 * Andrew walked the estate on 2026-10-05 and read it as three navigations.
 *
 * This sheet is the rail's ONE look, on Metro tokens only, for every frame
 * that mounts it:
 *
 *   .m-appnav-frame          a surface that mounts the rail through
 *                            tw-admin-cockpit-nav.js (Home, the Bank)
 *   .m-appnav-frame--menu    an editor that needs its full width (the Slides
 *                            Editor, the Book): the rail folds into a drawer
 *                            behind a labelled Menu button in the editor's
 *                            own bar. Same list, same order, same words.
 *   .tw-shell.has-appnav     a surface whose rail is drawn by the editor
 *                            shell (the Bonus Editor): the shell keeps its
 *                            layout modes; this sheet re-dresses the items so
 *                            they read as the same rail, and puts away the
 *                            two controls the other frames never had.
 *
 * Shape, by width, never by pointer (the Atlas's rule since 2026-09-16):
 *   >= 900px  a labelled rail down the left edge, 96px wide;
 *   <  900px  a 72px bottom bar, whole destination words; its own list
 *             scrolls sideways when those words need more room.
 * The 44px floor is on the item itself, never behind a query.
 *
 * The rail's two sizes are named once, as custom properties on the frame:
 * the frame pads by them, the rail is drawn to them.
 */
.m-appnav-frame, .tw-shell.has-appnav { --tw-appnav-w: 96px; --tw-appnav-h: 72px; --tw-appnav-drawer-w: 240px; }

/* ── The items, every frame ─────────────────────────────────────────────── */
.m-appnav-frame .twsh-appnav,
.tw-shell.has-appnav .twsh-appnav {
  background: var(--m-ground); border: 0 solid var(--m-edge);
}
.m-appnav-frame .twsh-appnav-list { display: flex; flex: 1; min-width: 0; margin: 0; padding: 0; }
.m-appnav-frame .twsh-appnav-item,
.tw-shell.has-appnav .twsh-appnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--m-s-1); min-height: var(--m-target); min-width: 0;
  padding: var(--m-s-2) var(--m-s-1);
  color: var(--m-ink-2); background: transparent; text-decoration: none; text-align: center;
  font: var(--m-micro); letter-spacing: var(--m-track); text-transform: uppercase;
  border-radius: 0;
}
.m-appnav-frame .twsh-appnav-item:hover,
.tw-shell.has-appnav .twsh-appnav-item:hover { background: var(--m-tile-open); color: var(--m-ink); }
.m-appnav-frame .twsh-appnav-item:focus-visible,
.tw-shell.has-appnav .twsh-appnav-item:focus-visible { outline: 2px solid var(--m-focus); outline-offset: -2px; }
/* Where you are is the key fill - the one mark that never moves. */
.m-appnav-frame .twsh-appnav-item[aria-current="page"],
.tw-shell.has-appnav .twsh-appnav-item[aria-current="page"],
.tw-shell.has-appnav .twsh-appnav-item.is-current { background: var(--m-key); color: var(--m-key-ink); box-shadow: none; font: var(--m-micro); }
.m-appnav-frame .twsh-appnav-ico,
.tw-shell.has-appnav .twsh-appnav-ico { display: inline-flex; flex: none; width: 22px; height: 22px; }
.m-appnav-frame .twsh-appnav-ico svg,
.tw-shell.has-appnav .twsh-appnav-ico svg { width: 100%; height: 100%; }
.m-appnav-frame .twsh-appnav-label,
.tw-shell.has-appnav .twsh-appnav-label { font: inherit; letter-spacing: inherit; overflow-wrap: anywhere; }
.m-appnav-frame .twsh-appnav-badge:empty,
.m-appnav-frame .twsh-appnav-short,
.m-appnav-frame .twsh-appnav-scrim,
.tw-shell.has-appnav .twsh-appnav-badge:empty { display: none; }

/* The shell's rail: same width as the others, and the two controls the
   other frames never carried (the "Go to" palette item - still on Ctrl/Cmd K
   - and the collapse chevron) are put away, so the list is the six words. */
.tw-shell.has-appnav.appnav-rail { --twsh-appnav-w: 96px; }
.tw-shell.has-appnav.appnav-rail:not(.appnav-labels) { --twsh-appnav-w: 96px; }
.tw-shell.has-appnav.appnav-rail .twsh-appnav { padding: var(--m-s-2) 0; gap: 0; }
.tw-shell.has-appnav.appnav-rail .twsh-appnav-list { gap: var(--m-s-1); }
.tw-shell.has-appnav.appnav-rail .twsh-appnav-label,
.tw-shell.has-appnav.appnav-rail:not(.appnav-labels) .twsh-appnav-label { display: inline; }
.tw-shell.has-appnav .twsh-appnav-goto,
.tw-shell.has-appnav .twsh-appnav-expand { display: none; }

/* ── Desk: the rail down the left edge ──────────────────────────────────── */
.m-appnav-frame { padding-left: var(--tw-appnav-w); }
.m-appnav-frame .twsh-appnav {
  position: fixed; z-index: 60; display: flex;
  top: 0; bottom: 0; left: 0; width: var(--tw-appnav-w);
  flex-direction: column; border-right-width: 1px; padding: var(--m-s-2) 0;
}
.m-appnav-frame .twsh-appnav-list { flex-direction: column; flex: 0 0 auto; gap: var(--m-s-1); }
.m-appnav-frame:not(.m-appnav-frame--menu) .twsh-appnav-item,
.tw-shell.has-appnav.appnav-rail .twsh-appnav-item { min-height: 64px; }

/* ── Phone and narrow tablet: the bottom bar ────────────────────────────── */
@media (max-width: 899px) {
  .m-appnav-frame { padding-left: 0; padding-bottom: var(--tw-appnav-h); }
  .m-appnav-frame .twsh-appnav {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--tw-appnav-h);
    flex-direction: row; border-right-width: 0; border-top-width: 1px; padding: 0;
  }
  .m-appnav-frame:not(.m-appnav-frame--menu) .twsh-appnav-list { flex-direction: row; flex: 1 1 auto; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; gap: 0; }
  .m-appnav-frame:not(.m-appnav-frame--menu) .twsh-appnav-item { flex: 1 0 auto; min-width: var(--m-target); padding: var(--m-s-1) var(--m-s-2); }
  .tw-shell.has-appnav.appnav-bottom { padding-bottom: var(--tw-appnav-h); }
  .tw-shell.has-appnav.appnav-bottom .twsh-appnav { height: var(--tw-appnav-h); padding: 0; }
  .tw-shell.has-appnav.appnav-bottom .twsh-appnav-list { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; gap: 0; }
  .tw-shell.has-appnav.appnav-bottom .twsh-appnav-item {
    flex: 1 0 auto; min-width: var(--m-target); padding: var(--m-s-1) var(--m-s-2);
  }
  .m-appnav-frame:not(.m-appnav-frame--menu) .twsh-appnav-label,
  .tw-shell.has-appnav.appnav-bottom .twsh-appnav-label { white-space: nowrap; overflow-wrap: normal; }
  .m-appnav-frame:not(.m-appnav-frame--menu) .twsh-appnav-label.has-short,
  .tw-shell.has-appnav.appnav-bottom .twsh-appnav-label.has-short { display: none; }
  .m-appnav-frame:not(.m-appnav-frame--menu) .twsh-appnav-short,
  .tw-shell.has-appnav.appnav-bottom .twsh-appnav-short { display: inline; font: inherit; letter-spacing: inherit; white-space: nowrap; overflow-wrap: normal; }
}

/* ── An editor: the rail behind a Menu button ───────────────────────────────
   The Slides Editor and the Book need their whole width for the work, so
   the rail is a drawer: closed it costs nothing, open it is the same six
   words in the same order, over a scrim, from the left edge. The button
   lives in the editor's own bar (the adapter's `menuHost`), is 44px on both
   axes, and says what it is. */
.m-appnav-frame.m-appnav-frame--menu { padding-left: 0; padding-bottom: 0; }
.m-appnav-frame.m-appnav-frame--menu .twsh-appnav {
  top: 0; bottom: 0; left: 0; right: auto; width: var(--tw-appnav-drawer-w); height: auto;
  flex-direction: column; border-right-width: 1px; border-top-width: 0;
  padding: var(--m-s-2) 0; z-index: var(--tw-appnav-layer, 120);
  transform: translateX(-100%); visibility: hidden;
  transition: transform var(--m-dur-move) var(--m-ease-enter);
}
.m-appnav-frame.m-appnav-frame--menu.appnav-open .twsh-appnav {
  transform: translateX(0); visibility: visible;
}
.m-appnav-frame.m-appnav-frame--menu .twsh-appnav-list { flex-direction: column; flex: 0 0 auto; gap: var(--m-s-1); }
.m-appnav-frame.m-appnav-frame--menu .twsh-appnav-item {
  flex-direction: row; justify-content: flex-start; gap: var(--m-s-3);
  padding: var(--m-s-2) var(--m-s-4); text-align: left;
}
.m-appnav-frame.m-appnav-frame--menu .twsh-appnav-scrim {
  display: none; position: fixed; inset: 0; z-index: var(--tw-appnav-scrim-layer, 110); background: var(--m-ink); opacity: .35;
}
.m-appnav-frame.m-appnav-frame--menu.appnav-open .twsh-appnav-scrim { display: block; }
.m-appnav-frame .twsh-appnav-menu-btn {
  display: inline-flex; align-items: center; gap: var(--m-s-1);
  min-width: var(--m-target); min-height: var(--m-target); padding: 0 var(--m-s-2);
  border: 0; background: transparent; color: var(--m-ink);
  font: var(--m-micro); letter-spacing: var(--m-track); text-transform: uppercase;
  cursor: pointer; flex: 0 0 auto;
}
.m-appnav-frame .twsh-appnav-menu-btn:hover { background: var(--m-tile-open); }
.m-appnav-frame .twsh-appnav-menu-btn:focus-visible { outline: 2px solid var(--m-focus); outline-offset: -2px; }
.m-appnav-frame .twsh-appnav-menu-btn[aria-expanded="true"] { background: var(--m-key); color: var(--m-key-ink); }
.m-appnav-frame .twsh-appnav-menu-btn .twsh-appnav-ico { display: inline-flex; width: 22px; height: 22px; }
.m-appnav-frame .twsh-appnav-menu-btn .twsh-appnav-ico svg { width: 100%; height: 100%; }

/* The full ecosystem map is drawer-only; the resting rail stays compact. */
.m-appnav-frame .twsh-appnav-more { display: none; min-width: 0; margin-top: var(--m-s-3); border-top: 1px solid var(--m-edge); }
.m-appnav-frame.appnav-open .twsh-appnav-more { display: block; }
.m-appnav-frame .twsh-appnav-more-title { display: flex; align-items: center; min-height: var(--m-target); padding: var(--m-s-2) var(--m-s-4); color: var(--m-ink-2); font: var(--m-micro); letter-spacing: var(--m-track); text-transform: uppercase; cursor: pointer; }
.m-appnav-frame .twsh-appnav-more-title:focus-visible { outline: 2px solid var(--m-focus); outline-offset: -2px; }
.m-appnav-frame.appnav-map-open .twsh-appnav { position: fixed; inset: 0 auto 0 0; width: min(var(--tw-appnav-drawer-w), 100vw); height: auto; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; z-index: var(--tw-appnav-layer, 120); transform: none; visibility: visible; }
.m-appnav-frame.appnav-map-open .twsh-appnav-list { flex: 0 0 auto; flex-direction: column; width: 100%; overflow: visible; }
.m-appnav-frame.appnav-map-open .twsh-appnav-item { flex: 0 0 auto; min-height: var(--m-target); flex-direction: row; justify-content: flex-start; gap: var(--m-s-3); padding: var(--m-s-2) var(--m-s-4); text-align: left; white-space: normal; }
.m-appnav-frame.appnav-map-open .twsh-appnav-label.has-short { display: inline; white-space: normal; }
.m-appnav-frame.appnav-map-open .twsh-appnav-short { display: none; }
.m-appnav-frame.appnav-map-open .twsh-appnav-scrim { display: block; position: fixed; inset: 0; z-index: var(--tw-appnav-scrim-layer, 110); background: var(--m-ink); opacity: .35; }

/* A rail-only surface has no header menu slot. Keep its Menu outside the
   scrolling phone list, always visible at the trailing edge. */
.m-appnav-frame:not(.m-appnav-frame--menu) .twsh-appnav > .twsh-appnav-menu-btn { flex: 0 0 auto; justify-content: center; }
@media (max-width: 899px) {
  .m-appnav-frame:not(.m-appnav-frame--menu):not(.appnav-map-open) .twsh-appnav-list { width: auto; }
  .m-appnav-frame:not(.m-appnav-frame--menu):not(.appnav-map-open) .twsh-appnav > .twsh-appnav-menu-btn { border-left: 1px solid var(--m-edge); }
}

/* Legacy editor-shell consumers use the same complete registry palette from
   their visible Menu in every layout, including the phone bottom rail. */
.tw-shell.has-appnav:not(.appnav-drawer) .twsh-appnav-menu-btn { display: inline-flex; }