/* 1765 Regina — The Cradle: tool styles (scoped under .rk-tool--cradle and .cr-reader sheets) and the
   /cradle/ page's own article styles (.cradle-page). Everything else comes from kit.css. Both themes via
   kit tokens; motion is transform/opacity only and stops under prefers-reduced-motion. */

.rk-tool--cradle { max-width: 760px; margin: 0 auto; }
.rk-tool--cradle .cr-h2 { font: 600 24px/1.2 var(--rk-f-display); color: var(--rk-ink); margin: 28px 0 12px; }
.rk-tool--cradle .cr-label, .cr-reader .cr-label {
  font: 600 10.5px/1.3 var(--rk-f-inscr); letter-spacing: 0.24em; text-transform: uppercase; color: var(--rk-gold); margin: 0 0 6px;
}

/* the not-medical-advice banner: always first, never dismissible */
.rk-tool--cradle .cr-banner {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--rk-line-2); border-left: 3px solid var(--rk-blue-text); border-radius: var(--rk-r2);
  background: color-mix(in srgb, var(--rk-blue) 14%, var(--rk-surface)); color: var(--rk-ink-dim);
}
.rk-tool--cradle .cr-banner .rk-icon { color: var(--rk-blue-text); margin-top: 3px; }
.rk-tool--cradle .cr-banner p { margin: 0; font-size: 16px; line-height: 1.5; }
.rk-tool--cradle .cr-banner strong { color: var(--rk-ink); font-weight: 600; }

.rk-tool--cradle .cr-today-saint { display: flex; gap: 8px; align-items: flex-start; margin: -8px 0 18px; color: var(--rk-ink-dim); font-size: 16px; }
.rk-tool--cradle .cr-today-saint .rk-icon { color: var(--rk-gold); margin-top: 3px; }

.rk-tool--cradle .cr-due { display: flex; gap: 8px; align-items: flex-start; color: var(--rk-ink-dim); font-size: 16px; margin: 0 0 14px; }
.rk-tool--cradle .cr-due .rk-icon { color: var(--rk-gold); margin-top: 3px; flex: none; }
.rk-tool--cradle .cr-note, .cr-reader .cr-note {
  margin: 14px 0; padding: 12px 14px; border-radius: var(--rk-r2); border: 1px dashed var(--rk-line-2); color: var(--rk-ink-dim); font-size: 16px;
}
.rk-tool--cradle .cr-note p, .cr-reader .cr-note p { margin: 0 0 8px; }
.rk-tool--cradle .cr-note p:last-child, .cr-reader .cr-note p:last-child { margin-bottom: 0; }

