@layer base, starlight, theme, components, utilities;
@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

/* ── Brand accent ────────────────────────────────────────────────────────
   Anchor the site accent to the product's in-TUI "identifier" teal, so the
   docs and the app read as one product rather than a generic docs theme.
   Starlight derives link / active-nav / focus colours from these three
   accent shades: `-low` = subtle background, base = mid, `-high` = strong /
   high-contrast (link text). Dark theme is `:root`; light overrides under
   `[data-theme='light']`. These are unlayered, so they win over Starlight's
   layered defaults. Tweakable — eyeball on the dev server. */
:root {
	--sl-color-accent-low: #0e343b;
	--sl-color-accent: #2f8f9e;
	--sl-color-accent-high: #7ed6e3;
}
:root[data-theme='light'] {
	--sl-color-accent-low: #cfe9ec;
	--sl-color-accent: #0f6b76;
	--sl-color-accent-high: #063b42;
}

/* Landing hero. The visible brand is the Wordmark lockup (rendered first in the
   body); Starlight's splash still emits an <h1> from the page title, so keep it
   in the DOM for the document outline / SEO but hide it visually — otherwise the
   name shows three times (header logo, this h1, the wordmark). With only the
   hidden h1 left, the hero block is trimmed to near-nothing so the wordmark sits
   up near the header (it was almost below the fold on an iPad). Only the landing
   uses the splash template, so .hero is scoped to it in practice. */
.hero h1[data-page-title] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.hero {
	padding-block: 1.5rem 0;
}

/* Tagline + action buttons, rebuilt in the body so they sit just below the
   wordmark — where the old hero title used to be. Centred to match the splash. */
.hero-tagline {
	text-align: center;
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	color: var(--sl-color-gray-2);
	margin: 0 0 1.5rem;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-block-end: 3rem;
}

/* Keep short inline code from breaking mid-token. Browsers insert a break
   opportunity after a hyphen, which splits flags like `--all-rows` across
   lines in a narrow column. `nowrap` keeps the token intact; the inline
   element still wraps as a whole unit to the next line if it doesn't fit, so
   this only prevents *internal* breaks. Block code (Expressive Code, inside
   <pre>) is excluded and wraps/scrolls as before. */
.sl-markdown-content :not(pre) > code {
	white-space: nowrap;
}

/* Landing feature cards: a small "more" link pinned to each card's bottom-
   right, pointing at the relevant docs. Scoped via :has() so only cards that
   carry the link get the flex/grow treatment (other Cards are untouched).
   CardGrid stretches cards to equal height, so the links line up across a row. */
.card .body:has(.card-more) {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.card-more {
	margin-top: auto;
	align-self: flex-end;
	padding-top: 0.75rem;
	font-size: var(--sl-text-sm);
	font-weight: 600;
	white-space: nowrap;
	color: var(--sl-color-text-accent);
	text-decoration: none;
}
.card-more:hover {
	text-decoration: underline;
}

/* Command prompt for simple-mode (`rdbms`) code blocks: a decorative "> "
   before each command line so consecutive commands read as distinct entered
   lines (advanced-mode `sql` blocks are left unprefixed). It is CSS ::before
   content with user-select:none, so it is NOT part of the copy buffer
   (Expressive Code copies the block's `data-code`) and is never selected. */
[data-language='rdbms'] .ec-line .code::before {
	content: '> ';
	color: var(--sl-color-gray-3);
	user-select: none;
	-webkit-user-select: none;
}

/* Rendered terminal-output blocks (box-drawn tables, query output, plan trees)
   are fenced as plain ``` → `plaintext`. They contain box-drawing art whose
   vertical lines only connect at terminal-style line spacing; Starlight's
   default code line-height (1.75) leaves visible gaps between the rows.
   Tighten just these blocks so the art renders connected, as it does in the
   app. Command blocks (`rdbms` / `sql` / `sh`) keep the looser spacing.
   The value is a balance of connected box-art vs. readability — nudge toward
   1.0 if any hairline gaps remain on your display. */
pre[data-language='plaintext'] .ec-line {
	line-height: 1.2;
}

/* The app's input field is single-line, so a multi-command copy can't be
   pasted-and-run as one unit. Hide Expressive Code's copy button on
   *multi-line* `rdbms` blocks (each line is a separate command — type them
   one at a time). Single-command `rdbms` blocks keep copy, and `sql` / `sh`
   blocks are unaffected (always one pasteable unit). Also hide it on
   `rdbms-syntax` templates, which contain <placeholders> and aren't runnable. */
figure:has(> pre[data-language='rdbms'] .ec-line + .ec-line) .copy,
figure:has(> pre[data-language='rdbms-syntax']) .copy {
	display: none;
}
