/*
 * Search sheet (UX-V2.md §3.5, §3.10, §4.12): the search dialog and the few
 * rules the results page and the 404 page need on top of the listing sheet.
 * Loaded on every page (handle clipmydeals-child-search) because the dialog is
 * printed on every page; the results page itself reuses the listing classes.
 *
 * Phone: a full-screen sheet. From 768px: a 640px panel 12vh from the top, at
 * most 70vh high, over a dim backdrop. Rows are 48px, targets 44px, the input
 * is 16px (iOS does not zoom). RTL-first: logical properties only. Motion only
 * inside `prefers-reduced-motion: no-preference`.
 *
 * Contents: 1 dialog, 2 bar, 3 body, 4 rows and chips, 5 pages.
 */

/* ---------- 1. Dialog ---------- */

/* The page behind does not scroll while the dialog is open (search.js sets the class). */
html.cmdc-search-lock {
	overflow: hidden;
}

/* From 768px the page stays visible behind the panel: the gutter stays, so a classic
   scrollbar leaving does not shift it. Below 768px the sheet covers the page. */
@media (min-width: 768px) {
	html.cmdc-search-lock {
		scrollbar-gutter: stable;
	}
}

.cmdc-search {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100vh; /* browsers without dvh */
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--cmdc-surface);
	color: var(--cmdc-text);
	font-family: var(--cmdc-font);
	inset: 0;
	overflow: hidden;
}

.cmdc-search[open] {
	display: flex;
	flex-direction: column;
}

.cmdc-search:focus {
	outline: 0;
}

.cmdc-search [hidden] {
	display: none;
}

.cmdc-search::backdrop {
	background: rgb(21 32 44 / 55%);
}

@media (min-width: 768px) {
	.cmdc-search {
		inline-size: min(640px, calc(100% - 2 * var(--cmdc-space-4)));
		block-size: auto;
		max-block-size: 70vh;
		inset-block: 12vh auto;
		margin-inline: auto;
		border-radius: var(--cmdc-radius);
		box-shadow: var(--cmdc-shadow);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cmdc-search[open],
	.cmdc-search[open]::backdrop {
		animation: cmdc-search-in var(--cmdc-dur-2) var(--cmdc-ease);
	}
}

@keyframes cmdc-search-in {
	from {
		opacity: 0;
	}
}

.cmdc-search__form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-block-size: 0;
	margin: 0;
}

/* ---------- 2. Bar: back, field, clear ---------- */

.cmdc-search__bar {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--cmdc-space-2);
	padding: var(--cmdc-space-2) var(--cmdc-space-3);
	padding-block-start: calc(var(--cmdc-space-2) + env(safe-area-inset-top, 0px));
	border-block-end: 1px solid var(--cmdc-border);
}

@media (min-width: 768px) {
	.cmdc-search__bar {
		padding-block-start: var(--cmdc-space-2);
	}
}

.cmdc-search__back {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--cmdc-tap);
	block-size: var(--cmdc-tap);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--cmdc-text);
	cursor: pointer;
}

.cmdc-search__field {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-inline-size: 0;
	block-size: 48px;
	border: 1px solid var(--cmdc-border-strong);
	border-radius: var(--cmdc-radius-pill);
	background: var(--cmdc-surface);
}

/* The ring goes around the pill: a ring on the borderless input would be clipped. */
.cmdc-search__field:focus-within,
.cmdc-search__back:focus-visible {
	outline: var(--cmdc-focus-width) solid var(--cmdc-focus);
	outline-offset: var(--cmdc-focus-offset);
}

.cmdc-search__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 100%;
	padding-block: 0;
	padding-inline: var(--cmdc-space-4) var(--cmdc-space-2);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--cmdc-text);
	font: inherit;
	font-size: max(1rem, 16px); /* 16px or more: iOS does not zoom */
	line-height: var(--cmdc-lh-ui);
	box-shadow: none;
	outline: 0;
	appearance: none;
}

/* The ring is the pill's (above); base.css would draw a second one on the field. */
.cmdc-search__input:focus,
.cmdc-search__input:focus-visible {
	outline: 0;
	box-shadow: none;
}

.cmdc-search__input::placeholder {
	color: var(--cmdc-muted);
	opacity: 1;
}

.cmdc-search__input::-webkit-search-cancel-button,
.cmdc-search__input::-webkit-search-decoration {
	display: none;
	appearance: none;
}

.cmdc-search__clear {
	flex: none;
	min-inline-size: var(--cmdc-tap);
	block-size: var(--cmdc-tap);
	padding-block: 0;
	padding-inline: var(--cmdc-space-3);
	border: 0;
	border-radius: var(--cmdc-radius-pill);
	background: none;
	color: var(--cmdc-primary);
	font: inherit;
	font-size: var(--cmdc-fs-small);
	font-weight: var(--cmdc-fw-label);
	cursor: pointer;
}

.cmdc-search__clear:focus-visible {
	outline: var(--cmdc-focus-width) solid var(--cmdc-focus);
	outline-offset: -2px;
}

