.irm-page {
  --w3l-color-accent: var(--irm-primary, #d80d28);
  --w3l-color-on-accent: var(--irm-on-primary, #ffffff);
  --w3l-color-surface: var(--irm-surface, #ffffff);
  --w3l-color-text: var(--irm-text, #212529);
  --w3l-color-heading: var(--irm-heading, #212529);
  --w3l-color-border: var(--irm-border, rgba(0, 0, 0, 0.15));
  --w3l-color-muted: var(--irm-muted, rgba(0, 0, 0, 0.68));
  --w3l-color-danger: var(--irm-color-danger, #b10e1e);
  --w3l-color-page-container: #f2f2f2;
  --w3l-radius: var(--irm-radius, 0.25rem);
  --w3l-space-xs: 0.25rem;
  --w3l-space-sm: 0.5rem;
  --w3l-space-md: 1rem;
  --w3l-space-lg: 1.5rem;
  --w3l-space-xl: 2rem;
  --w3l-space-2xl: 3rem;
  --w3l-shell-gutter: clamp(
    var(--w3l-space-sm),
    3vw,
    var(--w3l-space-xl)
  );
  --w3l-text-sm: 0.875rem;
  --w3l-text-body: 1rem;
  --w3l-text-title: 1.25rem;
  --w3l-text-heading: 1.5rem;
  --w3l-text-display: 2rem;

  /*
    One inset for the whole rail. The header logo, the body text and the legal text all resolve to
    the same left edge because they all resolve to this. Three separate values is what made the
    header and the footer read as objects that missed their slot.
  */
  --w3l-inset: clamp(var(--w3l-space-lg), 4vw, var(--w3l-space-2xl));

  /*
    A stable rem cap keeps the prose measure within the 65–75 character target while the fallback
    font swaps to Source Sans 3.
  */
  --w3l-measure: 34rem;

  color: var(--w3l-color-text);
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: var(--w3l-text-body);
  font-kerning: normal;
  line-height: 1.6;
}

body.irm-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

.irm-shell {
  display: flex;
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  inline-size: min(
    calc(100% - var(--w3l-space-md)),
    calc(
      var(--irm-content-width, 51.25rem) + var(--w3l-shell-gutter) +
        var(--w3l-shell-gutter)
    )
  );
  margin-inline: auto;
  padding: var(--w3l-space-lg) var(--w3l-shell-gutter);
  background: var(--w3l-color-page-container);
}

/*
  The rail.

  The header and the main surface are one continuous object, not two things that happen to be the
  same width: same fill, no seam between them, and the accent edge across the top belongs to
  whichever of the two comes first. Containment comes from the fill, so there is no card border —
  the theme package guarantees the surface stays distinct from the page behind it.
*/
.irm-shell > .irm-header,
.irm-shell > .irm-surface {
  margin: 0;
  border: 0;
  background: var(--w3l-color-surface);
}

.irm-shell > :is(.irm-header, .irm-surface):first-child {
  border-block-start: 4px solid var(--w3l-color-accent);
  border-start-start-radius: var(--w3l-radius);
  border-start-end-radius: var(--w3l-radius);
}

.irm-shell > .irm-header {
  gap: var(--w3l-space-lg);
  overflow: hidden;
  padding-block-end: var(--w3l-space-lg);
}

/* A banner bleeds to the rail's edges; everything else in the header takes the shared inset. */
.irm-shell > .irm-header:not(:has(.irm-header__banner)) {
  padding-block-start: var(--w3l-space-lg);
}

/*
  Logo containment.

  The logo container stays within its header after padding is applied. Border-box ensures padding
  does not push it over the edge, and max-inline-size keeps it from overflowing. Direct children are
  shrink-safe with min-inline-size: 0. Images inside shrink to fit while keeping aspect ratio. Their
  block size remains controlled by IRM_Lib_Theme's --irm-logo-height token so the theme record's
  Small, Medium, and Large logo settings remain authoritative.
*/
.irm-shell > .irm-header .irm-header__logos {
  box-sizing: border-box;
  max-inline-size: 100%;
  padding-inline: var(--w3l-inset);
  min-inline-size: 0;
}

.irm-shell > .irm-header .irm-header__logos > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.irm-shell > .irm-header .irm-header__logos img {
  max-inline-size: 100%;
}

/*
  Narrow viewport: compact logo sizing.

  At narrow widths the container tightens gap and padding while the inline/stacked layout and
  configured logo size from IRM_Lib_Theme remain authoritative.
*/
@media (max-width: 30rem) {
  .irm-shell > .irm-header .irm-header__logos {
    gap: var(--w3l-space-sm);
    padding-inline: var(--w3l-space-md);
  }
}

.irm-header__banner {
  border-radius: 0;
}

.irm-surface {
  inline-size: 100%;
  padding: var(--w3l-inset);
  box-sizing: border-box;

  /*
    Square on top so the seam with the header disappears. The theme package sets border-radius as a
    shorthand, so both top corners have to be named explicitly or they keep its radius and leave a
    notch where the two meet. The :first-child rule above rounds them back when there is no header.
  */
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: var(--w3l-radius);
  border-end-end-radius: var(--w3l-radius);
}

/*
  The legal block is its own container, deliberately set apart from the rail rather than trailing
  off the bottom of it. Putting it on a surface is also what makes its contrast knowable: muted
  text on the page background is measured against whatever an administrator chose, including a
  photograph.
*/
.irm-shell > .irm-legal {
  margin: var(--w3l-space-xl) 0 0;
  padding: var(--w3l-space-md) var(--w3l-inset);
  border-radius: var(--w3l-radius);
  background: var(--w3l-color-surface);
  color: var(--w3l-color-muted);
  font-size: var(--w3l-text-sm);
}

.irm-page h1,
.irm-page h2,
.irm-page h3 {
  color: var(--w3l-color-heading);
  line-height: 1.2;
  text-wrap: balance;
}

.irm-page h1 {
  margin: 0;
  font-size: var(--w3l-text-display);
}

.irm-page h2 {
  margin: 0;
  font-size: var(--w3l-text-heading);
}

.irm-page h3 {
  margin: 0;
  font-size: var(--w3l-text-title);
}

.irm-page p {
  text-wrap: pretty;
}

.irm-page-content,
.irm-page-heading,
.irm-authentication,
.irm-eligibility,
.irm-eligibility__affirmation,
.irm-auth-option,
.irm-confirmation-summary,
.irm-stack,
.irm-field {
  display: flex;
  flex-direction: column;
}

.irm-confirmation-message {
  color: var(--w3l-color-heading);
  font-size: var(--w3l-text-title);
  line-height: 1.5;
}

.irm-confirmation-summary {
  gap: var(--w3l-space-md);
  padding-block-start: var(--w3l-space-lg);
  border-block-start: 1px solid var(--w3l-color-border);
  color: var(--w3l-color-muted);
  font-size: var(--w3l-text-sm);
}

.irm-confirmation-summary > p {
  max-inline-size: var(--w3l-measure);
  margin: 0;
}

.irm-confirmation-summary ul {
  max-inline-size: var(--w3l-measure);
  margin: 0;
  padding-inline-start: 1.25rem;
}

.irm-confirmation-summary li + li {
  margin-block-start: var(--w3l-space-sm);
}

.irm-page-content {
  gap: var(--w3l-space-xl);
}

.irm-page-heading,
.irm-authentication {
  gap: var(--w3l-space-md);
}

.irm-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--w3l-space-sm);
}

.irm-account > div {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.irm-eligibility {
  gap: var(--w3l-space-md);
  padding-block: var(--w3l-space-lg);
  border-block: 1px solid var(--w3l-color-border);
}

.irm-eligibility__affirmation {
  flex-direction: row;
  gap: var(--w3l-space-sm);
  align-items: flex-start;
  max-inline-size: var(--w3l-measure);
}

.irm-eligibility__affirmation input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: 0 0 auto;
  margin-block-start: 0.15rem;
}

.irm-eligibility__affirmation input:focus-visible {
  outline: 3px solid var(--w3l-color-accent);
  outline-offset: 2px;
}

.irm-page-content:has(
    [data-eligibility-affirmation]:not(:checked))
  [data-eligibility-dependent="true"] {
  display: none;
}

.irm-page :is(button, input, select, textarea):disabled,
.irm-page a[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.irm-page-heading > p,
.irm-auth-option p,
.irm-auth-option ul {
  max-inline-size: var(--w3l-measure);
  margin: 0;
}

.irm-auth-option ul {
  padding-inline-start: 1.25rem;
}

/*
  Salesforce rich text.

  The measure belongs on the text, not on the container: an administrator's image should be free to
  use the full width of the surface, and capping the container capped the image with it. Nothing
  here constrained media at all before, so a pasted image rendered at its natural size and took the
  card, and then the viewport, with it.
*/
.irm-prose {
  overflow-wrap: break-word;
}

.irm-prose > :is(
    p:not(:has(img, video, iframe)),
    ul,
    ol,
    blockquote,
    h2,
    h3,
    h4,
    h5,
    h6) {
  max-inline-size: var(--w3l-measure);
}

.irm-prose > p:has(img, video, iframe) {
  inline-size: 100%;
  max-inline-size: 100%;
}

.irm-prose :is(img, video, iframe) {
  max-inline-size: 100%;
  /*
    Salesforce emits width and height as attributes, which browsers read as an aspect ratio. Keeping
    them and overriding only the height is what makes this responsive without reintroducing a shift.
  */
  block-size: auto;
}

.irm-prose[data-image-width="small"] img {
  inline-size: auto !important;
  max-inline-size: 25% !important;
  block-size: auto !important;
}

.irm-prose[data-image-width="medium"] img {
  inline-size: auto !important;
  max-inline-size: 50% !important;
  block-size: auto !important;
}

.irm-prose[data-image-width="large"] img {
  inline-size: auto !important;
  max-inline-size: 75% !important;
  block-size: auto !important;
}

.irm-prose[data-image-width="full"] img {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
}

.irm-prose:is(
    [data-image-alignment="left"],
    [data-image-alignment="centre"],
    [data-image-alignment="right"]) img {
  display: block;
  float: none !important;
}

.irm-prose[data-image-alignment="left"] img {
  margin-inline: 0 auto !important;
}

.irm-prose[data-image-alignment="centre"] img {
  margin-inline: auto !important;
}

.irm-prose[data-image-alignment="right"] img {
  margin-inline: auto 0 !important;
}

.irm-prose table {
  max-inline-size: 100%;
}

.irm-prose > :first-child {
  margin-block-start: 0;
}

.irm-prose > :last-child {
  margin-block-end: 0;
}

.irm-prose p {
  margin-block: 0;
}

.irm-prose p + p {
  margin-block-start: var(--w3l-space-md);
}

.irm-prose p:empty {
  display: none;
}

.irm-authentication__options {
  display: grid;
  border-block: 1px solid var(--w3l-color-border);
}

.irm-auth-option {
  justify-content: space-between;
  gap: var(--w3l-space-lg);
  padding-block: var(--w3l-space-lg);
}

.irm-auth-option > div {
  display: flex;
  flex-direction: column;
  gap: var(--w3l-space-sm);
}

.irm-auth-option + .irm-auth-option {
  border-block-start: 1px solid var(--w3l-color-border);
}

.irm-route-help {
  max-inline-size: var(--w3l-measure);
  color: var(--w3l-color-muted);
}

.irm-route-help > summary {
  cursor: pointer;
  font-weight: 650;
}

.irm-route-help > p {
  margin: var(--w3l-space-sm) 0 0;
}

.irm-stack {
  gap: var(--w3l-space-md);
}

.irm-field-group {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.irm-field-group > legend {
  margin-block-end: var(--w3l-space-md);
  padding: 0;
  color: var(--w3l-color-heading);
  font-size: var(--w3l-text-title);
  font-weight: 700;
  line-height: 1.2;
}

.irm-field {
  gap: var(--w3l-space-sm);
  max-inline-size: 48rem;
}

.irm-field label,
.irm-form__field label {
  color: var(--w3l-color-heading);
  font-weight: 650;
}

.irm-field input,
.irm-field select,
.irm-field textarea,
.irm-form__field input,
.irm-form__field select,
.irm-form__field textarea {
  box-sizing: border-box;
  min-block-size: 2.75rem;
  inline-size: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--w3l-color-border);
  border-radius: var(--w3l-radius);
  background: var(--w3l-color-surface);
  color: var(--w3l-color-text);
  font: inherit;
}

.irm-field textarea,
.irm-form__field textarea {
  min-block-size: 8rem;
  resize: vertical;
}

.irm-field :focus-visible,
.irm-form__field :focus-visible {
  outline: 3px solid var(--w3l-color-accent);
  outline-offset: 2px;
}

.irm-form__help,
.irm-form__count {
  color: var(--w3l-color-muted);
}

/*
  Access code.

  One input, drawn as six slots, rather than six inputs. The look is the same and the behaviour is
  better: one-time-code autofill, paste, and backspace all keep working, and a screen reader
  announces one labelled field instead of six unlabelled ones. The frame clips the trailing
  letter-spacing that the input needs to keep the browser from scrolling at the sixth digit.
*/
.irm-code-frame {
  --w3l-code-slot: 2.75rem;
  --w3l-code-gap: 0.5rem;
  --w3l-code-width: calc(
    (var(--w3l-code-slot) * 6) + (var(--w3l-code-gap) * 5)
  );
  --w3l-code-spacing: calc(
    var(--w3l-code-slot) + var(--w3l-code-gap) - 1ch
  );

  box-sizing: border-box;
  inline-size: var(--w3l-code-width);
  max-inline-size: 100%;
  overflow: clip;
}

.irm-field .irm-code-frame:has(input:focus-visible) {
  outline: 3px solid var(--w3l-color-accent);
  outline-offset: 2px;
}

.irm-field input.irm-code {
  display: block;
  inline-size: calc(var(--w3l-code-width) + var(--w3l-code-spacing));
  max-inline-size: none;
  min-block-size: 3.25rem;
  padding: 0 0 0 calc((var(--w3l-code-slot) - 1ch) / 2);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--w3l-color-text) 8%, transparent) 0
      var(--w3l-code-slot),
    transparent var(--w3l-code-slot)
      calc(var(--w3l-code-slot) + var(--w3l-code-gap))
  );
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: var(--w3l-text-heading);
  line-height: 3.25rem;
  letter-spacing: var(--w3l-code-spacing);
}

.irm-field input.irm-code:focus-visible {
  outline: 0;
}

.irm-field input.irm-code::placeholder {
  color: color-mix(in srgb, var(--w3l-color-text) 38%, transparent);
}

.irm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--w3l-space-sm);
  align-items: center;
}

