/* Keep the Life, site styles: speaker colors, the site announcement, chapters, sections, scenes, replies, the end of the book and the folding screens. */

[data-sp="t"] {
  --c: var(--sp-t);
}
[data-sp="k"] {
  --c: var(--sp-k);
}
[data-sp="b"] {
  --c: var(--sp-b);
}
[data-sp="m"] {
  --c: var(--sp-m);
}
[data-sp="v"] {
  --c: var(--sp-v);
}
[data-sp="s"] {
  --c: var(--sp-s);
}
[data-sp="o"] {
  --c: var(--sp-o);
}
[data-sp="p"] {
  --c: var(--sp-p);
}
[data-sp="l"] {
  --c: var(--sp-l);
}
[data-sp="h"] {
  --c: var(--sp-h);
}
[data-sp="c"] {
  --c: var(--sp-c);
}
[data-sp="f"] {
  --c: var(--sp-f);
}
[data-sp="r"] {
  --c: var(--sp-r);
}
[data-sp="z"] {
  --c: var(--sp-z);
}
[data-sp="g"] {
  --c: var(--sp-g);
}
[data-sp="pa"] {
  --c: var(--sp-pa);
}
[data-sp="e"] {
  --c: var(--sp-e);
}
[data-sp="ck"] {
  --c: var(--sp-ck);
}
[data-sp="le"] {
  --c: var(--sp-le);
}
[data-sp="ch"] {
  --c: var(--sp-ch);
}
[data-sp="wg"] {
  --c: var(--sp-wg);
}
[data-sp="it"] {
  --c: var(--sp-it);
}
[data-sp="rc"] {
  --c: var(--sp-rc);
}
[data-sp="fa"] {
  --c: var(--sp-fa);
}
[data-sp="ce"] {
  --c: var(--sp-ce);
}
/* the site announcement is a recording read over the speakers: set in the mono face */
[data-sp="pa"] p {
  font-family: var(--mono);
  font-size: 0.95em;
}
/* the site announcement: a recording over the speakers, not a speaker, so it
   takes no name column and runs the full width of the line. A small muted
   caption with a speaker mark says what it is, and the words follow a little
   smaller and softer than speech */
.ln.ln-pa {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--l-0-25rem);
}
.ln.ln-pa > p {
  grid-column: 1;
  color: var(--ink-2);
  font-size: 0.9em;
}
.ln.ln-pa > p.pa-cap {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font: 600 var(--l-0-7rem) / 1.3 var(--mono);
  letter-spacing: var(--l-0-14em);
  text-transform: uppercase;
  color: var(--mute);
}
.ln-pa .pa-mark {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* chapters and sections */

.story {
  min-width: 0;
  padding-bottom: calc(var(--s) * 2);
}

.ch-head {
  margin-block: var(--m);
  padding-block: var(--s);
  border-top: var(--l-3px) double var(--rule-2);
  border-bottom: var(--l-3px) double var(--rule-2);
}

.chapter:first-child .ch-head {
  margin-top: var(--s);
}

.ch-head h2 {
  margin: 0;
  font: 800 clamp(var(--l-1-9rem), 4.5vw, var(--l-2-6rem)) / 1.05 var(--serif);
  letter-spacing: -0.015em;
}

/* tabbed view */

.book-tabs {
  display: flex;
  gap: var(--l-0-25rem);
  overflow-x: auto;
  padding-block: var(--l-0-5rem);
  margin-top: var(--s);
}

.book-tabs .tab {
  font-weight: 600;
}
.tabbed .chapter:first-of-type .ch-head,
.tabbed .ch-head {
  margin-top: var(--s);
}

.ch-tabs {
  display: flex;
  gap: var(--l-0-25rem);
  overflow-x: auto;
  padding-block: var(--l-0-5rem);
}

.tabbed .ch-tabs {
  display: flex;
}
.ch-tabs[hidden] {
  display: none;
}

.tabbed .sec[hidden] {
  display: none;
}

.sec-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s);
  margin-block: var(--s);
}
.sec-nav button {
  padding: var(--l-0-4rem) var(--l-0-8rem);
  border: var(--l-1px) solid var(--rule-2);
  background: transparent;
  color: var(--ink);
  font: 500 var(--l-0-85rem) var(--sans);
  cursor: pointer;
}
.sec-nav button:hover {
  border-color: var(--ink-2);
}
.sec-nav button[disabled] {
  visibility: hidden;
}

.sec h3 {
  display: flex;
  align-items: center;
  gap: var(--l-0-75rem);
  margin-block: 0;
  padding-block: var(--l-0-6rem);
  font: 600 var(--l-0-82rem) / 1.3 var(--mono);
  letter-spacing: var(--l-0-14em);
  text-transform: uppercase;
  color: var(--ink-2);
}

.sec h3::after {
  content: "";
  flex: 1;
  border-top: var(--l-1px) solid var(--rule);
  order: 2;
}

