/*
 * CILI: the header's one text box and its suggestion list (ADR-0061 D7, the owner's decision 5b of 2026-11-11; cili/text-search.php,
 * assets/js/header-search.js; WEB-1110 to WEB-1119).
 *
 * The box is the site's search field: one pill of the fill gray at `size.field` with the round ink button of `size.control` at its
 * end (WEB-652), as the app's search. The list under it is a panel of the page's background with the outline hairline; each row shows
 * the magnifier, the name (the typed part gray, the rest bold in ink) and, at its end, the row's kind (Category, Medium, Style,
 * Subject, Mood, Search) small, in the muted gray (since 2026-11-14; before, the kind stood under the name). The site is
 * grayscale: no colour comes from here, only the tokens.
 */

html body .lcr-search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

html body .lcr-search__form {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-8);
	min-height: var(--lcr-size-field);
	margin: 0;
	padding: 0 var(--lcr-space-4) 0 var(--lcr-space-16);
	background-color: var(--lcr-color-fill);
	border-radius: var(--lcr-radius-pill);
}

html body .lcr-search__input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--lcr-size-control);
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-web-type-body-font-size);
	color: var(--lcr-color-ink);
	-webkit-appearance: none;
	appearance: none;
}

html body .lcr-search__input[type="search"]::placeholder {
	color: var(--lcr-color-muted);
}

html body .lcr-search__input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* The field itself never draws the frame's ring (layout-frame.css): the pill does, for the keyboard only. After a click or a tap
   nothing is drawn (assets/js/pointer-focus.js marks <html> `lcr-pointer`), as the owner asked on 2026-11-11. */
html body .lcr-search__input[type="search"],
html body .lcr-search__input[type="search"]:is(:hover, :focus, :focus-visible) {
	outline-style: none !important;
	border: 0;
	box-shadow: none;
}

html:not(.lcr-pointer) body .lcr-search__form:has(.lcr-search__input:focus-visible) {
	outline: var(--lcr-web-focus-ring) solid var(--lcr-color-focus) !important;
	outline-offset: var(--lcr-web-focus-offset);
}

/* The chip (the owner's request of 2026-11-11; cili_header_search(), assets/js/header-search.js; WEB-1116 to WEB-1119): on a page that
   is a search the pill shows that search before the field, as the old header search did, with an "x" that clears it. The pill is
   already the fill gray, so the chip is an outlined pill on the page's background (the site's other chips are outlined too): the
   ink text, the chip outline hairline, at most `size.control-small` high. The field is empty while it stands, with no
   placeholder. Tokens only, so the dark theme follows.
   One row, at every width (the owner's choice of 2026-11-14, as the search fields of iOS: the pill never grows taller than
   one line): the chips never wrap, they scroll sideways inside the pill with no scrollbar drawn, each at its own width; while
   chips lie beyond an edge, that edge fades (`is-more-start`, `is-more-end`, set by assets/js/header-search.js; without the
   script the row still scrolls). The mask reads only the alpha of its ramp: the opaque ink token, then transparent. */
html body .lcr-search__chips {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--lcr-space-4);
	min-width: 0;
	max-width: 80%;
	padding: var(--lcr-space-4) 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

html body .lcr-search__chips::-webkit-scrollbar {
	display: none;
}

html body [data-lcr-edges].is-more-end {
	-webkit-mask-image: linear-gradient(to right, var(--lcr-color-ink) calc(100% - var(--lcr-space-24)), transparent);
	mask-image: linear-gradient(to right, var(--lcr-color-ink) calc(100% - var(--lcr-space-24)), transparent);
}

html body [data-lcr-edges].is-more-start {
	-webkit-mask-image: linear-gradient(to left, var(--lcr-color-ink) calc(100% - var(--lcr-space-24)), transparent);
	mask-image: linear-gradient(to left, var(--lcr-color-ink) calc(100% - var(--lcr-space-24)), transparent);
}

html body [data-lcr-edges].is-more-start.is-more-end {
	-webkit-mask-image: linear-gradient(to right, transparent, var(--lcr-color-ink) var(--lcr-space-24), var(--lcr-color-ink) calc(100% - var(--lcr-space-24)), transparent);
	mask-image: linear-gradient(to right, transparent, var(--lcr-color-ink) var(--lcr-space-24), var(--lcr-color-ink) calc(100% - var(--lcr-space-24)), transparent);
}

