/* Tablet Chooser — see assets/js/chooser.js (design: research/tablet-chooser.md §2.5–2.6) */

#ls-chooser {
	--lsc-blue: var(--primary, #0066cc);
	--lsc-blue-dark: var(--primary-dark, #00579a);
	--lsc-ink: #1d2733;
	--lsc-muted: #556070;
	--lsc-line: #dde5ee;
	--lsc-soft: #f4f7fb;
	--lsc-green: #1b7f3b;
	--lsc-orange: #a24a00;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	color: var(--lsc-ink);
	font-size: 17px;
	line-height: 1.55;
}

#ls-chooser *,
#ls-chooser *::before,
#ls-chooser *::after {
	box-sizing: border-box;
}

#ls-chooser.is-results {
	max-width: 1180px;
}

#ls-chooser a {
	color: var(--lsc-blue);
}

.lsc-loading {
	padding: 60px 0;
	text-align: center;
	color: var(--lsc-muted);
}

.lsc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- progress and screens */
.lsc-progress {
	height: 6px;
	margin: 0 0 22px;
	background: var(--lsc-soft);
	border-radius: 6px;
	overflow: hidden;
}

.lsc-progress-bar {
	height: 100%;
	background: var(--lsc-blue);
	border-radius: 6px;
	transition: width .15s ease;
}

.lsc-screen {
	animation: lsc-in .15s ease;
}

@keyframes lsc-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.lsc-screen { animation: none; }
	.lsc-progress-bar { transition: none; }
}

.lsc-kicker {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--lsc-blue);
}

.lsc-title,
#ls-chooser h1.lsc-q {
	margin: 0 0 12px;
	font-size: clamp(27px, 4vw, 38px);
	line-height: 1.18;
	font-weight: 800;
	color: var(--lsc-ink);
}

.lsc-title:focus,
.lsc-q:focus {
	outline: none;
}

.lsc-lead {
	margin: 0 0 18px;
	font-size: 19px;
	color: var(--lsc-muted);
}

.lsc-promises {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.lsc-promises li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 30px;
}

.lsc-promises li::before {
	content: "✓";
	position: absolute;
	left: 4px;
	font-weight: 700;
	color: var(--lsc-green);
}

/* question topics (intro) */
.lsc-topics {
	margin: 34px 0 0;
	padding: 22px 24px 20px;
	border: 1px solid var(--lsc-line);
	border-radius: 14px;
	background: var(--lsc-soft);
}

#ls-chooser .lsc-topics-title {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--lsc-ink);
}

.lsc-topics ol {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lsc-topic;
}

.lsc-topics li {
	position: relative;
	margin: 0;
	padding-left: 38px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	counter-increment: lsc-topic;
}

.lsc-topics li::before {
	content: counter(lsc-topic);
	position: absolute;
	left: 0;
	top: -1px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--lsc-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
}

.lsc-topics-opt {
	margin: 14px 0 0;
	font-size: 15px;
	color: var(--lsc-muted);
}

@media (max-width: 600px) {
	.lsc-topics { padding: 18px 16px 16px; }
	.lsc-topics ol { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- questions */
.lsc-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 22px;
}

.lsc-back {
	min-height: 40px;
	padding: 6px 12px 6px 6px;
	font: inherit;
	font-weight: 600;
	color: var(--lsc-blue);
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.lsc-back:hover {
	background: var(--lsc-soft);
}

.lsc-count {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--lsc-blue);
}

.lsc-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.lsc-legend {
	display: block;
	width: 100%;
	padding: 0;
}

.lsc-help {
	margin: 0 0 16px;
	color: var(--lsc-muted);
}

.lsc-help:empty {
	display: none;
}

.lsc-options {
	display: grid;
	gap: 12px;
}

.lsc-options-2col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lsc-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	margin: 0;
	padding: 12px 16px;
	background: #fff;
	border: 2px solid var(--lsc-line);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .12s, background-color .12s;
}

.lsc-option:hover {
	border-color: #9fbbe0;
}

.lsc-option input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--lsc-blue);
}

.lsc-option:focus-within {
	box-shadow: 0 0 0 3px rgba(0, 102, 204, .3);
}

.lsc-option.is-on {
	border-color: var(--lsc-blue);
	background: #f1f6fd;
}

