.skpr {
    --skpr-ink: #102639;
    --skpr-muted: #677b8e;
    --skpr-line: #dfe8f0;
    --skpr-blue: #0067d0;
    display: grid;
    gap: 1.5rem;
    color: var(--skpr-ink);
    min-width: 0;
}
.skpr h2, .skpr h3, .skpr p { margin: 0; }
.skpr h2 { font-size: 1.13rem; font-weight: 750; letter-spacing: -0.025em; }
.skpr h3 { font-size: 0.95rem; font-weight: 750; }
.skpr a, .skpr button, .skpr select { -webkit-tap-highlight-color: transparent; }
.skpr a:focus-visible, .skpr button:focus-visible, .skpr select:focus-visible, .skpr summary:focus-visible { outline: 2px solid var(--skpr-blue); outline-offset: 3px; }
.skpr-eyebrow { color: #59738a; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.45rem !important; }
.skpr-muted { color: var(--skpr-muted); font-size: 0.83rem; line-height: 1.6; margin-top: 0.4rem !important; }
.skpr-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.skpr-section-heading > div { min-width: 0; }
.skpr-text-link { color: var(--skpr-blue); font-size: 0.81rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.skpr-text-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.skpr-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; align-items: start; }
.skpr-card { min-width: 0; background: #fff; border: 1px solid var(--skpr-line); border-radius: 1.1rem; padding: 1.5rem; box-shadow: 0 0.3rem 1.5rem rgb(17 49 75 / 3%); }
.skpr-card .skpr-opening { font-size: clamp(1.7rem, 2.2vw, 2.3rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
.skpr-contact-list { display: grid; gap: 0.2rem; margin: 0.8rem 0; }
.skpr-contact-list a { color: #2a5277; text-decoration: none; display: flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; font-size: 0.9rem; font-weight: 650; overflow-wrap: anywhere; }
.skpr-contact-list svg, .skpr-deadline svg { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.skpr-manager-contact { display: grid; gap: 0.2rem; border-top: 1px solid var(--skpr-line); padding-top: 0.9rem; font-size: 0.83rem; }
.skpr-manager-contact span { color: var(--skpr-muted); font-size: 0.74rem; }
.skpr-manager-contact a { color: var(--skpr-blue); text-decoration: none; min-height: 2rem; display: flex; align-items: center; width: fit-content; }
.skpr-notes { white-space: pre-line; color: #51697e; line-height: 1.6; font-size: 0.79rem; margin: 0.65rem 0 1rem !important; overflow-wrap: anywhere; }
.skpr-button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.65rem 1rem; border-radius: 0.65rem; background: #eaf4ff; color: #0061bf; font-size: 0.83rem; font-weight: 750; text-decoration: none; text-align: center; }
.skpr-button-link:hover { background: #dcecff; }
.skpr-price-list { margin: 0.8rem 0 0.35rem; display: grid; }
.skpr-price-list > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #edf1f5; padding: 0.63rem 0; font-size: 0.8rem; }
.skpr-price-list dt { color: #5d7286; }
.skpr-price-list dd { margin: 0; flex-shrink: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.skpr-faq { margin-top: 0.75rem; }
.skpr-faq details { border-bottom: 1px solid #e8edf3; }
.skpr-faq summary { position: relative; list-style: none; cursor: pointer; padding: 0.9rem 1.4rem 0.9rem 0; font-size: 0.82rem; font-weight: 700; line-height: 1.5; }
.skpr-faq summary::-webkit-details-marker { display: none; }
.skpr-faq summary::after { content: "+"; position: absolute; right: 0; top: 0.8rem; font-size: 1.05rem; color: #4381b5; }
.skpr-faq details[open] summary::after { content: "−"; }
.skpr-faq details p { padding: 0 0 1rem; font-size: 0.79rem; line-height: 1.65; white-space: pre-line; color: #586f84; overflow-wrap: anywhere; }
.skpr-updated { margin-top: 0.5rem !important; color: #7b8c9c; font-size: 0.68rem; }
.skpr-week { display: grid; gap: 1.2rem; padding-top: 0.8rem; scroll-margin-top: 6rem; }
.skpr-week-nav { display: flex; gap: 0.4rem; align-items: center; position: relative; }
.skpr-week-status { position: absolute; right: 0; top: calc(100% + 0.2rem); white-space: nowrap; color: var(--skpr-muted); font-size: 0.7rem; }
.skpr-week-status:empty { display: none; }
.skpr-slider-viewport { overflow: hidden; padding: 3px; margin: -3px; }
.skpr-week-nav a, .skpr-week-nav button { display: inline-flex; justify-content: center; align-items: center; padding: 0.6rem 0.85rem; min-height: 2.75rem; min-width: 2.75rem; border: 1px solid #d9e3ec; background: #fff; border-radius: 0.65rem; color: #245578; text-decoration: none; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.skpr-week-nav a:hover, .skpr-week-nav button:hover { background: #edf5fd; }
.skpr button:disabled, .skpr select:disabled { opacity: 0.55; cursor: wait; }
.skpr-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.65rem; }
.skpr-day { background: #fff; border: 1px solid var(--skpr-line); border-radius: 0.95rem; overflow: hidden; min-width: 0; }
.skpr-day > header { padding: 0.9rem; display: grid; gap: 0.2rem; border-bottom: 1px solid #e5ecf2; background: #f9fbfd; position: relative; }
.skpr-day > header > span:first-child { color: #667c90; font-size: 0.72rem; }
.skpr-day > header > strong { font-size: 1.18rem; letter-spacing: -0.035em; }
.skpr-day.is-today { border: 2px solid #0067d0; }
.skpr-day.is-today > header { background: #eaf4ff; }
.skpr-day.is-weekend > header { background: #f1f5f9; }
.skpr-today-label { color: #0067d0; font-size: 0.62rem; font-weight: 800; position: absolute; top: 0.9rem; right: 0.6rem; }
.skpr-day-slots { display: grid; }
.skpr-duty { padding: 0.95rem 0.8rem; min-height: 9rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.skpr-duty + .skpr-duty { border-top: 1px solid #e6edf3; }
.skpr-duty-time { font-size: 0.65rem; font-weight: 750; color: #3276af; }
.skpr-duty-time span { display: block; font-size: 0.7rem; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.skpr-duty--afternoon .skpr-duty-time { color: #7b57a1; }
.skpr-duty-name { font-size: 0.83rem; line-height: 1.45; overflow-wrap: anywhere; margin-top: 0.3rem; }
.skpr-duty-phone { color: #59788f; text-decoration: none; font-size: 0.7rem; min-height: 2rem; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.skpr-pending { font-size: 0.76rem; color: #7a8c9c; margin-top: 0.4rem; }
.skpr-unassigned { font-size: 0.78rem; color: #9b6617; margin-top: 0.4rem; }
.skpr-inline-warning { display: block; color: #966017; font-size: 0.67rem; font-weight: 650; line-height: 1.55; margin-top: 0.4rem !important; }
.skpr-week-footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.skpr-week-footer p { color: var(--skpr-muted); font-size: 0.8rem; }
.skpr-plan-intro { background: linear-gradient(115deg, #fff, #eff7ff); border: 1px solid #dce7f2; border-radius: 1.2rem; padding: 1.5rem 1.75rem; }
.skpr .skpr-month-title { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 800; text-transform: capitalize; }
.skpr-plan-status { display: flex; align-items: center; gap: 0.65rem 1rem; flex-wrap: wrap; font-size: 0.73rem; color: #667c90; margin-top: 0.9rem; }
.skpr-pill { display: inline-flex; padding: 0.35rem 0.65rem; border-radius: 2rem; color: #2a6392; background: #e5f1ff; font-size: 0.68rem; font-weight: 750; }
.skpr-pill--amber { color: #946115; background: #fff0d6; }
.skpr-pill--green { color: #18724b; background: #e4f7ed; }
.skpr-deadline { display: flex; align-items: center; gap: 0.55rem; color: #637c91; font-size: 0.78rem; line-height: 1.5; margin-top: 1rem !important; }
.skpr-deadline.is-overdue { color: #986718; }
.skpr-plan-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.skpr-plan-stats > div { border: 1px solid var(--skpr-line); border-radius: 1rem; padding: 1rem 1.25rem; background: #fff; min-width: 0; }
.skpr-plan-stats > div > span { font-size: 0.73rem; color: #647a8e; }
.skpr-plan-stats strong { display: block; font-size: 1.7rem; font-weight: 800; margin: 0.4rem 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.skpr-plan-stats strong small { font-size: 0.9rem; color: #7b90a0; font-weight: 600; }
.skpr-plan-stats p { color: #75899a; font-size: 0.68rem; }
.skpr-plan-stats .is-warning strong { color: #ac731d; }
.skpr-progress { height: 0.3rem; border-radius: 1rem; overflow: hidden; background: #e9eff5; margin-top: 0.6rem; }
.skpr-progress > span { display: block; height: 100%; background: #1b82df; border-radius: inherit; }
.skpr-alert { border: 1px solid #eedbbd; background: #fff8ed; color: #8b6325; padding: 1rem 1.2rem; border-radius: 0.85rem; font-size: 0.83rem; line-height: 1.65; }
.skpr-alert .skpr-text-link { display: flex; width: fit-content; }
.skpr-alert--error { border-color: #f1caca; background: #fff3f3; color: #a54040; }
.skpr-planner-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; gap: 1.2rem; }
.skpr-roster { background: #fff; border: 1px solid var(--skpr-line); border-radius: 1rem; overflow: hidden; }
.skpr-roster-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.skpr-roster-toolbar p { font-size: 0.76rem; color: #75899c; margin-top: 0.3rem; }
.skpr-planning-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.skpr-planning-table th { text-align: left; }
.skpr-planning-table thead th { background: #f1f6fb; border-block: 1px solid #e3eaf1; color: #496c8b; padding: 0.8rem 1rem; font-size: 0.73rem; font-weight: 700; }
.skpr-planning-table thead th:first-child { width: 23%; }
.skpr-planning-table thead th span { display: block; margin-top: 0.15rem; font-size: 0.66rem; font-weight: 550; color: #8394a4; }
.skpr-planning-table tbody th, .skpr-planning-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid #edf1f5; vertical-align: middle; }
.skpr-planning-table tr:last-child > * { border-bottom: 0; }
.skpr-planning-table tbody tr.is-weekend { background: #f7f9fc; }
.skpr-planning-table tbody tr.is-today { background: #eef7ff; }
.skpr-roster-date { display: flex; flex-direction: column; gap: 0.15rem; }
.skpr-roster-date strong { font-size: 0.91rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.skpr-roster-date > span { color: #75899a; font-size: 0.68rem; font-weight: 500; }
.skpr-shift-select { appearance: auto; width: 100%; min-height: 2.8rem; border: 1px solid #d5e1ed; border-radius: 0.55rem; background: #fff; color: #274b6c; font-family: inherit; font-size: 0.79rem; font-weight: 600; padding: 0.55rem 0.4rem 0.55rem 0.65rem; cursor: pointer; }
.skpr-shift-select.is-empty { background: #fff1f1; border-color: #e8b1b1; color: #a63d43; font-weight: 500; }
.skpr-shift-select.is-empty.has-candidates { background: #fff6e7; border-color: #ecc58b; color: #8c5616; }
.skpr-shift-select.is-invalid { background: #fff1f1; border-color: #e8a8a8; color: #a74949; }
.skpr-mobile-slot { display: none; }
.skpr-workload { display: grid; gap: 1rem; position: sticky; top: 5.5rem; }
.skpr-workload .skpr-card { padding: 1.2rem; }
.skpr-workload-list { display: grid; gap: 1.3rem; margin-top: 1.2rem; }
.skpr-workload-person > div:first-child { display: flex; align-items: start; gap: 1rem; justify-content: space-between; }
.skpr-workload-person strong { font-size: 0.8rem; overflow-wrap: anywhere; }
.skpr-workload-person b { flex-shrink: 0; font-size: 0.8rem; color: #2776b9; font-variant-numeric: tabular-nums; }
.skpr-workload-person > span { display: block; font-size: 0.64rem; color: #8193a3; margin-top: 0.35rem; }
.skpr-planning-help { padding: 0.3rem 0.6rem; color: #6a8093; }
.skpr-planning-help ol { margin: 0.8rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.65rem; font-size: 0.74rem; line-height: 1.6; list-style: decimal; }
.skpr-save-bar { position: sticky; bottom: 0.75rem; z-index: 10; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem 1.2rem; padding: 1rem 1.25rem; border: 1px solid #d4e3f0; background: rgb(255 255 255 / 97%); border-radius: 1rem; box-shadow: 0 0.5rem 2.5rem rgb(21 51 77 / 12%); }
.skpr-save-bar > div:first-child { display: grid; gap: 0.25rem; }
.skpr-save-bar strong { font-size: 0.78rem; }
.skpr-save-bar > div:first-child > span { color: #6f879c; font-size: 0.67rem; }
.skpr-save-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.skpr-reload { display: flex; justify-content: flex-end; }

@media (max-width: 90rem) {
    .skpr-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skpr-info-grid > :last-child { grid-column: 1 / -1; }
    .skpr-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
    .skpr-planner-layout { grid-template-columns: minmax(0, 1fr) 15rem; }
}
@media (max-width: 75rem) {
    .skpr-planner-layout { grid-template-columns: minmax(0, 1fr); }
    .skpr-workload { position: static; order: -1; }
    .skpr-workload-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
    .skpr-planning-help { display: none; }
}
@media (max-width: 60rem) {
    .skpr-info-grid { grid-template-columns: minmax(0, 1fr); }
    .skpr-faq { grid-template-columns: minmax(0, 1fr); }
    .skpr-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skpr-card { padding: 1.25rem; }
    .skpr-day-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skpr-duty + .skpr-duty { border-top: 0; border-left: 1px solid #e6edf3; }
    .skpr-duty { min-height: 8.5rem; }
    .skpr-day > header { display: flex; align-items: center; gap: 0.6rem; }
    .skpr-today-label { position: static; margin-left: auto; }
}
@media (max-width: 42rem) {
    .skpr { gap: 1.1rem; }
    .skpr-week-grid { grid-template-columns: minmax(0, 1fr); }
    .skpr-plan-intro { padding: 1.2rem; }
    .skpr-plan-stats { gap: 0.45rem; }
    .skpr-plan-stats > div { padding: 0.8rem 0.6rem; }
    .skpr-plan-stats > div > span { font-size: 0.63rem; }
    .skpr-plan-stats strong { font-size: 1.45rem; }
    .skpr-plan-stats strong small { font-size: 0.7rem; }
    .skpr-plan-stats p { font-size: 0.58rem; line-height: 1.5; }
    .skpr-deadline { align-items: flex-start; font-size: 0.72rem; }
    .skpr-deadline svg { margin-top: 0.12rem; }
    .skpr-planning-table, .skpr-planning-table tbody { display: block; }
    .skpr-planning-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .skpr-planning-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.7rem; gap: 0.65rem; border-top: 1px solid #e7edf3; }
    .skpr-planning-table tbody th { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .skpr-planning-table tbody th, .skpr-planning-table td { padding: 0; border: 0; min-width: 0; }
    .skpr-roster-date { flex-direction: row; align-items: baseline; gap: 0.6rem; }
    .skpr-roster-date strong { font-size: 0.93rem; }
    .skpr-roster-date > span { font-size: 0.7rem; }
    .skpr-mobile-slot { display: block; margin-bottom: 0.3rem; color: #6b8297; font-size: 0.58rem; }
    .skpr-shift-select { font-size: 0.75rem; }
    .skpr-roster-toolbar { padding: 1rem; }
    .skpr-roster-toolbar > .fi-ac-btn-action { width: 100%; justify-content: center; }
    .skpr-save-bar { padding: 0.9rem; bottom: 0.4rem; }
    .skpr-save-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .skpr-save-actions > * { justify-content: center; font-size: 0.7rem; text-align: center; }
    .skpr-save-actions .fi-btn-label { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .skpr *, .skpr *::before, .skpr *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Reception coverage and six-month availability. */
.skpr-day.is-complete, .skpr-calendar-day.is-complete, .skpr-month-card.is-complete { background: #edf9f2; border-color: #a9d8bb; }
.skpr-day.is-partial, .skpr-calendar-day.is-partial, .skpr-month-card.is-partial { background: #fff6e7; border-color: #ecc58b; }
.skpr-day.is-incomplete, .skpr-calendar-day.is-incomplete, .skpr-month-card.is-incomplete { background: #fff3f2; border-color: #efbcb8; }
.skpr-day.is-complete > header { background: #dcf3e5; border-color: #b6ddc6; }
.skpr-day.is-partial > header { background: #ffebc9; border-color: #ebcd9d; }
.skpr-day.is-incomplete > header { background: #ffe6e3; border-color: #efc7c2; }
.skpr-day > header { padding-right: 3rem; min-height: 5rem; }
.skpr-day.is-today, .skpr-calendar-day.is-today { outline: 2px solid #0067d0; outline-offset: 2px; }
.skpr-coverage-icon { position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; }
.skpr-coverage-icon svg { width: 1.2rem; height: 1.2rem; stroke-width: 2.5; }
.is-complete .skpr-coverage-icon, .is-complete .skpr-month-status { color: #14683d; background: #c8ebd6; }
.is-partial .skpr-coverage-icon, .is-partial .skpr-month-status { color: #8c5616; background: #ffdda2; }
.is-incomplete .skpr-coverage-icon, .is-incomplete .skpr-month-status { color: #aa2f35; background: #ffd2cd; }
.skpr-day .skpr-today-label { top: auto; right: 3rem; bottom: 0.65rem; font-size: 0.6rem; }
.skpr .skpr-duty-name { font-size: 1.08rem; font-weight: 850; line-height: 1.35; color: #102b3d; letter-spacing: -0.02em; margin-top: 0.45rem; }
.skpr .skpr-unassigned { color: #b32f37; font-size: 0.88rem; font-weight: 750; }
.skpr .skpr-pending { color: #8e565b; }
/* The weekly calendar shares its sticky weekday header with the monthly view. */
.skpr-week-calendar { min-width: 0; }
.skpr-week .skpr-calendar-weekdays { display: none; }

/* Keep all seven days visible on laptops, with room for full names and status. */
@media (min-width: 60.001rem) {
    .skpr-week-grid, .skpr-week .skpr-calendar-weekdays { gap: clamp(0.35rem, 0.75vw, 0.65rem); }
    .skpr-week .skpr-calendar-weekdays { display: grid; }
    .skpr-week .skpr-calendar-heading { display: block; }
    .skpr-week-grid .skpr-day-weekday { display: none; }
    .skpr-week-grid .skpr-day { display: flex; flex-direction: column; }
    .skpr-week-grid .skpr-day > header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 1.6rem 0.8rem;
        align-content: center;
        align-items: center;
        gap: 0.2rem 0.25rem;
        min-height: 4rem;
        padding: 0.6rem clamp(0.4rem, 0.7vw, 0.8rem);
    }
    .skpr-week-grid .skpr-day > header > strong { grid-column: 1; grid-row: 1; font-size: 1.05rem; white-space: nowrap; }
    .skpr-week-grid .skpr-coverage-icon { position: static; grid-column: 2; grid-row: 1; transform: none; width: 1.4rem; height: 1.4rem; }
    .skpr-week-grid .skpr-coverage-icon svg { width: 1rem; height: 1rem; }
    .skpr-week-grid .skpr-today-label { position: static; grid-column: 1 / -1; grid-row: 2; margin: 0; line-height: 1; }
    .skpr-week-grid .skpr-day-slots { flex: 1; grid-auto-rows: 1fr; }
    .skpr-week-grid .skpr-duty { min-width: 0; padding: 0.85rem clamp(0.4rem, 0.7vw, 0.8rem); }
    .skpr-week-grid .skpr-duty-name { font-size: clamp(0.875rem, 1.2vw, 1.08rem); }
    .skpr-week-grid .skpr-duty-phone { max-width: 100%; overflow-wrap: anywhere; line-height: 1.45; }
}
.skpr-view-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.5rem; }
.skpr-coverage-legend { color: #61798d; font-size: 0.72rem; }
.skpr-interest-count { display: block; font-size: 0.68rem; color: #647b8e; line-height: 1.6; margin-top: 0.3rem; overflow-wrap: anywhere; }
.skpr-interest-names { color: #536d81; }
.skpr-month-overview { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1.2rem; }
.skpr-month-card { position: relative; display: flex; flex-direction: column; align-items: start; gap: 0.4rem; padding: 1rem 0.8rem; border: 1px solid; border-radius: 0.8rem; text-align: left; cursor: pointer; min-width: 0; }
.skpr-month-card strong { font-size: 0.9rem; text-transform: capitalize; margin-top: 0.5rem; }
.skpr-month-card > span:not(.skpr-month-status) { font-size: 0.76rem; font-weight: 650; }
.skpr-month-card small { font-size: 0.65rem; color: #637b8c; }
.skpr-month-card.is-selected { outline: 2px solid #0067d0; outline-offset: 2px; }
.skpr-month-status { display: inline-grid; place-items: center; font-size: 1.15rem; font-weight: 850; border-radius: 50%; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; line-height: 1; }
.skpr-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.65rem; }
.skpr-month-calendar { min-width: 0; }
.skpr-calendar-weekdays {
    position: sticky;
    top: var(--topbar-height, 4.75rem);
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.65rem;
    padding-block: 0.3rem;
    margin-bottom: 0.65rem;
    background: #f6f8fb;
    border-bottom: 1px solid var(--skpr-line);
    box-shadow: 0 4px 8px rgb(16 38 57 / 5%);
}
.skpr-calendar-heading { font-size: 0.75rem; color: #61798d; font-weight: 700; text-align: center; padding: 0.5rem; }
.skpr-calendar-day { border: 1px solid; border-radius: 0.85rem; overflow: hidden; min-width: 0; }
.skpr-calendar-day > header { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem; border-bottom: 1px solid rgb(25 55 69 / 9%); }
.skpr-calendar-day > header > strong { font-size: 0.9rem; }
.skpr-calendar-day .skpr-month-status { margin-left: auto; }
.skpr-calendar-weekday { display: none; font-size: 0.68rem; color: #63798b; }
.skpr-calendar-duty { display: grid; gap: 0.35rem; padding: 0.8rem 0.7rem; min-height: 5.5rem; }
.skpr-duty.is-covered, .skpr-calendar-duty.is-covered { background: #e0f3e7; }
.skpr-duty.is-covered .skpr-duty-name, .skpr-calendar-duty.is-covered > strong { color: #175536; }
.skpr-calendar-duty + .skpr-calendar-duty { border-top: 1px solid rgb(25 55 69 / 9%); }
.skpr-calendar-duty > span { font-size: 0.63rem; color: #607a8d; font-weight: 650; }
.skpr-calendar-duty > strong { font-size: 0.93rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.skpr-calendar-duty small { color: #ae3138; font-size: 0.65rem; }
.skpr-availability-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.skpr-availability-tools label { font-size: 0.8rem; color: #61798d; }
.skpr-availability-tools select { width: auto; min-width: 10rem; }
.skpr-availability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.skpr-availability-day { background: #fff; border: 1px solid #dce6ef; border-radius: 0.9rem; min-width: 0; overflow: hidden; }
.skpr-availability-day > header { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.85rem 1rem; background: #f0f6fc; }
.skpr-availability-day.is-weekend > header { background: #e5edf7; }
.skpr-availability-day > header > span { color: #647d91; font-size: 0.75rem; }
.skpr-availability-duty { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; }
.skpr-availability-duty + .skpr-availability-duty { border-top: 1px solid #e4edf4; }
.skpr-availability-duty > span:first-child { font-size: 0.72rem; color: #527791; font-weight: 650; }
.skpr-availability-duty small { color: #698296; font-size: 0.68rem; }
.skpr-interest-button { width: 100%; min-height: 2.8rem; padding: 0.65rem 0.75rem; border: 1px solid #bad0e7; border-radius: 0.6rem; color: #1768ac; background: #f4f9ff; font-size: 0.8rem; font-weight: 750; cursor: pointer; }
.skpr-interest-button:hover { background: #e7f2ff; }
.skpr-interest-button.is-chosen { background: #0067d0; border-color: #0067d0; color: #fff; }
.skpr-confirmed-person { font-size: 0.95rem; line-height: 1.4; color: #19643e; }
@media (max-width: 90rem) { .skpr-month-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 75rem) {
    .skpr-month-grid, .skpr-availability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .skpr-calendar-weekdays, .skpr-calendar-heading, .skpr-calendar-blank { display: none; }
    .skpr-calendar-weekday { display: inline; }
}
@media (max-width: 52rem) {
    .skpr-month-grid, .skpr-availability-grid, .skpr-month-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skpr .skpr-duty-name { font-size: 1.05rem; }
}
@media (max-width: 32rem) {
    .skpr-availability-grid { grid-template-columns: minmax(0, 1fr); }
    .skpr-availability-day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skpr-availability-day > header { grid-column: 1 / -1; }
    .skpr-availability-duty { padding: 0.8rem 0.65rem; }
    .skpr-availability-duty + .skpr-availability-duty { border-top: 0; border-left: 1px solid #e4edf4; }
    .skpr-interest-button { font-size: 0.71rem; padding-inline: 0.4rem; }
}

/* A single reception workspace, with a separate place for each task. */
.skpr-subnav { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.45rem; background: #fff; border: 1px solid var(--skpr-line); border-radius: 0.95rem; }
.skpr-subnav a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.8rem; padding: 0.6rem 1rem; color: #536a7d; text-decoration: none; border-radius: 0.65rem; font-size: 0.82rem; font-weight: 650; }
.skpr-subnav a svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.skpr-subnav a:hover { background: #f3f7fb; }
.skpr-subnav a.is-active { color: #005eb9; background: #eaf4ff; font-weight: 800; }
.skpr-view-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.skpr-segmented { display: inline-flex; flex-wrap: wrap; padding: 0.25rem; gap: 0.2rem; border: 1px solid #e0e8f0; border-radius: 0.75rem; background: #eef3f8; }
.skpr-segmented button { min-height: 2.6rem; padding: 0.5rem 1rem; border: 0; border-radius: 0.55rem; color: #576f83; background: transparent; font-size: 0.81rem; font-weight: 700; cursor: pointer; }
.skpr-segmented button.is-active { color: #064b89; background: #fff; box-shadow: 0 2px 6px rgb(24 55 84 / 8%); }
.skpr-status-key { display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; font-size: 0.72rem; font-weight: 650; }
.skpr-status-key .is-complete { color: #247247; }
.skpr-status-key > span { white-space: nowrap; }
.skpr-status-key .is-partial { color: #956017; }
.skpr-status-key .is-incomplete { color: #ac4248; }
.skpr-schedule .skpr-week { padding-top: 0; }
.skpr-schedule .skpr-duty { min-height: 7.6rem; }
.skpr-month-overview--large { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.skpr-month-overview--large .skpr-month-card { padding: 1.4rem; gap: 0.7rem; }
.skpr-month-overview--large .skpr-month-status { position: absolute; top: 1.35rem; right: 1.3rem; }
.skpr-month-overview--large strong { font-size: 1.17rem; padding-right: 2rem; margin-top: 0; }
.skpr-month-overview--large .skpr-progress { width: 100%; margin: 0.15rem 0; background: rgb(35 70 82 / 9%); }
.skpr-month-overview--large .skpr-progress > span { background: #479367; }
.skpr-help-line { display: flex; gap: 0.65rem; align-items: start; color: #536d83; font-size: 0.83rem; line-height: 1.6; }
.skpr-help-line svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: 0.13rem; color: #347bb6; }
.skpr-availability-calendar .skpr-availability-day > header { padding: 0.75rem; }
.skpr-availability-calendar .skpr-availability-duty { padding: 0.75rem 0.6rem; min-height: 8.1rem; align-content: start; }
.skpr-availability-calendar .skpr-interest-button { padding: 0.6rem 0.3rem; font-size: 0.75rem; }
.skpr-availability-calendar .is-elapsed { background: #f5f7f9; }
.skpr-availability-calendar .is-elapsed > header { background: #edf1f5; }
.skpr-availability-duty.is-confirmed { background: #f0f9f3; }
.skpr-availability-calendar .skpr-confirmed-person { font-size: 0.82rem; overflow-wrap: anywhere; }
.skpr-personal-summary { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1rem; }
.skpr-next-shift { display: flex; align-items: center; gap: 1.25rem; min-width: 0; padding: 1.7rem; border: 1px solid #b9d4ef; border-radius: 1.1rem; background: linear-gradient(110deg, #eef7ff, #fff); }
.skpr-next-icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; background: #dceeff; color: #0064c4; border-radius: 0.9rem; flex: 0 0 auto; }
.skpr-next-icon svg { width: 1.8rem; height: 1.8rem; }
.skpr-next-shift h2 { font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.25; }
.skpr-next-time { font-size: 1.15rem; font-weight: 800; color: #145a96; margin-top: 0.65rem !important; font-variant-numeric: tabular-nums; }
.skpr-next-time span { font-size: 0.82rem; font-weight: 550; color: #60778b; }
.skpr-personal-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.skpr-personal-counts button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid var(--skpr-line); border-radius: 1rem; background: #fff; cursor: pointer; padding: 1rem 0.65rem; }
.skpr-personal-counts button:hover { border-color: #91b9df; }
.skpr-personal-counts strong { font-size: 2.2rem; color: #163b59; font-weight: 800; }
.skpr-personal-counts span { font-size: 0.76rem; color: #677e91; }
.skpr-personal-month { display: grid; gap: 0.85rem; }
.skpr-personal-month > .skpr-section-heading > h2, .skpr-period-title { text-transform: capitalize; }
.skpr-personal-list { background: #fff; border: 1px solid var(--skpr-line); border-radius: 1rem; overflow: hidden; }
.skpr-personal-week { padding: 0.7rem 1.3rem; color: #637d91; background: #f5f8fb; font-size: 0.73rem !important; font-weight: 650 !important; border-bottom: 1px solid #e8eef4; }
.skpr-personal-row { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: 1.15rem 1.3rem; }
.skpr-personal-row + .skpr-personal-row { border-top: 1px solid #edf1f5; }
.skpr-personal-row.is-today { background: #f0f8ff; }
.skpr-date-tile { display: grid; place-items: center; gap: 0.05rem; padding: 0.4rem; border-radius: 0.65rem; color: #24649a; background: #eaf4fd; }
.skpr-date-tile strong { font-size: 1.3rem; font-weight: 850; line-height: 1.2; }
.skpr-date-tile span { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.05em; }
.skpr-personal-date, .skpr-personal-time { display: grid; gap: 0.25rem; }
.skpr-personal-date strong { font-size: 0.95rem; font-weight: 750; }
.skpr-personal-time strong { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.skpr-personal-date span, .skpr-personal-time span { font-size: 0.75rem; color: #6c8395; }
.skpr-personal-badge { color: #287049; background: #eaf7ef; border-radius: 2rem; padding: 0.4rem 0.7rem; font-size: 0.7rem; font-weight: 700; }
.skpr-empty-state { display: grid; justify-items: center; gap: 0.85rem; padding: 2.5rem 1.5rem; text-align: center; }
.skpr-empty-state > svg { width: 2.2rem; height: 2.2rem; color: #7996b0; }
.skpr-empty-state p { max-width: 38rem; color: #657e92; font-size: 0.85rem; line-height: 1.7; }
@media (max-width: 75rem) {
    .skpr-month-overview--large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skpr-personal-summary { grid-template-columns: minmax(0, 1fr); }
    .skpr-personal-counts button { flex-direction: row; justify-content: start; padding: 0.85rem 1.2rem; gap: 0.8rem; }
    .skpr-personal-counts strong { font-size: 1.5rem; }
}
@media (max-width: 42rem) {
    .skpr-subnav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; }
    .skpr-subnav a { padding: 0.6rem; font-size: 0.73rem; gap: 0.4rem; }
    .skpr-subnav a svg { width: 1rem; height: 1rem; }
    .skpr-subnav a:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .skpr-segmented button { font-size: 0.76rem; padding-inline: 0.75rem; }
    .skpr-status-key { font-size: 0.68rem; }
    .skpr-month-overview--large { grid-template-columns: minmax(0, 1fr); }
    .skpr-month-overview--large .skpr-month-card { padding: 1.15rem; }
    .skpr-availability-calendar { grid-template-columns: minmax(0, 1fr); }
    .skpr-availability-calendar .skpr-availability-day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skpr-availability-calendar .skpr-availability-day > header { grid-column: 1 / -1; }
    .skpr-availability-calendar .skpr-availability-duty { min-height: 7.6rem; }
    .skpr-availability-calendar .skpr-availability-duty + .skpr-availability-duty { border-top: 0; border-left: 1px solid #e4edf4; }
    .skpr-next-shift { gap: 0.8rem; padding: 1.2rem; align-items: start; }
    .skpr-next-icon { width: 2.6rem; height: 2.6rem; }
    .skpr-next-icon svg { width: 1.4rem; height: 1.4rem; }
    .skpr-next-time span { display: block; margin-top: 0.4rem; }
    .skpr-personal-row { grid-template-columns: 2.8rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.65rem; padding: 1rem; }
    .skpr-personal-time strong { font-size: 0.9rem; }
    .skpr-personal-date strong { font-size: 0.83rem; }
    .skpr-personal-badge { grid-column: 2 / -1; justify-self: start; }
    .skpr-personal-week { padding-inline: 1rem; }
}

/* Monthly signup window: keep later months visible with a clear opening date. */
.skpr-change-shift { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.65rem; min-height: 2.25rem; padding: 0.35rem 0.55rem; border: 1px solid #c9dff2; border-radius: 0.5rem; background: #f0f7ff; color: #0066b8; font-size: 0.72rem; font-weight: 700; line-height: 1.35; cursor: pointer; }
.skpr-change-shift:hover { background: #e0efff; border-color: #80b5e3; }
.skpr-change-shift:focus-visible { outline: 2px solid #0066b8; outline-offset: 3px; }
.skpr-change-shift:disabled { opacity: 0.55; cursor: wait; }
.skpr-change-shift svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* Requests are visible before the ordinary dashboard content. */
.skpr-transfer-panel { margin-bottom: 1.5rem; padding: 1.5rem; border: 1px solid #d6e4f0; border-radius: 1rem; background: #fff; color: #153346; scroll-margin-top: 6rem; }
.skpr-transfer-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.skpr-transfer-heading h2 { margin: 0.2rem 0 0; font-size: 1.35rem; font-weight: 750; }
.skpr-transfer-count, .skpr-transfer-status { display: inline-flex; border-radius: 2rem; padding: 0.3rem 0.65rem; background: #fff5df; color: #885600; font-size: 0.75rem; font-weight: 700; }
.skpr-transfer-intro { margin: 0.65rem 0 1.15rem; color: #62798c; font-size: 0.875rem; line-height: 1.6; }
.skpr .skpr-transfer-intro { margin: 0.65rem 0 1.15rem; }
.skpr-transfer-requests { display: grid; gap: 0.8rem; }
.skpr-transfer-request { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; border: 1px solid #ecdfbd; border-left: 3px solid #dcaa45; border-radius: 0.7rem; padding: 1rem 1.15rem; background: #fffdf8; }
.skpr-transfer-details { min-width: 0; }
.skpr-transfer-details h3 { margin: 0.65rem 0 0.25rem; font-size: 1rem; font-weight: 750; }
.skpr-transfer-details p { margin: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.skpr-transfer-details small { display: block; margin-top: 0.45rem; color: #657b8e; font-size: 0.75rem; }
.skpr-transfer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; }
.skpr-transfer-accept, .skpr-transfer-secondary { min-height: 2.6rem; padding: 0.55rem 0.85rem; border: 1px solid transparent; border-radius: 0.6rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.skpr-transfer-accept { background: #0067d0; color: #fff; }
.skpr-transfer-accept:hover { background: #0053aa; }
.skpr-transfer-secondary { border-color: #d2deea; background: #fff; color: #355167; }
.skpr-transfer-secondary:hover { background: #edf4fa; }
.skpr-transfer-actions button:focus-visible { outline: 2px solid #0067d0; outline-offset: 3px; }
.skpr-transfer-actions button:disabled { opacity: 0.55; cursor: wait; }
.skpr-transfer-waiting { max-width: 15rem; color: #73541c; font-size: 0.85rem; }
.skpr-transfer-empty { padding: 0.8rem 0; margin: 0; color: #657b8e; font-size: 0.875rem; }
.skpr-transfer-history { margin-top: 1.4rem; border-top: 1px solid #e7edf3; padding-top: 1rem; }
.skpr-transfer-history > h3 { font-size: 0.95rem; font-weight: 750; margin: 0 0 0.5rem; }
.skpr-transfer-history-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.75rem 0; font-size: 0.82rem; }
.skpr-transfer-history-row + .skpr-transfer-history-row { border-top: 1px solid #eef2f6; }
.skpr-transfer-history-row > svg { width: 1.25rem; height: 1.25rem; color: #238652; }
.skpr-transfer-history-row p { margin: 0.2rem 0 0; color: #567085; overflow-wrap: anywhere; }
.skpr-transfer-history-row > span { text-align: right; color: #567085; font-size: 0.75rem; }
.skpr-transfer-history-row small { display: block; margin-top: 0.25rem; }
.skpr-personal-actions { display: grid; justify-items: end; gap: 0.3rem; max-width: 15rem; }
.skpr-personal-actions .skpr-change-shift { margin-top: 0.2rem; }
.skpr-transfer-pending-label { color: #885600; font-size: 0.75rem; text-align: right; }
@media (max-width: 767px) {
    .skpr-transfer-panel { padding: 1rem; }
    .skpr-transfer-heading { align-items: flex-start; flex-wrap: wrap; gap: 0.6rem; }
    .skpr-transfer-request { align-items: stretch; flex-direction: column; padding: 0.9rem; }
    .skpr-transfer-actions { justify-content: flex-start; }
    .skpr-transfer-history-row { grid-template-columns: 1.25rem minmax(0, 1fr); }
    .skpr-transfer-history-row > span { grid-column: 2; text-align: left; }
    .skpr-personal-actions { grid-column: 2 / -1; max-width: none; justify-self: stretch; justify-items: start; }
    .skpr-transfer-pending-label { text-align: left; }
}
.skpr-signup-locked { display: flex; align-items: start; gap: 0.8rem; padding: 1rem 1.2rem; border: 1px solid #d8e2ed; border-radius: 0.85rem; background: #edf3f9; color: #3f566d; }
.skpr-signup-locked > svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-top: 0.1rem; }
.skpr-signup-locked strong { font-size: 0.9rem; line-height: 1.5; }
.skpr-signup-locked p { margin-top: 0.25rem; color: #5b7186; font-size: 0.78rem; line-height: 1.55; }
.skpr-availability-day.is-locked > header { background: #eaf0f6; }
.skpr-availability-day.is-locked .skpr-availability-duty:not(.is-confirmed) { background: #f7f9fc; }
.skpr-interest-button--locked, .skpr-interest-button--locked:hover { display: flex; justify-content: center; align-items: center; gap: 0.4rem; color: #61758a; background: #edf2f7; border-color: #d5dfe9; cursor: not-allowed; }
.skpr-interest-button--locked svg { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; }

/* Monthly reception signup: visible deadline before, during and after the window. */
.skpr-signup-reminder{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;border:1px solid #cfdfec;border-radius:1.1rem;background:#eff6ff;color:#183448;margin-bottom:1.5rem}
.skpr-signup-reminder__icon{display:grid;place-items:center;flex:0 0 3rem;height:3rem;border-radius:.85rem;background:#dcecff;color:#0067d0}
.skpr-signup-reminder__icon svg{width:1.6rem;height:1.6rem}
.skpr-signup-reminder__content{flex:1;min-width:0}
.skpr-signup-reminder h2{font-size:1.3rem;font-weight:800;line-height:1.3;margin:.25rem 0 .65rem}
.skpr-signup-reminder p{line-height:1.6;margin:0 0 .35rem}
.skpr-signup-reminder small{display:block;font-size:.8rem;line-height:1.5;opacity:.85;margin-top:.6rem}
.skpr-signup-reminder__actions{display:flex;flex-direction:column;align-items:center;gap:.8rem;flex-shrink:0;font-weight:700;font-size:.875rem}
.skpr-signup-reminder__button{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.8rem 1.1rem;background:#0067d0;color:#fff;border-radius:.75rem;text-decoration:none}
.skpr-signup-reminder__button:hover{background:#0057b1}
.skpr-signup-reminder__button:focus-visible{outline:3px solid #80bfff;outline-offset:3px}
.skpr-signup-reminder--open{background:#07569e;border-color:#07569e;color:#fff;box-shadow:0 8px 24px #0067d01a}
.skpr-signup-reminder--open .skpr-eyebrow{color:#dceeff}
.skpr-signup-reminder--open .skpr-signup-reminder__icon{background:#ffffff1f;color:#fff}
.skpr-signup-reminder--open .skpr-signup-reminder__button{background:#d5f68a;color:#173b2c}
.skpr-signup-reminder--open .skpr-signup-reminder__button:hover{background:#e3ffac}
.skpr-signup-reminder--closed{background:#f7f9fc}
@media(max-width:900px){.skpr-signup-reminder{flex-wrap:wrap;align-items:flex-start}.skpr-signup-reminder__actions{width:100%;align-items:stretch}.skpr-signup-reminder__content{flex-basis:calc(100% - 4.25rem)}}
@media(max-width:480px){.skpr-signup-reminder{padding:1rem;gap:.8rem}.skpr-signup-reminder__icon{flex-basis:2.4rem;height:2.4rem}.skpr-signup-reminder h2{font-size:1.15rem}}