@font-face {
  font-family: "Marcellus";
  src: url("fonts/marcellus.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #fbfbfd;
  --ink: #18213a;
  --muted: #4d566e;
  --line: #d8dce8;
  --field: #ffffff;
  --band: #1e3a78;        /* Marian blue */
  --band-ink: #ffffff;
  --blue: #2a56b0;
  --rose: #a63a62;        /* the large beads */
  --gold: #a7781c;        /* the centerpiece */
  --bead-a: #2a56b0;
  --bead-b: #6f8fd6;
  --tint: #eef2fb;
  --warn: #7a4300;
  --warn-bg: #fdf1dc;
  --focus: #c27a00;
  --r: 8px;
  --head: "Marcellus", "Trajan Pro", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1426;
    --ink: #e8ebf4;
    --muted: #a9b2c8;
    --line: #2b3552;
    --field: #141d35;
    --band: #0a1022;
    --band-ink: #e8ebf4;
    --blue: #93b2f5;
    --rose: #ec8fb1;
    --gold: #e2bb62;
    --bead-a: #6f95ea;
    --bead-b: #a9c0f5;
    --tint: #18223f;
    --warn: #f3c27a;
    --warn-bg: #33270f;
    --focus: #ffb547;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--blue); }
h1, h2, h3, .brand { font-family: var(--head); font-weight: 400; }
h1 { font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.1; margin: 0 0 8px; }
h2 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 10px; }
h3 { font-size: 1.15rem; margin: 18px 0 6px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 5; }
.skip:focus { left: 8px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
[hidden] { display: none !important; }

/* Header band: a strand of beads under it */
.band { background: var(--band); color: var(--band-ink); position: relative; }
.band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px;
  background: radial-gradient(circle at 6px 4px, var(--band) 3.2px, transparent 3.6px) 0 0 / 16px 8px repeat-x; }
.band-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 1.3rem; }
.band nav { display: flex; gap: 18px; }
.band nav a { color: inherit; text-decoration: none; padding: 10px 0; opacity: 0.92; }
.band nav a:hover, .band nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }

.crumbs { margin: 18px 0 0; font-size: 0.95rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.hero { padding: 26px 0 14px; max-width: 46rem; }
.lede { margin: 0; font-size: 1.12rem; color: var(--muted); }

/* Tool: inputs left, result right on wide screens */
.tool { display: grid; gap: 22px; padding-bottom: 28px; }
@media (min-width: 980px) { .tool { grid-template-columns: minmax(330px, 390px) 1fr; align-items: start; } .tool > .note { grid-column: 1 / -1; } }
.note { margin: 0; padding: 10px 14px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn); }
.link-note .btn { margin: 6px 6px 0 0; }
.inputs { display: grid; gap: 22px; }
.step { border-left: 4px solid var(--band); padding: 2px 0 2px 16px; }
@media (prefers-color-scheme: dark) { .step { border-left-color: var(--blue); } }
.field { display: grid; gap: 4px; margin: 0 0 12px; border: 0; padding: 0; min-width: 0; }
.field > label, legend { font-weight: 600; font-size: 0.97rem; padding: 0; }
input[type=number], input[type=text], input[type=date], select, textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--field); border: 1.5px solid var(--line);
  border-radius: var(--r); padding: 9px 11px; min-height: 44px; width: 100%; max-width: 100%;
}
input[type=date] { min-width: 0; }
input:disabled { opacity: 0.7; }
textarea { min-height: 150px; resize: vertical; line-height: 1.45; overflow-y: hidden; }
.count-field input { max-width: 9rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 360px) { .pair { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .pair.stack { grid-template-columns: 1fr; } }
.hint { margin: 6px 0 0; font-size: 0.95rem; color: var(--muted); }
.roster-msg { margin: 6px 0 10px; font-size: 0.97rem; color: var(--muted); min-height: 0; }
.roster-msg:empty { display: none; }
.roster-msg.warn { color: var(--warn); }
.day-msg { margin: -4px 0 12px; font-size: 0.97rem; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--blue); }
details.names, details.more { margin: 0 0 8px; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 0.98rem; }
.check input { width: 20px; height: 20px; flex: none; accent-color: var(--band); }
@media (prefers-color-scheme: dark) { .check input { accent-color: var(--blue); } }
.more-grid { display: grid; gap: 2px 18px; padding-top: 4px; }
.more-grid .field { margin: 6px 0; }