/* a week's entry */
.cr-week { margin: 16px 0 14px; }
.cr-week__title { font: italic 500 26px/1.2 var(--rk-f-display); color: var(--rk-gold-bright); margin: 0 0 14px; }
.cr-scripture { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 2px solid var(--rk-gold); }
.cr-scripture p { margin: 0; font: italic 400 19px/1.6 var(--rk-f-body); color: var(--rk-ink); }
.cr-scripture 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; }
.cr-scripture cite a { color: var(--rk-ink-mute); text-decoration: none; border-bottom: 1px solid var(--rk-line-2); }
.cr-reflection { font-size: 17.5px; line-height: 1.65; color: var(--rk-ink-dim); margin: 0 0 4px; }
.cr-src { font-size: 13.5px; line-height: 1.45; color: var(--rk-ink-mute); margin: 4px 0 14px; }
.cr-src a { color: var(--rk-blue-text); }
.cr-prayer, .cr-companion { margin: 14px 0; padding: 14px 16px; border-radius: var(--rk-r2); border: 1px solid var(--rk-line); background: color-mix(in srgb, var(--rk-raised) 70%, transparent); }
.cr-prayer__text { margin: 0 0 6px; font: 400 18px/1.6 var(--rk-f-body); color: var(--rk-ink); }
.cr-prayer .cr-src, .cr-companion .cr-src { margin-bottom: 0; }
.cr-companion__name { font: 600 20px/1.25 var(--rk-f-display); margin: 0 0 4px; color: var(--rk-ink); }
.cr-companion__note { margin: 0 0 6px; font-size: 16.5px; line-height: 1.55; color: var(--rk-ink-dim); }
.cr-latin { margin: 6px 0 8px; }
.cr-latin summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 12px; list-style: none; color: var(--rk-gold-bright); font: 600 11px/1.2 var(--rk-f-inscr); letter-spacing: 0.18em; text-transform: uppercase; touch-action: manipulation; }
.cr-latin summary::-webkit-details-marker { display: none; }
/* the open/close mark: a small chevron that turns when the text is open */
.cr-latin summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 160ms var(--rk-ease); }
.cr-latin[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.cr-latin p { font-style: italic; color: var(--rk-ink-dim); margin: 4px 0 8px; }

/* lists */
.rk-tool--cradle .cr-quiet { margin-top: 16px; }
.rk-tool--cradle .cr-quiet .rk-item__icon, .rk-tool--cradle .cr-library .rk-item__icon { color: var(--rk-gold); }
.rk-tool--cradle .rk-item > .rk-icon:last-child, .cr-reader .rk-item > .rk-icon:last-child { color: var(--rk-ink-mute); }
.cr-weeklist .cr-weeknum { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rk-line-gold-2); color: var(--rk-gold-bright); font: 600 14px/1 var(--rk-f-display); font-variant-numeric: lining-nums; }
.cr-weeklist .is-current .cr-weeknum { background: var(--rk-btn-bg); color: var(--rk-btn-ink); border-color: transparent; }
.cr-weekchips .rk-chip { min-width: 48px; min-height: 44px; justify-content: center; }

/* the night-feeding bead */
.rk-tool--cradle .cr-bead-row { display: flex; align-items: center; gap: 18px; margin: 6px 0 14px; }
.rk-tool--cradle .cr-bead {
  position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 2px;
  border: 1px solid var(--rk-line-gold-2); color: var(--rk-gold-bright);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rk-gold) 30%, transparent), transparent 60%), var(--rk-surface);
  transition: transform 90ms var(--rk-ease); touch-action: manipulation;
}
.rk-tool--cradle .cr-bead__n { font: 600 28px/1 var(--rk-f-display); font-variant-numeric: lining-nums tabular-nums; color: var(--rk-ink); }
.rk-tool--cradle .cr-bead.is-pressed, .rk-tool--cradle .cr-bead:active { transform: scale(0.95); }
.rk-tool--cradle .cr-bead::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--rk-gold-bright); opacity: 0; transform: scale(0.9); }
.rk-tool--cradle .cr-bead.is-glow::after { animation: cr-glow 700ms var(--rk-ease-out); }
@keyframes cr-glow { 0% { opacity: 0.85; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.18); } }
.rk-tool--cradle .cr-bead__tally { margin: 0; color: var(--rk-ink-dim); font-size: 16.5px; }

/* children + milestones */
.rk-tool--cradle .cr-kids { display: grid; gap: 12px; margin: 14px 0 16px; }
.rk-tool--cradle .cr-kid { padding: 14px 16px 4px; border: 1px solid var(--rk-line); border-radius: var(--rk-r2); background: var(--rk-surface); }
.rk-tool--cradle .cr-kid__name { font: 600 21px/1.25 var(--rk-f-display); margin: 0 0 6px; }
.rk-tool--cradle .cr-kid__next { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; color: var(--rk-gold-bright); font-size: 16px; }
.rk-tool--cradle .cr-kid__next .rk-icon { margin-top: 3px; }



/* baptism checklist */
.cr-checklist .cr-check { align-items: flex-start; }
.cr-checklist .cr-box { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 6px; border: 1px solid var(--rk-line-2); display: grid; place-items: center; color: transparent; }
.cr-checklist .cr-check[aria-checked="true"] .cr-box { background: var(--rk-btn-bg); border-color: transparent; color: var(--rk-btn-ink); }
.cr-checklist .cr-check[aria-checked="true"] .rk-item__title { color: var(--rk-gold-bright); }

