.calendar-toolbar{position:relative;z-index:2;overflow:visible}
.week-calendar .cal-day{min-height:220px;cursor:pointer}
.week-calendar .day-number{font-size:18px;margin-bottom:14px}
@media(max-width:600px){.week-calendar .cal-day{min-height:160px}.week-calendar .day-number{font-size:14px;margin-bottom:10px}}
.month-navigate{min-width:0;max-width:100%}
.month-navigate>.icon-btn{flex-shrink:0}
.period-selector{position:relative;min-width:0;font-size:15px;font-weight:600}
.period-selector summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:6px 8px;min-height:34px;border-radius:7px;line-height:1.35;overflow-wrap:anywhere}
.period-title{min-width:0;display:block}
.period-chevron{display:block;flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.period-selector summary:hover{background:#355c650c}
.period-selector[open] .period-chevron{transform:rotate(180deg)}
.period-current{border:0;border-bottom:1px solid #dce2e3;background:transparent;color:#355c7d;text-align:left;font-size:12px;font-weight:600;padding:0 0 12px;cursor:pointer}
.period-selector summary::-webkit-details-marker{display:none}
.period-popover{position:absolute;z-index:3;top:100%;left:0;width:min(320px,calc(100vw - 100px));display:grid;gap:12px;background:#fafbfa;border:1px solid #d5dddd;border-radius:12px;padding:16px;box-shadow:0 12px 32px #25393e25}
.period-popover label{display:grid;gap:6px;font-size:11px;color:#52656a}
.period-popover select,.period-popover input{min-width:0;width:100%;padding:10px;border:1px solid #d4dddd;border-radius:7px;background-color:#fff;font-size:12px;color:var(--ink)}
.event-url a{display:block;color:#355c7d;font-size:13px;overflow-wrap:anywhere}
.event-url span{display:block;font-size:11px;margin-top:6px}
@media(max-width:600px){.period-selector{font-size:13px}.month-navigate{gap:7px}}

/* Stable toolbar tracks keep view controls still as the date label changes. */
@media(max-width:900px){
 .calendar-toolbar{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:40px auto;align-items:center;gap:12px}
 .month-navigate{display:grid;grid-template-columns:27px minmax(0,1fr) 27px;align-items:center;width:100%;height:40px;gap:7px}
 .period-selector{width:100%;min-width:0}
 .period-selector summary{height:40px;min-height:40px;justify-content:center;overflow:hidden}
 .period-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .calendar-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(100px,1.6fr);align-items:stretch;gap:5px;width:100%;min-width:0}
 .calendar-actions>button{min-width:0;min-height:36px;margin:0;padding:8px 4px;white-space:nowrap}
 .period-popover{max-width:100%;width:320px}
}