/* ===========================================================================
 * Reading Missal v1
 * ===========================================================================
 *
 * Loaded after day.css. The page is one reading surface: compact site chrome,
 * the celebration, closed utility disclosures, then the ordered Mass.
 * ======================================================================== */

.page-shell.page-browser {
  --missal-measure: 40.5rem;
  --missal-rubric: color-mix(in srgb, var(--section-ink) 78%, var(--ink));
  max-width: 52rem;
  margin-block: 0.6rem 4rem;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 5vw, 4rem) 4rem;
  border: 1px solid color-mix(in srgb, var(--section-pale) 64%, transparent);
  border-radius: 0;
  box-shadow: 0 1.25rem 3rem rgb(40 30 20 / 5%);
  background: color-mix(in srgb, var(--surface, #fff) 96%, var(--section-pale));
}

.page-browser > .celebration-head,
.page-browser > .utility-disclosure,
.page-browser > .reading,
.page-browser > .page-footer {
  width: min(100%, var(--missal-measure));
  margin-inline: auto;
}

.page-browser .celebration-head,
.page-browser .reading,
.page-browser .page-footer {
  font-family: var(--serif);
}

.page-browser .celebration-head {
  margin-bottom: 0.8rem;
  text-align: center;
}

.page-browser .celebration-title {
  margin: 0;
  color: var(--missal-rubric);
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
}

/* This page keeps the shared links but makes the repository chrome one quiet
   band above the book. */
body > .site-header {
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0.65rem;
  min-height: 3.35rem;
  padding: 0.4rem clamp(0.85rem, 3vw, 1.75rem);
}

body > .site-header .triptych-mark {
  grid-template-columns: repeat(3, 0.34rem);
  min-width: 1.8rem;
  height: 1.45rem;
}

body > .site-header .triptych-mark i { height: 1rem; }
body > .site-header .triptych-mark i:nth-child(2) { height: 1.35rem; }
body > .site-header .brand a { font-size: 1.18rem; }
body > .site-header .brand span { font-size: 0.62rem; }
body > .site-header nav {
  justify-self: end;
  gap: 0.85rem;
  font-size: 0.78rem;
}

/* Settings and Notices are compact native disclosures. Their contents exist
   in the document but do not occupy the reading face while closed. */
.page-browser .utility-disclosure {
  border-top: 1px solid var(--section-pale);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.78rem;
}

.page-browser .utility-disclosure:last-of-type {
  border-bottom: 1px solid var(--section-pale);
}

.page-browser .utility-disclosure > summary {
  min-height: 2.05rem;
  padding: 0.45rem 0.15rem;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.page-browser .utility-disclosure[open] > summary {
  color: var(--missal-rubric);
}

.page-browser .controls,
.page-browser .controls button,
.page-browser .controls input,
.page-browser .controls select,
.page-browser .mass-choice,
.page-browser .mass-choice select {
  font-family: var(--sans);
}

.page-browser .controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
  margin: 0;
  padding: 0.65rem 0 0.8rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.78rem;
}

.page-browser .controls .field {
  gap: 0.2rem;
  min-width: 0;
}

.page-browser .controls .field-steps {
  grid-column: span 2;
}

.page-browser #formulary-controls:not(:empty) {
  grid-column: 1 / -1;
}

.page-browser .controls .field label,
.page-browser .controls .field-legend {
  font-size: 0.72rem;
  line-height: 1.2;
}

.page-browser .controls select,
.page-browser .controls input,
.page-browser .controls button {
  min-height: 2rem;
  padding-block: 0.2rem;
}

.page-browser .field label,
.page-browser .field-legend,
.page-browser .mass-choice-label {
  color: var(--missal-rubric);
}

.page-browser .field select,
.page-browser .field input,
.page-browser .steps button {
  background: color-mix(in srgb, var(--surface, #fff) 86%, transparent);
  border-color: var(--section-pale);
  border-radius: 0.15rem;
}

.page-browser .field-options .field-legend {
  margin: 0;
}

.page-browser .notices-disclosure .banner,
.page-browser #rendered-notices {
  margin: 0;
}

/* Contents is generated from the reading already on the page. It stays a
   compact utility rather than becoming a second reading surface. */
.page-browser .contents-disclosure > nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
  padding: 0.25rem 0 0.8rem;
}

