@import 'tailwindcss';
@plugin '@tailwindcss/typography';

:root {
	--header-height: 56px;
	--provider-filter-height: 42px;
	--status-height: 32px;
	--font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;
	--color-brand: hsl(0 0% 10%);
	--color-background: #fff;
	--color-alpha-background: rgb(255 255 255 / 0.86);
	--color-border: #ddd;
	--color-surface: #f3f3f1;
	--color-surface-strong: #e9e8e4;
	--color-text: #272727;
	--color-text-secondary: #636363;
	--color-text-tertiary: #999;
	--color-text-invert: #fff;
}

/* matte black dark mode (krisyotam.com palette) */
html.dark {
	--color-background: hsl(0 0% 7%);
	--color-alpha-background: hsl(0 0% 7% / 0.86);
	--color-border: hsl(0 0% 17%);
	--color-surface: hsl(0 0% 9%);
	--color-surface-strong: hsl(0 0% 5%);
	--color-text: hsl(0 0% 98%);
	--color-text-secondary: hsl(0 0% 70%);
	--color-text-tertiary: hsl(0 0% 45%);
	--color-text-invert: hsl(0 0% 7%);
	--color-brand: hsl(0 0% 98%);
}

/* system preference fallback when no explicit theme class is set */
@media (prefers-color-scheme: dark) {
	html:not(.light):not(.dark) {
		--color-background: hsl(0 0% 7%);
		--color-alpha-background: hsl(0 0% 7% / 0.86);
		--color-border: hsl(0 0% 17%);
		--color-surface: hsl(0 0% 9%);
		--color-surface-strong: hsl(0 0% 5%);
		--color-text: hsl(0 0% 98%);
		--color-text-secondary: hsl(0 0% 70%);
		--color-text-tertiary: hsl(0 0% 45%);
		--color-text-invert: hsl(0 0% 7%);
		--color-brand: hsl(0 0% 98%);
	}
}

* {
	box-sizing: border-box;
}

html,
body,
#svelte {
	height: 100%;
}

html {
	color-scheme: light dark;
	background: var(--color-background);
}

body {
	margin: 0;
	color: var(--color-text);
	background: var(--color-background);
	font-family:
		Rubik,
		Aptos,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 14px;
	line-height: 1.5;
	overflow: hidden;
}

button,
input {
	font: inherit;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: var(--color-text-tertiary);
	text-underline-offset: 0.2em;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.page-shell {
	height: 100vh;
	overflow: hidden;
	background:
		linear-gradient(
				90deg,
				color-mix(in srgb, var(--color-border) 36%, transparent) 1px,
				transparent 1px
			)
			0 0 / 64px 64px,
		var(--color-background);
}

.app-header {
	height: var(--header-height);
	position: fixed;
	inset: 0 0 auto;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 0.75rem;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-background);
}

.header-left,
.header-right,
.status-strip {
	display: flex;
	align-items: center;
	min-width: 0;
}

.header-left {
	flex: 1 1 auto;
	align-items: baseline;
}

.header-right {
	flex: 0 0 auto;
	gap: 0.75rem;
}

.app-header h1 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	text-transform: uppercase;
}

.app-header p {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	color: var(--color-text-tertiary);
	font-size: 0.875rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.slash {
	display: block;
	width: 0;
	height: 0.8rem;
	margin: 0 0.55rem;
	border-right: 2px solid var(--color-border);
	transform: rotate(20deg);
	transform-origin: top center;
}

.icon-link,
.source-link {
	color: var(--color-text-secondary);
	text-decoration: none;
	text-transform: uppercase;
}

.icon-link {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
}

.source-link {
	font-size: 0.78rem;
	font-family: var(--font-mono);
}

.icon-link:hover,
.source-link:hover {
	color: var(--color-text);
}

.search-container {
	position: relative;
	display: block;
	width: clamp(14rem, 26vw, 28rem);
}

.search-container input {
	width: 100%;
	height: 2rem;
	padding: 0.4rem 2.8rem 0.4rem 0.65rem;
	border: 1px solid var(--color-border);
	border-radius: 0.25rem;
	outline: none;
	background: transparent;
	color: var(--color-text);
	font-size: 0.82rem;
	line-height: 1;
}

.search-container input:focus {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);
}

.search-container input:disabled {
	cursor: wait;
	color: var(--color-text-tertiary);
}

