/* ==========================================================================
   display.css
   Reading preferences (see assets/js/display.js), as on the reference site.
   Load on every page, after the other stylesheets.

   Contents
     1. "Aa" button in the header
     2. Preferences panel
     3. Line spacing
     4. Motion
     5. High contrast
     6. Dark appearance
     7. High-contrast mode of the operating system, and print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. "Aa" button in the header (with a small tooltip on hover / focus)
   -------------------------------------------------------------------------- */

.display-trigger {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: .45rem;
  min-width: var(--tap);
  min-height: var(--tap);
  margin-left: .75rem;
  padding: .35rem .1rem .35rem 1rem;
  font: inherit;
  font-size: .75rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-left: var(--rule);
  border-radius: 0;
  cursor: pointer;
}

.display-trigger-icon {
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.06em;
  color: var(--ink);
}

.display-trigger:hover .display-trigger-icon {
  color: var(--accent);
}

.display-trigger-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  width: max-content;
  max-width: min(15rem, calc(100vw - 2rem));
  padding: .4rem .65rem;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: var(--rule);
  border-radius: 2px;
  pointer-events: none;
  visibility: hidden;
}

.display-trigger:hover .display-trigger-tooltip,
.display-trigger:focus-visible .display-trigger-tooltip {
  visibility: visible;
}

/* Desktop: the button follows the last menu item, after a thin divider */
.site-nav > .display-trigger {
  margin-left: .25rem;
}

/* Tablet and phone: the menu folds into "Menu"; the labelled button inside
   the open menu takes over (as the logo does on phones) */
.display-trigger-nav {
  display: none;
  color: var(--ink-soft);
  background: none;
}

@media (max-width: 860px) {
  .display-trigger {
    display: none;
  }

  .display-trigger-nav {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: var(--tap);
    padding: 0;
    font-family: var(--heading);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--ink-soft);
    text-align: left;
    background: none;
    border: 0;
    border-bottom: var(--rule);
    cursor: pointer;
  }
}


/* --------------------------------------------------------------------------
   2. Preferences panel
   -------------------------------------------------------------------------- */

html.display-open {
  overflow: hidden;                    /* the page doesn't scroll behind the open panel */
}

.display-dialog {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  color: var(--ink);
  background: var(--paper);
  border: var(--rule);
  border-radius: 8px;
}

.display-dialog::backdrop {
  background: rgba(9, 31, 41, .58);
}

.display-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: var(--tap);
  height: var(--tap);
  font-size: 1.8rem;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.display-eyebrow {
  margin: 0 2rem .5rem 0;
  font-family: var(--heading);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.display-dialog h2 {
  margin: 0 2rem .75rem 0;
  font-family: var(--heading);
  font-size: 1.5rem;
  letter-spacing: -.035em;
}

/* Text size */
.display-size-setting {
  padding-bottom: 1.25rem;
}

.display-size-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.display-size-heading label {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
}

.display-size-heading output {
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.display-size-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
}

.display-size-controls input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  accent-color: var(--accent);
}

.display-size-controls button {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  font: inherit;
  color: inherit;
  background: transparent;
  border: var(--rule);
  border-radius: 50%;
  cursor: pointer;
}

.display-size-controls button:disabled {
  opacity: .35;
  cursor: default;
}

.display-size-hint {
  margin: .25rem 0 0;
  font-size: .75rem;
}

.display-contrast-note {
  margin: -.4rem 0 1.25rem;
}

/* Choice groups (Appearance, Line Spacing, Contrast, Motion) */
.display-setting {
  min-width: 0;
  margin: 0;
  padding: 1rem 0;
  border: 0;
  border-top: var(--rule);
}

.display-setting legend {
  padding: 0 .5rem 0 0;
  font-size: .9rem;
  font-weight: 600;
}

.display-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.display-setting[data-setting="appearance"] .display-options,
.display-setting[data-setting="spacing"] .display-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.display-options label {
  position: relative;
  display: block;
  margin: 0;
}

.display-options input {                /* the real radio button: hidden, still keyboard-usable */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.display-options span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: .4rem .5rem;
  font-size: .8rem;
  text-align: center;
  border: var(--rule);
  border-radius: 2px;
  cursor: pointer;
}

.display-options input:checked + span {
  font-weight: 600;
  color: var(--on-highlight);
  background: var(--highlight);
  border-color: var(--ink);
}

.display-options input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Preview */
.display-preview {
  margin: .25rem 0 1.5rem;
  padding: .25rem 1rem;
  border-left: 2px solid var(--highlight);
}

