/* ==========================================================================
   display.css
   Reading preferences (assets/js/display.js), as on mehulbhatt.org, in this
   site's look. Loaded on every page, after the other stylesheets.

   Contents
     1. "Aa" button in the menu
     2. Preferences panel
     3. Line spacing
     4. Motion
     5. High contrast
     6. Dark appearance ("Aalto at night": spruce-dark page, birch text,
        light pine and lake colours)
     7. High-contrast mode of the operating system, and print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. "Aa" button: the last item of the menu, after a thin divider (desktop);
   in the open phone menu a labelled button instead
   -------------------------------------------------------------------------- */

.display-item {
  display: flex;
  align-items: center;
}

.display-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: 2rem;
  margin-left: .25rem;
  padding: 0 .1rem 0 .9rem;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  cursor: pointer;
}

.display-trigger-icon {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.04em;
}

.display-trigger:hover .display-trigger-icon,
.display-trigger:focus-visible .display-trigger-icon {
  color: var(--bar-current);
}

.display-trigger-tooltip {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 100;
  width: max-content;
  padding: .35rem .65rem;
  font-size: var(--fs-label);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  pointer-events: none;
  visibility: hidden;
}

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

.display-trigger-nav {
  display: none;
}

@media (max-width: 900px) {
  .display-item {
    display: none;
  }

  .display-trigger-nav {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: var(--tap);
    margin-top: .25rem;
    padding: 0;
    font: 600 var(--fs-small) var(--font);
    color: var(--ink);
    text-align: left;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    cursor: pointer;
  }

  .site-nav:not(.is-open) .display-trigger-nav {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   2. Preferences panel: a card like the figure viewer
   -------------------------------------------------------------------------- */

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.25rem);
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.display-dialog::backdrop {
  background: rgba(28, 29, 26, .45);
}

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

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

.display-eyebrow {
  margin: 0 2rem .35rem 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.display-dialog h2 {
  margin: 0 2rem 1rem 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
}

/* Text size */
.display-size-setting {
  padding: 1rem 0 1.25rem;
  border-top: 1px solid var(--line);
}

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

.display-size-heading label {
  font-size: .9375rem;
  font-weight: 700;
}

.display-size-heading output {
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.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;
  font-size: 1.2rem;
  color: inherit;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.display-size-controls button:hover:not(:disabled) {
  border-color: var(--accent);
}

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

.display-size-hint {
  margin: .25rem 0 0;
  font-size: .8125rem;
  color: var(--ink-soft);
}

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

/* Choice groups (Appearance, Line Spacing, Contrast, Motion): round choices as the site's tags */
.display-setting {
  min-width: 0;
  margin: 0;
  padding: 1rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

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

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

.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;
}

.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: 2.5rem;
  padding: .35rem .5rem;
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  cursor: pointer;
}

.display-options span:hover {
  border-color: var(--accent);
}

.display-options input:checked + span {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

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

/* Preview */
.display-preview {
  margin: .25rem 0 1.5rem;
  padding: .75rem 1rem;
  background: var(--tray-bg);
  border-radius: 10px;
}

.display-preview h3 {
  margin: 0 0 .4rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.display-preview p {
  margin: 0;
  font-size: 1rem;
  line-height: var(--leading);
}

/* 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: 1px solid var(--line);
}

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

.display-done {
  min-height: 2.5rem;
  padding: 0 1.4rem;
  font: 600 var(--fs-label) var(--font);
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--pill);
  cursor: pointer;
}

.display-status {
  margin: .75rem 0 0;
  font-size: .8125rem;
  color: var(--ink-soft);
}

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


/* --------------------------------------------------------------------------
   3. Line spacing (the reading text's --leading, base.css)
   -------------------------------------------------------------------------- */

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

:is([data-display-spacing="compact"], [data-display-spacing="relaxed"]) :is(main p, main li, main blockquote) {
  line-height: var(--leading);
}


/* --------------------------------------------------------------------------
   4. Motion: "Reduced" switches off smooth scrolling, transitions and the
   looping video ("Follow Device" uses the system setting)
   -------------------------------------------------------------------------- */

[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 on white, links underlined, a deep pine for details
   -------------------------------------------------------------------------- */

[data-display-contrast="high"] {
  --paper: #ffffff;
  --ink: #000000;
  --ink-soft: #000000;
  --line: #555555;
  --accent: #173826;                   /* very deep pine: 13:1 on white */
  --link: #0b3a63;
  --link-mark: #0b3a63;
  --tray-bg: #f1f1f1;
  --img-mute: 1;
  --footer-watermark: 0;
}

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

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


/* --------------------------------------------------------------------------
   6. Dark appearance (screen only: printed pages stay light)
   "Aalto at night": a deep spruce page, birch-white text, the pine and lake
   colours lightened so they keep their contrast (WCAG AA and better):
   ink 14.3:1, ink-soft 9.0:1, pine 8.8:1, lake 9.3:1 on the page; footer 10.1:1.
   -------------------------------------------------------------------------- */

@media screen {

  :root {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #151a17;                  /* page: deep spruce */
    --ink: #ebe7dd;                    /* text: birch white */
    --ink-soft: #bdb9ae;
    --line: rgba(235, 231, 221, .18);
    --accent: #8cc3a2;                 /* light pine */
    --accent-ink: #10221a;             /* dark text on the light pine */
    --link: #8ec3e6;                   /* light lake blue */
    --link-mark: #8ec3e6;
    --tray-bg: #1f2621;
    --pop-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
    --img-mute: .55;
    --footer-bg: #1d3a2a;              /* footer: deep pine */
    --footer-ink: #ebe7dd;
    --footer-line: rgba(235, 231, 221, .18);
    --footer-button-bg: #ebe7dd;
    --footer-button-ink: #1d3a2a;
  }

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

  /* pictures of papers and posters keep their white paper, framed softly */
  [data-theme="dark"] :is(.fig img, .lightbox-img) {
    border-color: transparent;
  }
}


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

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

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

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