:root {
    color-scheme: light;
    --ink: #172029;
    --muted: #5f6b76;
    --line: #d9e0e6;
    --paper: #fff;
    --canvas: #f3f5f7;
    --brand: #174f58;
    --brand-dark: #0f3a41;
    --danger: #a02622;
    --success: #236a3b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--brand); }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem max(1rem, calc((100vw - 1180px) / 2));
    background: var(--brand-dark);
    color: #fff;
}

.topbar h1 { margin: 0; font-size: 1.25rem; }
.topbar a { color: #fff; }
.topbar-brand { display: flex; align-items: baseline; gap: .75rem; }
.topbar-brand span { color: rgb(255 255 255 / 62%); font-size: .82rem; }
.topnav { display: flex; align-items: center; gap: .25rem; }
.topnav a { padding: .45rem .7rem; border-radius: .35rem; text-decoration: none; }
.topnav a:hover, .topnav a.active { background: rgb(255 255 255 / 13%); }

.container { width: min(1180px, calc(100% - 2rem)); margin: 1.5rem auto 4rem; }
.grid { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.4fr); gap: 1.25rem; align-items: start; }
.stack { display: grid; gap: 1.25rem; }

.card {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--paper);
    box-shadow: 0 2px 8px rgb(23 32 41 / 5%);
}

.card h2, .card h3 { margin-top: 0; }
.muted { color: var(--muted); }
.help { margin: .25rem 0 0; color: var(--muted); font-size: .875rem; }

label, legend { font-weight: 650; }
label { display: block; margin-top: .8rem; }
input, textarea, select, button { font: inherit; }
input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], textarea {
    width: 100%;
    padding: .58rem .65rem;
    border: 1px solid #aeb9c3;
    border-radius: .35rem;
    background: #fff;
    color: var(--ink);
}
input[type="url"], input[type="file"] {
    width: 100%;
    padding: .58rem .65rem;
    border: 1px solid #aeb9c3;
    border-radius: .35rem;
    background: #fff;
    color: var(--ink);
}

