/* PWA polish shared by all pages. */
:root { color-scheme: light; }
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.page-tabs a, .jump-nav a, button { min-height: 44px; }
.install-hint {
  position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30;
  display: none; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 20px; color: #e0f2fe; background: rgba(8, 47, 73, .96);
  box-shadow: 0 16px 40px rgba(8, 47, 73, .26); font-size: .92rem; line-height: 1.3;
}
.install-hint.is-visible { display: flex; }
.install-hint strong { color: #fff; }
.install-hint button {
  border: 0; border-radius: 999px; padding: 10px 13px; background: #fb7185; color: #fff; font-weight: 950;
  min-width: 44px; cursor: pointer;
}
.install-hint .install-action { background: #bae6fd; color: #082f49; }
.offline-badge {
  position: fixed; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); z-index: 35;
  display: none; padding: 8px 11px; border-radius: 999px; background: #7c2d12; color: #fff7ed; font-weight: 900; font-size: .78rem;
  box-shadow: 0 10px 24px rgba(124,45,18,.22);
}
.offline-badge.is-visible { display: inline-flex; }
.update-toast {
  position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 20px;
  background: #075985; color: #e0f2fe; box-shadow: 0 16px 40px rgba(8,47,73,.26); font-size: .92rem;
}
.update-toast.is-visible { display: flex; }
.update-toast button { border: 0; border-radius: 999px; padding: 10px 13px; background: #fff; color: #075985; font-weight: 950; }
@media all and (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
  .install-hint { display: none !important; }
  .wrap { padding-bottom: max(88px, calc(70px + env(safe-area-inset-bottom))); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}


/* Shared top app bar and menus. */
:root {
  --app-bar-height: 58px;
}
body {
  padding-top: max(var(--app-bar-height), env(safe-area-inset-top));
}
html.auth-pending .app-shell,
html.auth-required .app-shell {
  display: none;
}
.page-nav {
  display: none !important;
}
.app-shell {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: rgba(224, 242, 254, .86);
  border-bottom: 1px solid rgba(7, 89, 133, .12);
  box-shadow: 0 10px 30px rgba(8, 47, 73, .10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.app-bar {
  min-height: var(--app-bar-height);
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 8px;
  width: min(980px, 100%);
  margin: 0 auto;
}
.app-title {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: center;
  color: #0c4a6e;
  font: inherit;
  font-weight: 950;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.app-title:hover {
  background: rgba(255, 255, 255, .44);
}
.app-title:focus-visible {
  outline: 3px solid rgba(14, 116, 144, .28);
  outline-offset: 2px;
}
.app-icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 32, 51, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  color: #0f3f5e;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(8, 47, 73, .08);
}
.app-icon-button:focus-visible,
.app-menu a:focus-visible,
.account-menu button:focus-visible {
  outline: 3px solid rgba(14, 116, 144, .28);
  outline-offset: 2px;
}
.app-icon-button[aria-expanded="true"] {
  background: #075985;
  border-color: #075985;
  color: white;
}
.app-profile-button {
  border-radius: 999px;
  background: linear-gradient(135deg, #075985, #38bdf8);
  color: white;
  text-transform: uppercase;
}
.app-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  background: rgba(8, 47, 73, .16);
}
.app-overlay.is-visible {
  display: block;
}
.app-menu,
.account-menu {
  position: fixed;
  top: calc(max(var(--app-bar-height), env(safe-area-inset-top)) + 8px);
  z-index: 95;
  display: none;
  min-width: min(260px, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid rgba(16, 32, 51, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 55px rgba(8, 47, 73, .20);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.app-menu {
  left: max(12px, env(safe-area-inset-left));
}
.account-menu {
  right: max(12px, env(safe-area-inset-right));
}
.app-menu.is-open,
.account-menu.is-open {
  display: grid;
  gap: 6px;
}
.app-menu a,
.account-menu button {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  background: transparent;
  color: #0f3f5e;
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.app-menu a:hover,
.account-menu button:hover,
.app-menu a[aria-current="page"] {
  background: #e0f2fe;
}
.app-menu a[aria-current="page"] {
  color: #075985;
}
.sub-nav {
  top: var(--app-bar-height) !important;
}
.offline-badge {
  top: calc(max(12px, env(safe-area-inset-top)) + var(--app-bar-height)) !important;
}
.auth-logout {
  display: none !important;
}
@media all and (display-mode: standalone) {
  body { padding-top: max(var(--app-bar-height), env(safe-area-inset-top)); }
}
@media (min-width: 720px) {
  .app-bar { padding-inline: 16px; }
  .app-menu { left: calc(50% - min(490px, 50vw) + 28px); }
  .account-menu { right: calc(50% - min(490px, 50vw) + 28px); }
}

.account-menu .app-version {
  padding: 8px 14px 6px;
  color: #64748b;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}