.teachings-content > input { display: block; width: 100%; box-sizing: border-box; padding: 12px; margin: 8px 0; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.calendar-shell { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.calendar-context, .calendar-legend { color: var(--muted); font-size: 13px; line-height: 1.6; }
.calendar-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.calendar-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.calendar-controls input, .calendar-controls select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 0; padding: 10px; font: inherit; min-height: 44px; max-width: 100%; box-sizing: border-box; }
.calendar-controls .ghost { min-height: 40px; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-weekdays { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 8px; }
.calendar-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 72px; padding: 8px 2px; color: var(--text); background: #fffaf0; border: 1px solid var(--border); border-radius: 0; cursor: pointer; }
.calendar-grid button:hover { border-color: #8a3c2f; background: #efe4d1; }
.calendar-grid button[aria-pressed="true"] { background: #79372c; color: #fff7e9; border-color: #79372c; outline: 1px solid #79372c; }
.calendar-grid button[aria-pressed="true"] .calendar-badge { color: #fff7e9; }
.calendar-grid button[data-great="true"] { box-shadow: inset 0 4px var(--calendar-major); }
.calendar-grid .calendar-badge { font-size: 11px; color: var(--muted); }
.calendar-grid button[data-level="strict"] .calendar-badge { color: var(--gold-bright); }
.calendar-grid button:focus-visible, .calendar-controls :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.calendar-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; overflow-wrap: anywhere; line-height: 1.6; }
.calendar-card h3 { color: var(--gold-bright); margin-top: 0; }
.calendar-card h4 { margin: 16px 0 5px; }
.calendar-card ul { margin: 6px 0; padding-left: 20px; }
.calendar-card a { color: var(--gold-bright); }
.calendar-card summary { cursor: pointer; font-weight: 600; }
.calendar-warning { border-left: 3px solid var(--gold); padding-left: 10px; font-size: 13px; }
.calendar-year-list li { margin-bottom: 8px; }
.calendar-year-list button { font: inherit; color: var(--gold-bright); border: 0; background: transparent; text-align: left; padding: 2px; cursor: pointer; text-decoration: underline; }
.calendar-step { font: 11px/1.5 Arial,sans-serif; color: #8a3c2f; text-transform: uppercase; letter-spacing: 1.6px; margin-bottom: 12px; }
.calendar-shell .calendar-card { border-radius: 0; background: #fffaf0b8; padding: 22px; }
.calendar-setup { border-top: 3px solid #8a3c2f; }
.calendar-setup-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: end; }
.calendar-suggestion-help summary { font: 12px/1.6 Arial,sans-serif; color: #79372c; }
#tab-calendar .tabhead { padding: 12px 0 16px; margin-bottom: 18px; }
#tab-calendar .tabhead h2 { font-size: clamp(28px,3.5vw,40px); }
.calendar-setup h3 { font: 24px/1.3 Georgia,serif; color: var(--text); margin-bottom: 8px; }
.calendar-tradition-label { display: flex; flex-direction: column; gap: 8px; font: 12px/1.6 Arial,sans-serif; color: var(--muted); }
.calendar-tradition-label select { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 10px; background: #fffaf0; border: 1px solid var(--border); color: var(--text); font: 14px/1.5 Arial,sans-serif; }
#calendarTraditionNote { border-left: 2px solid #8a3c2f; padding-left: 12px; }
.calendar-controls { gap: 10px; }
.calendar-controls label { flex: 1 1 200px; min-width: 0; }
.calendar-controls .ghost { min-height: 44px; }
.calendar-browser { margin-top: 18px; }
#calendarStatus { font: 12px/1.6 Arial,sans-serif; color: var(--muted); margin-bottom: 0; }
.calendar-month-panel h3 { font: 28px/1.3 Georgia,serif; color: var(--text); margin-bottom: 10px; }
.calendar-weekdays { font: 11px/1.6 Arial,sans-serif; letter-spacing: .5px; padding: 12px 0; }
.calendar-date-number { font: 20px/1.2 Georgia,serif; }
.calendar-grid button[data-today="true"] .calendar-date-number { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.calendar-legend { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 18px; }
.calendar-selection { font: 12px/1.6 Arial,sans-serif; color: #79372c; }
.calendar-day-panel { min-width: 0; }
.calendar-day-panel > .calendar-step { padding: 0 4px; }
#calendarDay { scroll-margin-top: 150px; border-top: 3px solid #8a3c2f; }
#calendarDay h3 { font: 24px/1.3 Georgia,serif; color: var(--text); }
.calendar-edition { display: inline-block; font: 11px/1.6 Arial,sans-serif; text-transform: uppercase; letter-spacing: .7px; color: #79372c; padding: 5px 9px; border: 1px solid var(--border); margin: 0; }
.calendar-fast-summary { padding: 12px; background: #efe4d1; border-left: 3px solid #8a3c2f; }
.calendar-foodlists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calendar-foodlists > div { padding: 10px; border: 1px solid var(--border); min-width: 0; }
.calendar-foodlists h4 { margin-top: 0; font: 12px/1.6 Arial,sans-serif; color: #79372c; }
.calendar-foodlists ul { font-size: 14px; }
.calendar-grid button[aria-pressed="true"][data-level] .calendar-badge { color: #fff7e9; }
@media (max-width: 900px) { .calendar-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 480px) { .calendar-setup-fields { grid-template-columns: 1fr; gap: 10px; } .calendar-shell .calendar-card { padding: 14px; } .calendar-grid button { min-height: 58px; } .calendar-foodlists { grid-template-columns: 1fr; } .calendar-date-number { font-size: 18px; } }
@media (max-width: 680px) { .calendar-layout { grid-template-columns: minmax(0, 1fr); } .calendar-controls label { max-width: 100%; } }
/* Color categories remain visible while selected, hovered, and in dark mode.
   The feast rank is independent of the day's fasting category. */
:root{--calendar-major:#8b6b00;--calendar-strict:#b93037;--calendar-oil:#975306;--calendar-fish:#226e72;--calendar-free:#096e4b}
html[data-theme="dark"]{--calendar-major:#e5b91b;--calendar-strict:#f06469;--calendar-oil:#e9a23b;--calendar-fish:#65b9bb;--calendar-free:#48c799}
#calendarGrid button{position:relative;border-bottom:3px solid var(--calendar-tone,var(--border));background:var(--calendar-fill,var(--panel));color:var(--text)}
#calendarGrid button[data-level="strict"]{--calendar-tone:var(--calendar-strict);--calendar-fill:#fae7e7}
#calendarGrid button[data-level="wine-oil"]{--calendar-tone:var(--calendar-oil);--calendar-fill:#fbefd9}
#calendarGrid button[data-level="fish"]{--calendar-tone:var(--calendar-fish);--calendar-fill:#e0f0ef}
#calendarGrid button[data-level="none"]{--calendar-tone:var(--calendar-free);--calendar-fill:#e2f2e7}
html[data-theme="dark"] #calendarGrid button[data-level="strict"]{--calendar-fill:#382427}
html[data-theme="dark"] #calendarGrid button[data-level="wine-oil"]{--calendar-fill:#392f21}
html[data-theme="dark"] #calendarGrid button[data-level="fish"]{--calendar-fill:#213536}
html[data-theme="dark"] #calendarGrid button[data-level="none"]{--calendar-fill:#21372c}
#calendarGrid button:hover{background:var(--calendar-fill,var(--panel));border-color:var(--calendar-tone,var(--gold))}
#calendarGrid button[aria-pressed="true"]{background:var(--calendar-fill,var(--panel));color:var(--text);outline:2px solid var(--text);outline-offset:1px}
#calendarGrid button[data-level] .calendar-badge{color:var(--calendar-tone,var(--muted))}
.calendar-feast-mark{position:absolute;left:5px;bottom:1px;font:18px/1 Georgia,serif;color:var(--text)}
.calendar-major-mark{position:absolute;right:4px;top:5px;font:15px/1 Georgia,serif;color:var(--calendar-major)}
.calendar-color-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0;list-style:none}
.calendar-color-key li{border-left:4px solid var(--key-color,var(--border));padding-left:10px;min-width:0}
.calendar-color-key strong,.calendar-color-key span{display:block}.calendar-color-key strong{color:var(--key-color,var(--text));margin-bottom:4px}
.key-major{--key-color:var(--calendar-major)}.key-strict{--key-color:var(--calendar-strict)}.key-oil{--key-color:var(--calendar-oil)}.key-fish{--key-color:var(--calendar-fish)}.key-free{--key-color:var(--calendar-free)}
@media(max-width:480px){.calendar-color-key{grid-template-columns:1fr}}