/* App shell: top bar, content, status bar, mobile drawer. */
.app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }

.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-6);
  height: var(--topbar-h); padding: 0 var(--s-5);
  background: var(--nav-bg); color: var(--nav-ink);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; color: var(--nav-ink); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: 15px; }
.brand small { font-weight: 500; color: var(--nav-ink-2); font-size: var(--fs-xs); }

.nav { display: flex; gap: 2px; flex: 1; min-width: 0; }
.nav a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--nav-ink-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav a:hover { background: var(--nav-hover); color: var(--nav-ink); }
.nav a[aria-current="page"] { background: var(--nav-current); color: var(--nav-ink); font-weight: 600; }
.nav .nav-back { margin-left: auto; }

.topbar-right { display: flex; align-items: center; gap: var(--s-3); color: var(--nav-ink-2); font-size: var(--fs-sm); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.menu-btn { display: none; }
/* Controls on the navy bar */
.topbar .btn, .topbar .avatar { background: transparent; border-color: var(--nav-line); color: var(--nav-ink); }
.topbar .btn-ghost { border-color: transparent; color: var(--nav-ink-2); }
.topbar .btn:hover:not(:disabled), .topbar .avatar:hover { background: var(--nav-hover); color: var(--nav-ink); }
.topbar :focus-visible { outline-color: var(--nav-ink); }

.content { padding: var(--s-6) var(--gutter) var(--s-10); min-width: 0; }
.content-narrow { max-width: 880px; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-6); }
.page-head p { margin-top: var(--s-1); color: var(--ink-2); }

.statusbar {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-5);
  min-height: var(--statusbar-h); padding: 0 var(--s-5) env(safe-area-inset-bottom, 0px);
  background: var(--bg); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-2);
}
.statusbar .keys { margin-left: auto; display: flex; gap: var(--s-3); align-items: center; }
.statusbar .job { display: inline-flex; gap: var(--s-2); align-items: center; }
.statusbar .job .progress { width: 80px; }
.env-tag { font-weight: 600; letter-spacing: 0.02em; }

/* Drawer (phones) */
.drawer { margin: 0 auto 0 0; height: 100vh; max-height: 100vh; width: min(300px, 85vw); border-radius: 0 12px 12px 0; border-left: 0; }
.drawer[open] { animation: slide var(--dur) var(--ease-out); }
.drawer .brand { color: var(--ink); }
.drawer nav { display: grid; padding: var(--s-2); }
.drawer nav a { padding: 12px 14px; border-radius: var(--r); color: var(--ink); text-decoration: none; font-weight: 500; }
.drawer nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); }
.drawer hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-2) 0; }
@keyframes slide { from { transform: translateX(-24px); opacity: 0; } }

/* Fixed bottom action area on phones (used by billing) */
.action-bar { display: none; }

@media (max-width: 960px) {
  .nav, .topbar-right .when { display: none; }
  .menu-btn { display: inline-flex; }
  .topbar { gap: var(--s-3); padding: 0 var(--s-4); }
  .topbar-right { margin-left: auto; }
}
@media (max-width: 720px) {
  .brand small { display: none; }
  .content { padding: var(--s-4) var(--gutter) var(--s-8); }
  .page-head { margin-bottom: var(--s-4); }
  .statusbar .keys { display: none; }
  .statusbar { padding: 0 var(--s-4) env(safe-area-inset-bottom, 0px); gap: var(--s-3); }
  .action-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    gap: var(--s-3); align-items: center;
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--line-strong);
    box-shadow: var(--shadow-up);
  }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: var(--s-2); }
}