/* Decorations remain in normal flow. Color and movement never convey required application state. */
.festive-ribbon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem auto;
    padding: 0 1rem;
    max-width: 90rem;
}
.festive-element {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: 45%;
    font-size: 0.85rem;
}
.festive-left {
    margin-right: auto;
}
.festive-right {
    margin-left: auto;
}
.festive-element > img {
    width: 3.5rem;
    height: 3.5rem;
}
.festive-art {
    position: relative;
    max-width: 12rem;
}
.festive-art summary {
    cursor: pointer;
}
.festive-art summary img {
    display: block;
    width: 8rem;
    height: 8rem;
    object-fit: contain;
}
.festive-credit {
    padding: 0.5rem;
    border: 1px solid currentColor;
    background: #fff;
    color: #172b3a;
    font-size: 0.85rem;
}
.festive-art:not([open]) > .festive-credit {
    display: none;
}
.festive-art summary:focus-visible {
    outline: 3px solid #075a9e;
    outline-offset: 3px;
}
.festive-additional {
    flex-basis: 100%;
    font-size: 0.85rem;
}
.theme-preview-banner {
    padding: 0.75rem 1rem;
    background: #fff4cf;
    color: #312300;
    border: 2px solid #765700;
}
.theme-preview-banner form {
    display: inline-block;
    margin: 0 0.5rem;
}
.theme-image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.theme-image-preview p {
    flex-basis: 100%;
}
.theme-preview-light,
.theme-preview-dark {
    width: 10rem;
    min-height: 10rem;
    border: 1px solid #667;
}
.theme-preview-light {
    background: #fff;
}
.theme-preview-dark {
    background: #172b3a;
}
.theme-image-preview img {
    width: 100%;
    height: 10rem;
    object-fit: contain;
}
.theme-art-list img {
    object-fit: contain;
}
.network-game {
    max-width: 36rem;
    text-align: left;
    margin: 1rem auto;
    padding: 0.75rem;
    border: 1px solid #526675;
    border-radius: 0.5rem;
    background: #fff;
    color: #172b3a;
}
.network-game > summary {
    cursor: pointer;
}
.network-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 19rem);
    gap: 0.3rem;
    margin: 1rem auto;
}
.network-grid button {
    position: relative;
    padding: 0;
    aspect-ratio: 1;
    background: #e7f2fa;
    color: #103d5d;
    border: 2px solid #103d5d;
    border-radius: 0.3rem;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}
