/* Shared app-page chrome (nav.js): tab bar, session-picker shell, profile
   button + slide-out, sign-in modal, and the small auth-status toast. Loaded
   by all 4 app pages (watchlist/topics/find/measure) alongside measure.css
   (base .m-topbar-inner flex layout) and whatever page-specific CSS. */

.m-tabs { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.m-tab { color: #cfe0f0; text-decoration: none; font-size: .85rem; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; }
.m-tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.m-tab.is-active { color: var(--navy); background: var(--accent); }

.m-topbar-session { display: flex; align-items: center; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 12px; flex-shrink: 0; }
#topbar-session { background: transparent; border: 0; color: #fff; font-size: .8rem;
  font-weight: 700; cursor: pointer; }
#topbar-session option { color: #111; }
#topbar-session:focus { outline: none; }

.m-topbar-spacer { flex: 1 1 auto; }

/* ---- Profile button (top-right) ------------------------------------------- */
.m-profile-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.28); color: #fff; cursor: pointer; padding: 0; }
.m-profile-btn:hover { background: rgba(255,255,255,.18); }
.m-profile-btn.is-signed-in { background: var(--accent); border-color: var(--accent); color: var(--navy); }

/* ---- Profile slide-out ----------------------------------------------------- */
.a-slideout-backdrop { position: fixed; inset: 0; background: rgba(20,48,79,0); z-index: 110;
  transition: background .2s; pointer-events: none; }
.a-slideout-backdrop[hidden] { display: none; }
.a-slideout-backdrop.open { background: rgba(20,48,79,.35); pointer-events: auto; }
.a-slideout { position: absolute; top: 0; right: 0; height: 100%; width: 300px; max-width: 88vw;
  background: #fff; box-shadow: -12px 0 40px rgba(0,0,0,.2); padding: 26px 22px;
  transform: translateX(100%); transition: transform .2s; }
.a-slideout-backdrop.open .a-slideout { transform: translateX(0); }
.a-slideout-close { position: absolute; top: 12px; right: 14px; background: none; border: 0;
  font-size: 1.5rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.a-slideout-body h2 { margin: 0 0 8px; font-size: 1.1rem; color: var(--brand-dark); }
.a-slideout-body p { margin: 0 0 16px; font-size: .88rem; color: var(--ink-soft); }
.a-slideout-email { word-break: break-all; font-weight: 600; color: var(--ink); }
.a-slideout-body .a-btn { display: block; width: 100%; text-align: center; margin-bottom: 10px;
  box-sizing: border-box; background: #fff; border: 1px solid var(--line); color: var(--brand-dark); }
.a-slideout-body .a-btn:hover { border-color: var(--brand); background: var(--marble); }
.a-slideout-body .a-btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; }
.a-slideout-body .a-btn-accent:hover { background: var(--brand-dark); }
.a-slideout-body .a-slideout-signout { color: var(--die); }
.a-slideout-body .a-slideout-signout:hover { border-color: var(--die); background: var(--die-soft); }

/* ---- Sign-in modal (triggered from the slide-out or a signed-out track click) */
.a-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff;
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.a-btn:hover { background: rgba(255,255,255,.18); }
.a-btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; white-space: nowrap; }
.a-btn-accent:hover { background: var(--brand-dark); }

.a-modal-backdrop { position: fixed; inset: 0; background: rgba(20,48,79,.55); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.a-modal-backdrop[hidden] { display: none; }
.a-modal { position: relative; background: #fff; border-radius: var(--radius); max-width: 380px;
  width: 100%; padding: 28px 24px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.a-modal h2 { margin: 0 0 8px; font-size: 1.15rem; color: var(--brand-dark); }
.a-modal p { margin: 0 0 16px; font-size: .88rem; color: var(--ink-soft); }
.a-modal-close { position: absolute; top: 10px; right: 12px; background: none; border: 0;
  font-size: 1.4rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.a-modal-form { display: flex; gap: 8px; }
.a-modal-email { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: 999px;
  border: 1px solid var(--line); font: inherit; font-size: .9rem; }
.a-modal-email:focus { outline: none; border-color: var(--brand); }
.a-modal-note { margin-top: 12px; font-size: .85rem; }
.a-modal-note.ok { color: var(--ok); }
.a-modal-note.err { color: var(--die); }

/* ---- Auth-status toast (post magic-link redirect) -------------------------- */
.a-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 130;
  background: var(--brand-dark); color: #fff; padding: 10px 20px; border-radius: 999px;
  font-size: .85rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.a-toast[hidden] { display: none; }
.a-toast-err { background: var(--die); }

@media (max-width: 720px) {
  .m-tab { padding: 7px 9px; font-size: .8rem; }
}