.page-browser .contents-disclosure button {
  width: auto;
  padding: 0.22rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.page-browser .contents-disclosure button:hover {
  border-bottom-color: var(--section-line);
  color: var(--missal-rubric);
}

.page-browser .contents-disclosure button:focus-visible {
  outline: 2px solid var(--missal-rubric);
  outline-offset: 0.18rem;
}

/* One measure throughout. Existing resolution details remain closed and, when
   requested, follow the passage they explain instead of opening a column. */
.page-browser .reading-annotated {
  max-width: var(--missal-measure);
}

/* The direct-formulary entrance uses the same book page and type system, but
   its Proper headings are the top-level landmarks rather than elements seated
   inside an Ordinary frame. */
.page-browser .reading-formulary {
  max-width: var(--missal-measure);
  padding-top: 1.25rem;
}

.page-browser .reading-formulary .proper-name {
  margin-bottom: 1rem;
  padding: 0.7rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--section-line) 54%, transparent);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-align: left;
}

.page-browser .reading-formulary .proper-ref {
  margin-top: 0.24rem;
  font-size: 0.72em;
  line-height: 1.4;
  text-align: left;
}

.page-browser .annotated {
  display: block;
  margin-bottom: 0;
}

.page-browser .annotated > .margin {
  margin: 1rem 0 2rem;
}

.page-browser .margin-summary {
  display: list-item;
}

.page-browser .reading {
  color: var(--ink);
  font-size: 1.03rem;
  line-height: 1.7;
}

.page-browser .entry-title {
  margin: 0.4rem 0 0.1rem;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 400;
  text-align: center;
}

.page-browser .entry-meta {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-faint);
}

.page-browser .mass-head {
  margin: 2rem 0 0;
  text-align: center;
}

.page-browser .mass-head:empty { display: none; }

.page-browser .mass-name {
  color: var(--missal-rubric);
  font-size: clamp(1.35rem, 3vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
}

.page-browser .branch > .annotated > .annotated-text > .mass-head > .mass-name {
  font-size: clamp(2rem, 5vw, 2.45rem);
  line-height: 1.15;
}

.page-browser .mass-choice {
  margin: 0;
  text-align: left;
}

.page-browser .mass-choice-field {
  justify-content: flex-start;
}

/* Notices retain their meaning but no longer read as rounded cards. */
.page-browser .notice,
.page-browser .day-warning {
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--section-line) 68%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--section-pale) 14%, transparent);
  font-size: 0.82rem;
  line-height: 1.45;
}

.page-browser .notice {
  margin-block: 0.6rem;
  padding: 0.3rem 0.65rem;
  color: color-mix(in srgb, var(--notice) 58%, var(--ink-soft));
}

.page-browser .day-warning {
  margin-block: 1rem;
  padding: 0.4rem 0.7rem;
}

.page-browser .branch + .branch {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top-color: var(--section-pale);
}

/* Every Proper is part of one continuous book. Ordinary titles remain centered
   like the hand missal that supplies them; the day's seated Propers become the
   left-edge apparatus by which a reader scans this particular celebration. */
.page-browser .proper {
  margin: 0 0 3.25rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.page-browser .proper-name {
  display: block;
  margin: 0 0 0.65rem;
  font-family: var(--serif);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
  color: var(--missal-rubric);
}

.page-browser .proper-ref {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--serif);
  font-size: 0.82em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}

/* The day's seated Propers are the major landmarks in the continuous rite.
   Their existing structure is sufficient to distinguish them from the
   smaller, centered prayer and dialogue titles inside the Ordinary. The rule
   precedes the complete heading so its reference remains directly beneath the
   name rather than being divided from it. */
.page-browser .ordinary-frame > .annotated > .annotated-text > .proper > .proper-name {
  margin-bottom: 1rem;
  padding: 0.7rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--section-line) 54%, transparent);
  border-bottom: 0;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-align: left;
}

.page-browser .ordinary-frame > .annotated > .annotated-text > .proper > .proper-name > .proper-ref {
  margin-top: 0.24rem;
  font-size: 0.72em;
  line-height: 1.4;
  text-align: left;
}

/* Placement notes read only the seat already carried by a rendered Proper.
   Their closed control sits with the heading; an open note uses spare page
   space without reserving a permanent margin. */
.page-browser .reading-annotated .proper {
  position: relative;
}

.page-browser .reading-annotated .proper-placement-toggle {
  appearance: none;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0 0 0 0.55rem;
  padding: 0.08rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--missal-rubric) 66%, var(--ink-faint));
  font-family: var(--serif);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  vertical-align: 0.08em;
  cursor: pointer;
}

