/* ===========================================================================
 * Today’s Missal — the margin, and what it becomes when there is no margin
 * ===========================================================================
 *
 * This page sets NO TEXT. The date heading, the propers, the passages, the
 * composed orations and their notes are all set by browser-core.css and
 * liturgy.css, exactly as they are on the propers page, because they are the
 * same texts and a reader moving between the two pages must not find that
 * scripture has changed size on the way. In particular `.passage` is not
 * touched here: one setting for scripture across all three dynamic pages.
 *
 * What this file owns is the annotation: a margin beside the text carrying the
 * rubric that put it there.
 * ======================================================================== */


/* ---- The annotated column ------------------------------------------------
   Text and margin are one grid, so a note sits beside the proper it explains
   rather than after it. The text column is capped at the reading measure and
   the margin takes a fixed, narrower column: a margin that grew with the
   viewport would end up competing with the prayer for the reader's eye, which
   is precisely the failure this layout replaced. */

.annotated {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 2rem;
  margin-bottom: 0.5rem;
}

.annotated-text { min-width: 0; }

@media (min-width: 60rem) {
  .annotated {
    grid-template-columns: minmax(0, 1fr) 17rem;
    align-items: start;
  }
  .annotated-text { grid-column: 1; }
  .annotated > .margin { grid-column: 2; }
}

/* The reading area on this page carries two columns, so it may run wider than
   the single measure the propers page wants. */
.reading-annotated { max-width: none; }


/* ---- The margin ----------------------------------------------------------
   A `<details>`, so that with no script at all it is one line a reader may
   open, and so that on a narrow screen it collapses to that line INSTEAD of
   stacking its whole contents above the prayer. Wide, the script opens it and
   the summary is hidden: it reads as a marginal note and not as a control.

   It is quiet on purpose. Nothing in here is an error, and the previous
   version's boxes — a verdict panel, five numbered steps and nine to eleven
   bordered rows on every date — were read as errors precisely because they had
   the weight of one. */

.margin {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-faint);
  border-left: 2px solid var(--section-row);
  padding-left: 0.8rem;
}

.margin-summary {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--section-ink);
  cursor: pointer;
  padding: 0.15rem 0;
}

/* Wide, it is a note and not a disclosure. The marker goes with the summary. */
@media (min-width: 60rem) {
  .margin-summary { display: none; }
}

.margin p { margin: 0 0 0.4rem; }
.margin p:last-child { margin-bottom: 0; }

.margin-lead { color: var(--ink-soft); }

.margin-why { margin: 0 0 0.4rem; }

.margin-heading {
  margin: 0.7rem 0 0.3rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--section-ink);
}

.margin-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.margin-list > li {
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dotted var(--section-row);
}

.margin-list > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.margin-name {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.margin-of { color: var(--ink-soft); }

.margin-incipit {
  font-style: italic;
  color: var(--ink-soft);
}

/* The rubric in its own words. Latin is quoted rather than paraphrased where a
   reader might want to check the gloss against it, so it is set apart from the
   gloss and not run together with it. */
.margin-latin {
  font-style: italic;
  color: var(--ink-soft);
  border-left: 2px solid var(--section-row);
  padding-left: 0.5rem;
}

/* The rubric number is the load-bearing thing in the margin: it is what makes a
   claim checkable, so it is set as a citation rather than as decoration. It
   wraps: "RGMR 306-309, 314-317, 326, 328, 341, 384-387" is one locus, and held
   on one line it ran off the side of a phone and took the page with it. */
.locus {
  display: inline;
  padding: 0.02rem 0.3rem;
  font-family: var(--sans);
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--section-ink);
  background: var(--section-row);
  border-radius: 3px;
  overflow-wrap: anywhere;
}


/* ---- The Mass itself ---------------------------------------------------- */

.mass-head { margin: 0.9rem 0 0.2rem; }

.mass-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--section-ink);
}