.display-preview h3 {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.display-preview p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}

/* Footer: Reset to Defaults · Done */
.display-panel-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: 1rem;
  border-top: var(--rule);
}

.display-reset {
  min-height: var(--tap);
  padding: .5rem 0;
  font: inherit;
  font-size: .8rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.display-done {
  min-height: var(--tap);
  padding: .5rem 1.25rem;
  font: inherit;
  font-size: .85rem;
  color: #fff;
  background: var(--strong-background, var(--ink));
  border: 1px solid var(--ink);
  cursor: pointer;
}

.display-status {
  margin: .75rem 0 0;
  font-size: .8rem;
}

.display-status:empty {
  display: none;
}


/* --------------------------------------------------------------------------
   3. Line spacing
   -------------------------------------------------------------------------- */

[data-display-spacing="compact"] { --reading-line-height: 1.4; }
[data-display-spacing="relaxed"] { --reading-line-height: 1.9; }

:is([data-display-spacing="compact"], [data-display-spacing="relaxed"])
  :is(main p, main li, main td, main th, main address, .ev-text, .grant-text, .display-preview p) {
  line-height: var(--reading-line-height);
}


/* --------------------------------------------------------------------------
   4. Motion: "Reduced" switches off smooth scrolling and transitions
   ("Follow Device" uses the system setting, see base.css section 5)
   -------------------------------------------------------------------------- */

[data-display-motion="reduced"],
[data-display-motion="reduced"] *,
[data-display-motion="reduced"] *::before,
[data-display-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}


/* --------------------------------------------------------------------------
   5. High contrast: black text on white, links underlined, the yellow labels
   kept (with black text) so the page structure stays recognisable
   -------------------------------------------------------------------------- */

[data-display-contrast="high"] {
  --ink: #000;
  --ink-soft: #000;
  --paper: #fff;
  --line: #555;
  --accent: #0b3a63;                   /* very dark blue: 11:1 on white */
  --accent-tint: #e4edf5;
  --strong-background: #0b3a63;
}

[data-display-contrast="high"] a {
  text-decoration: underline !important;
}

[data-display-contrast="high"] :focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 3px;
}

/* Logos in their own colours, at full strength */
[data-display-contrast="high"] :is(.logos img, .grant-logos img) {
  filter: none;
  opacity: 1;
}


/* --------------------------------------------------------------------------
   6. Dark appearance (screen only: printed pages stay light)
   -------------------------------------------------------------------------- */

@media screen {

  :root {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e7edf2;                    /* main text: 14.6:1 on the dark page */
    --ink-soft: #b2bfca;               /* secondary text: 9.2:1 */
    --paper: #0f1a22;                  /* page background: deep blue-black */
    --line: rgba(231, 237, 242, .18);
    --shadow: rgba(0, 0, 0, .35);
    --shadow-strong: rgba(0, 0, 0, .5);
    --accent: #8fc1e6;                 /* links: light Baltic blue, 9.1:1 */
    --accent-tint: rgba(143, 193, 230, .14);
    --highlight: #ecd68c;              /* the yellow labels, a little softer */
    --highlight-strong: #e3c86a;
    --strong-background: #24425a;
  }

  /* Dark text on the yellow labels */
  [data-theme="dark"] :is(.disclosure-title, .ev-banner, .grant-category),
  [data-theme="dark"] :is(.disclosure-title, .ev-banner, .grant-category) * {
    color: var(--on-highlight);
  }

  /* Logos have white backgrounds: show them on a light plate */
  [data-theme="dark"] :is(.header-logo img, .nav-logo img, .logos img, .grant-logos img) {
    padding: 4px 6px;
    background: #f6f7f5;
    border-radius: 3px;
    mix-blend-mode: normal;
  }

  /* Publication tags: dark text when the blue tag is pointed at */
  [data-theme="dark"] .pub-links a:hover {
    color: #0f1a22;
  }

  [data-theme="dark"] .display-dialog::backdrop {
    background: rgba(0, 0, 0, .72);
  }
}


/* --------------------------------------------------------------------------
   7. High-contrast mode of the operating system, and print
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .display-dialog,
  .display-trigger {
    border: 1px solid CanvasText;
  }

  .display-dialog::backdrop {
    background: Canvas;
    opacity: .8;
  }

  .display-options input:checked + span {
    outline: 2px solid Highlight;
  }
}

@media print {
  .display-trigger,
  .display-trigger-nav,
  .display-dialog {
    display: none !important;
  }
}