/* ==========================================================================
   Kynd Hub Events — frontend.css
   v1.0.0
   ========================================================================== */

.khe-events-wrap,
.khe-single-event,
.khe-dash-shell,
.khe-org-summary,
.khe-rsvp-wrap,
.khe-attendees-block,
.khe-stats-row,
.khe-my-events,
.khe-data-table,
.khe-modal-backdrop,
.khe-event-modal-backdrop {
    --khe-brand: #439bc0;
    --khe-brand-dark: #357c9b;
    --khe-brand-soft: #e8f3f8;
    --khe-bg: #f5f7f9;
    --khe-card: #fff;
    --khe-border: #e6e9ec;
    --khe-border-strong: #d1d5db;
    --khe-text: #222;
    --khe-text-muted: #555;
    --khe-text-faint: #888;
    --khe-success: #1e6e3a;
    --khe-success-bg: #e8f5ec;
    --khe-warn: #b45309;
    --khe-warn-bg: #fff4e0;
    --khe-waiver: #fff8eb;
    --khe-waiver-border: #f3deb1;
    --khe-waiver-text: #6b5520;
    --khe-danger: #b00020;
    --khe-radius: 12px;
    --khe-radius-sm: 6px;
    --khe-shadow: 0 2px 8px rgba(0,0,0,.06);
    --khe-shadow-hover: 0 6px 18px rgba(0,0,0,.10);
    --khe-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    font-family: var(--khe-font);
    color: var(--khe-text);
    line-height: 1.5;
    box-sizing: border-box;
}
.khe-events-wrap *, .khe-single-event *, .khe-dash-shell *, .khe-org-summary *, .khe-rsvp-wrap *, .khe-attendees-block *, .khe-stats-row *, .khe-my-events *, .khe-data-table * { box-sizing: border-box; }

.khe-empty { color: var(--khe-text-muted); padding: 18px; text-align: center; background: var(--khe-bg); border-radius: var(--khe-radius); }

