/* One event's page and its organizer: the event page (banner, poster, facts, sign-up form), the sign-ups page and
   the Barista School page. Loaded only by those pages (events.css is on every page). */
/* ---------- an event's sign-ups (organizer page) ------------------------- */
.en-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 480px;
    margin: 4px 0 18px; }
.en-actions > * { width: 100%; box-sizing: border-box; text-align: center; justify-content: center; }
.en-entries { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--mcs-line, #E6D9C6);
    background: var(--mcs-card, #fff); }
.en-entries p { margin: 0; font-size: 14px; line-height: 1.5; }
.en-entries--closed, .en-entries--full { border-color: #C05A2A; }
.en-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 18px; }
.en-tile { background: var(--mcs-card, #fff); border: 1px solid var(--mcs-line, #E6D9C6); border-radius: 12px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.en-tile span { font-size: 12px; color: var(--mcs-muted, #8A7059); }
.en-tile b { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.en-tile small { font-size: 12px; color: var(--mcs-muted, #8A7059); }
.en-tile--todo { border-color: #C05A2A; }
.en-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.en-charts .mcs-ui-panel { margin: 0; }
.en-h { font-size: 15px; margin: 0 0 10px; }
.en-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.en-bars li { display: grid; grid-template-columns: minmax(70px, 38%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.en-bar-label { overflow-wrap: anywhere; }
.en-bar { background: var(--mcs-chip, #EFE6D8); border-radius: 6px; height: 10px; overflow: hidden; display: block; }
.en-bar i { display: block; height: 100%; background: #6B3E26; border-radius: 6px; }
.en-bar-n { min-width: 1.5em; text-align: right; }
.en-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 14px; }
.en-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.en-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--mcs-line, #E6D9C6); font-size: 13px; text-decoration: none; color: inherit; }
.en-tab.is-on { background: #6B3E26; border-color: #6B3E26; color: #fff; }
.en-search { flex: 1 1 180px; min-width: 0; }
.en-row { border: 1px solid var(--mcs-line, #E6D9C6); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--mcs-card, #fff); }
.en-row.is-saved { border-color: #2F6B3A; box-shadow: 0 0 0 2px rgba(47, 107, 58, .15); }
.en-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.en-name { font-size: 16px; overflow-wrap: anywhere; }
.en-when { margin-left: auto; font-size: 12px; color: var(--mcs-muted, #8A7059); }
.en-line { margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.en-note { color: var(--mcs-muted, #8A7059); }
.en-answers { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 14px; }
.en-answers dt { color: var(--mcs-muted, #8A7059); }
.en-answers dd { margin: 0; overflow-wrap: anywhere; }
.en-status { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--mcs-chip, #EFE6D8); }
.en-status--pending { background: rgba(192, 90, 42, .14); color: #8A3F1D; }
.en-status--confirmed { background: rgba(47, 107, 58, .14); color: #1F4D2A; }
.en-status--rejected { background: rgba(120, 30, 30, .12); color: #7A1E1E; }
.en-decide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px;
    max-width: 480px; }
.en-decide input[type="text"] { grid-column: 1 / -1; min-width: 0; }
.en-decide > button { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
.en-privacy { margin: 24px 0 8px; font-size: 12px; color: var(--mcs-muted, #8A7059); }
@media (max-width: 575px) {
    .en-answers { grid-template-columns: 1fr; }
    .en-when { margin-left: 0; width: 100%; }
}

/* ---------- one event: banner, poster, facts, and the sign-up form -------------------------------------------
   Mobile first. A red * marks every required field (.ev-req); sizes are 16px+ so a phone does not zoom in. */
.ev-page { --ev-red: #C0392B; --ev-soft: #FBF7F0; --ev-edge: #D9CCB8; --ev-muted: #6F5744; --ev-accent: #A8481F; }
.ev-page .mcs-ui-container { max-width: 1120px; }
.ev-banner { display: block; width: 100%; height: auto; border-radius: var(--mcs-r-md, 14px); margin: 4px 0 26px; }
.ev-head { margin: 0 0 26px; }
.ev-kind { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--ev-accent, #A8481F); }
.ev-title { font-family: var(--mcs-display, inherit); font-size: clamp(28px, 4.2vw, 44px); line-height: 1.12;
    margin: 6px 0 12px; color: var(--mcs-ink, #2E1B14); }
.ev-lede { font-size: 18px; line-height: 1.55; color: var(--mcs-body, #5C4638); max-width: 64ch; margin: 0 0 12px; }
.ev-manage { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-size: 14px; }
.ev-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.ev-aside { order: -1; }
.ev-poster { display: block; width: 100%; max-width: 440px; max-height: 560px; object-fit: contain; margin: 0 auto;
    border-radius: var(--mcs-r-md, 14px); box-shadow: 0 12px 34px rgba(46, 27, 20, .2); }
.ev-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 22px; }
.ev-fact { background: var(--mcs-card, #FFFDFA); border: 1px solid var(--mcs-line, #E6DCCC);
    border-radius: var(--mcs-r-md, 14px); padding: 16px 18px; }
.ev-fact dt { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--ev-muted, #6F5744); margin: 0 0 6px; }
.ev-fact dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--mcs-ink, #2E1B14); overflow-wrap: anywhere; }
.ev-cta-row { margin: 0 0 30px; }
.mcs-ui .ev-cta { min-width: 240px; min-height: 54px; font-size: 19px; font-weight: 700; justify-content: center; }
.ev-prose { font-size: 17px; line-height: 1.75; color: var(--mcs-body, #5C4638); max-width: 68ch; }
.ev-prose p { margin: 0 0 1.15em; }
@media (min-width: 900px) {
    .ev-layout.has-aside { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; }
    .ev-aside { order: 2; position: sticky; top: 24px; }
    .ev-poster { max-width: none; max-height: none; }
}

.ev-register { max-width: 880px; margin: 56px auto 36px; padding: 30px 20px 34px; background: var(--mcs-card, #FFFDFA);
    border: 1px solid var(--mcs-line, #E6DCCC); border-radius: 22px; box-shadow: 0 10px 32px rgba(46, 27, 20, .07); }
@media (min-width: 700px) { .ev-register { padding: 44px 48px 48px; } }
.ev-reg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.ev-reg-head h2 { margin: 0; font-size: clamp(26px, 3.4vw, 32px); color: var(--mcs-ink, #2E1B14); }
.ev-required-note { font-size: 13px; color: var(--ev-muted, #6F5744); }
.ev-required-note b, .ev-req { color: var(--ev-red, #C0392B); }
.ev-req { margin-left: 4px; font-weight: 700; }
.ev-register .se-error { margin: 16px 0 0; }
.ev-step { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--mcs-line, #E6DCCC); }
.ev-step:first-child { margin-top: 24px; }
.ev-step-head { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.ev-step-head h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--mcs-ink, #2E1B14); }
.ev-step-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 50%; background: var(--ev-accent, #A8481F); color: #fff; font-weight: 700; font-size: 16px; }
.ev-pay { display: grid; gap: 16px; }
.ev-fee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ev-fee span { font-size: 14px; color: var(--ev-muted, #6F5744); }
.ev-fee b { font-size: 32px; line-height: 1.1; color: var(--mcs-dark, #4A2822); }
.ev-pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ev-pay-list li { background: var(--ev-soft, #FBF7F0); border: 1px solid var(--mcs-line, #E6DCCC); border-radius: 12px;
    padding: 14px 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.ev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 22px; }
@media (min-width: 700px) {
    .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ev-field--wide { grid-column: 1 / -1; }
}
.ev-field { min-width: 0; }
.ev-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; line-height: 1.35;
    color: var(--mcs-ink, #2E1B14); text-transform: none; letter-spacing: 0; }
.ev-input, .ev-select { display: block; width: 100%; box-sizing: border-box; height: 50px; padding: 0 14px;
    border: 1px solid var(--ev-edge, #D9CCB8); border-radius: 10px; background: #fff; font: inherit; font-size: 16px;
    color: var(--mcs-ink, #2E1B14); }
.ev-input:focus, .ev-select:focus { outline: none; border-color: var(--mcs-accent, #C05A2A);
    box-shadow: 0 0 0 3px rgba(192, 90, 42, .16); }
.ev-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ev-muted, #6F5744); }
.ev-proof { margin-bottom: 26px; }
.ev-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 26px 16px; border: 2px dashed #CDB99C; border-radius: 14px; background: var(--ev-soft, #FBF7F0); cursor: pointer; }
.ev-drop:hover, .ev-drop.is-over { border-color: var(--mcs-accent, #C05A2A); background: #FFF6EC; }
.ev-drop:focus-within { outline: 3px solid rgba(192, 90, 42, .3); outline-offset: 2px; }
.ev-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ev-drop-btn { display: inline-block; padding: 11px 24px; border-radius: 999px; background: var(--mcs-dark, #4A2822);
    color: #fff; font-weight: 700; font-size: 15px; }
.ev-drop-none { font-size: 14px; color: var(--ev-muted, #6F5744); }
.ev-files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.ev-files li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #fff;
    border: 1px solid var(--mcs-line, #E6DCCC); border-radius: 8px; overflow-wrap: anywhere; }
.ev-files li span:last-child { color: var(--mcs-muted, #8A7059); white-space: nowrap; }
.ev-drop-error { margin: 8px 0 0; font-size: 14px; color: #B03A2E; }
.ev-consents { display: grid; gap: 16px; padding: 20px; background: var(--ev-soft, #FBF7F0);
    border: 1px solid var(--mcs-line, #E6DCCC); border-radius: 14px; }
.ev-notice { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mcs-body, #5C4638); white-space: pre-line; }
.ev-notice--data { color: var(--ev-muted, #6F5744); }
.ev-notice--refund { font-weight: 700; color: var(--mcs-ink, #2E1B14); }
.ev-check { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 15px; line-height: 1.5; cursor: pointer; }
.ev-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--mcs-accent, #C05A2A); }
.ev-minor { display: grid; gap: 14px; }
.ev-minor .mcs-ev-minor-body { margin-top: 0; padding: 18px; background: #fff; border: 1px solid var(--mcs-line, #E6DCCC);
    border-radius: 12px; }
.mcs-ui .ev-submit { display: flex; width: 100%; min-height: 58px; margin-top: 28px; font-size: 19px; font-weight: 700;
    justify-content: center; }
/* prizes and results (a competition), and the notice that replaces the form when sign-ups are closed */
.ev-block { margin: 26px 0 0; padding: 20px 22px; background: var(--ev-soft, #FBF7F0);
    border: 1px solid var(--ev-edge, #D9CCB8); border-radius: 14px; max-width: 68ch; }
.ev-block h2 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--ev-accent, #A8481F); }
.ev-block--results { background: #fff; border-color: var(--ev-accent, #A8481F); margin: 0 0 22px; }
.ev-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ev-line; }
.ev-lines li { position: relative; padding-left: 38px; font-size: 16px; line-height: 1.55; color: var(--mcs-ink, #2E1B14);
    overflow-wrap: anywhere; counter-increment: ev-line; }
.ev-lines li::before { content: counter(ev-line); position: absolute; left: 0; top: 1px; width: 26px; height: 26px;
    border-radius: 50%; background: var(--ev-accent, #A8481F); color: #fff; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; }
.ev-lines--dots li { padding-left: 24px; }
.ev-lines--dots li::before { content: ""; top: 9px; width: 10px; height: 10px; left: 2px; }
.ev-closed { text-align: center; padding: 26px 12px; }
.ev-closed h2 { margin: 0 0 10px; font-size: 22px; }
.ev-closed p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ev-muted, #6F5744); }
.ev-done { text-align: center; padding: 28px 8px; }
.ev-done p { margin: 14px 0 0; font-size: 19px; line-height: 1.5; color: var(--mcs-ink, #2E1B14); }
.ev-done-mark { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px;
    border-radius: 50%; background: #2F6B3A; color: #fff; font-size: 30px; }

/* ---------- the Barista School page: three equal buttons ---------- */
.sc-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.sc-actions > * { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }