:root {
  color-scheme: light;
  --ink: #29221d;
  --ink-soft: #625950;
  --paper: #fffdf8;
  --paper-deep: #f5efe4;
  --canvas: #ece5d8;
  --wine: #6d3027;
  --wine-dark: #4e211c;
  --gold: #87672f;
  --gold-pale: #dfc990;
  --line: rgba(83, 62, 45, 0.18);
  --shadow: 0 24px 70px rgba(56, 40, 27, 0.13);
  --shadow-small: 0 10px 30px rgba(56, 40, 27, 0.09);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
  font-synthesis: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 3%, rgba(177, 138, 69, 0.22), transparent 26rem),
    radial-gradient(circle at 93% 29%, rgba(109, 48, 39, 0.1), transparent 30rem),
    linear-gradient(180deg, #f7f2e9 0, var(--canvas) 45rem, #f4efe6 100%);
  font-size: 16px;
  line-height: 1.6;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(90deg, rgba(92, 72, 51, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(92, 72, 51, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  pointer-events: none;
}

button,
input {
  font: inherit;
}

button,
label {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--wine);
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  color: white;
  background: var(--wine-dark);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.app-header {
  display: flex;
  width: min(100% - 2rem, 1180px);
  min-height: 5.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.brand__mark {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgba(109, 48, 39, 0.24);
  border-radius: 50%;
  color: var(--wine);
  background: rgba(255, 253, 248, 0.7);
  font-family: var(--serif);
  font-size: 1.25rem;
  box-shadow: inset 0 0 0 4px rgba(177, 138, 69, 0.08);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.brand small {
  margin-top: 0.1rem;
  color: var(--ink-soft);
  font-size: 0.71rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.local-day {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 650;
}

.local-day > span:first-child {
  color: var(--gold);
  font-size: 1.15rem;
}

main {
  width: min(100% - 2rem, 1180px);
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--wine);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.daily-word {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 0;
  grid-template-columns: clamp(4.5rem, 10vw, 7.5rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 2rem);
  margin: clamp(1rem, 3vw, 2.5rem) 0 2.25rem;
  padding: clamp(1rem, 3vw, 2.25rem);
  border: 1px solid rgba(102, 70, 43, 0.17);
  border-radius: 1.5rem;
  background:
    linear-gradient(115deg, rgba(255, 253, 248, 0.96), rgba(249, 241, 226, 0.88)),
    var(--paper);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.daily-word::before,
.daily-word::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(177, 138, 69, 0.2);
  border-radius: 50%;
  content: "";
}

.daily-word::before {
  width: 23rem;
  height: 23rem;
  top: -12rem;
  right: -7rem;
}

.daily-word::after {
  width: 16rem;
  height: 16rem;
  right: -3rem;
  bottom: -10rem;
}

.daily-word__halo {
  position: absolute;
  z-index: -1;
  width: clamp(7rem, 16vw, 11rem);
  height: clamp(7rem, 16vw, 11rem);
  top: 50%;
  left: clamp(1rem, 5vw, 4rem);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 201, 144, 0.48), rgba(223, 201, 144, 0) 69%);
  transform: translateY(-50%);
}

.daily-word img {
  width: clamp(4.25rem, 9vw, 7rem);
  height: auto;
  justify-self: center;
  filter: drop-shadow(0 15px 17px rgba(64, 42, 27, 0.17));
}

.daily-word__copy {
  position: relative;
  max-width: 47rem;
}

.daily-word__copy::before {
  position: absolute;
  top: 1.4rem;
  left: -2.2rem;
  color: rgba(177, 138, 69, 0.28);
  content: "“";
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 1;
}

.daily-word blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.42;
}

.daily-word__credit {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.65rem;
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 650;
}

.daily-word__credit::before {
  width: 2rem;
  height: 1px;
  background: var(--gold);
  content: "";
}

.calendar-today,
.mass-builder,
.mass-output {
  margin-top: 2.25rem;
  scroll-margin-top: 1rem;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.section-heading h1,
.section-heading h2,
.mass-output__header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.5vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.section-heading > time,
.calendar-heading__actions > time {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 650;
}

.calendar-heading__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
}

.usage-link {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  gap: 0.4rem;
  color: var(--wine);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.usage-link__icon {
  display: inline-grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 0.85rem;
  line-height: 1;
}

.settings-toggle {
  flex-shrink: 0;
}

.settings-toggle[aria-expanded="true"] {
  color: white;
  background: var(--wine);
}

.settings-toggle[aria-expanded="true"] > span {
  transform: rotate(180deg);
}

.rite-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.rite-card {
  position: relative;
  overflow: hidden;
  min-height: 17rem;
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 1px solid rgba(53, 42, 33, 0.18);
  border-radius: 1.25rem;
  background: var(--rite-background, #f2eadc);
  box-shadow: var(--shadow-small);
  transition: background-color 240ms ease, transform 240ms ease;
}

.rite-card::after {
  position: absolute;
  width: 12rem;
  height: 12rem;
  top: -7rem;
  right: -5rem;
  border: 1px solid rgba(41, 34, 29, 0.13);
  border-radius: 50%;
  content: "";
}

.rite-card > header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rite-card__number {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--rite-header-border, rgba(41, 34, 29, 0.16));
  border-radius: 50%;
  color: var(--rite-foreground, var(--ink));
  background: var(--rite-header-surface, rgba(255, 255, 255, 0.68));
  font-family: var(--serif);
  font-size: 0.82rem;
}

.rite-card header p,
.rite-card header h2 {
  margin: 0;
}

.rite-card header p {
  color: var(--rite-foreground, var(--ink));
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.78;
}

.rite-card header h2 {
  color: var(--rite-foreground, var(--ink));
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.1;
}

.rite-card__facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(7rem, 0.75fr);
  gap: 0.75rem;
  margin-top: 2rem;
}

.rite-card__facts > div {
  min-height: 8.4rem;
  padding: 1rem;
  border: 1px solid rgba(41, 34, 29, 0.12);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
}

.rite-card--green .rite-card__facts > div {
  background: #eef0e8;
  backdrop-filter: none;
}

.rite-card--green header p {
  opacity: 1;
}

.rite-card__facts span,
.rite-card__facts strong {
  display: block;
}

.rite-card__facts span {
  margin-bottom: 0.8rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rite-card__facts strong {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 600;
  line-height: 1.32;
}

.rite-card__facts > div:last-child strong {
  color: var(--wine-dark);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.rite-card--loading .rite-card__facts strong {
  overflow: hidden;
  color: transparent;
  border-radius: 0.3rem;
  background: linear-gradient(100deg, rgba(105, 91, 77, 0.08) 15%, rgba(255, 255, 255, 0.52) 35%, rgba(105, 91, 77, 0.08) 55%);
  background-size: 220% 100%;
  animation: shimmer 1.35s infinite linear;
}

@keyframes shimmer {
  to { background-position-x: -220%; }
}

.calendar-error {
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(140, 45, 39, 0.22);
  border-radius: 0.65rem;
  color: #7b2925;
  background: #fff2ef;
}

.mass-builder {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: rgba(255, 253, 248, 0.88);
  box-shadow: var(--shadow-small);
}

.calendar-today .mass-builder {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.section-heading--builder {
  align-items: start;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.section-heading--builder > p {
  max-width: 34rem;
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  text-align: right;
}

.builder-grid {
  display: grid;
  gap: 1.35rem;
  margin-top: 1.5rem;
}

.settings-help {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.generated-daily-mass + .generated-daily-mass {
  border-top: 0.5rem solid var(--gold-pale);
}

.choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-group legend,
.parts-control > div > p {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.choice-group legend > span,
.parts-control > div > p > span {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--wine);
  font-size: 0.7rem;
}

.choice-help {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.segmented {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--paper-deep);
}

.segmented--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.segmented label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.segmented label + label {
  border-left: 1px solid var(--line);
}

.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.segmented label > span {
  position: relative;
  display: flex;
  min-height: 4.4rem;
  flex-direction: column;
  justify-content: center;
  padding: 0.65rem 1rem;
  color: var(--ink-soft);
  background: transparent;
  text-align: center;
  transition: color 160ms ease, background 160ms ease;
}

.segmented strong,
.segmented small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segmented strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.segmented small {
  margin-top: 0.12rem;
  font-size: 0.7rem;
}

.segmented input:checked + span {
  color: rgba(255, 255, 255, 0.75);
  background: var(--wine);
  box-shadow: inset 0 -3px 0 var(--gold-pale);
}

.segmented input:checked + span strong {
  color: white;
}

.segmented input:focus-visible + span {
  z-index: 1;
  outline: 3px solid rgba(177, 138, 69, 0.48);
  outline-offset: -3px;
}

.parts-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  padding: 1rem;
  border: 1px dashed rgba(109, 48, 39, 0.3);
  border-radius: 0.85rem;
  background: rgba(177, 138, 69, 0.06);
}

.parts-control > div {
  min-width: 0;
}

.parts-control > div > p {
  min-height: 1.55rem;
  margin-bottom: 0.6rem;
}

.body-position-option {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.body-position-option input {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--wine);
  cursor: pointer;
}

.parts-dropdown {
  position: relative;
  margin-top: 0.65rem;
}

.parts-dropdown > summary {
  width: 100%;
  justify-content: space-between;
  list-style: none;
}

.parts-dropdown > summary::-webkit-details-marker {
  display: none;
}

.parts-dropdown[open] > summary > span {
  transform: rotate(180deg);
}

.parts-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  right: 0;
  width: min(34rem, calc(100vw - 4rem));
  max-height: min(65vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.parts-menu .parts-list {
  overflow: visible;
  padding: 0.8rem;
}

.parts-menu__actions {
  padding: 0 0.8rem 0.8rem;
}

.parts-menu__actions .button {
  width: 100%;
}

.parts-control > div > strong,
.parts-control > div > small {
  display: block;
}

.parts-control > div > strong {
  font-family: var(--serif);
  font-size: 1.15rem;
}

.parts-control > div > small {
  margin-top: 0.15rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.button,
.icon-button {
  border: 0;
  cursor: pointer;
}

.button {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  border-radius: 0.65rem;
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:focus-visible,
.icon-button:focus-visible {
  outline: 3px solid rgba(177, 138, 69, 0.48);
  outline-offset: 2px;
}

.button--outline {
  border: 1px solid rgba(109, 48, 39, 0.28);
  color: var(--wine);
  background: rgba(255, 255, 255, 0.76);
}

.button--primary {
  color: white;
  background: var(--wine);
  box-shadow: 0 8px 18px rgba(109, 48, 39, 0.18);
}

.button--primary:hover {
  background: var(--wine-dark);
}

.button--quiet {
  color: var(--ink-soft);
  background: transparent;
}

.mass-output {
  overflow: hidden;
  margin-bottom: 4rem;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(135, 103, 47, 0.25);
  color: #4e3b1c;
  background: #f6e8bc;
}

.preview-banner > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.6rem;
}

.preview-banner span {
  flex: 0 0 auto;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preview-banner strong {
  overflow: hidden;
  font-family: var(--serif);
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mass-output__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.35rem, 4vw, 2.5rem);
  border-bottom: 4px solid var(--gold-pale);
  color: white;
  background:
    radial-gradient(circle at 90% -40%, rgba(223, 201, 144, 0.3), transparent 19rem),
    linear-gradient(125deg, var(--wine-dark), var(--wine));
}

.mass-output__header h2 {
  display: flex;
  align-items: baseline;
  gap: clamp(0.4rem, 1vw, 0.75rem);
  color: white;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.mass-output__header .mass-title__day {
  color: var(--gold-pale);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0;
}

.mass-output__header time {
  display: block;
  margin-top: 0.55rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.83rem;
  font-weight: 650;
}

.selection-summary {
  display: flex;
  max-width: 32rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.selection-summary span,
.mass-jumps a {
  display: inline-flex;
  min-height: 1.95rem;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: white;
  font-size: 0.68rem;
  font-weight: 750;
  text-decoration: none;
}

.mass-output__header .selection-summary span {
  border-color: rgba(255, 255, 255, 0.27);
  color: white;
  background: rgba(255, 255, 255, 0.11);
}

.mass-status {
  display: flex;
  min-height: 16rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--ink-soft);
  text-align: center;
}

.mass-status--error {
  color: #7b2925;
  background: #fff7f4;
}

.loader {
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid rgba(109, 48, 39, 0.16);
  border-top-color: var(--wine);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.mass-viewport {
  min-height: 20rem;
}

.mass-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: #f8f3e9;
}

.mass-jumps a:hover {
  color: white;
  background: var(--wine);
}

.rite-mass {
  scroll-margin-top: 1rem;
}

.rite-mass + .rite-mass {
  border-top: 0.65rem solid var(--paper-deep);
}

.rite-mass__header {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 5vw, 4rem);
  color: white;
  background: var(--wine-dark);
}

.rite-mass__header::after {
  position: absolute;
  width: 18rem;
  height: 18rem;
  top: -10rem;
  right: -5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  content: "";
}

.rite-mass--new .rite-mass__header {
  background: #4a5540;
}

.rite-mass__header p,
.rite-mass__header h2 {
  position: relative;
  z-index: 1;
  margin: 0;
}

.rite-mass__header p {
  margin-bottom: 0.35rem;
  color: rgba(255, 255, 255, 0.67);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.rite-mass__header h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.rite-mass__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.rite-mass__toggle-hint {
  display: inline-flex;
  flex-shrink: 0;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
}

.rite-mass__toggle:hover .rite-mass__toggle-hint {
  background: rgba(255, 255, 255, 0.2);
}

.rite-mass__toggle:focus-visible {
  outline: 3px solid var(--gold-pale);
  outline-offset: 0.4rem;
}

.rite-mass__toggle-arrow {
  font-size: 1.2rem;
  transition: transform 150ms ease;
}

.rite-mass__toggle[aria-expanded="true"] .rite-mass__toggle-arrow {
  transform: rotate(180deg);
}

.generated-mass-heading {
  padding: clamp(1.4rem, 4vw, 2.5rem) clamp(1rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  background: #f7f1e7;
  text-align: center;
}

.generated-mass-heading p {
  margin: 0 0 0.35rem;
  color: var(--gold);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.generated-mass-heading h3 {
  margin: 0;
  color: var(--wine-dark);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
}

.proper-of-day,
.ordinary-part {
  padding: clamp(1.25rem, 4vw, 3rem);
}

.proper-of-day {
  border-bottom: 1px solid var(--line);
  background: #fcf8ef;
}

.proper-of-day > header,
.ordinary-part > header {
  max-width: 55rem;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.proper-of-day > header span,
.ordinary-part > header span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.proper-of-day > header h3,
.ordinary-part > header h3 {
  margin: 0.3rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
}

.proper-content,
.ordinary-content {
  width: min(100%, 64rem);
  margin: 0 auto;
}

.proper-inline {
  width: min(100%, 64rem);
  margin: 0 auto 1.5rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid rgba(177, 138, 69, 0.3);
  border-radius: 0.8rem;
  background: #fcf7ec;
}

.proper-inline__label {
  margin: 0 0 1rem;
  color: var(--wine);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ordinary-part + .ordinary-part {
  border-top: 1px solid var(--line);
}

.ordinary-part:nth-of-type(even) {
  background: rgba(245, 239, 228, 0.45);
}

.no-mass {
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.no-mass > h3 {
  margin: 0;
  color: var(--wine-dark);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 500;
}

.no-mass > p {
  max-width: 42rem;
  margin: 0.55rem auto 1.5rem;
  color: var(--ink-soft);
}

.no-mass .proper-content {
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: #fcf8ef;
  text-align: left;
}

/* Sadržaj prenesen iz postojećih lokalnih misala. */
.mass-html .reading-collection {
  margin: 0;
}

.mass-html .reading-document,
.mass-html .f3-mass {
  color: #302821;
  font-family: var(--serif);
}

.mass-html .reading-document > :first-child,
.mass-html .f3-mass > :first-child {
  margin-top: 0;
}

.mass-html .f3-day-date {
  margin-bottom: 0.75rem;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.mass-html .f3-mass-title,
.mass-html .reading-document > h2:first-child {
  margin: 0 0 1.5rem;
  color: var(--wine-dark);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.mass-html .f3-header-table {
  width: 100%;
  margin: 1.65rem 0 0.85rem;
  border-collapse: collapse;
}

.mass-html .f3-header-table td {
  padding: 0 0.55rem;
}

.mass-html .f3-header-table .line-left,
.mass-html .f3-header-table .line-right {
  width: 50%;
}

.mass-html .f3-header-table hr {
  height: 1px;
  border: 0;
  background: rgba(109, 48, 39, 0.2);
}

.mass-html .f3-header-title {
  width: 1%;
  color: var(--wine) !important;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.mass-html .f3-text-item,
.mass-html .reading-document p,
.mass-html .reading-document .desno,
.mass-html .reading-document .dbl {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.72;
}

.mass-html .f3-text-item + .f3-text-item {
  margin-top: 1rem;
}

.mass-html .generated-ordo-content .reading-document,
.mass-html .generated-ordo-content .f3-mass {
  margin: 0;
}

.mass-html .f3-single {
  margin: 0.65rem 0 1.15rem;
}

.mass-html .generated-ordo-content .column,
.mass-html .f3-language-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.mass-html .generated-ordo-content .column {
  align-items: stretch;
  margin: 0.65rem 0 1.15rem;
}

.mass-html .generated-ordo-content .column > div {
  min-width: 0;
  padding: 0 clamp(0.65rem, 2vw, 1.25rem);
}

.mass-html .generated-ordo-content .column > div:first-child {
  padding-left: 0;
}

.mass-html .generated-ordo-content .column > .crta,
.mass-html .f3-language-pair__hr {
  border-left: 1px solid rgba(109, 48, 39, 0.28);
}

.mass-html .f3-language-pair > span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding-inline: 0.55rem;
  overflow-wrap: anywhere;
}

.mass-html .f3-header-table:has(.f3-language-pair) {
  table-layout: fixed;
}

.mass-html .f3-header-table:has(.f3-language-pair) .line-left,
.mass-html .f3-header-table:has(.f3-language-pair) .line-right {
  width: 5%;
}

.mass-html .f3-header-table .f3-header-title.f3-language-pair {
  width: 90%;
  padding: 0;
  white-space: normal;
}

.generated-mass-heading h3.f3-language-pair > span {
  padding: 0.2rem clamp(0.65rem, 2vw, 1.25rem);
}

.mass-html .f3-line {
  display: grid;
  grid-template-columns: minmax(2.2rem, auto) minmax(0, 1fr);
  gap: 0.55rem;
  margin: 0.38rem 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.72;
}

.mass-html .f3-speaker,
.mass-html .f3-speaker-tag {
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 2.25;
  white-space: nowrap;
}

.mass-html .f3-speaker--priest {
  color: #b42318;
}

.mass-html .f3-speaker--minister {
  color: #1756a9;
}

.mass-html .f3-speaker--shared {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08rem;
}

.mass-html .f3-speaker__separator {
  color: var(--ink-soft);
}

.mass-html .f3-body-rubric {
  margin: 0.65rem 0 0.8rem;
  color: #a00000;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.6;
  break-after: avoid;
}

.mass-html .f3-commemoration {
  margin: 1rem 0 0.4rem;
  color: var(--wine-dark);
  font-weight: 750;
}

.mass-html .generated-ordo-content .f3-header-table:first-child {
  margin-top: 0;
}

.rite-mass--pilot .rite-mass__header {
  background: #244a63;
}

.rite-mass--pilot .ordinary-part {
  border-bottom: 1px solid #d5e1e8;
  background: #f0f5f8;
}

.f3-choice-selection {
  margin-block: 1.3rem;
}

.mass-html .f3-choice-title {
  color: #244a63;
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: 0.7rem 0;
}

.mass-html .f3-editorial-note {
  color: #5c514b;
  font-size: 0.9em;
  font-style: italic;
}

.mass-choice-controls {
  border: 1px solid #9bb3c4;
  border-radius: 0.6rem;
  background: #e3edf3;
  color: #244a63;
  font-family: var(--sans);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.mass-choice-controls > summary {
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
}

.mass-choice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 0.75rem 0.75rem;
}

.mass-choice-buttons button {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #809eb2;
  border-radius: 0.4rem;
  padding: 0.65rem;
  color: #244a63;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.mass-choice-buttons--many {
  max-height: min(26rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.mass-choice-buttons button[aria-pressed="true"] {
  color: #fff;
  background: #244a63;
  border-color: #244a63;
}

.mass-choice-buttons button:focus-visible,
.mass-choice-controls > summary:focus-visible {
  outline: 3px solid #526a50;
  outline-offset: 3px;
}

.rite-mass--pilot .generated-mass-heading {
  border-color: #c6d8e3;
  background: #e3edf3;
}

.rite-mass--pilot .generated-mass-heading h3,
.rite-mass--pilot .ordinary-part > header h3,
.rite-mass--pilot .ordinary-part > header span {
  color: #244a63;
}

.generated-mass-heading .f3-pilot-note {
  margin: 0.7rem auto 0;
  max-width: 52rem;
  color: #374c5a;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
}

.reading-document--vatikan .f3-block + .f3-block {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid #cddce5;
}

.mass-html .reading-document--vatikan .f3-header-title {
  width: auto;
  color: #244a63 !important;
  white-space: normal;
}

.mass-html .reading-document--vatikan .f3-block-title {
  color: #244a63;
  font-size: 1.25rem;
}

.mass-html .reading-document--vatikan .f3-speech {
  white-space: pre-line;
}

.mass-html .reading-document--vatikan .f3-pilot-instruction,
.mass-html .reading-document--vatikan .f3-reading-reference {
  color: #455b69;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.mass-html .reading-document--vatikan .f3-pilot-parameter {
  padding-inline: 0.15rem;
  color: #674617;
  background: #fbf2df;
}

.mass-html .reading-document--vatikan .f3-pilot-gap {
  padding: 0.85rem 1rem;
  border-left: 3px solid #997231;
  color: #674617;
  background: #fbf2df;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.6;
}

.mass-html .reading-document h2,
.mass-html .reading-document h3 {
  color: var(--wine-dark);
  font-family: var(--serif);
  line-height: 1.25;
}

.mass-html .reading-document h2 {
  margin: 1.7rem 0 0.65rem;
  font-size: 1.45rem;
  font-weight: 500;
}

.mass-html .reading-document h3 {
  margin: 0.6rem 0;
  font-size: 1rem;
}

.mass-html .reading-note,
.mass-html .empty-state,
.mass-html .error-state {
  padding: 1rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 0.6rem 0.6rem 0;
  color: var(--ink-soft);
  background: #f5ecda;
  font-size: 0.85rem;
}

.mass-html .error-state {
  border-left-color: #a8443e;
  color: #7b2925;
  background: #fff1ee;
}

.mass-html .missal-spread {
  overflow: hidden;
  margin: 0 0 1rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: white;
  box-shadow: 0 7px 24px rgba(56, 40, 27, 0.06);
}

.mass-html .missal-spread__columns,
.mass-html .missal-spread__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
}

.mass-html .missal-spread__columns--single {
  grid-template-columns: minmax(0, 1fr);
}

.mass-html .missal-spread__columns--single .missal-column {
  padding-left: 0;
  border-left: 0;
}

.mass-html .missal-spread__notes {
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.mass-html .missal-column + .missal-column {
  padding-left: clamp(1.25rem, 3vw, 3rem);
  border-left: 1px solid var(--line);
}

.mass-html .missal-note {
  padding: 0.9rem 1rem;
  border-left: 3px solid rgba(177, 138, 69, 0.68);
  border-radius: 0 0.55rem 0.55rem 0;
  color: #685e54;
  background: #f7f1e5;
  font-size: 0.8rem;
}

.mass-html .missal-paragraph {
  margin: 0.65rem 0;
  font-family: var(--serif);
  line-height: 1.67;
}

.mass-html .missal-paragraph:first-child,
.mass-html .missal-heading:first-child {
  margin-top: 0;
}

.mass-html .missal-heading {
  margin: 1.35rem 0 0.65rem;
  color: var(--wine-dark);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
}

.mass-html .missal-rubric {
  color: #81544a;
  font-size: 0.9rem;
  font-style: italic;
}

.mass-html .missal-response {
  font-weight: 650;
}

.mass-html img {
  max-width: 100%;
  height: auto;
}

.mass-html img.s1 {
  width: auto;
  max-height: 4rem;
  float: left;
  margin: 0.2rem 0.45rem 0 0;
}

.mass-html img.k {
  width: 1rem;
  margin-right: 0.25rem;
}

.mass-html .tekst_separator_razmak {
  height: 0.8rem;
}

.pdf-panel {
  padding: clamp(1rem, 3vw, 2rem);
  background: #e8e3da;
}

.pdf-panel__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(41, 34, 29, 0.15);
  border-radius: 0.7rem 0.7rem 0 0;
  background: white;
}

.pdf-panel__toolbar p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 750;
}

.pdf-panel__toolbar small {
  display: block;
  margin-top: 0.1rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
}

.pdf-panel__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pdf-panel iframe {
  display: block;
  width: 100%;
  height: min(78vh, 58rem);
  min-height: 34rem;
  border: 1px solid rgba(41, 34, 29, 0.15);
  border-top: 0;
  border-radius: 0 0 0.7rem 0.7rem;
  background: #525659;
}

.download-panel {
  display: grid;
  min-height: 24rem;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

.download-card {
  width: min(100%, 35rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(145deg, #fff, #faf4e8);
  box-shadow: var(--shadow-small);
}

.download-card__icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  margin: 0 auto 1rem;
  border-radius: 1rem;
  color: white;
  background: var(--wine);
  font-size: 0.85rem;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.download-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
}

.download-card p {
  margin: 0.65rem auto 1.3rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.app-footer {
  display: flex;
  flex-wrap: wrap;
  min-height: 7rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  background: rgba(255, 253, 248, 0.58);
  font-size: 0.78rem;
  text-align: center;
}

.app-footer p {
  margin: 0;
}

.app-footer > span {
  color: var(--gold);
}

.app-footer .button {
  margin-inline: 0.4rem;
  font-size: 0.8rem;
}

.offline-status {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #b9cad5;
  border-radius: 0.7rem;
  color: #244a63;
  background: #edf3f7;
  font-size: 0.85rem;
}

.parts-dialog {
  width: min(calc(100% - 2rem), 46rem);
  max-height: min(90vh, 55rem);
  padding: 0;
  border: 1px solid rgba(75, 53, 37, 0.2);
  border-radius: 1.25rem;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(35, 24, 17, 0.32);
  overflow: hidden;
}

.parts-dialog::backdrop {
  background: rgba(40, 29, 23, 0.63);
  backdrop-filter: blur(4px);
}

.parts-dialog form {
  display: flex;
  max-height: inherit;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1rem;
  border-bottom: 1px solid var(--line);
}

.dialog-header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.1;
}

.icon-button {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  background: white;
  font-size: 1.45rem;
  line-height: 1;
}

#pilotDaysHelp {
  margin: 0;
  padding: 1rem 1.5rem;
  color: var(--ink-soft);
  background: #faf5eb;
  font-size: 0.82rem;
}

.pilot-dialog {
  width: min(calc(100% - 2rem), 40rem);
}

.pilot-dialog .dialog-header,
.pilot-month-navigation,
.pilot-dialog .dialog-actions {
  flex-shrink: 0;
}

.pilot-month-navigation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.pilot-month-navigation .button {
  min-width: 0;
  min-height: 2.75rem;
  gap: 0.3rem;
  padding: 0.55rem 0.35rem;
  font-size: 0.76rem;
  line-height: 1.35;
  white-space: normal;
}

.pilot-month-navigation .button:disabled {
  opacity: 0.45;
  cursor: default;
}

.pilot-days-content {
  min-height: 0;
  overflow-y: auto;
}

.pilot-days-content .pilot-days-list {
  overflow: visible;
}

.pilot-days-list {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  gap: 0.65rem;
  padding: 1.2rem 1.5rem;
}

.pilot-day {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.08rem 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  color: var(--ink);
  background: white;
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.pilot-day:hover:not(:disabled) {
  border-color: rgba(109, 48, 39, 0.42);
  background: #fcf7ec;
  transform: translateX(2px);
}

.pilot-day:disabled {
  color: var(--ink-soft);
  background: #f4f1eb;
  cursor: default;
}

.pilot-day:focus-visible {
  outline: 3px solid rgba(177, 138, 69, 0.48);
  outline-offset: 2px;
}

.pilot-day[aria-current="date"] {
  border-color: var(--wine);
  background: #f8ece8;
  box-shadow: inset 4px 0 0 var(--wine);
}

.pilot-day > span {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--gold);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pilot-day strong,
.pilot-day small {
  min-width: 0;
}

.pilot-day strong {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
}

.pilot-day small {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.pilot-days-empty {
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed var(--line);
  border-radius: 0.75rem;
  color: var(--ink-soft);
  background: #faf7f0;
  text-align: center;
}

.pilot-new-days {
  border-bottom: 1px solid #c6d8e3;
  background: #edf4f8;
}

.pilot-new-days h3 {
  margin: 0;
  padding: 1rem 1.5rem 0;
  color: #244a63;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.pilot-new-days > p {
  margin: 0.4rem 1.5rem 0;
  color: #374c5a;
  font-size: 0.8rem;
}

.pilot-day--new > span {
  color: #244a63;
}

.pilot-day--new[aria-current="date"] {
  border-color: #244a63;
  background: #e0edf5;
  box-shadow: inset 4px 0 0 #244a63;
}

.parts-list {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  gap: 0.6rem;
  padding: 1.2rem 1.5rem;
}

.parts-list label {
  position: relative;
  cursor: pointer;
}

.parts-list input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.parts-list label > span {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: white;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.parts-list label > span:hover {
  transform: translateX(2px);
}

.parts-list b {
  grid-row: 1 / span 2;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 0.8rem;
}

.parts-list strong,
.parts-list small {
  display: block;
}

.parts-list strong {
  font-size: 0.9rem;
}

.parts-list small {
  margin-top: 0.08rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.parts-list input:checked + span {
  border-color: var(--wine);
  background: #f8ece8;
  box-shadow: inset 4px 0 0 var(--wine);
}

.parts-list input:focus-visible + span {
  outline: 3px solid rgba(177, 138, 69, 0.48);
  outline-offset: 2px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: #faf7f0;
}

.dialog-actions .button--quiet {
  margin-right: auto;
}

.noscript {
  position: fixed;
  z-index: 200;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  margin: 0;
  padding: 1rem;
  border-radius: 0.7rem;
  color: white;
  background: #7b2925;
  text-align: center;
}

@media (max-width: 760px) {
  .rite-mass__toggle {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.85rem;
  }

  .app-header {
    width: min(100% - 1.25rem, 1180px);
  }

  .local-day {
    max-width: 9.5rem;
    justify-content: flex-end;
    text-align: right;
  }

  main {
    width: min(100% - 1rem, 1180px);
  }

  .daily-word {
    min-height: 0;
    grid-template-columns: clamp(4.25rem, 12vw, 5rem) minmax(0, 1fr);
    gap: 0.85rem;
    margin-top: 0.75rem;
    padding: 1rem;
    border-radius: 1rem;
  }

  .daily-word__halo {
    width: 9rem;
    height: 9rem;
    left: -1rem;
  }

  .daily-word__copy::before,
  .daily-word__credit::before {
    display: none;
  }

  .daily-word__credit {
    display: block;
    margin-top: 0.65rem;
    font-size: 0.72rem;
    white-space: normal;
  }

  .daily-word blockquote {
    font-size: 1rem;
    line-height: 1.43;
  }

  .section-heading,
  .mass-output__header {
    align-items: start;
    flex-direction: column;
  }

  .section-heading > time {
    align-self: start;
  }

  .calendar-heading__actions {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem 0.8rem;
  }

  .calendar-heading__actions > time {
    flex-basis: 100%;
  }

  .rite-cards {
    grid-template-columns: 1fr;
  }

  .rite-card {
    min-height: 0;
  }

  .rite-card__facts {
    grid-template-columns: minmax(0, 2fr) minmax(6.5rem, 0.7fr);
  }

  .rite-card__facts > div {
    min-height: 7.5rem;
  }

  .section-heading--builder > p {
    text-align: left;
  }

  .segmented--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segmented--four label:nth-child(3) {
    border-left: 0;
  }

  .segmented--four label:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .parts-control {
    gap: 0.75rem;
    padding: 0.8rem;
  }

  .parts-control > div > p {
    gap: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  .parts-dropdown > summary {
    padding-inline: 0.6rem;
    font-size: 0.76rem;
  }

  .body-position-option {
    font-size: 0.8rem;
  }

  .selection-summary {
    justify-content: flex-start;
  }

  .preview-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .preview-banner > div {
    align-items: start;
    flex-direction: column;
    gap: 0.1rem;
  }

  .preview-banner strong {
    white-space: normal;
  }

  .preview-banner .button {
    align-self: start;
  }

  .mass-html .missal-spread__columns,
  .mass-html .missal-spread__notes {
    grid-template-columns: 1fr;
  }

  .mass-html .missal-column + .missal-column {
    padding-top: 1.25rem;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .mass-html .f3-header-table .line-left,
  .mass-html .f3-header-table .line-right {
    display: none;
  }

  .mass-html .f3-header-title {
    width: auto;
    white-space: normal;
  }

  .pdf-panel {
    padding: 0.6rem;
  }

  .pdf-panel__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .pdf-panel iframe {
    height: 70vh;
    min-height: 28rem;
  }

  .dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dialog-actions .button--quiet {
    grid-column: 1 / -1;
    margin-right: 0;
  }
}

@media (max-width: 620px) {
  .mass-html .generated-ordo-content .column,
  .mass-html .f3-language-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .mass-html .generated-ordo-content .column > div {
    padding-inline: 0;
  }

  .mass-html .generated-ordo-content .column > .crta,
  .mass-html .f3-language-pair__hr {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(109, 48, 39, 0.28);
    border-left: 0;
  }

  .mass-html .f3-header-title.f3-language-pair > span {
    padding-block: 0.25rem;
  }
}

@media (max-width: 430px) {
  .brand__mark {
    width: 2.35rem;
    height: 2.35rem;
  }

  .brand strong {
    font-size: 1.15rem;
  }

  .brand small {
    font-size: 0.62rem;
  }

  .local-day > span:first-child {
    display: none;
  }

  .daily-word {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  .daily-word img {
    width: 4rem;
  }

  .rite-card__facts {
    grid-template-columns: 1fr;
  }

  .rite-card__facts > div {
    min-height: auto;
  }

  .segmented label > span {
    min-height: 4rem;
    padding-inline: 0.4rem;
  }

  .segmented small {
    font-size: 0.68rem;
  }

  .proper-of-day,
  .ordinary-part {
    padding-inline: 0.75rem;
  }

  .pilot-day {
    grid-template-columns: 1fr;
  }

  .pilot-day > span {
    grid-row: auto;
  }
}

@media (forced-colors: active) {
  .segmented input,
  .parts-list input {
    z-index: 2;
    width: 1rem;
    height: 1rem;
    opacity: 1;
    accent-color: Highlight;
  }

  .segmented input {
    top: 50%;
    left: 0.45rem;
    transform: translateY(-50%);
  }

  .segmented label > span {
    padding-left: 1.7rem;
  }

  .segmented input:checked + span,
  .parts-list input:checked + span {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .parts-list input {
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
  }

  .parts-list label > span {
    padding-right: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body {
    background: white;
  }

  body::before,
  .skip-link,
  .offline-status,
  .app-header,
  .daily-word,
  .calendar-today,
  .mass-builder,
  .preview-banner,
  .mass-output__header,
  .mass-jumps,
  .rite-mass__toggle-hint,
  .mass-choice-controls,
  .app-footer {
    display: none !important;
  }

  main,
  .mass-output {
    width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  .rite-mass__header {
    color: black;
    background: white !important;
  }

  .rite-mass__content[hidden] {
    display: block !important;
  }

  .mass-html .missal-spread {
    break-after: page;
    border: 0;
    box-shadow: none;
  }
}

.mass-html .sm-missing-reading,
.sm-missing-reading {
  color: #a32620;
  font-weight: 600;
}

/* Kontrolni kalendar i poveznica na VLK. */
.vlk-link { display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.vlk-link img { display: block; }
.pilot-month-navigation select, #pilotPassword { font: inherit; max-width: 100%; padding: .45rem; }
.pilot-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; text-align: center; }
.pilot-calendar-day { min-height: 3.2rem; padding: .4rem .1rem; border: 1px solid #b6c7cd; border-radius: .4rem; display: flex; flex-direction: column; justify-content: center; text-decoration: none; }
a.pilot-calendar-day { color: #163e55; background: #edf4f7; }
a.pilot-calendar-day:hover, a.pilot-calendar-day:focus-visible { background: #d5e6ef; outline: 2px solid #244a63; }
.pilot-calendar-day[aria-disabled] { opacity: .4; }
.pilot-calendar-day[aria-current] { border: 2px solid #916722; font-weight: bold; }
.pilot-calendar-day small { font-size: .65rem; }
#pilotPasswordDialog { max-width: min(30rem, 95vw); padding: 1.2rem; }
#pilotPasswordError { color: #9a2626; }
.pilot-month-navigation { grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 1.5fr) 2.75rem; align-items: end; }
.pilot-month-navigation label { display: grid; gap: .25rem; min-width: 0; }
#pilotCurrentMonth { grid-column: 1 / -1; }
.pilot-calendar { padding: .75rem; }

/* Interface language is independent of the Croatian/Latin Mass texts. */
.app-header { flex-wrap: wrap; gap: 1rem; }
.language-control { margin-left: auto; max-width: 100%; }
.language-picker { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .9rem; }
.language-picker select { font: inherit; color: var(--ink); background: var(--paper); padding: .45rem .6rem; border: 1px solid var(--line); border-radius: .5rem; max-width: 100%; }
#languageStatus { display: block; max-width: 24rem; font-size: .8rem; }
html:lang(zh-Hans) { font-family: system-ui, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
@media (max-width: 600px) { .app-header .local-day { width: 100%; margin: 0; } .language-control { margin-left: 0; } }

@font-face {
  font-family: "SM UI SC";
  src: url("../fonts/sm-ui-sc.woff2?v=20260928-flags1") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
#interfaceLanguage, #interfaceLanguage option { font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "SM UI SC", sans-serif; }
html:lang(zh-Hans) :is(.app-header, .calendar-today, .mass-output__header, .preview-banner, .mass-status, .app-footer, .parts-dialog, .help-main, .rite-mass__header, .mass-jumps, .pdf-panel__toolbar, .download-card, #dailyWordTitle, .daily-word__credit),
html:lang(zh-Hans) :is(.app-header, .calendar-today, .mass-output__header, .preview-banner, .mass-status, .app-footer, .parts-dialog, .help-main, .rite-mass__header, .mass-jumps, .pdf-panel__toolbar, .download-card) * {
  font-family: "SM UI SC", system-ui, sans-serif;
}