/* School calendar: the portal's editing page and the public page's calendar parts. Kind colours (cal-c0 … cal-c7,
   in the order of settings calendar.kinds) and the accent can be changed by setting these variables on the page. */
:root {
  --cal-accent: var(--primary, #2f5d3a);
  --cal-ink: var(--ink, #1f2a22);
  --cal-muted: var(--muted, #5d6b61);
  --cal-line: var(--line, #dfe5df);
  --cal-panel: var(--panel, #ffffff);
  --cal-c0: #b4532a; --cal-c0-bg: #fbe9e1;
  --cal-c1: #2f6e4b; --cal-c1-bg: #e3f1e8;
  --cal-c2: #8a6a12; --cal-c2-bg: #fbf1d3;
  --cal-c3: #2d5f8a; --cal-c3-bg: #e2edf7;
  --cal-c4: #6d4a8a; --cal-c4-bg: #eee5f6;
  --cal-c5: #4d5b61; --cal-c5-bg: #e8ecee;
  --cal-c6: #8a2d5a; --cal-c6-bg: #f6e2ec;
  --cal-c7: #555; --cal-c7-bg: #eee;
}
.cal-c0 { --k: var(--cal-c0); --kb: var(--cal-c0-bg); }
.cal-c1 { --k: var(--cal-c1); --kb: var(--cal-c1-bg); }
.cal-c2 { --k: var(--cal-c2); --kb: var(--cal-c2-bg); }
.cal-c3 { --k: var(--cal-c3); --kb: var(--cal-c3-bg); }
.cal-c4 { --k: var(--cal-c4); --kb: var(--cal-c4-bg); }
.cal-c5 { --k: var(--cal-c5); --kb: var(--cal-c5-bg); }
.cal-c6 { --k: var(--cal-c6); --kb: var(--cal-c6-bg); }
.cal-c7 { --k: var(--cal-c7); --kb: var(--cal-c7-bg); }

.cal-kind { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--k); background: var(--kb); border-radius: 999px; padding: 0.15em 0.7em; }

/* portal */
.cal-form .cal-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
.cal-form .cal-row > label { flex: 1 1 180px; }
.cal-check { display: flex; gap: 8px; align-items: center; }
.cal-check input { width: auto; margin: 0; }

/* public */
.cal-public { color: var(--cal-ink); }
.cal-subscribe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 0.5rem; }
.cal-btn { text-align: center; }
.cal-plain { color: var(--cal-accent); font-weight: 600; }
.cal-help { color: var(--cal-muted); font-size: 0.95rem; margin: 0 0 1.5rem; }
.cal-legend { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.cal-legend li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; }
.cal-swatch { width: 0.9rem; height: 0.9rem; border-radius: 4px; background: var(--k); display: inline-block; }
.cal-month, section.cal-month { margin: 0 0 2.5rem; padding: 0; }
.cal-month h2 { margin: 0 0 0.75rem; color: var(--cal-accent); }
.cal-months { display: grid; gap: 0 2.5rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 360px; margin: 0 0 1rem; text-align: center; font-size: 0.9rem; }
.cal-h { font-weight: 700; color: var(--cal-muted); font-size: 0.8rem; padding: 2px 0; }
.cal-d { padding: 6px 0; border-radius: 8px; color: var(--cal-ink); }
.cal-d.cal-on { background: var(--k); color: #fff; font-weight: 700; }
.cal-d.cal-today { outline: 2px solid var(--cal-accent); outline-offset: -2px; }
.cal-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.cal-item { display: flex; gap: 1rem; align-items: flex-start; background: var(--cal-panel); border: 1px solid var(--cal-line); border-left: 6px solid var(--k); border-radius: 12px; padding: 0.85rem 1rem; }
.cal-date { flex: 0 0 3.2rem; text-align: center; line-height: 1.1; }
.cal-dow, .cal-mon { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cal-muted); }
.cal-num { display: block; font-size: 1.6rem; font-weight: 800; color: var(--k); }
.cal-what { min-width: 0; }
.cal-what h3 { margin: 0 0 0.2rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.cal-when { margin: 0 0 0.35rem; color: var(--cal-muted); font-size: 0.95rem; }
.cal-note { margin: 0.4rem 0 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.cal-none { color: var(--cal-muted); font-style: italic; }
@media (min-width: 900px) {
  .cal-month { display: grid; grid-template-columns: 300px 1fr; gap: 0 2rem; align-items: start; }
  .cal-month h2 { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .cal-subscribe .cal-btn { width: 100%; }
}