/* Stryke Scrub design system (redesign, 2026-10).
   Tailwind (play CDN, inline config in base.html) handles layout utilities;
   this file owns the component system: tokens, type, buttons, fields,
   cards, tables, badges, alerts, stat tiles, nav, progress, focus, motion,
   HTMX loading states. Colors are the existing brand set, unchanged. */

:root {
	--ink: #12302E;
	--paper: #F7FAF9;
	--bolt: #F5C518;
	--amber: #F59E0B;
	--moss: #2F7D6B;
	--mint: #7FE0C2;
	--coral: #E4573D;
	--slate: #5B6B69;
	--line: #D8E2DF;
	--catchall: #B08A1E;
	--disposable: #8A5BB5;

	--surface: #FFFFFF;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 24px;
	--shadow-card: 0 1px 2px rgba(18, 48, 46, 0.04), 0 8px 24px -16px rgba(18, 48, 46, 0.18);
	--shadow-pop: 0 12px 32px -12px rgba(18, 48, 46, 0.35);
	--ring: 0 0 0 3px color-mix(in srgb, var(--moss) 35%, transparent);
}

/* Metric-matched fallbacks: text set in these while the web fonts load
   takes the same space, so the page does not jump when they arrive
   (measured against Arial: Bricolage 1.016x wider, Plex 1.014x). */
@font-face {
	font-family: "Bricolage Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 101.6%;
	ascent-override: 95%;
	descent-override: 26%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Plex Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 101.4%;
	ascent-override: 102.5%;
	descent-override: 27.5%;
	line-gap-override: 0%;
}

html { -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "kern" 1, "liga" 1; }

/* ---- Type ---- */
.display-tight { letter-spacing: -0.025em; }
.tnum { font-variant-numeric: tabular-nums; }
.prose-measure { max-width: 66ch; }
.eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--moss);
}
.page-title {
	font-family: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
	font-weight: 800;
	color: var(--ink);
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
@media (min-width: 640px) { .page-title { font-size: 36px; } }
.section-title {
	font-family: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
	font-weight: 700;
	color: var(--ink);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--moss) 60%, transparent); }
.link:hover { text-decoration-color: var(--moss); }