.page-browser .reading-annotated .proper-placement-toggle::after {
  content: "Why here?";
}

.page-browser .reading-annotated .proper-placement-toggle:hover {
  border-bottom-color: currentColor;
  color: var(--missal-rubric);
}

.page-browser .reading-annotated .proper-placement-toggle:focus-visible {
  outline: 2px solid var(--missal-rubric);
  outline-offset: 0.18rem;
}

.page-browser .reading-annotated .proper-placement-note[hidden] {
  display: none;
}

.page-browser .reading-annotated .proper-placement-note:not([hidden]) {
  position: absolute;
  z-index: 2;
  top: 0.7rem;
  left: calc(100% + 0.8rem);
  width: 11rem;
  padding: 0.45rem 0.6rem;
  border-left: 1px solid var(--section-line);
  background: var(--surface, #fff);
  box-shadow: 0 0.3rem 1rem rgb(40 30 20 / 8%);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
}

@media (min-width: 40.001rem) and (max-width: 72rem) {
  .page-browser .reading-annotated .proper-placement-note:not([hidden]) {
    position: static;
    display: block;
    width: auto;
    margin: 0.45rem 0 0;
    padding: 0.35rem 0 0.35rem 0.65rem;
    background: transparent;
    box-shadow: none;
  }
}

.page-browser .proper-form {
  display: block;
  margin: 0.2rem 0 0;
}

.page-browser .citation-ref,
.page-browser .chapter-mark,
.page-browser .cycle-name,
.page-browser .composed-label,
.page-browser .speaker-tag,
.page-browser .ordinary-locus,
.page-browser .row-meta,
.page-browser .margin,
.page-browser .margin-heading,
.page-browser .margin-name,
.page-browser .locus {
  font-family: var(--serif);
}

.page-browser .passage,
.page-browser .composed {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.72;
}

.page-browser .citation {
  margin-top: 1.2rem;
}

.page-browser .citation-ref {
  text-align: center;
}

.page-browser .speaker-tag {
  margin-right: 0.28rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--missal-rubric) 48%, var(--ink-faint));
}

.page-browser .speaker-tag + .speaker-tag,
.page-browser .composed .speaker-tag:not(:first-child) {
  margin-left: 0.25rem;
}

.page-browser .ordinary-locus {
  margin-right: 0.4em;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

.page-browser .locus {
  padding-inline: 0.1rem;
  background: transparent;
  font-size: 0.76em;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}

/* Divisions are navigation landmarks, not cards or chapter banners. */
.page-browser .ordinary-division {
  margin: 5rem 0 2.15rem;
  padding: 1rem 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--section-line) 48%, transparent);
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.page-browser .ordinary-frame > .ordinary-division:first-child {
  margin-top: 1.25rem;
}

.page-browser .ordinary-frame > .ordinary-element {
  margin-bottom: 1.35rem;
  padding: 0;
  border: 0;
}

.page-browser .ordinary-frame > .annotated {
  margin: 4.6rem 0 3.25rem;
}

.page-browser .ordinary-frame > .annotated .annotated-text > .proper {
  margin: 0;
  padding: 0;
  border: 0;
}

.page-browser .ordinary-head {
  margin: 2.2rem 0 0.8rem;
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--missal-rubric);
}

.page-browser .ordinary-element.is-rubric .composed {
  color: color-mix(in srgb, var(--missal-rubric) 52%, var(--ink-soft));
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.65;
  text-align: center;
}

.page-browser .ordinary-preamble {
  margin: 4rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--section-pale);
}

.page-browser .ordinary-aside {
  border-left-color: var(--section-pale);
}

.page-browser .tag,
.page-browser .locus,
.page-browser .ordinary-absence-key {
  border-radius: 0;
}

.page-browser .page-footer {
  margin-top: 5rem;
  font-family: var(--serif);
}

@media (max-width: 47.5rem) {
  body > .site-header {
    grid-template-columns: auto auto minmax(0, 1fr);
    padding-block: 0.3rem;
  }

  body > .site-header .brand span {
    display: none;
  }

  body > .site-header nav {
    grid-column: auto;
    flex-wrap: nowrap;
    align-self: stretch;
    border-top: 0;
  }

  body > .site-header nav a {
    min-height: 2.75rem;
  }
}

