/* ============================================================
   Multi-page chrome: cross-page nav + home hub.
   Inherits all design tokens & components from styles.css.
   ============================================================ */

/* ---------- Cross-page nav (below the appbar) ---------- */
.appnav {
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.appnav::-webkit-scrollbar { height: 0; }
.appnav__inner {
  display: flex; gap: 4px;
  padding: 8px clamp(16px, 4vw, 40px);
  max-width: 1320px; margin: 0 auto; width: max-content; min-width: 100%;
}
.appnav a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 15px; border-radius: var(--r-full);
  font-size: .9rem; font-weight: 500; color: var(--on-surface-variant);
  text-decoration: none;
  transition: background var(--dur-short), color var(--dur-short);
}
.appnav a .material-symbols-rounded { font-size: 18px; }
.appnav a:hover { background: color-mix(in srgb, var(--on-surface) 7%, transparent); color: var(--on-surface); }
.appnav a[aria-current="page"] {
  background: var(--secondary-container); color: var(--on-secondary-container);
}

/* ---------- Home hub ---------- */
.hub {
  max-width: 1100px; margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 40px) 64px;
}
.hub-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.hub-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px; border-radius: var(--r-xl);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-low); color: inherit; text-decoration: none;
  transition: box-shadow var(--dur-med) var(--ease-emph),
              transform var(--dur-med) var(--ease-emph),
              background var(--dur-short);
}
.hub-card:hover { box-shadow: var(--e2); transform: translateY(-4px); background: var(--surface-container); }
.hub-card__ic {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cat, var(--primary)) 16%, transparent);
  color: var(--cat, var(--primary));
}
.hub-card__ic .material-symbols-rounded { font-size: 28px; }
.hub-card h3 {
  font-family: var(--font-brand); font-weight: 500; font-size: 1.3rem;
  margin: 0; letter-spacing: -0.01em;
}
.hub-card p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--on-surface-variant); }
.hub-card__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; font-size: .86rem; color: var(--cat, var(--primary));
}
.hub-card__cta .material-symbols-rounded { font-size: 18px; transition: transform var(--dur-short); }
.hub-card:hover .hub-card__cta .material-symbols-rounded { transform: translateX(3px); }