/* The shared page header (templates/header.html, ADR-0012) — on every server-rendered page,
   and alone on the React app's shell (templates/app/app.html), where apps/web/src/index.css
   styles everything below it. So only header rules here, all under the header's own classes:
   this file must not restyle the app underneath. The --fm-* tokens it uses are tokens.css,
   loaded first everywhere. */
.page-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  background: var(--fm-surface);
  border-bottom: 1px solid rgb(var(--fm-ink-rgb) / 10%);
  font-family: var(--fm-font-sans);
  font-size: 16px;
  line-height: 1.2;
  color: var(--fm-ink);
}

.page-header__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--fm-font-wordmark);
  font-size: 21px;
  letter-spacing: 0.2px;
  line-height: 1;
  text-decoration: none;
}

.page-header__logo {
  display: block;
  flex: none;
  height: 42px;
  width: auto;
  aspect-ratio: 99 / 98;
  color: var(--fm-accent-strong);
}

.page-header__wordmark-light {
  font-weight: 400;
  color: rgb(var(--fm-ink-rgb) / 82%);
}

.page-header__wordmark-bold {
  font-weight: 800;
  color: var(--fm-accent-strong);
}

.page-header__divider {
  width: 1px;
  height: 22px;
  background: var(--fm-border-strong);
}

.page-header__tagline {
  font-family: var(--fm-font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--fm-ink-secondary);
  white-space: nowrap;
}

/* Everything right of the brand, pushed to the header's far end. Its controls are sized to the
   56px header and the 42px logo beside them — about 36px tall, 14px text, 18px icons — rather
   than to the map's own small chrome; the phone block at the end makes them compact again. */
.page-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.donate-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fm-donate);
  border-radius: 8px;
  padding: 8px 14px;
  background: var(--fm-donate);
  font-weight: 600;
  font-size: 14px;
  color: var(--fm-donate-text);
  text-decoration: none;
}

.donate-button:hover {
  color: var(--fm-donate-text);
  background: var(--fm-donate-hover);
  border-color: var(--fm-donate-hover);
}

.donate-button__icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Both header menus are <details>: the <summary> is the trigger, and the dropdown is styled
   like index.css's .user-menu__dropdown/__item. */
.header-menu {
  position: relative;
  display: flex;
}

.header-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.header-menu > summary::-webkit-details-marker {
  display: none;
}

.header-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 4px;
  background: var(--fm-surface);
  border: 1px solid rgb(var(--fm-ink-rgb) / 10%);
  border-radius: 8px;
  box-shadow: var(--fm-shadow-lg);
}

.header-menu__label {
  margin-bottom: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid rgb(var(--fm-ink-rgb) / 8%);
  font-size: 12px;
  color: rgb(var(--fm-ink-rgb) / 55%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-menu__item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--fm-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.header-menu__item:hover {
  color: var(--fm-ink);
  background: rgb(var(--fm-ink-rgb) / 6%);
}

.header-menu__item[aria-current='page'] {
  font-weight: 600;
}

/* A demo session's "Create your own account" — tinted so it reads as the one worth noticing. */
.header-menu__item--accent {
  color: var(--fm-accent-strong);
}

.header-menu form {
  margin: 0;
}

/* The language menu (POST /language): a globe and the page's language code, open to everyone.
   Each choice is a submit button in one form, named in its own language; the current one bold. */
.language-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fm-ink);
}

.language-menu__trigger:hover,
.language-menu[open] .language-menu__trigger {
  background: rgb(var(--fm-ink-rgb) / 6%);
}

.language-menu__dropdown {
  min-width: 12rem;
}

.header-menu__item[aria-checked='true'] {
  font-weight: 600;
}

/* "Automatic" isn't a language but a return to the browser's: set apart under a rule. */
.language-menu__auto {
  margin-top: 4px;
  border-top: 1px solid rgb(var(--fm-ink-rgb) / 8%);
  border-radius: 0 0 6px 6px;
  white-space: nowrap;
}

.info-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fm-ink);
}

.info-menu__trigger:hover,
.info-menu[open] .info-menu__trigger {
  background: rgb(var(--fm-ink-rgb) / 6%);
}

/* The Upload menu (static/upload.js): what's being imported now. Its trigger reads like the
   Info menu's, with the upload icon; a count of what's in progress beside it, and a red dot for
   a failure not yet seen. */
.upload-menu__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--fm-ink);
}

.upload-menu__trigger:hover:not(:disabled),
.upload-menu[open] .upload-menu__trigger {
  background: rgb(var(--fm-ink-rgb) / 6%);
}

.upload-menu__trigger:disabled {
  color: var(--fm-ink-faint);
  cursor: not-allowed;
}

.upload-menu__badge {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--fm-accent);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: var(--fm-on-accent);
}

.upload-menu__alert {
  position: absolute;
  top: 6px;
  left: 24px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--fm-surface);
  border-radius: 50%;
  background: var(--fm-danger);
}

.upload-menu__badge[hidden],
.upload-menu__alert[hidden] {
  display: none;
}

.upload-menu__dropdown {
  width: min(22rem, calc(100vw - 20px));
  gap: 2px;
  padding: 8px;
}

.upload-menu__choose {
  display: block;
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--fm-accent);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--fm-on-accent);
  cursor: pointer;
}

.upload-menu__choose:hover {
  background: var(--fm-accent-hover);
}

/* The hint's export guides open in a new tab, so the menu and what's uploading stay put. */
.upload-menu__hint a {
  color: var(--fm-accent-strong);
}

.upload-menu__hint,
.upload-menu__idle {
  margin: 4px 2px 6px;
  font-size: 12px;
  color: rgb(var(--fm-ink-rgb) / 55%);
}