/* keeping + footer */
.rk-tool--cradle .cr-keep-acts { flex-basis: 100%; }
.rk-tool--cradle .cr-keep-rule { font-size: 14.5px; margin: -6px 0 14px; }
.rk-tool--cradle .cr-foot { margin: 28px 0 8px; padding-top: 16px; border-top: 1px solid var(--rk-line); }
.rk-tool--cradle .cr-foot p { font-size: 14.5px; line-height: 1.5; }

.cr-reader .cr-bless { margin: 0 0 18px; }
.cr-reader h3 { font: 600 22px/1.2 var(--rk-f-display); }

@media (prefers-reduced-motion: reduce) {
  .rk-tool--cradle .cr-bead, .rk-tool--cradle .cr-bead::after { transition: none; animation: none !important; }
}

/* ---------- the /cradle/ page's article (outside the tool) ---------- */
.cradle-page { max-width: 760px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) 16px 64px; color: var(--ink, #F4EDDF); }
.cradle-page .cradle-head { margin: 0 0 24px; }
.cradle-page .cradle-head h1 { font: 600 clamp(36px, 7vw, 56px)/1.05 var(--f-display, "Cormorant Garamond", Georgia, serif); margin: 0 0 14px; }
.cradle-page .cradle-head h1 em { font-style: italic; font-weight: 500; color: var(--accent-bright, #E0BC62); }
.cradle-page .cradle-lede { font: 500 clamp(19px, 2.4vw, 22px)/1.5 var(--f-display, "Cormorant Garamond", Georgia, serif); color: var(--ink-dim, #C9C0AB); margin: 0; }
.cradle-page .cradle-mount { margin: 28px 0 40px; min-height: 100vh; } /* the article below stays below the fold until the tool is drawn: no shift on mount */
.cradle-page .cradle-article h2 { font: 600 clamp(26px, 4vw, 32px)/1.2 var(--f-display, "Cormorant Garamond", Georgia, serif); margin: 40px 0 12px; }
.cradle-page .cradle-article h2 em { font-style: italic; font-weight: 500; color: var(--accent-bright, #E0BC62); }
.cradle-page .cradle-article p, .cradle-page .cradle-article li { font-size: 18.5px; line-height: 1.65; color: var(--ink-dim, #C9C0AB); }
.cradle-page .cradle-article strong { color: var(--ink, #F4EDDF); font-weight: 600; }
.cradle-page .cradle-article a { color: var(--accent-bright, #E0BC62); }
.cradle-page .cradle-article .cradle-sources li { font-size: 15.5px; margin-bottom: 6px; }
.cradle-page .cradle-noscript { padding: 16px; border: 1px solid rgba(196, 154, 60, 0.4); border-radius: 6px; }
.cr-reader:focus { outline: none; }
.rk-tool--cradle .rk-calendar { max-width: 440px; }
.rk-tool--cradle .cr-kid .cr-ms { margin: 0 0 12px; }
.rk-tool--cradle .cr-kid .cr-ms .rk-item { min-height: 52px; }
:root[data-theme="light"] .rk-tool--cradle .cr-banner { background: color-mix(in srgb, var(--rk-blue) 6%, var(--rk-raised)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .rk-tool--cradle .cr-banner { background: color-mix(in srgb, var(--rk-blue) 6%, var(--rk-raised)); } }

/* ---------- stage-2 review additions ---------- */
/* the welcome: three stages, each a button that opens its stage at once */
.rk-tool--cradle .cr-stages { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 10px; }
.rk-tool--cradle .cr-stage-opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 14px; width: 100%; min-height: 68px;
  padding: 12px 14px 12px 12px; text-align: left; border-radius: var(--rk-r2); border: 1px solid var(--rk-line-2);
  background: var(--rk-surface); color: var(--rk-ink); font: inherit; cursor: pointer; touch-action: manipulation;
  transition: transform 90ms var(--rk-ease), border-color 140ms var(--rk-ease);
}
.rk-tool--cradle .cr-stage-opt__icon {
  width: 44px; height: 44px; padding: 10px; border-radius: 50%; border: 1px solid var(--rk-line-gold-2); color: var(--rk-gold-bright);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rk-gold) 16%, transparent), transparent 70%);
}
.rk-tool--cradle .cr-stage-opt__main { min-width: 0; }
.rk-tool--cradle .cr-stage-opt__label { display: block; font: 600 21px/1.2 var(--rk-f-display); color: var(--rk-ink); }
.rk-tool--cradle .cr-stage-opt__hint { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--rk-ink-mute); }
.rk-tool--cradle .cr-stage-opt__go { color: var(--rk-ink-mute); }
.rk-tool--cradle .cr-stage-opt.is-pressed, .rk-tool--cradle .cr-stage-opt:active { transform: scale(0.985); }
@media (hover: hover) { .rk-tool--cradle .cr-stage-opt:hover { border-color: var(--rk-line-gold-2); } .rk-tool--cradle .cr-stage-opt:hover .cr-stage-opt__go { color: var(--rk-gold-bright); } }

/* a heading that takes focus after a stage change sits clear of the sticky site header */
.rk-tool--cradle .cr-stage-h, .rk-tool--cradle #cr-welcome-h { scroll-margin-top: 96px; }
.rk-tool--cradle .cr-stage-h:focus:not(:focus-visible), .rk-tool--cradle #cr-welcome-h:focus:not(:focus-visible) { outline: none; }

/* storage is not saving: a standing notice, not only a toast */
.rk-tool--cradle .cr-warn {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--rk-r2);
  border: 1px solid color-mix(in srgb, var(--rk-alert) 55%, transparent); background: color-mix(in srgb, var(--rk-alert) 9%, var(--rk-surface));
  color: var(--rk-ink-dim); font-size: 16px; line-height: 1.5;
}
.rk-tool--cradle .cr-warn .rk-icon { color: var(--rk-alert); margin-top: 3px; }
.rk-tool--cradle .cr-warn strong { color: var(--rk-ink); font-weight: 600; }

/* a child who has died is named among the children, quietly, never given milestones */
.rk-tool--cradle .cr-remembered { display: flex; gap: 8px; align-items: flex-start; margin: -2px 0 18px; color: var(--rk-ink-dim); font-style: italic; font-size: 16.5px; line-height: 1.5; }
.rk-tool--cradle .cr-remembered .rk-icon { color: var(--rk-gold); margin-top: 3px; flex: none; }
@media (prefers-reduced-motion: reduce) { .rk-tool--cradle .cr-stage-opt, .cr-latin summary::after { transition: none; } }
.cr-field-err:not(:empty) { color: var(--rk-alert); margin-top: 8px; }

/* ---------- stage-2 verification pass ---------- */
/* the kit's month grid always draws six weeks; drop trailing weeks that hold no day of this month (rows 5-6
   only: a leading blank cell sits in row 1, so hiding trailing ones never shifts a day) */
.rk-tool--cradle .rk-calendar__d.is-out:nth-child(n+29) { display: none; }
/* keep the accent phrase of the headline whole on a phone: "Carry your child / in prayer.", never "Carry your / child in prayer." */
.cradle-page .cradle-head h1 { text-wrap: wrap; } /* site.css balances headings, which would pull "child" down */
.cradle-page .cradle-head h1 em { display: inline-block; }
/* speed: the sections below the day's card are laid out and painted only when they come near the screen; each keeps
   the size it last had, so nothing jumps when it is drawn */
.rk-tool--cradle > .cr-ahead, .rk-tool--cradle > .cr-library, .rk-tool--cradle > .cr-prints, .rk-tool--cradle > .cr-foot { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.rk-tool--cradle > .cr-library { contain-intrinsic-size: auto 680px; }
.rk-tool--cradle > .cr-prints { contain-intrinsic-size: auto 220px; }
.rk-tool--cradle > .cr-foot { contain-intrinsic-size: auto 170px; }
/* the forty-weeks list: rows far from view are styled and laid out only as they scroll near */
.cr-weeklist > li { content-visibility: auto; contain-intrinsic-size: auto 66px; }
.cr-checklist > li { content-visibility: auto; contain-intrinsic-size: auto 96px; }
/* the reading of a newly opened week arrives one frame after its heading; hold its place so nothing jumps */
.rk-tool--cradle .cr-week-slot { min-height: 60vh; }