/* The Go site's own additions to style.css (which stays the PHP site's until
   the cutover), on every page.

   The header carries one link more than the PHP's -- ログイン / マイページ
   (plan.md phase 4) -- and the PHP's nav already fills a 992px viewport, the
   width the hamburger gives way to the full nav. Without this every label
   wraps to two lines between 992 and ~1250px. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .nav__list { gap: 0.25rem; }
  .nav__link { padding: 0.5rem 0.625rem; font-size: 0.9375rem; white-space: nowrap; }
  .header__logo-text { white-space: nowrap; font-size: var(--text-lg); }
}

/* The signed-in header (layout.html): an account button naming the visitor,
   opening a small menu, on desktop; an avatar beside the hamburger on phones,
   where the drawer shows the same menu open at its top. */
.nav-login,
.nav-account__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.nav-account { position: relative; }

.nav-account__btn {
  box-shadow: inset 0 0 0 1px var(--gray-200);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--primary-800);
}

.nav-account__name {
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-account__chevron { transition: transform var(--transition); }
.nav-account__btn[aria-expanded="true"] .nav-account__chevron { transform: rotate(180deg); }

.nav-account__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 15rem;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1003;
}

.nav-account__menu[hidden] { display: none; }

.nav-account__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.375rem;
  padding: 0.5rem 0.625rem 0.75rem;
  border-bottom: 1px solid var(--gray-100);
}

.nav-account__head small {
  display: block;
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.nav-account__head strong {
  display: block;
  color: var(--primary-800);
  overflow-wrap: anywhere;
}

.nav-account__item,
.nav-account__logout button {
  display: block;
  width: 100%;
  padding: 0.625rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.nav-account__item:hover,
.nav-account__logout button:hover {
  background: var(--gray-100);
  color: var(--primary-700);
}

.nav-account__logout {
  margin: 0.375rem 0 0;
  padding-top: 0.375rem;
  border-top: 1px solid var(--gray-100);
}

.nav-account__logout button { color: var(--gray-500); }

/* The phone bar's avatar: the name's initial on the brand colour with a green
   "signed in" dot; signed out, an outlined person icon to ログイン. 44px hit area. */
.nav-avatar {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
}

.nav-avatar::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--primary-700);
}

.nav-avatar > * { position: relative; }
.nav-avatar svg { color: var(--white); }

.nav-avatar__initial {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.nav-avatar__dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line-green);
  border: 2px solid var(--white);
}

.nav-avatar--out::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--gray-400);
}

.nav-avatar--out svg { color: var(--gray-700); }

.nav-avatar.is-static {
  display: inline-flex;
  width: 40px;
  height: 40px;
}

.nav-avatar.is-static::before { inset: 0; }
.nav-avatar.is-static .nav-avatar__dot { right: 0; bottom: 0; }

@media (min-width: 992px) {
  .header--overlay:not(.header--scrolled) .nav-account__btn {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  }
}

@media (max-width: 991.98px) {
  .header__actions { gap: 0.25rem; }
  .nav-avatar { display: inline-flex; }
  .header--overlay:not(.header--scrolled) .nav-avatar--out::before { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
  .header--overlay:not(.header--scrolled) .nav-avatar--out svg { color: var(--white); }

  /* In the drawer: the account block first, open, the button gone. */
  .nav__item--account.is-signed-in { order: -1; }
  .nav-account__btn { display: none; }
  .nav-account__menu,
  .nav-account__menu[hidden] {
    display: block;
    position: static;
    min-width: 0;
    margin-bottom: 0.75rem;
    box-shadow: none;
    background: var(--gray-50);
  }
}

/* The avatar takes 44px of the phone bar: the company name stays on one line,
   with the bar's side padding and the gap beside the hamburger trimmed. */
@media (max-width: 480px) {
  .header__container { padding: 0 0.75rem 0 1rem; }
  .header__logo-text { white-space: nowrap; }
  .header__actions { gap: 0; }
}

@media (max-width: 374.98px) {
  .header__logo-image { width: 42px; }
  .header__logo-text { font-size: 0.9375rem; }
}