/* ============================================================
   Layout: app chrome, navigation, page frame
   ============================================================ */

#app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* An implicit `auto` column sizes to its content's minimum, which let the
     appbar push the whole page wider than the viewport. minmax(0, 1fr) caps
     it, so the nav shrinks and scrolls instead. */
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Top bar ----------------------------------------- */
.appbar {
  min-width: 0;
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 10px #45c8ff5c);
}
.brand-name .accent { color: var(--beam); }

/* ---------- Primary nav ------------------------------------- */
.nav {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: auto;
  /* Without min-width:0 a flex child refuses to shrink below its content,
     which pushed the whole appbar past the viewport at tablet widths. */
  min-width: 0;
  flex: 0 1 auto;
}
.nav::-webkit-scrollbar { display: none; }
.nav-link {
  --nav-fg: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-height: calc(var(--hit) - 8px);
  border-radius: var(--r-sm);
  color: var(--nav-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link[aria-current="page"] {
  background: var(--beam-soft);
  color: var(--beam);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--beam) 34%, transparent);
}
html[data-theme="light"] .nav-link[aria-current="page"] { color: var(--accent); }
.nav-link svg { width: 18px; height: 18px; flex: 0 0 auto; }

.appbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 1 auto;
  min-width: 0;
}
.appbar-actions .btn { max-width: 100%; overflow: hidden; }

/* ---------- Page frame -------------------------------------- */
.page {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-12);
  animation: cb-fade-up var(--dur-3) var(--ease-out) both;
}
.page--wide { max-width: 1440px; }
.page--full { max-width: none; padding-inline: var(--sp-4); }

.page-head { margin-bottom: var(--sp-8); }
.page-head h1 { margin-bottom: var(--sp-2); }
.page-head .lede {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0;
}

.section { margin-bottom: var(--sp-10); }
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; font-size: var(--fs-xl); }
.section-head .section-note { color: var(--text-dim); font-size: var(--fs-sm); }

/* ---------- Grids ------------------------------------------- */
.grid { display: grid; gap: var(--sp-4); }
.grid--cards   { grid-template-columns: repeat(auto-fill, minmax(clamp(230px, 30vw, 300px), 1fr)); }
.grid--wide    { grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 40vw, 400px), 1fr)); }
.grid--tiles   { grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 22vw, 170px), 1fr)); }
.grid--stats   { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid--split   { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .grid--split { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: var(--sp-6); align-items: start; }
}

/* ---------- Footer ------------------------------------------ */
.appfoot {
  border-top: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom));
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.appfoot-inner {
  max-width: var(--layout-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

/* ---------- Mobile ------------------------------------------ */
@media (max-width: 900px) {
  .appbar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .brand-name { display: none; }
  .page { padding: var(--sp-5) var(--sp-4) var(--sp-16); }
  .nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    justify-content: space-around;
    gap: 0;
    padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    margin: 0;
  }
  .nav-link {
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-3xs);
    padding: var(--sp-2) var(--sp-1);
    min-width: 60px;
    justify-content: center;
    text-align: center;
  }
  .nav-link svg { width: 22px; height: 22px; }
  .appfoot { padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom)); }
}

/* The profile nickname is the first thing to go when space is tight. */
@media (max-width: 1080px) {
  .appbar-actions .btn .small { display: none; }
}