/* ============================================================================
   layout.css — app shell: sidebar, topbar, content, mobile nav, responsive.
   ============================================================================ */

.app {
  display: grid;
  /* minmax(0, 1fr) lets the main column shrink below its content's min-content
     width instead of forcing the page wider than the viewport on mobile. */
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  border-right: 1px solid rgb(var(--border));
  background: rgb(var(--surface) / 0.6);
  backdrop-filter: blur(8px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px 18px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  color: rgb(var(--on-primary));
  background: linear-gradient(140deg, rgb(var(--primary)), rgb(var(--primary-strong)));
  box-shadow: var(--shadow-sm);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__spacer { flex: 1; }
.nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: rgb(var(--text-2));
  font-weight: 550;
  font-size: 14.5px;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav__link:hover { background: rgb(var(--surface-hover)); color: rgb(var(--text)); }
.nav__link .icon { color: rgb(var(--text-3)); transition: color var(--dur-1) var(--ease); }
.nav__link:hover .icon { color: rgb(var(--text-2)); }
.nav__link.is-active {
  background: rgb(var(--primary) / 0.12);
  color: rgb(var(--primary-strong));
}
.nav__link.is-active .icon { color: rgb(var(--primary)); }

/* ---- Main column -------------------------------------------------------- */
.app__main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgb(var(--border));
  background: rgb(var(--bg) / 0.72);
  backdrop-filter: saturate(1.4) blur(12px);
}
.topbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar__mobilebrand { display: none; gap: 8px; font-weight: 700; width: auto; padding: 0 8px; }

.clock { text-align: right; line-height: 1.15; padding-right: 4px; }
.clock__time { display: block; font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }
.clock__date { display: block; font-size: 12px; color: rgb(var(--text-3)); }

.content {
  flex: 1;
  padding: clamp(18px, 3.2vw, 34px) clamp(16px, 4vw, 40px) 96px;
  outline: none;
  /* Clip stray horizontal overflow without becoming a scroll container
     (overflow: clip — unlike hidden — never blocks vertical page scroll). */
  overflow-x: clip;
}
.view { max-width: var(--content-max); margin: 0 auto; }

/* ---- Mobile bottom nav (hidden on desktop) ------------------------------ */
.mobilenav {
  display: none;
  position: fixed;
  z-index: 40;
  left: 0; right: 0; bottom: 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgb(var(--surface) / 0.9);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgb(var(--border));
}
.mnav__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: var(--r-sm);
  color: rgb(var(--text-3));
  font-size: 10.5px;
  font-weight: 600;
}
.mnav__link.is-active { color: rgb(var(--primary)); }
.mnav__link .icon { transition: transform var(--dur-2) var(--ease-spring); }
.mnav__link.is-active .icon { transform: translateY(-1px) scale(1.06); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  /* Higher specificity than .icon-btn (which is loaded later and fixes width
     to 38px) so the brand button sizes to "Life OS" instead of wrapping. */
  .topbar .topbar__mobilebrand { display: inline-flex; align-items: center; width: auto; padding: 0 8px; white-space: nowrap; }
  .clock { display: none; }
  .mobilenav { display: flex; }
  .content { padding-bottom: 92px; }
}

@media (min-width: 901px) and (max-width: 1080px) {
  :root { --sidebar-w: 76px; }
  .brand__text, .nav__link span { display: none; }
  .brand { justify-content: center; padding: 8px 0 18px; }
  .nav__link { justify-content: center; padding: 11px; }
}