/*
 * 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;
  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;
}
/* 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;
  }
}