/*
 * ntw_line_list — port of the prototype product index (`.a-index` / `.a-row`,
 * renamed `ntw-lines` / `ntw-lineitem`, see docs/class-map.md), the model chips and
 * the floating preview.
 *
 * Hover states read the bridged variables directly (accent for the name and the
 * profile stroke) — a pseudo-state cannot carry a hook class. The fill that carries
 * white text is `.ntw-pill` in core.css, on `--green-btn`, never `--green`.
 */

.ntw-lines { position: relative; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ntw-lineitem {
	position: relative; display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 190px 180px 44px;
	align-items: center; gap: 24px;
	padding: 30px 0; border-bottom: 1px solid var(--line);
	transition: padding .5s var(--ease);
}
.ntw-lineitem__n { font: 400 14px/1 var(--f-body); letter-spacing: .1em; }
.ntw-lineitem__name {
	font: 500 clamp(1.3rem, 2.5vw, 2.1rem)/1.25 var(--f-display); letter-spacing: -.02em;
	transition: transform .5s var(--ease), color .3s;
}
.ntw-lineitem__meta { font-size: 14px; }
.ntw-lineitem__meta b { display: block; font-weight: 500; }
.ntw-lineitem .ntw-prof {
	width: 100%; height: 46px; stroke: var(--ntw-w-label, var(--mist-faint)); stroke-width: 1.4;
	transition: stroke .3s;
}
.ntw-lineitem__go {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--line-2);
	transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ease);
}
.ntw-lineitem__thumb { display: none; }
.ntw-lineitem:hover .ntw-lineitem__name,
.ntw-lineitem:focus-visible .ntw-lineitem__name { transform: translateX(14px); color: var(--ntw-w-accent, var(--green)); }
.ntw-lineitem:hover .ntw-prof,
.ntw-lineitem:focus-visible .ntw-prof { stroke: var(--ntw-w-accent, var(--green)); }
.ntw-lineitem:hover .ntw-lineitem__go { transform: rotate(-45deg); }
.ntw-anim .ntw-lineitem:hover .ntw-prof path { animation: ntw-draw 1.1s var(--ease); }
@keyframes ntw-draw {
	from { stroke-dasharray: var(--dl) var(--dl); stroke-dashoffset: var(--dl); }
	to { stroke-dasharray: var(--dl) var(--dl); stroke-dashoffset: 0; }
}

/* The floating preview follows the pointer over the list (pointer:fine only). */
.ntw-float {
	position: fixed; left: 0; top: 0; z-index: 60; width: 300px; aspect-ratio: 3 / 4;
	border-radius: var(--r); overflow: hidden; pointer-events: none; opacity: 0;
	transform: translate3d(var(--fx, 0), var(--fy, 0), 0) scale(.86) rotate(-3deg);
	transition: opacity .35s, transform .5s var(--ease); box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.ntw-float.is-on { opacity: 1; transform: translate3d(var(--fx, 0), var(--fy, 0), 0) scale(1) rotate(0); }
.ntw-float img { width: 100%; height: 100%; object-fit: cover; }

.ntw-models { display: flex; flex-wrap: wrap; gap: 10px; margin: 44px 0 0; padding: 0; list-style: none; }
.ntw-models a {
	display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
	border: 1px solid var(--line-2); border-radius: 999px;
	font: 500 13px/1 var(--f-body); letter-spacing: .06em; color: var(--ntw-w-body, var(--mist-dim));
	transition: color .25s, border-color .25s, background-color .25s;
}

@media (max-width: 1180px) {
	.ntw-lineitem { grid-template-columns: 48px minmax(0, 1fr) 150px 44px; }
	.ntw-lineitem .ntw-prof { display: none; }
}
@media (max-width: 960px) {
	.ntw-float { display: none; }
}
@media (max-width: 720px) {
	.ntw-lineitem { grid-template-columns: 72px minmax(0, 1fr) 36px; gap: 16px; padding: 18px 0; }
	.ntw-lineitem__n, .ntw-lineitem__meta { display: none; }
	.ntw-lineitem__thumb { display: block; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--ink-3); }
	.ntw-lineitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
	.ntw-lineitem__go { width: 36px; height: 36px; }
}