/* ==========================================================================
   Appearance menu and header actions (driven by docs/javascripts/appearance.js).

   The header's palette button opens the same menu as the Qualytics app:
   Theme, Font size, Contrast, plus Text spacing. A mail button beside it
   writes to support. The choices live on <html> (set before the first paint
   in overrides/main.html):
   - data-q-font-size marks a font size other than 100%, and the inline
     --q-font-user property holds it as a factor (1.15 for 115%). It scales
     the root font size, so every rem-based size in the theme and in these
     stylesheets follows it;
   - data-q-contrast swaps in the stronger tokens defined in colors.css;
   - data-q-spacing marks a line spacing other than single, and the inline
     --q-spacing-user property holds the multiple (1.5 for one and a half);
   - data-q-align sets the alignment of running text.
   All of them apply on screen only, so printed pages keep the defaults.
   ========================================================================== */

/* The theme's own light/dark toggle gives way to the palette button. The
   palette inputs stay in the page: the Theme tiles select them. */
.q-appearance-js .md-header__option[data-md-component="palette"] {
  display: none;
}

/* Header icon buttons get the app's round hover, which also marks the
   palette button while its menu is open. The header is black in the light
   scheme and white in the dark one, so the circle is drawn in the inverted
   color (white, then dark gray) to stand out from it. */
.md-header .md-header__button.md-icon {
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.md-header .md-header__button.md-icon:hover,
.md-header .q-appearance__toggle[aria-expanded="true"] {
  background-color: color-mix(in srgb, var(--q-inverted) 18%, transparent);
  opacity: 1;
}

/* Font size: the theme's three root sizes, each times the reader's scale. */
html {
  font-size: calc(125% * var(--q-font-scale, 1));
}

@media screen and (min-width: 100em) {
  html {
    font-size: calc(137.5% * var(--q-font-scale, 1));
  }
}

@media screen and (min-width: 125em) {
  html {
    font-size: calc(150% * var(--q-font-scale, 1));
  }
}

@media screen {
  html[data-q-font-size] {
    --q-font-scale: var(--q-font-user, 1);
  }

  /* The theme only folds the sidebars away at fixed viewport widths, which a
     larger root font does not change (browser zoom does). So the sidebars and
     the header search keep their 100% widths, as extra.css and the theme set
     them: the text in them grows and wraps, and the content column keeps its
     room instead of being squeezed. Below 76.25em the navigation is an
     off-canvas drawer, which scales with the text, and below 60em the table
     of contents is a floating button, not a column. */
  @media (min-width: 76.25em) {
    html[data-q-font-size] .md-sidebar--primary,
    html[data-q-font-size] .md-sidebar--secondary {
      width: calc(14rem / var(--q-font-scale));
    }

    html[data-q-font-size] .md-header__inner > .md-search .md-search__button {
      width: calc(24rem / var(--q-font-scale));
    }
  }

  @media (min-width: 60em) and (max-width: 76.234375em) {
    html[data-q-font-size] .md-sidebar--secondary {
      width: calc(12.1rem / var(--q-font-scale));
    }
  }

  /* Line spacing, on the page's article only (the header has typeset blocks
     of its own): a multiple of the theme's line height (1.8), as single to
     double spacing in a word processor. The space between paragraphs and
     list items grows in the same proportion. */
  html[data-q-spacing] .md-content .md-typeset {
    line-height: calc(1.8 * var(--q-spacing-user));
  }

  html[data-q-spacing] .md-content .md-typeset :is(p, ul, ol, dl, blockquote) {
    margin-block: calc(1em * var(--q-spacing-user));
  }

  html[data-q-spacing] .md-content .md-typeset li {
    margin-bottom: calc(0.5em * var(--q-spacing-user));
  }

  /* Text alignment: running text only. Headings, tables, code and card
     grids keep their own alignment. Centered text leaves lists alone, since
     their bullets and numbers stay at the left edge. Justified text
     hyphenates, so its word gaps stay even. */
  [data-q-align="center"] .md-typeset :is(p, dd, blockquote):not(.grid *, table *, li *) {
    text-align: center;
  }

  [data-q-align="justify"] .md-typeset :is(p, li, dd, blockquote):not(.grid *, table *) {
    text-align: justify;
    hyphens: auto;
  }
}

/* --------------------------------------------------------------------------
   Menu

   The menu keeps the same size whatever font size is picked, so the slider
   stays put under the pointer while it is dragged: its font size undoes the
   reader's scale, and every length inside it is in em.
   -------------------------------------------------------------------------- */

.q-appearance__menu {
  position: fixed;
  z-index: 10;
  box-sizing: border-box;
  width: 25em;
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 0.333em 0;
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-md);
  background: var(--q-surface);
  box-shadow: var(--q-shadow-3);
  color: var(--q-fg);
  font-size: calc(0.6rem / var(--q-font-scale, 1));
  line-height: 1.4;
}

.q-appearance__menu[hidden] {
  display: none;
}

/* The menu sits on the page body, outside the header that print hides. */
@media print {
  .q-appearance__menu {
    display: none !important;
  }
}

.q-appearance__section {
  padding: 1em 1.333em 1.167em;
}

.q-appearance__section + .q-appearance__section {
  border-top: 1px solid var(--q-border);
}