html body .lcr-search__chips .lcr-search__chip {
	flex: none;
	max-width: 16rem; /* a long subject's name still ends in an ellipsis rather than filling the row */
}

html body .lcr-search__chip {
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	gap: var(--lcr-space-4);
	min-width: 0;
	max-width: 100%;
	height: var(--lcr-size-control-small);
	box-sizing: border-box;
	padding: 0 var(--lcr-space-4) 0 var(--lcr-space-12);
	background-color: var(--lcr-color-background);
	border: var(--lcr-size-hairline) solid var(--lcr-color-chip-outline);
	border-radius: var(--lcr-radius-pill);
	color: var(--lcr-color-ink);
}

/* A colour's chip shows a round swatch of the colour before its name, as the artwork page's Color row does
   (layout-artwork.css): 12px, the colour from LCR Core as the custom property `--lcr-swatch` set by the markup (the one colour of
   the interface, allowed because it is the artwork's), the chip outline's hairline so white and black show in both themes. */
html body .lcr-search__swatch {
	flex: none;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	background-color: var(--lcr-swatch);
	border: var(--lcr-size-hairline) solid var(--lcr-color-chip-outline);
	border-radius: var(--lcr-radius-pill);
}

html body .lcr-search__chip:has(.lcr-search__swatch) {
	padding-left: var(--lcr-space-8);
}

html body .lcr-search__chip-label {
	min-width: 0;
	overflow: hidden;
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-web-type-label-font-weight);
	line-height: var(--lcr-web-type-label-line-height);
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--lcr-color-ink);
}

html body .lcr-search__chip-clear {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: transparent;
	color: var(--lcr-color-ink);
	cursor: pointer;
	text-decoration: none;
}

html body .lcr-search__chip-clear:hover {
	background-color: var(--lcr-color-fill);
}

html body .lcr-search__chip-clear .lcr-icon {
	width: calc(var(--lcr-size-icon) * 2 / 3);
	height: calc(var(--lcr-size-icon) * 2 / 3);
}

html body .lcr-search--chip .lcr-search__form {
	padding-left: var(--lcr-space-8); /* the chip stands as close to the pill's end as the pill's own button */
}

/* Beside the chips the empty field starts narrow, so the chips' row takes the pill's width (up to its 80%) and the field the rest. */
html body .lcr-search--chip .lcr-search__input[type="search"] {
	width: var(--lcr-space-48);
	flex-basis: var(--lcr-space-48);
}

html body .lcr-search--chip .lcr-search__input[type="search"]::placeholder {
	color: transparent;
}

html body .lcr-search__submit {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--lcr-size-control);
	height: var(--lcr-size-control);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
	cursor: pointer;
}

html body .lcr-search__list {
	position: absolute;
	z-index: 30;
	top: calc(100% + var(--lcr-space-6));
	right: 0;
	left: 0;
	max-height: min(70vh, 480px);
	margin: 0;
	padding: var(--lcr-space-6);
	overflow-y: auto;
	list-style: none;
	background-color: var(--lcr-color-background);
	border: var(--lcr-size-hairline) solid var(--lcr-color-outline);
	border-radius: var(--lcr-radius-tile);
}

html body .lcr-search__list[hidden] {
	display: none;
}

html body .lcr-search__row {
	margin: 0;
	padding: 0;
	border-radius: var(--lcr-radius-field);
}

html body .lcr-search__row.is-active,
html body .lcr-search__row:hover {
	background-color: var(--lcr-color-fill);
}

/* A row reads like Pinterest's (the owner's request of 2026-11-14, the kinds kept): the magnifier (the site's SVG), then the name,
   whose leading part that the visitor typed is regular in the muted gray and the rest bold in ink, then the kind, small and muted,
   at the row's end on one line; when the name leaves it no room (a phone), the kind wraps under the name. */
html body .lcr-search__link {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-12);
	padding: var(--lcr-space-8) var(--lcr-space-12);
	color: var(--lcr-color-ink);
	text-decoration: none;
}

html body .lcr-search__link > .lcr-icon {
	flex: none;
	width: calc(var(--lcr-size-icon) * 2 / 3);
	height: calc(var(--lcr-size-icon) * 2 / 3);
	color: var(--lcr-color-ink);
}

html body .lcr-search__text {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--lcr-space-12);
	row-gap: var(--lcr-space-4);
	min-width: 0;
}