.lsc-option-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.lsc-option-label {
	font-size: 17.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lsc-ink);
}

.lsc-option-help {
	font-size: 15.5px;
	line-height: 1.35;
	color: var(--lsc-muted);
}

.lsc-count-badge {
	font-weight: 400;
	color: var(--lsc-muted);
}

.lsc-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 12px;
	font-size: 15px;
	color: var(--lsc-muted);
}

.lsc-or::before,
.lsc-or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--lsc-line);
}

.lsc-sub {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--lsc-line);
}

.lsc-q2 {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
}

.lsc-check {
	margin-top: 18px;
}

.lsc-info {
	margin: 20px 0 0;
	padding: 14px 16px;
	font-size: 16px;
	background: var(--lsc-soft);
	border-radius: 10px;
}

.lsc-note {
	margin: 18px 0;
	padding: 12px 16px;
	font-size: 16px;
	background: #fff8ea;
	border: 1px solid #f1d39b;
	border-radius: 10px;
}

/* ---------------------------------------------------------------- buttons */
.lsc-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 28px 0 0;
}

.lsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 24px;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	border: 2px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color .12s, border-color .12s;
}

.lsc-btn:focus-visible,
.lsc-linkbtn:focus-visible,
.lsc-back:focus-visible {
	outline: 3px solid rgba(0, 102, 204, .45);
	outline-offset: 2px;
}

.lsc-btn-primary {
	color: #fff !important;
	background: var(--lsc-blue);
}

.lsc-btn-primary:hover {
	background: var(--lsc-blue-dark);
}

.lsc-btn-primary[disabled] {
	background: #a9bfd8;
	cursor: not-allowed;
}

.lsc-btn-ghost {
	color: var(--lsc-blue) !important;
	background: #fff;
	border-color: var(--lsc-line);
}

.lsc-btn-ghost:hover {
	border-color: var(--lsc-blue);
}

.lsc-btn-link,
.lsc-linkbtn {
	padding: 4px 6px;
	font: inherit;
	color: var(--lsc-blue);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.lsc-btn-link {
	min-height: 48px;
	color: var(--lsc-muted);
}

.lsc-btn-amazon {
	color: #111 !important;
	font-weight: 500;
	background: linear-gradient(180deg, #f7dfa5, #f0c14b);
	border-color: #c9a33d;
}

.lsc-live {
	margin: 16px 0 0;
	font-size: 15.5px;
	color: var(--lsc-muted);
}

/* ---------------------------------------------------------------- results */
.lsc-answers {
	margin: 0 0 6px;
	font-size: 16px;
	color: var(--lsc-muted);
}

.lsc-disclosure {
	margin: 0 0 22px;
	font-size: 15px;
	color: var(--lsc-muted);
}

.lsc-picks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.lsc-result {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--lsc-line);
	border-radius: 16px;
	overflow: hidden;
}

.lsc-result-best {
	border: 2px solid var(--lsc-blue);
	box-shadow: 0 6px 22px rgba(0, 60, 130, .10);
}

.lsc-role {
	margin: 0;
	padding: 9px 18px;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--lsc-blue);
	background: var(--lsc-soft);
}

.lsc-result-best .lsc-role {
	color: #fff;
	background: var(--lsc-blue);
}

.lsc-img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
	padding: 16px 20px 4px;
}

.lsc-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.lsc-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 8px 20px 20px;
}

#ls-chooser .lsc-name {
	margin: 6px 0 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 800;
}

#ls-chooser .lsc-name a {
	color: var(--lsc-ink);
	text-decoration: none;
}

#ls-chooser .lsc-name a:hover {
	color: var(--lsc-blue);
	text-decoration: underline;
}

.lsc-fit {
	margin: 0;
	font-size: 15.5px;
	color: var(--lsc-muted);
}

.lsc-band {
	font-weight: 700;
}

.lsc-fit-excellent .lsc-band,
.lsc-fit-good .lsc-band {
	color: var(--lsc-green);
}

.lsc-fit-fair .lsc-band,
.lsc-fit-weak .lsc-band {
	color: var(--lsc-orange);
}

.lsc-blurb {
	margin: 0;
	font-size: 16px;
}

.lsc-reasons {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15.5px;
	line-height: 1.45;
}

