/* ---------- Top bar ----------
   Every size here is in px on purpose: A− / A+ resize the reading text, not the header,
   so the title and buttons never grow into each other. All header layout lives in this file.
   Wide:    logo + name | links | 7 buttons, one row (labels on Invite / Sign in at 1360px+)
   ≤1199:   links drop to a centred second row
   ≤640:    phone sizes, subtitle hidden
   ≤519:    A−, A+ and light/dark fold into one "Aa" button so every button keeps a 44px target
   ≤379:    logo only beside the buttons; links a touch smaller */
.topbar {
  font-size: 16px; gap: 6px 16px; flex-wrap: nowrap;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  padding-top: max(8px, env(safe-area-inset-top));
}
.topbar .brand { gap: 10px; flex: 0 1 auto; min-width: 0; }
.topbar .brand img { width: 36px; height: 36px; flex: none; }
.topbar .brand-text { min-width: 0; line-height: 1.08; }
.topbar .brand-name { font-size: 23px; line-height: 1.08; letter-spacing: .005em; }
.topbar .brand-sub { font-size: 10.5px; letter-spacing: .14em; margin-top: 3px; white-space: nowrap; }

.topbar .mainnav { margin-left: auto; gap: 2px; font-size: 15px; flex-wrap: nowrap; min-width: 0; overflow: visible; }
.topbar .mainnav a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; white-space: nowrap; }

.topbar .tools { gap: 4px; flex: none; align-items: center; }
.topbar .iconbtn, .topbar .tools .iconbtn { width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 19px; flex: none; }
.topbar .iconbtn svg { width: 20px; height: 20px; }
.topbar .iconbtn .minus, .topbar .iconbtn .plus, .topbar .iconbtn .disp-a { font-size: 13px; margin-left: 1px; }
.topbar .iconbtn .disp-a { font-size: 15px; }
.topbar .tools .invite-t, .topbar .tools .acct-btn-t { display: none; }

/* "Aa" group: on wider screens its three buttons sit in the row like any other */
.topbar .disp, .topbar .disp-set { display: contents; }
.topbar .disp-btn { display: none; }

@media (min-width: 1360px) {
  .topbar .tools .invite-btn { width: auto; padding: 0 14px 0 12px; gap: 6px; font-size: 14px; }
  .topbar .tools .acct-btn { width: auto; padding: 0 14px; gap: 6px; font-size: 15px; }
  .topbar .tools .invite-t, .topbar .tools .acct-btn-t { display: inline; }
}

@media (max-width: 1199px) {
  .topbar { flex-wrap: wrap; }
  .topbar .brand { flex: 1 1 0; }
  .topbar .mainnav { order: 3; width: 100%; margin: 0; justify-content: center; }
}

@media (max-width: 640px) {
  .topbar { gap: 4px 12px; padding: 6px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)); padding-top: max(6px, env(safe-area-inset-top)); }
  .topbar .brand { gap: 8px; }
  .topbar .brand img { width: 34px; height: 34px; }
  .topbar .brand-sub { display: none; }
  .topbar .brand-name { font-size: 18px; line-height: 1.1; }
  .topbar .tools { gap: 3px; }
  .topbar .mainnav { justify-content: space-between; gap: 0; font-size: 14px; }
  .topbar .mainnav a { min-height: 38px; padding: 0 9px; }
}

@media (max-width: 519px) {
  .topbar .disp { display: block; position: relative; }
  .topbar .disp-btn { display: inline-flex; }
  .topbar .disp-set { display: none; }
  .topbar .disp-set.open {
    display: flex; gap: 6px; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
    padding: 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); box-shadow: var(--shadow);
  }
  .topbar .disp-btn[aria-expanded="true"] { border-color: var(--gold); background: var(--gold-soft); }
  .topbar .brand-name { font-size: 17px; }
}
@media (max-width: 459px) {
  .topbar .mainnav { font-size: 13px; }
  .topbar .mainnav a { padding: 0 5px; }
}
@media (max-width: 379px) {
  .topbar .brand-text { display: none; }
  .topbar .mainnav { font-size: 12.5px; }
  .topbar .mainnav a { padding: 0 3px; }
}