/* Colours, type and the small classes the app and the catalog on aylon.co share.
   No element rules, so it is safe on another site's page. */
:root {
  /* aylon.co's palette: dark, with a mint accent. */
  --ground: #0A0A0B;
  --surface: #131315;
  --raised: #1A1A1D;
  --text: #EDEDEF;
  --on-light: #0A0A0B;
  --muted: #8B8B93;
  --faint: #80808A;
  --border: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.08);
  --row-line: rgba(255, 255, 255, 0.07);
  --input-border: rgba(255, 255, 255, 0.18);
  --accent: #7EE2B8;
  --accent-hover: #A9EDD0;
  --ok-bg: rgba(126, 226, 184, 0.12);
  --ok-text: #7EE2B8;
  --error-bg: rgba(255, 128, 102, 0.14);
  --error-text: #FF9F8A;
  --error-row: rgba(255, 128, 102, 0.06);
  --error-line: rgba(255, 128, 102, 0.24);
  --neutral-bg: rgba(255, 255, 255, 0.07);
  --neutral-text: #C6C6CC;
  --hover: rgba(255, 255, 255, 0.03);
  --shadow: rgba(0, 0, 0, 0.5);
  --code-bg: #0A0A0B;
  --code-text: #EDEDEF;
  --accent-line: rgba(126, 226, 184, 0.45);
  --accent-tint: rgba(126, 226, 184, 0.14);
  --accent-wash: rgba(126, 226, 184, 0.07);
  --border-strong: rgba(255, 255, 255, 0.26);
  --inverse-hover: #FFFFFF;
  --backdrop: rgba(0, 0, 0, 0.55);
  --logo-line: transparent;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

/* Light mode, picked with the top bar's theme button (theme.js); dark stays the default. */
:root[data-theme="light"] {
  --ground: #FAFAF9;
  --surface: #FFFFFF;
  --raised: #F1F1F2;
  --text: #111113;
  --on-light: #FFFFFF;
  --muted: #5E5E67;
  --faint: #6A6A73;
  --border: rgba(10, 10, 11, 0.12);
  --divider: rgba(10, 10, 11, 0.08);
  --row-line: rgba(10, 10, 11, 0.07);
  --input-border: rgba(10, 10, 11, 0.2);
  --accent: #0B7A54;
  --accent-hover: #075E40;
  --ok-bg: rgba(11, 122, 84, 0.1);
  --ok-text: #0B7A54;
  --error-bg: rgba(200, 58, 34, 0.1);
  --error-text: #B4361F;
  --error-row: rgba(200, 58, 34, 0.05);
  --error-line: rgba(200, 58, 34, 0.28);
  --neutral-bg: rgba(10, 10, 11, 0.06);
  --neutral-text: #3F3F46;
  --hover: rgba(10, 10, 11, 0.03);
  --shadow: rgba(10, 10, 11, 0.14);
  --code-bg: #141416;
  --code-text: #EDEDEF;
  --accent-line: rgba(11, 122, 84, 0.4);
  --accent-tint: rgba(11, 122, 84, 0.1);
  --accent-wash: rgba(11, 122, 84, 0.06);
  --border-strong: rgba(10, 10, 11, 0.26);
  --inverse-hover: #2A2A2F;
  --backdrop: rgba(10, 10, 11, 0.35);
  --logo-line: rgba(10, 10, 11, 0.1);
  color-scheme: light;
}

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.stack-xs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; }

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

.early-tag, .free-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ok-text); background: var(--ok-bg); white-space: nowrap; }
.early-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.free-word { color: var(--ok-text); font-weight: 500; }

.client-picker { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--neutral-bg); border-radius: 10px; width: fit-content; max-width: 100%; }
.client-picker label { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; }
.client-picker input { position: absolute; opacity: 0; pointer-events: none; }
.client-picker label:has(input:checked) { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px var(--shadow); }
.client-picker label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }