/* ===========================================================================
 * The catena — the commentary section's colour, and the chain's furniture
 * ===========================================================================
 *
 * One page loads this: index.html, a chapter with every held commentary
 * fragment beneath it.
 *
 * The site gives every section a colour; liturgy is red and scripture is gold,
 * so commentary is VIOLET. That colour is declared once, as `.section-violet`
 * in `release/public-alpha/assets/site.css`, and this file does not restate
 * it. The development fallback that used to sit here declared #7d5cb8 against
 * the #5a3f96 the site actually ships — it had drifted, and nobody noticed
 * because a slightly wrong violet still looks like violet. See the note at the
 * head of `shared/browser-core.css` for the reasoning and what was given up.
 *
 * TEXT IS SET IN --section-ink, NEVER IN --section-accent. The shipped ink,
 * #3e2b6b, measures 11.91:1 on white and 10.95:1 on the site's surface. The
 * rule holds across the site rather than for this section alone: the gold
 * section's accent is 3.66:1 and fails outright, so a page that sets text in
 * whichever variable happens to look right is a page that reads correctly here
 * and illegibly there. The accent is for rules, markers and fills.
 *
 * The figure this comment used to give, 8.3:1, is right — for #5b4088, the
 * colour the deleted fallback declared. It was a true measurement of a page
 * nobody has ever been served, which is the whole hazard of a second copy.
 *
 * FACTS FIRST. The maintainer's standing direction for the site is that the
 * page opens on what it is showing and everything else goes below. So the
 * header is a reference and three controls, the chapter follows, the chain
 * follows that, and every word explaining what a catena is sits in the footer.
 * Nothing here is styled to be read before the text it is about.
 *
 * A FRAGMENT MUST NEVER LOOK LIKE A LEAD, AND A LEAD MUST NEVER LOOK LIKE A
 * FRAGMENT. That is Rule 1 of the design and it is enforced visually as well
 * as structurally: an excerpt is set in the serif at reading size inside a
 * panel; a lead is a line in a plain list, in the sans, at 0.85rem, with no
 * panel, no rule and no accent. The two cannot be confused at a glance, which
 * is the only moment that matters.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * The header: a reference, not a masthead
 * ------------------------------------------------------------------------ */

/* The chapter is the second line: it changes as the reader moves, and the
   page's own name has to stay put above it. */
.catena-page .page-header .reference-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0.15rem 0 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--section-ink);
}

/* The chapter reference is the fact; the book it belongs to is context. */
.catena-page .page-header .reference-book {
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* One line under the reference, and it is a count, not a description. The
   shared rule sets it; here it sits under a two-line header rather than under
   a lede, so it takes a shade less air above it and a shade more size. */
.tally {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
}

.tally b {
  font-weight: 600;
  color: var(--section-ink);
}

/* ---------------------------------------------------------------------------
 * The chapter
 * ------------------------------------------------------------------------ */

.chapter {
  max-width: var(--measure);
  margin: 0 0 2.5rem;
}

/* The chapter is the page's primary text and was being set bare while every
   fragment sat in a panel, which inverted the emphasis: the commentary looked
   finished and the scripture looked like a caption. It gets the panel, and the
   larger one. */
.chapter-body {
  background: var(--panel);
  border: 1px solid var(--section-pale);
  border-top: 0.2rem solid var(--section-accent);
  border-radius: 0 0 3px 3px;
  padding: 1.15rem 1.4rem 1.35rem;
}

.chapter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.8rem;
  cursor: pointer;
  list-style: none;
  margin: 0;
}

.chapter-head::-webkit-details-marker { display: none; }

.chapter-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--section-ink);
}

.chapter-count {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, var(--section-ink));
}

.chapter-head:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: 3px;
}

/* Verses run on as prose rather than one to a line: the chapter is here to be
   read, and a stack of thirty-one short lines is a concordance, not a text.
   The rule above the text separates it from the summary without a border that
   would box a closed chapter for no reason. */
.chapter-body[open] > .passage {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--section-pale);
}

/* No size or leading override here. An earlier pass set this a shade larger
   than the shared value on the theory that a chapter read against commentary
   wants more presence; it read as loose instead, and the shared setting has
   since been tightened for the same reason. One setting for scripture. */

/* Paragraphs, where the edition or the projection divides the chapter. The
   first takes no top margin, so a chapter that divides opens exactly where a
   chapter that runs on opens. */
