/* The reading pages (/read/) and Josh's window pages (/admin/). On top of /styles.css.
   Kept here, not in styles.css, so a change shows on the next load: styles.css is
   cached for a day (_headers), this file isn't. */

[hidden] { display: none !important; }
a.btn { display: inline-block; text-decoration: none; }
.btn:disabled { opacity: 0.55; cursor: default; filter: none; transform: none; }
.btn-sm { padding: 0.45rem 1rem; font-size: 0.95rem; border-radius: 8px; }
.act { margin: 1.25rem 0 0; display: flex; gap: 0.65rem; flex-wrap: wrap; align-items: center; }

/* ---------- states every page shares ---------- */
/* A page waiting on its data: a line of type over a hairline with a glint running along it. */
.rd-loading {
  margin: 1.5rem 0 0; max-width: 16rem;
  font-family: var(--ff-util); font-size: 0.84rem; letter-spacing: 0.06em; color: var(--ink-faint);
}
.rd-loading::after {
  content: ""; display: block; height: 2px; margin-top: 0.55rem;
  background: linear-gradient(90deg, transparent, var(--electric-hot), transparent) no-repeat, rgba(28,34,48,0.10);
  background-size: 40% 100%, 100% 100%;
  animation: rd-sweep 1.1s ease-in-out infinite;
}
@keyframes rd-sweep { from { background-position: -70% 0, 0 0; } to { background-position: 170% 0, 0 0; } }

/* What an action did, risen at the foot of the screen (Rd.fnToast). */
.rd-toast {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 50;
  /* Its own width: centred from the middle, it would otherwise wrap at half the screen. */
  width: max-content; max-width: calc(100vw - 2rem); box-sizing: border-box;
  padding: 0.7rem 1.15rem 0.7rem 0.95rem;
  border: 1px solid var(--steel-edge); border-left: 3px solid var(--electric);
  border-radius: 2px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 100%);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7), 0 2px 6px -2px rgba(0,0,0,0.35);
  font-family: var(--ff-util); font-size: 0.84rem; letter-spacing: 0.05em; color: var(--ink);
  opacity: 0; transform: translate(-50%, 0.7rem); pointer-events: none;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rd-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.rd-toast[data-state="done"] { border-left-color: var(--gem-green); }
.rd-toast[data-state="done"]::before { content: "\2713"; margin-right: 0.6rem; color: var(--gem-green); font-weight: 600; }
.rd-toast[data-state="error"] { border-left-color: #A3231C; color: #7E1A15; }

/* A button while its action runs (Rd.fnWork): a glint crosses the chrome. Then, for a
   moment, what it did. */
.btn.is-working, .btn.is-done { opacity: 1; }
.btn.is-locked { opacity: 0.45; cursor: not-allowed; }
.btn.is-working { cursor: progress; }
.btn.is-working::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%) no-repeat;
  background-size: 60% 100%;
  animation: rd-sweep 0.9s linear infinite;
}
@keyframes rd-sweep { from { background-position: -150% 0; } to { background-position: 250% 0; } }
@keyframes rd-glint { from { background-position: -150% 0, 0 0; } to { background-position: 250% 0, 0 0; } }
.btn.is-done { color: var(--gem-green); border-color: var(--gem-green); }
.btn.go.is-done { color: #fff; }

@keyframes rd-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes rd-flash { from { background-color: rgba(46,155,255,0.38); } }
@media (prefers-reduced-motion: reduce) {
  .rd-loading::after, .btn.is-working::after { animation: none; }
  .composer, .note.is-new, .sel-btn:not([hidden]) { animation: none; }
}

/* Section headings (.rd-h) are styles.css's, shared with the account page. */
/* Where things stand, in the reading face (Josh, 2026-10-16: no more typewriter lines on these pages). */
.rd-meta {
  font-size: 0.95rem;
  color: var(--ink-2);
}
/* A block of its own (a window's state, a note above a chapter): a card edged in the page's gem,
   as the account's Reading cards are; green once finished, steel once closed. */
.rd-note {
  margin: 1.25rem 0 0;
  padding: 1rem 1.2rem 1.1rem;
  border: 1px solid rgba(28,34,48,0.14); border-left: 5px solid var(--gem-lit, var(--electric)); border-radius: 8px;
  background: rgba(255,255,255,0.5);
  max-width: var(--measure-prose);
}
.rd-note[data-state="done"] { border-left-color: var(--gem-green); }
.rd-note[data-state="closed"] { border-left-color: var(--steel-dark); }
.rd-note p { margin: 0; }
.rd-note p + p { margin-top: 0.4rem; }

/* ---------- lists of windows and chapters ---------- */
.rd-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure-prose); }
.rd-list li { border-bottom: 1px solid rgba(28,34,48,0.12); }
.rd-list a.rd-row, .rd-list .rd-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.8rem 0;
  color: inherit; text-decoration: none;
}
.rd-list a.rd-row:hover .rd-name { color: var(--electric); }
/* Chapters open in order: one not open yet is greyed and isn't a link. */
.rd-list .rd-row[data-state="locked"] { opacity: 0.5; }
.rd-name { font-family: var(--ff-display); font-size: 1.05rem; color: var(--ink); flex: 1 1 14rem; }
.rd-row .rd-meta { flex: 0 1 auto; min-width: 0; }
.rd-bar {
  flex: 1 0 100%;
  height: 4px;
  background: rgba(28,34,48,0.10);
  border-radius: 2px;
  overflow: hidden;
}
.rd-bar span { display: block; height: 100%; width: 0; background: var(--electric); }
.rd-bar[data-state="done"] span { background: var(--gem-green); }
.rd-bar span { transition: width 500ms ease; }
.rd-row .rd-sub { flex: 1 0 100%; margin-top: -0.1rem; }
.rd-note .rd-bar { margin: 0.6rem 0 0.35rem; }

/* Reading windows in a list (/read/, the account's Reading tab, Rd.fnWindowRow): a card each, edged in
   its book's gem, the name and where it stands at the left, the next thing to do at the right, the
   progress bar and counts across the foot. The whole card is the link. */