/* the chapter header carries its own margin, so the first section heading
   drops its top padding */
.ch-head + .ch-tabs[hidden] + .sec > h3 {
  padding-top: 0;
}

.sec-n {
  color: var(--sp-k);
}

.plink {
  order: 3;
  font: 500 var(--l-0-85rem) var(--mono);
  color: var(--mute);
  background: none;
  border: 0;
  padding: 0 var(--l-0-2rem);
  cursor: pointer;
}

.plink:hover {
  color: var(--ink);
}

/* scene narration */

.scene {
  margin-block: var(--s);
  padding-left: var(--s);
  border-left: var(--l-1px) solid var(--rule-2);
  font: 400 1.14rem/1.6 var(--serif);
  color: var(--ink-2);
}

.scene p + p {
  margin-top: var(--s);
}
.scene-mid {
  margin-block: var(--xs);
}
/* a perspective shift: the story moves to another place and other people.
   Same scene type, a dashed rule and a cooler gray so the cut reads at a glance */
.scene-shift {
  border-left-style: dashed;
  border-left-color: var(--mute);
  color: color-mix(in srgb, var(--ink-2) 82%, var(--mute));
}
/* a scene that opens a section takes the smaller spacing and sits under the heading */
.sec > h3 + .scene {
  margin-block: 0 var(--xs);
}

/* dialogue lines */

.ln {
  position: relative;
  display: grid;
  /* --sp-w is set by js/text/names.js to the width of the longest speaker name */
  grid-template-columns: var(--sp-w, 8rem) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s);
  padding-block: var(--l-0-6rem);
  padding-right: var(--l-0-6rem);
  border-top: var(--l-1px) solid var(--rule);
}

/* close the last reply before a screen, a scene or the end of a section */
.ln:last-child,
.ln:has(+ :not(.ln)) {
  border-bottom: var(--l-1px) solid var(--rule);
}

.sp {
  font: 600 0.88rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c);
  text-align: right;
}

/* the same reply carried on after a screen: the name is left out and the
   text stays in the reply's own column, so it reads as one reply resumed */
.ln-cont {
  border-top: 0;
}
.ln-cont > p {
  grid-column: 2;
}
.ln-cont > .sp-cont {
  display: none;
}
/* with the screen before it folded, the reply stands on its own: its name
   comes back and a rule separates it like any other reply */
details:not([open]) + .ln-cont {
  border-top: var(--l-1px) solid var(--rule);
}
details:not([open]) + .ln-cont > .sp-cont {
  display: block;
}

/* her name: number or name, switched by a click or Enter */
.sp-switch {
  cursor: pointer;
  border-radius: var(--l-2px);
}
.sp-switch:hover {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}
.sp-switch:focus-visible {
  outline: var(--l-2px) solid var(--focus);
  outline-offset: var(--l-2px);
}

.sp-probe {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.act {
  font-style: italic;
  color: var(--mute);
}

.ln-act p {
  color: var(--mute);
}

/* the end of the book: the last scene stands on its own in the middle of the
   column, and the end mark sits under it between two short rules */
.scene.scene-final {
  max-width: 36rem;
  margin: calc(var(--s) * 2) auto;
  padding: 0;
  border-left: 0;
  text-align: center;
  font-size: 1.22rem;
  line-height: 1.7;
  color: var(--ink);
}
.the-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s);
  margin: 0;
}
.the-end::before,
.the-end::after {
  content: "";
  width: 4rem;
  border-top: var(--l-1px) solid var(--rule-2);
}
.the-end p {
  margin: 0;
  font: 600 var(--l-0-85rem) / 1 var(--mono);
  letter-spacing: 0.4em;
  margin-right: -0.4em;
  text-transform: uppercase;
  color: var(--sp-k);
}

/* folded screens and printed matter open and fold like a drawer, in CSS
   alone. The browser keeps a details element's content in its own box,
   ::details-content, and hides it with content-visibility while the element
   is shut. That box is made a one-row grid whose row runs from 0fr to 1fr,
   a change every current browser animates, and content-visibility waits
   with allow-discrete until the row has closed, so the drawer is seen
   shutting before its content goes. The clip is vertical only, so shadows
   at the sides stay. */
details.app::details-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  overflow-y: clip;
  transition:
    grid-template-rows 0.28s cubic-bezier(0.3, 0, 0.2, 1),
    content-visibility 0.28s allow-discrete;
}
details.app[open]::details-content {
  grid-template-rows: 1fr;
}
/* the content keeps its own full height while the row around it opens and
   shuts, so nothing inside it is laid out again on every frame; the row
   only uncovers it */
details.app > :not(summary) {
  min-height: 0;
  min-width: 0;
  align-self: start;
  contain: layout;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) details.app::details-content {
    transition: none;
  }
}
:root[data-motion="reduced"] details.app::details-content {
  transition: none;
}

/* without scripts a switchable name stays as written, so it does not look
   clickable */
.no-js .sp-switch {
  cursor: auto;
}