/* ==========================================================================
   Konstellation: the reader (pages and scroll) and the Interpretation editor
   ========================================================================== */

.reader {
  --read-size: 19px;
  --read-font: var(--font-book);
  --read-lh: 1.5;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  color: var(--ink);
}

.reader[data-face="type"] { --read-font: var(--font-mono); --read-lh: 1.62; }
/* Caveat is small for its size, so it is set larger to read like the others. */
.reader[data-face="hand"] { --read-font: var(--font-hand); --read-lh: 1.36; --read-scale: 1.3; }

/* ------------------------------------------------------------ top strip */

/* An engraved band, like the site's header. */
.reader-bar {
  position: relative;
  z-index: 8;
  height: 56px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(0, 0, 0, .96), rgba(4, 4, 4, .86));
}

:root[data-theme="light"] .reader-bar { background: linear-gradient(180deg, rgba(240, 240, 240, .97), rgba(230, 230, 230, .9)); }

.reader-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--frame-lo) 10%, var(--frame-mid) 50%, var(--frame-lo) 90%, transparent);
}

.reader-bar-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
}

.reader-title { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.1; padding-left: 2px; }

.rt-book {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 600 14px/1.15 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rt-chapter {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: italic 15px/1.15 var(--font-text);
  color: var(--ink-2);
}

.reader-tools { display: flex; align-items: center; gap: 2px; }

.interp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 300px;
  height: 34px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--frame-mid);
  border-radius: 17px;
  background: none;
  color: inherit;
  font: 600 11px/1 var(--font-label);
  letter-spacing: .1em;
}

.interp-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 13px; height: 12px; flex: none; }
.eq i { width: 3px; height: 30%; background: currentColor; }
.is-playing .eq i { animation: eq .8s ease-in-out infinite alternate; }
.is-playing .eq i:nth-child(2) { animation-delay: -.27s; }
.is-playing .eq i:nth-child(3) { animation-delay: -.54s; }

@keyframes eq {
  from { height: 22%; }
  to { height: 100%; }
}

@media (max-width: 640px) {
  .interp-chip { max-width: 44px; padding: 0 12px; }
  .interp-chip > span:last-child { display: none; }
  .rt-book { font-size: 12.5px; letter-spacing: .1em; }
}

/* ---------------------------------------------------------------- stage */

.reader-stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.reader[data-dir="h"] .reader-stage { touch-action: pan-y pinch-zoom; }

.page-frame {
  position: relative;
  overflow: hidden;
  background-color: var(--page);
  background-image: radial-gradient(120% 90% at 50% 30%, rgba(var(--glow), .025), rgba(var(--glow), 0) 60%);
  color: var(--page-ink);
  border: 1px solid var(--frame-lo);
  box-shadow: 0 0 0 1px #000, 0 30px 70px rgba(0, 0, 0, .65);
}

:root[data-theme="light"] .page-frame { background-image: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 50px rgba(0, 0, 0, .14); }

/* The page's own engraved border, with a gem on each corner. */
.page-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  border: 10px solid transparent;
  border-image: var(--frame-art) 20 / 10px stretch;
  pointer-events: none;
}

.page-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 200px;
  opacity: .045;
  pointer-events: none;
}

.page-viewport { position: relative; overflow: hidden; }

.page-flow {
  position: relative;
  font-family: var(--read-font);
  font-size: calc(var(--read-size) * var(--read-scale, 1));
  line-height: var(--read-lh);
  column-fill: auto;
  orphans: 2;
  widows: 2;
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
  will-change: transform;
}

.page-flow p { margin: 0; text-indent: 1.6em; }
.page-flow > .chapter > p:first-of-type,
.page-flow .chapter-title + p,
.page-flow .scene-break + p,
.page-flow .sub-title + p,
.page-flow blockquote + p { text-indent: 0; }

.reader[data-face="book"] .page-flow p { text-align: justify; }

.chapter + .chapter { break-before: column; -webkit-column-break-before: always; }

.page-viewport { container-type: size; }
.reader[data-dir="v"] .page-viewport { container-type: normal; }

/* A section opens on a new page, a little way down it, as in the printed book. */
.chapter-title {
  margin: min(5.4em, 15cqh) 0 min(2em, 6cqh);
  text-align: center;
  font: normal 1.55em/1.15 var(--font-display);
  letter-spacing: .02em;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-after: avoid;
  -webkit-column-break-after: avoid;
}

