/* Structural rules shared by themes. Existing category colors and timeline geometry stay intact. */
html { scrollbar-gutter: stable; }
.calendar-header {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "brand today menu" "tabs tabs tabs" "actions actions actions";
}
.brand-link { grid-area: brand; }
.calendar-header > .today-link { grid-area: today; }
.view-nav { grid-area: tabs; justify-content: stretch; }
.view-nav a { flex: 1; }
.view-nav a[aria-current="page"] { background: #9d4670; color: white; box-shadow: inset 0 0 0 1px #ffffff55; }
.desktop-header-actions { grid-area: actions; flex-wrap: wrap; justify-content: flex-end; }
.mobile-header-menu { display: block; grid-area: menu; position: relative; }
.mobile-header-menu summary {
  display: inline-flex; min-height: 44px; align-items: center; padding: 0 .7rem;
  border: 1px solid #cdb9c4; border-radius: .6rem; color: #71334f;
  font-weight: 700; list-style: none; cursor: pointer;
}
.mobile-header-menu summary::-webkit-details-marker { display: none; }
.mobile-header-menu-panel {
  position: absolute; z-index: 40; top: calc(100% + .35rem); right: 0;
  display: grid; width: min(16rem, 80vw); gap: .3rem; padding: .65rem;
  background: white; border: 1px solid #decbd5; border-radius: .75rem; box-shadow: 0 .5rem 1.5rem #50313f26;
}
.mobile-header-menu-panel a, .mobile-header-menu-panel .theme-open {
  display: flex; align-items: center; min-height: 44px; padding: .65rem;
  box-sizing: border-box; color: #71334f; font-weight: 700; text-decoration: none;
}
.theme-open { width: auto; margin: 0; background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.mobile-header-menu-panel .theme-open { border: 0; text-align: left; }
.mobile-header-menu-panel .logout-form button { width: 100%; text-align: left; }
.month-day.is-today .day-number { outline: 2px solid #9d4670; outline-offset: 2px; }
.calendar-header .brand-link { font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; letter-spacing: -.035em; }
.week-day-heading, .event-list-heading, .record-heading, .day-summary > div { min-width: 0; }
.week-day, .selected-event, .timeline-event, .record-heading, .history-list, .period-navigation h1 { overflow-wrap: anywhere; }
.event-list-heading strong { min-width: 0; }
.small-add { flex-shrink: 0; }
.period-range span { display: inline-block; white-space: nowrap; }
.theme-dialog { box-sizing: border-box; width: min(30rem, calc(100% - 2rem)); max-height: 85dvh; overflow-y: auto; padding: 1.25rem; border: 1px solid #c8b5d1; border-radius: 1.1rem; color: #24213d; background: #fffdfd; }
.theme-dialog::backdrop { background: #16152d80; }
.theme-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.theme-dialog h2 { margin: 0; font-size: 1.25rem; }
.theme-dialog-heading button { width: auto; min-height: 44px; margin: 0; padding: .5rem .8rem; background: #eee6f4; color: #423154; border: 1px solid #c3aed0; cursor: pointer; }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.theme-options button { margin: 0; padding: .45rem; color: #332448; background: #fff; border: 2px solid #ded5e5; cursor: pointer; overflow: hidden; }
.theme-options button[aria-pressed="true"] { border-color: #76528f; box-shadow: 0 0 0 2px #e8daef; }
.theme-option-name { display: flex; justify-content: space-between; gap: .2rem; padding: .5rem .2rem .25rem; font-size: .95rem; }
.theme-selected-mark { visibility: hidden; }
[aria-pressed="true"] .theme-selected-mark { visibility: visible; }
.theme-preview { display: flex; height: 6.5rem; align-items: flex-end; padding: .4rem; border-radius: .45rem; box-sizing: border-box; }
.theme-preview > span { width: 100%; padding: .25rem 0; border: 1px solid #c4b3cd; border-radius: .3rem; background: #fffffff2; color: #473354; font-size: .8rem; }
.preview-moon-rabbit { background: #b7afd4 url("themes/moon-rabbit/header.webp") left top / auto 100% no-repeat; }
.preview-standard { background: linear-gradient(#fff7fb 0 45%, #f4e6ed 45% 60%, #fff 60%); border: 1px solid #eedce7; }
.theme-persistence-note { margin-bottom: 0; font-size: .85rem; line-height: 1.6; color: #62576a; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid #76528f; outline-offset: 3px; }

/* A theme owns its palette AND illustration/frame/button assets. No server data changes. */
:root[data-theme="moon-rabbit"] {
  --theme-ink: #252340;
  --theme-muted: #615b70;
  --theme-accent: #79518f;
  --theme-accent-dark: #654079;
  --theme-line: #d7ccdf;
  --theme-gold: #cfb67c;
  --theme-surface: #fffefd;
  --theme-soft: #f1ebf5;
  --theme-header-art: url("themes/moon-rabbit/header.webp");
  --theme-footer-art: url("themes/moon-rabbit/footer.webp");
  --theme-frame-art: url("themes/moon-rabbit/frame.svg");
  --theme-stars-art: url("themes/moon-rabbit/stars.svg");
  --theme-button-art: linear-gradient(155deg, #9067a5, #724c89);
}
[data-theme="moon-rabbit"] body {
  color: var(--theme-ink);
  background-color: #dcd9ed;
  background-image: var(--theme-stars-art), linear-gradient(150deg, #686799, #cbc2e3 26rem, #eeebf5 55rem);
  background-size: 210px 300px, 100% 100%;
  background-repeat: repeat, no-repeat;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
[data-theme="moon-rabbit"] .calendar-main { margin-top: max(.75rem, env(safe-area-inset-top)); }
[data-theme="moon-rabbit"] .calendar-header {
  --header-art-height: clamp(96px, 30vw, 225px);
  padding: calc(var(--header-art-height) + 6px) .65rem .6rem;
  margin-bottom: .9rem; gap: .6rem;
  border: 1px solid #cfb67c; border-radius: 1.2rem;
  background-color: #e8e3f0;
  background-image: linear-gradient(#686799, #b9b0d4 55%, #e8e3f0);
  background-size: 100% calc(var(--header-art-height) + 5px);
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 3px #fff9ee, inset 0 0 0 4px #e9ddc4, 0 4px 18px #39325e20;
}
[data-theme="moon-rabbit"] .calendar-header::before {
  content: ""; position: absolute; top: 5px; left: 5px; right: 5px;
  height: var(--header-art-height); pointer-events: none;
  border-radius: .9rem .9rem 0 0;
  /* Contain keeps the entire moon/rabbit visible; only the art layer is rounded.
     Do not clip the header itself: its menu must open beyond the frame. */
  background: var(--theme-header-art) center / contain no-repeat,
    linear-gradient(#686799, #b9b0d4 55%, #e8e3f0);
}
[data-theme="moon-rabbit"] .calendar-header::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border: 23px solid transparent; border-image: var(--theme-frame-art) 24 stretch;
}
[data-theme="moon-rabbit"] .brand-link { color: #242048; font-size: 2.1rem; text-shadow: 0 1px 0 #fff; }
[data-theme="moon-rabbit"] .calendar-main::after {
  content: ""; display: block; height: clamp(120px, 29vw, 260px);
  margin: -.1rem 0 0; border-radius: 1rem; pointer-events: none;
  background: var(--theme-footer-art) center / cover no-repeat;
}
[data-theme="moon-rabbit"] .calendar-panel {
  position: relative; isolation: isolate; padding: 1.25rem;
  border: 1px solid var(--theme-gold); border-radius: 1rem;
  background: var(--theme-surface);
  box-shadow: inset 0 0 0 4px #fff9ee, inset 0 0 0 5px #e9ddc4, 0 5px 22px #3f355a12;
}
[data-theme="moon-rabbit"] .calendar-panel::before {
  content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
  border: 23px solid transparent; border-image: var(--theme-frame-art) 24 stretch;
}
[data-theme="moon-rabbit"] .period-navigation { margin-bottom: 1rem; }
[data-theme="moon-rabbit"] .period-navigation h1 { font-weight: 800; color: #282146; }
[data-theme="moon-rabbit"] .period-button { background: linear-gradient(#fff, #f5eff8); border-color: #b9a5c7; color: #30264c; box-shadow: inset 0 0 0 2px white; }
[data-theme="moon-rabbit"] .view-nav { border: 1px solid #c3afd0; background: #f6f1f8; box-shadow: 0 0 0 3px #ffffff75; }
[data-theme="moon-rabbit"] .view-nav a { color: #463457; }
[data-theme="moon-rabbit"] .view-nav a[aria-current="page"] { background: var(--theme-button-art); color: white; }
[data-theme="moon-rabbit"] :is(.today-link, .mobile-header-menu summary, .logout-form button) { background: #fffdf9ed; border-color: #bfacd0; color: #392b4c; box-shadow: inset 0 0 0 2px #fff; }
[data-theme="moon-rabbit"] .mobile-header-menu-panel { background: #fffefd; border-color: #bfa9cc; }
[data-theme="moon-rabbit"] :is(.mobile-header-menu-panel a, .mobile-header-menu-panel .theme-open) { color: #554067; }
[data-theme="moon-rabbit"] :is(.primary-link, .small-add, .registration-fab, .save-button) { background: var(--theme-button-art); color: white; box-shadow: inset 0 0 0 1px #c4a4d4, inset 0 0 0 3px #ffffff1c, 0 2px 5px #5140661a; }
[data-theme="moon-rabbit"] .month-grid { background: white; }
[data-theme="moon-rabbit"] :is(.month-day, .month-week .month-day:last-child, .month-week:last-child .month-day) { border-color: #ded8e4; }
[data-theme="moon-rabbit"] .month-day.selected { background: #f3eaf9; box-shadow: inset 0 0 0 2px #9671ad; }
[data-theme="moon-rabbit"] .selected .day-number { background: var(--theme-accent); }
[data-theme="moon-rabbit"] .month-day.is-today .day-number { outline-color: var(--theme-accent); }
[data-theme="moon-rabbit"] .month-day.outside-month { background: #f5f3f7; color: #80768c; }
[data-theme="moon-rabbit"] .weekday-row span { color: #554966; }
[data-theme="moon-rabbit"] .week-day { position: relative; background: linear-gradient(120deg, #fffefd, #fcf9ff); border: 1px solid #d6c4de; box-shadow: inset 0 0 0 3px #faf6fc; padding: .9rem; }
[data-theme="moon-rabbit"] .week-day-heading > a:first-child::before { content: "✧"; display: inline-block; margin-right: .4rem; color: #ab8135; }
[data-theme="moon-rabbit"] .week-day-heading a { color: #423055; }
[data-theme="moon-rabbit"] .day-summary { background: var(--theme-soft); }
[data-theme="moon-rabbit"] :is(.summary-badge, .day-setting-actions a, .event-icon-link) { background: #fffefd; border-color: #cebdd9; color: #443452; }
[data-theme="moon-rabbit"] :is(.day-setting-actions a.is-set, .summary-action.is-set) { background: #e8daf1; border-color: #9671ad; }
[data-theme="moon-rabbit"] :is(.text-link, .overflow-link, .mobile-count, .summary-action, .settings-panel summary, .settings-menu-card strong, .form-section legend, .confirmation-list dt) { color: var(--theme-accent-dark); }
[data-theme="moon-rabbit"] :is(.event-meta, .timeline-event-meta, .empty-message, .timeline-empty, .timeline-label, .hint, .field-help, .settings-menu-card span, .settings-menu-card small, .settings-record-card p, .day-summary-mini) { color: var(--theme-muted); }
[data-theme="moon-rabbit"] .event-edit-link { text-decoration-color: #8960a1; }
/* Category borders/backgrounds deliberately keep --category-color, not the theme accent. */
[data-theme="moon-rabbit"] .timeline-canvas { background: #fffefd; border-color: #b8a9c5; }
[data-theme="moon-rabbit"] .timeline-line { border-color: #ece6f0; }
[data-theme="moon-rabbit"] .timeline-line.hour-line { border-color: #c9becf; }
[data-theme="moon-rabbit"] .timeline-line.midnight-line { border-color: #78548f; }
[data-theme="moon-rabbit"] .midnight-label { background: #78548f; }
[data-theme="moon-rabbit"] .timeline-add-slot:hover,
[data-theme="moon-rabbit"] .timeline-add-slot:focus-visible { background: #ae88c528; outline-color: #79518f; }
[data-theme="moon-rabbit"] :is(.settings-record-card, .settings-menu-card, .registration-dialog, .event-preview, .settings-history > div, .history-list a) { background: #faf7fd; border-color: #d6c5e0; color: var(--theme-ink); }
[data-theme="moon-rabbit"] .registration-choices a { color: #614678; border-color: #d6c5e0; }
[data-theme="moon-rabbit"] .registration-close { background: #ece1f2; color: #59406d; }
[data-theme="moon-rabbit"] :is(.revision-label, .template-source-note) { background: #eee5f5; border-color: #d6c5e0; color: #59436c; }
[data-theme="moon-rabbit"] .eyebrow { color: #76518a; }
[data-theme="moon-rabbit"] .card { background: var(--theme-surface); border-color: var(--theme-gold); }
[data-theme="moon-rabbit"] .card button { background: var(--theme-button-art); }
@media (min-width: 701px) {
  [data-theme="moon-rabbit"] .calendar-header::before {
    left: 50%; right: auto; width: min(calc(100% - 10px), 675px); transform: translateX(-50%);
    /* Blend the compact, uncropped illustration into the wide desktop sky. */
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
}
@media (max-width: 700px) {
  .calendar-header { grid-template-areas: "brand today menu" "tabs tabs tabs"; }
  .desktop-header-actions { display: none; }
  .calendar-header .brand-link { font-size: 1.65rem; }
  .theme-options { gap: .55rem; }
  [data-theme="moon-rabbit"] .calendar-main { width: calc(100% - 1rem); }
  [data-theme="moon-rabbit"] .calendar-header { padding-right: .4rem; padding-left: .4rem; gap: .4rem; }
  [data-theme="moon-rabbit"] .calendar-panel { padding: 1rem .7rem; }
  [data-theme="moon-rabbit"] .period-navigation { gap: .4rem; }
  [data-theme="moon-rabbit"] .period-navigation h1 { font-size: 1.15rem; }
  [data-theme="moon-rabbit"] .period-navigation .period-range { font-size: 1.05rem; line-height: 1.5; }
  [data-theme="moon-rabbit"] .week-day { padding: .65rem; }
  [data-theme="moon-rabbit"] .day-actions { margin-top: 0; }
  .day-actions, .section-heading-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .day-actions > .text-link, .section-heading-actions > .text-link { justify-self: start; }
  .day-actions > .small-add, .section-heading-actions > .small-add { justify-self: end; }
  [data-theme="moon-rabbit"] .day-setting-actions a { font-size: .8rem; }
  [data-theme="moon-rabbit"] .day-summary { padding: .5rem; }
  [data-theme="moon-rabbit"] .calendar-main::after { border-radius: .8rem; }
}
@media (max-width: 360px) {
  .calendar-header .brand-link { font-size: 1.45rem; }
  .calendar-header > .today-link, .mobile-header-menu summary { padding: 0 .5rem; }
  .theme-dialog { padding: .85rem; }
}