/*
 * shell — the stylesheet for the one header every server-rendered page
 * renders (src/views/shell.js; ch. 16 §3.1). Served by src/assets.js as
 * shell.css and linked BEFORE the page's own stylesheet, so a page can size
 * the shell for itself (the dashboard keeps its taller header and its
 * responsive type steps in src/views/dashboard/styles.css) without
 * redefining what a header is.
 *
 * The rules are the Final Drive top bar's, moved verbatim under the shared
 * names: a sticky 56px bar, a 44px way back at its leading edge, the brand
 * beside it, the page's controls at the right. It depends on no page
 * variable — colours are literal, so the header reads the same on a page
 * that defines --line and one that defines --border.
 */
.mm-shell {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(15, 15, 15, 0.96);
  border-bottom: 1px solid #2a2a2a;
  backdrop-filter: saturate(140%) blur(8px);
  /* Standalone iOS: the sticky header sits under the notch without this.
     The 0px fallback keeps a normal browser tab unchanged. */
  padding-top: env(safe-area-inset-top, 0px);
}
.mm-shell-in {
  /* The 56px floor and 6px padding are read border-box on every page,
     whether or not the page resets box-sizing itself (Final Drive and
     Import do, Privacy and Join do not): one bar, one height. */
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  flex-wrap: wrap;
}
/* The way back: one glyph, one position, one label (F-07). 44px hit box,
   pulled left by its own inset so the glyph sits on the content edge. */
.mm-shell-back {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: -10px;
  color: #999;
  text-decoration: none;
  font-size: 20px;
}
.mm-shell-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mm-shell-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: inherit;
}
/* The mark is 1.61x as wide as it is tall (src/views/mark.js): sized by
   height so it tracks the brand's type, and flex: none so a narrow viewport
   squeezes the words rather than the logo. */
.mm-shell-mark {
  height: 1.9em;
  width: auto;
  flex: none;
  overflow: visible;
}
/* The right-hand slot: the page's controls, then the account control (E-10)
   at its right end. Always rendered, so it is always there. */
.mm-shell-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- The account control (ch. 16 E-10) ----------------------------------
   A round avatar at the right end of the slot on every page that has the
   shell, opening a menu of Alerts · Account · Sign out; a Sign in link for
   a visitor. A native <details>: the summary IS the avatar, the panel is
   the menu; shell-menu.js (F-28) adds the three closes the element lacks.
   Colours are literal like the rest of this file, so the control reads the
   same on a page that defines --line and one that defines --border. --- */
.mm-account {
  position: relative;
  flex: none;
}
/* The hit target is 44x44 at every width (the phone minimum); the disc the
   eye sees is the 38px glyph inside it. Block-level flex, not inline: an
   inline summary sits on the page's baseline and the line box under it adds
   the body's descender space to the <details> (6px on Privacy's 16px/1.65
   type), which was the bar reading 62px there against 57 everywhere else. */
.mm-avatar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.mm-avatar::-webkit-details-marker {
  display: none;
}
.mm-avatar-glyph {
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 5px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #999;
  fill: currentColor;
}
.mm-account:hover .mm-avatar-glyph,
.mm-account[open] .mm-avatar-glyph {
  color: #fff;
  border-color: #3a3a3a;
}
.mm-avatar:focus-visible .mm-avatar-glyph {
  outline: 2px solid #f0913f;
  outline-offset: 2px;
}
/* Under the avatar, right-aligned to it. The sticky header establishes the
   stacking context (z-index 30 here, 1000 on the dashboard), so one step
   above the bar's own content is enough on every page. */
.mm-account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1;
  min-width: 190px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.mm-account-menu form {
  margin: 0;
}
/* The identity line (ch. 16 "Next": one person, one account, visible) — a
   quiet first row, not a control: no hover, no button semantics, an email
   long enough to wrap rather than stretch the menu past `max-width` above. */
