/*
 * NCP Search 0.3.0 — the phone's full-screen search view (F5). Plan of record: docs/recon/site-search-3.md §E.5
 * (.s2-phone, __bar, __back, __input, __clear, __mic, __chips, __list). Core's tokens and resets apply; the product rows
 * are the card stylesheet's compact rows.
 *
 * ⚠ EVERY RULE IS INSIDE @media (max-width: 768px): the view exists only on a phone, and a desktop never reads a line
 * of this file. ⚠ The input is 16 px (iOS zooms anything smaller). ⚠ Every target is at least 44 px; nothing depends on
 * hover. ⚠ One column. ⚠ The page behind does not scroll (core's N.scrollLock); the list scrolls inside the view, and a
 * scroll that reaches its end does not move the page (overscroll-behavior).
 */

@media (max-width: 768px) {
	.ncp-s2.s2-phone {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		background: var(--s2-bg);
		color: var(--s2-text);
		font-size: 15px;
		animation: ncp-s2-fade var(--s2-dur) var(--s2-ease) both;
	}

	.ncp-s2.s2-phone[hidden] {
		display: none;
	}

	/* ── the bar: back, the pinned 16 px input, clear, the microphone ─────────────────────────────────────────── */
	.ncp-s2 .s2-phone__bar {
		display: flex;
		flex: none;
		align-items: center;
		gap: 4px;
		min-height: 60px;
		padding: var(--s2-sp-1);
		padding-top: max(var(--s2-sp-1), env(safe-area-inset-top));
		border-bottom: 1px solid var(--s2-line);
		background: var(--s2-bg);
	}

	.ncp-s2 .s2-phone__back,
	.ncp-s2 .s2-phone__clear,
	.ncp-s2 .s2-phone__mic {
		width: 44px;
		height: 44px;
		color: var(--s2-text);
	}

	.ncp-s2 .s2-phone__clear[hidden] {
		display: none;
	}

	.ncp-s2 .s2-phone__mic.is-on {
		color: var(--s2-accent-text, var(--s2-accent));
	}

	.ncp-s2 .s2-phone__input {
		flex: 1 1 auto;
		min-width: 0;
		height: 44px;
		margin: 0;
		padding: 0 12px;
		border: 1px solid var(--s2-line-strong);
		border-radius: var(--s2-radius);
		background: var(--s2-bg);
		color: var(--s2-text);
		font-size: 16px;
		line-height: 1.2;
		box-shadow: none;
		-webkit-appearance: none;
		appearance: none;
	}

	.ncp-s2 .s2-phone__input::-webkit-search-cancel-button,
	.ncp-s2 .s2-phone__input::-webkit-search-decoration {
		-webkit-appearance: none;
		display: none;
	}

	.ncp-s2 .s2-phone__input:focus {
		outline: var(--s2-focus);
		outline-offset: 0;
	}

	/* ── the body: chips, then one scrolling column ────────────────────────────────────────────────────────── */
	.ncp-s2 .s2-phone__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: var(--s2-sp-1) var(--s2-sp-2) max(var(--s2-sp-3), env(safe-area-inset-bottom));
	}

	.ncp-s2 .s2-phone__chipbar[hidden] {
		display: none;
	}

	.ncp-s2 .s2-phone__chipbar {
		margin-bottom: var(--s2-sp-2);
	}

	/* recent searches: chips that scroll sideways */
	.ncp-s2 .s2-phone__chips {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--s2-sp-1);
		margin: 0 calc(var(--s2-sp-2) * -1);
		padding: 2px var(--s2-sp-2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ncp-s2 .s2-phone__chips::-webkit-scrollbar {
		display: none;
	}

	.ncp-s2 .s2-phone__chips .s2-pill {
		flex: none;
		min-height: 44px;
		font-size: 15px;
	}

	.ncp-s2 .s2-phone__label {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s2-sp-1);
		min-height: 44px;
		color: var(--s2-mute);
		font-size: 14px;
		font-weight: 600;
	}

	.ncp-s2 .s2-phone__clear-recent {
		min-width: 44px;
		min-height: 44px;
		padding: 0 4px;
		color: var(--s2-mute);
		font-size: 14px;
		font-weight: 500;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.ncp-s2 .s2-phone__section + .s2-phone__section,
	.ncp-s2 .s2-phone__rows + .s2-phone__section,
	.ncp-s2 .s2-phone__section + .s2-phone__zero {
		margin-top: var(--s2-sp-1);
	}

	/* ── a row that searches or opens a page: 44 px at least, one column ───────────────────────────────────── */
	.ncp-s2 .s2-phone__row {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 48px;
		padding: 4px 0;
		border-bottom: 1px solid var(--s2-line);
		color: var(--s2-text);
		font-size: 15px;
		line-height: 1.3;
		text-decoration: none;
	}

	.ncp-s2 .s2-phone__row > .s2-ic {
		color: var(--s2-mute);
	}

	.ncp-s2 .s2-phone__row:active {
		background: rgba(0, 0, 0, .05);
	}

	.ncp-s2 .s2-phone__row--shortcut {
		margin-bottom: var(--s2-sp-1);
		padding: 4px 12px;
		border: 1px solid var(--s2-line);
		border-radius: var(--s2-radius);
		font-weight: 500;
	}

	.ncp-s2 .s2-phone__row--shortcut > .s2-ic:last-child {
		color: var(--s2-text);
	}

	.ncp-s2 .s2-phone__text {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ncp-s2 .s2-phone__row .s2-pill__count {
		flex: none;
		font-size: 14px;
	}

	.ncp-s2 .s2-phone__thumb {
		display: grid;
		place-items: center;
		flex: none;
		width: 40px;
		height: 40px;
		object-fit: contain;
		border-radius: 4px;
		background: var(--s2-bg);
		color: var(--s2-mute);
	}

	.ncp-s2 .s2-sugg__in {
		color: var(--s2-mute);
	}

	.ncp-s2 .s2-completion mark {
		font-weight: 700;
	}

	/* the compact product rows (core's .s2-row) in one column */
	.ncp-s2 .s2-phone__list .s2-row {
		border-bottom: 1px solid var(--s2-line);
	}

	.ncp-s2 .s2-phone__list--stale {
		opacity: .72;
	}

	.ncp-s2 .s2-phone__note {
		margin: var(--s2-sp-1) 0;
	}

	.ncp-s2 .s2-phone__hint {
		margin-top: var(--s2-sp-2);
	}

	.ncp-s2 .s2-phone__zero {
		padding: var(--s2-sp-2) 0 var(--s2-sp-1);
	}

	.ncp-s2 .s2-phone__nothing {
		margin-bottom: 4px;
		font-size: 17px;
		font-weight: 600;
	}

	.ncp-s2 .s2-phone__person {
		display: flex;
		flex-direction: column;
		gap: var(--s2-sp-1);
		margin-top: var(--s2-sp-2);
	}

	.ncp-s2 .s2-phone__person .s2-btn,
	.ncp-s2 .s2-phone__all .s2-btn {
		width: 100%;
		min-height: 48px;
		white-space: normal;
	}

	.ncp-s2 .s2-phone__all {
		margin-top: var(--s2-sp-2);
	}

	/* skeleton lines in the final boxes */
	.ncp-s2 .s2-phone__skel {
		display: block;
		height: 16px;
		margin: 16px 0;
		border-radius: 4px;
		background: rgba(0, 0, 0, .07);
	}

	.ncp-s2 .s2-phone__skel + .s2-phone__skel {
		width: 60%;
	}
}