/* ABC Watchlist — theme base styles.
   Color/typography tokens come from the plugin's tokens.css (loaded before
   this file) — no palette values here. Layout/shell styles only; per-page
   stylesheets layer on top. */

:root {
	--max-width: 960px;
}

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

body {
	margin: 0;
	font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a { color: var(--ink); }

/* ── Shell ─────────────────────────────────────────────────────────────── */

.site-header {
	display: flex; align-items: center; justify-content: space-between;
	max-width: 1040px; width: 100%; margin: 0 auto; padding: 26px 32px;
}
.site-header__brand {
	font-size: 15px; font-weight: 600; letter-spacing: 0;
	color: var(--ink); text-decoration: none;
}
.site-header__nav { display: flex; align-items: center; gap: 16px; }
.site-header__nav a { text-decoration: none; color: var(--ink-2); }
.site-header__nav a:hover { color: var(--ink); }

.site-header__login {
	font-size: 13.5px; font-weight: 500;
	color: var(--ink-2); text-decoration: none;
	padding: 8px 14px; border-radius: 8px;
	border: 1px solid var(--line); background: var(--surface);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.site-header__login:hover {
	background: var(--surface-2); border-color: var(--ink-3); color: var(--ink);
}

.site-main {
	max-width: var(--max-width); margin: 0 auto; padding: 32px 20px 64px;
	width: 100%;
}

.site-footer {
	text-align: center; padding: 24px; font-size: 12px; color: var(--ink-3);
	display: flex; align-items: center; justify-content: center;
	gap: 12px; flex-wrap: wrap;
}
.site-footer__link { color: var(--ink-3); text-decoration: none; transition: color 0.15s; }
.site-footer__link:hover { color: var(--ink-2); }
.site-footer__dot {
	width: 3px; height: 3px; border-radius: 50%;
	background: var(--ink-3); opacity: 0.5;
}

/* ── Bits ──────────────────────────────────────────────────────────────── */

/* WP core normally ships this via wp-block-library, which the clean CSS
   slate dequeues — define it ourselves so screen-reader-only labels work. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0; padding: 0; margin: -1px;
}

.button {
	display: inline-block; padding: 8px 18px; border-radius: 6px;
	background: var(--accent); color: var(--accent-ink);
	text-decoration: none; font-weight: 600;
}

.placeholder-note {
	color: var(--ink-3); font-size: 14px; font-style: italic;
}

/* ── Theme toggle (design handoff 02, app-shell) ───────────────────────── */

.theme-switch {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px; margin-left: 4px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
}
.theme-switch button {
	width: 26px; height: 26px; border-radius: 999px; border: 0;
	background: transparent; color: var(--ink-3);
	display: grid; place-items: center;
	cursor: pointer; font: inherit; padding: 0;
}
.theme-switch button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--bg);
}