/* ==========================================================================
   MPM public / legal shell
   ==========================================================================
   The header shared by Privacy, Terms and What's New: the canonical mark, the
   product name, and the theme control that hands off to design/theme-runtime.js.

   It lives here because the same block was byte-identical in two files and was
   about to be pasted into a third. Three copies is how a logo ends up fixed on
   one page and stale on the others.

   Colours come from each page's own tokens (--champagne / --accent), with
   literal fallbacks, so this file adds a layout - never a second palette and
   never a second theme system.
   ========================================================================== */

.mpm-legal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08));
  margin-bottom: 8px;
}

.mpm-legal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* The mark is a line drawing, so it needs its own space rather than a filled
   tile behind it. */
.mpm-legal-brand img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  object-fit: contain;
}

.mpm-legal-brand strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mpm-legal-theme {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border, rgba(255, 255, 255, .14));
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.mpm-legal-theme svg { width: 16px; height: 16px; }
.mpm-legal-theme:hover { border-color: var(--champagne, var(--accent, #c8a679)); color: var(--champagne, var(--accent, #c8a679)); }
.mpm-legal-theme:focus-visible { outline: 2px solid var(--champagne, var(--accent, #c8a679)); outline-offset: 2px; }

/* The runtime swaps which glyph is shown; both ship in the markup so the
   correct one is right on first paint rather than after a script runs. */
.mpm-legal-theme .moon { display: none; }
body.light .mpm-legal-theme .sun,
:root.light .mpm-legal-theme .sun { display: none; }
body.light .mpm-legal-theme .moon,
:root.light .mpm-legal-theme .moon { display: block; }

@media (max-width: 600px) {
  .mpm-legal-head { padding-left: 16px; padding-right: 16px; }
  .mpm-legal-brand strong { font-size: 13px; }
}