.intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
  padding: clamp(1.25rem, 5vw, 3rem);
  border: 1px solid #325477;
  border-radius: 24px;
  background: radial-gradient(ellipse at top right, #194573, transparent 72%), #0d2038;
}
.brand-logo { display: block; width: min(200px, 100%); height: auto; margin-bottom: 1rem; }
.intro h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.1; margin: .3rem 0; }
.intro p { margin: .5rem 0 0; color: #c5dbef; }
.intro .eyebrow { color: #69dcff; font-size: .8rem; letter-spacing: .18em; font-weight: 700; }
#events, #archived-events { display: grid; gap: 1rem; }
#archive, #archived-events { margin-top: 1rem; }
#organisation { margin: 1rem 0 2rem; }
.panel { padding: clamp(1rem, 3vw, 1.6rem); }
.event-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: .5rem 1rem; list-style: none; }
.event-heading::-webkit-details-marker { display: none; }
.event-box[open] > .event-heading { margin-bottom: .75rem; }
.event-toggle { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #325477; border-radius: 8px; }
.event-toggle::before { content: "+"; }
.event-box[open] > .event-heading .event-toggle::before { content: "−"; }
@media (max-width: 600px) {
  .event-heading { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .event-heading time { grid-row: 2; }
  .event-toggle { grid-column: -2; grid-row: 1 / span 2; }
}
.event-heading h3, .service h4 { margin: 0; }
.event-heading time { color: #69dcff; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: .8rem; }
.service { background: #102945; border: 1px solid #325477; padding: 1rem; border-radius: 14px; overflow-wrap: anywhere; }
.service p { margin: .4rem 0; }
.available { color: #51dfb0; }
.full { color: #ffca72; }
.names { padding-left: 1.3rem; }
.manage { margin-top: 1rem; }
summary { cursor: pointer; color: #69dcff; font-weight: 600; }
form { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; margin-top: .8rem; }
label { display: grid; gap: .25rem; flex: 1 1 8rem; min-width: 0; }
input { width: 100%; }
form p { flex-basis: 100%; margin: 0; }
.error { color: #ff8290; }

form label[hidden] { display: none; }

.master-only, .master-active .master-login, .master-active .public-helper-name { display: none; }
.master-active details.master-only { display: block; }
.master-active a.master-only { display: inline-flex; }
.master-login { margin: 0; }
.viewer-login { margin: 0; }
main:not(.viewer-active) .viewer-only, .viewer-active .viewer-login { display: none; }

.event-toggle { grid-column: -2; }
.master-active .event-pencil { display: inline-flex; grid-column: -3; grid-row: 1; }
.master-active .event-title-form:not([hidden]) { display: flex; }

.event-title-form .event-save { color: #51dfb0; border-color: #51dfb0; }
.event-title-form .event-cancel { color: #ff8290; border-color: #ff8290; }

.service-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.calendar-button { display: inline-grid; place-items: center; flex-shrink: 0; padding: .45rem; }
.event-heading .calendar-button { grid-column: -4; grid-row: 1; }

.master-active #excel-import:not([hidden]) { display: block; margin-top: 1rem; }

.master-active .excel-actions { display: flex; gap: .5rem; }
.excel-button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; color: #51dfb0; background: #103a32; border-color: #37866f; }
.excel-button:hover, .excel-button:focus-visible { color: #abffe1; background: #164d40; border-color: #51dfb0; }
.excel-button svg { width: 1.4rem; height: 1.4rem; }

.event-create-button { color: #8ddcff; background: #153b59; border-color: #4b8fbc; }
.event-create-button:hover, .event-create-button:focus-visible { color: #d6f3ff; background: #205475; border-color: #8ddcff; }