/* 1765 Regina — The Liturgical Home (tool CSS, scoped to .rk-tool--liturgical-home and its sheets; kit.css does
   the rest). Colours only from kit tokens and the liturgical tokens, so both themes follow. Motion: none. */

.rk-tool--liturgical-home { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.6; container: lh / inline-size; }
.rk-tool--liturgical-home .lh-tabs { margin: 0 0 18px; }
/* kept panels: one grid cell; the hidden ones keep their layout (content-visibility) and take no room */
.rk-tool--liturgical-home .lh-body { display: grid; position: relative; }
.lh-panel { grid-area: 1 / 1; min-width: 0; }
.lh-panel.is-kept { content-visibility: hidden; visibility: hidden; pointer-events: none; }
.lh-panel.is-warming { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; }
@supports not (content-visibility: hidden) { .lh-panel.is-kept { display: none; } }
.rk-tool--liturgical-home .lh-tabs .rk-seg__opt { min-width: 0; padding-left: 4px; padding-right: 4px; }
.rk-tool--liturgical-home .rk-day { margin-bottom: 14px; }
/* the season bar keeps an edge on a white day (white on parchment would vanish) */
.rk-tool--liturgical-home .rk-day::before { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rk-ink) 22%, transparent); }
.rk-tool--liturgical-home .lh-card { margin: 0 0 14px; }
.rk-tool--liturgical-home .lh-h3 { font: 600 22px/1.2 var(--rk-f-display); color: var(--rk-ink); margin: 26px 0 10px; }
.rk-tool--liturgical-home .lh-note, .lh-daysheet .lh-note { font-size: 15.5px; color: var(--rk-ink-mute); line-height: 1.5; }
.rk-tool--liturgical-home .lh-center { text-align: center; justify-content: center; }
.rk-tool--liturgical-home .lh-actions { margin: 6px 0 12px; }
.rk-tool--liturgical-home .lh-actions--two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@container lh (max-width: 440px) { .rk-tool--liturgical-home .lh-actions--two { grid-template-columns: 1fr; } }
.rk-tool--liturgical-home .lh-extra { margin: 14px 0 0; }

/* "Kept this day at your table": a quiet toggle row, not a shouting button */
.lh-keep {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 16px 0 0; padding: 12px 14px;
  border: 1px solid var(--rk-line-gold); border-radius: var(--rk-r2); background: transparent; color: var(--rk-ink);
  font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.lh-keep.is-on { border-color: var(--rk-line-gold-2); background: color-mix(in srgb, var(--rk-gold) 8%, transparent); }
.lh-keep.is-pressed, .lh-keep:active { background: var(--rk-raised-2); }
@media (hover: hover) { .lh-keep:hover { background: var(--rk-raised); } }
.lh-keep__main { display: flex; flex-direction: column; min-width: 0; }
.lh-keep__title { font: 600 18px/1.25 var(--rk-f-display); color: var(--rk-ink); }
.lh-keep__sub { font-size: 14.5px; line-height: 1.35; color: var(--rk-ink-mute); margin-top: 2px; }
.lh-daysheet .lh-keep { margin-top: 18px; }
/* a sheet's text block may take focus when it opens (so a screen reader starts at the top); it is not a control */
.lh-daysheet[tabindex="-1"]:focus, .lh-reader[tabindex="-1"]:focus { outline: none; }

/* storage refused: say so plainly, once, at the top */
.lh-nosave {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--rk-r2);
  border: 1px solid color-mix(in srgb, var(--rk-alert) 55%, transparent); color: var(--rk-ink); font-size: 15.5px; line-height: 1.45;
}
.lh-nosave svg { flex: 0 0 auto; margin-top: 2px; color: var(--rk-alert); }
.rk-tool--liturgical-home .rk-btn-row .rk-btn { min-height: 44px; }

