/* Anders job search — keyword suggestions.
   Theme-authored.

   The approved design has no suggestions panel: its search box is a plain
   field, because the prototype it was drawn from had no inventory behind it.
   The feature is real on this board, so the panel is built here from the
   design's own vocabulary rather than invented — .fpanel's surface, .fopt's
   row, .cnt's number. It reads as the fourth panel on a bar that already has
   three, which is the point: nothing about it should look new.

   Not in anders-job-search.css because tools/port-design.js overwrites that
   file wholesale on every re-port. */

/* The field is the positioning context. .fsearch-wrap is the <form>, which is
   a flex item in the bar and therefore already sized; anchoring to .fsearch
   instead keeps the panel exactly as wide as the input and its buttons. */
.anders-design .fsearch {
	position: relative;
}

.anders-design .ksuggest {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 36;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
	box-shadow: var(--shadow-lg);
	text-align: left;
}

/* z-index sits one above .fpanel (35): both can be open for a frame while a
   pill panel closes, and the one the caret is in should be the one on top. */

.anders-design .ksuggest[hidden] {
	display: none;
}

.anders-design .ksuggest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 10px;
	border: 0;
	border-radius: var(--r-sm);
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--slate);
	text-align: left;
	cursor: pointer;
}

/* One state for hover and keyboard, so arrowing down the list looks exactly
   like running the mouse down it. .fopt:hover sets the same pair.

   Keyed to :focus, not an aria-selected flag, because the rows really do take
   focus — that is what lets Enter pick one without this component ever touching
   Enter in the field (see anders-suggest.js).

   The .ksuggest parent is in the selector to carry it to (0,3,0), matching
   anders-reset-bridge.css's `:is(button):not(.btn):focus` rule — which exists
   to strip hello-elementor's raspberry button reset, and would otherwise blank
   this row the moment it took focus, exactly as it once did to Apply Now. The
   tie breaks on order: this file is enqueued after the bridge. */
.anders-design .ksuggest .ksuggest-row:hover,
.anders-design .ksuggest .ksuggest-row:focus {
	background: var(--accent-soft);
	color: var(--accent-d);
}

/* The row is 100% wide inside a panel with 6px of padding, so a default outline
   is drawn hard against the panel edge. The fill above already says where focus
   is; this keeps a visible ring for anyone who needs one without the clipping. */
.anders-design .ksuggest .ksuggest-row:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/* The typed prefix, bolded inside each matched word. Inherits its colour so it
   reads as emphasis within the label rather than as a second thing to look at. */
.anders-design .ksuggest-row b {
	font-weight: 700;
}

.anders-design .ksuggest-ct {
	flex: none;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
	font-feature-settings: var(--tnum);
}

.anders-design .ksuggest .ksuggest-row:hover .ksuggest-ct,
.anders-design .ksuggest .ksuggest-row:focus .ksuggest-ct {
	color: inherit;
}

/* Below the pill breakpoint the bar stacks and the field spans it, so the
   panel does too — but the viewport is short, and a list that runs under the
   fold cannot be scrolled to without dismissing itself. */
@media (max-width: 767px) {
	.anders-design .ksuggest {
		max-height: 46vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}