#header .schedule-header-widget {
  align-self: stretch;
  flex: 0 0 224px;
  position: relative;
  width: 224px;
  z-index: 2100;
}

#header .schedule-header-widget__button {
  --schedule-header-accent: #6d7784;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #cbd5df;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(20, 35, 47, .12);
  box-sizing: border-box;
  color: #2c3945;
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-columns: 36px minmax(0, 1fr);
  height: 100%;
  min-height: 60px;
  padding: 7px 9px;
  text-align: left;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  width: 100%;
}

#header .schedule-header-widget__button.is-work { --schedule-header-accent: #2f7659; }
#header .schedule-header-widget__button.is-sick { --schedule-header-accent: #a27621; }
#header .schedule-header-widget__button.is-vac { --schedule-header-accent: #766091; }
#header .schedule-header-widget__button.is-absent { --schedule-header-accent: #aa5457; }

#header .schedule-header-widget__button:hover,
#header .schedule-header-widget__button[aria-expanded="true"] {
  background: #fff;
  border-color: #93a5b7;
  box-shadow: 0 3px 10px rgba(20, 35, 47, .18);
}

.schedule-header-widget button:focus-visible,
#header .schedule-header-widget__link:focus-visible {
  outline: 3px solid #819bb5;
  outline-offset: 2px;
}

.schedule-header-widget__calendar {
  background: #edf1f5;
  border: 1px solid #d7dfe7;
  border-radius: 6px;
  color: #354658;
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 4px 0;
}

.schedule-header-widget__calendar-day { font-size: 20px; font-weight: 800; line-height: 1; }
.schedule-header-widget__calendar-month { color: #687789; font-size: 9px; font-weight: 700; line-height: 1.1; }
.schedule-header-widget__content { display: grid; gap: 4px; min-width: 0; }

.schedule-header-widget__heading,
.schedule-header-widget__summary,
.schedule-header-widget__notices {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: space-between;
  min-width: 0;
}

.schedule-header-widget__heading {
  color: #647487;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.schedule-header-widget__chevron { color: #78899b; font-size: 12px; line-height: .8; }
.schedule-header-widget__heading > span:last-child,
.schedule-header-widget__birthday { white-space: nowrap; }
.schedule-header-widget__summary { line-height: 1.1; }
.schedule-header-widget__summary strong { align-items: center; color: #2c3945; display: inline-flex; font-size: 12px; font-weight: 800; gap: 5px; min-width: 0; }
.schedule-header-widget__summary strong::before { background: var(--schedule-header-accent); border-radius: 50%; content: ''; flex: 0 0 5px; height: 5px; }
.schedule-header-widget__status-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-header-widget__summary > span { color: #5b6a7b; font-size: 10px; white-space: nowrap; }
.schedule-header-widget__notices { border-top: 1px solid #e5e9ef; color: #5b6a7b; font-size: 9px; line-height: 1.2; padding-top: 3px; }
.schedule-header-widget__event { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-header-widget__birthday { background: #f9f0dc; border: 1px solid #ecd9ab; border-radius: 4px; color: #825e16; flex: 0 0 auto; padding: 1px 4px; }

.schedule-header-widget__panel[hidden] { display: none; }
.schedule-header-widget__panel {
  background: #fff;
  border: 1px solid #d7e0e4;
  border-radius: 10px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  color: #263942;
  left: auto;
  right: 0;
  max-height: min(560px, calc(100vh - 90px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  position: absolute;
  top: calc(100% + 8px);
  width: min(340px, calc(100vw - 24px));
}

.schedule-header-widget__panel-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
#header .schedule-header-widget__panel h2 { color: #263942; font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0; padding: 0; }
.schedule-header-widget__close { background: #eef2f4; border: 0; border-radius: 5px; color: #42545e; cursor: pointer; font-size: 20px; height: 28px; line-height: 1; padding: 0; width: 28px; }
.schedule-header-widget__day { background: #f0f4f5; border-left: 3px solid #78939a; border-radius: 6px; display: grid; gap: 5px; margin-top: 12px; overflow-wrap: anywhere; padding: 10px 12px; }
.schedule-header-widget__day strong { font-size: 15px; }
.schedule-header-widget__day span { font-size: 13px; }
.schedule-header-widget__day small { color: #62747c; font-size: 11px; }
.schedule-header-widget__day.is-work { background: #eff8f3; border-color: #66a67c; }
.schedule-header-widget__day.is-work.has-shift-type { background: color-mix(in srgb, var(--schedule-type-color) 8%, white); border-color: var(--schedule-type-color); }
.schedule-header-widget__day.is-sick { background: #fff8e8; border-color: #d0a750; }
.schedule-header-widget__day.is-vac { background: #f6f1fb; border-color: #a38ab9; }
.schedule-header-widget__day.is-absent { background: #fcf0f0; border-color: #be7c7c; }
.schedule-header-widget__section { border-top: 1px solid #edf0f2; margin-top: 13px; padding-top: 12px; }
#header .schedule-header-widget__section h3 { color: #64757e; font-size: 11px; font-weight: 700; letter-spacing: .025em; margin: 0 0 9px; text-transform: uppercase; }
.schedule-header-widget__section ul { list-style: none; margin: 0; padding: 0; }
.schedule-header-widget__section li { display: flex; font-size: 13px; gap: 8px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; padding: 5px 0; }
.schedule-header-widget__section li > div { min-width: 0; overflow-wrap: anywhere; }
.schedule-header-widget__section li strong { font-weight: 600; }
.schedule-header-widget__section p { color: #64757e; font-size: 12px; margin: 3px 0 0; white-space: pre-line; }
.schedule-header-widget__quiet { color: #6a7c85; font-size: 12px; margin: 13px 0; }
#header .schedule-header-widget__link { align-items: center; background: #edf1f5; border-radius: 6px; color: #40566d !important; display: flex; font-size: 12px; font-weight: 700; gap: 10px; justify-content: space-between; margin-top: 12px; padding: 9px 10px; text-decoration: none !important; }
#header .schedule-header-widget__link:hover { background: #e2e9f0; }

@media (max-width: 760px) {
  #header .schedule-header-widget { align-self: auto; }
  .schedule-header-widget__panel { left: 12px; max-height: calc(100dvh - 24px); position: fixed; right: 12px; top: var(--schedule-panel-top, 72px); width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #header .schedule-header-widget__button { transition: none; }
}