/* Who is speaking. The complaint this answers was that the priest's and the
   server's parts were hard to tell apart, and the cause was that the marks
   doing that work were two bare letters in the reading face, inline with the
   words. A tag is set away from the reading face — sans, small caps, its own
   colour — so the eye finds the turn before it reads the line.

   `Priest` and `Server` are tinted differently because telling THOSE two apart
   is the whole request. `Response` is left neutral: it names a position in a
   dialogue and not a person, and colouring it like a speaker would assert who
   makes it, which the book does not always say. */
/* Who is speaking, said once and quietly.
   This was a bordered, uppercase, letterspaced pill, repeated at every change
   of speaker through the whole Mass — three boxes to a dialogue. A missal does
   not box its speakers, and the reader is following prayers, not labels. It is
   now one small italic word in the margin colour, styled identically whoever
   is speaking, so a change of speaker is legible without competing with the
   words it introduces. */
.speaker-tag {
  margin-right: 0.4rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-style: italic;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink-faint);
}

/* A turn that begins mid-line needs air before it or it reads as part of the
   clause that just ended. */
.speaker-tag + .speaker-tag,
.composed .speaker-tag:not(:first-child) { margin-left: 0.35rem; }

.mass-choice-field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
}

.mass-choice-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--section-ink);
}

/* Allowed to grow, never to overflow: the option labels are whole clauses
   ("The proper Mass of the Commemoration of Our Lady of Mount Carmel"), and a
   fixed width either truncated them or pushed the page sideways on a phone. */
.mass-choice-select {
  flex: 1 1 14rem;
  max-width: 100%;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.mass-choice .row-meta { margin: 0.35rem 0 0; }

/* The standing of what is on screen, where it is not the Mass that is said.
   `is-displaced` is the loud one on purpose: a reader who followed a link to a
   Mass that is certainly not said today must be told so before they read it,
   and told it in a register they cannot skim past. The permissive standings are
   deliberately quieter — they are not warnings, and dressing a permission as a
   failure is the mirror of the error this box exists to prevent. */
.day-warning.is-standing { border-left-width: 4px; }

.day-warning.is-displaced,
.day-warning.is-unresolved {
  border-left-color: var(--section-ink);
}

.day-warning.is-option,
.day-warning.is-additional,
.day-warning.is-commemorated {
  border-left-color: var(--section-row);
  background: transparent;
}

.mass-subheading {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--section-ink);
}

.branch-option {
  margin: 1.6rem 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.branch + .branch { border-top: 1px solid var(--section-pale); }


/* ---- Ranks and dispositions ----------------------------------------------
   A badge says what became of a day in one word. It wraps on a narrow screen:
   a tag that breaks is better than a page that scrolls sideways. */

.tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.02rem 0.4rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid var(--section-line);
  border-radius: 3px;
  color: var(--section-ink);
  white-space: normal;
}

.tag-commemorated { background: var(--section-row); }
.tag-transferred { background: var(--panel); }
.tag-omitted { color: var(--ink-faint); border-color: var(--section-pale); }
.tag-reduced { background: var(--section-row); }


/* ---- A day the rules do not settle --------------------------------------
   This one IS a warning, and is the only thing on the page that looks like one.
   A page where everything is boxed says nothing by boxing something. */

.day-warning {
  margin: 0.8rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--section-line);
  border-left: 0.28rem solid var(--section-accent);
  border-radius: 4px;
  background: var(--section-wash);
  font-size: 0.88rem;
}

.day-warning.is-unsettled {
  border-color: var(--notice);
  border-left-color: var(--notice);
  background: var(--notice-bg);
}

.day-warning h3 {
  margin: 0 0 0.3rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--section-ink);
}

.day-warning.is-unsettled h3 { color: var(--notice); }

.day-warning p { margin: 0 0 0.4rem; }

.day-warning ul { margin: 0; padding-left: 1.1rem; }


/* ---- The standing warning ------------------------------------------------
   It sits after the Mass, not before the controls: a reader who has the day's
   Mass on the screen is the reader who needs telling what it is worth. */

/* The warning and the footer are one closing block, not two separated ones. */


/* ---- The date field ----------------------------------------------------- */