.reader[data-dir="v"] .chapter-title { margin: 2.4em 0 1.5em; }

/* The book's name above in small capitals, the section's own name in black letter. */
.chapter-kicker { display: block; margin-bottom: .45em; padding-left: .38em; font: 600 .44em/1.2 var(--font-label); letter-spacing: .38em; text-transform: uppercase; }
.chapter-name { display: block; font: 600 1.42em/1.05 var(--font-gothic); letter-spacing: .01em; }

.sub-title {
  margin: 1.4em 0 .6em;
  font: 600 .95em/1.3 var(--font-display);
  letter-spacing: .12em;
  break-after: avoid;
  -webkit-column-break-after: avoid;
}

/* A scene break the manuscript marks with an ellipsis shows that ellipsis, centred on its own
   line, as printed; a plain rule is drawn as a small gem. A break that closes its section stays
   on the page with the lines before it. */
.scene-break { height: 1.2em; margin: .9em 0; background: var(--gem-art) center / .55em .55em no-repeat; opacity: .8; }
.scene-break.is-text { height: auto; margin: .35em 0; background: none; opacity: 1; text-align: center; text-indent: 0; }
.scene-break.is-end { break-before: avoid; -webkit-column-break-before: avoid; }

/* Scripture-style books: a part opens with its number, set large, the way a chapter number opens a psalm. */
.reader[data-breaks="numbered"] .scene-break { height: 1.1em; margin: 0; padding: 0; background: none; }
.page-flow [data-part] { text-indent: 0; }

.page-flow [data-part]::before {
  content: attr(data-part);
  float: left;
  min-width: .5em;
  margin: .08em .16em 0 0;
  font: 600 3.2em/.8 var(--font-display);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  letter-spacing: 0;
  text-align: center;
  color: var(--page-ink);
}

.reader[data-face="hand"] .page-flow [data-part]::before { font-size: 2.7em; }

.page-flow blockquote { margin: .7em 1.6em; font-style: italic; }

/* The book's last line is set like the lines before it, and stays on their page. */
.book-end { break-before: avoid; -webkit-column-break-before: avoid; }

/* Then the book closes on its back cover, on a page of its own. */
.book-back {
  display: grid;
  place-items: center;
  height: 100cqh;
  break-before: column;
  -webkit-column-break-before: always;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.reader[data-dir="v"] .book-back { height: auto; padding: 4em 0 1em; }

/* The back cover's art has a transparent background: it always sits on black, as it was made. */
.book-end-art {
  display: block;
  width: auto;
  max-width: 86%;
  max-height: 84cqh;
  height: auto;
  margin: 0 auto;
  background: #000;
  box-shadow: 0 0 0 1px var(--frame-lo), 0 20px 50px rgba(0, 0, 0, .6);
}

/* The pages before the story, as printed: the title page, then the copyright page, each a page of
   its own. Two pages to a screen, they open side by side: the title on the left, the copyright on the right. */
.front-matter { text-align: center; }

.fm-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100cqh;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.fm-copyright,
.front-matter + .chapter { break-before: column; -webkit-column-break-before: always; }

.fm-title { padding: 21cqh .5em 7cqh; }
.fm-kicker { padding-left: .38em; font: 600 .74em/1.2 var(--font-label); letter-spacing: .38em; text-transform: uppercase; }
.fm-name { margin-top: .3em; font: 600 2.9em/1.05 var(--font-gothic); letter-spacing: .01em; text-wrap: balance; }
.fm-sub { margin-top: 1.4em; font: 600 .74em/1.3 var(--font-label); letter-spacing: .16em; color: var(--page-ink-2); }
.fm-by { margin-top: auto; font: italic 1.08em/1.3 var(--font-book); }

.fm-copyright { justify-content: flex-end; padding-bottom: 6cqh; font: .82em/1.4 var(--font-book); }
.reader .page-flow .fm-copyright p { margin: 0; text-indent: 0; text-align: center; }

.reader[data-dir="v"] .fm-page { height: auto; }
.reader[data-dir="v"] .fm-title { padding: 3.5em .5em 0; }
.reader[data-dir="v"] .fm-by { margin-top: 3em; }
.reader[data-dir="v"] .fm-copyright { padding: 3em 0 0; }
.reader[data-dir="v"] .front-matter + .chapter { margin-top: 4.5em; }

/* A ribbon hangs over the top edge of a page that has a bookmark on it. */
.page-ribbon {
  position: absolute;
  top: -1px;
  right: 7px;
  z-index: 3;
  width: 14px;
  height: 0;
  background: var(--page-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 100%);
  transition: height .35s var(--ease-out);
  pointer-events: none;
}

.reader.has-bookmark .page-ribbon { height: 46px; }
.bm-btn[aria-pressed="true"] svg path { fill: currentColor; }

.page-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 70px;
  margin-left: -35px;
  display: none;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .2) 38%, rgba(0, 0, 0, .38) 50%, rgba(0, 0, 0, .2) 62%, transparent);
  pointer-events: none;
}