@media (max-width: 40rem) {
  .page-shell.page-browser {
    margin-top: 0;
    padding: 0.9rem 1rem 3rem;
  }

  .page-browser .celebration-title {
    font-size: clamp(1.55rem, 7vw, 1.85rem);
  }

  .page-browser .celebration-head {
    margin-bottom: 0.55rem;
  }

  .page-browser .controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.65rem;
    padding-block: 0.65rem 0.75rem;
  }

  .page-browser .field,
  .page-browser .field-narrow,
  .page-browser .field-steps {
    width: 100%;
  }

  .page-browser .field-steps {
    grid-column: 1 / -1;
  }

  .page-browser .steps {
    width: 100%;
  }

  .page-browser .steps button {
    flex: 1 1 0;
    padding-inline: 0.4rem;
  }

  .page-browser .entry-title {
    margin-top: 0.3rem;
    font-size: 0.98rem;
  }

  .page-browser .entry-meta {
    font-size: 0.69rem;
  }

  .page-browser .utility-disclosure > summary {
    min-height: 1.85rem;
    padding-block: 0.35rem;
  }

  .page-browser .contents-disclosure > nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .page-browser .contents-disclosure button {
    width: 100%;
  }

  .page-browser .reading-annotated .proper-placement-toggle {
    min-width: 2rem;
    min-height: 2rem;
    margin-left: 0.3rem;
    padding: 0.35rem 0.15rem;
  }

  .page-browser .reading-annotated .proper-placement-note:not([hidden]) {
    position: static;
    display: block;
    width: auto;
    margin: 0.35rem 0 0;
    padding: 0.35rem 0 0.35rem 0.65rem;
    border-left: 1px solid var(--section-line);
    background: transparent;
    box-shadow: none;
  }

  .page-browser .mass-head {
    margin-top: 2rem;
  }

  .page-browser .proper {
    margin-bottom: 2.6rem;
  }

  .page-browser .ordinary-frame > .annotated {
    margin-top: 3.5rem;
  }

  .page-browser .ordinary-division {
    margin-top: 3.5rem;
  }

  .page-browser .ordinary-frame > .ordinary-division:first-child {
    margin-top: 0.9rem;
    margin-bottom: 1.35rem;
  }
}

@media print {
  body > .site-header {
    display: none;
  }

  @page {
    size: letter;
    margin: 0.7in 0.75in;
  }

  .page-shell.page-browser {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: #fff;
  }

  .page-browser > .utility-disclosure,
  .page-browser > .page-footer,
  .page-browser .mass-choice {
    display: none;
  }

  .page-browser > .contents-disclosure {
    display: none !important;
  }

  .page-browser .proper-placement-toggle,
  .page-browser .proper-placement-note {
    display: none !important;
  }

  .page-browser > .celebration-head {
    width: auto;
    margin: 0 0 1.4rem;
  }

  .page-browser .celebration-title {
    font-size: 20pt;
  }

  .page-browser > .reading {
    width: auto;
    max-width: none;
    margin: 0;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .page-browser .entry-title {
    margin-top: 0;
    font-size: 12pt;
  }

  .page-browser .entry-meta {
    margin-bottom: 1.6rem;
  }

  .page-browser .mass-head {
    margin: 2rem 0 1.2rem;
  }

  .page-browser .branch > .annotated > .annotated-text > .mass-head > .mass-name {
    font-size: 20pt;
  }

  .page-browser .notice,
  .page-browser .day-warning {
    break-inside: avoid;
  }

  .page-browser .proper-name,
  .page-browser .ordinary-division,
  .page-browser .ordinary-head {
    break-after: avoid;
  }

  .page-browser .ordinary-frame > .annotated {
    margin: 2.5rem 0 2rem;
  }

  .page-browser .ordinary-frame > .annotated > .annotated-text > .proper > .proper-name {
    padding-top: 0.55rem;
    text-align: left;
    break-after: avoid-page;
  }

  .page-browser .ordinary-frame > .annotated > .annotated-text > .proper > .proper-name + * {
    break-before: avoid-page;
  }

  .page-browser .ordinary-frame > .annotated > .annotated-text > .proper > .proper-name > .proper-ref {
    text-align: left;
  }

  .page-browser .ordinary-division {
    margin-top: 2.4rem;
  }

  .page-browser .proper {
    margin-bottom: 2rem;
  }

  .page-browser .passage,
  .page-browser .composed {
    font-size: 10.5pt;
    line-height: 1.55;
  }
}