.irm-form-context {
  color: var(--w3l-color-muted);
}

section.irm-form-context {
  display: flex;
  flex-direction: column;
  gap: var(--w3l-space-sm);
}

.irm-form-context > h2,
.irm-form-context > summary {
  color: var(--w3l-color-muted);
  font-size: var(--w3l-text-title);
  font-weight: 650;
}

details.irm-form-context {
  padding-block: var(--w3l-space-md);
  border-block: 1px solid var(--w3l-color-border);
}

.irm-form-context > summary {
  cursor: pointer;
}

details.irm-form-context > .irm-prose {
  margin-block-start: var(--w3l-space-md);
}

.irm-page .irm-button {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.625rem 1rem;
  background: var(--w3l-color-accent);
  color: var(--w3l-color-on-accent);
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  transition:
    background-color 180ms cubic-bezier(0.25, 1, 0.5, 1),
    color 180ms cubic-bezier(0.25, 1, 0.5, 1),
    opacity 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.irm-page a.irm-button:hover {
  color: var(--w3l-color-on-accent);
}

.irm-page .irm-button--secondary {
  border-color: var(--w3l-color-accent);
  background: transparent;
  color: var(--w3l-color-accent);
}

.irm-page .irm-button--secondary:hover {
  background: color-mix(
    in srgb,
    var(--w3l-color-accent) 10%,
    transparent
  );
  color: var(--w3l-color-accent);
}

/* Submitting state: the round trip sends an email, so a second click sends a second code. */
.irm-page .irm-button[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.irm-auth-option__action {
  inline-size: 100%;
}

/* Quiet, non-action routes out: resend, change email, back to the campaign. */
.irm-page .irm-escape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--w3l-space-sm);
  margin: 0;
  font-size: var(--w3l-text-sm);
}