.rd-cards { display: grid; gap: 0.9rem; max-width: none; margin-top: 1rem; }
.rd-cards li { border-bottom: 0; }
.rd-card {
  display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1.2rem; align-items: center;
  padding: 1rem 1.2rem 1.1rem;
  border: 1px solid rgba(28,34,48,0.14); border-left: 5px solid var(--gem-lit, var(--electric)); border-radius: 8px;
  background: rgba(255,255,255,0.5); color: inherit; text-decoration: none;
  transition: background-color 140ms ease;
}
.rd-card:hover { background-color: rgba(255,255,255,0.82); }
.rd-card:focus-visible { outline: 2px solid var(--electric-hot); outline-offset: 2px; }
.rd-card-name { grid-column: 1; font-family: var(--ff-display); font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.rd-card-when { grid-column: 1; font-size: 1rem; color: var(--ink-2); }
.rd-card > .go, .rd-card > .btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; white-space: nowrap; }
.rd-card > .go { font-size: 1.02rem; padding: 0.65rem 1.3rem; }
.rd-card .rd-bar { grid-column: 1 / -1; margin: 0.55rem 0 0.1rem; }
.rd-card-count { grid-column: 1 / -1; font-size: 0.95rem; color: var(--ink-2); }
/* A window's chapters and previews (window.html): the same cards a size down, with no button of their own
   (the window's card holds the one next step). A chapter not open yet is greyed and isn't a link. */
.rd-ch .rd-card-name { font-size: 1.15rem; }
.rd-ch .rd-card-when { font-size: 1rem; }
/* A chapter title's date, on its own smaller line (Rd.fnTitled; 2026-10-17). */
.title-date { display: block; margin-top: 0.1em; font-family: var(--ff-body); font-size: 0.72em; letter-spacing: 0.03em; color: var(--ink-3); }
.chapter-title .title-date { font-size: 0.55em; margin-top: 0.3em; }
/* On a phone (2026-10-17) the chapter cards are slimmer, and one not open yet drops its empty bar. */
@media (max-width: 46rem) {
  .rd-cards:has(.rd-ch) { gap: 0.55rem; }
  .rd-ch { gap: 0.1rem 1rem; padding: 0.6rem 0.9rem 0.7rem; }
  .rd-ch .rd-card-name { font-size: 1.08rem; }
  .rd-ch .rd-card-when { font-size: 0.92rem; line-height: 1.45; }
  .rd-ch .rd-bar { margin-top: 0.35rem; }
  .rd-ch[data-state="locked"] .rd-bar { display: none; }
}
/* On the window page the three blocks (the window, its chapters, the whole-book questions) share one width. */
#window > .rd-note, #book-qs > .qn, #pitch-join { max-width: none; }
.rd-note .rd-meta { font-size: 1rem; }
.rd-ch .rd-bar { margin-bottom: 0; }
.rd-card[data-state="locked"] { opacity: 0.55; }
.rd-card[data-state="locked"]:hover { background-color: rgba(255,255,255,0.5); }
@media (max-width: 30rem) {
  .rd-card { grid-template-columns: 1fr; }
  .rd-card > .go, .rd-card > .btn { order: 1; grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.5rem; }
}
.rd-note .act { margin-top: 0.85rem; }

/* ---------- questionnaires ---------- */
/* Each set of questions is a card edged in the page's gem (Josh, 2026-10-16). Alone under its own
   section heading (the window page's whole-book questions), it doesn't repeat its title. */
.qn {
  margin: 1.25rem 0 0; max-width: var(--measure-prose);
  padding: 1.1rem 1.3rem 1.3rem;
  border: 1px solid rgba(28,34,48,0.14); border-left: 5px solid var(--gem-lit, var(--electric)); border-radius: 8px;
  background: rgba(255,255,255,0.5);
}
#book-qs > .qn:only-child > h3 { display: none; }
#book-qs > .qn:only-child > h3 + * { margin-top: 0; }
.qn h3 { margin: 0 0 0.25rem; font-family: var(--ff-display); font-weight: 400; font-size: 1.2rem; color: var(--ink); }
.qn fieldset { position: relative; margin: 1.1rem 0 0; padding: 0; border: 0; min-width: 0; }
/* The question floats, so it sits inside its fieldset (a fieldset's own question straddles its top edge) and the red
   mark below can run its whole height. */
.qn legend { float: left; width: 100%; padding: 0; margin: 0 0 0.45rem; color: var(--ink); }
.qn fieldset > :not(legend) { clear: both; }
.qn > .rd-meta[data-state="done"] { color: var(--gem-green); }
.qn > .rd-meta[data-state="done"]::before { content: "\2713"; margin-right: 0.45rem; font-weight: 600; }
.qn > .rd-meta[data-state="changed"] { color: var(--electric-deep); }
/* A question not answered when the answers were sent: a red bar down its left, clear of the words (2026-10-17). */
.qn fieldset.is-missing::before { content: ""; position: absolute; left: -0.8rem; top: 0.25rem; bottom: 0.1rem; width: 3px; border-radius: 2px; background: #A3231C; }
.qn fieldset.is-missing legend { color: #A3231C; }
.said { color: #A3231C; }
.qn-choices label, .qn-scale label { transition: background-color 120ms ease, border-color 120ms ease; }
.qn-scale label:hover { border-color: var(--gem-lit, var(--electric)); }
.qn-choices label:hover span { color: var(--electric-deep); }
/* The window settings' sign-up box, and each chapter's Preview box on the admin window page. */
.adm-form label.adm-check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--ink); }
.adm-form label.adm-check input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; }
.adm-form textarea.rd-text { min-height: 9rem; }
.adm-preview { display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; font-size: 0.9rem; color: var(--ink-2); cursor: pointer; }

/* A window's pitch (window.html): Josh's notes on the work, in the reading face. */
.rd-pitch { max-width: var(--measure-prose); }
.rd-pitch p { margin: 0.9rem 0 0; font-size: 1.05rem; color: var(--ink); }
#pitch-join { margin-top: 1.6rem; }
#pitch-join p { margin: 0; }
#pitch-join .act { margin-top: 0.9rem; }

