/* ==========================================================================
   Alpha Digital — app shell
   shell-v2.css (2026-08-12) · consumes tokens.css · v1 archived in versions/

   v2: the sidebar is gone. The frame is a deep-green top bar over content
   on paper — nothing else. The hub (/app) is the single navigation
   surface; every page links back to it via the top bar (brand click and
   an explicit "Hub" link). Content is centred with a max-width so wide
   screens don't stretch. No routing/content — layout only.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  background: var(--color-bg);
  font-size: var(--text-base);
}

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Top bar -------------------------------------------------------------- */

.shell-topbar {
  height: var(--shell-topbar-height);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  background: var(--color-chrome);
  color: var(--color-chrome-text);
}

.shell-topbar .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.shell-topbar .brand img { height: 32px; display: block; }

.shell-topbar .brand .platform {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-chrome-muted);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  padding-left: var(--space-3);
}

/* Top-bar nav: just "Hub" today; anything added here must stay a link
   back to a live page — coming-soon entries live on hub tiles only. */
.shell-topbar .topnav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shell-topbar .topnav a {
  font-size: var(--text-sm);
  color: var(--color-chrome-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.shell-topbar .topnav a:hover {
  color: var(--color-chrome-text);
  background: rgba(255, 255, 255, 0.08);
}

.shell-topbar .topnav a.active {
  color: var(--color-chrome-text);
  font-weight: var(--font-weight-medium);
}

.shell-topbar .spacer { flex: 1; }

.shell-topbar .user {
  font-size: var(--text-sm);
  color: var(--color-chrome-muted);
}

/* --- Content area --------------------------------------------------------- */

.shell-content {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-8);
}

.shell-content .page-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  margin-bottom: var(--space-6);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

@media (max-width: 760px) {
  .shell-content { padding: var(--space-4); }
}