/* Capture the existing editorial scale before changing any content tokens. */
.content-page:is(.article-reader, .about-reader) {
  --reader-base-xs: var(--type-xs);
  --reader-base-sm: var(--type-sm);
  --reader-base-reg: var(--type-reg);
  --reader-base-lg: var(--type-lg);
  --reader-base-xl: var(--type-xl);
  --reader-base-leading: var(--line-height);
}

.reader-text-size {
  display: none;
  --menu-active-shadow-offset: var(--menu-shadow-offset);
  --menu-active-shadow-blur: var(--menu-shadow-blur);
  --menu-active-shadow-opacity: var(--menu-shadow-opacity);
  --menu-active-outline-opacity: var(--menu-outline-opacity);
}

/* Available from tablet width upward, including larger laptop and desktop screens. */
@media screen and (min-width: 768px) {
  .article-reader :is(.post-content, .post-footnotes, .post-postscript),
  .about-reader .about-body {
    --type-xs: calc(var(--reader-base-xs) * var(--reader-text-scale, 1));
    --type-sm: calc(var(--reader-base-sm) * var(--reader-text-scale, 1));
    --type-reg: calc(var(--reader-base-reg) * var(--reader-text-scale, 1));
    --type-lg: calc(var(--reader-base-lg) * var(--reader-text-scale, 1));
    --type-xl: calc(var(--reader-base-xl) * var(--reader-text-scale, 1));
    --line-height: calc(var(--reader-base-leading) * var(--reader-text-scale, 1));
    font-size: var(--type-reg);
    line-height: var(--line-height);
  }

  /* These sit inside the article but are not part of the reading-size setting. */
  .article-reader :is(.reader-metadata, .reader-toc, .reader-floating, .post-hero-media) {
    --type-xs: var(--reader-base-xs);
    --type-sm: var(--reader-base-sm);
    --type-reg: var(--reader-base-reg);
    --type-lg: var(--reader-base-lg);
    --type-xl: var(--reader-base-xl);
    --line-height: var(--reader-base-leading);
    line-height: var(--line-height);
  }

  .article-reader .post-hero-media { font-size: var(--type-reg); }
  .article-reader .post-footnote-body { line-height: calc(18px * var(--reader-text-scale, 1)); }

  .reader-text-size:not([hidden]) {
    position: fixed;
    z-index: 22;
    right: 10px;
    bottom: calc(10px + var(--cookie-banner-height, 0px));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    place-items: center;
    /* Two touching circles fill the pill while retaining the category-pill height. */
    --reader-text-button-diameter: calc(var(--type-sm) + var(--button-small-padding-top) + var(--button-small-padding-bottom));
    width: calc(2 * var(--reader-text-button-diameter));
    padding: 0;
    border: 0;
    border-radius: var(--button-border-radius);
    color: var(--foreground-color);
    background: var(--background-color);
    box-shadow:
      inset 0 0 0 1px rgb(var(--foreground-rgb) / var(--menu-active-outline-opacity)),
      var(--menu-active-shadow-offset) var(--menu-active-shadow-offset) var(--menu-active-shadow-blur) 0 rgb(var(--foreground-rgb) / var(--menu-active-shadow-opacity));
  }

  .reader-text-size button {
    display: grid;
    place-items: center;
    width: var(--reader-text-button-diameter);
    height: var(--reader-text-button-diameter);
    padding: var(--button-small-padding-top) 0 var(--button-small-padding-bottom);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--type-sm);
    font-weight: var(--font-weight-medium, 400);
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
  }
  .reader-text-size button span { display: block; width: var(--type-sm); line-height: var(--type-sm); opacity: .5; }
  .reader-text-size button:not(:disabled):is(:hover, :focus-visible) span { opacity: 1; }
  .reader-text-size__decrease span { font-size: 75%; font-weight: 600; }
  .reader-text-size button:disabled { cursor: default; }
  .reader-text-size button:disabled span { opacity: .3; }
  .reader-text-size button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
  .reader-text-size__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-color-scheme: dark) {
  .reader-text-size {
    --menu-active-shadow-offset: var(--menu-shadow-offset-dark);
    --menu-active-shadow-blur: var(--menu-shadow-blur-dark);
    --menu-active-shadow-opacity: var(--menu-shadow-opacity-dark);
    --menu-active-outline-opacity: var(--menu-outline-opacity-dark);
  }
}