.search-shortcut {
	position: absolute;
	right: 0.55rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-tertiary);
	font-size: 0.72rem;
	font-family: var(--font-mono);
	pointer-events: none;
}

.copy-button {
	cursor: pointer;
	border: 0;
}

.provider-filter-bar,
.status-strip {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 25;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.provider-filter-bar {
	top: var(--header-height);
	height: var(--provider-filter-height);
	gap: 0.4rem;
	overflow: visible;
	padding: 0 0.75rem;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-background);
}

.filter-label {
	margin-right: 0.25rem;
	color: var(--color-text-tertiary);
	font-size: 0.68rem;
	font-family: var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.provider-chip,
.provider-picker-trigger {
	height: 1.75rem;
	border: 1px solid var(--color-border);
	border-radius: 0;
	background: transparent;
	color: var(--color-text-secondary);
	font-size: 0.72rem;
	font-family: var(--font-mono);
	line-height: 1;
}

.provider-chip,
.provider-picker-trigger {
	cursor: pointer;
	padding: 0 0.65rem;
}

.provider-chip:hover,
.provider-chip.active,
.provider-picker-trigger:hover {
	border-color: color-mix(in srgb, var(--color-brand) 65%, var(--color-border));
	background: color-mix(in srgb, var(--color-brand) 12%, transparent);
	color: var(--color-text);
}

.provider-chip.active {
	border-left: 3px solid var(--color-brand);
}

.provider-picker {
	position: relative;
	flex: 0 0 auto;
}

.provider-picker-scrim {
	position: fixed;
	inset: 0;
	z-index: 40;
	cursor: default;
	border: 0;
	background: transparent;
}

.provider-picker-menu {
	position: absolute;
	top: calc(100% + 0.45rem);
	left: 0;
	z-index: 50;
	width: min(28rem, calc(100vw - 1.5rem));
	border: 1px solid var(--color-border);
	background: var(--color-background);
	box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.24);
}

.provider-picker-search {
	width: 100%;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	outline: none;
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: 0.82rem;
}

.provider-picker-search:focus {
	background: var(--color-background);
	box-shadow: inset 3px 0 0 var(--color-brand);
}

.provider-picker-options {
	max-height: min(30rem, calc(100vh - 10rem));
	overflow: auto;
	padding: 0.25rem;
}

.provider-option {
	display: flex;
	width: 100%;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.65rem 0.6rem;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-text);
	font-size: 0.86rem;
	line-height: 1;
	text-align: left;
}

.provider-option:hover,
.provider-option:focus-visible,
.provider-option.is-highlighted {
	background: var(--color-brand);
	color: var(--color-text-invert);
	outline: none;
}

.provider-option small {
	flex: 0 0 auto;
	color: currentColor;
	opacity: 0.62;
	font-family: var(--font-mono);
	font-size: 0.68rem;
}

.provider-empty {
	margin: 0;
	padding: 1rem 0.75rem;
	color: var(--color-text-tertiary);
	font-family: var(--font-mono);
	font-size: 0.78rem;
}

.status-strip {
	top: calc(var(--header-height) + var(--provider-filter-height));
	height: var(--status-height);
	gap: 0.8rem;
	overflow: hidden;
	padding: 0 0.75rem;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text-tertiary);
	font-size: 0.72rem;
	font-family: var(--font-mono);
	text-transform: uppercase;
}

.status-strip span:not(:last-child)::after {
	content: '/';
	margin-left: 0.8rem;
	color: var(--color-border);
}

.performance-note {
	color: var(--color-brand);
}

.table-viewport {
	position: fixed;
	inset: calc(var(--header-height) + var(--provider-filter-height) + var(--status-height)) 0 0;
	overflow: auto;
	background: var(--color-background);
}

.model-grid {
	display: grid;
	grid-template-columns: 180px 260px 150px 300px 140px 140px 140px 150px 170px 175px 170px 130px 150px 105px 105px 112px 112px 170px 180px 130px 165px 130px 115px 130px 140px;
	min-width: max-content;
}

.header-row {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--color-alpha-background);
}