textarea { min-height: 5rem; resize: vertical; }
fieldset { margin: 1rem 0; border: 1px solid var(--line); border-radius: .4rem; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.checks label, .inline-check { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 500; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.slot { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; margin-top: .5rem; }

.button, button {
    display: inline-block;
    padding: .6rem .9rem;
    border: 0;
    border-radius: .35rem;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font-weight: 650;
}
.button:hover, button:hover { background: var(--brand-dark); }
.button.secondary, button.secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.button:disabled, button:disabled { cursor: not-allowed; opacity: .45; }
.button.danger, button.danger { background: var(--danger); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.actions form { display: inline; }

.notice { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: .4rem; background: #e4f2e8; color: var(--success); }
.notice.error { background: #f9e5e3; color: var(--danger); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .025em; }
.status-open { color: var(--success); font-weight: 750; }
.status-closed { color: var(--danger); font-weight: 750; }
.nowrap { white-space: nowrap; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.schedule-calendar, .date-check { scroll-margin-top: 1rem; }
.schedule-overview { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.25rem; align-items: start; }
.schedule-overview > * { min-width: 0; }
.date-check { position: sticky; top: 1rem; }
.date-check h2 { font-size: 1.2rem; }
.date-check-form { display: grid; gap: .6rem; }
.date-check-form label { margin: 0; }
.date-check-form input { min-width: 0; }
.date-check-form button { width: 100%; }
.day-result { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.day-result h3 { margin: .25rem 0 .75rem; font-size: 1.35rem; }
.day-result > .status-open, .day-result > .status-closed { margin: .5rem 0; font-size: 1.1rem; }
.day-result-slots { margin: .5rem 0; font-weight: 650; }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.calendar-toolbar h2 { margin: .15rem 0 0; font-size: 1.6rem; }
.calendar-navigation { display: flex; flex-wrap: wrap; gap: .45rem; }
.calendar-navigation .button { font-size: .88rem; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 1rem 0 .7rem; list-style: none; font-size: .82rem; }
.calendar-legend li { display: flex; align-items: center; gap: .4rem; }
.calendar-swatch { display: inline-block; width: 1.1rem; height: 1.1rem; border: 1px solid #87949c; border-radius: .2rem; }
.calendar-mode-closed { background: #fff; color: #535d65; }
.calendar-mode-morning { background: #deedff; color: #194b7a; }
.calendar-mode-afternoon { background: #fff0c7; color: #674a0b; }
.calendar-mode-split { background: #dcefe3; color: #20523a; }
.calendar-mode-continuous { background: #ede1f8; color: #563677; }
.calendar-table { table-layout: fixed; border-collapse: separate; border-spacing: .35rem; margin-top: .8rem; }
.calendar-table th { text-align: center; padding: .3rem 0; border: 0; }
.calendar-table abbr { text-decoration: none; }
.calendar-table td { padding: 0; border: 0; vertical-align: top; }
.calendar-day { display: flex; flex-direction: column; min-height: 102px; padding: .6rem .5rem; border: 1px solid #d5dce1; border-radius: .4rem; text-decoration: none; text-align: center; }
.calendar-day:hover { border-color: #414c55; text-decoration: underline; }
.calendar-day.is-selected { outline: 2px solid #172029; outline-offset: -2px; }
.calendar-day:focus-visible { outline: 3px solid #172029; outline-offset: 2px; }
.calendar-day-number { font-weight: 800; font-size: 1.05rem; }
.calendar-day.is-today .calendar-day-number { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2rem; }
.calendar-day-hours { display: block; margin-top: .15rem; font-size: .8rem; }
.calendar-exception { margin-top: auto; font-size: .65rem; font-weight: 750; }
.calendar-exception-short { display: none; }

.login { width: min(430px, calc(100% - 2rem)); margin: 10vh auto; }
.login h1 { margin-top: 0; }

.page-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-heading { margin-bottom: 1.25rem; }
.page-heading h2 { margin: .1rem 0; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.section-heading h2 { margin: .1rem 0; }
.section-heading p:last-child { margin-bottom: 0; }
.eyebrow { margin: 0; color: var(--brand); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.counter { display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: 999px; background: #e4eff1; color: var(--brand-dark); font-weight: 800; }
.optional { color: var(--muted); font-size: .78rem; font-weight: 500; }

.agenda-layout { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(560px, 1.32fr); gap: 1.25rem; align-items: start; }
.agenda-list { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.event-list { display: grid; gap: .6rem; margin-top: 1rem; }
.event-row { display: grid; grid-template-columns: 3.75rem 1fr; gap: .8rem; padding: .8rem; border: 1px solid var(--line); border-radius: .55rem; background: #fff; }
.event-row.selected { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3.75rem; border-radius: .45rem; background: #eef3f4; color: var(--brand-dark); line-height: 1.05; }
.event-date strong { font-size: 1.55rem; }
.event-date span { margin-top: .25rem; font-size: .66rem; font-weight: 750; }
.event-summary h3 { margin: .2rem 0; font-size: 1rem; }
.event-summary h3 a { color: var(--ink); text-decoration: none; }
.event-summary p { margin: 0; color: var(--muted); font-size: .82rem; }
.event-meta { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .7rem; }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: .22rem .48rem; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.badge.draft { background: #eef0f2; color: #4f5a64; }
.badge.published { background: #e0f2e6; color: var(--success); }
.empty-state { padding: 2rem 1rem; text-align: center; color: var(--muted); }

.html-editor { margin-top: .4rem; border: 1px solid #aeb9c3; border-radius: .45rem; overflow: hidden; background: #fff; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .45rem; border-bottom: 1px solid var(--line); background: #f3f5f7; }
.editor-tool { min-width: 2.3rem; padding: .38rem .55rem; border: 1px solid #cbd3da; background: #fff; color: var(--ink); font-weight: 650; }
.editor-tool:hover, .editor-tool.active { background: #e4eff1; color: var(--brand-dark); }
.editor-surface, .editor-source { width: 100%; min-height: 240px; padding: 1rem; border: 0; outline: none; color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
.editor-surface:focus { box-shadow: inset 0 0 0 2px rgb(23 79 88 / 18%); }
.editor-surface h2, .editor-surface h3 { margin: 1rem 0 .4rem; }
.editor-source { display: block; resize: vertical; font: 14px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.editor-source[hidden], .editor-surface[hidden] { display: none; }
.publication-choice { display: flex; flex-wrap: wrap; gap: 1rem; }
.publication-choice label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 500; }
.publication-sites { display: grid; gap: .6rem; }
.publication-sites label { display: flex; align-items: center; gap: .5rem; margin: 0; }
.publication-sites input { width: auto; }
.image-card-actions { flex-wrap: wrap; }
.actions.spread { justify-content: space-between; }

.locked-section { display: flex; align-items: center; gap: 1rem; color: var(--muted); }
.locked-section h2, .locked-section p { margin: 0; }
.locked-icon { display: grid; place-items: center; flex: 0 0 3rem; height: 3rem; border-radius: 999px; background: #e4eff1; color: var(--brand); font-size: 1.3rem; font-weight: 800; }
.image-dropzone { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 1rem; padding: 2.2rem 1rem; border: 2px dashed #afc1c5; background: #f7fafb; color: var(--brand-dark); }
.image-dropzone:hover { border-color: var(--brand); background: #eef5f6; }
.image-dropzone small { margin-top: .35rem; color: var(--muted); font-weight: 500; }
.dropzone-icon { font-size: 2rem; line-height: 1; }
.agenda-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.agenda-image-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: .6rem; background: #fff; }
.agenda-image-card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #e9edef; }
.image-position { position: absolute; z-index: 1; top: .5rem; left: .5rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: rgb(15 58 65 / 90%); color: #fff; font-weight: 800; }
.image-alt-form { padding: .75rem; }
.image-alt-form label { margin: 0 0 .25rem; font-size: .76rem; }
.compact-field { display: grid; grid-template-columns: 1fr auto; gap: .35rem; }
.compact-field button { padding: .35rem .55rem; }
.image-card-actions { display: flex; align-items: center; gap: .35rem; padding: 0 .75rem .75rem; }
.image-card-actions form { display: inline; }
.image-card-actions form:last-child { margin-left: auto; }
.icon-button { min-width: 2.2rem; }

.cropper-dialog { width: min(1100px, calc(100% - 2rem)); max-width: none; padding: 0; border: 0; border-radius: .75rem; box-shadow: 0 25px 80px rgb(0 0 0 / 35%); }
.cropper-dialog::backdrop { background: rgb(8 19 23 / 72%); }
.dialog-panel { margin: 0; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: .1rem 0 0; }
.dialog-close { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 999px; background: #edf0f2; color: var(--ink); font-size: 1.5rem; }
.crop-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 560px; }
.crop-stage { position: relative; display: grid; place-items: center; min-width: 0; padding: 1rem; overflow: hidden; background: #121a1d; }
.crop-stage > img { display: none; max-width: 100%; max-height: 520px; }
.crop-placeholder { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: #fff; text-align: center; }
.crop-placeholder span { color: rgb(255 255 255 / 62%); }
.crop-placeholder[hidden] { display: none; }
.crop-stage .cropper-view-box { background: #fff; }
.crop-controls { padding: 1.1rem; border-left: 1px solid var(--line); background: #f7f8f9; }
.crop-controls > button:last-child { width: 100%; margin-top: 1rem; }
.zoom-buttons { display: grid; grid-template-columns: auto 1fr auto; gap: .35rem; margin-top: .35rem; }
.zoom-buttons button { padding: .4rem .55rem; }
.crop-message { min-height: 2.5rem; margin-top: .75rem; padding: .55rem 0; color: var(--muted); font-size: .85rem; }
.crop-message.error { color: var(--danger); }
.crop-message.success { color: var(--success); }
.crop-resolution.error { color: var(--danger); font-weight: 650; }
.crop-resolution.success { color: var(--success); }
.initial-image { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .6rem; }
.initial-image h3 { margin-top: 0; }
.initial-image [hidden] { display: none; }
#pending-image-preview { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; background: #f1f3f3; border-radius: .4rem; }

@media (max-width: 850px) {
    .grid { grid-template-columns: 1fr; }
    .schedule-overview { grid-template-columns: 1fr; }
    .date-check { position: static; }
    .topbar { align-items: flex-start; }
    .topbar-brand { flex-direction: column; gap: 0; }
    .agenda-layout { grid-template-columns: 1fr; }
    .agenda-list { position: static; max-height: none; }
    .crop-workspace { grid-template-columns: 1fr; }
    .crop-controls { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 520px) {
    .schedule-calendar { padding: .75rem .4rem; }
    .calendar-toolbar, .calendar-legend, #calendar-help { margin-left: .35rem; margin-right: .35rem; }
    .calendar-navigation { width: 100%; }
    .calendar-navigation .button { flex: 1; padding: .5rem .3rem; text-align: center; font-size: .7rem; }
    .calendar-legend { gap: .4rem .7rem; font-size: .7rem; }
    .calendar-table { border-spacing: .15rem .3rem; }
    .calendar-table th { font-size: .65rem; letter-spacing: 0; }
    .calendar-day { min-height: 112px; padding: .4rem .1rem; }
    .calendar-day-number { font-size: .9rem; }
    .calendar-day-hours { font-size: .65rem; }
    .calendar-exception { font-size: .6rem; }
    .calendar-exception-full { display: none; }
    .calendar-exception-short { display: inline; }
    .two-cols { grid-template-columns: 1fr; gap: 0; }
    .slot { grid-template-columns: 1fr; }
    .topbar { flex-direction: column; }
    .topnav { width: 100%; overflow-x: auto; }
    .page-heading, .section-heading { align-items: flex-start; flex-direction: column; }
    .agenda-images { grid-template-columns: 1fr; }
    .actions.spread { align-items: stretch; flex-direction: column; }
}