/* ==========================================================================
   Reviewer chrome. Not part of the design and not for the build.
   Two drawers off the right edge of the window, each opened by a tab:
   Review, the page list, and Try fonts, the switches.
   ========================================================================== */
/* The drawer. A popover, so it sits on the top layer and closes when the
   page is clicked, with no script of its own. It slides in from the
   right. Native controls take the dark scheme so they match the ground. */
.review {
  position: fixed;
  inset: 0 0 0 auto;
  inline-size: min(22rem, 100%);
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: var(--space-m);
  border: 0;
  overflow: auto;
  display: none;
  align-content: start;
  gap: var(--space-m);
  background: var(--base);
  color: var(--white);
  color-scheme: dark;
  font-size: var(--text-s);
  translate: 100% 0;
  transition: translate var(--transition), display var(--transition) allow-discrete, overlay var(--transition) allow-discrete;

  &:popover-open {
    display: grid;
    translate: 0 0;
    @starting-style { translate: 100% 0; }
  }

  & a { color: inherit; }
  & p { margin: 0; }
  & label { display: flex; align-items: center; gap: var(--space-xs); }
  & label[hidden] { display: none; }
  & select, & input[type="range"] { flex: 1; min-inline-size: 0; }
}

/* Media query, for the reader's own setting: no motion asked for, no slide. */
@media (prefers-reduced-motion: reduce) {
  .review { transition: none; }
}

.review__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-s);
}

.review__title { font-weight: var(--heading-font-weight); }

.review__note {
  font-size: var(--text-xs);
  color: oklch(from var(--white) l c h / 0.7);
}

.review__group {
  display: grid;
  gap: var(--space-xs);
  padding-block-start: var(--space-s);
  border-block-start: var(--border-width) solid oklch(from var(--white) l c h / 0.2);
}

.review__label {
  font-size: var(--text-xs);
  font-weight: var(--heading-font-weight);
  color: oklch(from var(--white) l c h / 0.7);
}

.review__pages {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;

  & a[aria-current] { font-weight: var(--heading-font-weight); text-decoration: none; }
  & a[aria-current]::before { content: "\2192\00a0"; }
}

/* The two buttons: the tab that opens the drawer, fixed at the foot of the
   window, and the close inside it. Both ink on white or white on ink, and
   at least 48 tall. */
.review-open,
.review__close {
  min-block-size: 3rem;
  padding: var(--space-xs) var(--space-s);
  border: var(--border-width) solid var(--white);
  font: inherit;
  font-weight: var(--heading-font-weight);
  cursor: pointer;
}

.review-open {
  position: fixed;
  inset-block-end: var(--space-s);
  inset-inline-end: var(--space-s);
  z-index: 10;
  background: var(--base);
  color: var(--white);
  border-color: var(--base);
}

.review__close {
  background: transparent;
  color: inherit;
  min-block-size: 0;
  padding: 0 var(--space-xs);
  border: 0;
  text-decoration: underline;
}

/* Puts every switch back to its default and forgets the stored ones.
   Last in the switches, drawn as a button on the drawer's dark ground. */
.review__reset {
  justify-self: stretch;
  margin-block-start: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--heading-font-weight);
  cursor: pointer;

  &:hover, &:focus-visible { background: var(--white); color: var(--black); }
}

/* A caption between two states of a component on one sheet. */
.review-caption {
  inline-size: auto;
  max-inline-size: none;
  padding: var(--space-xs) var(--gutter);
  background: var(--base);
  color: var(--white);
  font-size: var(--text-xs);
}

/* The chrome page shows one header several times, so each stands in a
   wrapper. The framework pads only a header that is the body's child;
   this gives the wrapped ones the same. The narrow wrapper holds the
   header in less room than the row of items needs, so the Menu state
   can be seen on a wide screen. */
.chrome-state {
  & > header { padding-block: var(--space-xs); padding-inline: var(--gutter); }
}
.chrome-state--narrow { inline-size: min(100%, 60rem); }

/* Where the copy came from, 09/10/2026. Reviewer chrome: a marker after each
   drafted passage, shown only when the drawer's switch is on, and a note it
   opens beneath the passage. Set in the text face at the small size whatever
   the passage is, so a marker in the title does not shout. */
.cite,
.cite__note { display: none; }

[data-sources] {
  & .cite {
    /* Above a door's link, which covers the door. */
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
    padding: 0 var(--space-xs);
    border: var(--border-width) dashed var(--border-color-dark);
    background: var(--white);
    color: var(--text-dark);
    font-family: var(--text-font-family);
    font-size: var(--text-xs);
    font-weight: var(--heading-font-weight);
    letter-spacing: 0;
    line-height: var(--text-line-height);
    cursor: pointer;

    &[aria-expanded="true"] { background: var(--text-dark); color: var(--white); }
  }

  & .cite__note:not([hidden]) {
    position: relative;
    z-index: 1;
    display: block;
    margin-block-start: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    border-inline-start: var(--border-width) dashed var(--border-color-dark);
    background: var(--white);
    color: var(--text-dark);
    font-family: var(--text-font-family);
    font-size: var(--text-s);
    font-weight: var(--text-font-weight);
    letter-spacing: 0;
    line-height: var(--text-line-height);
    max-inline-size: var(--text-max-width);
  }
}