/* AI Theater. One dark theme, tuned for a large screen at a distance.

   The rules that the public pages and the admin both use. Every page links
   this file first, then site.css (page() in src/views/layout.ts) or
   admin.css (src/views/admin.ts). No CSS nesting here or in site.css: old
   smart TV browsers ignore a nested rule, with no error. If the public side
   needs nesting or minified output, use a CSS bundler such as Lightning CSS,
   not SCSS. */

:root {
	--bg: #08090c;
	--bg-raised: #12141a;
	--bg-hover: #1b1e27;
	--line: #262a35;
	--text: #f2f4f8;
	--text-dim: #9aa2b4;
	--accent: #ff4d4d;
	--accent-ink: #ffffff;
	--radius: 10px;
	--row-gap: clamp(1.75rem, 4vw, 3rem);
	--gutter: clamp(1rem, 4vw, 3.5rem);
	--card-width: clamp(190px, 21vw, 300px);
	/* The title page's one centered column. */
	--film-column: 880px;
	--font:
		ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter,
		sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	color: #fff;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

/* ---------- Brand ---------- */

.brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.brand-mark {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 3px;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.16);
}

/* ---------- Buttons ---------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.62rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg-raised);
	color: var(--text);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s,
		transform 0.1s;
}
.button:hover {
	background: var(--bg-hover);
	border-color: #3a404f;
	color: #fff;
}
.button:active {
	transform: translateY(1px);
}
.button-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}
.button-primary:hover {
	background: #ff6262;
	border-color: #ff6262;
	color: #fff;
}
.button-small {
	padding: 0.35rem 0.7rem;
	font-size: 0.82rem;
}
.button-lg {
	padding: 0.8rem 1.6rem;
	font-size: 1.02rem;
}
.button .glyph {
	flex: none;
	margin-right: 0.5rem;
}
/* For an action that deletes and cannot be undone. */
.button-danger {
	border-color: #7a2a2f;
	color: #ff9a9a;
}
.button-danger:hover {
	background: #3a1418;
	border-color: #b33a42;
	color: #fff;
}
.button-row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}
.button:disabled {
	opacity: 0.4;
	cursor: default;
	transform: none;
}

/* ---------- Pages ---------- */

.pager {
	display: flex;
	gap: 0.6rem;
	margin-top: 2rem;
}

/* ---------- Content guide tiers (src/core/guide.ts) ---------- */

.guide-badge {
	display: inline-block;
	padding: 0.02rem 0.4rem;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	white-space: nowrap;
	vertical-align: 0.05em;
}
a.guide-badge:hover {
	filter: brightness(1.2);
}
.guide-tier-0 {
	background: #17301f;
	border-color: #2c5a3a;
	color: #7fe0a0;
}
.guide-tier-1 {
	background: #16283a;
	border-color: #2a4d6e;
	color: #8ec5ff;
}
.guide-tier-2 {
	background: #33290f;
	border-color: #5f4b1a;
	color: #f0c86a;
}
.guide-tier-3 {
	background: #3a1618;
	border-color: #6e2a2e;
	color: #ff9a9a;
}

/* ---------- Forms ---------- */

select,
textarea,
input[type="text"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"] {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--bg-raised);
	color: var(--text);
	font: inherit;
	font-size: 0.9rem;
	width: 100%;
}

.inline-form {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	flex-wrap: wrap;
}
.inline-form input[type="url"] {
	flex: 1 1 320px;
	width: auto;
}
.inline-form label {
	font-size: 0.88rem;
	color: var(--text-dim);
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
/* Page tabs, such as Taxonomy's Categories and Languages. Each tab is a link. */
.page-tabs {
	display: flex;
	gap: 0.25rem;
	margin: 0.5rem 0 1.25rem;
	border-bottom: 1px solid var(--line);
}
.page-tabs a {
	padding: 0.55rem 0.9rem;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--text-dim);
	font-weight: 600;
	text-decoration: none;
}
.page-tabs a:hover {
	color: var(--text);
}
.page-tabs a[aria-current="page"] {
	color: var(--text);
	border-bottom-color: var(--accent);
}
.page-tabs a span {
	margin-left: 0.2rem;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.button {
		transition: none;
	}
}