:root { color-scheme: light; --bg:#fbfaf7; --text:#242321; --muted:#716d67; --line:#ddd8cf; --accent:#225f68; --soft:#dcebed; --gold:#f5df91; --gold-text:#644d00; --recurring:#e6def3; --recurring-text:#594271; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.dashboard,.detail { width:min(100%,760px); margin:auto; padding:30px 20px 64px; }
header { max-width:520px; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:13px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(34px,8vw,52px); line-height:1.05; letter-spacing:-.035em; }
label { display:inline-block; margin-top:28px; font-size:14px; font-weight:700; vertical-align:middle; }
.date-picker { position:relative; display:inline-block; width:190px; margin:28px 0 0 12px; vertical-align:middle; }
.date-picker input { width:100%; margin:0; padding:12px 42px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--text); font:inherit; text-align:center; min-height:48px; appearance:none; -webkit-appearance:none; }
.date-picker input::-webkit-date-and-time-value { text-align:center; }
.date-picker input::-webkit-calendar-picker-indicator { display:none; -webkit-appearance:none; }
.date-picker-icon { position:absolute; top:50%; right:13px; width:20px; height:20px; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
@supports (-moz-appearance:none) {
  .date-picker input { padding:12px; }
  .date-picker-icon { display:none; }
}
.notice { margin:10px 0 0; padding:10px 12px; border-radius:9px; background:var(--soft); color:var(--accent); font-size:14px; }
nav { display:flex; gap:16px; margin-top:26px; border-bottom:1px solid var(--line); }
nav button { flex:none; padding:0 0 12px; border:0; border-bottom:3px solid transparent; background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:650; white-space:nowrap; cursor:pointer; min-height:44px; }
nav button[aria-current=page] { border-color:var(--accent); color:var(--accent); }
section { margin-top:40px; border-top:1px solid var(--line); padding-top:18px; }
section:first-child { border-top:0; }
section h2 { margin:0 0 25px; color:var(--accent); font-size:14px; letter-spacing:.13em; text-transform:uppercase; }
.month-divider { display:flex; align-items:center; margin-right:-20px; margin-left:-20px; }
.month-divider__line { height:1px; flex:1; background:var(--line); }
.month-divider__label { flex:none; margin:0 14px; white-space:nowrap; }
#events > section { border-top:0; }
.event { display:block; margin:0 -9px 12px; padding:8px 9px 23px; border-radius:11px; color:inherit; text-decoration:none; }
.event:hover,.event:focus-visible { background:#f2f0eb; outline:none; }
.event.weekend { background:rgba(220,235,237,.26); }
.date { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:16px; }
.day,.projected,.recurring { padding:3px 9px; border-radius:999px; font-size:14px; font-weight:750; }
.day { background:var(--soft); color:var(--accent); }
.projected { background:var(--gold); color:var(--gold-text); }
.recurring { background:var(--recurring); color:var(--recurring-text); }
.dash { color:var(--muted); }
h3 { margin:10px 0 0; font-size:24px; line-height:1.2; letter-spacing:-.015em; }
.meta { display:flex; align-items:flex-start; gap:9px; margin:6px 0 0; color:var(--muted); }
.meta svg { width:18px; height:18px; flex:none; margin-top:3px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.empty { margin-top:42px; color:var(--muted); }
.back { display:inline-block; margin-bottom:31px; color:var(--accent); font-weight:700; text-decoration:none; min-height:44px; }
.detail dl { margin:32px 0 0; }
.detail dl div { padding:16px 0; border-top:1px solid var(--line); }
dt { color:var(--muted); font-size:14px; font-weight:700; }
dd { margin:3px 0 0; font-size:19px; }
.detail-date { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.detail-date-value { display:contents; }
.detail-projected { display:inline-block; }
.detail-projected[hidden] { display:none; }
.calendar-button { margin-top:22px; min-height:44px; padding:10px 16px; border:1px solid var(--accent); border-radius:10px; background:var(--accent); color:white; font:inherit; font-weight:700; cursor:pointer; }
.calendar-button:hover,.calendar-button:focus-visible { background:#194c53; outline:3px solid rgba(34,95,104,.2); outline-offset:2px; }
.calendar-button[hidden] { display:none; }
.detail-section { margin-top:34px; }
.detail-section h2 { margin-bottom:10px; }
.detail-section p { margin:0; white-space:normal; }
.detail-section a { color:var(--accent); overflow-wrap:anywhere; }
@media(min-width:700px) {
  .dashboard,.detail { padding-top:54px; }
  .event { padding-right:18px; padding-left:18px; margin-left:-18px; margin-right:-18px; }
  header { max-width:none; }
  nav { gap:24px; }
  nav button { font-size:17px; }
}