/* A closed window's questions: the reader's answers as given, read only (questions.js). */
.qn-said { margin: 0.4rem 0 0; }
.qn-said dt { margin: 0.9rem 0 0; color: var(--ink); }
.qn-said dd { margin: 0.25rem 0 0; padding-left: 0.9rem; border-left: 2px solid var(--gem-lit, var(--electric)); color: var(--ink-2); white-space: pre-wrap; }
.qn-said dd.is-none { color: var(--ink-faint); font-style: italic; }
.qn .opt, .qn-dialog .opt { font-size: 0.9rem; font-style: italic; color: var(--ink-3); margin-left: 0.4rem; }
.qn textarea, .rd-input, .rd-text {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--steel-edge);
  border-radius: 2px;
}
.qn textarea { min-height: 5.5rem; resize: vertical; }
/* On a touch screen the writing boxes are 16px (2026-10-17): an iPhone zooms the page in on a smaller one and leaves it. */
@media (pointer: coarse) { .qn textarea, .rd-input, .rd-text { font-size: 1rem; } }
.qn textarea:focus, .rd-input:focus, .rd-text:focus { outline: 2px solid var(--electric-hot); outline-offset: 1px; }
.qn-choices { display: flex; flex-direction: column; gap: 0.3rem; }
.qn-choices label { display: flex; gap: 0.5rem; align-items: baseline; cursor: pointer; }
/* A scale (2026-10-17): the line saying what its ends mean, the boxes sharing the row (up to 28rem wide), and the
   end labels under the first and last box, half the row each, wrapping within it when long. */