/* Buttons */
.khe-btn { background: var(--khe-brand); color: #fff !important; border: none; padding: 10px 18px; border-radius: var(--khe-radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none !important; display: inline-block; line-height: 1.2; }
.khe-btn:hover { background: var(--khe-brand-dark); }
.khe-btn-sm { padding: 6px 12px; font-size: 13px; }
.khe-btn-secondary { background: #fff; color: var(--khe-text) !important; border: 1px solid var(--khe-border-strong); }
.khe-btn-secondary:hover { background: #f7f9fa; }
.khe-btn-danger { background: #fff !important; color: var(--khe-danger) !important; border: 1px solid var(--khe-danger); }
.khe-btn-ghost { background: transparent !important; color: var(--khe-brand) !important; border: none !important; padding: 6px 10px; font-weight: 600; cursor: pointer; font-size: 13px; text-decoration: none; }
.khe-btn-ghost:hover { text-decoration: underline; }

/* Badges */
.khe-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.6; }
.khe-badge-cat { background: var(--khe-success-bg); color: var(--khe-success); }
.khe-badge-tag { background: #eef0f3; color: var(--khe-text-muted); }
.khe-badge-age { background: var(--khe-warn-bg); color: var(--khe-warn); border: 1px solid #f3deb1; }
.khe-badge-role { background: var(--khe-brand-soft); color: var(--khe-brand-dark); }
.khe-badge-attended { background: var(--khe-success-bg); color: var(--khe-success); }
.khe-badge-confirmed { background: var(--khe-brand-soft); color: var(--khe-brand-dark); }
.khe-badge-bgcheck { background: var(--khe-brand-soft); color: var(--khe-brand-dark); display: inline-flex; align-items: center; gap: 4px; }
.khe-badge-bgcheck svg { width: 11px; height: 11px; flex-shrink: 0; }

/* View switcher */
.khe-view-switcher { display: inline-flex; background: #fff; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); overflow: hidden; margin-bottom: 18px; }
.khe-view-switcher a { padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--khe-text-muted); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.khe-view-switcher a.active { background: var(--khe-brand); color: #fff; }
.khe-view-switcher a:not(.active):hover { background: var(--khe-brand-soft); color: var(--khe-brand); }
.khe-view-switcher svg { width: 14px; height: 14px; }

/* Filter bar */
.khe-filter-shell { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 14px 18px; margin-bottom: 22px; }
.khe-filter-row { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.khe-filter-row + .khe-filter-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f2f4; }
.khe-filter-search-wrap { position: relative; flex: 1; }
.khe-filter-search-wrap svg { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 16px; height: 16px; color: var(--khe-text-faint); pointer-events: none; }
.khe-filter-search { width: 100%; padding: 10px 14px 10px 36px; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); font-size: 14px; background: #fff; }
.khe-filter-field { display: flex; flex-direction: column; gap: 4px; }
.khe-filter-field label { font-size: 11px; font-weight: 700; color: var(--khe-text-faint); text-transform: uppercase; letter-spacing: .04em; }
.khe-filter-field select, .khe-filter-field input[type="number"] { padding: 8px 12px; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); font-size: 13px; background: #fff; min-width: 140px; height: 38px; box-sizing: border-box; }
.khe-filter-field select[disabled] { background: #f4f6f8; color: var(--khe-text-faint); cursor: not-allowed; }
.khe-filter-field .khe-help { font-size: 11px; color: var(--khe-text-faint); display: block; margin-top: 2px; }
.khe-filter-more-toggle { background: transparent; color: var(--khe-brand); border: 1px solid var(--khe-brand); padding: 8px 14px; border-radius: var(--khe-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.khe-filter-more-toggle svg { width: 14px; height: 14px; }
.khe-filter-more.open { display: flex !important; }

/* Multi-select dropdown */
.khe-ms-dropdown { position: relative; }
.khe-ms-trigger { padding: 8px 12px; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); font-size: 13px; background: #fff; display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 200px; justify-content: space-between; height: 38px; box-sizing: border-box; line-height: 1; font-family: inherit; color: var(--khe-text); }
.khe-ms-trigger svg { width: 12px; height: 12px; color: var(--khe-text-faint); transition: transform .2s; flex-shrink: 0; }
.khe-ms-trigger.open svg { transform: rotate(180deg); }
.khe-ms-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khe-ms-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 280px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,.12); z-index: 1000; padding: 4px; }
.khe-ms-panel.open { display: block; }
.khe-ms-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; border-radius: 4px; font-size: 13px; }
.khe-ms-option:hover { background: var(--khe-brand-soft); }
.khe-ms-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.khe-ms-img-fallback { background: linear-gradient(135deg, var(--khe-brand), var(--khe-brand-dark)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

/* Events grid */
.khe-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.khe-event-card { background: var(--khe-card); border-radius: var(--khe-radius); overflow: hidden; box-shadow: var(--khe-shadow); display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.khe-event-card:hover { transform: translateY(-3px); box-shadow: var(--khe-shadow-hover); }
.khe-event-card-thumb { display: block; height: 140px; background: linear-gradient(135deg, #6db3c5, #439bc0); position: relative; overflow: hidden; }
.khe-event-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.khe-event-card-thumb .khe-no-thumb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; }
.khe-event-card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.khe-event-card-cat-line { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.khe-event-card-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.khe-event-card-title a { color: var(--khe-text); text-decoration: none; }
.khe-event-card-title a:hover { color: var(--khe-brand); }
.khe-event-card-organizer { font-size: 12px; color: var(--khe-text-muted); margin: 0 0 6px; }
.khe-event-card-organizer a { color: var(--khe-brand-dark); text-decoration: none; font-weight: 600; cursor: pointer; }
.khe-event-card-organizer a:hover { text-decoration: underline; }
.khe-event-card-when, .khe-event-card-where { margin: 0 0 4px; font-size: 13px; color: var(--khe-text-muted); }
.khe-event-card-meta { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.khe-event-card-spots { color: var(--khe-text-muted); }
.khe-event-card-spots.full { color: var(--khe-danger); font-weight: 600; }

/* Single event */

/* BuddyBoss theme renders an .entry-media figure and .entry-header above
   the_content() on single-post templates. Since our plugin renders its own
   styled hero with the title overlaid, these create empty placeholders
   above the plugin's hero. Hide them on khe_event posts only. */
body.single-khe_event .entry-media,
body.single-khe_event .entry-img,
body.single-khe_event figure.bb-vw-container1,
body.single-khe_event .entry-header {
    display: none !important;
}

.khe-event-hero { height: 220px; border-radius: var(--khe-radius); margin-bottom: 22px; background: linear-gradient(135deg, #88b884, #5d9b6e); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.khe-event-hero-overlay { position: absolute; inset: 0; padding: 24px 28px; display: flex; flex-direction: column; align-items: flex-start; justify-content: end; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.khe-event-hero-cats { display: flex; gap: 6px; margin-bottom: 8px; }
.khe-event-hero-cats .khe-badge { background: rgba(255,255,255,.85); color: var(--khe-success); }
.khe-event-hero-cats .khe-badge-bgcheck { background: rgba(255,255,255,.92); color: var(--khe-brand-dark); }
.khe-event-hero-title { margin: 0; font-size: 30px; font-weight: 700; color: #fff; }

.khe-event-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 22px 24px; }
.khe-event-meta-heading { grid-column: 1 / -1; margin: 0 0 6px; font-size: 16px; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--khe-border); }
.khe-meta-item strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--khe-text-faint); margin-bottom: 4px; font-weight: 700; }
.khe-meta-item span, .khe-meta-item .khe-meta-links { font-size: 14px; }
.khe-meta-item .khe-addr { font-size: 12px; color: var(--khe-text-muted); display: block; margin-top: 2px; }
.khe-meta-links a.khe-org-link, .khe-org-link { color: var(--khe-brand-dark); text-decoration: none; font-weight: 600; cursor: pointer; }
.khe-org-link:hover { text-decoration: underline; }

/* Spots availability box */
.khe-spots-box { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 22px 28px; margin-bottom: 24px; box-shadow: var(--khe-shadow); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.khe-spots-num-wrap { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.khe-spots-num { font-size: 44px; font-weight: 700; color: var(--khe-brand); line-height: 1; }
.khe-spots-num-label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--khe-text-muted); font-weight: 700; }
.khe-spots-progress-wrap { flex: 1; min-width: 240px; }
.khe-spots-progress { background: #f0f2f4; border-radius: 999px; height: 14px; overflow: hidden; margin-bottom: 8px; }
.khe-spots-progress-fill { height: 100%; background: linear-gradient(to right, var(--khe-brand) 0%, var(--khe-brand-dark) 100%); border-radius: 999px; transition: width .3s; }
.khe-spots-progress-fill.near-full { background: linear-gradient(to right, var(--khe-warn) 0%, #d97706 100%); }
.khe-spots-counts { font-size: 13px; color: var(--khe-text-muted); display: flex; justify-content: space-between; }
.khe-spots-counts strong { color: var(--khe-text); }

/* Hosts section */
.khe-hosts-section { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 16px 22px; margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.khe-hosts-label { font-size: 11px; font-weight: 700; color: var(--khe-text-faint); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.khe-hosts-list { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.khe-host-pill { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; color: inherit; font-size: 14px; }
.khe-host-pill:hover { color: var(--khe-brand); }
.khe-mini-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #88b884, #5d9b6e); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; }

/* Event body */
.khe-event-body { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 24px; margin-bottom: 24px; }

/* Public attendees */
.khe-attendees-block { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 22px 24px; margin-bottom: 24px; }
.khe-attendees-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.khe-attendees-heading h3 { margin: 0; font-size: 18px; }
.khe-attendees-count { font-size: 13px; color: var(--khe-text-muted); }
.khe-attendees-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.khe-attendee-pill { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 80px; cursor: pointer; text-decoration: none; color: inherit; }
.khe-attendee-pill:hover .khe-attendee-name { color: var(--khe-brand); }
.khe-attendee-avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #d3a85f, #b88840); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; background-size: cover; background-position: center; }
.khe-attendee-avatar.has-img { background-color: transparent; }
.khe-attendee-avatar.khe-av-guest { background: #d1d5db; color: #888; }
.khe-attendee-avatar.khe-av-more { background: #eef0f3; color: var(--khe-text-muted); }
.khe-attendee-avatar .khe-guest-badge { position: absolute; top: -4px; right: -8px; background: var(--khe-brand); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; min-width: 22px; text-align: center; border: 2px solid #fff; }
.khe-attendee-name { font-size: 12px; font-weight: 500; text-align: center; line-height: 1.2; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khe-attendee-name.khe-guest { color: var(--khe-text-muted); font-style: italic; }

/* Already registered */
.khe-already-registered { background: var(--khe-success-bg); border: 1px solid #c4e3cf; border-radius: var(--khe-radius); padding: 22px 24px; text-align: center; }
.khe-already-registered p { margin: 0 0 14px; color: var(--khe-success); font-weight: 600; font-size: 16px; }
.khe-event-past { background: #f7f9fa; border-radius: var(--khe-radius); padding: 18px 24px; text-align: center; color: var(--khe-text-muted); }

/* Registration form */
.khe-rsvp-wrap { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 24px 26px; box-shadow: var(--khe-shadow); }
.khe-rsvp-heading { margin: 0 0 18px; font-size: 20px; font-weight: 700; }
.khe-party-picker { background: #f7f9fa; padding: 14px 16px; border-radius: 8px; margin-bottom: 18px; }
.khe-party-picker label { display: block; font-weight: 600; }
.khe-party-picker .khe-help { color: var(--khe-text-faint); font-size: 12px; font-weight: 400; margin-left: 6px; }
.khe-party-size { width: 80px; padding: 8px 10px; border: 1px solid var(--khe-border-strong); border-radius: 6px; font-size: 14px; margin-top: 6px; }
.khe-attendee-card { background: #fff; border: 1px solid var(--khe-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
.khe-attendee-card.primary { border-left: 4px solid var(--khe-brand); }
.khe-attendee-card.guest { border-left: 4px solid #6db3c5; }
.khe-attendee-heading { margin: 0 0 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.khe-who { background: var(--khe-brand); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: .04em; }
.khe-who.guest { background: #6db3c5; }
.khe-prefilled { color: var(--khe-text-faint); font-size: 12px; font-weight: 400; }
.khe-remove-guest { margin-left: auto; background: transparent; border: 1px solid var(--khe-border-strong); color: var(--khe-text-faint); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.khe-remove-guest:hover { color: var(--khe-danger); border-color: var(--khe-danger); }

.khe-field { margin-bottom: 16px; }
.khe-field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.khe-field input[type="text"], .khe-field input[type="email"], .khe-field input[type="tel"], .khe-field input[type="number"], .khe-field input[type="datetime-local"], .khe-field input[type="date"], .khe-field input[type="url"], .khe-field input[type="file"], .khe-field select, .khe-field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); font-size: 14px; background: #fff; font-family: inherit;
}
.khe-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.khe-field-row.thirds { grid-template-columns: 1fr 1fr 1fr; }
.khe-field .khe-help, .khe-help { font-size: 12px; color: var(--khe-text-faint); margin-top: 4px; display: block; }

/* Waivers */
.khe-waivers-block { background: var(--khe-waiver); border: 1px solid var(--khe-waiver-border); border-radius: 10px; padding: 16px 18px; margin: 18px 0; }
.khe-waivers-heading { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.khe-waivers-note { margin: 0 0 14px; font-size: 13px; color: var(--khe-waiver-text); }
.khe-waiver-row { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 14px; }
.khe-waiver-row input { margin-top: 4px; flex-shrink: 0; }
.khe-waiver-row a { color: var(--khe-brand-dark); text-decoration: underline; font-weight: 600; }
.khe-event-waiver-wrap { background: #fff; border: 1px solid var(--khe-border); border-radius: 8px; padding: 12px 14px; margin-top: 14px; }
.khe-event-waiver-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.khe-event-waiver-clamp { background: #f7f9fa; padding: 10px 12px; border-radius: 6px; font-size: 13px; color: var(--khe-text-muted); position: relative; max-height: 42px; overflow: hidden; line-height: 1.4; }
.khe-event-waiver-clamp.expanded { max-height: 600px; overflow-y: auto; }
.khe-event-waiver-clamp::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: linear-gradient(to bottom, transparent, #f7f9fa); pointer-events: none; }
.khe-event-waiver-clamp.expanded::after { display: none; }
.khe-event-waiver-readmore { color: var(--khe-brand); font-weight: 600; font-size: 12px; cursor: pointer; background: transparent; border: none; padding: 4px 0; margin-top: 4px; }

.khe-rsvp-message { margin-top: 12px; font-size: 14px; }
.khe-rsvp-message.success { color: var(--khe-success); font-weight: 600; }
.khe-rsvp-message.error { color: var(--khe-danger); font-weight: 600; }

/* Stats / member dashboards */
.khe-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 22px; }
.khe-stat-card { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 22px 18px; text-align: center; box-shadow: var(--khe-shadow); }
.khe-stat-num { font-size: 36px; font-weight: 700; color: var(--khe-brand); display: block; line-height: 1; margin-bottom: 6px; }
.khe-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--khe-text-muted); font-weight: 600; }

ul.khe-my-events { list-style: none; padding: 0; margin: 0; }
ul.khe-my-events li { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 14px 18px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
ul.khe-my-events li .khe-when { color: var(--khe-text-muted); font-size: 13px; }

.khe-data-table { width: 100%; background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); border-collapse: collapse; font-size: 13px; overflow: hidden; }
.khe-data-table th { background: #f7f9fa; text-align: left; padding: 10px 14px; font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--khe-border); }
.khe-data-table td { padding: 10px 14px; border-bottom: 1px solid #f0f0f1; }
.khe-data-table tr:last-child td { border-bottom: none; }

/* Calendar */
.khe-calendar-shell { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); overflow: hidden; }
.khe-cal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--khe-border); }
.khe-cal-header h3 { margin: 0; font-size: 18px; }
.khe-cal-nav button { background: #fff !important; color: var(--khe-text) !important; border: 1px solid var(--khe-border-strong) !important; border-radius: var(--khe-radius-sm); padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; margin-left: 4px; line-height: 1.3; }
.khe-cal-nav button:hover { background: var(--khe-brand-soft) !important; color: var(--khe-brand-dark) !important; border-color: var(--khe-brand) !important; }
.khe-cal-grid { background: #fff; }
.khe-cal-row, .khe-cal-row-head { display: grid; grid-template-columns: repeat(7, 1fr); }
.khe-cal-row-head { background: #f7f9fa; border-bottom: 1px solid var(--khe-border); }
.khe-cal-row-head div { padding: 10px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--khe-text-muted); text-align: center; }
.khe-cal-cell { min-height: 90px; padding: 8px; border-right: 1px solid var(--khe-border); border-bottom: 1px solid var(--khe-border); position: relative; }
.khe-cal-cell:nth-child(7n) { border-right: none; }
.khe-cal-cell.dim { background: #fafbfc; color: var(--khe-text-faint); }
.khe-cal-cell.today { background: var(--khe-brand-soft); }
.khe-cal-cell .day-num { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }

/* Days with events: a dot marker (with an optional count) instead of the
 * full title pills. Matches the platform calendar pattern. */
.khe-cal-cell.has-events { cursor: pointer; transition: background .15s; }
.khe-cal-cell.has-events:hover { background: var(--khe-brand-soft); }
.khe-cal-cell.has-events:focus-visible { outline: 2px solid var(--khe-brand); outline-offset: -2px; }
.khe-cal-cell.is-selected { background: var(--khe-brand-soft); box-shadow: inset 0 0 0 2px var(--khe-brand); }
.khe-cal-marker { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 6px; }
.khe-cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--khe-brand); flex-shrink: 0; }
.khe-cal-count { font-size: 11px; font-weight: 600; color: var(--khe-brand-dark); line-height: 1; }
.khe-cal-cell.today .khe-cal-dot { background: var(--khe-brand-dark); }

/* Selected-day results list (mirrors the map "search this area" results). */
.khe-cal-results-list { margin-top: 24px; border-top: 2px solid #e5e7eb; padding-top: 18px; }
.khe-cal-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.khe-cal-results-count { font-size: 14px; font-weight: 600; color: #6b7280; }

/* Map */
.khe-map-shell { position: relative; border-radius: var(--khe-radius); overflow: hidden; border: 1px solid var(--khe-border); background: #d3e3eb; }
.khe-map-canvas { width: 100%; height: 100%; }
.khe-map-locate-btn { position: absolute; top: 10px; right: 10px; background: #fff; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--khe-brand-dark); z-index: 999; }
.khe-map-locate-btn:hover { background: var(--khe-brand-soft); }
.khe-map-locate-btn:disabled { opacity: .6; cursor: not-allowed; }
.khe-map-locate-btn svg { width: 14px; height: 14px; }

/* Profile modal */
.khe-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; }
.khe-modal-backdrop.open { display: flex; }
.khe-profile-modal { background: #fff; border-radius: var(--khe-radius); max-width: 460px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.25); overflow: hidden; position: relative; }
.khe-profile-modal-header { background: linear-gradient(135deg, #6db3c5, #439bc0); height: 80px; position: relative; }
.khe-profile-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: #fff !important; color: #222 !important; border: none; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 3; transition: transform .15s; display: flex; align-items: center; justify-content: center; padding: 0; }
.khe-profile-modal-close:hover { transform: scale(1.08); }
.khe-profile-modal-body { padding: 0 24px 24px; position: relative; z-index: 2; }
.khe-profile-modal-avatar { width: 80px; height: 80px; border-radius: 50%; border: 4px solid #fff; margin-top: -40px; background: linear-gradient(135deg, #6db3c5, #439bc0) center/cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 26px; margin-bottom: 12px; overflow: hidden; position: relative; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.khe-profile-modal-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.khe-profile-modal-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.khe-profile-modal-type { color: var(--khe-text-muted); font-size: 13px; margin: 0 0 12px; }
.khe-profile-modal-bio { font-size: 13px; color: var(--khe-text); line-height: 1.5; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--khe-border); }
.khe-profile-modal-badges-label { font-size: 11px; font-weight: 700; color: var(--khe-text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.khe-profile-modal-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.khe-badge-gp { background: #f0e8f8; color: #6a3a8e; padding: 4px 10px 4px 4px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; }
.khe-gp-badge-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.khe-gp-badge-img-fallback { background: linear-gradient(135deg, var(--khe-brand), var(--khe-brand-dark)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; }

/* Event summary modal (used by calendar pills and map pins).
   Visually mirrors the grid-card style: rounded corners, image header,
   padded body, soft shadow. */
.khe-event-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; }
.khe-event-modal-backdrop.open { display: flex; }
.khe-event-modal { background: var(--khe-card); border-radius: 16px; max-width: 440px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.30); overflow: hidden; position: relative; max-height: 92vh; overflow-y: auto; }
.khe-event-modal-thumb { height: 180px; background: linear-gradient(135deg, #6db3c5, #439bc0) center/cover no-repeat; position: relative; }
.khe-event-modal-thumb.empty::after { content: "📅"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: .5; }
.khe-event-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.95); border: none; font-size: 18px; cursor: pointer; line-height: 1; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .15s; }
.khe-event-modal-close:hover { transform: scale(1.08); }
.khe-event-modal-body { padding: 20px 24px 24px; }
.khe-event-modal-title { font-size: 22px; font-weight: 700; margin: 0 0 14px; line-height: 1.25; color: var(--khe-text); }
.khe-event-modal-meta-row { font-size: 14px; color: var(--khe-text-muted); margin-bottom: 8px; line-height: 1.4; }
.khe-event-modal-meta-row a.khe-org-link { color: var(--khe-brand-dark); font-weight: 600; text-decoration: none; cursor: pointer; }
.khe-event-modal-meta-row a.khe-org-link:hover { text-decoration: underline; }
.khe-event-modal-spots { font-weight: 600; color: var(--khe-brand-dark) !important; }
.khe-event-modal-spots.full { color: var(--khe-danger) !important; }
.khe-event-modal-excerpt { font-size: 13px; color: var(--khe-text); line-height: 1.55; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--khe-border); }
.khe-event-modal-cta.khe-btn { display: block; width: 100%; text-align: center; margin-top: 18px; padding: 12px 18px; box-sizing: border-box; background: var(--khe-brand) !important; color: #fff !important; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none !important; line-height: 1.2; }
.khe-event-modal-cta.khe-btn:hover { background: var(--khe-brand-dark) !important; color: #fff !important; }

/* Org summary widget */
.khe-org-summary { background: linear-gradient(135deg, var(--khe-brand-soft) 0%, #f7f9fa 100%); border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 22px 26px; margin-bottom: 22px; }
.khe-org-summary-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.khe-org-summary-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #6db3c5, #439bc0); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.khe-org-summary-name { margin: 0 0 2px; font-size: 18px; font-weight: 700; }
.khe-org-summary-type { font-size: 12px; color: var(--khe-text-muted); }
.khe-org-summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; padding-top: 14px; border-top: 1px solid var(--khe-border); }
.khe-org-summary-stat { text-align: center; }
.khe-org-summary-stat strong { display: block; font-size: 24px; color: var(--khe-brand-dark); line-height: 1; margin-bottom: 4px; }
.khe-org-summary-stat span { font-size: 11px; color: var(--khe-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.khe-org-summary-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--khe-border); }

/* Organizer dashboard */
.khe-dash-shell { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 24px 28px; }
.khe-dash-page-title { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.khe-dash-page-title h2 { margin: 0; font-size: 24px; }
.khe-page-subtitle { color: var(--khe-text-muted); font-size: 14px; margin-top: 2px; }
.khe-dash-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--khe-border); flex-wrap: wrap; }
.khe-dash-tab { padding: 10px 16px; font-weight: 600; color: var(--khe-text-muted); border: none; background: transparent; border-bottom: 2px solid transparent; cursor: pointer; font-size: 13px; text-decoration: none; }
.khe-dash-tab.active { color: var(--khe-brand); border-bottom-color: var(--khe-brand); }

.khe-organizer-event { background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 16px 20px; margin-bottom: 12px; display: grid; grid-template-columns: 70px 1fr auto; gap: 16px; align-items: center; }
.khe-org-date-block { background: var(--khe-brand-soft); border-radius: 8px; padding: 10px 8px; text-align: center; min-width: 70px; }
.khe-org-date-block .khe-month { font-size: 11px; font-weight: 700; color: var(--khe-brand-dark); text-transform: uppercase; }
.khe-org-date-block .khe-day { font-size: 22px; font-weight: 700; color: var(--khe-brand-dark); line-height: 1; }
.khe-org-event-info h4 { margin: 0 0 4px; font-size: 16px; }
.khe-org-event-info .khe-when { font-size: 13px; color: var(--khe-text-muted); }
.khe-org-event-info .khe-reg { font-size: 13px; color: var(--khe-text); margin-top: 2px; }
.khe-org-event-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.khe-roster { width: 100%; background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); border-collapse: collapse; font-size: 13px; overflow: visible; }
/* overflow is visible so the row overflow-menu isn't clipped — round corner cells to keep the table's rounded look */
.khe-roster thead th:first-child { border-top-left-radius: var(--khe-radius); }
.khe-roster thead th:last-child { border-top-right-radius: var(--khe-radius); }
.khe-roster tr:last-child td:first-child { border-bottom-left-radius: var(--khe-radius); }
.khe-roster tr:last-child td:last-child { border-bottom-right-radius: var(--khe-radius); }
.khe-roster-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.khe-roster th { background: #f7f9fa; text-align: left; padding: 10px 14px; font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--khe-border); }
.khe-roster td { padding: 10px 14px; border-bottom: 1px solid #f0f0f1; vertical-align: middle; }
.khe-roster tr.row-new-group td { border-top: 2px solid #d8dadc; }
.khe-mini-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-left: 4px; background: var(--khe-brand); color: #fff; }
.khe-mini-badge.member { background: var(--khe-brand-soft); color: var(--khe-brand-dark); }
.khe-status-checkedin { color: var(--khe-success); font-weight: 600; }
.khe-status-attended { color: var(--khe-success); }
.khe-status-confirmed { color: var(--khe-brand); font-weight: 600; }
.khe-status-noshow { color: var(--khe-text-muted); font-weight: 600; }

/* Hours granted / edited display + inline editor (grant-at-check-in) */
.khe-hours-cell .khe-hours-val { font-weight: 700; color: var(--khe-success); }
.khe-hours-cell .khe-hours-none { color: var(--khe-text-muted); }
.khe-hours-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.khe-hours-tag.is-granted { background: var(--khe-success-bg); color: var(--khe-success); }
.khe-hours-tag.is-edited { background: var(--khe-brand-soft); color: var(--khe-brand-dark); }
.khe-hours-editor { margin-top: 10px; background: var(--khe-card); border: 1px solid var(--khe-brand); border-radius: var(--khe-radius); box-shadow: var(--khe-shadow); padding: 12px 14px; max-width: 320px; }
.khe-hours-editor-label { display: block; font-size: 12px; font-weight: 600; color: var(--khe-text-muted); margin-bottom: 8px; }
.khe-hours-editor-row { display: flex; align-items: center; gap: 8px; }
.khe-hours-editor-row .khe-hours-input { width: 90px; padding: 7px 9px; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); font-size: 14px; }

.khe-walkin-form { margin-bottom: 18px; }
.khe-walkin-form input, .khe-walkin-form select { min-width: 140px; }

.khe-featured-image-upload { border: 2px dashed var(--khe-border-strong); border-radius: 8px; padding: 24px; text-align: center; background: #fafbfc; }
.khe-featured-image-upload.required-empty { border-color: var(--khe-danger); background: #fff5f5; }

.khe-form-actions { display: flex; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--khe-border); align-items: center; }

.khe-event-form select[multiple] { padding: 8px; min-height: 100px; }

/* Chip search widget — used on Create Event form (Co-organizers, Event Hosts)
   and on Roster screen (Manually Register Volunteer) */
.khe-chips-wrap { background: #fff; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); padding: 6px; min-height: 42px; position: relative; }
.khe-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.khe-chip { background: var(--khe-brand-soft); color: var(--khe-brand-dark); padding: 4px 8px 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; line-height: 1.4; }
.khe-chip.host { background: #e0f3e8; color: var(--khe-success); }
.khe-chip small { font-weight: 400; opacity: .8; }
.khe-chip-x { cursor: pointer; opacity: .6; padding: 0 4px; font-weight: 700; }
.khe-chip-x:hover { opacity: 1; }
.khe-chip-input { border: none; outline: none; padding: 6px 8px; font-size: 14px; min-width: 220px; flex: 1; background: transparent; font-family: inherit; }
.khe-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); box-shadow: 0 4px 18px rgba(0,0,0,.10); max-height: 280px; overflow-y: auto; z-index: 50; }
.khe-search-results .khe-result { padding: 9px 14px; cursor: pointer; font-size: 13px; }
.khe-search-results .khe-result:hover { background: var(--khe-brand-soft); }
.khe-search-results .khe-result small { color: var(--khe-text-muted); }
.khe-search-results .empty { padding: 12px 14px; color: var(--khe-text-muted); font-size: 13px; }

/* Multi-select dropdown panel — when used inside the Create Event form */
.khe-event-form .khe-ms-dropdown { position: relative; display: inline-block; }
.khe-event-form .khe-ms-panel.open { z-index: 30; }

.khe-rep-filters { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.khe-rep-filters input { padding: 6px 8px; border: 1px solid var(--khe-border-strong); border-radius: 4px; }

.khe-summary-box { background: #fff; border-left: 4px solid var(--khe-brand); padding: 14px 18px; margin-bottom: 24px; border-radius: 0 6px 6px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.khe-summary-stat strong { font-size: 22px; color: var(--khe-brand-dark); display: block; }
.khe-summary-stat span { font-size: 12px; color: var(--khe-text-muted); }

.khe-flash-notice { background: var(--khe-success-bg); border: 1px solid #c4e3cf; border-left: 4px solid var(--khe-success); border-radius: 6px; padding: 12px 18px; margin-bottom: 18px; color: var(--khe-success); font-size: 14px; font-weight: 500; }

/* Date + Time slot pair on Create/Edit Event form */
.khe-event-form .khe-datetime-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.khe-event-form .khe-datetime-pair input[type="date"],
.khe-event-form .khe-datetime-pair select { width: 100%; box-sizing: border-box; }

/* List view */
.khe-events-list { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 4px 18px; }
.khe-list-row { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--khe-border); text-decoration: none; color: inherit; transition: background .15s; }
.khe-list-row:hover { background: var(--khe-brand-soft); border-radius: 6px; padding-left: 12px; padding-right: 12px; }
.khe-list-row:last-child { border-bottom: none; }

/* Leaflet zoom controls — BuddyBoss theme overrides anchor colors site-wide,
   which makes the +/- glyphs invisible. Force them back to readable defaults. */
.leaflet-control-zoom a,
.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus,
.leaflet-control-zoom a:visited {
    color: #222 !important;
    background: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}
.leaflet-control-zoom a:hover { background: #f4f4f4 !important; }
.leaflet-control-attribution a { color: #0078a8 !important; }
.khe-list-date { flex-shrink: 0; width: 64px; text-align: center; padding: 8px 0; background: var(--khe-brand-soft); border-radius: var(--khe-radius-sm); }
.khe-list-date .m { font-size: 11px; color: var(--khe-brand-dark); text-transform: uppercase; font-weight: 500; letter-spacing: .5px; }
.khe-list-date .d { font-size: 22px; font-weight: 600; color: var(--khe-brand-dark); line-height: 1.1; }
.khe-list-date .w { font-size: 11px; color: var(--khe-brand-dark); }
.khe-list-main { flex: 1; min-width: 0; }
.khe-list-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--khe-text); }
.khe-list-meta { font-size: 13px; color: var(--khe-text-muted); }
.khe-list-right { flex-shrink: 0; display: flex; align-items: center; gap: 14px; }
.khe-list-spots { font-size: 13px; color: var(--khe-text-muted); }
.khe-list-spots strong { color: var(--khe-text); font-weight: 600; }
.khe-list-spots.full { color: #c14747; font-weight: 600; }
.khe-list-cta { background: var(--khe-brand); color: #fff; padding: 7px 14px; border-radius: var(--khe-radius-sm); font-size: 13px; font-weight: 500; white-space: nowrap; }
@media (max-width: 600px) {
    .khe-list-row { flex-wrap: wrap; }
    .khe-list-main { flex: 1 1 calc(100% - 80px); }
    .khe-list-right { flex: 1 1 100%; justify-content: flex-end; margin-top: 4px; }
}

/* Address autocomplete (Photon-powered) */
.khe-event-form .khe-address-autocomplete { position: relative; }
.khe-event-form .khe-address-autocomplete .khe-address-input { width: 100%; box-sizing: border-box; }
.khe-event-form .khe-address-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); box-shadow: 0 4px 18px rgba(0,0,0,.10); max-height: 320px; overflow-y: auto; z-index: 50; }
.khe-event-form .khe-address-result { padding: 10px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--khe-border); }
.khe-event-form .khe-address-result:last-child { border-bottom: none; }
.khe-event-form .khe-address-result:hover { background: var(--khe-brand-soft); }
.khe-event-form .khe-address-result .line1 { font-weight: 500; color: var(--khe-text); }
.khe-event-form .khe-address-result .line2 { font-size: 12px; color: var(--khe-text-muted); margin-top: 2px; }
.khe-event-form .khe-address-results .empty { padding: 12px 14px; color: var(--khe-text-muted); font-size: 13px; font-style: italic; }

/* =============================================================
 * Mobile responsive — phone breakpoint
 * Targets organizer dashboard surfaces that were originally
 * designed for desktop (My Events cards, roster table, Create
 * Event date/time fields).
 * ============================================================= */
@media (max-width: 600px) {

    /* My Events cards: date stays on left, content next to it,
       action buttons span full-width on a new row below */
    .khe-organizer-event {
        grid-template-columns: 56px 1fr;
        grid-template-areas:
            "date info"
            "actions actions";
        gap: 12px;
        padding: 14px 14px;
    }
    .khe-org-date-block {
        grid-area: date;
        min-width: 0;
        padding: 8px 6px;
    }
    .khe-org-date-block .khe-day { font-size: 18px; }
    .khe-org-event-info { grid-area: info; min-width: 0; }
    .khe-org-event-info h4 { font-size: 15px; line-height: 1.3; }
    .khe-org-event-info .khe-when,
    .khe-org-event-info .khe-reg { font-size: 12px; }
    .khe-org-event-actions {
        grid-area: actions;
        flex-direction: column;
        gap: 6px;
        margin-top: 4px;
    }
    .khe-org-event-actions > a,
    .khe-org-event-actions > button {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 10px 14px;
    }

    /* Roster table → card layout. Each row becomes a stacked card
       with labeled fields. data-label attributes are required on
       <td> elements (added in PHP). */
    .khe-roster,
    .khe-roster thead,
    .khe-roster tbody,
    .khe-roster tr,
    .khe-roster td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .khe-roster { border: none; background: transparent; }
    .khe-roster thead { display: none; } /* hide column headers on mobile */
    .khe-roster tr {
        background: #fff;
        border: 1px solid var(--khe-border);
        border-radius: var(--khe-radius);
        margin-bottom: 10px;
        padding: 12px 14px;
    }
    .khe-roster tr.row-new-group { border-top: 2px solid #d8dadc; }
    .khe-roster td {
        border-bottom: none;
        padding: 4px 0;
        text-align: left !important; /* override inline text-align:right */
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
    }
    .khe-roster td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        color: var(--khe-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
    }
    /* First cell (Name) is the card header — hide its label, full width */
    .khe-roster td:first-child {
        display: block;
        font-size: 15px;
        margin-bottom: 6px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f1;
    }
    .khe-roster td:first-child::before { display: none; }
    /* Last cell (Actions) — buttons go full-width below the label */
    .khe-roster td:last-child {
        display: block;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #f0f0f1;
    }
    .khe-roster td:last-child::before { display: block; margin-bottom: 6px; }
    .khe-roster td:last-child button { width: 100%; margin-bottom: 4px; }
    /* Keep the Check In button + overflow kebab inline on mobile (override the blanket full-width rule above) */
    .khe-roster td:last-child .khe-roster-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; }
    .khe-roster td:last-child .khe-roster-actions > .khe-checkin { flex: 1 1 auto; width: auto; margin-bottom: 0; }
    .khe-roster td:last-child .khe-more-btn { flex: 0 0 auto; width: 40px; margin-bottom: 0; }
    .khe-roster td:last-child .khe-more-menu button { margin-bottom: 0; }

    /* Date + time fields on Create/Edit Event form: stack vertically
       so each gets full width and content doesn't truncate */
    .khe-event-form .khe-datetime-pair {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* =============================================================
 * KH Give donation integration (v2.0.12)
 * Inline donation embed: mounts below the "Yes, I'd also like to
 * donate" checkbox in the event registration form. Both forms are
 * visible together; registration and donation submit independently.
 * ============================================================= */

/* Organizer form: "Add Donation Box to Registration" toggle block */
.khe-event-form .khe-donation-toggle-block { background: #f7f9fa; border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 14px 16px; margin: 8px 0 4px; }
.khe-event-form .khe-donation-toggle-block .khe-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.khe-event-form .khe-donation-toggle-block .khe-toggle-label input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.khe-event-form .khe-donation-toggle-block .khe-toggle-label input[type="checkbox"]:disabled { cursor: not-allowed; }
.khe-event-form .khe-donation-toggle-block .khe-toggle-label input[type="checkbox"]:disabled + strong { color: var(--khe-text-muted); }
.khe-event-form .khe-donation-toggle-block .khe-help { margin: 6px 0 0; font-size: 12px; color: var(--khe-text-muted); }
.khe-event-form .khe-donation-toggle-block .khe-help a { color: var(--khe-brand); text-decoration: underline; }
.khe-event-form .khe-donation-campaign-picker { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--khe-border); }
.khe-event-form .khe-donation-campaign-picker label { display: block; font-size: 12px; font-weight: 600; color: var(--khe-text); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.khe-event-form .khe-donation-campaign-picker select { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--khe-border-strong); border-radius: var(--khe-radius-sm); background: #fff; font-size: 14px; }

/* Public registration form: "Yes, I'd also like to donate" prompt + inline embed */
.khe-rsvp-wrap .khe-donation-prompt { background: var(--khe-brand-soft); border: 1px solid var(--khe-brand); border-radius: var(--khe-radius); padding: 14px 16px; margin: 12px 0; }
.khe-rsvp-wrap .khe-donation-prompt .khe-toggle-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--khe-text); }
.khe-rsvp-wrap .khe-donation-prompt .khe-toggle-label input[type="checkbox"] { margin: 3px 0 0; flex-shrink: 0; }
.khe-rsvp-wrap .khe-donation-embed-area { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--khe-brand); background: #fff; border-radius: var(--khe-radius-sm); padding: 16px; }
.khe-rsvp-wrap .khe-donation-embed-heading { font-size: 15px; font-weight: 600; color: var(--khe-text); margin-bottom: 4px; }
.khe-rsvp-wrap .khe-donation-embed-help { font-size: 12px; color: var(--khe-text-muted); margin: 0 0 12px; line-height: 1.45; }
.khe-rsvp-wrap .khe-donate-mount { /* container for KH Give mount — KH Give styles its own contents */ min-height: 40px; }
.khe-rsvp-wrap .khe-donation-fallback { margin: 0; color: var(--khe-text-muted); font-size: 13px; }

/* =============================================================
 * KH Search UI design system (v2.0.13)
 * Pulled verbatim from KH Member Search v1.8.1 to keep the
 * Events plugin filter bar visually identical to the Volunteer
 * directory. Brand-blue accent overrides the directory's purple.
 * Scoped to .kh-search-ui to prevent style bleed.
 * ============================================================= */

.kh-search-ui {
    --kh-accent:        #439bc0;
    --kh-accent-hover:  #3286a8;
    --kh-bg:            #ffffff;
    --kh-surface:       #f9fafb;
    --kh-border:        #e5e7eb;
    --kh-text:          #111827;
    --kh-text-muted:    #6b7280;
    --kh-radius:        8px;
    --kh-radius-lg:     12px;
    --kh-shadow:        0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --kh-shadow-hover:  0 10px 25px rgba(0,0,0,.12);
    --kh-transition:    0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    color: var(--kh-text);
}
.kh-search-ui *, .kh-search-ui *::before, .kh-search-ui *::after { box-sizing: inherit; }

.kh-view-toggle { display: flex; gap: 4px; margin-bottom: 16px; background: var(--kh-surface); border: 1px solid var(--kh-border); border-radius: var(--kh-radius); padding: 4px; width: fit-content; }
.kh-view-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: none; border-radius: calc(var(--kh-radius) - 2px); background: transparent; color: var(--kh-text-muted); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--kh-transition), color var(--kh-transition), box-shadow var(--kh-transition); }
.kh-view-btn svg { width: 15px; height: 15px; }
.kh-view-btn.active { background: var(--kh-bg); color: var(--kh-text); box-shadow: var(--kh-shadow); }
.kh-view-btn:not(.active):hover { color: var(--kh-text); }

.kh-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--kh-surface); border: 1px solid var(--kh-border); border-radius: var(--kh-radius-lg); padding: 18px 20px; margin-bottom: 20px; }
.kh-filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.kh-filter-search { flex: 1 1 220px; }
.kh-filter-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kh-text-muted); }

.kh-input, .kh-select { height: 40px; padding: 0 12px; border: 1px solid var(--kh-border); border-radius: var(--kh-radius); background: var(--kh-bg); font-size: 14px; color: var(--kh-text); outline: none; width: 100%; transition: border-color var(--kh-transition), box-shadow var(--kh-transition); -webkit-appearance: none; appearance: none; font-family: inherit; }
.kh-input:focus, .kh-select:focus { border-color: var(--kh-accent); box-shadow: 0 0 0 3px rgba(67,155,192,.15); }

.kh-input-wrap { position: relative; }
.kh-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--kh-text-muted); pointer-events: none; }
.kh-filter-search .kh-input { padding-left: 34px; }

.kh-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; cursor: pointer; }
.kh-select:disabled { background-color: #f3f4f6; cursor: not-allowed; color: var(--kh-text-muted); }

.kh-filter-actions { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 1px; flex-wrap: wrap; }
.kh-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: var(--kh-radius); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: background var(--kh-transition), color var(--kh-transition), box-shadow var(--kh-transition); white-space: nowrap; text-decoration: none; line-height: 1; }
.kh-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.kh-btn--primary { background: var(--kh-accent); color: #fff; }
.kh-btn--primary:hover { background: var(--kh-accent-hover); color: #fff; }
.kh-btn--ghost { background: transparent; color: var(--kh-text-muted); border: 1px solid var(--kh-border); }
.kh-btn--ghost:hover { background: var(--kh-border); color: var(--kh-text); }

/* More-filters expandable row inside the .kh-filters container.
   Uses .kh-filter-row-full positioning (full width, padding-top, top border)
   but overrides align-items so labeled fields stack correctly. */
.kh-filters .khe-filter-more { width: 100%; display: none; gap: 16px; flex-wrap: wrap; align-items: flex-end; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--kh-border); }
.kh-filters .khe-filter-more.open { display: flex !important; }

@media (max-width: 640px) {
    .kh-filters { flex-direction: column; align-items: stretch; gap: 10px; }
    .kh-filter-group { min-width: 100%; flex: none; }
    .kh-filter-search { flex: none; width: 100%; }
    .kh-filter-actions { width: 100%; }
    .kh-filter-actions .kh-btn { flex: 1; justify-content: center; }
}

/* =============================================================
 * Message organizer / Message hosts inline links (v2.0.18)
 * Small text link with mail icon, sits inline under the
 * Organizers row in the Event Details meta grid and under the
 * Event Hosts pill list. Lower visual weight than buttons —
 * doesn't compete with the Register CTA.
 * ============================================================= */
.khe-message-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--khe-brand, #439bc0); text-decoration: none; font-size: 13px; font-weight: 500; }
.khe-message-link:hover { color: var(--khe-brand-dark, #3286a8); text-decoration: underline; }
.khe-message-link svg { width: 13px; height: 13px; flex-shrink: 0; }

/* =============================================================
 * Group Events (v2.1.0)
 * ============================================================= */

/* Private group event gate page — shown to non-members trying to
   access a group event URL directly. Uses the same surface +
   centered card pattern as .khe-empty for consistency. */
.khe-group-gate {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px 28px;
    text-align: center;
    margin: 24px 0;
}
.khe-group-gate h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
}
.khe-group-gate p {
    color: #4b5563;
    font-size: 15px;
    margin: 8px 0 16px;
}
.khe-group-gate .khe-btn {
    margin-top: 8px;
}

/* =============================================================
 * Drop-in Events (v2.2.0)
 * ============================================================= */

/* --- Drop-in badge on card thumbnail --- */
.khe-dropin-card .khe-event-card-thumb {
    position: relative;
}
.khe-dropin-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--khe-accent, #439bc0);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
}

/* --- Schedule line on card --- */
.khe-dropin-schedule-line {
    font-size: 13px;
    color: var(--khe-text-muted, #4b5563);
    margin: 4px 0 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.khe-dropin-schedule-line svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* --- Drop-in wrapper (listing page) --- */
.khe-dropin-wrap .khe-events-grid {
    /* Same grid layout as regular events */
}

/* --- Drop-in toggle field in frontend form --- */
.khe-dropin-toggle-field {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    background: #f9fafb;
}
.khe-dropin-toggle-field .khe-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
}
.khe-dropin-toggle-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--khe-accent, #439bc0);
    cursor: pointer;
}
.khe-dropin-toggle-field .khe-help {
    margin: 8px 0 0 28px;
    font-size: 13px;
    color: var(--khe-text-muted, #6b7280);
}

/* --- Weekly schedule grid in frontend form --- */
.khe-dropin-schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.khe-dropin-day-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.khe-dropin-day-row.is-active {
    border-color: var(--khe-accent, #439bc0);
    background: #f0f8fc;
}
.khe-dropin-day-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    user-select: none;
}
.khe-dropin-day-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--khe-accent, #439bc0);
    cursor: pointer;
}
.khe-dropin-times {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    transition: opacity 0.15s;
}
.khe-dropin-times-hidden {
    opacity: 0.35;
    pointer-events: none;
}
.khe-dropin-times input[type="time"] {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
    background: #fff;
    min-width: 110px;
}
.khe-dropin-times input[type="time"]:focus {
    outline: none;
    border-color: var(--khe-accent, #439bc0);
    box-shadow: 0 0 0 3px rgba(67,155,192,0.15);
}
.khe-dropin-to {
    font-size: 13px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* --- Drop-in section in organizer dashboard --- */
.khe-dropin-dashboard-section {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 2px solid #e5e7eb;
}
.khe-dropin-section-heading {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.khe-dropin-section-sub {
    margin: 0 0 20px !important;
    color: #6b7280;
    font-size: 14px;
}
.khe-dropin-badge-sm {
    display: inline-block;
    background: var(--khe-accent, #439bc0);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
}
.khe-dropin-dash-row .khe-org-date-block {
    background: #e8f4f9;
    color: var(--khe-accent, #439bc0);
}
.khe-dropin-dash-row .khe-org-date-block .khe-month {
    font-size: 20px;
    line-height: 1;
}

/* --- Single event page: drop-in schedule block --- */
.khe-dropin-hours-block {
    background: #f0f8fc;
    border: 1px solid #b3d9ec;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 16px 0;
}
.khe-dropin-hours-block h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1a6a8a;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.khe-dropin-hours-table {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.khe-dropin-hours-table li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: #374151;
}
.khe-dropin-hours-table .khe-dh-day {
    font-weight: 600;
    min-width: 90px;
    color: #1a6a8a;
}

/* --- Event form save overlay (v2.2.2) --- */
.khe-save-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.khe-save-overlay-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 44px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    max-width: 340px;
    width: 90%;
}
.khe-save-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: var(--khe-accent, #439bc0);
    border-radius: 50%;
    animation: khe-spin 0.8s linear infinite;
    margin: 0 auto 20px;
}
@keyframes khe-spin {
    to { transform: rotate(360deg); }
}
.khe-save-overlay-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px;
}
.khe-save-overlay-sub {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* =============================================================
 * Drop-in hours card block + cover picker (v2.3.0)
 * ============================================================= */

/* --- Drop-in hours table block on card --- */
.khe-dropin-hours-card {
    background: var(--khe-surface, #f9fafb);
    border-radius: 8px;
    padding: 9px 12px;
    margin: 6px 0 8px;
}
.khe-dropin-hours-card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--khe-accent, #439bc0);
    margin: 0 0 6px;
}
.khe-dropin-hours-card-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.khe-dropin-hours-card-table td {
    padding: 2px 0;
    vertical-align: middle;
    border-bottom: none;
}
.khe-dh-abbr {
    color: #6b7280;
    font-weight: 600;
    width: 36px;
}
.khe-dh-range {
    color: #111827;
}
.khe-dh-divider td {
    padding-top: 5px;
}

/* --- Drop-in list row --- */
.khe-dropin-list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}
.khe-list-thumb-wrap {
    flex-shrink: 0;
}
.khe-list-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.khe-list-info {
    flex: 1;
    min-width: 0;
}
.khe-list-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.khe-badge-dropin-sm {
    display: inline-block;
    background: var(--khe-accent, #439bc0);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}
.khe-list-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
}
.khe-list-title a { color: inherit; text-decoration: none; }
.khe-list-title a:hover { color: var(--khe-accent, #439bc0); }
.khe-list-org,
.khe-list-when,
.khe-list-where {
    font-size: 12px;
    color: #6b7280;
    margin: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.khe-list-action {
    flex-shrink: 0;
}

/* --- Cover image picker in event creation form --- */
.khe-cover-options {
    display: flex;
    align-items: stretch;
    gap: 14px;
}
.khe-cover-upload-opt {
    flex: 1;
    cursor: pointer;
    border: 1.5px dashed #d1d5db;
    border-radius: 10px;
    padding: 20px 14px;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.khe-cover-upload-opt:hover {
    border-color: var(--khe-accent, #439bc0);
    background: #f0f8fc;
}
.khe-cover-upload-opt.khe-cover-upload-dimmed {
    opacity: 0.45;
}
.khe-cover-upload-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 2px;
    word-break: break-all;
}
.khe-cover-or {
    display: flex;
    align-items: center;
    color: #9ca3af;
    font-size: 13px;
    flex-shrink: 0;
}
.khe-cover-default-btn {
    flex: 1;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s;
    display: flex;
    flex-direction: column;
}
.khe-cover-default-btn img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}
.khe-cover-default-label {
    display: block;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}
.khe-cover-default-check {
    color: var(--khe-accent, #439bc0);
}
.khe-cover-default-btn.selected {
    border-color: var(--khe-accent, #439bc0);
}
.khe-cover-default-btn.selected .khe-cover-default-label {
    background: var(--khe-accent, #439bc0);
    color: #fff;
}
.khe-cover-default-btn.selected .khe-cover-default-check {
    color: #fff;
}
.khe-replace-cover-label {
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- Drop-in list row date block --- */
.khe-list-date-dropin {
    background: var(--khe-accent, #439bc0) !important;
}
.khe-list-date-dropin .m {
    font-size: 10px !important;
    color: #fff !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
.khe-list-date-dropin .d {
    font-size: 13px !important;
    color: #fff !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* Drop-in list date block override */
.khe-list-date-dropin {
    background: #e8f4f9;
}
.khe-list-date-dropin .m {
    font-size: 10px;
    color: #1a6a8a;
    letter-spacing: .3px;
}
.khe-list-date-dropin .d {
    font-size: 13px;
    font-weight: 700;
    color: var(--khe-accent, #439bc0);
    line-height: 1.2;
}

/* --- Dropin filter: today checkbox row --- */
.khe-filter-checks-row {
    flex: 0 0 100%;
    width: 100%;
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 10px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.khe-filter-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    user-select: none;
}
.khe-filter-check-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: var(--khe-accent, #439bc0);
    cursor: pointer;
}

/* --- Map: Search this area (v2.4.1) --- */
.khe-map-results-bar {
    display: flex;
    justify-content: center;
    padding: 14px 0 4px;
}
.khe-map-search-area-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}
.khe-map-results-list {
    margin-top: 24px;
    border-top: 2px solid #e5e7eb;
    padding-top: 18px;
}
.khe-map-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.khe-map-results-count {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

/* =============================================================
 * Shifts (v2.5.0)
 * ============================================================= */

/* --- Slot type toggle in event form --- */
.khe-slot-type-wrap { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.khe-slot-type-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--khe-border); border-radius: var(--khe-radius-sm); cursor: pointer; transition: border-color .15s, background .15s; background: var(--khe-card); }
.khe-slot-type-option.khe-slot-active { border-color: var(--khe-brand); background: var(--khe-brand-soft); }
.khe-slot-type-option input[type="radio"] { flex-shrink: 0; accent-color: var(--khe-brand); width: 15px; height: 15px; margin: 0; }
.khe-slot-type-text { display: flex; flex-direction: column; gap: 1px; }
.khe-slot-type-text strong { font-size: 14px; color: var(--khe-text); display: block; }
.khe-slot-active .khe-slot-type-text strong { color: var(--khe-brand-dark); }
.khe-slot-type-text .khe-help { margin: 0; font-size: 12px; }

/* --- Shift builder --- */
.khe-shift-builder {
    background: var(--khe-bg);
    border: 1px solid var(--khe-border);
    border-radius: var(--khe-radius-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.khe-shift-builder-header {
    display: grid;
    grid-template-columns: 1fr 1fr 90px 32px;
    gap: 8px;
    margin-bottom: 6px;
}
.khe-shift-col-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--khe-text-faint);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.khe-shift-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.khe-shift-row {
    display: grid;
    grid-template-columns: 1fr 1fr 90px 32px;
    gap: 8px;
    align-items: center;
}
.khe-shift-builder .khe-shift-time {
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--khe-border-strong);
    border-radius: var(--khe-radius-sm);
    font-size: 13px;
    background: #fff;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
    padding-right: 24px;
}
.khe-shift-cap {
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--khe-border-strong);
    border-radius: var(--khe-radius-sm);
    font-size: 13px;
    width: 100%;
}
.khe-shift-remove {
    width: 30px;
    height: 30px;
    border: 1px solid var(--khe-border);
    border-radius: var(--khe-radius-sm);
    background: transparent;
    color: var(--khe-text-faint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.khe-shift-remove:hover { color: var(--khe-danger); border-color: var(--khe-danger); }

/* --- Shift pills on grid card --- */
.khe-shift-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 4px 0 6px;
}
.khe-shift-pill {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--khe-brand-soft);
    color: var(--khe-brand-dark);
    font-weight: 500;
}
.khe-shift-pill-full {
    background: #f3f4f6;
    color: var(--khe-text-faint);
    text-decoration: line-through;
}

/* --- Shift picker on single event page --- */
.khe-shift-picker { margin-bottom: 24px; }
.khe-shift-subtext {
    font-size: 13px;
    color: var(--khe-text-muted);
    margin: 0 0 12px;
}
.khe-shift-registered-notice {
    background: var(--khe-success-bg);
    border: 1px solid #c4e3cf;
    border-radius: var(--khe-radius-sm);
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--khe-success);
    font-weight: 500;
}
.khe-shift-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.khe-shift-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--khe-border);
    border-radius: var(--khe-radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.khe-shift-item:not(.khe-shift-registered):not(.khe-shift-full):hover {
    border-color: var(--khe-brand);
    background: var(--khe-brand-soft);
}
.khe-shift-item.khe-shift-selected {
    border-color: var(--khe-brand);
    background: var(--khe-brand-soft);
}
.khe-shift-item.khe-shift-registered {
    border-color: var(--khe-success);
    background: var(--khe-success-bg);
    cursor: default;
}
.khe-shift-item.khe-shift-full {
    opacity: .55;
    cursor: not-allowed;
}
.khe-shift-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
}
.khe-shift-check-empty {
    border: 1.5px solid var(--khe-border-strong);
    background: #fff;
}
.khe-shift-check-selected {
    background: var(--khe-brand);
    border-color: var(--khe-brand);
}
.khe-shift-check-done {
    background: var(--khe-success);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
}
.khe-shift-check-disabled {
    border: 1.5px solid #d1d5db;
    background: #f3f4f6;
}
.khe-shift-info { flex: 1; }
.khe-shift-picker .khe-shift-time { font-size: 14px; font-weight: 600; color: var(--khe-text); background: none; border: none; height: auto; width: auto; padding: 0; }
.khe-shift-spots { font-size: 12px; color: var(--khe-text-muted); margin-top: 2px; }
.khe-shift-action { flex-shrink: 0; }
.khe-shift-select-hint { font-size: 12px; color: var(--khe-brand); font-weight: 500; }

.khe-shift-register-wrap { margin-bottom: 10px; }
.khe-shift-login-notice { font-size: 14px; color: var(--khe-text-muted); }

/* --- Roster grouped by shift --- */
.khe-roster-shift-group { margin-bottom: 20px; }
.khe-roster-shift-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--khe-brand-dark);
    background: var(--khe-brand-soft);
    padding: 6px 12px;
    border-radius: var(--khe-radius-sm);
    margin-bottom: 6px;
}

/* --- Single event breadcrumb --- */
.khe-event-breadcrumb {
    margin-bottom: 14px;
}
.khe-event-breadcrumb a {
    font-size: 13px;
    color: var(--khe-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color .15s;
}
.khe-event-breadcrumb a:hover {
    color: var(--khe-brand);
}

/* --- Cancelled event styles --- */
.khe-badge-cancelled {
    background: #fce8e8;
    color: #b00020;
}
.khe-cancelled-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fce8e8;
    border: 1px solid #f5c0c0;
    border-radius: var(--khe-radius-sm);
    color: #b00020;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* --- Shift roster (wireframe-matched) --- */
.khe-roster-summary {
    font-size: 13px;
    color: var(--khe-text-muted);
    margin-bottom: 8px;
}
.khe-shift-group-header td {
    background: var(--khe-brand-soft);
    padding: 0;
    border-top: 2px solid var(--khe-border);
}
.khe-shift-group-header td > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
}
.khe-roster-shifts tbody tr.khe-shift-group-header:first-child td {
    border-top: none;
}
.khe-shift-group-time {
    font-weight: 600;
    font-size: 13px;
    color: var(--khe-brand-dark);
}
.khe-shift-group-count {
    font-size: 12px;
    color: var(--khe-text-muted);
}
.khe-roster-empty-shift td {
    font-size: 13px;
    color: var(--khe-text-faint);
    font-style: italic;
    padding: 10px 14px;
}
.khe-roster-email {
    font-size: 11px;
    color: var(--khe-text-faint);
    margin-top: 1px;
}
.khe-checkin-cell { white-space: nowrap; }

/* --- Roster inline forms (Manually Register + Add Walk-in) --- */
.khe-roster-inline-form,
.khe-walkin-form {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid var(--khe-border-strong);
    border-radius: var(--khe-radius-sm);
    padding: 0;
    overflow: visible;
}
.khe-walkin-form { flex-wrap: wrap; }

/* Shift dropdown — fixed width, right divider */
.khe-roster-inline-shift {
    flex: 0 0 auto;
    width: 200px;
    height: 40px;
    border: none;
    border-right: 1px solid var(--khe-border);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0 8px;
}

/* Search chips wrap inside manual register */
.khe-roster-inline-search { flex: 1 1 auto; }
.khe-roster-inline-form .khe-chips-wrap {
    height: 40px;
    min-height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0 4px;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}
.khe-roster-inline-form .khe-chips { flex-wrap: nowrap; height: 100%; align-items: center; }
.khe-roster-inline-form .khe-chip-input { height: 100%; padding: 0 8px; line-height: 40px; border: none; background: transparent; box-shadow: none; }

/* Walk-in text inputs */
.khe-walkin-form .khe-walkin-name  { flex: 1 1 160px; height: 40px; border: none; border-left: 1px solid var(--khe-border); background: transparent; box-shadow: none; border-radius: 0; padding: 0 10px; }
.khe-walkin-form .khe-walkin-email { flex: 1 1 180px; height: 40px; border: none; border-left: 1px solid var(--khe-border); background: transparent; box-shadow: none; border-radius: 0; padding: 0 10px; }
.khe-walkin-form .khe-walkin-submit { flex: 0 0 auto; margin: 4px; height: 32px; padding: 0 14px; }

/* Walk-in without shift selector — first input has no left border */
.khe-walkin-form:not(:has(.khe-roster-inline-shift)) .khe-walkin-name { border-left: none; }

/* =============================================================
 * Mobile — single event page, shift picker, attendee form,
 * roster inline forms. Breakpoints: 640px and 480px.
 * ============================================================= */
@media (max-width: 640px) {

    /* Hero */
    .khe-event-hero { height: 180px; }
    .khe-event-hero-title { font-size: 22px; }
    .khe-event-hero-overlay { padding: 16px 18px; }

    /* Event details meta grid — already auto-fit but bump min down */
    .khe-event-meta-grid { grid-template-columns: 1fr; padding: 16px 18px; gap: 12px; }

    /* Spots box — stack number above progress bar */
    .khe-spots-box { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
    .khe-spots-num-wrap { display: flex; align-items: baseline; gap: 8px; }
    .khe-spots-num-label { font-size: 12px; }
    .khe-spots-progress-wrap { width: 100%; min-width: 0; }

    /* RSVP wrap */
    .khe-rsvp-wrap { padding: 16px 16px; }

    /* Attendee field rows — single column */
    .khe-field-row { grid-template-columns: 1fr; }
    .khe-field-row.thirds { grid-template-columns: 1fr 1fr; }

    /* Shift picker — tighten action area */
    .khe-shift-item { padding: 10px 12px; gap: 10px; }
    .khe-shift-action .khe-btn { font-size: 12px; padding: 5px 10px; }

    /* Shift extras block */
    .khe-shift-extras { margin-top: 12px; }

    /* Waivers */
    .khe-waivers-block { padding: 12px 14px; }
    .khe-waiver-row { align-items: flex-start; }

    /* Roster inline forms — stack shift selector above fields */
    .khe-roster-inline-form,
    .khe-walkin-form {
        flex-wrap: wrap;
        border-radius: var(--khe-radius-sm);
    }
    .khe-roster-inline-shift {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--khe-border);
        border-radius: 0;
    }
    .khe-roster-inline-form .khe-chips-wrap { width: 100%; }
    .khe-walkin-form .khe-walkin-name,
    .khe-walkin-form .khe-walkin-email {
        flex: 1 1 100%;
        border-left: none;
        border-top: 1px solid var(--khe-border);
    }
    .khe-walkin-form .khe-walkin-submit {
        width: calc(100% - 8px);
        justify-content: center;
        margin: 4px;
    }

    /* Roster shift group header — wrap count below time */
    .khe-shift-group-header td > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /* Dashboard page title — stack Edit/Back below heading */
    .khe-dash-page-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Breadcrumb */
    .khe-event-breadcrumb { margin-bottom: 10px; }

    /* Cancelled banner */
    .khe-cancelled-banner { font-size: 13px; padding: 10px 14px; }
}

@media (max-width: 480px) {
    /* Narrower phones — further tighten field layout */
    .khe-field-row.thirds { grid-template-columns: 1fr; }

    /* Attendee card remove button — full line */
    .khe-attendee-heading { flex-wrap: wrap; }

    /* Shift item — wrap action below info */
    .khe-shift-item { flex-wrap: wrap; }
    .khe-shift-action { width: 100%; display: flex; justify-content: flex-end; margin-top: 4px; }

    /* Party size picker inline → block */
    .khe-party-picker { display: block; }
    .khe-party-size { margin-top: 8px; width: 80px; }

    /* View toggle — labels hidden, icons only */
    .kh-view-btn { padding: 7px 10px; gap: 0; font-size: 0; }
    .kh-view-btn svg { width: 16px; height: 16px; }

    /* Event cards — slightly less padding */
    .khe-event-card-body { padding: 12px 14px 14px; }
}

/* --- Walk-in wrapper: fields in bordered container, button sits below --- */
.khe-walkin-wrap { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.khe-walkin-wrap .khe-walkin-form { width: 100%; }
.khe-walkin-wrap .khe-walkin-submit { flex: 0 0 auto; }

/* Remove button-specific overrides that no longer apply inside the form */
.khe-walkin-form .khe-walkin-submit { display: none; } /* safety: button is now outside */

/* Rounded corners on first/last child since overflow is now visible */
.khe-roster-inline-form > :first-child,
.khe-walkin-form > :first-child {
    border-radius: var(--khe-radius-sm) 0 0 var(--khe-radius-sm);
}
.khe-roster-inline-form > :last-child,
.khe-walkin-form > :last-child {
    border-radius: 0 var(--khe-radius-sm) var(--khe-radius-sm) 0;
}

/* --- Event Managers table mobile --- */
@media (max-width: 600px) {
    .khe-managers-table td { text-align: left !important; }
    .khe-managers-table td:last-child {
        text-align: left !important;
        padding-top: 6px;
    }
    .khe-managers-table .khe-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Dashboard tab divider + admin tabs --- */
.khe-dash-tab-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--khe-border);
    margin: 0 8px;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 2px;
}
.khe-dash-tab.khe-dash-tab-admin { font-size: 13px; }

/* --- Overflow menu (⋯ button on event rows) --- */
.khe-more-wrap {
    position: relative;
    display: inline-flex;
}
.khe-more-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--khe-border-strong);
    border-radius: var(--khe-radius-sm);
    background: var(--khe-card);
    color: var(--khe-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.khe-more-btn:hover { background: var(--khe-brand-soft); color: var(--khe-brand-dark); }
.khe-more-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--khe-card);
    border: 1px solid var(--khe-border-strong);
    border-radius: var(--khe-radius-sm);
    padding: 4px;
    z-index: 200;
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.khe-more-menu.open { display: block; }
.khe-more-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--khe-text);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: background .12s;
    white-space: nowrap;
}
.khe-more-item:hover { background: var(--khe-bg); }
.khe-more-item i { font-size: 14px; color: var(--khe-text-muted); }
.khe-more-item-danger { color: var(--khe-danger) !important; }
.khe-more-item-danger:hover { background: #fce8e8 !important; }
.khe-more-item-danger i { color: var(--khe-danger) !important; }
.khe-more-sep {
    height: 1px;
    background: var(--khe-border);
    margin: 3px 0;
}

/* ============================================================
 * Dashboard mobile polish — tabs, overflow menu, event rows
 * ============================================================ */

/* Tabs: horizontal scroll on narrow screens instead of wrapping */
.khe-dash-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.khe-dash-tabs::-webkit-scrollbar { display: none; }
.khe-dash-tab { white-space: nowrap; flex-shrink: 0; }
.khe-dash-tab-divider { flex-shrink: 0; }

@media (max-width: 600px) {
    /* Dashboard header: stack title + Create button vertically */
    .khe-dash-page-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .khe-dash-page-title .khe-btn { width: 100%; justify-content: center; }

    /* Event row actions: Manage Volunteers full-width, ⋯ right-aligned beside it */
    .khe-org-event-actions {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .khe-org-event-actions > a.khe-btn {
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
        padding: 9px 12px;
        width: auto !important;
    }
    .khe-more-wrap { flex-shrink: 0; }

    /* Overflow menu: anchor to right edge, cap width to screen */
    .khe-more-menu {
        right: 0;
        left: auto;
        max-width: calc(100vw - 32px);
    }

    /* Event Managers table: tighten on small screens */
    .khe-managers-table .manager-meta {
        word-break: break-all;
    }

    /* Manage Admins / Orientations pages: stack page title */
    .khe-dash-page-title .khe-btn-ghost {
        align-self: flex-start;
    }
}

@media (max-width: 400px) {
    /* Very narrow: tab text smaller to fit more in scroll area */
    .khe-dash-tab { font-size: 12px; padding: 10px 12px; }
    .khe-dash-tab.khe-dash-tab-admin { font-size: 11px; }
}

/* =============================================================
 * Orientation builder
 * ============================================================= */
.khe-orientation-builder { max-width: 700px; }
.khe-field-label-lg { font-size: 14px; font-weight: 600; color: var(--khe-text); display: block; margin-bottom: 6px; }
.khe-optional { font-size: 12px; font-weight: 400; color: var(--khe-text-muted); margin-left: 4px; }
.khe-ob-pages { border: 1px solid var(--khe-border); border-radius: var(--khe-radius); overflow: hidden; margin-bottom: 12px; }
.khe-ob-page { border-bottom: 1px solid var(--khe-border); }
.khe-ob-page:last-child { border-bottom: none; }
.khe-ob-page-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; background: var(--khe-card); }
.khe-ob-page-header:hover { background: var(--khe-bg); }
.khe-ob-drag-handle { color: var(--khe-text-faint); cursor: grab; font-size: 16px; }
.khe-ob-drag-disabled { opacity: .25; cursor: default; }
.khe-ob-page-num { width: 22px; height: 22px; border-radius: 50%; background: var(--khe-brand-soft); color: var(--khe-brand-dark); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.khe-ob-page-locked .khe-ob-page-num { background: var(--khe-bg); color: var(--khe-text-muted); }
.khe-ob-page-title { flex: 1; border: none; background: transparent; font-size: 14px; font-weight: 500; color: var(--khe-text); padding: 0; }
.khe-ob-page-title:focus { outline: none; border-bottom: 1px solid var(--khe-brand); }
.khe-ob-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.khe-ob-badge-welcome { background: #e8f3f8; color: #357c9b; }
.khe-ob-badge-confirmation { background: #e8f5ec; color: #1e6e3a; }
.khe-ob-badge-locked { background: var(--khe-bg); color: var(--khe-text-muted); }
.khe-ob-toggle-btn { background: none; border: none; cursor: pointer; color: var(--khe-text-muted); font-size: 14px; padding: 4px; margin-left: auto; }
.khe-ob-page-body { display: none; padding: 16px; background: var(--khe-bg); border-top: 1px solid var(--khe-border); }
.khe-ob-page-open .khe-ob-page-body { display: block; }
.khe-ob-block { border: 1px solid var(--khe-border); border-radius: var(--khe-radius-sm); background: var(--khe-card); margin-bottom: 8px; overflow: hidden; }
.khe-ob-block-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--khe-bg); border-bottom: 1px solid var(--khe-border); }
.khe-ob-block-drag { color: var(--khe-text-faint); cursor: grab; font-size: 14px; }
.khe-ob-block-type-label { font-size: 12px; font-weight: 600; color: var(--khe-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.khe-ob-block .khe-ob-block-content { border: none; border-radius: 0; background: transparent; font-size: 14px; padding: 10px; }
.khe-ob-block textarea.khe-ob-block-content { min-height: 80px; }
.khe-ob-add-block-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--khe-border); }
.khe-ob-add-label { font-size: 12px; color: var(--khe-text-muted); }
.khe-ob-min-time { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.khe-ob-min-time label { font-size: 13px; color: var(--khe-text-muted); white-space: nowrap; }
.khe-ob-min-time select { max-width: 160px; }
.khe-ob-checkboxes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--khe-border); }
.khe-ob-checkboxes-label { margin-bottom: 8px; }
.khe-ob-checkbox-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--khe-border); }
.khe-ob-checkbox-item:last-child { border-bottom: none; }
.khe-ob-checkbox-item input[type=text] { flex: 1; border: none; background: transparent; font-size: 13px; padding: 0; }
.khe-ob-checkbox-item input[type=text]:focus { outline: none; border-bottom: 1px solid var(--khe-brand); }
.khe-ob-add-page-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--khe-bg); border-top: 1px solid var(--khe-border); border-radius: 0 0 var(--khe-radius) var(--khe-radius); }

/* Waiver form */
.khe-waiver-form { max-width: 600px; }
.khe-waiver-form textarea { min-height: 160px; }

/* =============================================================
 * Orientation gate — volunteer step-through
 * ============================================================= */
.khe-orientation-gate { background: var(--khe-card); border: 1px solid var(--khe-border); border-radius: var(--khe-radius); padding: 24px; margin-bottom: 24px; }
.khe-orientation-gate-sub { font-size: 13px; color: var(--khe-text-muted); margin-bottom: 18px; }
.khe-bg-gate { text-align: center; }
.khe-bg-gate-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--khe-brand-soft); color: var(--khe-brand-dark); display: flex; align-items: center; justify-content: center; }
.khe-bg-gate-icon svg { width: 30px; height: 30px; }
.khe-bg-gate-title { margin-bottom: 8px; }
.khe-bg-gate-text { font-size: 15px; color: var(--khe-text); margin: 0 0 8px; }
.khe-bg-gate-note { font-size: 13px; color: var(--khe-text-muted); margin: 0 0 18px; }
.khe-bg-gate-cta { display: inline-block; }
.khe-og-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.khe-og-progress-bar { flex: 1; height: 6px; background: var(--khe-bg); border-radius: 999px; overflow: hidden; }
.khe-og-progress-fill { height: 100%; background: var(--khe-brand); border-radius: 999px; transition: width .3s ease; width: 0; }
.khe-og-progress-label { font-size: 12px; color: var(--khe-text-muted); white-space: nowrap; }
.khe-og-page-title { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.khe-og-page-content { margin-bottom: 20px; }
.khe-og-block-text { font-size: 14px; line-height: 1.7; color: var(--khe-text); margin-bottom: 14px; }
.khe-og-block-video, .khe-og-block-embed { margin-bottom: 14px; }
.khe-og-block-video iframe, .khe-og-block-embed iframe { width: 100%; border-radius: var(--khe-radius-sm); }
.khe-og-checkboxes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--khe-border); }
.khe-og-cb-label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; margin-bottom: 10px; cursor: pointer; line-height: 1.5; }
.khe-og-cb-label input[type=checkbox] { flex-shrink: 0; margin-top: 2px; accent-color: var(--khe-brand); width: 15px; height: 15px; }
.khe-og-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--khe-border); padding-top: 16px; }
.khe-og-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.khe-og-countdown { font-size: 13px; color: var(--khe-text-muted); font-weight: 500; }
.khe-og-complete:disabled, .khe-og-next:disabled { opacity: .5; cursor: not-allowed; }

/* Event form orientation picker */
.khe-orientation-picker { margin-top: 10px; }
.khe-ob-add-cb { margin-top: 8px; font-size: 13px; color: #439bc0; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 4px; }
.khe-ob-add-cb:hover { text-decoration: underline; }

/* --- Waiver saved card --- */
.khe-waiver-saved-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--khe-brand-soft);
    border: 1px solid var(--khe-border);
    border-radius: var(--khe-radius);
    padding: 14px 18px;
    margin-bottom: 20px;
}
.khe-waiver-saved-icon { font-size: 22px; color: var(--khe-brand); flex-shrink: 0; }
.khe-waiver-saved-body { flex: 1; min-width: 0; }
.khe-waiver-saved-title { font-size: 14px; font-weight: 600; color: var(--khe-text); }
.khe-waiver-saved-meta { font-size: 13px; color: var(--khe-text-muted); margin-top: 2px; }
.khe-waiver-saved-meta a { color: var(--khe-brand); text-decoration: none; }
.khe-waiver-saved-meta a:hover { text-decoration: underline; }