/* Segmented choices */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 8px; font-size: 0.95rem; line-height: 1.2; border-left: 1.5px solid var(--line); cursor: pointer; }
.seg label:first-child span { border-left: 0; }
.seg input:checked + span { background: var(--band); color: #fff; }
@media (prefers-color-scheme: dark) { .seg input:checked + span { background: var(--blue); color: #0d1426; } }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }

/* Result card: the one elevated thing on the page */
.result { background: var(--field); border: 1.5px solid var(--line); border-radius: 12px; padding: 18px 16px 14px; box-shadow: 0 2px 14px rgba(24, 33, 58, 0.07); min-width: 0; }
.result h2:focus { outline: none; }
.summary { font-size: 1.08rem; margin: 0 0 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.btn { font: inherit; font-size: 0.97rem; min-height: 44px; padding: 8px 14px; border-radius: var(--r); border: 1.5px solid var(--band); background: transparent; color: var(--band); cursor: pointer; }
@media (prefers-color-scheme: dark) { .btn { border-color: var(--blue); color: var(--blue); } }
.btn.primary { background: var(--band); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary { background: var(--blue); color: #0d1426; } }
.btn.ghost { border-color: var(--line); color: var(--ink); }
.actions.small { margin: 18px 0 0; }
.linkish { font: inherit; background: none; border: 0; color: var(--blue); text-decoration: underline; cursor: pointer; padding: 10px 2px; min-height: 44px; }
.toast { margin: 8px 0 0; min-height: 1.4em; font-size: 0.97rem; color: var(--muted); }
.result.empty .actions:not(.small), .result.empty .diagram { display: none; }

/* Diagram */
.diagram { margin: 4px 0 8px; }
.diagram figcaption { font-size: 0.95rem; color: var(--muted); margin-top: 4px; }
.diagram:empty { display: none; }
.rosary-svg { width: 100%; height: auto; display: block; max-width: 640px; margin: 0 auto; }
.rosary-svg .str { fill: none; stroke: var(--line); stroke-width: 2; }
.rosary-svg .route { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 6; }
.rosary-svg .bead circle { stroke: var(--field); stroke-width: 1.5; }
.rosary-svg .small.ta circle { fill: var(--bead-a); }
.rosary-svg .small.tb circle { fill: var(--bead-b); }
.rosary-svg .large circle, .rosary-svg .crucifix circle { fill: var(--rose); }
.rosary-svg .center circle { fill: var(--gold); }
.rosary-svg .none circle { fill: var(--line); }
.rosary-svg .c0 circle { fill: #2a56b0; } .rosary-svg .c1 circle { fill: #2f8a63; } .rosary-svg .c2 circle { fill: #b0661c; }
.rosary-svg .c3 circle { fill: #7a4bb0; } .rosary-svg .c4 circle { fill: #2b8a9a; } .rosary-svg .c5 circle { fill: #8a6d1c; }
.rosary-svg .cross { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; fill: none; }
.rosary-svg .n { fill: #fff; font: 600 10.5px system-ui, sans-serif; text-anchor: middle; }
.rosary-svg .large .n, .rosary-svg .center .n { font-size: 12px; }
.rosary-svg .lbl { fill: var(--ink); font: 13px system-ui, sans-serif; }
.rosary-svg .lbl.dim { fill: var(--muted); font-size: 12px; }
.rosary-svg .mid { fill: var(--ink); font: 24px var(--head); text-anchor: middle; }
.rosary-svg .mid2 { fill: var(--muted); font: 14px system-ui, sans-serif; text-anchor: middle; }
.rosary-svg .front { fill: var(--muted); font: 15px system-ui, sans-serif; text-anchor: middle; }
@media (max-width: 600px) { .rosary-svg:not(.route-svg) .lbl, .rosary-svg .mid2 { display: none; } .rosary-svg .n { font-size: 13px; } }
.wholist { margin-top: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; font-size: 0.95rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 13px; height: 13px; border-radius: 50%; display: inline-block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sw.c0 { background: #2a56b0; } .sw.c1 { background: #2f8a63; } .sw.c2 { background: #b0661c; } .sw.c3 { background: #7a4bb0; } .sw.c4 { background: #2b8a9a; } .sw.c5 { background: #8a6d1c; }

/* Parts list */
.sec h3 { margin: 16px 0 4px; font-size: 1.08rem; }
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { display: grid; grid-template-columns: 2.4rem 1fr minmax(7rem, 40%); gap: 2px 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.plist.cast li { grid-template-columns: 1fr minmax(7rem, 45%); }
.plist .no { font: 600 0.95rem system-ui, sans-serif; color: var(--rose); text-align: right; }
.plist .no.x { color: var(--muted); }
.plist .what b { font-weight: 600; display: block; }
.plist .what small { color: var(--muted); font-size: 0.9rem; display: block; }
.plist .who { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .plist li { grid-template-columns: 2.2rem 1fr; }
  .plist .who { grid-column: 2; font-weight: 600; }
  .plist.cast li { grid-template-columns: 1fr; }
  .plist.cast .who { grid-column: 1; }
}
.lead-steps { margin: 0; }
.tfit { overflow-x: auto; }
.stable { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.stable th, .stable td { text-align: left; vertical-align: top; padding: 7px 6px; border-bottom: 1px solid var(--line); }
.stable td small { display: block; color: var(--muted); }
.stable .c { text-align: right; color: var(--rose); font-weight: 600; }
@media (max-width: 560px) {
  .stable colgroup { display: none; }
  .stable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stable tr { display: grid; grid-template-columns: 2rem 1fr; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .stable td { border: 0; padding: 2px 4px; }
  .stable td:nth-child(n+3) { grid-column: 2; }
  .stable td:nth-child(3)::before { content: "Reader: "; color: var(--muted); }
}
.swap { margin-top: 14px; }
.swap-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; }
@media (max-width: 520px) { .swap-row { grid-template-columns: 1fr; } .swap-row span { display: none; } }
.swap-note { margin: 6px 0 0; font-size: 0.97rem; }

/* Content */
.content { max-width: 46rem; padding: 18px 0 36px; }
.content h2 { margin-top: 28px; }
.days { border-collapse: collapse; margin: 6px 0 12px; width: 100%; max-width: 30rem; }
.days th, .days td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.days tbody th { font-family: var(--head); font-weight: 400; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { color: var(--ink); padding: 8px 0; }
.faq p { margin: 0 0 12px; }
.sources { font-size: 0.95rem; color: var(--muted); margin-top: 26px; }
.sources a { color: var(--muted); }

footer { border-top: 1px solid var(--line); padding: 22px 0 34px; font-size: 0.95rem; color: var(--muted); }
.sb-footer { display: grid; gap: 6px; }
.sb-footer p { margin: 0; line-height: 1.5; }
.sb-more a { display: inline-block; padding: 6px 0; }
.sb-footer a { color: var(--ink); }

.print-root { display: none; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Cue cards (inside the print root, hidden on screen; also measured on screen to pack pages) */
@media all {
  /* Print headers: also here so the cue-card packer measures them at print size. */
  .print-root .ph { border-bottom: 2px solid #1e3a78; margin-bottom: 10px; padding-bottom: 4px; }
  .print-root .ph h2 { font: 20pt var(--head); margin: 0; color: #1e3a78; }
  .print-root .ph p { margin: 2px 0 0; font-size: 10pt; color: #333; }
  .print-root .pnote { font-size: 10pt; margin: 8px 0; }
  .print-root .pnote.small { font-size: 8.5pt; color: #333; }
  /* Two columns that fill each page: a tall card no longer leaves its row partner and the page half empty.
     Cut down the middle, then across each strip. */
  .print-root .cardgrid { columns: 2; column-gap: 0.2in; column-fill: auto; }
  .print-root .cpage { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.2in; align-items: start; }
  .print-root .cpage.next { break-before: page; }
  /* Letter content is 7.5 in wide, A4 7.27 in: show the set of pages packed for the paper in use. */
  .print-root .pack-a { display: none; }
  .print-root .crow { display: contents; }
  .print-root .card { display: block; break-inside: avoid; page-break-inside: avoid; border: 1pt dashed #777; padding: 8pt 10pt; font-size: 9.5pt; line-height: 1.3; margin: 0 0 -1pt; }
  .print-root .card.blank { display: none; }
  .print-root .card.tall { break-inside: auto; page-break-inside: auto; }
  .print-root .card.tall .cs, .print-root .card.tall header { break-inside: avoid; }
  .print-root .card header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8pt; border-bottom: 1pt solid #1e3a78; padding-bottom: 3pt; }
  .print-root .card .cno { flex: 1 1 auto; }
  .print-root .card .cname { flex: 0 0 auto; margin-left: auto; }
  .print-root .card .cno { font: 16pt var(--head); color: #a63a62; }
  .print-root .card .cname { font-weight: 700; font-size: 11pt; text-align: right; }
  .print-root .card .cplace, .print-root .card .cafter { margin: 3pt 0; }
  .print-root .card .cafter { font-style: italic; color: #333; }
  .print-root .card h4 { margin: 5pt 0 1pt; font-size: 10pt; color: #1e3a78; }
  .print-root .card .say, .print-root .card .ans { margin: 1pt 0; }
  .print-root .card .say span, .print-root .card .ans span { display: block; font-size: 8pt; text-transform: none; color: #555; font-weight: 700; }
  .print-root .card .ans { padding-left: 8pt; border-left: 2pt solid #ccc; }
  .print-root .card .cnote { margin: 1pt 0; color: #333; }
  .print-root .card .lines i { display: block; height: 0.25in; border-bottom: 0.75pt solid #999; }
  .print-root .card footer { margin-top: 5pt; font-size: 7.5pt; color: #555; border: 0; padding: 0; }
}

/* ---------------- Print ---------------- */
@media print and (max-width: 7.4in) { .print-root .pack-l { display: none; } .print-root .pack-a { display: block; } }
@page { size: auto; margin: 0.5in; }
@media print {
  :root { --ink: #111; --muted: #444; --line: #bbb; --field: #fff; --bg: #fff; --rose: #a63a62; --gold: #a7781c; --bead-a: #2a56b0; --bead-b: #7d99d9; }
  body { background: #fff; color: #111; font-size: 11pt; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block !important; }
  .sheet + .sheet { break-before: page; }
  .pdiagram svg { width: 100%; max-height: 8.9in; }
  .pdiagram .rosary-svg { max-width: none; }
  .rosary-svg .lbl { font-size: 12.5px; fill: #111; }
  .rosary-svg .bead, .rosary-svg circle, .rosary-svg .cross { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rosary-svg .bead circle { stroke: #fff; }
  .rosary-svg .n { fill: #fff; }
  .ptable { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10pt; }
  .ptable th, .ptable td { border-bottom: 0.75pt solid #bbb; padding: 3pt 4pt; text-align: left; vertical-align: top; overflow-wrap: break-word; }
  .ptable thead th { border-bottom: 1.5pt solid #111; font-weight: 700; }
  .ptable .sh th { padding-top: 9pt; font: 12pt var(--head); color: #1e3a78; border-bottom: 1pt solid #1e3a78; }
  .ptable tbody { break-inside: avoid; }
  .ptable tr { break-inside: avoid; }
  .ptable .c { text-align: right; color: #a63a62; font-weight: 700; }
  .ptable td small { display: block; color: #444; }
  .ptable .w { font-size: 9pt; color: #333; margin-top: 1pt; }
  .script-t tbody, .stations-t tbody { break-inside: auto; }
  .script-t { font-size: 9.5pt; }
  .script-t td { padding: 1.6pt 4pt; }
  .script-t .sh { break-after: avoid; }
  .signup-t tbody { break-inside: auto; }
  .signup-t .sh { break-after: avoid; }
  .signup-t td { height: 0.34in; vertical-align: bottom; }
  .signup-t .tick { border-left: 0.75pt solid #bbb; }
  /* 31 traditional parts fit one Letter page with room to write each name. */
  .st-signup td { height: 0.27in; padding-top: 2pt; padding-bottom: 2pt; line-height: 1.2; }
  .st-signup.named td { height: auto; }
  .signup .pnote { orphans: 3; widows: 3; }
  .keybox { border: 1pt solid #bbb; padding: 5pt 8pt; margin: 0 0 8pt; font-size: 9.5pt; }
  .keybox p { margin: 2pt 0; }
  .lcols { columns: 2; column-gap: 0.3in; font-size: 9pt; line-height: 1.2; }
  .lsec { break-inside: avoid; margin: 0 0 6pt; }
  /* Long name lists: let a decade continue in the next column instead of leaving columns half empty. */
  .big .lsec { break-inside: auto; }
  .big .lsec h3 { break-after: avoid; }
  .big .lsec li small { display: block; font-size: 7.5pt; color: #555; }
  .lsec h3 { font: 11.5pt var(--head); color: #1e3a78; margin: 0 0 2pt; border-bottom: 1pt solid #1e3a78; }
  .lsec ol { list-style: none; margin: 0; padding: 0; }
  .lsec li { display: grid; grid-template-columns: 0.3in 1.05in 1fr; gap: 4pt; border-bottom: 0.5pt solid #ccc; padding: 1pt 0; break-inside: avoid; }
  .lsec .c { text-align: right; color: #a63a62; font-weight: 700; }
  .lsec b { overflow-wrap: anywhere; }
  .legend { font-size: 10pt; }
  .stblock { break-inside: avoid; border-bottom: 0.75pt solid #bbb; padding: 4pt 0 6pt; }
  .stblock h3 { font: 13pt var(--head); color: #1e3a78; margin: 4pt 0 2pt; }
  .stblock p { margin: 2pt 0; font-size: 10pt; }
  .stblock blockquote { margin: 3pt 0 3pt 12pt; font-size: 9.5pt; color: #222; }
  .stblock .move { font-style: italic; color: #444; }
  a { color: #111; text-decoration: none; }
}
.pin-list { margin: 8px 0 0; padding-left: 1.2rem; }
.pin-list li { margin: 4px 0; }