:root[data-theme="light"] .page-spine { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .05) 38%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, .05) 62%, transparent); }
.page-spine::after { content: ""; position: absolute; top: 3%; bottom: 3%; left: 50%; width: 1px; background: var(--frame-lo); }
.reader[data-spread="true"] .page-spine { display: block; }

/* The shadow of a turning page: a soft band of shade that passes over the text. */
.page-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, 0) 80%);
  opacity: 0;
  pointer-events: none;
}

:root[data-theme="light"] .page-shade { background: linear-gradient(90deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, 0) 80%); }

/* A click or tap anywhere on the page turns it: the left half back, the right half on (with two
   pages to a screen, each page is its own half). */
.turn-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 50%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.turn-zone--prev { left: 0; cursor: w-resize; }
.turn-zone--next { right: 0; cursor: e-resize; }
.turn-zone:focus-visible { outline: none; background: linear-gradient(90deg, rgba(127, 127, 127, .08), transparent); }
.turn-zone--next:focus-visible { background: linear-gradient(270deg, rgba(127, 127, 127, .08), transparent); }

/* Vertical (scrolling) reading. */
.reader[data-dir="v"] .reader-stage { display: block; }
.reader[data-dir="v"] .turn-zone,
.reader[data-dir="v"] .turn-btn { display: none; }
.reader[data-dir="v"] .page-frame { height: 100%; margin: 0 auto; border-top: 0; border-bottom: 0; }
.reader[data-dir="v"] .page-viewport { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--frame-lo) transparent; }
.reader[data-dir="v"] .page-flow { margin: 0 auto; padding: 8vh 0 42vh; transform: none !important; }
.reader[data-dir="v"] .chapter + .chapter { margin-top: 4.5em; }

/* --------------------------------------------------------------- footer */

.reader-foot {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px max(14px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

/* Turn buttons are round seals with a silver ring. */
.frame-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--ink);
  background: radial-gradient(circle at 50% 35%, var(--panel-4), var(--panel-2) 72%);
  border: 1px solid var(--frame-mid);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--panel-2), inset 0 0 0 4px var(--frame-lo), 0 6px 14px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: border-color .3s, box-shadow .35s, transform .15s;
}

.frame-btn .ico { width: 20px; height: 20px; }
.frame-btn:hover { border-color: var(--frame-hi); box-shadow: inset 0 0 0 3px var(--panel-2), inset 0 0 0 4px var(--frame-mid), 0 6px 14px rgba(0, 0, 0, .45), 0 0 18px rgba(var(--glow), .1); }
.frame-btn:active { transform: scale(.95); }
.frame-btn:disabled { opacity: .3; cursor: default; transform: none; }

.progress { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }

.progress-track { position: relative; flex: 1; height: 30px; cursor: pointer; touch-action: none; }

.progress-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: var(--panel-4);
  box-shadow: 0 0 0 1px var(--frame-lo);
}

.progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 4px;
  margin-top: -2px;
  background: linear-gradient(90deg, rgba(var(--glow), .15), rgba(var(--glow), .85));
  box-shadow: 0 0 8px rgba(var(--glow), .25);
  transition: width .6s var(--ease-out);
}

