/* ============================================================
   Daily Watchword — stylesheet
   Hand-written CSS. Every value here is copied from the design
   tokens inside code.html (the authoritative mockup), so the
   real app matches screen.png without needing Tailwind.
   ============================================================ */

/* ---------- Self-hosted fonts (no Google requests at runtime) ---------- */

@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-text-v5-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-text-v5-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/libre-caslon-text-v5-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/manrope-v20-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-v20-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/work-sans-v24-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/work-sans-v24-latin-600.woff2") format("woff2");
}

/* ---------- Design tokens (colours from the mockup's palette) ----------
   Kept as variables so the Phase 3 dark theme can swap them in one place. */

:root {
  /* Tells the browser which way its own built-in bits should lean —
     form controls, scrollbars, text selection and the CanvasText
     colour that dialogs default to. */
  color-scheme: light;

  --primary: #0f426f;            /* deep blue — headings, icons, title */
  --secondary: #735b28;          /* warm brown-gold — prayer cycle label */
  --surface: #fbf9f8;            /* page background (warm off-white) */
  --surface-dim: #dcd9d9;
  --on-surface: #1b1c1c;         /* main reading text */
  --on-surface-variant: #42474f; /* quieter text */
  --outline-variant: #c2c7d0;    /* hairlines and borders */
  --secondary-container: #fddb9c;      /* gold season badge background */
  --on-secondary-container: #785f2b;   /* text on the gold badge */
  --tertiary-fixed-dim: #c9c6be;       /* faint section labels (OLD TESTAMENT) */
  --surface-container-lowest: #ffffff; /* the white reading cards */
  --surface-container-highest: #e4e2e1;/* prayer cycle panel base */

  /* Type scale (family / size / line-height) exactly per the mockup */
  --font-serif: "Libre Caslon Text", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-label: "Work Sans", system-ui, sans-serif;

  /* Spacing rhythm */
  --stack-sm: 12px;
  --stack-md: 24px;
  --stack-lg: 48px;
  --gutter: 16px;

  /* Corner radii (the mockup uses deliberately small, bookish corners) */
  --radius: 2px;
  --radius-lg: 4px;
  --radius-xl: 8px;
  --radius-full: 12px;

  /* Soft blue-tinted card shadow from the mockup */
  --card-shadow: 0 32px 64px -12px rgba(15, 66, 111, 0.04);

  /* Bar/nav translucency — kept as variables so dark mode can swap them */
  --bar-bg: rgba(251, 249, 248, 0.9);
  --nav-bg: rgba(251, 249, 248, 0.95);
  --hairline: rgba(194, 199, 208, 0.3);
  --hairline-faint: rgba(194, 199, 208, 0.1);
  --icon-dim: rgba(15, 66, 111, 0.4);          /* card corner icons */
  --ref-dim: rgba(66, 71, 79, 0.6);            /* secondary lectionary chips */
  --nav-dim: rgba(66, 71, 79, 0.7);            /* inactive nav items */
  --panel-tint: rgba(228, 226, 225, 0.3);      /* prayer + placeholder panels */
  --panel-hover: rgba(228, 226, 225, 0.5);
}

/* ---------- Dark theme ----------
   Same blue-and-gold family, adjusted for dark surfaces at WCAG AA
   contrast. Applied by js/theme.js setting data-theme on <html>. */

:root[data-theme="dark"] {
  color-scheme: dark;            /* built-in browser UI follows too */

  /* Titles use the owner's chosen gold for dark surfaces
     (contrast on the dark background ~8.5:1 — passes WCAG AA). */
  --primary: #D4AF37;
  --secondary: #e3c285;                 /* soft gold for labels */
  --surface: #14171b;
  --surface-dim: #14171b;
  --on-surface: #e2e2e0;
  --on-surface-variant: #b9bec8;
  --outline-variant: #4a505a;
  --secondary-container: #4a3a12;       /* deep gold badge */
  --on-secondary-container: #ffdea2;
  --tertiary-fixed-dim: #85898f;        /* section labels, brightened for dark */
  --surface-container-lowest: #1e2227;  /* reading cards */
  --surface-container-highest: #262b31;

  --card-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.35);
  --bar-bg: rgba(20, 23, 27, 0.9);
  --nav-bg: rgba(20, 23, 27, 0.95);
  --hairline: rgba(74, 80, 90, 0.5);
  --hairline-faint: rgba(74, 80, 90, 0.35);
  --icon-dim: rgba(212, 175, 55, 0.45); /* dimmed form of the gold above */
  --ref-dim: rgba(185, 190, 200, 0.65);
  --nav-dim: rgba(185, 190, 200, 0.7);
  --panel-tint: rgba(38, 43, 49, 0.55);
  --panel-hover: rgba(38, 43, 49, 0.9);
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: max(884px, 100dvh);
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  /* Local parchment grain — replaces the mockup's third-party texture image */
  background-image: url("../icons/paper.svg");
  background-repeat: repeat;
  padding-bottom: 128px; /* keeps content clear of the fixed bottom nav */
}

