:root {
    color-scheme: light;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f7f1e8;
    color: #251c18;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

button,
input,
select { font: inherit; }

button:focus-visible,
input:focus-visible,
select:focus-visible { outline: 3px solid #74422f; outline-offset: 3px; }

#app { min-height: 100svh; }

.admin-page {
    margin: 0 auto;
    max-width: 78rem;
    padding: clamp(1rem, 3vw, 2.5rem);
}

.admin-page--login {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100svh;
}

.admin-card,
.admin-section {
    background: #fffaf4;
    border: 1px solid #e7d9cd;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgb(71 43 31 / 7%);
}

.admin-card { max-width: 31rem; padding: clamp(1.5rem, 6vw, 3rem); }

.admin-header {
    align-items: center;
    border-bottom: 1px solid #dfcec0;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr auto auto;
    margin-bottom: 1.25rem;
    padding: 0 0 1.15rem;
}

.admin-brand,
.admin-title,
.section-eyebrow,
.summary-state,
.display-name { font-family: Georgia, "Times New Roman", serif; }

.admin-brand { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; }
.admin-kicker,
.section-eyebrow { color: #8d4d35; font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.admin-title { font-size: clamp(2rem, 7vw, 3rem); font-weight: 500; line-height: 1.1; margin: .5rem 0 1rem; }
.admin-copy,
.section-copy,
.admin-note,
.empty-state,
.display-detail,
.display-heartbeat,
.display-offline-copy,
.health-detail { color: #62514a; line-height: 1.55; }
.admin-note { font-size: .9rem; margin-top: 1.25rem; }

.admin-event-meta { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.event-name { color: #5d453a; font-weight: 650; }
.event-selector,
.admin-select,
.field-input {
    background: #fffdf9;
    border: 1px solid #cdb7a8;
    border-radius: .6rem;
    color: #251c18;
    min-height: 2.8rem;
    padding: .55rem .75rem;
}

.status-badge,
.photo-status {
    border-radius: 999px;
    display: inline-block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: .32rem .55rem;
    text-transform: uppercase;
}
.status-active,
.photo-status-published,
.health-ok { background: #e5f0e6; color: #285438; }
.status-closed,
.photo-status-hidden { background: #eee3db; color: #634034; }
.status-draft,
.photo-status-pending { background: #fff0c8; color: #765119; }
.photo-status-rejected { background: #f6dfdc; color: #7c3029; }

.feedback { border-radius: .7rem; margin: 0 0 1rem; padding: .8rem 1rem; }
.feedback--success { background: #e5f0e6; color: #285438; }
.feedback--error { background: #f7e1de; color: #7a2e29; }

.admin-summary { margin-bottom: 1rem; padding: 1.25rem; }
.summary-state { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: .45rem 0 1rem; }
.count-grid { display: grid; gap: .65rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.count-card { background: #f7f0e8; border-radius: .75rem; min-width: 0; padding: .8rem; }
.count-value { display: block; font-size: 1.4rem; }
.count-label { color: #685850; font-size: .8rem; line-height: 1.25; margin: .25rem 0 0; }

.admin-moments {
    background:
        radial-gradient(circle at 100% 0, rgb(167 103 77 / 14%), transparent 32%),
        #fffaf4;
    overflow: hidden;
}
.moment-timeline {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
    position: relative;
}
.moment-timeline::before {
    background: #d8c1b3;
    content: "";
    height: 1px;
    left: 7%;
    position: absolute;
    right: 7%;
    top: 1.15rem;
}
.moment-card {
    background: rgb(255 250 244 / 92%);
    border: 1px solid #dac5b8;
    border-radius: .85rem;
    display: flex;
    flex-direction: column;
    min-height: 13.5rem;
    padding: 1rem;
    position: relative;
}
.moment-card::before {
    background: #fffaf4;
    border: 2px solid #b9907f;
    border-radius: 999px;
    content: "";
    height: .75rem;
    left: 50%;
    position: absolute;
    top: -.48rem;
    transform: translateX(-50%);
    width: .75rem;
    z-index: 1;
}
.moment-card--past { background: #f3ece5; }
.moment-card--past::before { background: #9f725f; }
.moment-card--current {
    background: #722f3d;
    border-color: #722f3d;
    box-shadow: 0 12px 25px rgb(79 34 43 / 20%);
    color: #fffaf4;
    transform: translateY(-.2rem);
}
.moment-card--current::before { background: #f0d6a8; border-color: #722f3d; }
.moment-state {
    color: #8d4d35;
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.moment-card--current .moment-state,
.moment-card--current .moment-description,
.moment-card--current .moment-count { color: #f3dccf; }
.moment-hashtag {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 500;
    margin-top: .7rem;
}
.moment-label { font-size: .8rem; font-weight: 750; margin-top: .15rem; }
.moment-description { color: #66534a; font-size: .82rem; line-height: 1.4; margin: .55rem 0; }
.moment-count { color: #7f5b4c; font-size: .76rem; font-weight: 750; margin: auto 0 .7rem; }
.moment-transition-status {
    background: linear-gradient(105deg, #fff8ef, #f4e4d8);
    border: 1px solid rgb(114 47 61 / 18%);
    border-left: 4px solid #722f3d;
    border-radius: .65rem;
    box-shadow: 0 .65rem 1.5rem rgb(87 47 38 / 8%);
    margin: 1rem 0 1.25rem;
    padding: .9rem 1rem;
}
.moment-transition-title {
    color: #592631;
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
}
.moment-transition-copy {
    color: #704f43;
    font-size: .82rem;
    line-height: 1.45;
    margin: .3rem 0 0;
}
.admin-button--moment {
    background: transparent;
    border-color: #b77a63;
    color: #6e3e2d;
    font-size: .78rem;
    min-height: 2.35rem;
    padding: .4rem .55rem;
}
.moment-primary-actions {
    align-items: center;
    background: #f4e8dc;
    border-radius: .85rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}
.moment-advance { min-width: min(100%, 15rem); }
.moment-next-copy { color: #6a4a3d; font-family: Georgia, "Times New Roman", serif; margin: 0; }
.moment-presentation-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }

.admin-section { margin-top: 1rem; padding: clamp(1rem, 3vw, 1.5rem); }
.admin-section .section-eyebrow { margin: 0; }
.admin-section .section-copy { margin: .45rem 0 1rem; }
.scene-state { background: #fff0c8; border: 1px solid #d8a955; border-radius: .75rem; margin-top: 1rem; padding: .85rem 1rem; }
.scene-state--live { background: #e5f0e6; border-color: #8ab394; }
.scene-state--mixed { background: #f7e1de; border-color: #d49a91; }
.scene-state-title { display: block; font-size: 1rem; }
.scene-state-copy { color: #55443b; line-height: 1.45; margin: .35rem 0 0; }
.scene-grid { display: grid; gap: .65rem; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 1rem 0; }
.scene-button { background: #fffaf4; border: 1px solid #ac705b; border-radius: .7rem; color: #512f23; font-weight: 750; min-height: 4rem; padding: .65rem; }
.scene-button--active { background: #87452f; border-color: #87452f; box-shadow: 0 0 0 3px rgb(135 69 47 / 18%); color: #fffaf4; }
.scene-button--active.scene-button--pause { background: #6d3028; border-color: #6d3028; }
.scene-button--pause { background: #6d3028; border-color: #6d3028; color: #fffaf4; }
.scene-options { align-items: end; display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.toggle-control { align-items: center; display: flex; gap: .6rem; min-height: 2.8rem; }
.toggle-control input { accent-color: #8d4d35; height: 1.1rem; width: 1.1rem; }
.toggle-label { font-weight: 600; }

.split-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.admin-button { border: 1px solid transparent; border-radius: .65rem; cursor: pointer; font-weight: 750; min-height: 2.75rem; padding: .6rem 1rem; }
.admin-button--primary { background: #87452f; color: #fffaf4; }
.admin-button--secondary { background: #fffaf4; border-color: #a96b53; color: #613827; }
.admin-button--danger { background: #722e28; color: #fffaf4; }
.admin-button--quiet { background: transparent; color: #5f4538; }
.admin-button--quiet-danger { background: transparent; color: #8b382e; text-decoration: underline; }
.admin-button:disabled,
.scene-button:disabled { cursor: not-allowed; opacity: .56; }

.admin-login-form { display: grid; gap: .9rem; margin-top: 1.5rem; }
.field { display: grid; gap: .4rem; }
.field-label { color: #543d33; font-size: .9rem; font-weight: 700; }
.field-input { width: 100%; }

.photo-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); margin-top: 1rem; }
.photo-tile { background: #f7f0e8; border-radius: .7rem; display: grid; gap: .5rem; min-height: 12rem; overflow: hidden; padding: .6rem; }
.photo-tile img { aspect-ratio: 1; border-radius: .45rem; object-fit: cover; width: 100%; }
.photo-placeholder { align-items: center; background: #e7ddd4; color: #705f57; display: flex; justify-content: center; margin: 0; min-height: 8rem; text-align: center; }
.photo-moment { color: #74394a; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; }
.photo-moment-select { min-height: 2.4rem; padding: .4rem .5rem; width: 100%; }
.photo-action { width: 100%; }

.display-list { display: grid; gap: .75rem; }
.display-item { background: #f7f0e8; border-radius: .7rem; padding: 1rem; }
.display-name { font-size: 1.3rem; font-weight: 500; margin: 0 0 .35rem; }
.display-online { color: #285438; font-weight: 800; margin: 0; }
.display-detail,
.display-heartbeat,
.display-offline-copy { font-size: .92rem; margin: .28rem 0; }
.display-item .admin-button { margin-top: .65rem; }
.admin-health { background: #f4eee7; }
.health-list { display: grid; gap: .55rem; margin: 1rem 0; }
.health-row { align-items: center; background: #fffaf4; border-radius: .65rem; display: grid; gap: .35rem; grid-template-columns: 1fr auto; padding: .75rem; }
.health-name { font-size: 1rem; margin: 0; }
.health-state,
.health-overall { border-radius: .4rem; display: inline-block; font-weight: 750; margin: .4rem 0; padding: .4rem .55rem; }
.health-row .health-detail { grid-column: 1 / -1; margin: 0; }
.health-ok { background: #e5f0e6; color: #285438; }
.health-degraded { background: #fff0c8; color: #765119; }
.health-down { background: #f6dfdc; color: #7c3029; }
.health-unknown { background: #e8e1db; color: #5d514a; }

@media (max-width: 760px) {
    .admin-header { grid-template-columns: 1fr auto; }
    .admin-event-meta { grid-column: 1 / -1; justify-content: flex-start; order: 3; }
    .count-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .moment-timeline { grid-template-columns: 1fr; }
    .moment-timeline::before { bottom: 5%; height: auto; left: .35rem; right: auto; top: 5%; width: 1px; }
    .moment-card { min-height: 0; padding-left: 1.35rem; }
    .moment-card::before { left: -.03rem; top: 1rem; transform: none; }
    .moment-card--current { transform: none; }
    .moment-primary-actions { align-items: stretch; flex-direction: column; }
    .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scene-options { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .admin-page { padding: 1rem; }
    .admin-header { align-items: start; }
    .admin-header .admin-button--quiet { padding-right: 0; }
    .count-grid { gap: .45rem; }
    .count-card { padding: .65rem; }
    .split-actions .admin-button { width: 100%; }
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

.admin-program {
    background: radial-gradient(circle at 100% 0, rgb(114 47 61 / 13%), transparent 34%), #fffaf4;
}
.program-state {
    background: #f4e8dc;
    border: 1px solid #ddc3b4;
    border-radius: .75rem;
    margin: 1rem 0;
    padding: .85rem 1rem;
}
.program-state-title { color: #592631; display: block; font-family: Georgia, "Times New Roman", serif; }
.program-state-copy,
.program-note { color: #654d42; font-size: .86rem; line-height: 1.45; margin: .35rem 0 0; }
.program-duration-grid { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.program-duration-field .field-label { color: #74394a; }
.program-duration-field .field-input { min-width: 0; }
.program-start { margin-top: 1rem; }

@media (max-width: 760px) {
    .program-duration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.thank-you-controls {
    background: radial-gradient(circle at 100% 0, rgb(114 47 61 / 12%), transparent 34%), #fffaf4;
}
.thank-you-selection {
    align-items: center;
    background: #f7f0e8;
    border: 1px solid #ddc3b4;
    border-radius: .7rem;
    display: flex;
    gap: .8rem;
    margin: 1rem 0;
    padding: .7rem;
}
.thank-you-selection img {
    aspect-ratio: 1;
    border-radius: .5rem;
    height: 4rem;
    object-fit: cover;
    width: 4rem;
}
.thank-you-selection-copy { color: #654d42; font-weight: 700; margin: 0; }
.thank-you-link-copy { display: grid; gap: .55rem; margin-top: 1rem; }
.thank-you-link-copy .field-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }