/* Your safety calendar (calendar.html). Uses base.css tokens; phone first, 44 px targets. */
.cal-hero { padding: clamp(44px, 8vw, 96px) 0 clamp(20px, 3vw, 36px); background: radial-gradient(120% 80% at 50% -10%, var(--accent-wash), transparent 60%), linear-gradient(180deg, var(--white), var(--ivory)); }
.cal-hero h1 { margin: 16px 0 14px; max-width: 17ch; }
.cal-hero .lede { font-size: clamp(1.08rem, 2vw, 1.22rem); color: var(--gray-500); max-width: 56ch; }

.cal-form { background: var(--white); border: 1px solid var(--gray-150); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(20px, 4vw, 32px); display: grid; gap: 22px; }
.cal-form h2 { font-size: 1.25rem; }
.cal-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.cal-form legend { font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-bottom: 4px; padding: 0; }
.cal-form .hint { font-size: .9rem; color: var(--gray-500); margin-top: -4px; }
.cal-form label.f { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--gray-700); }
.cal-form input[type=text], .cal-form select {
  font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--gray-300); border-radius: 12px; min-height: 48px; padding: 0 14px; width: 100%;
}
.cal-form select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat; }
.cal-form input:focus-visible, .cal-form select:focus-visible, .cal-form button:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; border-color: var(--accent); }

.kid { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; padding: 14px; border: 1px solid var(--gray-150); border-radius: 14px; background: var(--gray-50); }
.kid .name { grid-column: 1 / -1; }
.kid-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kid-head b { font-size: .95rem; }
.kid-x { font: inherit; font-size: .88rem; font-weight: 600; color: var(--gray-600); background: none; border: 0; min-height: 44px; min-width: 44px; padding: 0 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kid-x svg { width: 16px; height: 16px; }
.add-kid { justify-self: start; }
.add-kid svg, .cal-go svg, .ev-links svg { width: 18px; height: 18px; flex: none; }

.cal-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .cal-row { grid-template-columns: 1fr 1fr; align-items: end; } .kid { grid-template-columns: 2fr 1fr 1fr; } .kid .name { grid-column: auto; } }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 1rem; color: var(--gray-800); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; border: 2px solid var(--gray-300); border-radius: 7px; background: #fff; flex: none; display: grid; place-items: center; cursor: pointer; margin: 0; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat; }

.privacy { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--gray-600); background: var(--accent-wash); border-radius: 14px; padding: 14px 16px; }
.privacy svg { width: 22px; height: 22px; color: var(--accent-ink); flex: none; margin-top: 1px; }
.privacy button { font: inherit; font-weight: 600; color: var(--accent-ink); background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: underline; }

.cal-go { display: grid; gap: 10px; }
.cal-go .btn { justify-content: center; min-height: 56px; font-size: 1.05rem; }
.cal-go p { font-size: .88rem; color: var(--gray-500); text-align: center; }
@media (min-width: 640px) { .cal-go .btn { justify-self: start; } .cal-go p { text-align: left; } }

/* Timeline */
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 18px; }
.tl-head h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.tl-head p { font-size: .92rem; color: var(--gray-500); }
.tl-month { margin: 28px 0 10px; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }
.tl-month:first-child { margin-top: 0; }
.tl { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 44px 1fr; gap: 14px; background: var(--white); border: 1px solid var(--gray-150); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-xs); }
.ev-i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink); }
.ev-i svg { width: 22px; height: 22px; }
.ev[data-kind=home] .ev-i { background: var(--gray-100); color: var(--gray-700); }
.ev[data-kind=season] .ev-i { background: #fff7e6; color: #8a5a00; }
.ev[data-kind=health] .ev-i { background: #eef4ff; color: #2b4f9a; }
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .84rem; color: var(--gray-500); margin-bottom: 4px; }
.ev-meta .when { font-weight: 700; color: var(--gray-700); }
.ev-meta .now { color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 9px; font-weight: 700; }
.ev-meta .who { background: var(--gray-100); color: var(--gray-700); border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.ev-meta .rep { display: inline-flex; align-items: center; gap: 4px; }
.ev-meta .rep svg { width: 14px; height: 14px; }
.ev h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 6px; }
.ev p { font-size: .98rem; line-height: 1.55; color: var(--gray-700); margin: 0; }
.ev-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 8px; }
.ev-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .92rem; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.ev-links a:hover { text-decoration: underline; }
.ev-links a.src { color: var(--gray-500); font-weight: 500; }
@media (max-width: 420px) { .ev { grid-template-columns: 36px 1fr; gap: 12px; padding: 16px 16px 10px; } .ev-i { width: 36px; height: 36px; border-radius: 10px; } .ev-i svg { width: 19px; height: 19px; } .ev-links { gap: 0 14px; } .ev-links a { font-size: .9rem; } }

.tl-more { margin-top: 22px; display: flex; justify-content: center; }
.tl-more .btn { min-height: 48px; }
.tl-empty { text-align: center; color: var(--gray-500); padding: 28px 0; }

.cal-sources { margin-top: 44px; font-size: .84rem; color: var(--gray-500); }
.cal-sources h2 { font-size: 1rem; margin-bottom: 8px; }
.cal-sources ol { padding-left: 20px; display: grid; gap: 4px; }
.cal-sources a { color: var(--gray-600); word-break: break-word; }

@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
@media print { .sh, .sf, .cal-form, .tl-more, .ev-links { display: none !important; } .ev { box-shadow: none; break-inside: avoid; } }