.q-appearance__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 2.333em;
  margin-bottom: 1em;
  color: var(--q-fg-muted);
  font-weight: var(--q-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.q-appearance__tiles {
  display: flex;
  gap: 0.667em;
}

/* Tiles and the font size buttons share the app's bordered tile look. */
.q-appearance__tile,
.q-appearance__step {
  display: flex;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 2px solid var(--q-border);
  border-radius: var(--q-radius-md);
  background: var(--q-surface-2);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.q-appearance__tile:hover,
.q-appearance__step:hover:not(:disabled) {
  border-color: var(--q-border-strong);
}

.q-appearance__tile:focus-visible,
.q-appearance__step:focus-visible,
.q-appearance__reset:focus-visible,
.q-appearance__range:focus-visible,
.q-appearance__percent:focus-within {
  outline: 2px solid var(--q-primary);
  outline-offset: 2px;
}

.q-appearance__tile {
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.q-appearance__tile[aria-checked="true"] {
  border-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 6%, var(--q-surface));
}

.q-appearance__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4em;
  border-bottom: 1px solid var(--q-border);
  background: var(--q-mild);
}

.q-appearance__tile[aria-checked="true"] .q-appearance__preview {
  border-bottom-color: color-mix(in srgb, var(--q-primary) 30%, transparent);
  background: color-mix(in srgb, var(--q-primary) 10%, transparent);
}

/* On a narrow phone the icon wraps above the label instead of the label
   being cut. */
.q-appearance__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25em 0.5em;
  padding: 0.5em 0.333em;
  font-weight: 500;
  text-align: center;
}

.q-appearance__tile[aria-checked="true"] .q-appearance__name {
  font-weight: var(--q-fw-bold);
}

.q-appearance__name svg {
  flex-shrink: 0;
  width: 1.167em;
  height: 1.167em;
  fill: var(--q-fg-muted);
}

/* Previews: a miniature page with a heading bar and two text lines, drawn
   in each option's colors through --sw-surface, --sw-bar and --sw-line. */
.q-appearance__swatch {
  display: flex;
  flex-direction: column;
  gap: 0.333em;
  box-sizing: border-box;
  width: 4em;
  height: 2.5em;
  padding: 0.417em;
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-sm);
  background: var(--sw-surface);
}

.q-appearance__swatch > span {
  height: 0.25em;
  border-radius: 1px;
  background: var(--sw-line);
}

.q-appearance__swatch > span:nth-child(1) {
  width: 60%;
  height: 0.333em;
  background: var(--sw-bar);
}

.q-appearance__swatch > span:nth-child(2) { width: 90%; }
.q-appearance__swatch > span:nth-child(3) { width: 75%; }

.q-appearance__swatch--dark {
  --sw-surface: var(--q-swatch-dark-surface);
  --sw-bar: var(--q-primary);
  --sw-line: var(--q-swatch-dark-line);
}

.q-appearance__swatch--light {
  --sw-surface: var(--q-swatch-light-surface);
  --sw-bar: var(--q-primary);
  --sw-line: var(--q-swatch-light-line);
}

/* System: the dark miniature's left half joined to the light one's right
   half. The lines are sized to the swatch's inner width so their split
   lands on the same midline. */
.q-appearance__swatch--system {
  --sw-bar: var(--q-primary);
  background: linear-gradient(90deg, var(--q-swatch-dark-surface) 50%, var(--q-swatch-light-surface) 50%);
}

.q-appearance__swatch--system > span:not(:first-child) {
  background: linear-gradient(90deg, var(--q-swatch-dark-line) 50%, var(--q-swatch-light-line) 50%) 0 0 / 3.167em 100%;
}

.q-appearance__swatch--contrast-default {
  --sw-surface: var(--q-surface);
  --sw-bar: color-mix(in srgb, var(--q-lighter) 60%, transparent);
  --sw-line: color-mix(in srgb, var(--q-lighter) 30%, transparent);
}

.q-appearance__swatch--contrast-high {
  --sw-surface: var(--q-surface);
  --sw-bar: var(--q-normal);
  --sw-line: color-mix(in srgb, var(--q-normal) 70%, transparent);
}

.q-appearance__swatch[class*="--align-"] {
  --sw-surface: var(--q-surface);
  --sw-line: color-mix(in srgb, var(--q-lighter) 45%, transparent);
  --sw-bar: var(--sw-line);
}

.q-appearance__swatch[class*="--align-"] > span:nth-child(1) { height: 0.25em; }
.q-appearance__swatch--align-left > span { align-self: flex-start; }
.q-appearance__swatch--align-center > span { align-self: center; }
.q-appearance__swatch--align-justify > span:nth-child(n) { width: 100%; }

/* Font size and line spacing: the value box and Reset in the label row,
   then decrease, the slider and increase. */
.q-appearance__actions {
  display: flex;
  align-items: center;
  gap: 0.833em;
}

.q-appearance__percent {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 2.333em;
  padding: 0 0.583em;
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-sm);
  background: var(--q-surface-2);
  color: var(--q-fg);
  font-weight: var(--q-fw-medium);
  letter-spacing: normal;
  cursor: text;
}

.q-appearance__number {
  width: 3ch;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}

.q-appearance__number--decimal {
  width: 4ch;
}

.q-appearance__number:focus {
  outline: none;
}

.q-appearance__number::-webkit-inner-spin-button,
.q-appearance__number::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.q-appearance__slider {
  display: flex;
  align-items: center;
  gap: 0.667em;
}

.q-appearance__step {
  flex: 0 0 3.167em;
  align-items: center;
  justify-content: center;
  height: 3.167em;
}

.q-appearance__step svg {
  width: 1.833em;
  height: 1.833em;
  fill: currentcolor;
}

.q-appearance__step:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.q-appearance__range {
  flex: 1;
  min-width: 0;
  margin: 0;
  accent-color: var(--q-primary);
  cursor: pointer;
}

.q-appearance__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.333em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--q-fg);
  font: inherit;
  font-weight: var(--q-fw-medium);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.q-appearance__reset svg {
  width: 1.167em;
  height: 1.167em;
  fill: currentcolor;
}

.q-appearance__reset:disabled {
  cursor: default;
  opacity: 0.4;
}

/* Screen reader announcement of the new font size. */
.q-appearance__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}