/*
 * The mail pages' styles. A page's neutrals are the emails' own (lib/engine's SERIAL_EMAIL_COLOURS), because a brand's
 * text and outline colours were checked for contrast against them. Once mail.js has read the publication's branding
 * file, it sets the --brand-* properties on the root and marks it data-branded, and the page's tokens take the brand's
 * values for each colour mode. The masthead keeps its space while the page is neutral, so a logo arriving never moves
 * the page. The publication's name and fonts can still re-wrap the text below it: once when the brand applies, and again
 * when a kit font swaps in.
 */
:root {
  color-scheme: light dark;
  --canvas: #fafaf9;
  --text: #1f2328;
  --muted: #5f6368;
  --rule: #e7e5e4;
  --system-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --masthead-background: var(--canvas);
  --masthead-text: var(--text);
  --button-fill: var(--text);
  --button-text: var(--canvas);
  --button-border: 0 solid transparent;
  --button-radius: 0.375rem;
  --button-transform: none;
  --button-font: var(--system-font);
  --button-weight: 600;
  --button-style: normal;
  --heading-font: var(--system-font);
  --heading-weight: 700;
  --heading-style: normal;
  --body-font: var(--system-font);
  --body-weight: 400;
  --body-style: normal;
  --link: var(--text);
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1c1c1e;
    --text: #ececec;
    --muted: #a1a1aa;
    --rule: #3a3a3c;
  }
}

:root[data-branded] {
  --masthead-background: var(--brand-header-background);
  --masthead-text: var(--brand-header-text);
  --button-fill: var(--brand-button-fill);
  --button-text: var(--brand-button-text);
  --button-border: var(--brand-button-border);
  --button-radius: var(--brand-button-radius);
  --button-transform: var(--brand-button-transform);
  --button-font: var(--brand-button-font);
  --button-weight: var(--brand-button-weight);
  --button-style: var(--brand-button-style);
  --heading-font: var(--brand-heading-font);
  --heading-weight: var(--brand-heading-weight);
  --heading-style: var(--brand-heading-style);
  --body-font: var(--brand-body-font);
  --body-weight: var(--brand-body-weight);
  --body-style: var(--brand-body-style);
  --link: var(--brand-link);
}

@media (prefers-color-scheme: dark) {
  :root[data-branded] {
    --masthead-background: var(--brand-dark-header-background);
    --masthead-text: var(--brand-dark-header-text);
    --button-fill: var(--brand-dark-button-fill);
    --button-text: var(--brand-dark-button-text);
    --button-border: var(--brand-dark-button-border);
    --link: var(--brand-dark-link);
  }
}

body {
  margin: 0;
  background-color: var(--canvas);
  color: var(--text);
  font-family: var(--body-font);
  font-weight: var(--body-weight);
  font-style: var(--body-style);
}

/* The header band: tall enough for the largest logo, so a logo arriving never moves the page. */
.Masthead {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 5.5rem;
  padding: 0.875rem 1rem;
  background-color: var(--masthead-background);
  color: var(--masthead-text);
}

/* Keeps the empty band's space, and hides its banner landmark from assistive technology. */
:root:not([data-branded]) .Masthead {
  visibility: hidden;
}

.Masthead-home {
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.Masthead-home:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.Masthead-logo {
  display: block;
  max-width: 100%;
  height: auto;
}

.Masthead-name {
  font-family: var(--heading-font);
  font-size: 1.375rem;
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  line-height: 1.75rem;
  overflow-wrap: anywhere;
}

main {
  max-width: 36rem;
  margin: 0 auto;
  padding: 4rem 1rem;
  overflow-wrap: break-word;
}

.Masthead + main {
  padding-top: 2.5rem;
}

h1 {
  margin: 0 0 1rem;
  font-family: var(--heading-font);
  font-size: 1.75rem;
  font-weight: var(--heading-weight);
  font-style: var(--heading-style);
  line-height: 1.2;
}

p {
  margin: 0 0 1rem;
}

.Lead {
  font-size: 1.125rem;
  line-height: 1.6;
}

a {
  color: inherit;
}

main a {
  color: var(--link);
}

button {
  min-height: 2.75rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1.5rem;
  border: var(--button-border);
  border-radius: var(--button-radius);
  background-color: var(--button-fill);
  color: var(--button-text);
  font: inherit;
  font-family: var(--button-font);
  font-weight: var(--button-weight);
  font-style: var(--button-style);
  text-transform: var(--button-transform);
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* The page's text colour stands out at 3:1 or more on the canvas in both colour modes, whatever the button's colours. */
button:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

/* Serial's quiet host mark, lined up with the column above. */
.HostMark {
  width: min(36rem, 100% - 2rem);
  margin: 0 auto;
  padding: 1rem 0 2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--muted);
}

.HostMark p {
  margin: 0;
}