/* Layout chrome — app/views/layouts/application.html.erb
 *
 * Hosts the body styling, demo banner, pending-connection banners,
 * fixed top nav (desktop + mobile menu), main wrapper, alerts/notices,
 * and footer. Self-contained — replaces the raw Tailwind class strings
 * that previously lived in the layout ERB.
 */

/* ============ Turbo progress bar ============ */
.turbo-progress-bar {
  height: 2px;
  background: var(--brand-gradient);
}

/* Body — chrome backdrop, flex column for sticky footer.
 * Uses --background-base (the brand's semantic page-background token)
 * so the body differs from the footer's --background-surface-1 in
 * dark mode (where raw grey-900 coincides with surface-1). */
.app-body {
  background-color: var(--background-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============ Demo banner ============ */
.demo-banner {
  position: fixed;
  top: var(--spacing-0);
  left: var(--spacing-0);
  right: var(--spacing-0);
  z-index: 50;
  background-color: var(--background-surface-2);   /* informational accent */
  color: var(--text-primary);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.demo-banner-row {
  max-width: var(--width-1296);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);

  @media (min-width: 40rem) { gap: var(--spacing-16); }
}

.demo-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-shrink: 0;

  @media (min-width: 40rem) { gap: var(--spacing-16); }
}

.demo-banner-link { font-weight: var(--font-weight-500); text-decoration: underline; }

.demo-banner-exit {
  opacity: 0.75;

  &:hover { opacity: 1; }
}

.demo-banner-spacer { height: 2.25rem; /* Note: bespoke nav spacer height */ }

/* ============ Pending connection banners ============ */
.pending-banner {
  background-color: var(--panel-surface);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  border-bottom-width: var(--stroke-weight-2);
  border-bottom-style: solid;
}

.pending-banner--info,
.pending-banner--success { border-bottom-color: var(--border-default); }

.pending-banner-row {
  max-width: var(--width-1296);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.pending-banner-text--info,
.pending-banner-text--success { color: var(--text-primary); }

.pending-banner-action {
  font-weight: var(--font-weight-500);
  text-decoration: underline;
  flex-shrink: 0;
  color: var(--text-primary);
}

.pending-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-shrink: 0;
}

.pending-banner-dismiss {
  color: var(--text-primary);

  &:hover { color: var(--text-primary); }
}

.pending-banner-dismiss-icon { width: 1rem; height: 1rem; }

/* ============ Main wrapper ============ */
.app-main,
.app-main--full-bleed {
  flex: 1 1 0%;
  width: 100%;
  /* Standard gutter between page content and the footer. Lives on the main
     wrapper (not the footer) so it applies on both layout variants and on
     footer-less pages like the agent, which hide the footer and rely on this
     for their bottom breathing room. */
  padding-bottom: var(--spacing-32);
}
.app-main {
  max-width: 1152px; /* Note: app-owned reading width; brand --width-1296 reserved for landing/marketing */
  margin-inline: auto;
  padding-inline: var(--spacing-16);
  padding-top: 7rem; /* Note: clears fixed nav (80px) + breathing room */
}

/* Full-bleed alert/notice wrapper — restores the bounded width for the flash. */
.app-notice-wrap {
  max-width: var(--width-1296);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
  padding-top: 7rem; /* Note: clears fixed nav */
}

.app-notice {
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-16);
  background-color: var(--panel-surface);
  border-width: var(--stroke-weight-2);
  border-style: solid;
  border-radius: var(--corner-radius-sm); /* was 0.5rem (8px), off-scale → sm(4px) */
}

.app-notice--info  { border-color: var(--border-default); color: var(--text-primary); }
.app-notice--error { border-color: var(--border-default); color: var(--text-risk-factor); }

/* ============ Footer ============ */
.app-footer {
  margin-top: auto;
  padding-block: var(--spacing-48);
  background-color: var(--background-surface-1);
}

.app-footer-inner {
  max-width: var(--width-1296);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
}