/* colour of the day */
.lh-colourline { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--rk-ink); font-size: 17px; }
.lh-swatch {
  display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
  background: var(--lh-c, var(--lit-green, #5A7D52)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rk-ink) 30%, transparent);
}

/* scripture */
.rk-tool--liturgical-home .lh-verse, .lh-daysheet .lh-verse, .lh-reader .lh-verse {
  margin: 12px 0 4px; padding: 2px 0 2px 16px; border-left: 2px solid var(--rk-gold);
  font: italic 500 19px/1.45 var(--rk-f-display); color: var(--rk-ink);
}
.lh-verse p { margin: 0; }
.lh-verse cite { display: block; margin-top: 6px; font: 600 10.5px/1.4 var(--rk-f-inscr); letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--rk-ink-mute); }
.lh-srcline { font-size: 14px; color: var(--rk-ink-mute); margin: 6px 0 0; line-height: 1.45; }
.lh-src { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
/* a source link stands alone on its line: give it a 44px target without spreading the text */
a.lh-src { display: inline-block; padding: 12px 0; margin: -10px 0; }
.lh-plain a.lh-src { margin: -8px 0; }

/* practices */
.rk-tool--liturgical-home .lh-practices .rk-item { align-items: flex-start; text-align: left; width: 100%; }
.rk-tool--liturgical-home .lh-prtext { font-size: 17px; line-height: 1.45; }
.lh-check {
  flex: 0 0 26px; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rk-line-gold-2); color: var(--rk-btn-ink);
}
.lh-check.is-on { background: var(--rk-gold); border-color: var(--rk-gold); }

/* month calendar */
.lh-cal { border: 1px solid var(--rk-line); border-radius: var(--rk-r3); background: var(--rk-surface); padding: 12px 10px 10px; margin: 0 0 14px; }
.lh-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.lh-cal__title { font: 600 22px/1.2 var(--rk-f-display); margin: 0; color: var(--rk-ink); outline-offset: 4px; }
.lh-cal__nav { min-width: 44px; min-height: 44px; }
.lh-cal__dow, .lh-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lh-cal__dow span { text-align: center; font: 600 11px/1.6 var(--rk-f-inscr); letter-spacing: 0.14em; color: var(--rk-ink-mute); }
.lh-cal__d {
  position: relative; min-height: 48px; padding: 4px 2px 5px; border-radius: var(--rk-r2); border: 1px solid transparent;
  background: transparent; color: var(--rk-ink); font: 500 16px/1 var(--rk-f-body); display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  cursor: pointer; touch-action: manipulation;
}
.lh-cal__d.is-out { visibility: hidden; }
.lh-cal__d.is-major .lh-cal__n { color: var(--rk-gold-bright); font-weight: 600; }
.lh-cal__d.is-today { border-color: var(--rk-gold); background: color-mix(in srgb, var(--rk-gold) 10%, transparent); }
.lh-cal__d.is-pressed, .lh-cal__d:active { background: var(--rk-raised-2); }
.lh-cal__marks { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 12px; font-size: 11px; line-height: 1; color: var(--rk-ink-mute); }
.lh-cal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lh-c, var(--lit-green, #5A7D52)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rk-ink) 30%, transparent); display: inline-block; }
.lh-cal__kept { color: var(--rk-gold-bright); font-weight: 700; }
.lh-cal__dot--key { --lh-c: var(--rk-gold); vertical-align: 0; }
.lh-cal__hdo { color: var(--rk-gold-bright); font-weight: 700; }
.lh-cal__fast { color: var(--rk-alert); font-weight: 700; font-family: var(--rk-f-inscr); }
.lh-cal__fam { color: var(--rk-alert); }
.lh-cal__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 2px 0; font-size: 13.5px; color: var(--rk-ink-mute); }

/* sheets */
.lh-daysheet .lh-law, .lh-reader .lh-law { margin: 10px 0; padding: 10px 14px; border-left: 2px solid var(--rk-alert); background: color-mix(in srgb, var(--rk-rose) 8%, transparent); border-radius: 0 var(--rk-r2) var(--rk-r2) 0; }
.lh-law h3 { font: 600 19px/1.25 var(--rk-f-display); margin: 0 0 4px; }
.lh-law p { margin: 0; font-size: 16.5px; }
.lh-daysheet .lh-trad { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rk-line); }
.lh-daysheet .lh-trad p { margin: 0 0 8px; }
.lh-daysheet .lh-fam { color: var(--rk-ink); }
.lh-langseg { margin: 0 0 14px; }
.lh-reader .lh-line { margin: 0 0 0.5em; }
.lh-reader .rk-rubric { display: block; }
.lh-plain { padding-left: 20px; margin: 0 0 1em; }
.lh-plain li { margin: 0 0 6px; }
.lh-form .rk-field { margin-bottom: 14px; }
.lh-choice { margin: 6px 0 16px; }

/* five tabs in a phone's width: tighten the inscription, never let two labels touch */
@container lh (max-width: 400px) {
  .rk-tool--liturgical-home .lh-tabs .rk-seg__opt { font-size: 10.5px; letter-spacing: 0.08em; padding: 0 2px; }
  .lh-cal { padding: 10px 4px 8px; }
  .lh-cal__dow, .lh-cal__grid { column-gap: 1px; }
  .lh-cal__d { min-height: 46px; font-size: 15px; }
}
@container lh (max-width: 320px) {
  .rk-tool--liturgical-home .lh-tabs .rk-seg__opt { font-size: 9.5px; letter-spacing: 0.04em; }
}

/* the web page around the tool */
.lh-page__tool { padding: 26px 0 44px; }
/* hold a screen's height for the tool until its first section is drawn, so the guide below never jumps */
.lh-page__tool #rg-tool:not(:has(.lh-panel)) { min-height: 100vh; }
.lh-page__noscript { font-size: 17px; color: var(--ink-dim, #C9C0AB); }
