/* The top bar, design §1.2. One rule under it, the star as the home link,
   the sections on the left, the two doors on the right. The doors never
   collapse: a visitor who cannot find the way in is a visitor who leaves. */

#topbar {
  display: block;
  border-bottom: 1px solid var(--rule, #6a6a8c);
  margin: 0 0 1.5rem;
}

.topbar-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
}

/* The nav stretches so the theme, last in the list, can sit at the far end of
   the sections area rather than beside Manual. */
.topbar-inner > nav { flex: 1 1 auto; min-width: 0; }

.topbar-home {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-star {
  color: var(--amber, #ffd479);
  text-shadow: 0 0 14px rgba(255, 212, 121, 0.35);
  margin-right: 0.35rem;
}

.topbar-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

.topbar-sections a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.topbar-sections a:hover { border-bottom-color: var(--rule, #6a6a8c); }

/* The theme sits at the right-hand end of the sections, away from the doors. */
.topbar-theme { margin-left: auto; }

/* Plain, never filled: it changes the light in the room, it does not act on
   the world. The filled control on a page is the one that will happen. */
.topbar-theme-button {
  font: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--dusk, #9a8fd6);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.topbar-theme-button:hover { color: var(--ink, #f2ece1); }

/* The ☰. Hidden above 640 px, where the sections are the row itself. */
.topbar-menu {
  display: none;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.4rem;
  border: 1px solid var(--rule, #6a6a8c);
  border-radius: 2px;
  background: var(--zebra-a, #14141f);
  color: var(--ink, #f2ece1);
  cursor: pointer;
}

.topbar-sections a[aria-current="page"] {
  border-bottom-color: var(--amber, #ffd479);
  color: var(--amber, #ffd479);
}

.topbar-doors {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.topbar-who {
  color: var(--dusk, #9a8fd6);
  white-space: nowrap;
}

/* The two doors, used here and in the tile panel on `/`. */
.door {
  /* inline-flex, not inline-block: the label has to sit in the middle of the
     44 px box rather than at the top of it, with the slack under it. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--rule, #6a6a8c);
  border-radius: 2px;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  line-height: 1.4;
  background: var(--zebra-a, #14141f);
  color: var(--ink, #f2ece1);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.door-primary {
  background: var(--amber, #ffd479);
  color: var(--ground, #0f1120);
  border-color: var(--amber, #ffd479);
  font-weight: 700;
}

/* The door to the page you are on: outlined, never filled. It keeps the bar
   the same everywhere without pretending there is somewhere to go. */
.door-current {
  color: var(--amber, #ffd479);
  border-color: var(--amber, #ffd479);
  font-weight: 700;
}

.door:focus-visible,
.topbar-sections a:focus-visible,
.topbar-theme-button:focus-visible,
.topbar-menu:focus-visible,
.topbar-home:focus-visible {
  outline: 2px solid var(--amber, #ffd479);
  outline-offset: 2px;
}

/* The phone (design §1.2, §2.2): one row — star, ☰, the two doors — and the
   sections behind the ☰. The list drops out of the flow, below the bar, so
   the row keeps its height and the doors are never covered by it. */
@media (max-width: 640px) {
  .topbar-inner { padding: 0.25rem 0.6rem; gap: 0.4rem 0.5rem; flex-wrap: nowrap; }
  .topbar-home { font-size: 0.9375rem; }
  .topbar-menu { display: inline-flex; }
  .topbar-inner > nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Above Leaflet's own controls, which sit at 1000 and would otherwise
       paint their `+` and `−` over the open menu. */
    z-index: 1200;
    flex: 0 0 auto;
    background: var(--ground, #0f1120);
    border-bottom: 1px solid var(--rule, #6a6a8c);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  }
  .topbar-inner.topbar-open > nav { display: block; }
  .topbar-sections {
    display: block;
    font-size: 0.9375rem;
    padding: 0.25rem 0.75rem 0.5rem;
  }
  .topbar-sections li { display: block; }
  .topbar-theme { margin-left: 0; }
  .topbar-sections a,
  .topbar-theme-button {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0;
  }
  /* The row is the width of the menu, so the page you are on is marked with
     an underline under its own word rather than a rule across the drawer. */
  .topbar-sections a[aria-current="page"] {
    border-bottom-color: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .door { padding: 0.4rem 0.55rem; font-size: 0.8125rem; min-height: 40px; flex: 0 0 auto; white-space: nowrap; }
  /* The doors group takes what is left of the row and gives it up from the
     name first: the group used to be `flex: 0 0 auto`, so with "Landings
     closed for now" beside "I have a key" the row ran to 398 px on a 320 px
     phone and the second door was off the screen (session 46, measured). A
     door itself never shrinks and never wraps; the sentence beside it does. */
  .topbar-doors { gap: 0.4rem; min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
  /* Neither the star nor the ☰ gives way: with the doors group allowed to
     grow, the menu button was the thing squeezed to nothing when two doors
     did not fit. */
  .topbar-home, .topbar-menu { flex: 0 0 auto; }
  /* A long handle shortens rather than pushing a door off the row. */
  .topbar-who {
    font-size: 0.8125rem;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* The narrowest phones: two doors side by side ("Join Hesper", "I have a
   key") do not fit at the 640 px sizes with the star, the word and the ☰
   beside them, so the doors lose a little padding and the row a little gap.
   Both doors stay — the rule at the top of this file. */
@media (max-width: 360px) {
  .door { padding: 0.4rem 0.45rem; }
  .topbar-inner { gap: 0.4rem 0.35rem; }
  /* The star stays as the way home; the word beside it is what a 320 px
     row cannot afford when both doors are open (measured: 374 px with it,
     314 without). The link's accessible name is unchanged — the word is
     hidden from sight, not from the tree, so a reader still hears Hesper. */
  .topbar-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .topbar-star { margin-right: 0; }
  .topbar-home { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}