/* An open wall calendar. Space belongs to the months; the selected day unfolds below. */
.election-calendar {
  --calendar-ink: #374a29;
  --calendar-muted: #676c60;
  --calendar-wash: #edf0e6;
  width: 100%;
}
.portal[data-mode="calendar"][data-overview="false"] { max-width: 1800px; padding-top: 40px; }
.portal[data-mode="calendar"][data-overview="false"] .portal-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  padding-bottom: 52px;
}
.portal[data-mode="calendar"][data-overview="false"] .portal-intro { padding: 0; border: 0; min-width: 0; }
.portal[data-mode="calendar"][data-overview="false"] .portal-intro .eyebrow { display: none; }
.portal[data-mode="calendar"][data-overview="false"] .portal-intro h2 { font-size: clamp(58px, 7vw, 104px); font-weight: 320; line-height: 1; letter-spacing: -.065em; margin: 0 0 20px; }
.portal[data-mode="calendar"][data-overview="false"] .portal-intro p:last-child { font-size: 18px; color: var(--panel-muted); }
.portal[data-mode="calendar"][data-overview="false"] .portal-tabs { position: static; min-height: 44px; margin: 6px 0 0; padding: 0; border: 0; gap: 24px; background: none; min-width: 0; }
.portal[data-mode="calendar"] .portal-tabs .portal-field { width: 175px; flex: 0 0 175px; margin: 0; }
.portal[data-mode="calendar"] .portal-tabs .portal-field > span,
.portal[data-mode="calendar"] .portal-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.portal[data-mode="calendar"] .portal-tabs .portal-field select { min-height: 44px; }
.portal[data-mode="calendar"] .back-categories { gap: 8px; }
.portal[data-mode="calendar"] .back-categories-label { display: inline; font-size: 12px; opacity: 1; }
.portal[data-mode="calendar"] .back-categories .result-icon { display: block; width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.portal[data-mode="calendar"][data-wide="true"] .portal-layout { max-width: none; padding-top: 0; }
.portal[data-mode="calendar"] .portal-controls { margin: 0; }
.portal[data-mode="calendar"] .portal-panel { padding-top: 0; }
body[data-congress-preview="true"] .portal[data-mode="calendar"] .back-categories { display: none; }
.calendar-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 18px 0 38px; }
.calendar-period { margin: 0; font-size: 13px; line-height: 1.5; }
.calendar-period span { color: var(--calendar-muted); margin-left: 12px; }
.calendar-status { color: var(--calendar-muted); font-size: 12px; line-height: 1.5; margin: 0; }
.calendar-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border: 1px solid #8b815f; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.calendar-icon { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.calendar-layout, .calendar-month-board { min-width: 0; }
.calendar-months { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(32px, 5vw, 88px); align-items: start; }
.calendar-month-board { scroll-margin-top: 110px; }
.calendar-month-board[data-month="2026-10"] { grid-column: 1; grid-row: 1; }
.calendar-month-board[data-month="2026-11"] { grid-column: 2; grid-row: 1; }
.calendar-months > .calendar-detail { grid-column: 1 / -1; grid-row: 2; }
.calendar-board-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 30px; font-size: clamp(30px, 3.2vw, 46px); font-weight: 370; line-height: 1.15; letter-spacing: -.045em; }
.calendar-board-title span { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--calendar-muted); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-bottom: 14px; }
.calendar-weekdays span { padding-left: 12px; font-size: 11px; color: var(--calendar-muted); line-height: 1.5; }
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; border-top: 1px solid var(--line); }
.calendar-day {
  position: relative; min-width: 0; min-height: clamp(96px, 7.8vw, 122px); padding: 12px 8px 10px;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left;
  display: flex; flex-direction: column; gap: 5px; isolation: isolate;
  transition: background 180ms, box-shadow 180ms;
}
.calendar-day-number { display: inline-flex; align-items: center; justify-content: center; font-size: clamp(24px, 2.25vw, 33px); font-weight: 350; font-variant-numeric: tabular-nums; letter-spacing: -.055em; line-height: 1; height: 34px; min-width: 34px; align-self: flex-start; }
.calendar-day[data-weekend="true"] .calendar-day-number { color: #767c6d; }
.calendar-day[aria-current="date"] .calendar-day-number { border: 1px solid currentColor; border-radius: 50%; }
.calendar-day-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 10px; line-height: 1.4; max-width: 100%; color: var(--calendar-muted); }
.calendar-day-marker { display: flex; align-items: center; gap: 3px; color: #647152; }
.calendar-day-marker .calendar-icon { width: 16px; height: 16px; }
.calendar-day[data-range="true"] { background: var(--calendar-wash); }
.calendar-day[data-category="process"][data-range="true"] { background: #f0f0eb; }
.calendar-day[data-category="vote"] { background: var(--calendar-ink); color: #fff; }
.calendar-day[data-category="vote"] .calendar-day-number, .calendar-day[data-category="vote"] .calendar-day-label, .calendar-day[data-category="vote"] .calendar-day-marker { color: #fff; }
.calendar-day[data-selected="true"] { box-shadow: inset 0 0 0 2px var(--calendar-ink); background: #e1e7d6; z-index: 1; }
.calendar-day[data-category="vote"][data-selected="true"] { background: var(--calendar-ink); }
.calendar-day[data-selected="true"] .calendar-day-number { font-weight: 550; }
.calendar-range-tag { display: none; font-size: 9px; line-height: 1.4; color: #52603c; margin-top: auto; }
.calendar-day-empty { border-bottom: 1px solid var(--line); }
.calendar-day:active { background: #d6ddc9; }

.calendar-detail { min-width: 0; padding: clamp(24px, 3.5vw, 52px); background: var(--calendar-wash); display: grid; grid-template-columns: minmax(160px, .7fr) minmax(0, 2fr); gap: 36px; scroll-margin-block: 110px 24px; }
.calendar-detail-weekday { font-size: 13px; line-height: 1.5; color: var(--calendar-muted); }
.calendar-detail-date { display: flex; flex-direction: column; gap: 14px; font-variant-numeric: tabular-nums; margin-top: 14px; }
.calendar-detail-date strong { font-size: clamp(90px, 9vw, 140px); line-height: .85; letter-spacing: -.075em; font-weight: 260; }
.calendar-detail-date span { font-size: 13px; line-height: 1.5; color: var(--calendar-muted); }
.calendar-detail-content { min-width: 0; }
.calendar-detail-event + .calendar-detail-event { border-top: 1px solid #cbd1c0; padding-top: 28px; margin-top: 28px; }
.calendar-event-status { display: block; font-size: 11px; line-height: 1.5; color: var(--calendar-muted); margin-bottom: 12px; }
.calendar-detail h4 { font-size: clamp(28px, 3vw, 44px); font-weight: 380; letter-spacing: -.045em; line-height: 1.12; margin: 0 0 16px; text-wrap: balance; overflow-wrap: anywhere; }
.calendar-detail-event > p { font-size: 15px; line-height: 1.65; color: #52594a; margin: 12px 0; max-width: 64ch; }
.calendar-detail-event > .calendar-event-range { font-size: 12px; color: var(--calendar-muted); }
.calendar-detail .event-actions { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 22px; }
.calendar-detail .event-actions > * { min-height: 44px; font-size: 13px; text-align: left; justify-content: space-between; padding: 10px 0; margin: 0; border: 0; background: none; }
.calendar-detail .event-actions button { display: flex; align-items: center; gap: 20px; }
.calendar-detail .source-link { text-decoration: underline; text-underline-offset: 4px; }
.calendar-milestones { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(0, 2fr); gap: 36px; margin-top: 72px; }
.calendar-milestones > h4 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 370; letter-spacing: -.04em; margin: 0; }
.calendar-milestone-list { min-width: 0; border-top: 1px solid var(--line); }
.calendar-milestones button { width: 100%; min-height: 104px; min-width: 0; padding: 24px 0; display: grid; grid-template-columns: minmax(100px, .85fr) minmax(0, 1.6fr) auto; align-items: start; gap: 8px 24px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); transition: background 180ms; }
.calendar-milestones time { grid-column: 1; grid-row: 1 / 3; font-size: 13px; color: var(--calendar-muted); line-height: 1.6; }
.calendar-milestones button > strong { grid-column: 2; font-size: 19px; letter-spacing: -.025em; font-weight: 430; line-height: 1.3; }
.calendar-milestone-status { grid-column: 2; font-size: 11px; color: var(--calendar-muted); line-height: 1.5; }
.calendar-milestone-arrow { grid-column: 3; grid-row: 1; font-size: 20px; color: var(--calendar-muted); }
.calendar-notes { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; }
.calendar-disclaimer { margin: 0; font-size: 12px; line-height: 1.75; color: var(--calendar-muted); max-width: 65ch; }
.calendar-footer { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.calendar-footer .portal-primary { margin: 0; min-height: 48px; font-size: 13px; }
.calendar-footer > .source-link { font-size: 12px; }
.calendar-footer > small { width: 100%; font-size: 11px; color: var(--calendar-muted); line-height: 1.5; }
.election-calendar button:focus-visible, .election-calendar a:focus-visible { outline: 2px solid #64843c; outline-offset: 4px; }
.election-calendar .calendar-day:focus-visible { outline-offset: -3px; }
@media (hover: hover) {
  .calendar-day:hover { background: #e9ecdf; }
  .calendar-day[data-category="vote"]:hover { background: #4a6037; }
  .calendar-milestones button:hover { background: #f0f2eb; }
  .calendar-detail .event-actions button:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .calendar-day-label, .calendar-range-tag { display: none; }
  .calendar-day { min-height: 82px; }
}
@media (max-width: 760px) {
  .portal[data-mode="calendar"][data-overview="false"] { padding-top: 18px; padding-inline: 22px; }
  .portal[data-mode="calendar"][data-overview="false"] .portal-heading { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 32px; }
  .portal[data-mode="calendar"][data-overview="false"] .portal-tabs { grid-row: 1; justify-content: space-between; gap: 12px; margin: 0; }
  .portal[data-mode="calendar"][data-overview="false"] .portal-intro h2 { font-size: clamp(54px, 14vw, 78px); margin-bottom: 16px; }
  .portal[data-mode="calendar"][data-overview="false"] .portal-intro p:last-child { font-size: 16px; }
  .portal[data-mode="calendar"] .portal-tabs .portal-field { width: 150px; flex-basis: 150px; }
  .portal[data-mode="calendar"] .back-categories-label { font-size: 11px; }
  .calendar-topline { padding: 16px 0 32px; flex-wrap: wrap; gap: 8px 16px; }
  .calendar-period, .calendar-status { font-size: 11px; }
  .calendar-period span { margin-left: 6px; }
  .calendar-months { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .calendar-month-board[data-month], .calendar-months > .calendar-detail { grid-column: 1; grid-row: auto; }
  .calendar-board-title { margin-bottom: 24px; font-size: 34px; }
  .calendar-board-title span { font-size: 12px; }
  .calendar-weekdays { padding-bottom: 12px; }
  .calendar-weekdays span { padding: 0; text-align: center; }
  .calendar-day { min-height: 72px; align-items: center; padding: 9px 2px; gap: 5px; text-align: center; }
  .calendar-day-number { align-self: center; font-size: 27px; height: 32px; min-width: 32px; }
  .calendar-day-label, .calendar-range-tag { display: none; }
  .calendar-day-marker { min-height: 16px; justify-content: center; gap: 1px; }
  .calendar-day-marker .calendar-icon { width: 15px; height: 15px; }
  .calendar-detail { padding: 24px; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .calendar-detail-stamp { display: flex; flex-direction: column; }
  .calendar-detail-date { flex-direction: row; align-items: baseline; gap: 24px; margin-top: 12px; }
  .calendar-detail-date strong { font-size: 92px; }
  .calendar-detail-date span { max-width: 10ch; }
  .calendar-detail h4 { font-size: 32px; }
  .calendar-detail-event > p { font-size: 14px; }
  .calendar-detail .event-actions { margin-top: 18px; gap: 4px 24px; }
  .calendar-milestones { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; }
  .calendar-milestones > h4 { font-size: 32px; }
  .calendar-milestones button { grid-template-columns: minmax(76px, .7fr) minmax(0, 1.5fr) 16px; column-gap: 16px; padding-block: 22px; min-height: 100px; }
  .calendar-milestones time { font-size: 11px; }
  .calendar-milestones button > strong { font-size: 17px; }
  .calendar-notes { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
}
@media (max-width: 360px) {
  .portal[data-mode="calendar"][data-overview="false"] { padding-inline: 16px; }
  .calendar-detail { padding: 22px; }
  .calendar-day { min-height: 66px; }
  .calendar-day-number { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .election-calendar * { transition: none !important; animation: none !important; }
}

/* Shared portal surfaces; dates retain their calendar layout and event markers. */
.portal[data-mode=calendar]{--panel-muted:#65656c;--line:#dedee3}
.election-calendar{--calendar-ink:#242522;--calendar-muted:#65656c;--calendar-wash:#f5f5f7}
.portal[data-mode=calendar][data-overview=false] .portal-heading{padding-bottom:28px;align-items:center}
.portal[data-mode=calendar][data-overview=false] .portal-intro h2{margin-bottom:12px}
.portal[data-mode=calendar][data-overview=false] .portal-intro p:last-child{}
.portal[data-mode=calendar] .portal-tabs .portal-field select{background:#f0f0f3;border:1px solid transparent;border-radius:12px;padding-inline:12px}
.calendar-topline{border:0;background:#f5f5f7;border-radius:16px;padding:16px 22px;margin-bottom:24px}
.calendar-status::before{border-color:#242522}
.calendar-months{gap:24px}
.calendar-month-board{background:#f5f5f7;border-radius:26px;padding:26px;min-width:0}
.calendar-board-title{margin-bottom:24px}
.calendar-weekdays span{padding-left:8px}
.calendar-days{border:0;gap:4px}
.calendar-day{border:0;border-radius:12px;min-height:100px;padding:10px 6px;background:#ffffff80}
.calendar-day-empty{border:0}
.calendar-day-number{}
.calendar-day[data-weekend=true] .calendar-day-number{color:#73737d}
.calendar-day[aria-current=date] .calendar-day-number{border:0;background:#e5e5e9;color:#242522;}
.calendar-day-label{color:#65656c}
.calendar-day-marker{color:#242522}
.calendar-day[data-range=true]{background:#eaeaee}
.calendar-day[data-category=process][data-range=true]{background:#e9e9ee}
.calendar-day[data-category=vote]{background:#242522;color:#fff}
.calendar-day[data-selected=true]{background:#e1e1e6;box-shadow:inset 0 0 0 2px #242522}
.calendar-day[data-category=vote][data-selected=true]{background:#242522;box-shadow:inset 0 0 0 2px #111112}
.calendar-day[data-category=vote] :is(.calendar-day-number,.calendar-day-label,.calendar-day-marker){color:#fff}
.calendar-day:active{background:#dcdce2}
.calendar-detail{background:#f5f5f7;border-radius:26px;padding:32px;gap:32px}
.calendar-detail-date strong{color:#242522;}
.calendar-detail h4{}
.calendar-detail-event>p{color:#56565f}
.calendar-detail-event+.calendar-detail-event{border-color:#dedee3}
.calendar-event-status{display:inline-block;padding:6px 10px;background:#e9e9ee;border-radius:20px}
.calendar-detail .event-actions{gap:10px 18px}
.calendar-detail .event-actions button{background:#242522;color:#fff;padding:12px 18px;border-radius:24px;gap:10px}
.calendar-detail .event-actions .source-link{color:#242522}
.calendar-milestones{margin-top:40px;gap:24px}
.calendar-milestones>h4{}
.calendar-milestone-list{display:grid;gap:10px;border:0}
.calendar-milestones button{border:0;border-radius:20px;background:#f5f5f7;padding:22px;min-height:96px}
.calendar-milestone-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#e9e9ef;color:#65656c;font-size:18px}
.calendar-notes{border:0;background:#f5f5f7;border-radius:22px;padding:24px;margin-top:32px;gap:24px 40px}
.calendar-footer .portal-primary{border:0;border-radius:24px;background:#242522;color:#fff;padding-inline:20px}
.calendar-footer>.source-link{color:#242522}
.portal[data-mode=calendar] :is(button,a,select):focus-visible{outline:2px solid #242522;outline-offset:3px}
.election-calendar .calendar-day:focus-visible{outline:2px solid #111112;outline-offset:1px}
@media(hover:hover){
 .calendar-day:hover{background:#e3e3e8}
 .calendar-day[data-category=vote]:hover{background:#242522}
 .calendar-milestones button:hover{background:#ededf2}
 .calendar-detail .event-actions button:hover{background:#414147;text-decoration:none}
}
@media(min-width:761px) and (max-width:1100px){.calendar-month-board{padding:20px}.calendar-day{min-height:82px}}
@media(max-width:760px){
 .portal[data-mode=calendar][data-overview=false] .portal-heading{gap:20px;padding-bottom:22px}
 .portal[data-mode=calendar][data-overview=false] .portal-intro h2{}
 .portal[data-mode=calendar][data-overview=false] .portal-intro p:last-child{}
 .calendar-topline{padding:16px;margin-bottom:18px}
 .calendar-months{gap:18px}
 .calendar-month-board{padding:20px 12px;border-radius:22px}
 .calendar-board-title{margin:0 8px 22px}
 .calendar-weekdays span{padding:0}
 .calendar-days{gap:2px}
 .calendar-day{min-height:68px;padding:8px 1px;border-radius:9px}
 .calendar-day-number{min-width:30px;height:30px}
 .calendar-detail{padding:24px 20px;border-radius:22px;gap:24px}
 .calendar-detail h4{}
 .calendar-milestones{margin-top:32px}
 .calendar-milestones>h4{}
 .calendar-milestones button{padding:18px 14px;grid-template-columns:minmax(62px,.7fr) minmax(0,1.5fr) 28px;gap:8px 12px}
 .calendar-notes{padding:20px}
}
@media(prefers-contrast:more){.calendar-month-board,.calendar-detail,.calendar-topline,.calendar-milestones button,.calendar-notes{border:1px solid #777}.calendar-day{box-shadow:inset 0 0 0 1px #a0a0a8}.calendar-day[data-selected=true]{box-shadow:inset 0 0 0 2px #111112}}