.qn-scale-say { margin: 0 0 0.45rem; font-size: 0.95rem; color: var(--ink-2); }
.qn-scale { display: flex; gap: 0.4rem; max-width: 28rem; }
.qn-scale-ends { display: flex; justify-content: space-between; gap: 1rem; max-width: 28rem; margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.3; color: var(--ink-2); }
.qn-scale-ends span { flex: 0 1 50%; }
.qn-scale-ends span:last-child { text-align: right; }
/* A box grows to fit its words, for a scale whose points are words (2026-10-17: "No different" was cut). */
.qn-scale label {
  display: flex; flex: 1 1 0; align-items: center; justify-content: center;
  min-width: 0; min-height: 2.4rem; padding: 0.25rem 0.2rem; line-height: 1.2; text-align: center;
  border: 1px solid var(--steel-edge); border-radius: 2px;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 1rem;
}
.qn-scale input { position: absolute; opacity: 0; pointer-events: none; }
.qn-scale input:checked + span { color: #fff; }
.qn-scale label:has(input:checked) { background: var(--gem-lit, var(--electric)); border-color: color-mix(in srgb, var(--gem-lit, var(--electric)) 70%, #000); color: #fff; }
.qn-scale label:has(input:focus-visible) { outline: 2px solid var(--electric-hot); outline-offset: 1px; }

/* On a phone (Josh, 2026-10-17): each question is its words and its answer's row, Answer (a button) or the answer
   with Change; a tap opens the popup (questions.js). The form's own inputs are hidden there, and the row on desk. */
.qn fieldset > .qn-tap { display: none; }
@media (max-width: 46rem) {
  .qn fieldset > .qn-scale-say, .qn fieldset > .qn-scale, .qn fieldset > .qn-scale-ends,
  .qn fieldset > .qn-choices, .qn fieldset > textarea { display: none; }
  .qn fieldset > .qn-tap { display: flex; }
  .qn fieldset > .btn.qn-tap { display: inline-flex; padding: 0.55rem 1.6rem; }
}
.qn-tap.is-have {
  align-items: center; gap: 0.75rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.8rem; box-sizing: border-box;
  border: 1px solid var(--steel-edge); border-left: 3px solid var(--gem-lit, var(--electric)); border-radius: 3px;
  background: rgba(255,255,255,0.75); font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.qn-tap-val { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qn-tap.is-have .qn-tap-act { flex: 0 0 auto; font-size: 0.95rem; color: color-mix(in srgb, var(--gem-lit, var(--electric)) 62%, #000); }
.qn-tap.is-have:focus-visible { outline: 2px solid var(--electric-hot); outline-offset: 1px; }
.qn-dialog { width: min(30rem, calc(100% - 1.5rem)); }
.qn-dialog.is-text { margin-top: 0.75rem; }
.qn-dialog-q { margin: 0 2rem 0.9rem 0; font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.qn-pick { display: flex; flex-direction: column; gap: 0.5rem; }
.qn-opt {
  display: flex; align-items: center; gap: 0.9rem; width: 100%; min-height: 3rem; padding: 0.5rem 0.9rem; box-sizing: border-box;
  border: 1px solid var(--steel-edge); border-radius: 3px; background: rgba(255,255,255,0.85);
  font: inherit; font-size: 1.05rem; line-height: 1.3; color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.qn-opt b { flex: 0 0 1.4rem; font-weight: 600; text-align: center; }
.qn-opt span { color: var(--ink-2); }
.qn-opt[aria-pressed="true"] { background: var(--gem-lit, var(--electric)); border-color: color-mix(in srgb, var(--gem-lit, var(--electric)) 70%, #000); color: #fff; }
.qn-opt[aria-pressed="true"] span { color: #fff; }
.qn-opt:focus-visible { outline: 2px solid var(--electric-hot); outline-offset: 1px; }
.qn-dialog-text { display: block; width: 100%; min-height: 9rem; box-sizing: border-box; padding: 0.6rem 0.75rem; resize: vertical;
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--steel-edge); border-radius: 2px; }
.qn-dialog-text:focus { outline: 2px solid var(--electric-hot); outline-offset: 1px; }
.qn-dialog .act { margin: 0.9rem 0 0; }

/* ---------- the reading page ---------- */
/* The chapter's progress across the top of the window: a track, filling. */
.rd-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: 3px;
  background: rgba(120,138,162,0.28);
}
.rd-progress span {
  display: block; height: 100%; width: 0;
  background: var(--electric-hot);
  box-shadow: 0 0 6px rgba(46,155,255,0.6);
  transition: width 600ms ease;
}
.rd-progress[data-state="done"] span { background: var(--gem-green); box-shadow: none; }
.rd-meta .pct { color: var(--ink-3); }
.rd-meta a { color: var(--electric-deep); }
#read-state { margin-top: 1.5rem; }
#read-state[data-state="done"] { color: var(--gem-green); }
#read-state[data-state="done"]::before { content: "\2713"; margin-right: 0.5rem; font-weight: 600; }

.chapter-title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 34rem;
}

/* The chapter on its own sheet of paper laid on the plate (Josh, 2026-10-16): the title, the epigraph and
   the text. Its side padding holds the read marks (left) and the whole-paragraph comment strip (right). */
.sheet {
  --sheet-x: 2.25rem;
  max-width: calc(34rem + 2 * var(--sheet-x));
  /* Out into the plate's margin by its own padding, so the text lines up with the title bar above it
     and the paper's inner margin doesn't crowd the text (Josh, 2026-10-16). */
  margin: 1.75rem 0 0 calc(-1 * var(--sheet-x));
  padding: 2.4rem var(--sheet-x) 2.75rem;
  box-sizing: border-box;
  background: linear-gradient(180deg, #FCFAF5 0%, #F8F4EC 100%);
  border: 1px solid rgba(60,52,36,0.16);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(20,24,32,0.10), 0 14px 34px -18px rgba(20,28,40,0.55);
}
.sheet::after { content: ""; display: table; clear: both; }
@media (max-width: 46rem) {
  .sheet { --sheet-x: 1rem; padding-top: 1.6rem; padding-bottom: 2rem; margin-right: calc(-1 * var(--sheet-x)); max-width: none; }
}
.text {
  max-width: 34rem;
  margin: 2rem 0 0;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
  line-height: 1.75;
  color: var(--ink);
  hyphens: auto;
  -webkit-hyphens: auto;
}
.text p { margin: 0; text-indent: 1.5em; }
/* No indent where a passage opens: the chapter's first paragraph, and after a scene
   break, an epigraph or a heading. A .notes can sit between, in the margin. */
.text > p:first-child, .text > .notes:first-child + p,
.text hr + p, .text hr + .notes + p,
.text .scene-break + p, .text .scene-break + .notes + p,
.text .epigraph + p, .text .epigraph + .notes + p,
.text h2 + p, .text h3 + p, .text .block-heading + p, .text .block-heading + .notes + p,
.text p.noindent, .text p.align-center, .text p.align-right, .text p.align-left { text-indent: 0; }
.text p.align-center { text-align: center; }
.text p.align-right { text-align: right; }

/* SyPub's EPUB class names, so a chapter reads here as it does in the book. Every scene
   break shows the same mark; images aren't served yet, so an ornament's is hidden. */
.text hr, .text .scene-break {
  border: 0; height: auto; margin: 1.4em 0; text-align: center; text-indent: 0; color: var(--ink-faint);
}
.text .scene-break > * { display: none; }
.text hr::after, .text .scene-break::after { content: "\2042"; font-size: 1.1em; letter-spacing: 0.3em; }

.text .epigraph { margin: 0 2.5em 2em; font-style: italic; font-size: 0.94em; line-height: 1.6; color: var(--ink-2); }
.text .epigraph p { text-indent: 0; }
.text .epigraph-attribution { margin-top: 0.4em; text-align: right; font-style: normal; font-size: 0.9em; color: var(--ink-3); }

.text .block-heading {
  margin: 1.5em 0 0.8em; text-align: center; text-indent: 0;
  font-family: var(--ff-display); font-weight: 400; font-size: 1em; letter-spacing: 0.04em;
}
.text .journal { margin: 1.2em 0 1.2em 1.5em; padding-left: 0.9em; border-left: 1px solid rgba(28,34,48,0.18); font-size: 0.95em; }
/* On a phone (Josh, 2026-10-17): a narrow margin, the journal marked by its rule and a shading that fades from it. */
@media (max-width: 46rem) {
  .text .journal {
    margin-left: 0; padding-left: 0.8em; border-left: 3px solid rgba(60,52,36,0.32);
    background: linear-gradient(90deg, rgba(60,52,36,0.1) 0, rgba(60,52,36,0) 2.6em);
  }
}
.text .journal p { text-indent: 0; margin-bottom: 0.7em; }
.text .journal p:last-child { margin-bottom: 0; }
.text .journal-day { margin: 1.2em 0 0.5em; text-align: center; font-weight: 600; letter-spacing: 0.09em; font-size: 0.9em; }
.text .journal .journal-day:first-child { margin-top: 0; }
.text .verse { margin: 1em 0 1em 2em; }
.text .verse-line { text-indent: -1em; padding-left: 1em; }
.text .verse-line.stanza { margin-top: 0.8em; }
.text { position: relative; }
.text ::selection { background: rgba(46,155,255,0.30); }
.text [data-pid] { position: relative; border-radius: 2px; transition: background-color 140ms ease, box-shadow 140ms ease; }
/* The paragraph a comment is about to be on (the margin strip is under the mouse), and
   the one a comment is being written on. The shadow carries the tint past the text's edges. */
.text [data-pid].is-aim { background: rgba(46,155,255,0.06); box-shadow: 0 0 0 0.3rem rgba(46,155,255,0.06); }
.text [data-pid].is-target { background: rgba(46,155,255,0.09); box-shadow: 0 0 0 0.3rem rgba(46,155,255,0.09); }

/* Read marks: a line in the left margin beside each paragraph that fills, top to bottom,
   as the reader's time on it adds up (--rd, 0 to 1, set by the script). It glows on the
   paragraph whose time is counting now, and settles to green once the paragraph is read.
   --rdx (script) brings an indented block's mark back out to the text's left edge. */
@property --rd { syntax: "<number>"; inherits: false; initial-value: 0; }
.text [data-pid]::before {
  content: ""; position: absolute; left: calc(var(--rdx, 0px) - 1.15rem); top: 0.4em; bottom: 0.4em; width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, var(--electric-hot) 0, var(--electric) calc(var(--rd) * 100%), rgba(28,34,48,0.10) calc(var(--rd) * 100%));
  transition: --rd 1s linear, box-shadow 300ms ease;
}
.text [data-pid].is-reading::before { box-shadow: 0 0 7px 1px rgba(46,155,255,0.55); }
.text [data-pid][data-read]::before { background: rgba(30,138,90,0.6); box-shadow: none; }
@media (max-width: 46rem) {
  .text [data-pid]::before { left: calc(var(--rdx, 0px) - 0.8rem); }
}

mark.cmt {
  color: inherit;
  background: rgba(46,155,255,0.16);
  border-bottom: 1px solid rgba(11,111,212,0.55);
  cursor: pointer;
}
mark.cmt.is-hot { background: rgba(46,155,255,0.32); }
/* Josh's view of an entry (&look=, from the window page's Comments tab): no read marks; the comment he came
   to see stays marked in the page's gem, its words, its note, and for a whole paragraph or a picture the block. */
.text.is-look [data-pid]::before { display: none; }
mark.cmt.is-looked { background: color-mix(in srgb, var(--gem-lit, var(--electric)) 30%, transparent); border-bottom: 2px solid var(--gem-lit, var(--electric)); }
.text.is-look [data-pid].is-looked::before { display: block; width: 3px; background: var(--gem-lit, var(--electric)); box-shadow: none; }
.note.is-looked { outline: 2px solid var(--gem-lit, var(--electric)); outline-offset: 1px; }
.note .rd-meta .who { font-weight: 600; color: var(--ink); }

/* Comment on the whole paragraph: one strip in the right margin, the paragraph's height,
   which the script moves beside whichever paragraph the mouse is over. It starts at the
   text's edge, so the mouse never crosses a gap to reach it, and the whole strip is the
   button: a hairline down the paragraph's side with a small tab at its top. It's never
   inside a paragraph, so it never counts in the paragraph's text. */
.pc {
  position: absolute; left: 100%; z-index: 5;
  width: 1.75rem; padding: 0; margin: 0;
  border: 0; background: none;
  text-indent: 0;
  cursor: pointer;
}
.pc::before {
  content: ""; position: absolute; left: 1.1rem; top: 1.6rem; bottom: 0.3rem; width: 1px;
  background: var(--steel-edge); opacity: 0.55;
  transition: background-color 120ms ease, opacity 120ms ease;
}
.pc span {
  position: absolute; left: 0.45rem; top: 0.2rem;
  width: 1.3rem; height: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--steel-edge); border-radius: 2px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF1F6 50%, #DCE3EB 100%);
  box-shadow: 0 1px 2px rgba(60,78,100,0.25);
  color: var(--electric-deep);
  font: 500 0.95rem/1 var(--ff-util);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pc:hover::before, .pc:focus-visible::before { background: var(--electric); opacity: 1; }
.pc:hover span, .pc:focus-visible span { background: var(--electric); border-color: var(--electric-deep); color: #fff; }
.pc:focus-visible { outline: none; }
@media (max-width: 46rem) {
  .pc { width: 1.3rem; }
  .pc span { left: 0.15rem; width: 1.1rem; height: 1.1rem; }
  .pc::before { left: 0.7rem; }
}

/* The button that appears by a selection. Placed by script, in page coordinates. */
.sel-btn {
  position: absolute; z-index: 30;
  color: #fff; text-shadow: none;
  border-color: var(--electric-deep);
  background: linear-gradient(180deg, var(--electric-hot) 0%, var(--electric) 55%, var(--electric-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 18px -6px rgba(0,0,0,0.55);
}
.sel-btn:not([hidden]) { animation: rd-in 140ms ease-out; }
/* On a touch screen (2026-10-17): pinned to the foot of the screen while words are selected, clear of the phone's own
   drag handles under the selection and its menu above it (chapter.js). */
.sel-btn.is-bar {
  position: fixed; left: 0.75rem; right: 0.75rem; top: auto; bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  padding: 0.8rem 1rem; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; text-align: center;
}
/* The composer's switch, for a comment begun on selected words: those words, or the whole paragraph (2026-10-17). */
.cmt-scope { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.cmt-scope button {
  padding: 0.3rem 0.8rem; border: 1px solid var(--steel-edge); border-radius: 999px; background: rgba(255,255,255,0.85);
  font: inherit; font-size: 0.9rem; line-height: 1.3; color: var(--ink-2); cursor: pointer;
}
.cmt-scope button[aria-pressed="true"] { background: var(--electric); border-color: var(--electric-deep); color: #fff; }
.cmt-scope button:focus-visible { outline: 2px solid var(--electric-hot); outline-offset: 1px; }
@media (pointer: coarse) { .cmt-scope button { padding: 0.5rem 0.95rem; } }

/* A comment being written: always under its paragraph. */
.composer {
  margin: 0.8rem 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--steel-edge);
  border-left: 3px solid var(--electric);
  border-radius: 3px;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 8px 22px -14px rgba(0,0,0,0.5);
  text-indent: 0;
  font-size: 0.95rem;
  animation: rd-in 160ms ease-out;
}
.text .composer p, .text .notes p { text-indent: 0; }
.composer .quote { margin: 0 0 0.5rem; font-style: italic; color: var(--ink-3); }
.composer .quote.whole, .note .quote.whole { font-style: normal; font-family: var(--ff-util); font-size: 0.84rem; letter-spacing: 0.06em; }
.composer textarea { min-height: 5rem; resize: vertical; }
.composer .act { margin-top: 0.6rem; }
.composer .hint { margin-left: auto; }

/* Saved comments. Under their paragraph on narrow screens; in the right margin, level
   with their paragraph, on wide ones (the script moves each .notes before or after its
   paragraph to suit). */
.notes { text-indent: 0; font-size: 0.86rem; line-height: 1.5; }
.note {
  margin: 0.5rem 0 0.9rem;
  padding: 0.55rem 0.7rem;
  border-left: 2px solid var(--electric);
  background: rgba(255,255,255,0.55);
  color: var(--ink-2);
}
.note { transition: background-color 160ms ease, opacity 200ms ease; }
.note.is-hot { background: rgba(214,232,255,0.9); }
.note.is-new { animation: rd-flash 1.8s ease-out; }
.note.is-going { opacity: 0; }
.note .quote { margin: 0 0 0.3rem; font-style: italic; color: var(--ink-faint); }
.note .body { margin: 0; white-space: pre-wrap; }
.note .rd-meta { margin-top: 0.4rem; display: flex; gap: 0.3rem 0.7rem; flex-wrap: wrap; align-items: baseline; }
.note .rd-meta .when { margin-right: auto; }
.note .act { margin-top: 0.45rem; }
.note .lnk {
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; color: var(--electric-deep); text-decoration: underline;
}
.note textarea { margin-top: 0.3rem; min-height: 4rem; }

/* Narrow screens (Josh, 2026-10-17: comments under their paragraphs broke reading straight through): the notes in
   the text are hidden, the commented words stay marked, and a tap brings the paragraph's comments up in a sheet at
   the foot of the screen (the script moves them in and back). A comment with no words of its own (a whole
   paragraph, a picture) shows as a dot in the right margin beside its paragraph's last line. */
.text .notes:not(.is-side):not(.is-open) { position: relative; height: 0; margin: 0; padding: 0; }
.text .notes:not(.is-side):not(.is-open) > .note { display: none; }
.cmt-dot { display: none; }
.text .notes.has-dot:not(.is-side):not(.is-open) > .cmt-dot {
  display: block; position: absolute; right: -1.25rem; bottom: 0; width: 1.6rem; height: 1.6rem; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.cmt-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.6rem; height: 0.6rem; margin: -0.3rem 0 0 -0.3rem;
  border-radius: 50%; background: var(--gem-lit, var(--electric)); box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}
.cmt-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 55vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%); border-top: 3px solid var(--gem-lit, var(--electric));
  box-shadow: 0 -14px 34px -14px rgba(0,0,0,0.5); transform: translateY(105%); visibility: hidden;
  transition: transform 200ms ease, visibility 0s linear 200ms;
}
.cmt-sheet.is-open { transform: none; visibility: visible; transition: transform 200ms ease; }
.cmt-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.6rem 0.2rem 1rem;
  font-family: var(--ff-display); font-size: 1.05rem; color: var(--ink); }
.cmt-sheet-x { padding: 0.1rem 0.5rem; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink-3); cursor: pointer; }
.cmt-sheet-body { overflow-y: auto; padding: 0 1rem 0.9rem; }
.cmt-sheet .notes { font-size: 0.95rem; }
.cmt-sheet .note { margin: 0.4rem 0 0.6rem; }
@media (prefers-reduced-motion: reduce) { .cmt-sheet, .cmt-sheet.is-open { transition: none; } }

@media (min-width: 64rem) {
  /* The sheet leaves the plate's right-hand 13rem to the comments, which sit beside the paragraph
     they're on, out past the sheet's edge. */
  .reader .sheet { margin-right: 13rem; }
  .reader .notes.is-side {
    float: right; clear: right;
    width: 11.75rem;
    margin: 0 calc(-13rem - var(--sheet-x)) 0 0;
  }
  .reader .notes.is-side .note { margin-top: 0; }
  .reader .chapter-end { margin-right: 13rem; }
}

/* What follows the sheet lines up with it. */
.chapter-end { clear: both; margin-top: 2.5rem; max-width: calc(34rem + 4.5rem); }
/* The note on how to comment, above the sheet, in the reading face. */
.reader > .fineprint { font-family: var(--ff-body); font-size: 0.95rem; letter-spacing: normal; color: var(--ink-2); max-width: var(--measure-prose); }
.chapter-nav { display: flex; justify-content: space-between; gap: 0.65rem; flex-wrap: wrap; margin-top: 2.75rem; }

/* ---------- Josh's pages ---------- */
/* Bordered blocks must avoid the Admin float as whole boxes. Plain text still wraps
   around it, and blocks below it recover their normal width. */
.acct-body .rd-note, .acct-body .rd-list > li { display: flow-root; }
/* Tab labels must fit the space beside the menu (and narrow phone screens). */
.wrap > .tabs, .acct-body .tabs, .acct-body .tabs-group { flex-wrap: wrap; row-gap: 0; }
.adm-grid-wrap { overflow-x: auto; max-width: 100%; }
.adm-grid { border-collapse: collapse; font-size: 0.85rem; min-width: 100%; }
.adm-grid th, .adm-grid td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(28,34,48,0.12); text-align: left; vertical-align: top; }
.adm-grid th { font-family: var(--ff-util); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--ink-faint); text-transform: uppercase; }
.adm-grid td.num { font-family: var(--ff-util); font-size: 0.8rem; text-align: right; white-space: nowrap; }
.adm-grid th.num { text-align: right; }
.adm-grid td.done { color: var(--gem-green); }
.adm-grid td .rd-bar { margin: 0.3rem 0 0 auto; height: 3px; width: 3rem; }
.adm-grid tr { transition: background-color 140ms ease; }
.adm-grid tr:hover td { background: rgba(255,255,255,0.35); }
.adm-grid tr.is-new td { animation: rd-flash 1.8s ease-out; }
.adm-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.8rem 1rem; max-width: var(--measure-prose); }
.adm-form label { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--ff-util); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-faint); }
.adm-form .wide { grid-column: 1 / -1; }
.adm-form .rd-input, .adm-form .rd-text, .act .rd-input { font-family: var(--ff-body); letter-spacing: normal; }
.adm-form .rd-text { min-height: 3.5rem; resize: vertical; }
.adm-form .adm-check { flex-direction: row; align-items: center; gap: 0.4rem; align-self: end; padding-bottom: 0.6rem; }
.adm-form .adm-form { max-width: none; }
/* A window's form in a popup (Josh, 2026-10-17): adding one on /admin/ and editing one on its page (Adm.fnWindowDialog).
   Labels in the body type. */
.win-dialog { width: min(42rem, calc(100% - 1.5rem)); max-height: calc(100% - 1.5rem); padding: 1.3rem clamp(1rem, 4vw, 1.6rem) 1.4rem;
  border: 1px solid var(--steel-4); border-top: 3px solid var(--gem-lit, var(--electric)); border-radius: 6px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%); color: var(--ink-2); box-shadow: 0 30px 70px -20px rgba(0,0,0,0.9); }
.win-dialog::backdrop { background: rgba(7,10,17,0.72); }
.win-dialog-h { margin: 0 2rem 0.6rem 0; font-family: var(--ff-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); }
.win-close { float: right; margin: -0.5rem -0.5rem 0 0; padding: 0.2rem 0.6rem; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink-3); cursor: pointer; }
.win-form { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.55rem 0.8rem; max-width: none; align-items: end; }
.win-form label { font-family: var(--ff-body); font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.win-form .rd-input { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.win-form textarea.rd-text { min-height: 5.5rem; }
/* On a phone: the title, id, work and dates a line each, the four numbers two to a line. */
@media (max-width: 34rem) { .win-form { grid-template-columns: 1fr 1fr; } .win-form > label.line { grid-column: 1 / -1; } }
/* The works on /admin/ (Josh, 2026-10-17): a row each, edged in its gem; the popup's gem picker. */
.works { display: grid; gap: 0.5rem; max-width: var(--measure-prose); margin: 0.6rem 0 0; padding: 0; list-style: none; }
.works li { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.9rem; border: 1px solid var(--steel-4);
  border-left: 4px solid var(--gem-lit, var(--steel-edge)); border-radius: 4px; background: rgba(255,255,255,0.62); }
.work-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.8rem; }
.work-name { font-family: var(--ff-display); font-size: 1.1rem; color: var(--ink); }
.gem-picks { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.gem-picks legend { padding: 0; margin: 0 0 0.35rem; font-family: var(--ff-body); font-size: 0.95rem; color: var(--ink-2); }
.adm-form .gem-picks label { flex-direction: row; align-items: center; gap: 0.35rem; cursor: pointer; color: var(--ink); }
.gem-picks input { margin: 0; }
.gem-dot { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--gem-lit);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.5); }
.adm-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin: 1.25rem 0 0; font-family: var(--ff-util); font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; }
.adm-nav a { color: var(--electric-deep); text-decoration: none; }
.adm-nav a:hover { color: var(--electric); }
.adm-sub { margin: 1.5rem 0 0.4rem; font-family: var(--ff-display); font-weight: 400; font-size: 1rem; color: var(--ink); }
.adm-email { flex: 1 1 16rem; width: auto; }
.adm-lnk {
  border: 0; padding: 0; background: none; cursor: pointer;
  font-family: var(--ff-util); font-size: 0.84rem; letter-spacing: 0.06em; color: var(--electric-deep); text-decoration: underline;
}
.adm-lnk:disabled { color: var(--ink-faint); text-decoration: none; cursor: default; }
.rd-row .adm-lnk { flex: 0 0 auto; }
.adm-filters { margin-bottom: 0.5rem; }
/* Archive or delete, and the files nothing uses (Josh, 2026-10-17). Deleting fills red, as deleting the account does. */
.adm-say { margin: 0 0 0.6rem; max-width: var(--measure-prose); color: var(--ink-2); }
.btn.adm-danger { --gem-lit: #A3231C; }
.adm-danger-box { margin: 1.4rem 0 0; padding: 1rem 1.1rem 0.2rem; max-width: var(--measure-prose); border: 1px solid rgba(163,35,28,0.35); border-radius: 3px; background: rgba(163,35,28,0.04); }
.adm-danger-box p { margin: 0 0 0.8rem; }
.adm-danger-box .act { margin-top: 0.9rem; }
.rd-list .adm-orphan { align-items: center; }
.adm-orphan .rd-name { flex: 1 1 100%; }
.adm-orphan code { font-family: var(--ff-util); font-size: 0.9rem; overflow-wrap: anywhere; }
.adm-orphan .rd-meta { flex: 1 1 14rem; }
.adm-orphan .btn { flex: 0 0 auto; }
/* People and a member's page (Josh, 2026-10-17). */
.adm-find { margin-bottom: 0.8rem; }
.adm-empty { padding: 0.8rem 0; }
.adm-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; flex: 1 0 100%; }
.adm-tag { padding: 0.12rem 0.5rem; border: 1px solid rgba(28,34,48,0.22); border-radius: 999px; font-family: var(--ff-util); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-2); }
.adm-tag.is-bad { border-color: rgba(163,35,28,0.5); color: #8E1F18; background: rgba(163,35,28,0.06); }
.adm-person-head { display: flex; align-items: center; gap: 1rem; }
.adm-person-head .adm-say { margin: 0.2rem 0 0; }
.adm-face { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; overflow: hidden;
  border-radius: 50%; background: linear-gradient(160deg, #5B3FA0, #2E1F5C); color: #FFFFFF; font-family: var(--ff-display); font-size: 1.6rem; }
.adm-face:empty { display: none; }
.adm-face img { width: 100%; height: 100%; object-fit: cover; }
.adm-flag { margin: 0 0 0.6rem; padding: 0.6rem 0.8rem; max-width: var(--measure-prose); border-left: 3px solid #A3231C; background: rgba(163,35,28,0.06); color: #6E1812; }
.adm-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.2rem; margin: 0; max-width: var(--measure-prose); }
.adm-facts dt { font-family: var(--ff-util); font-size: 0.84rem; letter-spacing: 0.04em; color: var(--ink-faint); padding-top: 0.15rem; }
.adm-facts dd { margin: 0; overflow-wrap: anywhere; }
.adm-act { margin: 0 0 1.2rem; max-width: var(--measure-prose); }
.adm-act .adm-sub, .adm-danger-box .adm-sub { margin-top: 0; }
.adm-acts .rd-name { font-family: var(--ff-body); font-size: 1rem; }
@media (max-width: 34rem) { .adm-facts { grid-template-columns: 1fr; gap: 0.1rem; } .adm-facts dd { margin-bottom: 0.5rem; } }
.btn.is-armed { --gem-lit: #A3231C; background: #A3231C; border-color: #A3231C; color: #FFFFFF; }
.adm-cmt {
  margin: 0.5rem 0; padding: 0.55rem 0.8rem; max-width: var(--measure-prose);
  border-left: 2px solid var(--electric); background: rgba(255,255,255,0.55);
  font-size: 0.92rem; line-height: 1.5; color: var(--ink-2);
}
.adm-cmt p { margin: 0; }
.adm-cmt .quote { margin-bottom: 0.3rem; font-style: italic; color: var(--ink-faint); }
.adm-cmt .body { white-space: pre-wrap; }
.adm-cmt .rd-meta { margin-top: 0.3rem; }
.adm-qn { max-width: var(--measure-prose); }
.adm-tq { margin: 1rem 0 0; }
.adm-qtext { margin: 0 0 0.35rem; color: var(--ink); }
.adm-tally { display: grid; grid-template-columns: auto minmax(6rem, 1fr) auto; gap: 0.25rem 0.7rem; align-items: center; max-width: 30rem; font-size: 0.85rem; }
.adm-tally .bar { height: 0.55rem; background: rgba(28,34,48,0.08); border-radius: 2px; overflow: hidden; }
.adm-tally .bar span { display: block; height: 100%; background: var(--electric); }
.adm-tally .n { font-family: var(--ff-util); font-size: 0.8rem; text-align: right; }
.adm-ed { margin: 1rem 0 0; padding: 1rem; border: 1px solid var(--steel-edge); border-radius: 3px; background: rgba(255,255,255,0.45); max-width: var(--measure-prose); }
.adm-ed .adm-sub { margin-top: 0; }
.adm-q { margin: 0.9rem 0 0; padding: 0.75rem; border: 1px solid rgba(28,34,48,0.15); background: rgba(255,255,255,0.5); }
.adm-qhead { margin: 0 0 0.5rem; display: flex; gap: 0.9rem; align-items: baseline; }
.adm-qhead .rd-meta { flex: 1 1 auto; }

/* ---------- pictures ----------
   A figure is a block like a paragraph. An image entry (the cover, a map) takes the page's
   width; a figure in a chapter, the text's. A tap opens the picture full size, or, while a
   comment on it is being written, puts a point there. */
.text figure { margin: 1.6rem 0 0; text-align: center; text-indent: 0; }
.text figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; cursor: zoom-in; border: 1px solid var(--steel-edge); }
.text.is-picture { max-width: none; }
.text.is-picture figure img { width: 100%; }
.text figure figcaption { margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.5; font-style: italic; color: var(--ink-faint); }
.text figure .figure-link { margin-top: 0.35rem; font-family: var(--ff-util); font-size: 0.84rem; text-indent: 0; }
.text figure.is-pointing img { cursor: crosshair; outline: 2px dashed var(--electric); outline-offset: 3px; }
.text .chapter-topper img { display: block; max-width: 40%; height: auto; margin: 0 auto 1rem; }
.text .figtools {
  margin: 0.45rem 0 1.4rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  font-family: var(--ff-util); font-size: 0.84rem; letter-spacing: 0.04em; text-indent: 0;
}
.text .figtools a, .text .figtools .lnk {
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; color: var(--electric-deep); text-decoration: underline;
}
.composer .pic-hint, .note .pic-hint { margin: 0 0 0.4rem; }

/* The lines from a comment to its places on a picture: white under black dashes, so they show
   on any part of the picture; the places, black ringed in white. Drawn by chapter.js. */
svg.pic-lines { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; overflow: visible; }
svg.pic-lines line.w { stroke: #FFFFFF; stroke-width: 3; stroke-linecap: window; }
svg.pic-lines line.k { stroke: #000000; stroke-width: 1.5; stroke-dasharray: 5 4; }
svg.pic-lines .is-hot line.w { stroke-width: 4.5; }
svg.pic-lines .is-hot line.k { stroke-width: 2.25; }
svg.pic-lines circle { fill: #000000; stroke: #FFFFFF; stroke-width: 2; }

/* Josh's comments page: a comment's places on its picture. */
.adm-pic { position: relative; display: inline-block; max-width: 100%; margin: 0.4rem 0 0.2rem; line-height: 0; }
.adm-pic img { display: block; width: 28rem; max-width: 100%; height: auto; border: 1px solid var(--steel-edge); }
.adm-pic .pt { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #000000; box-shadow: 0 0 0 2px #FFFFFF; }

/* The Admin tab's numbers (Josh, 2026-10-17; admin/stats.js): figures, a chart per measure, where the time goes,
   and every number in a table. One hue, electric blue, darker on the day pointed at. Text stays HTML. */
.st { margin: 0.4rem 0 1.6rem; }
.st[aria-busy="true"] { opacity: 0.6; }
.st-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.7rem; margin: 0.6rem 0 0.9rem; }
.st-fig { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.85rem; border: 1px solid rgba(28,34,48,0.18); border-radius: 3px; background: rgba(255,255,255,0.45); }
.st-fig-n { font-family: var(--ff-display); font-size: 1.9rem; line-height: 1.1; color: var(--ink); }
.st-fig-l { font-family: var(--ff-util); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.st-fig-s { font-size: 0.9rem; color: var(--ink-2); }
.st-lists { margin: 0 0 1.1rem; color: var(--ink-2); }
.st-lists .st-fig-l { margin-right: 0.5rem; }
.st-range { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem; }
.st-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.4rem 1.8rem; }
.st-chart { margin: 0; min-width: 0; }
.st-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; margin: 0 0 0.3rem; }
.st-title { font-size: 1.05rem; color: var(--ink); }
.st-say { font-size: 0.85rem; color: var(--ink-faint); }
.st-axis { font-family: var(--ff-util); font-size: 0.8rem; color: var(--ink-faint); }
.st-top { display: block; margin-bottom: 0.15rem; }
.st-plot { width: 100%; touch-action: pan-y; }
.st-plot svg { display: block; }
.st-foot { display: flex; justify-content: space-between; margin-top: 0.2rem; }
.st-read { margin: 0.25rem 0 0; min-height: 1.4em; font-size: 0.9rem; color: var(--ink-2); }
.st-grid { stroke: rgba(28,34,48,0.12); stroke-width: 1; }
.st-base { stroke: rgba(28,34,48,0.4); stroke-width: 1; }
.st-bar { fill: var(--electric); }
.st-bar.is-on { fill: var(--electric-deep); }
.st-hit { fill: transparent; cursor: crosshair; }
.st-places { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.st-place { display: grid; grid-template-columns: minmax(0, 16rem) 1fr 9rem; grid-template-areas: "name track n"; gap: 0.2rem 0.8rem; align-items: center; padding: 0.3rem 0; }
.st-place-name { grid-area: name; overflow-wrap: anywhere; }
.st-place-track { grid-area: track; height: 0.7rem; background: rgba(28,34,48,0.07); border-radius: 0 4px 4px 0; }
.st-place-fill { display: block; height: 100%; background: var(--electric); border-radius: 0 4px 4px 0; }
.st-place-n { grid-area: n; text-align: right; font-family: var(--ff-util); font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 34rem) { .st-place { grid-template-columns: 1fr auto; grid-template-areas: "name n" "track track"; } }
.st-table { margin: 1.4rem 0 0; }
.st-table summary { cursor: pointer; font-family: var(--ff-util); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--electric-deep); }
.st-table-wrap { overflow-x: auto; margin-top: 0.6rem; }
.st-table table { border-collapse: collapse; font-size: 0.85rem; }
.st-table th, .st-table td { padding: 0.3rem 0.55rem; border-bottom: 1px solid rgba(28,34,48,0.12); text-align: right; white-space: nowrap; }
.st-table thead th { min-width: 4.5rem; vertical-align: bottom; white-space: normal; font-family: var(--ff-util); font-weight: normal; color: var(--ink-faint); }
.st-table tbody th { text-align: left; font-weight: normal; color: var(--ink-2); }
@media (max-width: 34rem) { .st-figs { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .st-fig-n { font-size: 1.6rem; } }
/* The activity list and a member's time (Josh, 2026-10-17). */
.adm-act-row .rd-name { flex: 0 1 auto; }
.adm-act-what { flex: 1 1 14rem; }
.adm-act-row .rd-meta, .adm-time .rd-meta { flex: 1 1 100%; }