/* =============================================================================
   @elements/style — layout

   Shells, topbars, and the container utility. These are the structural
   building blocks of every page.

   Shell widths are named by intent:
     .shell-narrow     — 440px  (auth cards)
     .shell-prose      — 680px  (single-col article / welcome-aboard)
     .shell-marketing  — 820px  (landing)
     .shell            — 880px  (account / purchase default)
     .shell-wide       — 1080px (topbar content width; dashboard main col)

   .topbar sits flush at the top with a 1px ink-rule bottom border. Its
   inner .topbar-inner constrains content width — pair with .shell-wide
   or .shell-marketing depending on the page.

   .app is the dashboard's two-column grid layout (240px sidebar + main).
============================================================================= */

/* ─── Topbar ──────────────────────────────────────────────────────── */

.topbar {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-3-5, 0.875rem) 0;
  background: var(--bg);
}

.topbar-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.topbar .spacer { flex: 1; }

.topbar-nav {
  display: flex;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.78125rem;
}
.topbar-nav a {
  color: var(--ink-soft);
  transition: color var(--duration-fast) var(--ease-out);
}
.topbar-nav a:hover { color: var(--ink); }
.topbar-nav a.is-active { color: var(--ink); font-weight: var(--font-medium); }

/* The "sign in" ghost button lives at the end of the topbar */
.topbar-cta {
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  border: 1px solid var(--rule);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.topbar-cta:hover { border-color: var(--ink); }

/* Variant: topbar on canvas background (no border, matches auth pages) */
.topbar.is-flush {
  border-bottom: none;
  padding-top: var(--space-4-5, 1.125rem);
  background: transparent;
}

/* ─── Shells (width-bounded page containers) ─────────────────────── */

.shell {
  max-width: var(--container-shell);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.shell-narrow    { max-width: var(--container-narrow);    margin: 0 auto; padding: 0 var(--space-8); }
.shell-prose     { max-width: var(--container-prose);     margin: 0 auto; padding: 0 var(--space-8); }
.shell-marketing { max-width: var(--container-marketing); margin: 0 auto; padding: 0 var(--space-8); }
.shell-wide      { max-width: var(--container-wide);      margin: 0 auto; padding: 0 var(--space-8); }

/* Use .shell-padded for pages that want symmetric vertical breathing room */
.shell-padded    { padding-top: var(--space-14); padding-bottom: var(--space-20); }

/* ─── Dashboard app grid ──────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.app-main {
  padding: 2.5rem 3rem 6rem;      /* 40 48 100 */
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

/* ─── Stack / cluster / row — flex layout primitives ───────────── */

.stack   { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-2)); align-items: center; }
.row     { display: flex; align-items: center; gap: var(--row-gap, var(--space-3)); }

/* Vertical rhythm helpers — match the token names */
.gap-head-sub  { gap: var(--gap-head-sub); }
.gap-head-body { gap: var(--gap-head-body); }
.gap-section   { gap: var(--gap-section); }

/* ─── Page head pattern (eyebrow + H1 + sub) ────────────────────── */

.page-head {
  margin-bottom: var(--space-10);
}
.page-head .eyebrow { margin-bottom: var(--gap-head-sub); }
.page-head h1      { margin: 0 0 var(--gap-head-sub); }
.page-head .sub    {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 36rem;
}
.page-head .sub strong { color: var(--ink); font-weight: var(--font-semibold); }

/* ─── Section with top-rule divider ──────────────────────────────── */

.section {
  padding: var(--space-9, 2.25rem) 0;
  border-top: 1px solid var(--rule);
}
.section > h2 {
  margin: 0 0 var(--space-4-5, 1.125rem);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.section > h2 .right {
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  font-weight: var(--font-regular);
  color: var(--ink-dim);
  background: var(--bg-panel);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-xs);
  letter-spacing: 0;
}

/* ─── Footer ───────────────────────────────────────────────────────
   The bar spans the full viewport (border + background edge-to-edge);
   the inner row constrains width so content aligns with page shells.

     <footer class='footer'>
       <div class='footer-inner'>
         <div class='left'>…</div>
         <div class='right'>…</div>
       </div>
     </footer>
*/

.footer {
  border-top: 1px solid var(--rule);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--ink-dim);
}
.footer-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3-5, 0.875rem);
  align-items: center;
}
.footer .left {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  color: var(--ink-soft);
}
.footer .left .sep { color: var(--ink-faint); margin: 0 var(--space-2); }
.footer .right { display: flex; gap: var(--space-3-5, 0.875rem); }
.footer a { color: var(--ink-soft); }
.footer a:hover { color: var(--ink); }