/*
 * PageChrome — Topbar + flex-grow main + SiteFooter.
 * Footer pins to the bottom on short pages so small content still
 * fills the viewport.
 */

.page-chrome {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page-chrome-main {
  flex: 1;
  /* Canonical page-top space — every page sits 4rem (64px) below the
     topbar on desktop and 1.5rem (24px) below it on mobile. Don't add
     additional top padding on a page's inner shell; if a particular
     page needs a hero-style top band, do that with the hero element's
     own internal padding so the shared page-top baseline stays uniform.

     Bottom is a fixed measure, not 50dvh. Half a viewport was there to keep
     long comment threads off the footer, but it also put 600px of nothing
     under every short page: /install fit its window and still scrolled, for
     dead space. The footer already pins to the bottom on short pages through
     min-height + flex, so the air only has to be air. */
  padding: var(--space-16) 0 var(--space-20);
}

@media (max-width: 640px) {
  .page-chrome-main { padding: var(--space-6) 0 var(--space-12); }
}

/* Full-width layout — used by video posts and lessons so the video
   band bleeds edge to edge. Drops the top + bottom padding so the band
   sits directly under the topbar. */
.page-chrome.is-fullwidth .page-chrome-main {
  padding: 0;
}

/* The thanks after signup: fixed below the navbar, top center, the same
   success notice /account shows after a purchase. */
.pc-notice {
  position: fixed;
  top: 76px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  max-width: min(36rem, calc(100vw - 2rem));
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--success-edge);
  border-radius: var(--radius-xl);
  background: linear-gradient(var(--success-soft), var(--success-soft)), var(--bg-elevated);
  color: var(--success-ink);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.16));
  transform: translateX(-50%);
  animation: pc-notice-in 200ms ease-out, pc-notice-out 600ms ease-in 6.4s forwards;
}
.pc-notice-body {
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
}
.pc-notice-handle {
  white-space: nowrap;
}
.pc-notice-close,
.pc-notice-close:hover {
  flex: 0 0 auto;
  display: inline-flex;
  margin-left: var(--space-2);
  padding: var(--space-1);
  color: var(--success-ink);
  cursor: pointer;
}
/* The phone topbar is two rows deep. */
@media (max-width: 640px) {
  .pc-notice {
    top: 96px;
  }
}
@keyframes pc-notice-out {
  to { opacity: 0; transform: translate(-50%, -0.5rem); }
}
@keyframes pc-notice-in {
  from { opacity: 0; transform: translate(-50%, -0.5rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}