@layer components {
  .app-shell { min-height: 100vh; display: flex; flex-direction: column; }
  .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); }
  .container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--space-6); }

  .stack { display: flex; flex-direction: column; }
  .stack-2 { gap: var(--space-2); }
  .stack-3 { gap: var(--space-3); }
  .stack-4 { gap: var(--space-4); }
  .stack-5 { gap: var(--space-5); }
  .stack-6 { gap: var(--space-6); }
  .stack-7 { gap: var(--space-7); }

  .row-flex { display: flex; align-items: center; }
  .row-between { display: flex; align-items: center; justify-content: space-between; }
  .row-baseline { display: flex; align-items: baseline; justify-content: space-between; }
  .row-gap-2 { gap: var(--space-2); }
  .row-gap-3 { gap: var(--space-3); }
  .row-gap-4 { gap: var(--space-4); }
  .row-gap-5 { gap: var(--space-5); }

  .detail-page { padding: var(--space-8) 0; }
  .detail-page .container { max-width: 720px; }
}

@layer components {
  /* Basecamp's top-left Home — the way back from settings, profile,
     and every other single-card page. */
  .nav-home-crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--ink-soft);
    text-decoration: none;
    margin-left: 18px;
  }
  .nav-home-crumb:hover { color: var(--ink); }
  .nav-home-crumb svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
}

@layer components {
  /* Inside the native apps the tab bar carries home/chat/profile —
     the web's floating chrome steps aside. */
  body.turbo-native .app-footer-bar,
  body.turbo-native .rooms-pill,
  body.turbo-native .support-link,
  body.turbo-native .stay-nav-avatar-wrap,
  body.turbo-native .nav-home-crumb { display: none; }
}