:root[data-theme="light"] .progress-fill { background: linear-gradient(90deg, #9a9a9a, #111); box-shadow: none; }

/* Each section begins at a small gem on the rail. */
.progress-ticks i { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--gem-art) center / 100% 100% no-repeat; }
.progress-marks i { position: absolute; top: calc(50% + 6px); height: 3px; min-width: 2px; background: var(--ink-2); opacity: .75; }
.progress-bookmarks i {
  position: absolute;
  top: calc(50% - 14px);
  width: 7px;
  height: 10px;
  margin-left: -3.5px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 68%, 0 100%);
  pointer-events: none;
}

.progress-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  color: var(--ink);
  filter: drop-shadow(0 0 6px rgba(var(--glow), .9));
  pointer-events: none;
  transition: left .6s var(--ease-out);
}

:root[data-theme="light"] .progress-marker { filter: drop-shadow(0 0 3px rgba(0, 0, 0, .25)); }
.progress-marker .ico { width: 100%; height: 100%; animation: flap-soft 1.8s ease-in-out infinite alternate; }

@keyframes flap-soft {
  from { transform: scaleX(1); }
  to { transform: scaleX(.55); }
}

@media (max-width: 560px) {
  .reader-foot { gap: 10px; }
  .progress { gap: 10px; }
  .frame-btn { width: 40px; height: 40px; }
}

/* ------------------------------------------------------ contents drawer */

.drawer-backdrop { position: absolute; inset: 0; z-index: 30; background: var(--backdrop); animation: fade-in .2s; }

.drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 31;
  width: min(380px, 88vw);
  overflow-y: auto;
  padding: 22px 22px 40px;
  background: linear-gradient(90deg, var(--panel), var(--panel-2));
  border-right: 1px solid var(--frame-mid);
  box-shadow: 20px 0 50px rgba(0, 0, 0, .5), inset -4px 0 0 var(--panel-2), inset -5px 0 0 var(--frame-lo);
  animation: drawer-in .45s var(--ease-out);
}

@keyframes drawer-in {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: none; }
}

.drawer .modal-close { top: 14px; right: 12px; }
.toc { display: grid; gap: 4px; }
.toc-spacer { height: 44px; }

.toc-bookmarks { display: grid; gap: 4px; margin: 44px 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.toc-bm { display: flex; align-items: center; gap: 4px; }

.toc-bm-go {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 3px 10px;
  padding: 9px 10px 9px 12px;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-left: 1px solid var(--frame-lo);
  font: 600 12.5px/1.3 var(--font-label);
  letter-spacing: .08em;
  text-align: left;
  cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}

.toc-bm-go:hover { color: var(--ink); border-left-color: var(--frame-mid); background: rgba(127, 127, 127, .08); }
.toc-bm-go .ico { grid-row: span 2; align-self: center; width: 16px; height: 16px; }
.toc-bm-go .ico path { fill: currentColor; }
.toc-bm-ref { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.toc-bm-snip { grid-column: 2 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 15px/1.3 var(--font-text); letter-spacing: 0; color: var(--ink-3); }
.toc-bm .icon-btn .ico { width: 18px; height: 18px; }

.toc-section { display: grid; }
.toc-kicker { display: block; margin-bottom: 4px; font: 600 9.5px/1.2 var(--font-label); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3); }

/* A section's numbered parts, as a grid of numbers to jump to. */
.toc-divs { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 5px; padding: 4px 0 14px 12px; }

.toc-div {
  height: 34px;
  padding: 0;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--frame-lo);
  font: 600 15px/1 var(--font-display);
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}

.toc-div:hover { color: var(--ink); border-color: var(--frame-mid); }
.toc-div.is-active { color: var(--ink); border-color: var(--frame-hi); box-shadow: 0 0 12px rgba(var(--glow), .3); }

.toc-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 11px 12px;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-left: 1px solid var(--frame-lo);
  font: 600 13px/1.35 var(--font-label);
  letter-spacing: .08em;
  text-align: left;
  cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}

.toc-item:hover { color: var(--ink); border-left-color: var(--frame-mid); background: rgba(127, 127, 127, .08); }
.toc-item.is-active { color: var(--ink); border-left-color: var(--frame-hi); box-shadow: -8px 0 16px -10px rgba(var(--glow), .6); }
.toc-item > span:last-child { font: 600 20px/1.15 var(--font-gothic); letter-spacing: .01em; }

