/* ==========================================================================
   Known Universe - Add/Edit Event Form
   Standalone screen (not a Dashboard tool panel), reached via the
   [ku_event_form] shortcode. Kept in its own file since this isn't part
   of the Host Dashboard workspace ku-dashboard-visibility-tools.css covers.

   Rebuilt 09-15-2026: too many fields to take in at once, on one long flat
   page - broken up into visibly separate cards (Event Basics / When /
   Where + Related Link / Who Can See This Event), one shared button style
   for every action, and the plugin's own Merienda font throughout instead
   of Public Sans.

   UPDATED by DBlake 09-16-2026 manually.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@400;500;600;700&display=swap');

.ku-event-form-screen {
	font-family: 'Merienda', serif !important;
	background: #FAF5EA;
	padding: 24px;
	border-radius: 14px;
}

.ku-event-form-screen input,
.ku-event-form-screen select,
.ku-event-form-screen textarea,
.ku-event-form-screen button {
	font-family: 'Merienda', serif;
}

/* Branded checkbox/radio color and a softer, on-brand focus ring instead of
   the browser's default bright blue - covers native checkboxes, radios,
   date/time pickers, and dropdowns. */
.ku-event-form-screen input[type="checkbox"],
.ku-event-form-screen input[type="radio"] {
	accent-color: #122B46;
}

.ku-event-field input:focus,
.ku-event-field select:focus,
.ku-event-field textarea:focus,
.ku-event-allday-checkbox input:focus {
	outline: none;
	border-color: #122B46;
	box-shadow: 0 0 0 3px #DFE4E9;
}

/* Background, border, and text color come from the shared .ku-success-box
   class (added on this element in the markup). */
.ku-event-form-success {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.ku-event-form-success-check {
	color: #6A8E22;
	font-weight: 700 !important;
}

/* ChatGPT update 2026-09-17: Keep the saved-event actions together so the
   creator can view the Event and then continue creating Events. */
.ku-event-form-success-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: auto;
}

.ku-event-form-success-action {
	white-space: nowrap;
}

@media (max-width: 600px) {
	.ku-event-form-success {
		flex-wrap: wrap;
	}

	.ku-event-form-success-actions {
		flex-basis: 100%;
		margin-left: 26px;
		justify-content: flex-start;
	}
}