/* ---- Focus: visible everywhere ---- */
:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.btn:focus-visible, .field:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Motion: none under prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--r-md);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--bolt); color: var(--ink); }
.btn-primary:hover { background: var(--amber); color: var(--ink); }
.btn-secondary { background: var(--ink); color: var(--paper); }
.btn-secondary:hover { background: #1d4a46; }
.btn-tertiary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-tertiary:hover { background: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); border-color: var(--slate); }
.btn-danger { background: var(--coral); color: #fff; }
.btn-danger:hover { background: #c9452d; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 17px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 10px; }

/* ---- Form fields ---- */
.field {
	display: block;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--ink);
	font-size: 16px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field::placeholder { color: color-mix(in srgb, var(--slate) 70%, white); }
.field:hover { border-color: color-mix(in srgb, var(--slate) 60%, var(--line)); }
.field:focus { border-color: var(--moss); box-shadow: var(--ring); outline: none; }
select.field {
	appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B69' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.field-sm { height: 38px; font-size: 14px; padding: 0 12px; border-radius: 10px; }
.label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.help { font-size: 13px; color: var(--slate); margin-top: 6px; }
.check { width: 18px; height: 18px; accent-color: var(--moss); border-radius: 4px; flex-shrink: 0; }

/* ---- Cards ---- */
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}
.card-pad { padding: 24px; }
@media (min-width: 640px) { .card-pad { padding: 32px; } }
.card-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card-soft { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }

/* ---- Tables ---- */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
.table { width: 100%; font-size: 15px; border-collapse: collapse; }
.table th {
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--slate);
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-hover tbody tr:hover td { background: color-mix(in srgb, var(--paper) 70%, white); }

/* ---- Badges: tinted field, colored dot, ink text (readable everywhere) ---- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	padding: 3px 10px 3px 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--ink);
	background: var(--line);
	font-variant-numeric: tabular-nums;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--slate); flex-shrink: 0; }
.badge-valid { background: color-mix(in srgb, var(--moss) 14%, white); }
.badge-valid::before { background: var(--moss); }
.badge-invalid { background: color-mix(in srgb, var(--coral) 14%, white); }
.badge-invalid::before { background: var(--coral); }
.badge-catch_all { background: color-mix(in srgb, var(--bolt) 28%, white); }
.badge-catch_all::before { background: var(--catchall); }
.badge-disposable { background: color-mix(in srgb, var(--disposable) 14%, white); }
.badge-disposable::before { background: var(--disposable); }
.badge-unknown { background: color-mix(in srgb, var(--slate) 14%, white); }
.badge-unknown::before { background: var(--slate); }
.badge-duplicate, .badge-pending, .badge-queued, .badge-uploaded, .badge-running { background: var(--line); }
.badge-running::before, .badge-queued::before { background: var(--amber); }
.badge-completed { background: color-mix(in srgb, var(--moss) 14%, white); }
.badge-completed::before { background: var(--moss); }
.badge-failed, .badge-cancelled { background: color-mix(in srgb, var(--coral) 14%, white); }
.badge-failed::before, .badge-cancelled::before { background: var(--coral); }
.badge-chip { background: #eef2f1; color: var(--slate); font-weight: 500; }
.badge-chip::before { display: none; }
.badge-plain::before { display: none; }
/* On ink surfaces the field goes translucent and the text goes paper. */
.on-ink .badge { color: var(--paper); background: rgba(247, 250, 249, 0.1); }
.on-ink .badge-valid { background: color-mix(in srgb, var(--mint) 22%, transparent); }
.on-ink .badge-valid::before { background: var(--mint); }
.on-ink .badge-catch_all { background: color-mix(in srgb, var(--bolt) 22%, transparent); }
.on-ink .badge-catch_all::before { background: var(--bolt); }
.on-ink .badge-invalid { background: color-mix(in srgb, var(--coral) 28%, transparent); }
.on-ink .badge-disposable { background: color-mix(in srgb, var(--disposable) 35%, transparent); }
.on-ink .badge-disposable::before { background: #D9BFF2; }

/* ---- Alerts ---- */
.alert {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-size: 15px;
}
.alert-info { background: color-mix(in srgb, var(--mint) 18%, white); border-color: color-mix(in srgb, var(--mint) 55%, white); }
.alert-success { background: color-mix(in srgb, var(--moss) 10%, white); border-color: color-mix(in srgb, var(--moss) 35%, white); }
.alert-error { background: color-mix(in srgb, var(--coral) 9%, white); border-color: color-mix(in srgb, var(--coral) 45%, white); }
.alert-warning { background: color-mix(in srgb, var(--bolt) 22%, white); border-color: color-mix(in srgb, var(--amber) 55%, white); }

/* ---- Stat tiles ---- */
.stat { padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.stat-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.stat-value {
	font-family: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-top: 6px;
	font-variant-numeric: tabular-nums;
}
.stat-foot { font-size: 13px; color: var(--slate); margin-top: 6px; }
.stat-accent { border-top: 3px solid var(--line); }
.stat-accent-valid { border-top-color: var(--moss); }
.stat-accent-invalid { border-top-color: var(--coral); }
.stat-accent-catch_all { border-top-color: var(--bolt); }
.stat-accent-disposable { border-top-color: var(--disposable); }
.stat-accent-unknown { border-top-color: var(--slate); }
.stat-accent-duplicate, .stat-accent-pending { border-top-color: var(--line); }

/* ---- Progress ---- */
.progress-track { background: var(--line); border-radius: 999px; height: 10px; overflow: hidden; }
.progress-fill { background: var(--bolt); height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.split-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); }
.split-valid { background: var(--moss); }
.split-invalid { background: var(--coral); }
.split-catch_all { background: var(--bolt); }
.split-disposable { background: var(--disposable); }
.split-unknown { background: var(--slate); }
.split-duplicate, .split-pending { background: color-mix(in srgb, var(--slate) 35%, var(--line)); }

/* ---- App shell: the mobile drawer (#nav-drawer checkbox in the top bar) ---- */
.app-sidebar { display: none; }
.app-shell:has(#nav-drawer:checked) .app-sidebar { display: flex; }
@media (min-width: 1024px) { .app-sidebar { display: flex !important; } }

/* ---- Sidebar nav ---- */
.nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--r-md);
	color: var(--paper);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	position: relative;
	min-height: 44px;
}
.nav-item:hover { background: rgba(247, 250, 249, 0.06); }
.nav-item.active { background: rgba(247, 250, 249, 0.1); }
.nav-item.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 3px;
	background: var(--bolt);
}
.nav-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: rgba(247, 250, 249, 0.08);
	color: var(--mint);
}
.nav-item.active .nav-icon { background: var(--bolt); color: var(--ink); }
.nav-soon {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--mint);
	border-radius: 999px;
	padding: 2px 8px;
	background: color-mix(in srgb, var(--mint) 14%, transparent);
}

/* ---- Menu (account popover) ---- */
.menu { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 6px; font-size: 14px; }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; min-height: 40px; }
.menu a:hover, .menu button:hover { background: var(--paper); }

/* ---- Dropzone ---- */
.dropzone {
	border: 2px dashed var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease;
}
.dropzone:hover, .dropzone.border-moss { border-color: var(--moss); background: var(--paper); }
.dropzone:focus-within { border-color: var(--moss); box-shadow: var(--ring); }

/* ---- Accordion (native details/summary) ---- */
details.faq-item { border-bottom: 1px solid var(--line); }
details.faq-item summary {
	cursor: pointer;
	padding: 18px 0;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 44px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
	content: "+";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid var(--line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--slate);
	font-weight: 500;
}
details.faq-item[open] summary::after { content: "\2212"; background: var(--ink); color: var(--paper); border-color: var(--ink); }
details.faq-item p { padding: 0 0 18px; }

/* ---- Modal (native <dialog>) ---- */
dialog.modal { border: 0; border-radius: var(--r-lg); padding: 0; max-width: 28rem; width: calc(100% - 32px); box-shadow: var(--shadow-pop); }
dialog.modal::backdrop { background: rgba(18, 48, 46, 0.45); }

/* ---- HTMX loading states (hx-indicator) ---- */
.htmx-indicator { opacity: 0; transition: opacity 180ms ease; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request .btn[type="submit"] { opacity: 0.7; pointer-events: none; }

/* ---- Footer ---- */
.footer-link { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; color: rgba(247, 250, 249, 0.8); }
.footer-link:hover { color: var(--paper); }

/* ---- Utilities ---- */
.min-w-0-children > * { min-width: 0; }
.divide-line > * + * { border-top: 1px solid var(--line); }