.header-cell {
	display: flex;
	min-width: 0;
	min-height: 55px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0.65rem 0.75rem;
	border: 0;
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	background: transparent;
	color: var(--color-text-secondary);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.header-cell:hover {
	background: color-mix(in srgb, var(--color-brand) 10%, transparent);
	color: var(--color-text);
}

.header-label {
	display: flex;
	gap: 0.25rem;
	align-items: center;
}

.header-description {
	display: block;
	margin-top: 0.35rem;
	color: var(--color-text-tertiary);
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.sort-indicator {
	color: var(--color-brand);
	font-family: var(--font-mono);
}

.virtual-body {
	min-width: max-content;
}

.virtual-spacer {
	min-width: 1px;
	pointer-events: none;
}

.model-row {
	height: 52px;
	align-items: stretch;
	background: var(--color-background);
	contain: layout style;
}

.model-row:hover {
	z-index: 2;
	background: color-mix(in srgb, var(--color-brand) 8%, var(--color-background));
}

.model-row.is-deprecated {
	opacity: 0.58;
}

.cell {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.4rem;
	overflow: hidden;
	padding: 0 0.75rem;
	border-right: 1px solid color-mix(in srgb, var(--color-border) 56%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--color-border) 42%, transparent);
	color: var(--color-text-tertiary);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cell > span:not(.modality) {
	overflow: hidden;
	text-overflow: ellipsis;
}

.cell.strong {
	color: var(--color-text);
}

.mono {
	font-family: var(--font-mono);
	font-size: 0.77rem;
	letter-spacing: -0.03em;
}

.muted {
	color: var(--color-text-tertiary);
}

.provider-cell img {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	filter: brightness(0) invert(1);
	opacity: 0.88;
}

.id-cell {
	justify-content: space-between;
}

.copy-button {
	flex: 0 0 auto;
	opacity: 0;
	padding: 0.23rem 0.35rem;
	border-radius: 0.2rem;
	background: var(--color-surface-strong);
	color: var(--color-text-secondary);
	font-size: 0.62rem;
	font-family: var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.model-row:hover .copy-button,
.copy-button:focus-visible {
	opacity: 1;
}

.copy-button:hover {
	background: var(--color-brand);
	color: var(--color-text-invert);
}

.modalities {
	gap: 0.25rem;
}

.modality {
	display: inline-flex;
	width: 1.35rem;
	height: 1.35rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border);
	border-radius: 0.16rem;
	background: var(--color-surface);
	color: var(--color-text-secondary);
	font-size: 0.68rem;
	font-family: var(--font-mono);
	text-transform: uppercase;
}

.help-modal {
	width: min(42rem, calc(100vw - 2rem));
	max-height: min(42rem, calc(100vh - 2rem));
	margin: auto;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	background: var(--color-background);
	color: var(--color-text);
	box-shadow: 0 3rem 6rem rgb(0 0 0 / 0.32);
	overflow: hidden;
}

.help-modal::backdrop {
	background: rgb(0 0 0 / 0.18);
	backdrop-filter: blur(8px);
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
	margin: 0;
	font-size: 1rem;
	letter-spacing: -0.05em;
	text-transform: uppercase;
}

.modal-header button {
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 1.5rem;
	line-height: 1;
}

.modal-body {
	padding: 1rem;
	color: var(--color-text-secondary);
}

.modal-body p {
	margin: 0 0 1rem;
}

.modal-body code,
.modal-body kbd {
	padding: 0.12rem 0.3rem;
	border-radius: 0.2rem;
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: 0.85em;
}

.loading-filter-bar {
	overflow: hidden;
}

.loading-header-cell {
	cursor: wait;
}

.loading-empty-state {
	position: absolute;
	inset: 55px 0 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.45rem;
	padding: 2rem;
	color: var(--color-text-tertiary);
	text-align: center;
}

.loading-empty-state p {
	margin: 0;
	color: var(--color-text);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.loading-empty-state span {
	max-width: 31rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
}

.loading-mark {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--color-border);
	border-left-color: var(--color-brand);
	border-radius: 50%;
	animation: loading-spin 1.1s linear infinite;
}

@keyframes loading-spin {
	to {
		transform: rotate(1turn);
	}
}

@media (max-width: 45rem) {
	.app-header p,
	.app-header .slash,
	.source-link,
	.search-shortcut,
	.filter-label {
		display: none;
	}

	.search-container {
		width: min(46vw, 18rem);
	}

	.help-button {
		padding: 0 0.55rem;
	}
}