.mm-menu-who {
  padding: 6px 12px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #2a2a2a;
  color: #999;
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* 44px rows, one look whether the row is a link, a button or a submit. */
.mm-menu-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  background: none;
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mm-menu-item:hover,
.mm-menu-item:focus-visible {
  background: #262626;
  color: #fff;
}
.mm-menu-divider {
  height: 1px;
  margin: 5px 8px;
  background: #2a2a2a;
}
/* A visitor's way in, sized like the other 44px controls in the bar. */
.mm-signin {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.mm-signin:hover {
  border-color: #3a3a3a;
}

/* 320px — the one width where the bar's one row does not hold the brand
   and the slot (E-10, round 2). Measured there, signed out on Privacy:
   the back glyph's box and gap 44px, the brand 197px, the gap 10px and
   Sign in 81px want 332px of a 292px row, so `.mm-shell-in`'s wrap (the
   dashboard's dates band needs it) dropped the slot onto a second row —
   the form E-10 rejected. The same cutoff and the same step as the
   dashboard's (src/views/dashboard/styles.css): the type one size down and
   the mark with it, the brand pulled up to the glyph, Sign in trimmed.
   Every current phone (360 and up) keeps the full size; only 320 pays. */
@media (max-width: 340px) {
  .mm-shell-in {
    gap: 8px;
  }
  .mm-shell-back {
    margin-right: -8px;
  }
  .mm-shell-brand {
    gap: 6px;
    font-size: 15px;
  }
  .mm-shell-mark {
    height: 1.6em;
  }
  .mm-signin {
    padding: 0 8px;
    font-size: 13px;
  }
}

@media (min-width: 768px) {
  .mm-shell-in {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- The screens row (ch. 16 E-NEW-icon-row-1) --------------------------
   One row directly under the header on every product screen a member
   reaches: four seats, each an icon with its word, the page you are on the
   one filled pill. ≤640 the seats share the width (a tab bar, 56px); from
   641 up they are pills at the row's leading edge, word beside icon. The
   row is the header's colour and sits in flow under it — not sticky: the
   header already costs the top of every screen, and the row scrolls away
   with the page. Colours are literal like the rest of this file. --- */
.mm-nav {
  background: rgba(15, 15, 15, 0.96);
  border-bottom: 1px solid #2a2a2a;
}
.mm-nav-in {
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
}
.mm-nav-item {
  position: relative;
  box-sizing: border-box;
  /* Each seat takes the width its word needs and shares the rest: four
     full names at 11px sum to 258px of 292 at 320 (E-NEW-icon-row-1). */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 2px 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: #999;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mm-nav-item svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mm-nav-item:hover,
.mm-nav-item:focus-visible {
  color: #fff;
}
.mm-nav-item:focus-visible {
  outline: 2px solid #f0913f;
  outline-offset: 2px;
}
.mm-nav-ic {
  position: relative;
  display: inline-flex;
}
/* The seat for the page you are on: the one filled pill. */
.mm-nav-item.is-here {
  background: #1b1f26;
  border-color: #3a3f4a;
  color: #fff;
}
/* While a game is on, the Final Drive seat carries a small red LIVE tag on
   its icon's corner (E-NEW-live-tag-1). No fill: the one filled pill on the
   row is the page you are on, so the live signal never reads as the selected
   tab. Red is the board's live colour (ch. 15) and the RIGHT NOW dot's. Not
   animated. Never on the board itself — there the seat is `is-here`. */
.mm-nav-item.is-live:not(.is-here) .mm-nav-ic::after {
  content: 'LIVE';
  position: absolute;
  top: -7px;
  right: -18px;
  padding: 2px 3px;
  border-radius: 4px;
  background: #ef4444;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}
/* The dot: new since you last looked (shell-nav.js). White, because orange
   is a conflict and red is live on the board; never animated. */
.mm-nav-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #0f0f0f;
}
/* 320 — the one width where four full names at 11px want 313px of 292
   (measured). The bar's own cutoff above and the same step: the type one
   size down, the seats closer. Every current phone (360 and up) keeps the
   full size; only 320 pays. */
@media (max-width: 340px) {
  .mm-nav-in {
    gap: 2px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .mm-nav-item {
    padding: 2px;
    font-size: 10px;
    letter-spacing: 0;
  }
}
/* 641 and up: pills at the leading edge, word beside icon. */
@media (min-width: 641px) {
  .mm-nav-in {
    gap: 8px;
  }
  .mm-nav-item {
    flex: none;
    flex-direction: row;
    gap: 8px;
    padding: 0 14px;
    font-size: 13px;
  }
}
@media (min-width: 768px) {
  .mm-nav-in {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* The data credit's separators (src/views/attribution.js). Each provider's
   span carries its own " · " in a child .sep, hidden until a visible credit
   comes before it: the first visible credit never leads with a dot, whatever
   subset is showing and whatever order they were revealed in (the dashboard
   reveals one without a reload). The general-sibling selector is the whole
   rule: a visible span with a visible span anywhere before it. */
.mm-attribution .sep {
  display: none;
}
.mm-attribution [data-credit]:not([hidden]) ~ [data-credit]:not([hidden]) .sep {
  display: inline;
}