.updown-calendar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin:20px 0 40px; color:#334b64; }
.updown-calendar-panel { min-width:0; padding:24px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.updown-calendar-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
body .updown-calendar h2 { font-size:22px; line-height:1.4; margin:0; color:#795820; }
.updown-calendar button { font:inherit; cursor:pointer; border:1px solid #e5e7eb; border-radius:6px; background:#fff; color:#334b64; }
.updown-calendar-nav button { width:44px; height:44px; font-size:28px; }
.updown-calendar button:hover:not(:disabled) { background:#faf3e4; border-color:#d6a64b; }
.updown-calendar button:focus-visible { outline:2px solid #795820; outline-offset:2px; }
.updown-calendar button:disabled { opacity:.35; cursor:default; }
.updown-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.updown-calendar-weekday { font-size:12px; text-align:center; padding:6px 0; color:#777; }
.updown-calendar-day { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:62px; padding:6px 2px; gap:5px; }
.updown-calendar-day.is-today { border-color:#d6a64b; }
.updown-calendar-day[aria-pressed=true] { background:#795820; border-color:#795820; color:#fff; }
.updown-calendar-day[aria-pressed=true]:hover { color:#334b64; }
.updown-calendar-markers { display:flex; flex-wrap:wrap; justify-content:center; gap:2px; font-size:10px; min-height:15px; }

.updown-calendar-legend { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:11px; margin-top:20px; color:#806c47; }
.updown-calendar-details dl { margin:20px 0; }
.updown-calendar-details dl > div { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid #eee; }
.updown-calendar-details dt { color:#777; font-weight:400; }
.updown-calendar-details dd { margin:0; overflow-wrap:anywhere; }
body .updown-calendar h3 { font-size:18px; color:#795820; margin:20px 0 12px; }
.updown-calendar-description { font-size:15px; line-height:1.8; white-space:pre-line; overflow-wrap:anywhere; }
.updown-calendar-details > button { padding:10px 16px; }
.updown-calendar-notice { grid-column:1/-1; margin:0; padding:12px; background:#faf3e4; font-size:14px; }
@media(max-width:991px) { .updown-calendar { grid-template-columns:minmax(0,1fr); } }
@media(max-width:420px) { .updown-calendar-panel { padding:14px; } .updown-calendar-grid { gap:3px; } .updown-calendar-day { min-height:56px; } body .updown-calendar h2 { font-size:18px; } }

/* Readable badge key below the monthly calendar. */
.updown-calendar-legend { gap: 8px; padding-top: 16px; border-top: 1px solid #eee5d4; font-size: 12px; color: #63471c; line-height: 1.5; }
.updown-calendar-legend-item { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 9px; border: 1px solid #e8d5af; border-radius: 6px; background: #fcf7ec; font-weight: 500; }
.updown-calendar-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 22px; height: 22px; padding: 2px 3px; box-sizing: border-box; border: 1px solid #795820; border-radius: 4px; background: #795820; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.updown-calendar-badge.is-haircut { border-color: #795820; background: #795820; color: #fff; }
.updown-calendar-badge svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.updown-calendar-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.updown-calendar-tags:empty { display: none; }
.updown-calendar-tags span { border-radius: 5px; padding: 4px 8px; background: #faf3e4; color: #795820; font-size: 12px; }
.updown-calendar-special { margin-top: 20px; padding: 16px; border: 1px solid #eee5d4; border-radius: 7px; background: #fffdf8; font-size: 14px; line-height: 1.7; }
body .updown-calendar-special h3 { margin-top: 0; }
body .updown-calendar-special h4 { margin: 14px 0 6px; font-size: 14px; font-weight: 600; color: #795820; }
.updown-calendar-special p { margin: 0 0 10px; }
.updown-calendar-special ul { margin: 0; padding-left: 20px; }

/* Toggle the legend to highlight matching dates without moving the calendar grid. */
.updown-calendar button.updown-calendar-legend-item { padding: 6px 9px; border-color: #e8d5af; background: #fcf7ec; color: #63471c; font-size: 12px; font-weight: 500; text-align: left; }
.updown-calendar button.updown-calendar-legend-item[aria-pressed=true] { border-color: #795820; background: #795820; color: #fff; }
.updown-calendar-legend-item[aria-pressed=true] .updown-calendar-badge { border-color: #e8d5af; }
.updown-calendar .updown-calendar-day.is-filter-muted { opacity: .3; }
.updown-calendar .updown-calendar-day.is-filter-muted:focus-visible { opacity: 1; }
.updown-calendar .updown-calendar-day.is-filter-match { border-color: #b18b43; background: #faf0da; box-shadow: inset 0 0 0 1px #b18b43; color: #63471c; }
.updown-calendar .updown-calendar-day.is-filter-match[aria-pressed=true] { background: #795820; color: #fff; }
.updown-calendar-filter-status { margin: 12px 0 0; color: #795820; font-size: 12px; line-height: 1.5; }