.upload-menu__list,
.upload-menu__notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.upload-menu__list:empty,
.upload-menu__notes:empty,
.upload-menu__idle[hidden] {
  display: none;
}

.upload-menu__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 2px;
  border-top: 1px solid rgb(var(--fm-ink-rgb) / 8%);
  font-size: 13px;
}

.upload-menu__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-menu__status {
  flex: none;
  font-size: 12px;
  color: rgb(var(--fm-ink-rgb) / 60%);
}

.upload-menu__note {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  border-radius: 6px;
  padding: 6px 8px;
  background: rgb(var(--fm-ink-rgb) / 5%);
  font-size: 12px;
  color: var(--fm-ink);
}

.upload-menu__note > span {
  flex: 1;
  min-width: 0;
}

.upload-menu__note--error {
  background: rgb(var(--fm-danger-rgb) / 10%);
  color: var(--fm-danger);
}

.upload-menu__dismiss {
  flex: none;
  margin-left: auto;
  border: 0;
  padding: 0 4px;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

/* Sync (the import history, /sync): a link, not a menu, beside Upload — the Info menu's look,
   with its icon, and a red dot for a failed import not yet seen there. */
.sync-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fm-ink);
  text-decoration: none;
}

.info-menu__trigger svg,
.language-menu__trigger svg,
.upload-menu__trigger svg,
.sync-link svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.sync-link:hover,
.sync-link[aria-current='page'] {
  color: var(--fm-ink);
  background: rgb(var(--fm-ink-rgb) / 6%);
}

.sync-link__alert {
  position: absolute;
  top: 6px;
  left: 24px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--fm-surface);
  border-radius: 50%;
  background: var(--fm-danger);
}

.sync-link__alert[hidden] {
  display: none;
}

.user-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(var(--fm-ink-rgb) / 15%);
  border-radius: 50%;
  background: var(--fm-surface);
  color: var(--fm-ink);
  overflow: hidden;
}

.user-menu__avatar:hover {
  background: rgb(var(--fm-ink-rgb) / 4%);
}

.user-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The header's "Sign in", and the pages' own buttons (pages.css). */
.page-button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--fm-on-accent);
  background: var(--fm-accent);
  border: 1px solid var(--fm-accent);
}

.page-button:hover {
  color: var(--fm-on-accent);
  background: var(--fm-accent-hover);
  border-color: var(--fm-accent-hover);
}

.page-button--quiet {
  color: rgb(var(--fm-ink-rgb) / 88%);
  background: var(--fm-surface);
  border-color: var(--fm-border-strong);
  font-weight: 500;
}

.page-button--quiet:hover {
  color: var(--fm-ink);
  background: var(--fm-surface-tint);
  border-color: var(--fm-border-strong);
}

.page-header .page-button {
  padding: 8px 14px;
  font-size: 14px;
}

/* Between phone and wide desktop the full-size controls don't all fit beside the brand, in
   Russian above all ("Синхронизация"): the tagline gives way first, then Upload, Sync and Info
   keep their icons alone, as on a phone. */
@media (max-width: 1180px) {
  .page-header__divider,
  .page-header__tagline {
    display: none;
  }
}

@media (max-width: 960px) {
  .upload-menu__label,
  .sync-link__label,
  .info-menu__label {
    display: none;
  }
}

/* index.css's phone header: tighter, no tagline, Donate as a heart alone. The Info menu
   stays at every width — without Import/Export there is room for it. */
@media (max-width: 768px) {
  .page-header {
    padding: 0 10px;
    gap: 8px;
  }

  .page-header__actions {
    gap: 2px;
  }

  /* Every control must still fit beside the brand on a 320px screen: they go back to compact,
     icons alone — 16px icons, a 32px avatar. */
  .info-menu__trigger,
  .language-menu__trigger {
    padding: 6px;
  }

  /* The code alone: "EN" is narrower than the globe beside it, and says more. */
  .language-menu__trigger svg {
    display: none;
  }

  /* Right-aligned under a trigger mid-header, a one-line "Automatic" would push the menu off
     the screen's left edge at 320px: it may wrap here. */
  .language-menu__auto {
    white-space: normal;
  }

  .info-menu__trigger svg,
  .upload-menu__trigger svg,
  .sync-link svg {
    width: 16px;
    height: 16px;
  }

  .donate-button__icon {
    width: 14px;
    height: 14px;
  }

  .user-menu__avatar {
    width: 32px;
    height: 32px;
  }

  .upload-menu__alert,
  .sync-link__alert {
    top: 4px;
    left: 18px;
  }

  .page-header .page-button {
    padding: 6px 12px;
    font-size: 13px;
  }

  .page-header__brand {
    font-size: 15px;
    gap: 6px;
  }

  .page-header__logo {
    height: 30px;
  }

  .page-header__divider,
  .page-header__tagline,
  .donate-button__label,
  .upload-menu__label,
  .sync-link__label,
  .info-menu__label {
    display: none;
  }

  .upload-menu__trigger,
  .sync-link {
    padding: 6px;
  }

  /* Right-aligned under its trigger, mid-header, the menu would run off the screen's left edge:
     on a phone it spans the screen under the header instead. */
  .upload-menu__dropdown {
    position: fixed;
    top: 60px;
    left: 10px;
    right: 10px;
    width: auto;
  }

  .donate-button {
    padding: 6px 8px;
  }
}

/* Narrower than the common 360px phone, the wordmark gives way to the nav; the logo is still
   the link back to the map. */
@media (max-width: 359px) {
  .page-header__wordmark {
    display: none;
  }
}