.passage-paragraph {
  margin: 0.85rem 0 0;
}

.passage-paragraph:first-child {
  margin-top: 0;
}

/* Every paragraph reserves the same margin, whether or not anything is drawn
   in it. Indenting only the projected ones made a chapter with both kinds sit
   at two different left edges, which reads as broken rather than as a
   distinction — the reader sees ragged text long before they wonder what the
   rule means. */
.passage-paragraph {
  border-left: 2px solid transparent;
  padding-left: 0.7rem;
  margin-left: -0.9rem;
}

/* A break this project PROJECTED, marked apart from one the edition prints.
   The two are different claims and the page must not render them alike, but
   the difference is the rule alone: the text does not move. */
.passage-paragraph.projected {
  border-left-color: var(--section-pale);
}

/* What the divisions are owed to, in words, below the text. */
.paragraph-note {
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink-faint);
  margin: 0.9rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--section-wash);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------------------
 * The chain
 * ------------------------------------------------------------------------ */

.chain {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

.section-heading {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--section-ink);
  margin: 0 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--section-pale);
}

.fragment {
  background: var(--panel);
  border: 1px solid var(--section-pale);
  border-left: 0.3rem solid var(--section-accent);
  border-radius: 0 3px 3px 0;
  padding: 1rem 1.15rem;
  margin: 0 0 1.1rem;
}

/* Author, work and extent, on one line where there is room. The date sits at
   the end because the chain is already in date order: it confirms the position
   rather than announcing it. */
.fragment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
  /* Closed, the head is the whole row and needs no gap beneath it; open, the
     text wants air. `details[open]` supplies it rather than a constant margin
     that would loosen a collapsed chain into a sparse list. */
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
  /* The whole head is the target, not just a marker glyph — on a phone a
     12px triangle is not a tap target. */
  min-height: 2.75rem;
  align-content: center;
  padding-right: 1.4rem;
  position: relative;
}

.fragment-head::-webkit-details-marker {
  display: none;
}

/* The project's own disclosure mark, drawn rather than typed, so it rotates
   with the state instead of swapping one character for another. */
.fragment-head::after {
  content: '';
  position: absolute;
  right: 0.15rem;
  top: 1.05rem;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--section-accent);
  border-bottom: 2px solid var(--section-accent);
  transform: rotate(45deg);
  transition: transform 0.15s ease-in-out;
}

.fragment-body[open] > .fragment-head {
  margin-bottom: 0.6rem;
}

.fragment-body[open] > .fragment-head::after {
  transform: rotate(-135deg);
}

.fragment-head:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fragment-head::after {
    transition: none;
  }
}

.fragment-author {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--section-ink);
}

.fragment-work {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.fragment-date {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-left: auto;
  white-space: nowrap;
}

/* The extent is the fragment's own claim about what it is about, so it is
   always present and always the full extent, even under a chapter it only
   reaches into. */
.fragment-extent {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  flex-basis: 100%;
}

.fragment-extent .spans {
  color: var(--section-ink);
  font-weight: 600;
}

/* The language the fragment is actually in, and how long it is. Both are read
   before the fragment is opened, because opening it is what fetches the text:
   a reader choosing between Basil's Greek and Basil's English, or between four
   hundred words and nine thousand, is owed the answer first. */
.fragment-language {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--section-ink);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.fragment-length {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.fragment-text {
  font-family: var(--serif-text);
  font-size: 0.96rem;
  line-height: 1.5;
  margin: 0;
  white-space: pre-line;
}

/* A text that would not load. It says why, in the place the words would have
   been, rather than leaving an empty panel that reads as a short fragment. */
.fragment-text.missing {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
  white-space: normal;
}

/* The apparatus that travels with the prose: why the extent was drawn where it
   was, and on what ground the date rests. Below the text and quieter than it —
   these are the project's reasoning about a father's words, not the words. */
.fragment-apparatus {
  margin: 0.7rem 0 0;
}

.fragment-basis {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-faint);
  margin: 0.4rem 0 0;
}

/* Where the fragment came from and how to check it. Below the text, quiet, and
   never above it. */
.fragment-source {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin: 0.7rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--section-wash);
}

.fragment-source .sep::before {
  content: "·";
  margin: 0 0.4rem;
}

/* The review state, when it is short of collation. Set apart enough to be
   noticed and not so much that it reads as a warning: an inspected text is a
   text someone read, not a suspect one. */