.lsc-reasons li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 24px;
}

.lsc-why::before {
	content: "✓";
	position: absolute;
	left: 2px;
	font-weight: 700;
	color: var(--lsc-green);
}

.lsc-warn::before {
	content: "!";
	position: absolute;
	left: 6px;
	font-weight: 800;
	color: var(--lsc-orange);
}

.lsc-specs {
	margin: 4px 0 0;
	padding: 10px 12px;
	font-size: 15px;
	font-weight: 600;
	background: var(--lsc-soft);
	border-radius: 8px;
}

.lsc-price {
	margin: 0;
	font-size: 15.5px;
	color: var(--lsc-muted);
}

.lsc-conf {
	margin: 0;
	font-size: 14.5px;
	color: var(--lsc-orange);
}

.lsc-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

.lsc-actions .lsc-btn {
	width: 100%;
	min-height: 46px;
	padding: 8px 16px;
	font-size: 16px;
}

.lsc-sponsored {
	font-size: 13.5px;
	color: #7a7a7a;
	text-align: center;
}

#ls-chooser .lsc-sub {
	margin: 44px 0 14px;
	padding: 0;
	border: 0;
	font-size: 25px;
	line-height: 1.25;
	font-weight: 800;
}

.lsc-compare-scroll {
	overflow-x: auto;
}

.lsc-compare table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 16px;
}

.lsc-compare th,
.lsc-compare td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--lsc-line);
}

.lsc-compare thead th {
	font-size: 17px;
	border-bottom: 2px solid var(--lsc-line);
}

.lsc-compare tbody th {
	width: 22%;
	font-weight: 600;
	color: var(--lsc-muted);
}

.lsc-unk {
	color: #8a8a8a;
	font-style: italic;
}

.lsc-more {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lsc-more li {
	padding: 10px 0;
	border-bottom: 1px solid var(--lsc-line);
}

.lsc-more a {
	font-weight: 700;
}

.lsc-more span {
	display: block;
	font-size: 15.5px;
	color: var(--lsc-muted);
}

.lsc-boxes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 30px;
}

.lsc-box {
	padding: 16px 18px;
	background: var(--lsc-soft);
	border-radius: 12px;
}

.lsc-box p,
.lsc-box ul {
	margin: 0;
}

.lsc-box ul {
	padding-left: 18px;
}

.lsc-box-kind {
	margin-bottom: 6px !important;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--lsc-blue);
}

.lsc-empty {
	padding: 18px 20px;
	background: #fff8ea;
	border-radius: 12px;
}

.lsc-nav-results {
	margin-top: 36px;
}

.lsc-how {
	margin: 28px 0 0;
	padding: 14px 18px;
	background: var(--lsc-soft);
	border-radius: 12px;
}

.lsc-how summary {
	font-weight: 700;
	cursor: pointer;
}

.lsc-how-body p {
	margin: 12px 0 0;
	font-size: 16px;
}

.lsc-fine {
	margin: 20px 0 0;
	font-size: 14.5px;
	color: var(--lsc-muted);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 991px) {
	.lsc-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lsc-picks .lsc-result-best { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	#ls-chooser { font-size: 16px; }
	.lsc-options-2col { grid-template-columns: minmax(0, 1fr); }
	.lsc-option { min-height: 56px; padding: 11px 14px; }
	.lsc-option-label { font-size: 17px; }
	.lsc-picks, .lsc-more, .lsc-boxes { grid-template-columns: minmax(0, 1fr); }
	.lsc-lead { font-size: 17px; }
	.lsc-img { height: 160px; }
	/* sticky button bar, full width without widening the page (background and line drawn outside the column, clipped to the bar) */
	.lsc-question .lsc-nav { position: sticky; bottom: 0; margin: 24px 0 0; padding: 12px 0; background: rgba(255, 255, 255, .96);
		box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .96), 0 -1px 0 100vmax var(--lsc-line); clip-path: inset(-1px -100vmax 0); }
	.lsc-question .lsc-nav .lsc-btn-primary { flex: 1 1 auto; }
	.lsc-nav-intro .lsc-btn, .lsc-nav-results .lsc-btn { flex: 1 1 100%; }
}

@media print {
	.lsc-btn-amazon, .lsc-sponsored, .lsc-nav { display: none !important; }
}