/* =========================================================================
 * THE NEDA SELECT - the control's own geometry, for pages outside the
 * Creators' Corner.
 *
 * `assets/neda-select.js` replaces every native <select> it is pointed at
 * with a button and a listbox, because the browser draws a native list
 * itself - blue highlight, square corners, the system font - and no
 * stylesheet reaches it (user, 2026-09-03). The script has always been
 * general; its styling was not, and lived inside `creators-corner.css`,
 * which is why the eCampus contact page still showed an operating-system
 * dropdown while the Corner showed a Neda one.
 *
 * This file carries what the control needs anywhere: the arrow, the hidden
 * native element, the open card and its rows. It does NOT carry the FIELD
 * look - the border, the height, the padding, the focus ring. That belongs
 * to the page the control sits on, which already styles its own fields, and
 * `.neda-select__button` simply takes those rules alongside `input` and
 * `select` (see `neda-ecampus-ui/assets/neda-content-page.css`).
 *
 * Values are literal here rather than the Corner's custom properties: this
 * sheet is loaded on pages that never define them, and a var() that
 * resolves to nothing would drop a rule silently.
 *
 * DUPLICATION, KNOWINGLY: `creators-corner.css` still holds its own copy of
 * these rules and is unchanged. Removing them there needs the Corner
 * re-checked while signed in, which this pass could not do. Change both or
 * neither until that happens.
 * ========================================================================= */

/* ---- a dropdown wears a Neda arrow, not the operating system's ----------
 * `appearance: none` takes the native arrow away, so one has to be supplied
 * or the control loses the only thing that says it opens. Drawn as a
 * background image rather than a pseudo-element because a <select> cannot
 * carry one: the element is replaced, and ::after never renders inside it.
 *
 * A 30px square on a 10px radius inside a 40px field leaves 5px of air and
 * reads as a lid rather than a second button. Black on cyan is 9:1.
 */
.neda-form select,
.neda-form .neda-select__button {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='10' fill='%230EC4C5'/%3E%3Cpath d='M11 14.5l6 6 6-6' fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 5px center;
	background-size: 30px 30px;
	padding-inline-end: 46px;
}

/*
 * `background-position` has no logical form, so this is the one place that
 * has to name a side. RTL is told separately rather than left to inherit a
 * left-to-right answer.
 */
[dir="rtl"] .neda-form select,
[dir="rtl"] .neda-form .neda-select__button {
	background-position: left 5px center;
}

.neda-select {
	position: relative;
	inline-size: 100%;
}

.neda-form .neda-select__button {
	display: block;
	inline-size: 100%;
	text-align: start;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}

.neda-form .neda-select__button.is-placeholder {
	color: rgba(0, 0, 0, 0.72);
}

/* The native element: present for the form and for validation, invisible,
   and never in the way of a pointer. Not display:none - a browser will not
   report a hidden control's validity, and the message would be lost. */
.neda-select .neda-select__native {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 1px !important;
	block-size: 1px !important;
	padding: 0 !important;
	opacity: 0;
	pointer-events: none;
}

/* The open card: section 3 of the design rules - solid white, 12px radius
   is the dropdown's, 6px of padding on all four sides so a cherry row
   floats inside it rather than colliding with a corner. */
.neda-select__list {
	position: absolute;
	z-index: 60;
	inset-inline: 0;
	inset-block-start: calc(100% + 6px);
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	max-block-size: 320px;
	overflow: auto;
}

/* No ring on the list: when it holds focus, the cherry active row IS the
   focus indicator, as in an open native select. */
.neda-select__list:focus-visible {
	outline: none;
}

.neda-select__option {
	padding: 8px 14px;
	border-radius: 8px;
	color: #000000;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

/* The choice in force: text-box 4 with a bold label - the estate's
   "selected". The fill alone never says it; the weight is the signal. */
.neda-select__option.is-selected {
	background: #F1F3D6;
	font-weight: 700;
}

/* Hover and the keyboard cursor are one appearance, and they beat selected
   while the pointer or the cursor is on the row. */
.neda-select__option.is-active,
.neda-select__option.is-active.is-selected {
	background: #D7263D;
	color: #FFFFFF;
}

.neda-select__option[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Forced colours drop shadows and fills, so the card and the states are
   said with borders and system colours instead. */
@media (forced-colors: active) {
	.neda-select__list { border: 1px solid CanvasText; }
	.neda-select__option[aria-selected="true"] { border: 1px solid CanvasText; }
	.neda-select__option[aria-disabled="true"] { color: GrayText; opacity: 1; }
	.neda-select__option.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}