.fragment-source .state {
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--section-ink);
}

/* ---------------------------------------------------------------------------
 * The two things that are not fragments
 *
 * Both live below the chain and neither is allowed a panel, a left rule, an
 * accent or the serif. A reader scrolling past must be unable to mistake
 * either for an excerpt.
 * ------------------------------------------------------------------------ */

.aside {
  max-width: var(--measure);
  margin: 2.5rem 0 0;
}

.aside .section-heading {
  color: var(--ink-faint);
  border-bottom-color: var(--section-wash);
}

.aside-note {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin: 0 0 0.8rem;
  line-height: 1.5;
}

.lead-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}

.lead {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 0.45rem;
  break-inside: avoid;
}

.lead .lead-work {
  color: var(--ink-faint);
  font-style: italic;
}

/* A held fragment that may not render. It states its reason where a reader can
   see it, because a fragment silently absent is indistinguishable from one
   nobody ever acquired. */
.blocked {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border: 1px dashed var(--section-pale);
  border-radius: 3px;
  padding: 0.8rem 0.95rem;
  margin: 0 0 0.8rem;
}

.blocked b {
  color: var(--ink);
}

.blocked .why {
  display: block;
  margin-top: 0.4rem;
  color: var(--ink-faint);
}

/* A refusal the projection made, rendered as a refusal. */
.refusal {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--notice);
  background: var(--notice-bg);
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.2rem;
  max-width: var(--measure);
}

/* ---------------------------------------------------------------------------
 * Narrow
 *
 * A phone is about 20rem of usable width. The date leaves the head line rather
 * than squeezing the author, the leads drop to one column, and the panels lose
 * the padding that only ever bought margin.
 * ------------------------------------------------------------------------ */

@media (max-width: 32rem) {
  .fragment {
    padding: 0.85rem 0.9rem;
  }

  .fragment-date {
    margin-left: 0;
    flex-basis: 100%;
  }

  .fragment-text {
    font-size: 1rem;
  }

  .lead-list {
    columns: 1;
  }

  .catena-page .page-header .reference-line {
    gap: 0.15rem 0.6rem;
    font-size: 1.15rem;
  }
}

/* ---------------------------------------------------------------------------
 * The chain as a tree: author, then that author's fragments beneath him
 *
 * Two levels of disclosure, both closed. The outer level answers "who comments
 * on this chapter", which is the question a reader arrives with; the inner one
 * answers "what did he say", which is the one they arrive at.
 * ------------------------------------------------------------------------ */

.author {
  border-left: 0.3rem solid var(--section-accent);
  background: var(--panel);
  border: 1px solid var(--section-pale);
  border-left: 0.3rem solid var(--section-accent);
  border-radius: 0 3px 3px 0;
  margin: 0 0 0.7rem;
}

.author[hidden] { display: none; }

.author-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 2rem 0.75rem 1rem;
  min-height: 2.75rem;
  align-content: center;
  position: relative;
}

.author-head::-webkit-details-marker { display: none; }

.author-head::after {
  content: '';
  position: absolute;
  right: 0.9rem;
  top: 1.25rem;
  width: 0.44rem;
  height: 0.44rem;
  border-right: 2px solid var(--section-accent);
  border-bottom: 2px solid var(--section-accent);
  transform: rotate(45deg);
  transition: transform 0.15s ease-in-out;
}

.author-body[open] > .author-head::after { transform: rotate(-135deg); }

.author-head:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: -2px;
}

.author-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
}

.author-date,
.author-count {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--section-ink);
}

.author-count { margin-left: auto; padding-right: 0.4rem; }

/* The nested level. Indented, and without the panel the author node already
   carries — a box inside a box reads as two things rather than one tree. */
.author-fragments {
  margin: 0;
  padding: 0 1rem 0.8rem 1.6rem;
  list-style: none;
}

.author-fragments .fragment {
  background: none;
  border: 0;
  border-left: 1px solid var(--section-pale);
  border-radius: 0;
  padding: 0.35rem 0 0.35rem 0.9rem;
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Choosing who is read
 * ------------------------------------------------------------------------ */

.author-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0 0 1rem;
  max-width: var(--measure);
}

.author-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  /* A checkbox and its name are one target, and the row is tall enough for a
     thumb rather than a cursor. */
  min-height: 2.2rem;
  cursor: pointer;
}

.author-toggle input { min-width: 1rem; min-height: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .author-head::after { transition: none; }
}