/* ---------- 3. Body: the idle panel and the suggestions ---------- */

.cmdc-search__body {
	flex: 1 1 auto;
	min-block-size: 0;
	padding-block: var(--cmdc-space-2) calc(var(--cmdc-space-4) + var(--cmdc-safe-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cmdc-search__label {
	margin: 0;
	padding: var(--cmdc-space-3) var(--cmdc-space-4) var(--cmdc-space-1);
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
	font-weight: var(--cmdc-fw-label);
}

.cmdc-search__none {
	margin: 0;
	padding: var(--cmdc-space-3) var(--cmdc-space-4);
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-small);
}

/* ---------- 4. Rows and chips ---------- */

.cmdc-sgchips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmdc-space-2);
	margin: 0;
	padding: var(--cmdc-space-2) var(--cmdc-space-4);
	list-style: none;
}

.cmdc-sgchip {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--cmdc-tap);
	padding-inline: var(--cmdc-space-4);
	border: 1px solid var(--cmdc-border-strong);
	border-radius: var(--cmdc-radius-pill);
	background: var(--cmdc-surface);
	color: var(--cmdc-text);
	font-size: var(--cmdc-fs-small);
	line-height: var(--cmdc-lh-ui);
	text-decoration: none;
}

.cmdc-sg {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmdc-sg__link {
	display: flex;
	align-items: center;
	gap: var(--cmdc-space-3);
	min-block-size: 48px;
	padding-block: var(--cmdc-space-2);
	padding-inline: calc(var(--cmdc-space-4) - 3px) var(--cmdc-space-4);
	border-inline-start: 3px solid transparent;
	color: var(--cmdc-text);
	font-size: var(--cmdc-fs-body);
	line-height: var(--cmdc-lh-ui);
	text-decoration: none;
}

/* Row icons sit in a tinted square: category blue, product teal, guide violet (ink on tint 6.01 to 7.15). */
.cmdc-sg__row--p {
	--cmdc-tone-bg: var(--cmdc-hue-2);
	--cmdc-tone-ink: var(--cmdc-hue-2-ink);
}

.cmdc-sg__row--g {
	--cmdc-tone-bg: var(--cmdc-hue-4);
	--cmdc-tone-ink: var(--cmdc-hue-4-ink);
}

.cmdc-sg__row:not(.cmdc-sg__row--a) .cmdc-sg__link > .cmdc-icon:first-child {
	box-sizing: content-box;
	flex: none;
	padding: 6px;
	border-radius: 10px;
	background: var(--cmdc-tone-bg);
	color: var(--cmdc-tone-ink);
}

/* The idle category chips wear their hue. */
.cmdc-sgchip[data-tone] {
	border-color: transparent;
	background: var(--cmdc-tone-bg);
	color: var(--cmdc-tone-ink);
}

/* The title keeps its own direction (dir="auto"), so a Latin name truncates at its end. */
.cmdc-sg__t {
	flex: 0 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The kind is a word, so it never depends on colour. */
.cmdc-sg__kind {
	flex: none;
	margin-inline-start: auto;
	padding: 1px var(--cmdc-space-2);
	border: 1px solid var(--cmdc-border);
	border-radius: var(--cmdc-radius-pill);
	color: var(--cmdc-muted);
	font-size: var(--cmdc-fs-meta);
}

.cmdc-sg__row--a .cmdc-sg__link {
	color: var(--cmdc-primary);
	font-weight: var(--cmdc-fw-label);
}

.cmdc-sg__row--a .cmdc-icon:last-child {
	margin-inline-start: auto;
}

/* The active row: a bar at the inline start and a tint, so colour is not the only cue. */
.cmdc-sg__row.is-active .cmdc-sg__link {
	border-inline-start-color: var(--cmdc-primary);
	background: rgb(var(--cmdc-primary-rgb) / 8%);
}

.cmdc-sgchip:focus-visible,
.cmdc-sg__link:focus-visible {
	outline: var(--cmdc-focus-width) solid var(--cmdc-focus);
	outline-offset: -3px;
}

@media (hover: hover) {
	.cmdc-sg__link:hover {
		background: var(--cmdc-media);
	}

	.cmdc-sgchip:hover {
		border-color: var(--cmdc-primary);
		color: var(--cmdc-primary);
	}
}

/* ---------- 5. Pages: results and 404 ---------- */

/* The plain list of a results page without the card renderer: titles and our links only. */
.cmdc-sresults__plain {
	display: grid;
	gap: var(--cmdc-space-1);
	margin: var(--cmdc-space-3) 0;
	padding: 0;
	list-style: none;
}

.cmdc-sresults__plain a {
	display: flex;
	align-items: center;
	min-block-size: var(--cmdc-tap);
	color: var(--cmdc-link);
}

/* The search control of the 404 page is the header pill, here with a boundary on the light page. */
.cmdc-notfound__search {
	inline-size: min(100%, 36rem);
	margin-inline: auto;
	border: 1px solid var(--cmdc-border-strong);
}