/* Page controls, horizon handle and type shelf. */
.controls {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  position: fixed;
  right: 14px;
  top: var(--ctl);
  /* one column, never wrapped: the families fold (ControlGroup), and the horizon stops where the folded
       stack still ends above the bottom edge (HorizonControl hzMax), so no button ever leaves the page */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
  overflow: visible; /* era menu and hover labels live left of the box */
}
.controls .horizon-control {
  position: fixed;
  right: 14px;
  top: calc(var(--hline) - 17px);
}
/* the horizon control is dragged: no scrolling or text selection under the finger */
.controls .horizon-control {
  touch-action: none;
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
}
.controls .horizon-control {
  border: 0;
  border-radius: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* the right end stays pinned as the stroke grows left */
}
.home-jump {
  position: relative;
  display: flex;
}
.folder-jump {
  position: absolute;
  /* flush against the home button, the 10px air moved inside as padding: the hand can
       travel from the button onto the stack without the reveal dropping under it */
  right: 100%;
  padding-right: 10px;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* the jumps rest hidden: hovering the home button reveals them */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.home-jump:hover .folder-jump,
.folder-jump:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.controls .folder-jump-button {
  width: auto;
  height: 34px;
  padding: 0 13px;
  border-radius: 17px;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: 9.5pt;
  letter-spacing: 0.04em;
  color: var(--dim);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.controls .folder-jump-button:hover,
.controls .folder-jump-button.on {
  color: var(--ink);
}
.horizon-line {
  display: block;
  width: 34px;
  flex: none; /* do not shrink the extending line back into its 34px handle */
  height: 1px;
  background: var(--hairline);
  transition:
    width 0.26s ease,
    background 0.26s ease,
    box-shadow 0.26s ease;
} /* the rings' width and stroke */
.controls .horizon-control:hover .horizon-line,
.controls .horizon-control:focus-visible .horizon-line {
  width: 43px;
  background: var(--ink);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ink) 40%, transparent);
} /* as a ring turns ink on hover */
.controls .horizon-control.on .horizon-line {
  background: var(--ink);
}
:root.ui-awake .controls,
:root.horizon-drag .controls {
  opacity: 1;
  pointer-events: auto;
}

/* the plumb: the horizon's vertical companion - the pair is one set. Its line hangs from
   the top edge of the page down 34px, at the main text's right edge, where the width
   grip has always lived. Awake with the controls, hidden again at rest; the plumb is
   itself the width grip, and it shines ink on hover and while the drag holds */
.plumb {
  position: fixed;
  top: 0; /* tight to the page's top edge: the plumb hangs from it, like a plumb line does */
  /* and it hangs at the main text's right edge, where the width grip has always lived -
       the em in left must be the text's em, so the size is pinned on the element */
  left: calc(
    48px + 300px + 40px +
      min(var(--measure, 29em), 100vw - 48px - 300px - 40px - 56px) - 3px
  );
  width: 1px;
  height: 34px;
  background: var(--hairline);
  background-clip: content-box; /* the hairline stays 1px; the padding is the grip */
  padding: 0 8px 0 3px; /* 3px over the text's edge, 8px in the gap right of it */
  font-size: var(
    --fs
  ); /* --measure's em resolves in the text's em, like the old handle */
  opacity: 0;
  transition:
    opacity 0.45s ease,
    height 0.26s ease,
    background-color 0.26s ease,
    filter 0.26s ease;
  cursor: col-resize;
  touch-action: none;
  z-index: 11;
}
:root.ui-awake .plumb {
  opacity: 1;
}
.plumb:hover,
:root.measure-drag .plumb,
:root:has(.horizon-control:hover) .plumb,
:root.horizon-drag .plumb {
  background-color: var(
    --ink
  ); /* longhand: the shorthand would reset the content-box clip */
}
.plumb:hover {
  height: 43px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ink) 40%, transparent));
}
/* and the companion answers: hovering or dragging the plumb lights the horizon's line */
:root:has(.plumb:hover) .horizon-line,
:root.measure-drag .horizon-line {
  background: var(--ink);
}
/* the width drag is not a text selection: nothing highlights while the tick is held */
.plumb,
:root.measure-drag {
  -webkit-user-select: none;
  user-select: none;
}

:root.measure-drag .page {
  user-select: none;
}
.controls button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.controls button {
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    opacity 0.35s ease;
}
.controls button:hover,
.controls button:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  outline: none;
}
.controls button {
  position: relative;
}
.controls button[data-tip]:hover:not(:disabled)::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: 9.5pt;
  letter-spacing: 0.04em;
  color: var(--dim);
  pointer-events: none;
}
.controls button:disabled {
  opacity: 0.3;
  cursor: default;
}
.controls button:disabled:hover {
  color: var(--dim);
  border-color: var(--hairline);
}

