body {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-background);
  /* Iteration 17: base surface + two faint radial glows (--bg-glow), fixed so
     the glow stays put while content scrolls. Global on purpose (Q6). */
  background-color: var(--md-sys-color-background);
  background-image: var(--bg-glow);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 1rem;
}
h2 {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 0.75rem;
}
h3 {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 0.5rem;
}

main {
  padding: 1.5rem;
  max-width: var(--container-max);
  margin: 0 auto;
}
main.main--wide {
  max-width: none;
  padding: 1rem 1.5rem;
}
/* Full-bleed: fill the viewport below the 64px top nav, no cap, no padding.
   For creative tools (the email visual editor) that own the whole region. */
main.main--bleed {
  max-width: none;
  padding: 0;
  margin: 0;
  height: calc(100vh - 64px);
  overflow: hidden;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  padding: 0 0.25rem;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

hr {
  border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin: 1.5rem 0;
}

/* Helper: muted text inline. Used for breadcrumbs, hints. */
.muted { color: var(--md-sys-color-on-surface-variant); }

/* Global Alpine cloak: hide x-cloak elements until Alpine boots, so
   x-show'd panels (dropdowns, menus) don't flash open on load. */
[x-cloak] { display: none !important; }

/* Edit-form unsaved-changes banner. Sticks to the top of the form so it stays
   visible while scrolling; flipped by any field/tag/lens/team change. */
.form-dirty-banner {
  position: sticky;
  top: var(--space-2, 0.5rem);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, 12px);
  background: var(--md-sys-color-primary-container, #eaddff);
  color: var(--md-sys-color-on-primary-container, #21005d);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
}
.form-dirty-banner .material-symbols-outlined { font-size: 20px; }