/* --------------------------------------------------------------- editor */

.view--editor { display: grid; grid-template-columns: minmax(0, 1fr) 410px; }
.editor-main { position: relative; min-width: 0; min-height: 0; height: 100%; }

.editor-panel {
  position: relative;
  z-index: 9;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 44px;
  background-color: var(--bg-raise);
  border-left: 1px solid var(--frame-mid);
  box-shadow: -14px 0 40px rgba(0, 0, 0, .35);
  scrollbar-width: thin;
  scrollbar-color: var(--frame-lo) transparent;
}

.ep-section { display: grid; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.ep-section:first-child { border-top: 0; padding-top: 2px; }
.ep-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ep-title { font: 600 30px/1.05 var(--font-gothic); letter-spacing: .01em; }
.ep-kicker { margin-bottom: 6px; font: 11px var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }

.ep-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: 11px/1 var(--font-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ep-status { font: 11px/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ep-status.is-error { color: var(--ink); text-decoration: underline dashed; }
.ep-toggle { display: none; }

.here { display: grid; gap: 10px; padding: 2px; }
.here-where { font: 600 13px/1.4 var(--font-label); letter-spacing: .08em; }
.here-playing { font: italic 15px/1.45 var(--font-text); color: var(--ink-3); }
.here-playing .ico { width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; }
.here-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.timeline {
  position: relative;
  height: 40px;
  background: var(--panel-2);
  border: 1px solid var(--frame-lo);
  cursor: pointer;
  overflow: hidden;
}

.tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }

.tl-window {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  background: rgba(127, 127, 127, .16);
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  pointer-events: none;
  transition: left .3s var(--ease-out), width .3s var(--ease-out);
}

.tl-cue {
  position: absolute;
  height: 8px;
  min-width: 4px;
  padding: 0;
  border: 1px solid var(--ink-2);
  background: repeating-linear-gradient(135deg, var(--ink-3) 0 2px, transparent 2px 5px);
  cursor: pointer;
}

.tl-cue.is-selected { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 8px rgba(var(--glow), .55); }
.tl-legend { display: flex; justify-content: space-between; font: 10px var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }

.cue-list { display: grid; gap: 10px; }

.cue { background-color: var(--panel); border: 1px solid var(--frame-lo); transition: border-color .2s, box-shadow .2s; }
.cue.is-open { border-color: var(--frame-mid); box-shadow: inset 0 0 0 2px var(--panel), inset 0 0 0 3px var(--frame-lo), 0 0 18px rgba(var(--glow), .06); }

.cue-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cue-head .ico { width: 18px; height: 18px; }
.cue.is-live .cue-head > .ico { filter: drop-shadow(0 0 5px rgba(var(--glow), .9)); }
.cue-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 17px/1.25 var(--font-text); }
.cue-range { white-space: nowrap; font: 11px var(--font-label); letter-spacing: .06em; color: var(--ink-3); }
.cue-body { display: grid; gap: 14px; padding: 2px 12px 14px; }
.cue-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-label { display: block; margin-bottom: 6px; font: 10px/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

.cue-field { display: flex; align-items: center; gap: 10px; }
.cue-field > .ico { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.cue-field > :not(.ico) { flex: 1; min-width: 0; }
.check.cue-field > input { flex: none; }
.ep-label .ico { width: 18px; height: 18px; }

/* "Publish" with nothing in it points at the button that adds a sound. */
.is-nudged { animation: nudge .6s var(--ease-out); box-shadow: inset 0 0 0 2px var(--panel-3), inset 0 0 0 3px var(--frame-hi), 0 0 26px rgba(var(--glow), .45); }

@keyframes nudge {
  0%, 100% { transform: none; }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@media (max-width: 900px) {
  .view--editor { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .editor-panel {
    height: auto;
    max-height: 50vh;
    max-height: 50dvh;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid var(--frame-mid);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .4);
  }
  .editor-panel.is-collapsed { max-height: 236px; overflow: hidden; }
  .editor-panel.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: linear-gradient(transparent, var(--bg-raise));
    pointer-events: none;
  }
  .ep-toggle { display: inline-grid; }
  .ep-more { display: flex; }
}

.ep-more { display: none; justify-content: center; }