@media (max-width: 700px) {
  :root {
    --pin: calc(120px + var(--hz) + var(--vt));
    --head: calc(2 * 1.42 * var(--fs-mono) + 8px + 16px);
  }
  .page {
    padding: var(--pin) 20px 96px 18px;
  }
  .plumb {
    left: calc(18px + min(var(--measure, 29em), 100vw - 38px) - 3px);
  }
  .story {
    grid-template-columns: 1fr;
    margin: 0 0 26px;
  }
  .story-head {
    padding: 2px 0;
  }
  .story.open .story-head {
    margin: 0 0 16px;
    background: var(--bg);
    top: var(--pin);
  }
  .archive-end {
    margin: 40px 0 0 0;
    width: 280px;
  }
  .fold-dot {
    left: -15px;
    padding-right: 4px;
  }
  .audio-part {
    flex-wrap: wrap;
  }
  .audio-label {
    flex-basis: 100%;
    padding-left: 42px;
    margin-top: -6px;
  }
  .controls,
  .controls .horizon-control {
    right: 8px;
  }
}

/* top seam: the fade band at the top of the page (see .seam.standalone at the end) */
.seam {
  position: fixed;
  top: var(--vt);
  left: 0;
  right: 0;
  height: var(--seam-h);
  background: linear-gradient(
    to bottom,
    rgba(244, 239, 236, 1) 0%,
    rgba(244, 239, 236, 0.987) 8.1%,
    rgba(244, 239, 236, 0.951) 15.5%,
    rgba(244, 239, 236, 0.896) 22.5%,
    rgba(244, 239, 236, 0.825) 29%,
    rgba(244, 239, 236, 0.741) 35.3%,
    rgba(244, 239, 236, 0.648) 41.2%,
    rgba(244, 239, 236, 0.55) 47.1%,
    rgba(244, 239, 236, 0.45) 52.9%,
    rgba(244, 239, 236, 0.352) 58.8%,
    rgba(244, 239, 236, 0.259) 64.7%,
    rgba(244, 239, 236, 0.175) 71%,
    rgba(244, 239, 236, 0.104) 77.5%,
    rgba(244, 239, 236, 0.049) 84.5%,
    rgba(244, 239, 236, 0.013) 91.9%,
    rgba(244, 239, 236, 0) 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* draft-only controls: a divider and a color swatch among the icon ghosts */
/* a family: its button in the stack, its members in a column to the left, level with it (slid up by
   ControlGroup where the window ends first); the column's right padding bridges the gap for a mouse */
.ctl-group {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
}
.ctl-members {
  position: absolute;
  right: 34px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* the members hug the stack's side - a wide row (the pdf pick) must not push the rest left */
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}
.ctl-group.open .ctl-members {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.ctl-glyph {
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.controls button.draft-toggle:hover,
.controls button.draft-toggle:focus-visible {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.controls button.draft-toggle {
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease,
    opacity 0.35s ease;
}

/* era control: one icon; hover unfolds the choices leftward, random leftmost */
.era-widget {
  position: relative;
  width: 34px;
}
.era-menu {
  position: absolute;
  right: 34px; /* flush against the icon: the right padding is a hover bridge, no dead gap to fall through */
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  display: flex;
  align-items: center;
  gap: 11px;
  opacity: 0;
  visibility: hidden;
  /* leaving waits a beat, so a hand drifting between the years doesn't lose the fan */
  transition:
    opacity 0.35s ease 0.45s,
    transform 0.35s ease 0.45s,
    visibility 0s linear 0.8s;
  background: var(--bg);
  border-radius: 17px;
  padding: 3px 19px 3px 10px;
}
.era-widget:hover .era-menu,
.era-widget:focus-within .era-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0s;
}
.controls .era-choice {
  position: relative;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  display: inline-block;
  padding: 4px 1px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: 8.5pt;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.controls .era-choice {
  transition: color 0.35s ease;
}
.controls .era-choice:hover,
.controls .era-choice:focus-visible {
  color: var(--ink);
  outline: none;
}
.controls .era-choice.current {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.controls .era-menu button.era-choice[data-tip]:hover:not(:disabled)::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 7px); /* under the year's underline, never on its line */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: 9pt;
  letter-spacing: 0.04em;
  color: var(--dim);
  pointer-events: none;
}
.controls button.swatch {
  position: relative;
}
.controls .swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--dim);
  display: block;
  pointer-events: none;
}
.controls .swatch input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* type shelf */
.face-widget {
  position: relative;
  width: 34px;
}
.face-list {
  position: fixed;
  max-height: min(calc(100vh - 24px), 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  z-index: 12;
}
.face-list::-webkit-scrollbar {
  display: none;
}
.controls .face-choice {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  display: block;
  flex: none;
  padding: 3px 0;
  white-space: nowrap;
  max-width: 18ch; /* long face names can't widen the panel */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(13px + 1pt); /* face names: +1pt */
  letter-spacing: 0;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.35s ease;
}
.controls .face-choice.wing {
  margin-top: 12px;
}
.controls .face-choice:hover,
.controls .face-choice:focus-visible {
  color: var(--ink);
  outline: none;
}
.controls .face-choice.current {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.size-field {
  position: relative;
  width: 34px;
  height: 34px;
  display: block;
}
.size-field input {
  display: block; /* an inline input sinks below the label's baseline - the ring sat 5px low of its mates */
  width: 34px;
  height: 34px;
  box-sizing: border-box; /* the border rides inside the 34, the same ring as the hyphen's */
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--dim);
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: 10px;
  letter-spacing: 0;
  text-align: center;
  padding: 0;
  outline: none;
  caret-color: #dc143c;
  transition:
    color 0.35s ease,
    border-color 0.35s ease;
}
.size-field input:hover,
.size-field input:focus {
  color: var(--ink);
  border-color: var(--ink);
}
.size-field input::selection {
  background: #dc143c;
  color: #000;
}
/* the picked-numbers picker: two number rings with the hyphen in a ring of its own */
.pdf-pick {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdf-pick-dash {
  width: 34px;
  height: 34px;
  box-sizing: border-box; /* the border rides inside the 34, level with the number rings */
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: 10px;
  user-select: none;
  -webkit-user-select: none;
}
.size-field[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: 9.5pt;
  letter-spacing: 0.04em;
  color: var(--dim);
  pointer-events: none;
}
.size-field:focus-within::after {
  display: none;
}

/* ---- the owner's fonts: the upload button, then his fonts as the first shelf of the face list ----
   Every entry keeps the list's size and right edge; the × sits to the left of a name */
.controls .face-choice.face-upload {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 12px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  color: var(--dim);
}
.controls .face-choice.face-upload:hover,
.controls .face-choice.face-upload:focus-visible {
  color: var(--ink);
  border-color: var(--dim);
}
.face-upload-note {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.6;
  text-align: right;
  max-width: 180px;
}
.face-own {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
}
.controls .face-remove {
  width: auto;
  height: auto;
  flex: none;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 11px;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
}
.controls .face-remove:hover {
  opacity: 1;
  color: var(--ink);
  background: none;
}

/* ---- knobs of a variable face (AxisKnobs): under its name in the face list, right-aligned like the list ----
   name, a thin line with a small dot, the value in oldstyle figures; the line is the whole hit area */
.face-list .face-choice {
  font-variation-settings: normal;
} /* names are set in their own faces, not the slot's knobs */
.face-axes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 2px 0 8px;
  font-family: var(--font-mono);
  font-variation-settings: normal;
  font-size: 11px;
  color: var(--dim);
}
.face-axis {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  cursor: default;
}
.face-axis-name {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.face-axis-value {
  width: 3.2em;
  text-align: left;
  font-variant-numeric: oldstyle-nums tabular-nums;
  color: var(--ink);
  opacity: 0.8;
}
.face-axis input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: none;
}
.face-axis input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--hairline);
}
.face-axis input[type="range"]::-moz-range-track {
  height: 1px;
  background: var(--hairline);
}
.face-axis input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--dim);
  border: 0;
  transition: background 0.2s ease;
}
.face-axis input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim);
  border: 0;
}
.face-axis:hover input[type="range"]::-webkit-slider-thumb,
.face-axis input[type="range"]:focus-visible::-webkit-slider-thumb {
  background: var(--ink);
}
.face-axis:hover input[type="range"]::-moz-range-thumb,
.face-axis input[type="range"]:focus-visible::-moz-range-thumb {
  background: var(--ink);
}
.face-axis input[type="range"]:focus {
  outline: none;
}
.face-axis:hover .face-axis-name {
  color: var(--ink);
}
@media (max-width: 600px) {
  .face-axis input[type="range"] {
    width: 84px;
    height: 28px;
  }
}

/* standalone mirror: with no host header above the page, the top fade is the
   page's own background thinning out (mask), so it follows --bg and inversion */
.seam.standalone {
  top: 0;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.75) 35%,
    rgba(0, 0, 0, 0.35) 70%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.75) 35%,
    rgba(0, 0, 0, 0.35) 70%,
    transparent 100%
  );
}
.face-own .face-remove {
  width: 18px;
  color: var(--dim);
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
}
.face-own:hover .face-remove,
.face-own:focus-within .face-remove {
  opacity: 1;
  pointer-events: auto;
}
.face-own .face-remove:hover,
.face-own .face-remove:focus-visible {
  color: var(--ink);
}
.face-widget.body,
.face-widget.title {
  display: flex;
  align-items: center;
  width: auto;
  gap: 4px;
}
/* Keep the font button at the column edge even when no axes button is present. */
.face-widget.body > button:last-child,
.face-widget.title > button:last-child {
  margin-left: auto;
}
.controls .face-widget .face-axes-toggle {
  width: 26px;
  height: 26px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 14px;
}
.face-axes-back {
  align-self: flex-end;
  margin-bottom: 10px;
  font-family: var(--font-mono);
}