/* Fit to Serve display preferences. This control is first-party and local only. */
:root {
  --display-surface: #FAF6EF;
  --display-surface-soft: #F0E8D8;
  --display-ink: #1A1A1A;
  --display-muted: #3A4A1E;
  --display-border: #3A4A1E;
  --display-button: #3A4A1E;
  --display-button-hover: #2C3816;
  --display-on-button: #FFFFFF;
  --display-focus: #1A1A1A;
  --display-panel-width: min(22rem, calc(100vw - 2rem));
  --display-radius: 1rem;
  --display-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

.display-preferences {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 2147483638;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: .75rem;
  max-width: calc(100vw - 2rem);
  color: var(--display-ink);
  font-family: "Outfit", system-ui, sans-serif;
}
.display-preferences [hidden] { display: none !important; }
.display-launcher,
.display-panel button,
.display-panel select {
  min-height: 44px;
  border: 1px solid var(--display-border);
  border-radius: var(--display-radius);
  font: inherit;
}
.display-launcher {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: .35rem;
  border-radius: 50%;
  background: var(--display-button);
  color: var(--display-on-button);
  box-shadow: var(--display-shadow);
  cursor: pointer;
}
.display-launcher:hover { background: var(--display-button-hover); }
.display-launcher__icon { width: 1.8rem; height: 1.8rem; fill: currentColor; }
.display-panel {
  width: var(--display-panel-width);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
  border: 1px solid var(--display-border);
  border-radius: var(--display-radius);
  background: var(--display-surface);
  box-shadow: var(--display-shadow);
}
.display-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.display-heading h2 {
  margin: 0;
  color: var(--display-ink);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.75rem;
  letter-spacing: .08em;
  line-height: 1.1;
}
.display-panel button {
  padding: .5rem .75rem;
  background: var(--display-surface-soft);
  color: var(--display-ink);
  cursor: pointer;
}
.display-panel button:hover { text-decoration: underline; }
.display-field { display: grid; gap: .45rem; margin-bottom: .75rem; }
.display-field label { font-weight: 700; }
.display-panel select {
  width: 100%;
  padding: .5rem .75rem;
  background: var(--display-surface);
  color: var(--display-ink);
}
.display-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 44px;
  padding: .5rem 0;
  cursor: pointer;
  line-height: 1.5;
}
.display-check input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .1rem;
  accent-color: var(--display-button);
}
.display-panel p {
  margin: .5rem 0 1rem;
  color: var(--display-muted);
  font-size: .9rem;
  line-height: 1.55;
}
.display-panel #display-status { margin-bottom: 0; }
.display-preferences :focus-visible {
  outline: 3px solid var(--display-focus);
  outline-offset: 3px;
}

:root[data-display-text="larger"] { font-size: 112.5%; }
:root[data-display-text="largest"] { font-size: 125%; }
:root[data-display-motion="stop"] *,
:root[data-display-motion="stop"] *::before,
:root[data-display-motion="stop"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

:root[data-display-theme="contrast"] body,
:root[data-display-theme="contrast"] :where(main, section, header, footer, nav, article, aside, form) {
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
}
:root[data-display-theme="contrast"] .announcement {
  background: #000 !important;
  background-image: none !important;
}
:root[data-display-theme="contrast"] :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, span, small, strong, em) {
  color: #fff !important;
  text-shadow: none !important;
}
:root[data-display-theme="contrast"] a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}
:root[data-display-theme="contrast"] :where(button, select, input, textarea) {
  background: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}
:root[data-display-theme="contrast"] :where(.btn-primary, .btn-secondary, .nav-cta, .form-submit, .assessment-opt, .journey-tab) {
  background: #000 !important;
  border: 1px solid #fff !important;
  color: #ffff00 !important;
  box-shadow: none !important;
}
:root[data-display-theme="contrast"] img { filter: grayscale(1) contrast(1.35); }
:root[data-display-theme="contrast"] .display-panel { background: #000 !important; border-color: #fff !important; }
:root[data-display-theme="contrast"] .display-launcher { background: #000 !important; border-color: #fff !important; color: #fff !important; }

@media (max-width: 720px) {
  .display-preferences {
    left: max(.5rem, env(safe-area-inset-left));
    bottom: max(.5rem, env(safe-area-inset-bottom));
    max-width: calc(100vw - 1rem);
  }
}
@media (forced-colors: active) {
  .display-preferences, .display-preferences * { forced-color-adjust: auto; }
  .display-launcher, .display-panel, .display-panel button, .display-panel select {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
  }
  .display-preferences :focus-visible { outline-color: Highlight; }
}
@media print { .display-preferences { display: none; } }