/* Man Decor — header "Log in" / "My rooms" (js/account.js). Shared by /, /app/ and the guides. */
.md-account {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.md-acct-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--brass-dim, #8D7344);
  border-radius: 8px;
  background: rgba(14, 13, 12, 0.6);
  color: var(--text, #EDE6D9);
  font-family: var(--font-d, "Oswald", sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.md-acct-btn:hover,
.md-acct-btn[aria-expanded="true"] { border-color: var(--brass, #C4A36A); color: var(--brass, #C4A36A); }
.md-acct-btn:focus-visible { outline: 2px solid var(--brass, #C4A36A); outline-offset: 2px; }
.md-acct-btn.is-in { border-color: var(--brass, #C4A36A); color: var(--brass, #C4A36A); }
.md-acct-btn .md-acct-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass, #C4A36A);
  flex: 0 0 auto;
}

.md-acct-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(360px, calc(100vw - 24px));
  z-index: 1200;
  box-sizing: border-box;
  padding: 18px 18px 16px;
  background: var(--bg-2, #161412);
  border: 1px solid var(--line, #2E2A24);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  color: var(--text, #EDE6D9);
  font-family: var(--font-b, "Barlow", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
}
.md-acct-panel[hidden] { display: none; }
.md-acct-panel *, .md-acct-panel *::before, .md-acct-panel *::after { box-sizing: border-box; }
.md-acct-close {
  position: absolute;
  top: 4px; right: 4px;
  width: 44px; height: 44px;
  border: 0; background: none;
  color: var(--muted, #9A9184);
  font-size: 24px; line-height: 1;
  cursor: pointer;
}
.md-acct-close:hover { color: var(--text, #EDE6D9); }
.md-acct-title {
  margin: 0 40px 4px 0;
  font-family: var(--font-d, "Oswald", sans-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.md-acct-sub { margin: 0 0 12px; color: var(--muted, #9A9184); font-size: 14px; }
.md-acct-label { display: block; margin: 0 0 6px; font-size: 14px; color: var(--text, #EDE6D9); }
.md-acct-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line, #2E2A24);
  border-radius: 8px;
  background: #0b0a09;
  color: var(--text, #EDE6D9);
  font: inherit;
  font-size: 16px; /* 16px+ so iOS doesn't zoom */
}
.md-acct-input:focus { outline: none; border-color: var(--brass, #C4A36A); }
.md-acct-primary,
.md-acct-secondary,
.md-acct-plan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: var(--font-d, "Oswald", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.md-acct-primary { border: 1px solid var(--brass, #C4A36A); background: var(--brass, #C4A36A); color: var(--brass-ink, #1A140C); }
.md-acct-primary:hover { filter: brightness(1.06); text-decoration: none; color: var(--brass-ink, #1A140C); }
.md-acct-primary[disabled] { opacity: 0.6; cursor: progress; }
.md-acct-secondary { border: 1px solid var(--line, #2E2A24); background: transparent; color: var(--text, #EDE6D9); }
.md-acct-secondary:hover { border-color: var(--brass-dim, #8D7344); color: var(--text, #EDE6D9); text-decoration: none; }
.md-acct-plan { min-height: 44px; margin-top: 8px; border: 1px solid var(--brass-dim, #8D7344); color: var(--brass, #C4A36A); background: transparent; }
.md-acct-plan:hover { border-color: var(--brass, #C4A36A); text-decoration: none; color: var(--brass, #C4A36A); }
.md-acct-msg { margin: 10px 0 0; font-size: 14px; color: var(--muted, #9A9184); }
.md-acct-msg:empty { display: none; }
.md-acct-msg.is-error { color: #e0a58a; }
.md-acct-msg.is-ok { color: var(--brass, #C4A36A); }
.md-acct-fine { margin: 12px 0 0; font-size: 12.5px; color: var(--faint, #6E675C); }

/* Homepage header: brand + Log in on row 1, nav links on row 2 (phones) */
.site-header-inner .nav-links { margin-left: auto; }
@media (max-width: 720px) {
  .site-header-inner { flex-wrap: wrap; row-gap: 2px; }
  .site-header-inner .md-account { order: 2; margin-left: auto; }
  .site-header-inner .nav-links { order: 3; flex-basis: 100%; margin-left: 0; }
  .site-header-inner .nav-links a { display: inline-flex; align-items: center; min-height: 36px; }
}

/* Guide pages: brand left, Log in right */
.site-header.md-has-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: 8px;
}

/* /app/ topbar: back | brand (centered) | progress dots + account */
.topbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.topbar #btn-back { justify-self: start; }
.topbar .topbar-right { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar .md-acct-btn { padding: 0 12px; }
@media (max-width: 480px) {
  .topbar .topbar-right .dots { display: none; }
}