.network-grid button:focus-visible {
    outline: 4px solid #875300;
    outline-offset: 2px;
}
.network-grid button svg {
    width: 100%;
    height: 100%;
    display: block;
}
.network-grid path {
    stroke: currentColor;
    stroke-width: 10;
    fill: none;
}
.network-grid button:disabled {
    opacity: 1;
    color: #18552d;
    background: #e7f5e9;
    cursor: default;
}
.network-cell-number {
    position: absolute;
    bottom: 0.1rem;
    right: 0.2rem;
    font-size: 0.65rem;
    background: #fff;
    color: #172b3a;
}
.network-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.strategy-birthday {
    display: block;
    font-size: 0.7rem;
    margin-top: 0.3rem;
}
@media (max-width: 600px) {
    .festive-ribbon {
        gap: 0.4rem;
        padding: 0 0.5rem;
    }
    .festive-element {
        font-size: 0.75rem;
        max-width: 48%;
        gap: 0.25rem;
    }
    .festive-art summary img {
        width: 4rem;
        height: 4rem;
    }
    .festive-element > img {
        width: 2rem;
        height: 2rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .festive-ribbon *,
    .network-game * {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .festive-ribbon,
    .theme-preview-banner,
    .network-game,
    .strategy-birthday {
        display: none !important;
    }
}

/* Larger, distinct celebration panels; application forms retain their neutral surfaces. */
.has-festive-theme {
    background: linear-gradient(180deg, var(--theme-surface) 0, #f4f7f9 34rem);
}
.has-festive-theme .site-header {
    background: var(--theme-ink);
    border-bottom-color: var(--theme-accent);
    background-image:
        radial-gradient(circle at 88% 20%, #ffffff16 0 3rem, transparent 3.1rem),
        radial-gradient(circle at 82% 90%, #ffffff0c 0 5rem, transparent 5.1rem);
}
.has-festive-theme .site-sidebar > .site-navigation {
    background-color: var(--theme-surface);
}
.festive-ribbon {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 0 1rem;
    margin: 1rem auto;
    max-width: 100rem;
}
.festive-ribbon.festive-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.festive-element {
    position: relative;
    display: grid;
    grid-template-columns: clamp(7rem, 13vw, 11rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.7rem, 2vw, 1.6rem);
    max-width: none;
    margin: 0;
    padding: 0.75rem clamp(0.75rem, 2vw, 1.5rem);
    color: var(--theme-ink);
    background: linear-gradient(120deg, #ffffffcc, transparent 70%), var(--theme-surface);
    border: 1px solid var(--theme-accent);
    border-radius: 1.2rem;
    box-shadow: 0 0.35rem 1.2rem #17364a0b;
}
.festive-right {
    grid-template-columns: minmax(0, 1fr) clamp(7rem, 13vw, 11rem);
}
.festive-right .festive-visual {
    order: 2;
}
.festive-right .festive-copy {
    order: 1;
}
.festive-visual {
    min-width: 0;
}
.festive-illustration {
    display: block;
    width: 100%;
    height: auto;
    max-height: 10rem;
    object-fit: contain;
}
.festive-occasion {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.festive-greeting {
    margin: 0;
    font-size: clamp(1.05rem, 1.8vw, 1.65rem);
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.festive-note {
    font-size: 0.8rem;
    margin: 0.6rem 0 0;
}
.festive-additional {
    grid-column: 1/-1;
    margin: 0;
    color: #334e61;
}
.festive-art {
    max-width: 100%;
}
.festive-art summary img {
    width: 100%;
    height: auto;
    max-height: 10rem;
    object-fit: contain;
}
.festive-art summary span {
    font-size: 0.75rem;
}
.festive-credit {
    overflow-wrap: anywhere;
}
.has-festive-theme .network-game {
    border-top: 4px solid var(--theme-accent);
}
.has-festive-theme .network-grid button:not(:disabled) {
    color: var(--theme-ink);
    background: var(--theme-surface);
}
.theme-preview-note {
    font-size: 0.9rem;
    max-width: 80ch;
}
.theme-message-form {
    margin: 1rem 0;
}
.calendar-maintenance-note {
    border-left: 4px solid #627f9b;
    padding-left: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
    .festive-element:not(.festive-respectful) .festive-illustration {
        animation: festive-arrive 4s ease-out 1;
    }
    @keyframes festive-arrive {
        0% {
            transform: translateY(4px);
        }
        40% {
            transform: translateY(-2px);
        }
        100% {
            transform: translateY(0);
        }
    }
}
@media (max-width: 700px) {
    .festive-ribbon,
    .festive-ribbon.festive-pair {
        gap: 0.65rem;
        padding: 0 0.6rem;
    }
    .festive-element,
    .festive-right {
        grid-template-columns: 4.3rem minmax(0, 1fr);
        padding: 0.65rem;
        gap: 0.65rem;
        border-radius: 0.8rem;
    }
    .festive-ribbon.festive-pair {
        grid-template-columns: minmax(0, 1fr);
    }
    .festive-right .festive-visual {
        order: 0;
    }
    .festive-right .festive-copy {
        order: 1;
    }
    .festive-greeting {
        font-size: 1.05rem;
    }
    .festive-occasion {
        font-size: 0.75rem;
    }
    .festive-art summary img {
        width: 100%;
        height: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .festive-illustration {
        animation: none !important;
        transform: none !important;
    }
}
@media print {
    .festive-ribbon {
        display: none !important;
    }
    .has-festive-theme {
        background: #fff;
    }
}

/* Per-celebration palette keys are trusted source constants, never uploaded CSS. */
.theme-new-years-eve {
    --theme-ink: #372763;
    --theme-surface: #f4edff;
    --theme-accent: #cf9f36;
}
.theme-new-years-day {
    --theme-ink: #174e58;
    --theme-surface: #e9f9f7;
    --theme-accent: #c58c27;
}
.theme-mlk-day {
    --theme-ink: #293d66;
    --theme-surface: #eef2fa;
    --theme-accent: #b58b3b;
}
.theme-presidents-day {
    --theme-ink: #25476a;
    --theme-surface: #edf3fa;
    --theme-accent: #ad3348;
}
.theme-valentines {
    --theme-ink: #8b284e;
    --theme-surface: #fff0f5;
    --theme-accent: #c13e6a;
}
.theme-pi-day {
    --theme-ink: #5b3484;
    --theme-surface: #f4effc;
    --theme-accent: #d19929;
}
.theme-teacher-appreciation {
    --theme-ink: #28624b;
    --theme-surface: #ecf8ef;
    --theme-accent: #c9653c;
}
.theme-memorial-day {
    --theme-ink: #733044;
    --theme-surface: #fcf0f2;
    --theme-accent: #b73147;
}
.theme-juneteenth {
    --theme-ink: #23573a;
    --theme-surface: #f1f7ec;
    --theme-accent: #ad2d39;
}
.theme-independence-day {
    --theme-ink: #204b75;
    --theme-surface: #edf4fc;
    --theme-accent: #b9344c;
}
.theme-back-to-school {
    --theme-ink: #245d74;
    --theme-surface: #edf8fb;
    --theme-accent: #c18525;
}
.theme-labor-day {
    --theme-ink: #39536b;
    --theme-surface: #eff5fa;
    --theme-accent: #bd7132;
}
.theme-indigenous-peoples-day {
    --theme-ink: #365b4c;
    --theme-surface: #f0f5ed;
    --theme-accent: #a46b36;
}
.theme-halloween {
    --theme-ink: #57316f;
    --theme-surface: #fbf0e4;
    --theme-accent: #c26417;
}
.theme-veterans-day {
    --theme-ink: #294d71;
    --theme-surface: #eef4fa;
    --theme-accent: #aa7330;
}
.theme-thanksgiving {
    --theme-ink: #794526;
    --theme-surface: #fff3e4;
    --theme-accent: #a55131;
}
.theme-native-american-heritage-day {
    --theme-ink: #405c55;
    --theme-surface: #f1f6ee;
    --theme-accent: #a16d36;
}
.theme-cs-education {
    --theme-ink: #254e7c;
    --theme-surface: #edf5ff;
    --theme-accent: #6446a2;
}
.theme-lunar-new-year {
    --theme-ink: #8c3037;
    --theme-surface: #fff0e7;
    --theme-accent: #b58421;
}
.theme-christmas-eve {
    --theme-ink: #245541;
    --theme-surface: #eff7ef;
    --theme-accent: #b23e49;
}
.theme-christmas {
    --theme-ink: #245541;
    --theme-surface: #eff7ef;
    --theme-accent: #b23e49;
}
.theme-good-friday {
    --theme-ink: #554866;
    --theme-surface: #f4f1f7;
    --theme-accent: #a18a58;
}
.theme-easter {
    --theme-ink: #61417e;
    --theme-surface: #f7effb;
    --theme-accent: #8e6a27;
}
.theme-hanukkah {
    --theme-ink: #214e83;
    --theme-surface: #edf4ff;
    --theme-accent: #b78b2e;
}
.theme-rosh-hashanah {
    --theme-ink: #79522a;
    --theme-surface: #fff7e8;
    --theme-accent: #af6443;
}
.theme-passover {
    --theme-ink: #365c71;
    --theme-surface: #f1f6fa;
    --theme-accent: #a48a49;
}
.theme-yom-kippur {
    --theme-ink: #4f5667;
    --theme-surface: #f5f5f8;
    --theme-accent: #9a895b;
}
.theme-ramadan {
    --theme-ink: #315d65;
    --theme-surface: #eef8f8;
    --theme-accent: #aa8535;
}
.theme-eid-al-fitr {
    --theme-ink: #265c59;
    --theme-surface: #eaf8f4;
    --theme-accent: #b18725;
}
.theme-eid-al-adha {
    --theme-ink: #554273;
    --theme-surface: #f5effc;
    --theme-accent: #ae8533;
}
.theme-diwali {
    --theme-ink: #73356d;
    --theme-surface: #fff1ec;
    --theme-accent: #b77a23;
}
.theme-vesak {
    --theme-ink: #3d6755;
    --theme-surface: #f0f8ee;
    --theme-accent: #a0782d;
}
.theme-spring {
    --theme-ink: #476533;
    --theme-surface: #f4f9eb;
    --theme-accent: #a05d8a;
}
.theme-summer {
    --theme-ink: #31677b;
    --theme-surface: #ecf9fc;
    --theme-accent: #b78221;
}
.theme-autumn {
    --theme-ink: #75492b;
    --theme-surface: #fff4e8;
    --theme-accent: #aa5936;
}
.theme-winter {
    --theme-ink: #375b7a;
    --theme-surface: #eff7ff;
    --theme-accent: #6671a6;
}

.theme-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.theme-gallery-item {
    margin: 0;
    padding: 0.75rem;
    background: var(--theme-surface);
    color: var(--theme-ink);
    border: 1px solid var(--theme-accent);
    border-radius: 0.8rem;
    text-align: center;
}
.theme-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 9rem;
    object-fit: contain;
}
.theme-gallery-item figcaption {
    font-size: 0.85rem;
    font-weight: 650;
}