/* Loft Control — app shell layout. Mobile-first: sticky top bar +
   bottom tab bar. Desktop (>=900px): persistent left sidebar. */

#appShell { display: none; min-height: 100vh; }
body.authed #appShell { display: block; }
body.authed #authRoot { display: none; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
}
.topbar .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.topbar .org { font-size: 0.68rem; color: var(--text-muted); }

/* ---------- Main view ---------- */
main#view {
  padding: 16px 14px calc(var(--tabbar-h) + 24px);
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Bottom tab bar (mobile) ---------- */
nav#tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
nav#tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 6px;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-family: var(--font-display);
  min-height: 44px;
}
nav#tabbar a .icon { font-size: 1.25rem; line-height: 1; }
nav#tabbar a.active { color: var(--amber); }

/* ---------- Auth screen ---------- */
#authRoot {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
body.authed #authRoot { display: none; }
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 22px;
  width: 100%;
  max-width: 380px;
}
.auth-tabs {
  display: flex; gap: 4px;
  margin: 18px 0;
  background: var(--bg);
  border-radius: 8px;
  padding: 4px;
}
.auth-tabs button {
  flex: 1; padding: 9px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.auth-tabs button.active { background: var(--surface-raised); color: var(--text); }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  body.authed #appShell {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'side top' 'side main';
    min-height: 100vh;
  }
  .topbar { grid-area: top; }
  main#view { grid-area: main; max-width: 860px; width: 100%; padding-bottom: 40px; }
  nav#tabbar {
    grid-area: side;
    position: static;
    flex-direction: column;
    justify-content: flex-start;
    border-top: none;
    border-right: 1px solid var(--border);
    padding: 18px 0;
    gap: 2px;
  }
  nav#tabbar a {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 22px;
    font-size: 0.85rem;
  }
  nav#tabbar a.active { background: var(--surface-raised); border-right: 2px solid var(--amber); }
}