img {
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
}

/* Visible keyboard focus everywhere (accessibility requirement) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Small inline SVG icons take the text colour of their parent */
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
}

/* ---------- Type styles (names match the mockup's scale) ---------- */

.display-lg {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1.25; /* mockup applies leading-tight over the 56px default */
  letter-spacing: -0.02em;
  font-weight: 400;
}
.headline-lg {
  font-family: var(--font-serif);
  font-size: 28px;   /* mobile size; grows at the desktop breakpoint below */
  line-height: 36px;
  font-weight: 400;
}
.headline-md {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
}
.body-md {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}
.label-sm {
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  font-weight: 600;
}

@media (min-width: 768px) {
  .headline-lg {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ---------- Top app bar ---------- */

.top-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  background-color: var(--bar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease; /* lets it slide away on scroll */
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: 64px;
}

.logo-button img {
  height: 32px;
  width: 32px;
  object-fit: contain;
  display: block;
}

/* The app title is a real button: tapping it cycles the easter-egg names */
.app-title {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 32px;
  color: var(--primary);
  letter-spacing: -0.025em;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.app-title.swapping {
  opacity: 0;
  transform: translateY(-6px);
}

/* Both round tap targets in the bar get a gentle press effect */
.bar-button {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s;
  color: var(--primary);
}
.bar-button:hover {
  opacity: 0.8;
}
.bar-button:active {
  transform: scale(0.95);
}

/* ---------- Main column ---------- */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 128px 24px 0;
}

/* ---------- Hero: badge, date, lectionary references ---------- */

.hero {
  margin-bottom: var(--stack-lg);
  text-align: center;
}

.season-badge {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}

.hero-date {
  color: var(--primary);
  margin-bottom: 16px;
}

/* On narrow phone screens the weekday takes its own line, with the
   day-and-month underneath ("Monday," / "13th July"). */
@media (max-width: 480px) {
  .hero-date .hero-weekday {
    display: block;
  }
}

.hero-refs {
  display: flex;
  flex-wrap: wrap;          /* a day can have many lectionary references */
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
}

/* Lectionary references are tappable chips that open the passage pop-up */
.ref-chip {
  min-height: 48px; /* invisible padding keeps the touch target big enough */
  display: inline-flex;
  align-items: center;
}
.ref-chip.secondary-ref {
  color: var(--ref-dim);
}
.ref-chip:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 768px) {
  .hero {
    text-align: left;
  }
  .hero-refs {
    justify-content: flex-start;
  }
}

/* ---------- Content sections ---------- */

.content-stack > * + * {
  margin-top: var(--stack-md);
}

/* "—— OLD TESTAMENT ——" divider rows */
.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.section-label .rule {
  height: 1px;
  flex: 1;
  background-color: var(--hairline);
}
.section-label .label-sm {
  color: var(--tertiary-fixed-dim);
  text-transform: uppercase;
}

/* The white reading cards */
.reading-card {
  background-color: var(--surface-container-lowest);
  background-image: url("../icons/paper.svg");
  background-repeat: repeat;
  padding: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--hairline-faint);
  transition: transform 0.3s;
}
.reading-card:hover {
  transform: translateY(-4px);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.card-head h3 {
  color: var(--primary);
  margin-bottom: 4px;
}
.card-head .icon {
  color: var(--icon-dim);
  flex-shrink: 0;
}

.passage {
  color: var(--on-surface);
  margin-bottom: 16px;
}

/* ---------- Prayer cycle panel ---------- */

.prayer-panel {
  background-color: var(--panel-tint);
  background-image: url("../icons/paper.svg");
  background-repeat: repeat;
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline-faint);
}
.prayer-panel .panel-label {
  color: var(--secondary);
  display: block;
  margin-bottom: 16px;
}
.prayer-panel h3 {
  color: var(--primary);
  margin-bottom: 16px;
}
.prayer-panel ul {
  list-style: none;
  font-style: italic;
  color: var(--on-surface-variant);
}
.prayer-panel li + li {
  margin-top: 8px;
}

