/* 1765 Regina — Mater Dolorosa (scoped to .rk-tool--mater-dolorosa and its sheets). Gentle typography:
   more air, larger reading sizes, no badges, no counts. Uses kit.css tokens only; both themes. */

.rk-tool--mater-dolorosa { --md-gap: 18px; line-height: 1.6; container-type: inline-size; }
.rk-tool--mater-dolorosa .rk-card { margin-bottom: var(--md-gap); }

/* ---------- the strip at the top ---------- */
.md-urgent {
  border: 1px solid color-mix(in srgb, var(--rk-alert) 45%, transparent);
  background: color-mix(in srgb, var(--rk-alert) 7%, var(--rk-surface));
  border-radius: var(--rk-r2); padding: 12px 14px; margin: 0 0 var(--md-gap);
}
.md-urgent__text { margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: var(--rk-ink); }
.md-urgent__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.md-urgent__call { flex: 1 1 auto; color: var(--rk-ink); border-color: color-mix(in srgb, var(--rk-alert) 55%, transparent); }
.md-urgent__call .rk-icon { color: var(--rk-alert); }
.md-urgent__paths { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.md-urgent__path {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--rk-ink); font: 500 16px/1.2 var(--rk-f-body); text-decoration: underline; text-decoration-color: var(--rk-line-2);
  text-underline-offset: 4px; cursor: pointer;
}
.md-urgent__path .rk-icon { color: var(--rk-ink-mute); }
.md-urgent__path.is-on { color: var(--rk-gold-bright); text-decoration-color: currentColor; }
.md-urgent__path.is-pressed { opacity: 0.7; }

/* ---------- home ---------- */
.md-head { margin: 4px 0 14px; }
.md-head__q { font: 600 clamp(26px, 6vw, 34px)/1.15 var(--rk-f-display); margin: 0 0 6px; color: var(--rk-ink); }
.md-head__q em { font-style: italic; font-weight: 500; color: var(--rk-gold-bright); }
.md-head__q:focus { outline: none; }
.md-head__lede { margin: 0; font-size: 17px; color: var(--rk-ink-dim); }
.md-triage { margin-bottom: 26px; }
.md-triage__item { min-height: 66px; padding: 12px 16px; }
.md-triage__item .rk-item__title { font: 600 19px/1.25 var(--rk-f-display); }
.md-triage__item .rk-item__sub { font-size: 15px; }

/* today */
.md-today .rk-day { margin-bottom: 10px; }
.md-notes { list-style: none; margin: 0 0 14px; padding: 0; }
.md-notes li { position: relative; padding: 0 0 8px 16px; font-size: 16.5px; line-height: 1.5; color: var(--rk-ink-dim); }
.md-notes li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--rk-gold); }
.md-notes__src, .md-notes__src a { color: var(--rk-ink-mute); font-size: 14px; }
.md-due { margin: 6px 0 14px; }
.md-due__list, .md-coming { list-style: none; margin: 0 0 6px; padding: 0; }
.md-due__item, .md-coming li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--rk-line); }
.md-due__name, .md-coming__name { font: 600 18px/1.3 var(--rk-f-display); color: var(--rk-ink); }
.md-due__when, .md-coming__when { font-size: 15px; color: var(--rk-ink-mute); }
.md-due__item.is-today .md-due__when { color: var(--rk-gold-bright); }
.md-coming__label { margin-top: 8px; }
.md-today-tag { color: var(--rk-gold-bright); font: 600 11px/1 var(--rk-f-inscr); letter-spacing: 0.18em; text-transform: uppercase; }

.md-pray .rk-list, .md-remember .rk-list { margin-bottom: 12px; }
.md-privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--rk-ink-mute); margin: 6px 2px 0; }
.md-privacy .rk-icon { margin-top: 3px; color: var(--rk-gold); }

/* people to call */
.md-parish { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--rk-line); }
.md-parish__t { font: 600 18px/1.3 var(--rk-f-display); margin: 0 0 4px; }
.md-parish__s { font-size: 15.5px; margin: 0 0 10px; }
.md-lines { margin-bottom: 0; }

