/* Display switch */
.header-account-controls {
  display: flex;
  align-items: center;
  gap: .55rem;
}
#display-mode-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--gold);
  border-radius: 50%;
}
#display-mode-toggle svg {
  width: 1.45rem;
  height: 1.45rem;
}
#display-mode-toggle[aria-pressed="true"] {
  color: var(--on-gold);
  background: var(--gold);
  border-color: var(--gold);
}
@media (max-width: 48rem) {
  .header-account-controls {
    margin-inline-start: auto;
  }
  .header-data {
    flex-basis: 5rem;
  }
}

/* Desert view */
:root[data-display-mode="desert"] {
  --bg: #17120e;
  --panel: #2b2119;
  --line: #957756;
  --control-bg: #3c2d20;
  --control-hover: #523c27;
  --gold: #f0bf72;
  --metric-bg: #332518;
}
[data-display-mode="desert"] body {
  background:
    radial-gradient(ellipse at 82% 0%, #392619 0%, transparent 37rem),
    radial-gradient(ellipse at 12% 23rem, #261b14 0%, transparent 32rem),
    var(--bg);
}
[data-display-mode="desert"] body > .site-header {
  --header-fade: clamp(1rem, 6vw, 5rem);
  border-block-start: 3px solid transparent;
  border-block-end-color: transparent;
  background:
    linear-gradient(90deg, transparent, #d79a55 var(--header-fade), #d79a55 calc(100% - var(--header-fade)), transparent) top / 100% 3px no-repeat,
    linear-gradient(90deg, transparent, var(--line) var(--header-fade), var(--line) calc(100% - var(--header-fade)), transparent) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, #261b14 var(--header-fade), #322319 56%, #241b14 calc(100% - var(--header-fade)), transparent);
  background-origin: border-box;
}
[data-display-mode="desert"] .brand-home {
  font-weight: 750;
  letter-spacing: .1em;
}
[data-display-mode="desert"] .brand-home b {
  font-weight: 750;
}
[data-display-mode="desert"] .tool-navigation {
  background: linear-gradient(158deg, #312418, #251b15);
}
[data-display-mode="desert"] #calculator-navigation button[aria-current="page"] {
  background: linear-gradient(105deg, #503723, #362719);
  box-shadow: inset 3px 0 var(--gold);
}
[data-display-mode="desert"] :is(.tool-sidebar, .tool-output, .tracker-view) .panel {
  background: linear-gradient(150deg, #30241a, #271e17);
  box-shadow: 0 .3rem .9rem #110d0966;
}
[data-display-mode="desert"] .tool-output .metric {
  background: linear-gradient(155deg, #493222, #302318);
  border-top: 2px solid #d59b5b;
}
[data-display-mode="desert"] .live-tracker .tracker-value {
  color: var(--gold);
  font-weight: 700;
}

/* High-contrast view */
:root[data-display-mode="contrast"] {
  color-scheme: light;
  font-size: 112.5%;
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #101828;
  --muted: #243247;
  --line: #54647a;
  --gold: #153e75;
  --on-gold: #ffffff;
  --gold-hover: #0b2e5b;
  --green: #175533;
  --red: #8e1b26;
  --control-border: #47566b;
  --control-bg: #edf3fa;
  --control-hover: #dce9f8;
  --input-bg: #ffffff;
  --metric-bg: #eef4fb;
  --notice-bg: #fff4d9;
  --notice-text: #503200;
  --error-bg: #ffeded;
  --good-bg: #eaf6ed;
  --table-line: #68798e;
  --category-bg: #e7eef7;
  --planner-bg: #ffffff;
}
[data-display-mode="contrast"] body {
  font-size: 1rem;
  line-height: 1.65;
}
[data-display-mode="contrast"] :is(.panel, .metric, .tool-navigation, .account-menu-content) {
  box-shadow: none;
}
[data-display-mode="contrast"] :is(.hint, small, .metric small, .metric span, .table-scroll table) {
  font-size: .9rem;
}
[data-display-mode="contrast"] .tool-output .metric strong {
  color: var(--text);
  font-weight: 750;
}
[data-display-mode="contrast"] .section-title h2 {
  letter-spacing: normal;
}
[data-display-mode="contrast"] #calculator-navigation button[aria-current="page"] {
  color: var(--on-gold);
  background: var(--gold);
  border-color: var(--gold);
}
[data-display-mode="contrast"] select {
  appearance: auto;
  -webkit-appearance: auto;
  background-image: none;
  padding-inline-end: .75rem;
}
[data-display-mode="contrast"] :focus-visible {
  outline: 3px solid #102f5b;
  outline-offset: 4px;
}
[data-display-mode="contrast"] .tracker-bar meter::-webkit-meter-bar {
  background: #e6eef8;
}
[data-display-mode="contrast"] .tracker-bar meter::-webkit-meter-optimum-value {
  background: var(--gold);
}
[data-display-mode="contrast"] .tracker-bar meter::-moz-meter-bar {
  background: var(--gold);
}
@media (forced-colors: active) {
  [data-display-mode="contrast"] :focus-visible {
    outline-color: Highlight;
  }
}

/* Pointer navigation can move focus to a destination without outlining it. */
[data-display-mode="desert"] [tabindex="-1"]:focus:not(:focus-visible),
[data-display-mode="desert"] .footer-affiliation:target:not(:focus-visible) {
  outline: none;
}

:root[data-display-mode] { background-color: var(--bg); }