/* Masthead */
@layer components {

/* The public and onboarding bar: wordmark and a link or two, in flow. */
.masthead {
  position: relative;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: calc(0.85rem + env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) 0.85rem max(1.25rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--frost);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Signed in, there is no bar at all — one floating button, fixed and
   centered at the top, the page scrolling freely beneath it. The strip
   spans the width only so the button and its panel can center against
   it; the strip itself is air. */
.masthead--floating {
  position: fixed;
  inset: 0 0 auto 0;
  /* Three seats: the way back, the menu, the page's own actions. The
     outer two are equal so the menu stays centred whether or not they
     hold anything. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  padding: calc(0.6rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  border-bottom: none;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
/* All three share the one row. Said out loud because the menu claims
   column 2 first, and auto-placement would otherwise drop anything
   asking for column 1 onto a row of its own, below the pill. */
.masthead--floating > * { grid-row: 1; pointer-events: auto; }
.masthead--floating .menu { grid-column: 2; justify-self: center; }
.masthead__back { grid-column: 1; justify-self: start; }
.masthead__actions, .masthead__action { grid-column: 3; justify-self: end; }

/* The header's own buttons: the pill's quieter siblings, small enough
   that three of them fit across a phone. */
.masthead__back, .masthead__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.3rem;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-high);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-dim);
  max-inline-size: 100%;
}
@media (hover: hover) {
  .masthead__back:hover, .masthead__action:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    text-decoration: none;
  }
}
.masthead__action { color: var(--gold); }
@media (hover: hover) {
  .masthead__action:hover { color: var(--gold); border-color: var(--gold-dim); }
}
.masthead__back-label, .masthead__action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Where the pill and two labels won't fit side by side, the buttons keep
   their icons and let the words go. */
@media (max-width: 34rem) {
  .masthead__back-label, .masthead__action-label { display: none; }
  .masthead__back, .masthead__action { padding: 0 0.7rem; }
}

/* The floating button leaves no room in the flow, so the page steps down
   to meet it — on the web only; the app keeps its native chrome. */
body:not(.hotwire-native):has(.masthead--floating) .page {
  padding-block-start: calc(4.4rem + env(safe-area-inset-top));
}
.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.masthead__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}
.masthead__wordmark .seal { --seal-size: 1.35rem; }
@media (hover: hover) {
  .masthead__wordmark:hover { text-decoration: none; }
}
.masthead__links { display: flex; gap: 0.35rem; align-items: center; }
.masthead__link,
.masthead__signout {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.65rem;
  /* Two words that mean one door — never broken across lines. */
  white-space: nowrap;
}
.masthead__links a { color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 0.02em; }
@media (hover: hover) {
  .masthead__links a:hover { color: var(--ink); text-decoration: none; }
}
.masthead__signout {
  background: none;
  border: none;
  color: var(--ink-dim);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
}
@media (hover: hover) {
  .masthead__signout:hover { color: var(--ink); }
}

@media (max-width: 760px) {
  .masthead {
    padding: calc(0.75rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
  }
  .masthead--floating {
    padding-block: calc(0.55rem + env(safe-area-inset-top)) 0;
  }
  .masthead__bar { width: 100%; }
  .masthead__wordmark {
    font-size: 1rem;
    letter-spacing: 0.28em;
    gap: 0.45rem;
  }
  .masthead__wordmark .seal { --seal-size: 1.15rem; }
  .masthead__links--public { display: flex; padding-top: 0; }
}

}