/* ---------- a path ---------- */
.md-pathbar { margin: 0 0 14px; }
.md-pathbar__back { margin: 0 0 4px -10px; }
/* afraid at home: a quiet, always-visible way out, above the protocol */
.md-exit { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
.md-exit .rk-btn { min-height: 44px; }
.md-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.md-chips .rk-chip { font-size: 15px; min-height: 44px; white-space: nowrap; }
/* a phone-width tool (by its own width, so a phone-width app column on a tablet counts): the other paths are one
   sideways row, so the path she chose starts on the first screen */
@container (max-width: 599px) {
  .md-chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 -4px; padding: 4px 32px 6px 4px; scroll-padding-inline: 4px 32px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .md-chips.is-scrolled {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 36px), transparent);
  }
  .md-chips::-webkit-scrollbar { display: none; }
  .md-chips .rk-chip { flex: none; }
}
.md-chips .rk-chip[aria-current="true"] { border-color: var(--rk-gold); color: var(--rk-gold-bright); background: color-mix(in srgb, var(--rk-gold) 12%, transparent); }
.md-path .rk-crisis { margin-bottom: 26px; }
.md-teaching { margin: 8px 0 22px; }
.md-teach__title { font: 600 22px/1.25 var(--rk-f-display); margin: 0 0 10px; }
.md-teach__p { font-size: 17.5px; line-height: 1.65; color: var(--rk-ink-dim); margin: 0 0 12px; }
.md-quote { margin: 4px 0 14px; padding: 2px 0 2px 16px; border-left: 2px solid var(--rk-gold); font: italic 500 19.5px/1.5 var(--rk-f-display); color: var(--rk-ink); }
.md-quote cite { display: block; margin-top: 6px; font: 600 10.5px/1.4 var(--rk-f-inscr); letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; color: var(--rk-ink-mute); }
.md-quote--prayer { padding: 12px 14px; border: 1px solid var(--rk-line-gold); border-radius: var(--rk-r2); background: var(--rk-raised); }
.md-src { font-size: 13.5px; line-height: 1.5; color: var(--rk-ink-mute); margin: 8px 0 0; }
.md-src a { color: inherit; }
.md-ccc { font-size: 12.5px; font-style: italic; line-height: 1.5; color: var(--rk-ink-mute); margin: 4px 2px 0; }

/* ---------- forms ---------- */
.md-err { color: var(--rk-alert); font-size: 15px; margin: 0; min-height: 1px; }
.md-err:empty { display: none; }
.md-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; font-size: 15.5px; line-height: 1.45;
  color: var(--rk-ink); border: 1px solid color-mix(in srgb, var(--rk-alert) 45%, transparent); border-radius: var(--rk-r2); }
.md-warn .rk-icon { flex: none; margin-top: 3px; color: var(--rk-alert); }

/* ---------- reader sheets ---------- */
.md-sheet .rk-sheet__body { padding-top: 8px; }
/* the long readers open at their full height, so the text that joins a frame later does not grow the sheet */
.md-sheet--long { height: min(92vh, calc(100dvh - 24px)); }
.md-sheet--long .rk-sheet__body { flex: 1 1 auto; min-height: 0; }

/* the web page: hold the tool's place until it mounts, so the article below does not jump (CLS) */
@media (scripting: enabled) {
  .md-page-tool #rg-tool:not(.rk-host):not(:has([role="alert"])) { min-height: 100vh; }
}
/* The page's article below the tool is laid out only when it nears the screen, so a tap that swaps the tool's
   view has less to lay out on a slow phone (its size is remembered once seen). Not used inside the tool: cards
   that change size as they appear would move the button under a finger. */
.md-page-tool ~ .section { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.md-stanzas { font-size: 18px; line-height: 1.6; }
.md-part { margin: 0 0 8px; }
.md-part__label { font: 600 11px/1.2 var(--rk-f-inscr); letter-spacing: 0.24em; text-transform: uppercase; color: var(--rk-gold); margin: 14px 0 10px; }
.md-stanza { margin-bottom: 1em; }
.md-stanzas[data-show="en"] .rk-reader__pair, .md-stanzas[data-show="la"] .rk-reader__pair { grid-template-columns: 1fr; }
.md-stanzas .rk-reader__pair + .rk-reader__pair .rk-reader__la::before,
.md-stanzas .rk-reader__pair + .rk-reader__pair .rk-reader__en::before { display: none; }
.md-about { font-size: 16px; color: var(--rk-ink-dim); margin-top: 1.2em; }
.md-sorrows { font-size: 18px; }
.md-sorrows h3 { font: 600 21px/1.25 var(--rk-f-display); margin: 1.2em 0 0.4em; }
.md-sorrow { padding: 4px 0 10px; border-top: 1px solid var(--rk-line); margin-top: 10px; }
.md-sorrow__n { display: block; font: 600 10.5px/1.4 var(--rk-f-inscr); letter-spacing: 0.22em; text-transform: uppercase; color: var(--rk-gold); margin-bottom: 2px; }
.md-trad { font-size: 15px; color: var(--rk-ink-mute); font-style: italic; }
.md-pattern { font-size: 15.5px; color: var(--rk-ink-mute); margin: 0 0 8px !important; }
.md-step { font-size: 16.5px; color: var(--rk-ink-dim); }
.md-collect { font-style: italic; }
.md-basics { border: 1px solid var(--rk-line-2); border-radius: var(--rk-r2); padding: 0 14px; margin: 0 0 1em; }
.md-basics summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 12px/1.2 var(--rk-f-inscr); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rk-gold-bright); }
.md-basics h3 { font-size: 18px; margin: 0.6em 0 0.2em; }
.md-beads { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.md-bead {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; touch-action: manipulation;
}
.md-bead::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 1.5px solid var(--rk-gold); background: transparent;
  transition: background-color 120ms var(--rk-ease), transform 90ms var(--rk-ease);
}
.md-bead.is-on::before { background: var(--rk-gold); }
.md-bead.is-pressed::before { transform: scale(0.85); }
.md-bead:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: -4px; border-radius: 50%; }

@media (min-width: 760px) {
  .md-triage__item .rk-item__title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .md-bead::before { transition: none; }
  .md-bead.is-pressed::before { transform: none; }
}
@media print {
  .md-urgent__acts, .md-pathbar, .md-beads { display: none !important; }
}