/* ---------- Bottom navigation ---------- */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline-faint);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.02);
  z-index: 50;
}

.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 16px;
  padding-bottom: env(safe-area-inset-bottom); /* iPhone home-bar clearance */
  height: 80px;
  max-width: 672px;
  margin: 0 auto;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px 4px 4px;
  text-decoration: none;
  color: var(--nav-dim);
  border-top: 2px solid transparent;
  transition: color 0.2s, transform 0.15s;
}
.nav-item:hover {
  color: var(--primary);
}
.nav-item:active {
  transform: translateY(2px);
}
.nav-item .label-sm {
  margin-top: 4px;
}

/* The current screen gets the blue text and gold top line */
.nav-item.active {
  color: var(--primary);
  border-top-color: var(--secondary-container);
}

/* ---------- Dialogs: extras menu + lectionary passage pop-up ---------- */

dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  /* The browser's own stylesheet gives a dialog `color: CanvasText`,
     which does NOT inherit from the page — so passage text stayed
     black in dark mode until this line was added. */
  color: var(--on-surface);
}
dialog::backdrop {
  background: rgba(27, 28, 28, 0.4);
  backdrop-filter: blur(2px);
}

/* Shared card look for dialog boxes */
.dialog-card {
  background-color: var(--surface-container-lowest);
  background-image: url("../icons/paper.svg");
  background-repeat: repeat;
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--hairline);
  padding: 24px;
  width: min(480px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 64px));
  overflow-y: auto;
}

/* Centre dialogs in the viewport */
.centre-dialog {
  margin: auto;
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.dialog-head h2 {
  color: var(--primary);
}
.close-button {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-variant);
  margin: -12px -12px 0 0; /* pulls the big touch target into the corner */
}
.close-button:hover {
  color: var(--primary);
}

/* Extras menu items */
.menu-list {
  list-style: none;
}
.menu-list a,
.menu-list button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 8px;
  text-decoration: none;
  text-align: left;
  border-radius: var(--radius-lg);
  color: var(--on-surface);
}
.menu-list a:hover,
.menu-list button:hover {
  background-color: var(--panel-hover);
  color: var(--primary);
}
.menu-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  color: var(--on-surface-variant);
}

/* Passage pop-up body text */
.dialog-passage {
  margin-bottom: 16px;
}
.dialog-footnote a {
  color: var(--primary);
}

/* ---------- Simple placeholder blocks (Archive / Settings, Phase 0) ---------- */

.placeholder-panel {
  background-color: var(--panel-tint);
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  color: var(--on-surface-variant);
}

.page-heading {
  color: var(--primary);
  margin-bottom: var(--stack-md);
}

/* ---------- Settings: option cards and theme control ---------- */

.settings-card {
  background-color: var(--surface-container-lowest);
  background-image: url("../icons/paper.svg");
  background-repeat: repeat;
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--hairline-faint);
}
.settings-card h3 {
  color: var(--primary);
  margin-bottom: 8px;
}
.settings-card > p {
  color: var(--on-surface-variant);
  margin-bottom: 16px;
}

/* Four-way theme choice, styled as one segmented control.
   A grid (2×2 on phones) rather than one flex row — three-plus
   options in a single row squashed longer labels like "Follow
   device" on narrow screens. */