.irm-status {
  margin: 0;
  padding: var(--w3l-space-md);
  border: 1px solid var(--w3l-color-border);
  border-radius: var(--w3l-radius);
}

.validation-summary-errors,
.field-validation-error,
.irm-validation-summary {
  color: var(--w3l-color-danger);
  font-weight: 650;
}

.irm-validation-summary:empty {
  display: none;
}

.validation-summary-valid,
.field-validation-valid {
  display: none;
}

@media (min-width: 44rem) {
  .irm-authentication__options:has(.irm-auth-option + .irm-auth-option) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .irm-auth-option + .irm-auth-option {
    border-block-start: 0;
    border-inline-start: 1px solid var(--w3l-color-border);
    padding-inline-start: var(--w3l-space-lg);
  }

  .irm-auth-option:has(+ .irm-auth-option) {
    padding-inline-end: var(--w3l-space-lg);
  }
}

@media (max-width: 30rem) {
  .irm-actions,
  .irm-actions .irm-button {
    inline-size: 100%;
  }

  /* Six slots plus gaps no longer fit; shrink the cell rather than overflow the surface. */
  .irm-code-frame {
    --w3l-code-slot: 2.25rem;
    --w3l-code-gap: 0.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .irm-page .irm-button {
    transition: none;
  }
}