/* Shared tokens, page frame, reading geometry and typography.
 * The controls update :root variables; fonts.css declares available faces. */

:root {
  --fs: 19pt;
  --fs-mono: 10pt;
  --bg: #000000;
  --ink: #f4efec;
  --dim: #8a8a8a;
  --hairline: #3a3a3a;
  --lh: 1.42;
  --measure: 29em; /* the text measure: dragged at the text's right edge or typed in the sizes family; in ems, so it follows the face and the size */
  --seam-over: 64px; /* how far the top fade reaches past the first line of text */
  --head: 0px; /* a piece's head above its first line (phone only; beside the text on a wide screen) */
  --seam-h: calc(var(--pin) - var(--vt) + var(--head) + var(--seam-over));
  --font-body: "EB Garamond", Georgia, serif;
  --font-mono: "Fragment Mono", monospace;
  --fvs-body: normal;
  --fvs-mono: normal;
  --vt: 0px; /* top inset reserved for a host header; 0 in the mirror */
  --hz: 0px; /* the horizon's shift, set by the horizon control */
  --pin: calc(190px + var(--hz) + var(--vt));
  /* the horizon line: the first line's baseline (top of the page + a phone's piece head + the body's ascent in its line box) */
  --hline: calc(
    var(--pin) + var(--head) + (0.817 + (var(--lh) - 1) / 2) * var(--fs)
  );
  --ctl: calc(
    var(--hline) + 17px + 10px
  ); /* the stack starts one gap under the horizon handle and moves with it */
}
:root.inverted {
  --bg: #d2d2d2;
  --ink: #000000;
  --dim: #5a5a5a;
  --hairline: #b0b0b0;
}

html,
body {
  margin: 0;
  height: 100% !important;
  overflow: hidden !important;
}
html {
  background: var(--bg);
  overscroll-behavior: none;
  transition: background 0.25s ease;
}
.scroller,
.controls,
.io-panel textarea {
  overscroll-behavior: contain;
}
#root,
.scroller {
  height: 100% !important;
}
#root {
  isolation: isolate;
} /* keep the travelling logo above the body but below every UI layer */
.scroller {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar {
  display: none;
}

/* OpenType: kerning plus the standard and contextual ligatures every face on the shelf carries.
   Discretionary ligatures stay off: in these faces they are historical forms (ct, st) that pull
   the eye in running text. The font files keep all their features, so any of them can be turned on. */
html {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-variation-settings: var(--fvs-body);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.page {
  margin: 0;
  padding: var(--pin) 56px 120px 48px; /* top = sticky pin line: open titles never clamp-displace at scroll 0 */
  box-sizing: border-box;
}

/* story: side title + body as one row; the side title is the only title */
.story {
  display: grid;
  grid-template-columns: calc(300px - var(--index-inset)) minmax(0, 1fr);
  column-gap: 40px;
  margin: 0 0 34px var(--index-inset);
}
.story-head {
  align-self: start;
  display: block;
  text-align: left;
  line-height: 1.42; /* fixed: the head's calibration constant assumes it, whatever the draft line height does */
  background: none;
  border: 0;
  padding: calc(
      (0.817 + (var(--lh) - 1) / 2) * var(--fs) - 1.05 * var(--fs-mono)
    )
    0 0 0; /* constant in both states (no jump on fold/unfold); tracks font size AND line height so the open title's baseline meets the first line's baseline at every setting (body offset = half leading + 0.817*fs, mono title offset 14px fixed) */
}
.story-head {
  position: relative;
}
.story-head-main {
  display: block;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  line-height: inherit; /* a button resets line-height to normal; the head's 1.42 must reach the title and date, as it does in draft */
  cursor: pointer;
}
.story.open .story-head {
  position: sticky;
  top: var(--pin);
}
.fold-dot {
  position: absolute;
  left: -21px;
  top: calc((0.817 + (var(--lh) - 1) / 2) * var(--fs) - 1.05 * var(--fs-mono));
  height: calc(1.42 * var(--fs-mono));
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0 8px 0 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-variation-settings: var(--fvs-body);
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  animation: middot-blink 2.6s ease-in-out infinite;
  transition: color 0.35s ease;
}
.fold-dot:hover,
.fold-dot:focus-visible {
  color: var(--ink);
  animation-duration: 0.85s;
  outline: none;
}

.list-plus {
  height: 0;
}
.story-title {
  display: block;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  color: var(--dim);
  transition: color 0.2s ease;
}
.story-head:hover .story-title,
.story-head:focus-visible .story-title {
  color: var(--ink);
  outline: none;
}
.story.open .story-title {
  color: var(--ink);
}
.story-when {
  display: block;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  color: var(--dim);
  margin-top: 4px;
}
.story-fold {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.55s ease,
    opacity 0.55s ease;
}
.story.open .story-fold {
  grid-template-rows: 1fr;
  opacity: 1;
}
.story-body {
  max-width: var(--measure, 29em);
  min-width: 0;
  overflow: hidden;
  min-height: 0;
} /* measure scales with the story font: 29em = 734px at 19pt */

/* audio rows and their notes share one indent */
.story-audio {
  margin: 1.42em 0 4px 2em;
} /* one empty line between the main text and the voice rows */
.audio-part {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  min-height: 34px;
}
.audio-button {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.audio-button:hover,
.audio-button:focus-visible {
  background: var(--ink);
  color: var(--bg);
  outline: none;
}
.audio-track {
  flex: 1 1 auto;
  min-width: 40px;
  height: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.audio-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--hairline);
}
.audio-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background: var(--ink);
}
.audio-time {
  flex: none;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: var(--fs-mono);
  color: var(--dim);
  white-space: nowrap;
}
.audio-label {
  flex: none;
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: var(--fs-mono);
  color: var(--dim);
}
.story-note {
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  color: var(--dim);
  margin: 0 0 14px calc(2 * var(--fs));
}

/* closing middots: every piece ends with them, after the voice excerpts; they blink */
@keyframes middot-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.28;
  }
}
.endmark {
  margin: 14px 0 0;
  padding-left: 0;
  word-spacing: 0.25em;
  animation: middot-blink 2.6s ease-in-out infinite;
} /* flush with the first paragraph; one extra space between the glyphs */