html body .lcr-search__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: var(--lcr-web-type-body-font-size);
	font-weight: var(--lcr-font-weight-bold);
	line-height: var(--lcr-web-type-small-line-height);
	color: var(--lcr-color-ink);
}

html body .lcr-search__typed {
	font-weight: var(--lcr-font-weight-regular);
	color: var(--lcr-color-muted);
}

html body .lcr-search__rest {
	font-weight: var(--lcr-font-weight-bold);
	color: var(--lcr-color-ink);
}

html body .lcr-search__kind {
	flex: none;
	margin-left: auto;
	white-space: nowrap;
	font-size: var(--lcr-type-caption-font-size);
	font-weight: var(--lcr-type-caption-font-weight);
	line-height: var(--lcr-type-caption-line-height);
	color: var(--lcr-color-muted);
}

html body .ulz-header .lcr-search__form {
	min-height: var(--lcr-size-field);
}

html body .ulz-mobile-search .lcr-search {
	width: 100%;
}

/*
 * The filter row under the results title of a selection address (cili_refinements_html(), ADR-0072 D5; WEB-1396, one row since the
 * owner's decision of 2026-11-14, WEB-1485): ONE line that never wraps and scrolls sideways, as the header's chip row does
 * ("Bulinele de filtre pune-le pe o singură linie cu blur înspre final și derulare la stânga"), its edge fading while more lies
 * beyond it (the mask above, set by assets/js/scroll-edges.js; without the script the row still scrolls and its links work, and
 * the browser scrolls a focused chip into view). First the values chosen, filled chips of the ink token with the on-ink text and
 * an "x" (`--on`), then the values to add, outlined "+ Oil" chips; every chip is `size.control-small` high, the label type, and
 * a link. The chips are inline SVG. Tokens only, so the dark theme follows. The list's own padding leaves room for the focus ring,
 * which an overflow would clip, and the negative margin gives it back.
 */
html body .lcr-refine {
	margin: var(--lcr-space-8) 0 0;
}

html body .lcr-refine__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--lcr-space-8);
	margin: 0 calc(-1 * var(--lcr-space-4));
	padding: var(--lcr-space-4);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
}

html body .lcr-refine__list::-webkit-scrollbar {
	display: none;
}

html body .lcr-refine__item {
	flex: none;
	margin: 0;
	padding: 0;
}

/* `a.` and `span.` keep these above the vendor's rules for a link's colour and decoration (the chosen chip with no address is a span). */
html body a.lcr-refine__chip,
html body span.lcr-refine__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-4);
	height: var(--lcr-size-control-small);
	box-sizing: border-box;
	padding: 0 var(--lcr-space-12) 0 var(--lcr-space-8);
	background-color: var(--lcr-color-background);
	border: var(--lcr-size-hairline) solid var(--lcr-color-chip-outline);
	border-radius: var(--lcr-radius-pill);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-web-type-label-font-weight);
	line-height: var(--lcr-web-type-label-line-height);
	text-decoration: none;
	white-space: nowrap;
}

html body a.lcr-refine__chip:hover {
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
}

/* A value chosen: the selected state of a chip, the ink ground with the on-ink text, its "x" at the end. */
html body a.lcr-refine__chip.lcr-refine__chip--on,
html body span.lcr-refine__chip.lcr-refine__chip--on,
html body a.lcr-refine__chip.lcr-refine__chip--on:hover {
	padding: 0 var(--lcr-space-8) 0 var(--lcr-space-12);
	background-color: var(--lcr-color-ink);
	border-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body a.lcr-refine__chip.lcr-refine__chip--on:hover {
	opacity: 0.85;
}

html body .lcr-refine__chip .lcr-icon {
	flex: none;
	width: calc(var(--lcr-size-icon) * 2 / 3);
	height: calc(var(--lcr-size-icon) * 2 / 3);
}

/* A colour's swatch before its name, as the header chip's: the colour is the artwork's (LCR Core's `swatch`); the on-ink hairline
   keeps white and black visible on the ink ground in both themes. */
html body .lcr-refine__swatch {
	flex: none;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	background-color: var(--lcr-swatch);
	border: var(--lcr-size-hairline) solid var(--lcr-color-on-ink);
	border-radius: var(--lcr-radius-pill);
}

html body .lcr-refine__label {
	white-space: nowrap;
}