/* App shell — §5. Desktop: 232px sidebar + main, full-bleed edge to edge.
   Mobile: full-bleed, sidebar collapses to a bottom tab bar. */

.app-window {
  display: flex;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

/* Desktop: full-bleed app chrome — edge to edge, no floating window. */
@media (min-width: 901px) {
  .app-window {
    width: 100%;
    height: 100vh;
  }
}

/* Mobile: full screen, no window chrome. */
@media (max-width: 900px) {
  .app-window {
    min-height: 100vh;
    flex-direction: column;
  }
}

/* ===== Sidebar (desktop) ===== */
.sidebar {
  width: 232px;
  flex: none;
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 22px 0;
}

.sidebar__brand {
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand-tile {
  width: 27px;
  height: 27px;
  border-radius: var(--r-chip);
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.brand-word { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

.sidebar__nav {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
}

/* "This week / time saved" panel (§5). */
.week-panel {
  margin: 26px 22px 0;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--r-panel);
}
.week-panel__value {
  margin-top: 7px;
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.week-panel__note {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.sidebar__foot {
  margin-top: auto;
  padding: 0 22px;
}
.sidebar__user {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E7E7E5;
  color: #5B6168;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  object-fit: cover;
  flex: none;
}
.sidebar__user-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.sidebar__user-meta { font-size: 11.5px; color: var(--faint); line-height: 1.25; }
.sidebar__signout {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.sidebar__signout:hover { color: var(--ink-3); }

/* ===== Main column ===== */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* ===== Mobile bottom tab bar (§5) — text-first, no icon spam ===== */
.tabbar { display: none; }

@media (max-width: 900px) {
  .sidebar__nav,
  .week-panel,
  .sidebar__foot .eyebrow,
  .sidebar__foot .segmented { display: none; }

  /* Reuse the sidebar as a slim top brand bar on mobile. */
  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .sidebar__foot { margin-top: 0; padding: 0; }
  .sidebar__user { margin-top: 0; padding-top: 0; border-top: none; }
  .main { padding-bottom: 56px; }

  .tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    z-index: 10;
  }
  .tabbar__item {
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #7A7F86;
    text-decoration: none;
    border-top: 2px solid transparent;
    padding: 8px;
  }
  .tabbar__item--active {
    color: var(--ink);
    font-weight: 600;
    border-top: 2px solid var(--signal);
  }
  .tabbar__item--parked { color: var(--faint-2); pointer-events: none; }
}