.ku-event-form-prompt {
	background: #F5F7FA;
	border: 1px solid var(--ku-card-border, #DFE4E9);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.ku-event-form-prompt-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.ku-event-form-prompt-dismiss {
	font-size: 14px;
	color: var(--ku-muted, #657C91);
	text-decoration: underline;
}

/* ---- Layout: the form itself, and the card system every section uses ---- */

.ku-event-form-body {
	max-width: 960px;
}

.ku-event-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ku-event-card {
	background: #ffffff;
	border: 1px solid var(--ku-card-border, #DFE4E9);
	border-radius: 14px;
	padding: 26px 30px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ku-event-card-title {
	font-weight: 700 !important;
	font-size: 16px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #C08A2E !important;
	margin: 0 0 2px;
}

/* ChatGPT update 2026-09-17: Tightens Event Basics and gives Event Type
   and Event Image the balanced two-column layout shown in the mockup. */
.ku-event-basics-card {
	gap: 12px;
}

.ku-event-basics-bottom-row {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: start;
	gap: 20px 42px;
	padding-top: 2px;
}

.ku-event-basics-bottom-row > .ku-event-field {
	min-width: 0;
}

@media (min-width: 701px) {
	.ku-event-basics-bottom-row .ku-event-image-row {
		flex-wrap: nowrap;
		gap: 14px;
	}

	.ku-event-basics-bottom-row .ku-event-image-preview {
		width: 210px;
	}

	.ku-event-basics-bottom-row .ku-event-image-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
	}
}

/* ChatGPT update 2026-09-19: Compact Organizer & Contact accordion placed
   beneath Event Basics. It opens automatically when its own validation fails,
   and uses a 14px minimum for supporting text. */
.ku-event-organizer-card {
	display: block;
	padding: 0;
	overflow: hidden;
}

.ku-event-organizer-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 28px;
	background: #ffffff;
	cursor: pointer;
	list-style: none;
}

.ku-event-organizer-summary::-webkit-details-marker {
	display: none;
}

.ku-event-organizer-summary:hover,
.ku-event-organizer-summary:focus-visible {
	background: #FAFBFC;
}

.ku-event-organizer-summary:focus-visible {
	outline: 2px solid #DD9933;
	outline-offset: -4px;
}

.ku-event-organizer-summary .ku-event-card-title {
	margin: 0;
}

.ku-event-organizer-summary-meta {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	min-width: 0;
}

.ku-event-organizer-status {
	font-size: 14px;
	font-weight: 700 !important;
	line-height: 1.35;
	color: #566574;
	text-align: right;
}

.ku-event-organizer-arrow {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1;
	transition: transform 0.15s ease;
}

.ku-event-organizer-card[open] .ku-event-organizer-arrow {
	transform: rotate(180deg);
}

.ku-event-organizer-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 28px 24px;
	border-top: 1px solid var(--ku-card-border, #DFE4E9);
}

.ku-event-organizer-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ku-event-organizer-help {
	margin: -5px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ku-muted, #657C91);
}

/* Background, border, and text color come from the shared .ku-error-box
   class (added on this element in the markup). */
.ku-event-accordion-error {
}

/* v3.7.119: Live and server-validated chronological errors remain in the
   When card so the creator can correct the retained values without re-entry. */
/* Background, border, and text color come from the shared .ku-error-box
   class (added on this element in the markup, replacing the older
   .ku-branded-message / .ku-branded-message--error pair this used to
   carry). */
.ku-event-form-validation-error {
	display: block;
	margin: 12px 0 0;
}

.ku-event-form-validation-error[hidden] { display: none; }

@media (max-width: 600px) {
	.ku-event-organizer-summary {
		align-items: flex-start;
		padding: 18px 20px;
	}

	.ku-event-organizer-summary-meta {
		align-items: flex-end;
		flex-direction: column-reverse;
		gap: 5px;
	}

	.ku-event-organizer-panel {
		padding: 18px 20px 20px;
	}

	.ku-event-organizer-fields {
		grid-template-columns: 1fr;
	}
}

/* ChatGPT update 2026-09-19: Event-level RSVP setup uses a 14px minimum for
   supporting text. Responses and management live on the saved Event page. */
.ku-event-rsvp-card {
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.ku-event-rsvp-accordion-toggle {
	display: flex !important;
	width: 100% !important;
	height: auto !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 22px 28px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #122B46 !important;
	text-align: left !important;
	cursor: pointer;
}

.ku-event-rsvp-accordion-toggle:hover,
.ku-event-rsvp-accordion-toggle:focus-visible {
	background: #FAFBFC !important;
}

.ku-event-rsvp-accordion-toggle .ku-event-card-title {
	margin: 0;
}

.ku-event-rsvp-accordion-meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.ku-event-rsvp-status {
	display: inline-flex;
	align-items: center;
	border: 1px solid #9AA7B3;
	border-radius: 999px;
	padding: 4px 10px;
	background: #F3F5F7;
	font-size: 14px;
	font-weight: 700 !important;
	line-height: 1.25;
	color: #566574;
}

.ku-event-rsvp-status.is-enabled {
	border-color: #6A8E22;
	background: #EAF3E0;
	color: #3F5A14;
}

.ku-event-rsvp-accordion-arrow {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1;
	transition: transform 0.15s ease;
}

.ku-event-rsvp-accordion-toggle[aria-expanded="true"] .ku-event-rsvp-accordion-arrow {
	transform: rotate(180deg);
}

.ku-event-rsvp-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 28px 24px;
	border-top: 1px solid var(--ku-card-border, #DFE4E9);
}

.ku-event-rsvp-panel[hidden] {
	display: none;
}

.ku-event-rsvp-panel > .ku-event-rsvp-enable {
	padding-top: 18px;
}

@media (max-width: 560px) {
	.ku-event-rsvp-accordion-toggle {
		padding: 18px 20px !important;
	}

	.ku-event-rsvp-panel {
		padding: 0 20px 20px;
	}
}

.ku-event-rsvp-enable {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 600 !important;
	color: #122B46;
}

.ku-event-rsvp-enable input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.ku-event-rsvp-settings {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 4px;
}

.ku-event-rsvp-settings[hidden] {
	display: none;
}

.ku-event-rsvp-display {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 0;
	padding: 0;
	border: 0;
	color: #122B46;
}

.ku-event-rsvp-display legend {
	width: 100%;
	margin-bottom: 3px;
	font-size: 14px;
	font-weight: 600 !important;
}

.ku-event-rsvp-display label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
}

.ku-event-rsvp-display input {
	margin: 0;
}

.ku-event-rsvp-capacity-field {
	max-width: 320px;
}

.ku-event-rsvp-help {
	margin: -6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ku-muted, #657C91);
}

.ku-event-cards-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ku-event-cards-row .ku-event-card {
	margin-bottom: 0;
}

@media (max-width: 700px) {
	.ku-event-cards-row,
	.ku-event-basics-bottom-row {
		grid-template-columns: 1fr;
	}
}

.ku-event-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	color: var(--ku-text, #122B46);
}

.ku-event-field > span {
	font-weight: 600 !important;
}

.ku-event-field input[type="text"],
.ku-event-field input[type="url"],
.ku-event-field input[type="date"],
.ku-event-field input[type="time"],
.ku-event-field input[type="number"],
.ku-event-field select,
.ku-event-field textarea {
	border: 1px solid var(--ku-input-border, #DFE4E9);
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 15px;
}

/* ChatGPT update 2026-09-16: The Event Type field becomes a badge dropdown
   after JavaScript initializes; the native select remains the no-script fallback. */
.ku-event-type-picker,
.ku-event-type-custom-select {
	position: relative;
	width: 100%;
}

.ku-event-type-native-select {
	width: 100%;
}

.ku-event-type-trigger {
	display: flex !important;
	width: 100% !important;
	min-height: 42px !important;
	height: auto !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 7px 10px !important;
	border: 1px solid var(--ku-input-border, #DFE4E9) !important;
	border-radius: 6px !important;
	background: #ffffff !important;
	color: #122B46 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-align: left !important;
}

.ku-event-type-trigger:hover,
.ku-event-type-trigger:focus-visible,
.ku-event-type-trigger[aria-expanded="true"] {
	border-color: #122B46 !important;
	box-shadow: 0 0 0 2px rgba(18, 43, 70, 0.15) !important;
}

.ku-event-type-arrow {
	flex: 0 0 auto;
	color: var(--ku-muted, #657C91);
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1;
}

.ku-event-type-options {
	position: absolute;
	z-index: 40;
	top: calc(100% + 5px);
	right: 0;
	left: 0;
	max-height: 330px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--ku-card-border, #DFE4E9);
	border-radius: 9px;
	background: #ffffff;
	box-shadow: 0 8px 22px rgba(18, 43, 70, 0.16);
}

.ku-event-type-option {
	display: flex !important;
	width: 100% !important;
	min-height: 40px !important;
	height: auto !important;
	align-items: center !important;
	justify-content: flex-start !important;
	margin: 0 !important;
	padding: 6px 8px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-align: left !important;
}

.ku-event-type-option:hover,
.ku-event-type-option:focus-visible,
.ku-event-type-option[aria-selected="true"] {
	background: #F3F5F7 !important;
}

.ku-event-type-choice-badge {
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	border-radius: 10px;
	padding: 3px 9px;
	font-size: 13px;
	font-weight: 600 !important;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

.ku-event-checkbox-field {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.ku-event-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.ku-event-field-row .ku-event-field {
	flex: 1 1 200px;
}

.ku-event-field-label {
	font-weight: 600 !important;
	font-size: 15px;
	color: var(--ku-text, #122B46);
	margin-top: 4px;
}

.ku-event-radio-group,
.ku-event-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	font-size: 14px;
	align-items: center;
}

.ku-event-checkbox-inline {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* ---- Repeats: weekday checkboxes styled as day pills, the rest kept as
   plain, clearly separated fields (modern-browser progressive enhancement -
   without :has() support, these still work fine, just as plain checkboxes). ---- */

.ku-event-repeats-block {
	border-top: 1px solid var(--ku-card-border, #DFE4E9);
	padding-top: 10px;
	margin-top: 2px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ku-recurrence-sub {
	border-left: 2px solid var(--ku-card-border, #DFE4E9);
	padding-left: 10px;
	margin-left: 2px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Every N weeks + the weekday checkboxes side by side on one line -
   plain checkboxes, listed out, not pills. */
.ku-recurrence-weekly-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 18px;
}

.ku-recurrence-interval-field {
	flex: 0 0 90px;
}

.ku-recurrence-interval-field input {
	width: 100%;
}

.ku-recurrence-weekly .ku-event-checkbox-group {
	gap: 6px 14px;
	flex: 1 1 auto;
}

input[name="recurrence[end_count]"] {
	width: 130px;
	display: inline-block;
}

.ku-recurrence-end-date-display {
	display: inline-block;
	width: 190px;
}

/* Warning under Repeats when an event is longer than its repeat interval. */
.ku-event-repeat-length-warning {
	margin: 12px 0;
}

.ku-event-repeat-length-warning[hidden] {
	display: none;
}

.ku-recurrence-skip-add-note {
	margin: 0 0 8px;
	font-size: 14px;
	color: #657C91;
}

.ku-recurrence-skip-add-note[hidden] {
	display: none;
}

/* v3.7.116: one KU date language across the Event form and Calendar grid. */
.ku-event-date-display {
	min-width: 190px;
}

/* Background, border, and text color come from the shared .ku-warning-box
   class (added on this element in the markup, replacing the older
   .ku-branded-message / .ku-branded-message--warning pair this used to
   carry). */
.ku-event-past-date-warning {
	display: flex;
	gap: 6px;
	align-items: baseline;
	margin-top: 12px;
}

.ku-event-past-date-warning[hidden] {
	display: none;
}

.ku-recurrence-skip-add-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 560px) {
	.ku-recurrence-skip-add-row {
		grid-template-columns: 1fr;
	}
}

.ku-event-date-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	border: 1px solid var(--ku-card-border, #DFE4E9);
	border-radius: 8px;
	padding: 10px 12px;
}

/* ChatGPT update 2026-09-16: the recurrence action now leads its list so
   newly added exception dates read naturally underneath the button. */
.ku-event-date-list .ku-event-date-add {
	align-self: flex-start;
	margin-bottom: 2px;
}

.ku-event-date-list-row {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.ku-event-date-list-row .ku-event-exception-date-display {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- When card: All Day mini-box beside the Starts/Ends date+time fields
   on one line; reflows to All Day full-width, then each date+time pair, on
   a phone. ---- */

.ku-event-when-row {
	display: grid;
	grid-template-columns: 84px repeat(4, 1fr);
	gap: 12px;
	align-items: end;
}

.ku-event-allday-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1.5px solid var(--ku-input-border, #DFE4E9);
	border-radius: 8px;
	padding: 8px 6px;
	background: #FAFBFC;
	min-height: 62px;
}

.ku-event-allday-checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ku-event-allday-checkbox input {
	width: 18px;
	height: 18px;
}

@media (max-width: 640px) {
	.ku-event-when-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.ku-event-allday-box {
		grid-column: 1 / -1;
		flex-direction: row;
		min-height: 0;
	}
	.ku-event-when-starts,
	.ku-event-when-start-time,
	.ku-event-when-ends,
	.ku-event-when-end-time {
		grid-column: auto;
	}
}

/* ---- Who Can See This Event: plain radio buttons in one column on
   the left, with whichever detail (Roles checklist / Guest search)
   sits beside them in a second column. ---- */

/* ChatGPT update 2026-09-16: preserve breathing room after the paired
   Where and Related Link cards even though those cards have no bottom margin. */
.ku-event-who-card {
	margin-top: 20px;
}

/* ChatGPT update 2026-09-17: Widens the audience-choice column by about
   100px and stacks the columns before the wider minimum can feel cramped. */
.ku-audience-layout {
	display: grid;
	grid-template-columns: minmax(380px, 440px) 1fr;
	gap: 20px;
	align-items: start;
}

@media (max-width: 760px) {
	.ku-audience-layout {
		grid-template-columns: 1fr;
	}
}

.ku-audience-radio-list {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.ku-audience-radio-list label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

/* ChatGPT update 2026-09-17: Keep the permanent Event-audience meaning
   visible beside each radio choice, including future Calendar changes. */
.ku-audience-radio-list input[type="radio"] {
	flex: 0 0 auto;
	margin-top: 3px;
}

.ku-audience-choice-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ku-audience-choice-note {
	color: var(--ku-muted, #657C91);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.ku-audience-detail {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ChatGPT update 2026-09-16: role choices use the same compact, visible
   badge language as the dashboard while retaining native checkboxes. */
.ku-event-role-choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	cursor: pointer;
}

.ku-event-role-choice input {
	flex: 0 0 auto;
	margin: 0;
}

/* Badge look (.ku-badge + color modifiers, .ku-system-role-pill) lives in
   known-universe.css - the one sitewide definition. Do not copy it here. */

/* ---- Shared button system: one solid navy style (Save/Publish), one
   outlined navy style (Cancel, Send/Request Notification, Add to Activity
   Feed, the scope card's own Cancel/Save), and outlined-or-solid red for
   Delete. All the same rounded-rectangle shape. ---- */

.ku-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: 'Merienda', serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border-radius: 9px !important;
	padding: 10px 22px !important;
	border-style: solid !important;
	border-width: 1.5px !important;
	cursor: pointer;
	text-decoration: none !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	height: auto !important;
	width: auto !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ku-btn-primary {
	background: #122B46 !important;
	border-color: #122B46 !important;
	color: #ffffff !important;
}

.ku-btn-primary:hover {
	background: #0B1D30 !important;
	border-color: #0B1D30 !important;
	color: #ffffff !important;
}

.ku-btn-outline {
	background: #ffffff !important;
	border-color: #122B46 !important;
	color: #122B46 !important;
}

.ku-btn-outline:hover {
	background: #F3F5F7 !important;
}

.ku-btn-danger {
	background: #ffffff !important;
	border-color: #8B2A22 !important;
	color: #8B2A22 !important;
}

.ku-btn-danger:hover {
	background: #FBEDEC !important;
}

.ku-btn-danger-solid {
	background: #8B2A22 !important;
	border-color: #8B2A22 !important;
	color: #ffffff !important;
}

.ku-btn-danger-solid:hover {
	background: #6E211B !important;
	border-color: #6E211B !important;
}

/* The action row: Save, Cancel, Send Notification, and Add to Activity
   Feed grouped together, with Delete/Request Delete pushed alone to the
   far right. The Notification button is its own tiny <form> (so it can
   post independently) - a <form> sits fine as a plain flex item, so it
   needs no special CSS beyond removing its own default margin. */

.ku-event-form-action-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.ku-event-form-action-row .ku-btn-danger {
	margin-left: auto;
}

.ku-event-form-buttons {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.ku-event-form-inline-action {
	display: inline-flex;
	margin: 0;
}

.ku-event-scope-card,
.ku-event-delete-card {
	max-width: 960px;
	border: 1px solid var(--ku-card-border, #DFE4E9);
	border-radius: 14px;
	padding: 26px 30px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ku-event-scope-card h4,
.ku-event-delete-card h4 {
	margin: 0;
	color: #122B46;
}

/* ---- Description (real Role Notifications TinyMCE editor) ---- */

.ku-event-description-field .wp-editor-wrap,
.ku-event-description-field .wp-editor-container {
	border-radius: 8px;
	overflow: hidden;
}

.ku-event-description-field .wp-editor-container textarea {
	font-family: inherit;
}

/* Something outside this plugin also gets its hands on the Visual/Code
   tab buttons above the toolbar (the same rogue site-wide/theme button
   styling called out below, for the toolbar's own buttons) - they end up
   pulled out of their normal spot and dropped down on top of the
   toolbar row instead of sitting in their own row above it. Forcing them
   back to a plain, normally-flowing pair of buttons here fixes the
   overlap regardless of what that outside style is doing. */
.ku-event-description-field .wp-editor-tabs {
	position: static !important;
	float: right !important;
	display: block !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ku-event-description-field .wp-editor-tools {
	overflow: hidden !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

/* WordPress's default styling reserves a chunk of vertical space above
   the toolbar for the Visual/Code tabs to sit in (normally by pulling
   the toolbar up under them). Now that the tabs sit in their own plain
   row instead, that reserved space is just an empty gap - closing it
   here. */
.ku-event-description-field .wp-editor-container {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.ku-event-description-field .mce-tinymce,
.ku-event-description-field .mce-container.mce-panel {
	margin-top: 0 !important;
}

.ku-event-description-field .wp-switch-editor {
	position: static !important;
	float: none !important;
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 0 2px !important;
	padding: 3px 8px !important;
	top: auto !important;
	right: auto !important;
	line-height: normal !important;
}

/* Something outside this plugin (a theme or site-wide button style) is
   painting every plain <button> as a solid color pill with white text -
   it isn't coming from this stylesheet or from Role Notifications' own
   CSS (neither touches a bare <button> element), so rather than guess at
   its exact selector, every property that kind of rule would set is
   pinned back to a plain, readable toolbar here: transparent buttons,
   dark icons/text, the icon font restored by name so its glyphs render
   as icons instead of blank squares. */
.ku-event-description-field .mce-toolbar-grp,
.ku-event-description-field .mce-toolbar,
.ku-event-description-field .mce-container {
	background: #f0f0f1 !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.ku-event-description-field .mce-btn,
.ku-event-description-field .mce-listbox,
.ku-event-description-field .mce-menubtn {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

.ku-event-description-field .mce-btn button,
.ku-event-description-field .mce-listbox button,
.ku-event-description-field .mce-menubtn button {
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	color: #32373c !important;
	border: none !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 4px 5px !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	font-weight: normal !important;
	font-size: 14px !important;
	line-height: normal !important;
	text-indent: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
	white-space: nowrap !important;
}

.ku-event-description-field .mce-btn:hover button,
.ku-event-description-field .mce-btn.mce-active button {
	background: #dcdcde !important;
}

.ku-event-description-field .mce-btn.mce-disabled button,
.ku-event-description-field .mce-btn.mce-disabled .mce-ico,
.ku-event-description-field .mce-btn.mce-disabled .mce-txt {
	color: #a7aaad !important;
	opacity: 1 !important;
}

.ku-event-description-field .mce-ico {
	color: #32373c !important;
	background: none !important;
	text-indent: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.ku-event-description-field .mce-txt {
	font-family: inherit !important;
	color: #32373c !important;
	background: none !important;
	text-indent: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.ku-event-description-field .mce-caret {
	border-top-color: #32373c !important;
}


/* ---- Event image (the mockup's own "Event image" field: a preview plus
   a "Replace Image" button that opens WordPress's branded Media Library
   modal) ---- */

.ku-event-image-row {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.ku-event-image-preview {
	width: 220px;
	height: 78px;
	border-radius: 10px;
	flex: none;
	overflow: hidden;
	background: linear-gradient(135deg, #F0EEF2, #DFE4E9);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 12px;
}

.ku-event-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ku-event-image-preview span {
	font-size: 14px;
	font-weight: 600 !important;
	color: var(--ku-muted, #657C91);
}

.ku-event-image-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ku-event-select-image.ku-btn.ku-btn-primary {
	padding: 8px 18px;
}

.ku-event-date-add {
	align-self: flex-start !important;
	width: auto !important;
	height: auto !important;
	background: #ffffff !important;
	color: #122B46 !important;
	border: 1.5px solid #122B46 !important;
	border-radius: 8px !important;
	padding: 6px 14px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	line-height: 1.3 !important;
	cursor: pointer;
}

.ku-event-date-add:hover {
	background: #F3F5F7 !important;
}

.ku-event-date-remove {
	width: auto !important;
	height: auto !important;
	background: none !important;
	color: #8B2A22 !important;
	border: none !important;
	box-shadow: none !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 0 4px !important;
	cursor: pointer;
}

.ku-event-remove-image.ku-btn.ku-btn-primary {
	padding: 8px 18px;
}

.ku-event-remove-image[hidden] {
	display: none !important;
}

/* ---- Breadcrumb (World Home Page > World Calendar) and the World Name
   heading above the form. Heading per Dianne: 20px, #122B46, Merienda. ---- */

.ku-event-form-breadcrumb {
	font-size: 14px;
	color: var(--ku-muted, #657C91);
	margin-bottom: 6px;
}

.ku-event-form-breadcrumb a {
	color: #122B46 !important;
	text-decoration: underline !important;
}

.ku-event-form-breadcrumb a:hover {
	text-decoration: underline;
}

.ku-event-form-breadcrumb span {
	margin: 0 4px;
}

.ku-event-form-heading-mode {
	font-weight: 700 !important;
	font-size: 16px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #C08A2E !important;
	margin: 15px 0 15px 0;
}

.ku-event-form-heading {
	font-size: 20px;
	font-weight: 700 !important;
	font-family: 'Merienda', serif;
	color: #122B46 !important;
	margin: 0 0 16px;
}

.ku-event-form-view-btn.ku-btn.ku-btn-primary {
	text-decoration: none !important;
}

/* This page's own title area (the plain WordPress page title your theme
   prints automatically above the page) is hidden here, since the content
   below already has its own matching title built in - so the page doesn't
   end up showing two titles stacked on top of each other. Moved here from
   an inline <style> block in the PHP, which lessons-learned.md flags as a
   real DOM-breaking risk - this file already only loads on this shortcode's
   own page, so the scoping is unchanged. */
.entry-header, .entry-title, .page-title, .bb-page-title, #page-title-bar { display: none !important; }

/* ---- Activity Feed Share screen (class-ku-activity-share.php) ---- */

.ku-activity-share-form .ku-activity-share-title-label {
	font-weight: 700;
	font-size: 15px;
}

.ku-activity-share-form input[type="text"] {
	width: 100%;
}

.ku-activity-share-form .ku-activity-share-note {
	color: var(--ku-muted, #657C91);
	font-size: 14px;
}

/* RSVP turn-off warning (3.7.24): gold warning look - background, border,
   and text color come from the shared .ku-warning-box class (added on this
   element in the markup). */
.ku-event-rsvp-turnoff-card {
	margin-top: 12px;
}

.ku-event-rsvp-turnoff-card[hidden] {
	display: none !important;
}

.ku-event-rsvp-turnoff-warning {
	margin: 0 0 12px;
	font-weight: 600;
}

.ku-event-rsvp-turnoff-actions {
	display: flex;
	gap: 10px;
}

/* Getting Started Start button beside Save (saved events, Hosts and Site
   Admins only). Base pill look comes from the shared .ku-gs-start-btn rules
   in ku-dashboard-visibility-tools.css; this only sets its size here.
   !important needed: the theme styles every <button> with !important. */
.ku-event-form-action-row .ku-gs-start-btn {
	padding: 8px 16px !important;
	font-size: 14px !important;
}