/* topbar, drawer, scrim, app-body, content-pane, phone-frame aid */

/* ============ PHONE FRAME (desktop viewing aid only) ============ */
.device {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 480px) {
  .device {
    min-height: 860px;
    height: 860px;
    margin: 24px 0;
    border-radius: 36px;
    box-shadow: var(--shadow-lg);
    border: 8px solid #111;
  }
}

/* Top bar + screens, as its own flex column. On phones the drawer overlays
   this; from the desktop/tablet breakpoint down below, the drawer instead
   sits beside it as a permanent sidebar. */
/* Deliberately no `position` here — .scrim/.drawer's position:absolute below
   skips this and binds to .device instead, so on mobile they still cover the
   full device height (including behind the top bar), same as before the top
   bar moved out to become a device-level sibling. */
.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.content-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ============ TOP APP BAR ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 56px;
  min-height: 56px;
  padding: 0 0.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.icon-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
}
.icon-btn:active {
  background: var(--surface-2);
}
.topbar-title-wrap {
  flex: 1;
  min-width: 0;
}
.topbar-brand {
  display: none;
}
.topbar h1 {
  font-size: 1.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.back-btn {
  display: none;
}
body.screen-detail .back-btn {
  display: flex;
}
/* The hamburger stays visible even in detail screens (back arrow showing) so you
   can jump laterally to any other part of the app without backing out first —
   the content here is flat enough that strict back-only navigation isn't needed. */

/* ============ DRAWER ============ */
.scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 30;
}
body.drawer-open .scrim {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 82%;
  max-width: 300px;
  background: var(--surface);
  z-index: 31;
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.drawer-open .drawer {
  transform: translateX(0);
}
.drawer-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.drawer-header {
  padding: 1.25rem 1rem 1rem 1rem;
}
.drawer-header h2 {
  font-size: 1.5rem;
}
.drawer-header p {
  margin: 0.15rem 0 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}
.account-row {
  padding: 0 1rem 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.drawer-section-label {
  padding: 0.9rem 1rem 0.35rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.drawer-list {
  list-style: none;
  margin: 0;
  padding: 0 0.5rem;
}
.drawer-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
}
.drawer-list button svg {
  flex: none;
  width: 20px;
  height: 20px;
}
.drawer-list button:active,
.drawer-list button.active {
  background: var(--surface-2);
}

/* ============ SCREENS ============ */
.screens {
  flex: 1;
  position: relative;
  overflow: hidden;
}
/* .screen is a <div> custom-element child here, not a bare <section> — the app
   doesn't link the full main.css, so there's no bare `section{max-width:575px}`
   rule to fight with. The mockup's max-width/margin/padding reset that existed
   solely to beat that rule is omitted. */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.screen.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.screen-body {
  flex: 1;
  overflow-y: auto;
}
.home-banner {
  display: block;
  width: 100%;
  margin: 0 0 1rem 0;
}
.inner-screen {
  padding: 1rem;
}