.theme-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 560px) {
  .theme-options {
    grid-template-columns: 1fr 1fr;
  }
}
.theme-options label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 8px;
  line-height: 20px;
  min-height: 48px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: var(--on-surface-variant);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.theme-options input {
  /* The radio itself is visually hidden but stays focusable/announceable */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.theme-options input:checked + span {
  font-weight: 600;
}
.theme-options label:has(input:checked) {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: var(--secondary-container);
}
.theme-options label:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Daily reminder controls */
.reminder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.reminder-row label {
  color: var(--on-surface-variant);
}
.reminder-row input[type="time"] {
  font: inherit;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  min-height: 48px;
}
.action-button {
  min-height: 48px;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  font-weight: 600;
  transition: opacity 0.2s, transform 0.15s;
}
.action-button:hover {
  opacity: 0.85;
}
.action-button:active {
  transform: scale(0.98);
}
.reminder-hint {
  color: var(--on-surface-variant);
  margin-top: 8px;
}
.reminder-details {
  margin-top: 16px;
}
.reminder-details summary {
  cursor: pointer;
  color: var(--primary);
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* Add to Home Screen instruction lists */
.install-steps {
  margin: 8px 0 16px;
  padding-left: 24px;
  color: var(--on-surface);
}
.install-steps li {
  margin-bottom: 8px;
}
.install-platform {
  color: var(--secondary);
  display: block;
  margin: 16px 0 4px;
}

/* ---------- Christmas star settings ---------- */
/* Arriving from the star's "What's this?" link scrolls to this card;
   the gap keeps it clear of the fixed top bar (64px) instead of
   tucking underneath it. */
#star-settings {
  scroll-margin-top: 80px;
}
.star-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  color: var(--on-surface);
}
.star-toggle-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--primary);
  cursor: pointer;
}
.star-colour-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.star-colour-row label {
  color: var(--on-surface-variant);
}
.star-select {
  font: inherit;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  min-height: 48px;
  cursor: pointer;
}
.star-about {
  color: var(--on-surface-variant);
  margin-top: 12px;
}

/* ---------- Archive: month calendar ---------- */

.calendar {
  margin-bottom: var(--stack-lg);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.cal-month {
  color: var(--primary);
  min-height: 48px;          /* comfortable tap target */
  padding: 0 4px;
  text-align: left;
  border-radius: var(--radius-lg);
  transition: background-color 0.2s;
}
.cal-month:hover {
  background-color: var(--panel-hover);
}
/* Small arrow hinting that the month name can be tapped */
.cal-month::after {
  content: " ▾";
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--secondary);
}

/* Month / year picker: the day grid becomes a 3-across grid of
   months (or years); picking one zooms back into the days view */
.cal-grid.picker {
  grid-template-columns: repeat(3, 1fr);
}
.cal-pick {
  justify-content: center;
}
/* Gentle zoom whenever the calendar switches view (skipped for
   reduced-motion readers by the global rule at the end of this file) */
.cal-grid.zooming {
  animation: cal-zoom 0.22s ease;
}
@keyframes cal-zoom {
  from { transform: scale(0.94); opacity: 0.2; }
  to   { transform: scale(1);    opacity: 1; }
}
.cal-nav {
  display: flex;
  gap: 8px;
}
.cal-nav button {
  width: 56px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  color: var(--primary);
  transition: background-color 0.2s, opacity 0.2s, transform 0.15s;
}
.cal-nav button:hover {
  background-color: var(--panel-hover);
}
.cal-nav button:active {
  transform: scale(0.96);
}
.cal-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: var(--surface-container-lowest);
  background-image: url("../icons/paper.svg");
  background-repeat: repeat;
  border: 1px solid var(--hairline-faint);
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.cal-weekday {
  text-align: center;
  padding: 14px 2px;
  color: var(--on-surface-variant);
  background-color: var(--panel-tint);
}
.cal-cell {
  min-height: 64px;
  padding: 8px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-top: 1px solid var(--hairline-faint);
  color: var(--on-surface);
  transition: background-color 0.15s;
}
.cal-cell:not(:disabled):hover {
  background-color: var(--panel-hover);
}
.cal-cell .day-number {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}
/* Special-day name inside a cell, e.g. "Advent I" */
.cal-cell .day-name {
  font-family: var(--font-label);
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0.02em;
  color: var(--primary);
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cal-cell:disabled {
  color: var(--on-surface-variant);
  opacity: 0.35;
  cursor: default;
}
.cal-cell.empty {
  cursor: default;
}
/* Today: gold outline, like the design */
.cal-cell.today {
  outline: 2px solid var(--secondary-container);
  outline-offset: -2px;
}
.cal-cell.today .day-number {
  color: var(--on-secondary-container);
}
/* The currently selected day: filled gold */
.cal-cell.selected {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
}
.cal-cell.selected .day-name {
  color: var(--on-secondary-container);
}

/* ---------- Reduced motion: no animation for those who opt out ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}