/* Calendar colors are scoped to this page; System is resolved before paint. */
:root {
    --cal-bg: #ffffff; --cal-surface: #ffffff; --cal-text: #24332f;
    --cal-muted: #6c7974; --cal-border: #cbd8d1; --cal-line: #e6ece8;
    --cal-accent: #287451; --cal-accent-text: #246247; --cal-inverse: #ffffff;
    --cal-hover: #edf5ef; --cal-soft: #f5f8f6; --cal-focus: #82b99b;
    --cal-outside: #a4afa9; --cal-outside-bg: #fafcfb;
    --cal-holiday: #bb3545; --cal-holiday-outside: #b77b83;
    --cal-warning: #795719; --cal-warning-bg: #fff3d9; --cal-neutral-bg: #eef0ef;
}
html[data-calendar-theme="dark"] {
    color-scheme: dark;
    --cal-bg: #000000; --cal-surface: #121212; --cal-text: #eeeeee;
    --cal-muted: #b5b5b5; --cal-border: #3d3d3d; --cal-line: #303030;
    --cal-accent: #76c398; --cal-accent-text: #a1dfba; --cal-inverse: #101010;
    --cal-hover: #252525; --cal-soft: #1a1a1a; --cal-focus: #91d4ad;
    --cal-outside: #909090; --cal-outside-bg: #0c0c0c;
    --cal-holiday: #ff929e; --cal-holiday-outside: #cb7e89;
    --cal-warning: #f2cd7c; --cal-warning-bg: #433720; --cal-neutral-bg: #262626;
}
html[data-calendar-theme="light"] { color-scheme: light; }
html[data-calendar-theme] body { background: var(--cal-bg); color: var(--cal-text); }
.calendar-page a { color: var(--cal-accent-text); }
.calendar-settings { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.calendar-settings > div { display: flex; align-items: center; gap: 8px; }
.calendar-settings label { margin: 0; color: var(--cal-muted); font-size: 13px; }
.calendar-settings select { font: inherit; max-width: 100%; border: 1px solid var(--cal-border); border-radius: 8px; padding: 8px 10px; background: var(--cal-surface); color: var(--cal-text); }
.calendar-page select:focus-visible { outline: 3px solid var(--cal-focus); outline-offset: 2px; }
.calendar-page { max-width: 1080px; margin: 48px auto; padding: 0 20px; color: var(--cal-text); }
.calendar-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.calendar-heading h1 { font-size: 32px; font-weight: 700; margin: 0 0 8px; }
.calendar-heading p { color: var(--cal-muted); margin: 0; }
.calendar-page button { cursor: pointer; font: inherit; }
.calendar-today { border: 1px solid var(--cal-border); border-radius: 8px; padding: 9px 22px; color: var(--cal-accent-text); background: var(--cal-surface); }
.calendar-view-controls { display: flex; align-items: center; gap: 12px; }
.calendar-view-toggle { display: flex; border: 1px solid var(--cal-border); border-radius: 8px; overflow: hidden; }
.calendar-view-toggle button { border: 0; padding: 9px 16px; background: var(--cal-surface); color: var(--cal-muted); }
.calendar-view-toggle button[aria-pressed="true"], .calendar-view-toggle button[aria-pressed="true"]:hover { background: var(--cal-accent); color: var(--cal-inverse); }
.calendar-period { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.calendar-year-status { border-radius: 20px; padding: 4px 10px; font-size: 12px; background: var(--cal-hover); color: var(--cal-accent-text); }
.calendar-year-status[data-status="provisional"] { background: var(--cal-warning-bg); color: var(--cal-warning); }
.calendar-year-status[data-status="unavailable"] { background: var(--cal-neutral-bg); color: var(--cal-muted); }
.calendar-panel { border: 1px solid var(--cal-border); border-radius: 14px; overflow: hidden; background: var(--cal-surface); box-shadow: 0 8px 32px #24332f08; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; }
.calendar-toolbar h2 { margin: 0; font-size: 24px; font-weight: 600; }
.calendar-navigation { display: flex; align-items: center; gap: 8px; }
.calendar-year-label { margin: 0; font-size: 13px; color: var(--cal-muted); }
.calendar-navigation input { width: 78px; border: 1px solid var(--cal-border); border-radius: 6px; padding: 6px; background: var(--cal-surface); color: inherit; }
.calendar-navigation button { width: 36px; height: 36px; border: 1px solid var(--cal-border); border-radius: 6px; background: var(--cal-surface); color: var(--cal-text); font-size: 24px; line-height: 1; }
.calendar-page button:hover { background: var(--cal-hover); }
.calendar-page button:focus-visible, .calendar-page input:focus-visible { outline: 3px solid var(--cal-focus); outline-offset: -3px; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { padding: 14px 0; background: var(--cal-soft); border-top: 1px solid var(--cal-line); text-align: center; color: var(--cal-muted); font-size: 13px; font-weight: 600; }
.calendar-weekdays[hidden] { display: none; }
.calendar-day { min-height: 100px; border: 0; border-top: 1px solid var(--cal-line); border-right: 1px solid var(--cal-line); background: var(--cal-surface); color: inherit; padding: 12px; display: flex; align-items: flex-start; justify-content: flex-start; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day { flex-direction: column; gap: 6px; text-align: left; }
.calendar-day .calendar-date-number { display: inline-flex; width: 32px; height: 32px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; }
.calendar-holiday-name { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.calendar-day.is-working-day { color: var(--cal-warning); }
.calendar-day.is-outside { color: var(--cal-outside); background: var(--cal-outside-bg); }
.calendar-weekdays span:first-child, .calendar-weekdays span:last-child,
.calendar-day.is-holiday { color: var(--cal-holiday); }
.calendar-day.is-holiday.is-outside { color: var(--cal-holiday-outside); }
.calendar-day.is-provisional .calendar-date-number { text-decoration: underline dotted; text-underline-offset: 5px; }
.calendar-day.is-today .calendar-date-number { background: var(--cal-accent); color: var(--cal-inverse); font-weight: 700; }
.calendar-day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--cal-accent); background: var(--cal-hover); }
.calendar-day:disabled { cursor: default; }
.calendar-footer { display: flex; justify-content: space-between; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--cal-line); color: var(--cal-muted); font-size: 13px; }
.calendar-today-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cal-accent); margin-right: 6px; }
.calendar-holiday-key { color: var(--cal-holiday); }
.calendar-source, .calendar-data-status { font-size: 13px; color: var(--cal-muted); margin: 16px 0 0; }
.calendar-data-status:empty { display: none; }
.calendar-year-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0 24px 24px; }
.calendar-mini-month { min-width: 0; }
.calendar-mini-month h3 { margin: 0; font-size: 17px; }
.calendar-mini-month h3 button { border: 0; border-radius: 6px; padding: 8px 0; margin-bottom: 6px; background: var(--cal-surface); color: var(--cal-accent-text); font-weight: 600; width: 100%; text-align: left; }
.calendar-mini-month .calendar-weekdays { font-size: 11px; padding: 8px 0; }
.calendar-mini-month .calendar-days { gap: 2px; margin-top: 6px; }
.calendar-mini-month .calendar-day { min-height: 34px; padding: 2px 0; border: 0; border-radius: 5px; align-items: center; justify-content: center; gap: 0; font-size: 13px; }
.calendar-mini-month .calendar-date-number { width: 28px; height: 28px; }
.calendar-mini-month .calendar-holiday-name { display: none; }
@media (max-width: 900px) {
    .calendar-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .calendar-page { margin: 28px auto; padding: 0 4px; }
    .calendar-toolbar { padding: 16px 12px; flex-wrap: wrap; }
    .calendar-toolbar h2 { font-size: 21px; }
    .calendar-day { min-height: 85px; padding: 5px 2px; justify-content: flex-start; align-items: center; text-align: center; }
    .calendar-holiday-name { font-size: 11px; }
    .calendar-footer { padding: 14px 12px; flex-wrap: wrap; }
    .calendar-heading p { font-size: 14px; }
    .calendar-heading { flex-wrap: wrap; }
    .calendar-year-grid { grid-template-columns: minmax(0, 1fr); padding: 0 12px 16px; }
}