/* archive end: blinking middots aligned with the main text column; they unfold a summary for the peekers */
.archive-end {
  margin: 48px 0 0 0;
  width: 280px;
} /* end of the TITLE column */
.archive-middots {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-variation-settings: var(--fvs-body);
  font-size: var(--fs);
  word-spacing: 0.25em;
  color: var(--ink);
  animation: middot-blink 2.6s ease-in-out infinite;
}
.archive-middots:hover,
.archive-middots:focus-visible {
  animation-duration: 0.85s;
} /* fast blink on hover */
.archive-fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.55s ease,
    opacity 0.55s ease;
}
.archive-end.open .archive-fold {
  grid-template-rows: 1fr;
  opacity: 1;
}
.archive-fold-inner {
  overflow: hidden;
  min-height: 0;
}
.archive-endmark {
  padding-left: 0;
  font-family: var(--font-body);
  font-variation-settings: var(--fvs-body);
  font-size: var(--fs);
  word-spacing: 0.25em;
}
.archive-summary {
  margin-top: 1.42em;
  padding-left: 1.08em; /* one middots-width (14.4px of 19pt Garamond) in summary ems */
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  line-height: 1.42;
  color: var(
    --dim
  ); /* one empty line below the middots; indented one middots-width; slightly faded; set like a title */
}
.archive-summary p {
  margin: 0;
}

/* body text: first paragraph flush, the rest indented as blocks; no gaps */
.story-text p,
.story-text > div {
  margin: 0;
  padding-left: 2em;
}
.story-text > :first-child {
  padding-left: 0;
}

.story-text strong {
  font-weight: 700;
}
.story-text u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.story-text del {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.fx-palette {
  position: fixed;
  z-index: 30;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 17px;
  animation: fx-rise 0.22s ease;
}
@keyframes fx-rise {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fx-palette button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-body);
  font-variation-settings: var(--fvs-body);
  font-size: 16px;
  line-height: 1;
  padding: 0 0 2px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.fx-palette button:hover {
  color: var(--ink);
}
.fx-palette button.on {
  color: #dc143c;
}
.fx-palette .fx-sep {
  width: 1px;
  align-self: stretch;
  margin: 6px 3px;
  background: var(--hairline);
}
.fx-palette .fx-indent,
.fx-palette .fx-outdent {
  font-family: var(--font-mono);
  font-variation-settings: var(--fvs-mono);
  font-size: 18px;
}

/* dialogue pieces (two hands): every part starts flush, its hand mark (○ / ●) hanging in the margin */
.story.dialogue .story-text > p,
.story.dialogue .story-text > div {
  padding-left: 1.25em;
  text-indent: -1.25em;
}

.archive-middots {
  font-size: 14px;
  line-height: 1;
  word-spacing: 0;
  padding-right: 8px;
}
/* Reveal each delete mark on its piece title hover or keyboard focus. */
.story-head .draft-remove {
  color: var(--hairline);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.story-head:hover .draft-remove,
.story-head:focus-within .draft-remove {
  color: var(--ink);
  opacity: 1;
  pointer-events: auto;
}
.story-head .draft-remove:hover,
.story-head .draft-remove:focus-visible {
  color: var(--ink);
}

/* Audio between paragraphs uses the same player, without paragraph padding. */
.story-text > .story-audio { padding-left: 0; margin: 1.42em 0 1em 2em; }
/* The travelling mark clears the fade without taking text or pointer input. */
#root .logo.logo-roaming, #root .logo.logo-pulled, #root .logo:not(.logo-roaming) { z-index: 101; pointer-events: none; user-select: none; }
/* One continuous baseline aligned to the four-cell code grid. */
.sync-panel .sync-email {
    display:block;box-sizing:border-box;width:95px;height:26px;
    margin:0;padding:0 0 7px;border:0;border-bottom:0;
    background:linear-gradient(#555,#555) left 18px / 95px 1px no-repeat;
    border-radius:0;background:transparent;color:inherit;
    font:10px 'Fragment Mono',monospace;caret-color:crimson;outline:none;
}
.sync-panel:has(.sync-email) {border:0;padding-left:14px;padding-right:14px;}