.field input[type="date"] {
  width: 100%;
  padding: 0.42rem 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--section-line);
  border-radius: 4px;
}

.field input[type="date"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
 * The propers resolution, on request
 *
 * Off by default. The page is the missal opened to a date; the rubrical account
 * is an annotation on it, and a reader who wants the Mass should not have to
 * read past the explanation to reach it. Hidden by a class on the body rather
 * than removed from the DOM, so turning it on costs no re-render.
 * ------------------------------------------------------------------------ */

.margin { display: none; }

.shows-why .margin { display: block; }

/* Wide, the annotated text gives up its margin column when nothing is in it,
   so the Mass sets to the full measure rather than against an empty gutter. */
@media (min-width: 60rem) {
  body:not(.shows-why) .annotated {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The optional layers, folded into one control.
   Three loose checkboxes made the control bar taller than the first prayer
   under it, which is backwards on a page whose whole point is the Mass. The
   summary is the closed state and reads as one field like the selects beside
   it; the checks appear only when a reader goes looking for them. */
/* The panel is absolutely positioned, so the field itself has to be the
   positioned ancestor or the panel lays itself out against the page and
   lands wherever the page happens to put it. */
.field-options {
  position: relative;
}

.field-options > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.3rem 0.55rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  border: 1px solid var(--section-line);
  border-radius: 4px;
  background: var(--panel);
  white-space: nowrap;
}

.field-options > summary::-webkit-details-marker { display: none; }

.field-options > summary::after {
  content: ' \25BE';
  color: var(--ink-faint);
}

.field-options[open] > summary::after { content: ' \25B4'; }

.options-list {
  position: absolute;
  z-index: 5;
  margin-top: 0.3rem;
  padding: 0.5rem 0.7rem;
  display: grid;
  gap: 0.35rem;
  border: 1px solid var(--section-line);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.options-list label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}

.options-list input { min-width: 1rem; min-height: 1rem; }

/* On a narrow screen a floating panel can leave the viewport, so it sits in
   the flow instead. */
@media (max-width: 32rem) {
  .options-list { position: static; box-shadow: none; }
}

/* A `.field-check` block stood here and one stood in `catena.css`, and neither
   page emits the class: the checkboxes on this page are inside `.options-list`
   above. The one page that does emit it is the source library, and the rule is
   in `shared/browser-core.css` beside the rest of the control bar. */


/* ---------------------------------------------------------------------------
 * The Ordinary, on request — and then the page is the Mass
 *
 * The body text is still browser-core's: a prayer of the Ordinary is set by
 * `.composed`, exactly as a Collect is on the propers page, and a reader moving
 * between the two pages must not find the prayers have changed size on the way.
 *
 * What is set here is the ARRANGEMENT, which is the whole of reading like the
 * Mass rather than like two documents concatenated. A missal distinguishes an
 * instruction from a prayer by setting it in italic, marks the divisions of the
 * rite, and rules nothing that is ordinary. This does the same three things, and
 * one more that only a page can do: it rules what belongs to THIS day, so that
 * the one distinction a follow-along missal must never blur — the words said
 * every day against the words said today — is the loudest thing on the page.
 * ------------------------------------------------------------------------ */

.ordinary-preamble { margin-bottom: 1.6rem; }

/* The reason a text is withheld, said once for the page with how far it
   reaches. Every element that is silent names one of these and no more; the
   account belongs in one place, and 39 copies of it were 38 too many. */
.ordinary-absence { margin-top: 0.5rem; }

.ordinary-absence-key {
  margin-right: 0.5em;
  padding: 0.02rem 0.35rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--section-ink);
  background: var(--section-row);
  border-radius: 3px;
}

/* ---- The frame ----------------------------------------------------------
   Plain. An element of the Ordinary is the ordinary case — 195 of them in the
   1962 frame — and a rule beside every one of them is a rule beside everything,
   which distinguishes nothing and reads as 195 quotations. */

.ordinary-frame > .ordinary-element {
  margin: 0 0 0.9rem;
  padding-left: 0;
  border-left: none;
}

.ordinary-element .composed { margin-top: 0.15rem; }

/* The divisions of the rite: the Foot of the Altar, the Lessons, the Canon.
   These are the landmarks a reader following along steers by, so they get the
   air and the rule that everything else has given up. Set in capitals, which is
   allowed here and not below: a division's name is this project's own editorial
   label for a stretch of the book, whereas the head below it is words the book
   itself printed. */
.ordinary-division {
  margin: 2.4rem 0 1.1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--section-pale);
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ordinary-frame > .ordinary-division:first-child { margin-top: 0.5rem; }

/* A rubric is an instruction and not a prayer, and every missal ever printed
   says so by setting it in italic. Following that is not decoration: it is what
   lets a reader tell at a glance whether the words in front of them are to be
   said or to be done. */
.ordinary-element.is-rubric .composed {
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* A head the book itself prints across the measure — "GLORIA IN EXCELSIS.",
   "Psalm xlii." — set as the book sets it and never re-cased: some are capitals
   in the transcription and some are not, and forcing either would be this page
   editing the printing it is quoting. */
.ordinary-head {
  margin: 1.7rem 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--section-ink);
  text-align: center;
}

/* The page or number an element stands at, where the element has no name to
   hang it on. Quiet, and never selected with the text: it is the missal's
   foliation, not a word of the Mass. */
.ordinary-locus {
  margin-right: 0.55em;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  user-select: none;
}

/* An absence inside the frame is the ordinary case on the postconciliar side —
   39 of 48 — so it is compact. It keeps the notice colour: it is not furniture,
   and a reader must not stop seeing it. */
.ordinary-element .notice {
  margin-top: 0.3rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}

/* ---- The priest's actions, on request -----------------------------------
   Hidden by a class, never filtered out of the frame. The rubrics are the
   elements the day's propers are anchored to — the Introit is seated after
   `rubrica-benedictio-incensi-et-introitus` — so removing them would take the
   seats with them and pour the Mass out in a plausible and wrong order. They
   are seated first and painted second, and this only stops the painting.

   The class marks the departure, not the default: the rubrics are shown, so it
   is hiding them that has to be asked for and said. Written the other way round
   the priest's actions would be missing from any page that had not yet run its
   script, which is the opposite of what a missal does. */

.hides-rubrics .ordinary-frame > .ordinary-element.is-rubric { display: none; }

/* ---- The day's own text, inside the frame -------------------------------
   The rule belongs here and nowhere else on the page. Everything around it is
   the Mass of every day; this is the Mass of THIS day, and a reader who has
   lost their place should be able to find the next proper without reading. The
   distinction is position, rule and weight, all of which survive being printed
   in black and white — nothing here depends on colour alone. The name is left
   in the section's ink and NOT set in the accent: browser-core.css says why in
   terms, and it is right — at this size the accent of some sections has too
   little contrast on white to be read as text.

   No class is needed to find them. Inside the frame an annotated block IS a
   proper of the day: the elements of the Ordinary are sections beside it. */

.ordinary-frame > .annotated { margin: 1.5rem 0; }

.ordinary-frame > .annotated .annotated-text > .proper {
  margin: 0;
  border-left-width: 3px;
  border-left-color: var(--section-accent);
}

/* Said where the frame stops fitting, and only there: before the Ordinary for a
   Mass that opens outside it, after the Ordinary where the day's propers stop
   running forward through it. Never a warning — nothing has failed — but never
   quiet enough to miss, because it is the page saying what it has not done. */
.ordinary-aside {
  margin: 1.4rem 0 0.8rem;
  padding-left: 1rem;
  border-left: 2px dotted var(--section-line);
  font-style: italic;
}

/* The acknowledgement a free licence requires. Quiet, because it is apparatus
   and not the prayer; never hidden, because it is the condition on which the
   prayer above it may be here at all, and a reader copying the text out is
   owed it in the same breath. */
.ordinary-grant {
  font-style: italic;
  color: var(--ink-soft);
}