/* ══════════════════════════════════════════════════════════════════
   K-12 Food Service — app shell styles
   Direct port of app/src/index.css + shadcn/ui primitives.
   Sage green + warm neutrals (OKLCH). DM Sans body, Fraunces display.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fraunces:ital,opsz,SOFT,wght@0,9..144,0..100,100..900;1,9..144,0..100,100..900&display=swap');

:root {
  /* Palette — OKLCH so colors evolve cleanly across shades */
  --background: oklch(0.98 0.004 85);
  --foreground: oklch(0.18 0.01 80);
  --card: oklch(0.995 0.002 85);
  --card-foreground: oklch(0.18 0.01 80);
  --popover: oklch(0.995 0.002 85);
  --popover-foreground: oklch(0.18 0.01 80);
  --primary: oklch(0.48 0.1 155);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.95 0.008 85);
  --secondary-foreground: oklch(0.25 0.01 80);
  --muted: oklch(0.95 0.006 85);
  --muted-foreground: oklch(0.50 0.01 80);
  --accent: oklch(0.93 0.015 155);
  --accent-foreground: oklch(0.25 0.06 155);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.905 0.006 85);
  --input: oklch(0.91 0.006 85);
  --ring: oklch(0.48 0.1 155);

  --sidebar: oklch(0.975 0.004 85);
  --sidebar-foreground: oklch(0.25 0.01 80);
  --sidebar-primary: oklch(0.48 0.1 155);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.93 0.015 155);
  --sidebar-accent-foreground: oklch(0.25 0.06 155);
  --sidebar-border: oklch(0.905 0.006 85);
  --sidebar-ring: oklch(0.48 0.1 155);

  --shadow-sm: 0 1px 2px 0 oklch(0.20 0.01 80 / 0.04);
  --shadow-md: 0 4px 12px -2px oklch(0.20 0.01 80 / 0.06), 0 2px 4px -1px oklch(0.20 0.01 80 / 0.04);
  --shadow-lg: 0 12px 32px -8px oklch(0.20 0.01 80 / 0.08), 0 4px 8px -2px oklch(0.20 0.01 80 / 0.04);

  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'Fraunces', ui-serif, Georgia, serif;

  color-scheme: light only;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
body {
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
img, svg { max-width: 100%; display: block; }
svg { fill: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
hr { border: 0; border-top: 1px solid var(--border); }

/* ── Typography scale ───────────────────────────────────────── */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.h-section {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.h-page {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.h-card {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}
.display-serif {
  font-family: var(--font-heading);
  font-feature-settings: "ss01", "ss02";
  font-variation-settings: "SOFT" 50, "opsz" 144;
  letter-spacing: -0.02em;
}

.text-xs { font-size: 0.75rem; line-height: 1.33; }
.text-sm { font-size: 0.875rem; line-height: 1.43; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; line-height: 1.4; }
.text-xl { font-size: 1.25rem; line-height: 1.3; }
.text-2xl { font-size: 1.5rem; line-height: 1.2; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.muted { color: var(--muted-foreground); }
.text-destructive { color: var(--destructive); }

/* ── Layout primitives ──────────────────────────────────────── */
.row { display: flex; flex-direction: row; gap: 0.5rem; align-items: center; }
.row-end { display: flex; justify-content: flex-end; gap: 0.5rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-sm { display: flex; flex-direction: column; gap: 0.5rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1.5rem; }
.grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }

/* ── App shell: sidebar + main ──────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}
.main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Page shell (matches React PageShell): sticky header + scrollable body */
.page-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page-shell-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: oklch(0.98 0.004 85 / 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
  position: sticky;
  top: 0;
}
.page-shell-header-inner {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.page-shell-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.page-shell-body-inner {
  padding: 1.5rem 1rem 3rem;
}
.page-shell-body-inner--narrow {
  max-width: 48rem; /* max-w-3xl */
  margin: 0 auto;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  margin-bottom: 0.25rem;
  border-radius: var(--radius-md);
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.back-btn:hover { background: var(--muted); }
.back-btn svg { width: 14px; height: 14px; }

.page-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.page-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-title--display {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-meta {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

/* Legacy .page-content (non-shell pages like landing, login) */
.page-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}
.page-content--narrow { max-width: 48rem; }
.page-header { margin-bottom: 1.5rem; }
.page-header-meta {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

/* ── Sidebar (matches React AppSidebar exactly) ─────────────── */
.sidebar {
  width: 224px; /* w-56 */
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width 200ms ease;
}
.sidebar-brand {
  height: 3.5rem; /* h-14 */
  display: flex;
  align-items: center;
  padding: 0 1rem;
  flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 0.5rem; }
.brand-mark {
  width: 28px; height: 28px;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: var(--primary-foreground);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-text {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* space-y-5 */
}
.sidebar-section-label {
  font-size: 0.625rem; /* text-[10px] */
  font-weight: 600;
  color: oklch(0.25 0.01 80 / 0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em; /* tracking-widest */
  padding: 0 0.5rem;
  margin-bottom: 0.375rem;
}
.sidebar-section-items {
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* space-y-0.5 */
}
.sidebar-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.25rem; /* h-9 */
  padding: 0 0.625rem; /* px-2.5 */
  border-radius: var(--radius-lg);
  color: oklch(0.25 0.01 80 / 0.6); /* sidebar-foreground/60 */
  font-size: 0.8125rem; /* text-[13px] */
  font-weight: 500;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 150ms ease, color 150ms ease;
  text-align: left;
}
.sidebar-item:hover {
  background: oklch(0.93 0.015 155 / 0.7); /* sidebar-accent/70 */
  color: var(--foreground);
}
.sidebar-item.is-active {
  background: oklch(0.48 0.1 155 / 0.1); /* primary/10 */
  color: var(--primary);
  font-weight: 600;
}
.sidebar-item svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.sidebar-item-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; }
.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -0.75rem;
  transform: translateY(-50%);
  z-index: 10;
}
.sidebar-toggle button {
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sidebar-border);
  background: var(--sidebar);
  color: oklch(0.25 0.01 80 / 0.4);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.08);
}
.sidebar-toggle button:hover {
  background: oklch(0.97 0.01 155);
  color: var(--sidebar-foreground);
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.12);
}
.sidebar-toggle button svg { width: 12px; height: 12px; }
.sidebar-toggle button .icon-expand,
.sidebar-toggle button .icon-collapse { display: inline-grid; place-items: center; }
.sidebar-toggle button .icon-expand { display: none; }
body.sidebar-collapsed .sidebar-toggle button .icon-expand { display: inline-grid; }
body.sidebar-collapsed .sidebar-toggle button .icon-collapse { display: none; }

/* Collapsed sidebar (body.sidebar-collapsed) */
body.sidebar-collapsed .sidebar { width: 4rem; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .sidebar-item-label,
body.sidebar-collapsed .sidebar-section-label { display: none; }
body.sidebar-collapsed .sidebar-item { justify-content: center; padding: 0; }
body.sidebar-collapsed .sidebar-nav { padding: 0 0.375rem 0.5rem; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  background: transparent;
  color: inherit;
  text-decoration: none !important;
  user-select: none;
}
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px oklch(0.48 0.1 155 / 0.3);
}
.btn:active:not([aria-haspopup]) { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.btn-primary:hover { background: oklch(0.48 0.1 155 / 0.85); }

.btn-outline {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
}
.btn-outline:hover { background: var(--muted); color: var(--foreground); }

.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.btn-secondary:hover { background: oklch(0.95 0.008 85 / 0.7); }

.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--muted); }

.btn-destructive {
  background: oklch(0.577 0.245 27.325 / 0.12);
  color: var(--destructive);
}
.btn-destructive:hover { background: oklch(0.577 0.245 27.325 / 0.2); }

.btn-link {
  background: transparent;
  color: var(--primary);
  padding: 0;
  height: auto;
}
.btn-link:hover { text-decoration: underline !important; }

.btn-sm {
  height: 1.75rem;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
}
.btn-xs {
  height: 1.5rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-md);
  gap: 0.25rem;
}
.btn-lg { height: 2.25rem; padding: 0 0.75rem; }
.btn-icon { width: 2rem; height: 2rem; padding: 0; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius-xl);
  padding: 1rem;
  box-shadow: 0 0 0 1px oklch(0.18 0.01 80 / 0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}
.card--sm { padding: 0.75rem; gap: 0.75rem; }
.card--flush { padding: 0; }
.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}
.card-description { font-size: 0.875rem; color: var(--muted-foreground); }
.card-footer {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin: 0 -1rem -1rem;
  background: oklch(0.95 0.006 85 / 0.5);
  border-top: 1px solid var(--border);
}
.card-interactive {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 1.25rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.badge-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: transparent;
}
.badge-outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
.badge-destructive {
  background: oklch(0.577 0.245 27.325 / 0.12);
  color: var(--destructive);
  border-color: transparent;
}
.badge-source {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: transparent;
}

/* Allergen tokens */
.badge-allergen-contains {
  border-color: oklch(0.88 0.06 25);
  background: oklch(0.97 0.02 25);
  color: oklch(0.42 0.18 25);
}
.badge-allergen-may-contain {
  border-color: oklch(0.89 0.05 65);
  background: oklch(0.97 0.02 65);
  color: oklch(0.52 0.14 65);
}
.badge-allergen-free {
  border-color: oklch(0.86 0.05 155);
  background: oklch(0.95 0.02 155);
  color: oklch(0.45 0.10 155);
}

/* Compliance flag badges */
.compliance-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.compliance-badges .badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  font-weight: 600;
}
.badge-buy-american {
  border-color: oklch(0.72 0.12 250);
  background: oklch(0.30 0.12 250);
  color: #fff;
}
.badge-smart-snack {
  border-color: oklch(0.72 0.10 155);
  background: oklch(0.45 0.12 155);
  color: #fff;
}
.badge-gluten-free {
  border-color: oklch(0.78 0.08 75);
  background: oklch(0.94 0.04 75);
  color: oklch(0.40 0.12 75);
}
.badge-sb314-pass {
  border-color: oklch(0.65 0.10 200);
  background: oklch(0.40 0.10 200);
  color: #fff;
}
.badge-sb314-fail {
  border-color: oklch(0.65 0.18 25);
  background: oklch(0.40 0.18 25);
  color: #fff;
}
.additive-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.additive-name {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ── Inputs ─────────────────────────────────────────────────── */
.input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"] {
  display: flex;
  align-items: center;
  height: 2rem;
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--input);
  background: transparent;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--foreground);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  outline: none;
}
.input::placeholder,
input::placeholder { color: var(--muted-foreground); }
.input:focus,
input:focus,
textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px oklch(0.48 0.1 155 / 0.25);
}
.input:disabled,
input:disabled { opacity: 0.5; cursor: not-allowed; }

select.input,
select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2rem;
  width: auto;
  padding: 0 2rem 0 0.625rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--input);
  background: transparent;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--foreground);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}
select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px oklch(0.48 0.1 155 / 0.25);
}

.textarea,
textarea {
  display: block;
  width: 100%;
  min-height: 4rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--input);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  resize: vertical;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.375rem;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  caption-side: bottom;
}
.table thead tr { border-bottom: 1px solid var(--border); }
.table th {
  height: 2.5rem;
  padding: 0 0.5rem;
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
}
.table td {
  padding: 0.5rem;
  vertical-align: middle;
}
.table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color 150ms ease;
}
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: oklch(0.95 0.006 85 / 0.5); }

/* ── Tabs (pill style, matches shadcn default) ──────────────── */
.tabs {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--muted);
  color: var(--muted-foreground);
  gap: 0;
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: calc(100% - 1px);
  padding: 0 0.625rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: oklch(0.18 0.01 80 / 0.6);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.tab:hover { color: var(--foreground); }
.tab.is-active,
.tab[aria-selected="true"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

/* Underline variant */
.tabs--line {
  background: transparent;
  padding: 0;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.tabs--line .tab {
  border-radius: 0;
  position: relative;
}
.tabs--line .tab.is-active {
  background: transparent;
  box-shadow: none;
}
.tabs--line .tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--foreground);
}

/* ── Dialog (native <dialog>) ───────────────────────────────── */
dialog {
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--popover);
  color: var(--popover-foreground);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
  max-width: 32rem;
  width: calc(100% - 2rem);
}
dialog::backdrop {
  background: oklch(0.18 0.01 80 / 0.4);
  backdrop-filter: blur(2px);
}

/* ── Utility: details-based filter dropdown ─────────────────── */
.filter-details {
  position: relative;
}
.filter-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--background);
  font-size: 0.875rem;
  font-weight: 500;
}
.filter-details > summary::-webkit-details-marker { display: none; }
.filter-details > summary:hover { background: var(--muted); }
.filter-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 16rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-md), 0 0 0 1px oklch(0.18 0.01 80 / 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* ── Empty state ────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted-foreground);
  gap: 0.375rem;
}
.empty-state-icon {
  font-size: 2rem;
  opacity: 0.6;
}
.empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}
.pagination-info {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* ── Score bar (data quality, etc) ──────────────────────────── */
.score-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 200ms ease;
}

/* ── Chat bubble styling ────────────────────────────────────── */
.chat-messages {
  flex: 1 1 auto;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0 1rem;
}
.msg-user,
.msg-assistant {
  display: flex;
  max-width: 100%;
}
.msg-user { justify-content: flex-end; }
.msg-user > span,
.msg-user > div {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-xl);
  max-width: 80%;
  white-space: pre-wrap;
}
.msg-assistant .bubble {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-xl);
  max-width: 90%;
}
.tool-event {
  align-self: flex-start;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--muted);
}
.msg-assistant pre {
  background: var(--muted);
  padding: 0.5rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.8125rem;
}
.msg-assistant code {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 0.85em;
}
.msg-assistant table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin: 0.5rem 0;
}
.msg-assistant th,
.msg-assistant td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  text-align: left;
}

/* ── Auth shell (login page) ────────────────────────────────── */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--background);
}
.auth-wrap {
  width: 100%;
  max-width: 24rem;
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.auth-brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-brand-mark svg { width: 1.125rem; height: 1.125rem; }
.auth-brand-text {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.auth-card {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 0.875rem);
  padding: 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.auth-title {
  font-family: var(--font-heading, var(--font-serif, 'Fraunces', serif));
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
  color: var(--foreground);
}
.auth-lede {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.auth-error {
  font-size: 0.8125rem;
  color: var(--destructive);
  background: oklch(0.577 0.245 27.325 / 0.08);
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  margin: 0;
}

/* ── Section tints (landing / marketing) ───────────────────── */
.section-warm {
  background: linear-gradient(180deg, oklch(0.98 0.004 85) 0%, oklch(0.96 0.008 85) 100%);
}
.section-sage {
  background: linear-gradient(180deg, oklch(0.98 0.004 85) 0%, oklch(0.96 0.020 155 / 0.3) 100%);
}

/* ── Progress bar (top of main, during navigation) ─────────── */
.nav-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 2px;
  overflow: hidden;
  background: oklch(0.48 0.1 155 / 0.15);
}
.nav-progress-fill {
  position: absolute;
  height: 100%;
  background: var(--primary);
  animation: nav-indeterminate 1.4s infinite ease-in-out;
}
@keyframes nav-indeterminate {
  0%   { left: -40%; width: 40%; }
  50%  { left: 60%;  width: 40%; }
  100% { left: 110%; width: 40%; }
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: oklch(0.7 0.005 85);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: oklch(0.6 0.005 85); }

/* ── Search page (3-zone: sticky top, scroll table, fixed footer) ── */
.search-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.search-topbar {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: oklch(0.98 0.004 85 / 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
  position: sticky;
  top: 0;
}
.search-top-inner {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.search-input-wrap { position: relative; }
.search-input-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
  pointer-events: none;
}
.search-input {
  height: 2.75rem !important;
  padding-left: 2.5rem !important;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.search-filters-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.search-total-inline {
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-variant-numeric: tabular-nums;
}

/* Filter dropdown using native <details> */
.filter-dd { position: relative; }
.filter-dd > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 1.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  background: var(--background);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--foreground);
}
.filter-dd > summary::-webkit-details-marker { display: none; }
.filter-dd > summary::marker { display: none; content: ''; }
.filter-dd > summary:hover { background: var(--accent); color: var(--accent-foreground); }
.filter-dd-count {
  height: 1rem;
  padding: 0 0.25rem;
  font-size: 10px;
  margin-left: 0.25rem;
}
.filter-dd-caret { width: 12px; height: 12px; }
.filter-dd-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 14rem;
  max-height: 20rem;
  overflow-y: auto;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.25rem;
  z-index: 30;
}
.filter-dd-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--popover-foreground);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  gap: 0.5rem;
}
.filter-dd-item:hover { background: var(--accent); color: var(--accent-foreground); }
.filter-dd-check {
  width: 1rem;
  display: inline-flex;
  justify-content: center;
  color: var(--primary);
  font-weight: 700;
}
.filter-dd-label { flex: 1; }
.filter-dd-count-muted {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
/* Overflow filter chips */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  border: 1px solid oklch(0.76 0.15 150);
  background: oklch(0.96 0.04 150);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
}
.filter-chip:hover { background: oklch(0.93 0.06 150); }
.filter-chip-x { width: 12px; height: 12px; opacity: 0.5; }
.filter-chip:hover .filter-chip-x { opacity: 1; }

/* + Filter button */
.filter-dd-add > summary {
  border-style: dashed !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
}
.filter-dd-add > summary:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: transparent !important;
}
.filter-dd-add[open] > summary {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.filter-add-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.75rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted-foreground);
}
.filter-add-trigger::-webkit-details-marker { display: none; }
.filter-add-trigger::marker { display: none; content: ''; }
.filter-add-trigger:hover { border-color: var(--primary); color: var(--primary); }

/* Filter bar divider */
.filter-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--border);
  flex-shrink: 0;
}

.search-clear { height: 1.75rem; font-size: 0.75rem; color: var(--muted-foreground); gap: 0.25rem; }

/* Scrollable table area */
.search-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.search-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.search-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}
.search-table thead tr {
  background: oklch(0.95 0.006 85 / 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--border);
}
.search-table th {
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.search-table th.col-product { width: 40%; }
.search-table tbody tr { border-bottom: 1px solid var(--border); transition: background-color 150ms ease; }
.search-row { cursor: pointer; }
.search-row:hover { background: oklch(0.95 0.006 85 / 0.3); }
.search-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.search-row.is-selected {
  background: var(--accent);
  box-shadow: inset 3px 0 0 var(--primary);
}
.search-row.is-selected:hover { background: oklch(0.91 0.02 155); }
.search-table td { padding: 0.75rem 1rem; vertical-align: middle; }
.search-row-title { font-weight: 500; font-size: 0.875rem; line-height: 1.25; }
.search-row-title-link {
  color: inherit;
  text-decoration: none;
}
.search-row-title-link:hover { color: var(--primary); }
.search-cell-md { font-size: 0.875rem; }
.search-cell-sm { font-size: 0.75rem; }
.search-cell-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.search-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted-foreground);
}

/* Meal-component dots (round small badge with short letter) */
.dot-row { display: inline-flex; align-items: center; gap: 0.25rem; }
.component-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0;
}
.dot-meat   { background: oklch(0.42 0.14 25); }  /* red-800 */
.dot-grain  { background: oklch(0.60 0.14 70); }  /* amber-600 */
.dot-veg-dg { background: oklch(0.52 0.13 160); } /* emerald-700 */
.dot-veg-ro { background: oklch(0.60 0.16 45); }  /* orange-600 */
.dot-veg-bpl{ background: oklch(0.52 0.15 130); } /* lime-700 */
.dot-veg-st { background: oklch(0.62 0.14 90); }  /* yellow-600 */
.dot-veg-ot { background: oklch(0.55 0.16 145); } /* green-600 */
.dot-fruit  { background: oklch(0.58 0.17 0); }   /* pink-600 */
.dot-milk   { background: oklch(0.58 0.12 230); } /* sky-600 */
.dot-other  { background: oklch(0.55 0.005 85); }

/* CN column variants */
.cn-label-list {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.cn-label-num {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--foreground);
  white-space: nowrap;
}
.cn-label-more {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.cn-matched {
  color: oklch(0.55 0.005 85 / 0.6);
  font-style: italic;
  font-size: 0.75rem;
}
.cn-source {
  color: oklch(0.55 0.10 155 / 0.85);
  font-weight: 500;
  font-size: 0.75rem;
}

/* Allergen indicator pills */
.allergen-row { display: inline-flex; align-items: center; gap: 0.375rem; }
.allergen-pill {
  display: inline-flex;
  align-items: center;
  height: 1.125rem;
  padding: 0 0.375rem;
  font-size: 10px;
  border-radius: 0.375rem;
  gap: 0.125rem;
}
.allergen-pill svg { width: 12px; height: 12px; }

/* Fixed pagination footer */
.search-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: oklch(0.98 0.004 85 / 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0 1rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search-pager { display: inline-flex; align-items: center; gap: 0.25rem; }
.search-pager .btn-icon {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  font-size: 0.75rem;
}
.is-disabled { opacity: 0.5; pointer-events: none; }

/* ── Product detail page ───────────────────────────────────── */
.product-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  flex-wrap: wrap;
}
.muted-dot { color: var(--muted-foreground); }
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: 2fr 1fr; }
}
.product-col-main { display: flex; flex-direction: column; gap: 1.25rem; }
.product-col-side { display: flex; flex-direction: column; gap: 1.25rem; align-self: start; position: sticky; top: 1rem; }
.section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

/* Product detail section cards */
.pd-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.pd-section .section-label {
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid oklch(0.92 0.006 85);
}
.pd-section--meal-credits .section-label {
  border-bottom-color: oklch(0.85 0.04 155);
}
.pd-section--nutrients .section-label {
  border-bottom-color: oklch(0.85 0.04 250);
}
.pd-section--ingredients .section-label {
  border-bottom-color: oklch(0.85 0.04 70);
}
.pd-subsection-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--foreground);
  margin: 0 0 0.375rem;
}
.pd-section .product-info-grid { margin-top: 0; }
.pd-section .compliance-badges { margin-top: 0; }
.pd-section .nutrient-box { margin-top: 0.5rem; }
.pd-section .ingredients-body { margin-top: 0.25rem; }

/* Product search detail drawer.
   z-index sits above the CN label drawer so it can stack on top when
   opened as a nested drawer from /cn-labels. */
.product-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.32);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.product-drawer-backdrop[data-open="true"] { opacity: 1; }
.product-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80vw;
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgb(0 0 0 / 0.16);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.product-drawer[data-open="true"] { transform: translateX(0); }

/* When the product drawer is stacked on top of the CN label drawer,
   inset its width so the label drawer is visibly revealed beneath. */
body:has(.label-match-drawer[data-open="true"]) .product-drawer {
  width: min(56rem, calc(100vw - 4rem));
  box-shadow: -24px 0 48px rgb(0 0 0 / 0.24);
}
.product-drawer-content {
  flex: 1 1 auto;
  min-height: 0;
}
.product-detail-shell--drawer {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--background);
}
.product-drawer-fragment-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: oklch(0.98 0.004 85 / 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.product-drawer-title-stack {
  min-width: 0;
  flex: 1 1 auto;
}
.product-drawer-title {
  margin: 0.125rem 0 0;
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--foreground);
}
.product-meta--drawer {
  gap: 0.4rem;
  font-size: 0.75rem;
}
.product-drawer-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: 0 0 auto;
}
.product-drawer-copy {
  gap: 0.375rem;
  font-size: 0.75rem;
}
.product-drawer-close {
  width: 2rem;
  height: 2rem;
}
.product-drawer-fragment-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.product-drawer-fragment-inner {
  padding: 1.25rem;
}
.product-detail-shell--drawer .product-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1200px) {
  .product-detail-shell--drawer .product-grid {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  }
}
.product-detail-shell--drawer .product-col-main,
.product-detail-shell--drawer .product-col-side {
  gap: 1rem;
}
.product-detail-shell--drawer .product-col-side {
  align-self: start;
  position: static;
}
.product-detail-shell--drawer .credits-group {
  border-radius: var(--radius-md);
}
.product-detail-shell--drawer .pd-section {
  padding: 0.75rem 1rem;
}
.product-drawer-loading,
.product-drawer-error {
  margin: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.product-drawer-loading {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.product-drawer-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid color-mix(in oklch, var(--muted-foreground) 20%, transparent);
  border-top-color: var(--primary);
  border-radius: 9999px;
  animation: product-drawer-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
.product-drawer-loading-title,
.product-drawer-error-title {
  margin: 0;
  color: var(--foreground);
  font-weight: 600;
}
.product-drawer-loading-subtitle,
.product-drawer-error p {
  margin: 0.25rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}
.product-drawer-error .btn { margin-top: 0.875rem; }
@keyframes product-drawer-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 720px) {
  .product-drawer {
    width: 100%;
    border-left: 0;
  }
  .product-drawer-fragment-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
  }
  .product-drawer-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .product-drawer-copy {
    flex: 1 1 auto;
    justify-content: center;
  }
  .product-drawer-close {
    flex: 0 0 2rem;
  }
  .product-drawer-fragment-inner {
    padding: 1rem;
  }
}

/* CN label matching candidate drawer */
.label-match-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.32);
  z-index: 70;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.label-match-drawer-backdrop[data-open="true"] { opacity: 1; }
.label-match-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(60rem, calc(100vw - 2rem));
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgb(0 0 0 / 0.16);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 80;
  display: flex;
  flex-direction: column;
}
.label-match-drawer[data-open="true"] { transform: translateX(0); }
.label-match-drawer-content {
  flex: 1 1 auto;
  min-height: 0;
}
.label-match-drawer-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--background);
}
.label-match-drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: oklch(0.98 0.004 85 / 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.label-match-drawer-title-stack {
  min-width: 0;
  flex: 1 1 auto;
}
.label-match-drawer-kicker {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.label-match-drawer-title {
  margin: 0.125rem 0 0;
  color: var(--foreground);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.label-match-drawer-meta,
.label-match-drawer-signals {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}
.label-match-drawer-meta {
  color: var(--muted-foreground);
  font-size: 0.75rem;
}
.label-match-drawer-credit-wrap {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  text-align: left;
}
.label-match-drawer-credit-groups {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
}
.label-match-drawer-credit-groups .cn-credit-group {
  width: 100%;
  justify-content: flex-start;
  padding-right: 0;
  border-right: 0;
}
.label-match-drawer-close svg {
  width: 1rem;
  height: 1rem;
}
.label-match-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.label-match-drawer-candidates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
.label-match-drawer-loading,
.label-match-drawer-error {
  margin: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.label-match-drawer-loading {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.label-match-drawer-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid color-mix(in oklch, var(--muted-foreground) 20%, transparent);
  border-top-color: var(--primary);
  border-radius: 9999px;
  animation: product-drawer-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
.label-match-drawer-loading-title,
.label-match-drawer-error-title {
  margin: 0;
  color: var(--foreground);
  font-weight: 600;
}
.label-match-drawer-loading-subtitle,
.label-match-drawer-error p {
  margin: 0.25rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}
.label-match-drawer-error .btn { margin-top: 0.875rem; }
@media (max-width: 720px) {
  .label-match-drawer {
    width: 100%;
    border-left: 0;
  }
  .label-match-drawer-header {
    padding: 0.875rem 1rem;
  }
  .label-match-drawer-candidates {
    padding: 1rem;
  }
  .label-match-drawer .cn-cand {
    flex-direction: column;
  }
  .label-match-drawer .cn-cand-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* Meal credit groups */
.credits-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}
.credits-group--expired {
  opacity: 0.55;
}
.badge-expired {
  border-color: oklch(0.70 0.06 55);
  background: oklch(0.92 0.03 55);
  color: oklch(0.45 0.06 55);
  font-size: 0.625rem;
  font-family: var(--font-sans);
  font-weight: 600;
  margin-left: 0.375rem;
}
.fbg-guidance-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.fbg-guidance-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 0.875rem 1rem;
}
.fbg-guidance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}
.fbg-guidance-kicker {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fbg-guidance-title {
  margin: 0.125rem 0 0;
  color: var(--foreground);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}
.fbg-guidance-serving,
.fbg-guidance-reason,
.fbg-guidance-source {
  margin: 0.375rem 0 0;
}
.fbg-guidance-source {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.credits-group-summary {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.credits-group-summary::-webkit-details-marker { display: none; }
.credits-group-summary::marker { content: ''; }
.credits-group-summary::before {
  content: '';
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  opacity: 0.6;
}
details[open] > .credits-group-summary::before {
  transform: rotate(-135deg);
}
.credits-group-summary:hover { background: oklch(0.95 0.006 85 / 0.3); }
.credits-cn-head {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}
.credits-cn-head--name {
  font-weight: 400;
}
.credits-cn-head-sep {
  color: var(--muted-foreground);
  font-weight: 400;
}
.credits-cn-title-row {
  flex: 1 1 auto;
  min-width: 0;
  display: inline;
}
.credits-cn-subtitle {
  flex-basis: 100%;
  margin-left: calc(0.65rem + 0.5rem);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
}
.credits-group-body {
  padding: 0 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.credits-option-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  margin: 0 0 0.375rem;
}
.cn-sugg-credits {
  margin-top: 0.25rem;
}
.credits-option-group {
  margin-bottom: 0.5rem;
}
.credits-option-group:last-child {
  margin-bottom: 0;
}
.credits-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.credits-or {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.credit-card {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.credit-card-compact { padding: 0.25rem 0.5rem; }
.credit-comp-badge { font-size: 10px; padding: 0 0.375rem; }
.credit-amount {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.875rem;
}
.credit-unit { font-size: 0.75rem; color: var(--muted-foreground); }
.credits-statement {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-style: italic;
  margin: 0;
}
.ai-linked-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
  border-top: 1px dashed var(--border);
}
.ai-linked-badge {
  font-size: 9px;
  padding: 0 0.375rem;
  background: oklch(0.92 0.04 240);
  color: oklch(0.40 0.14 240);
}

/* Meal-component badge colors (used on credit cards) */
.mc-meat       { background: oklch(0.42 0.12 25 / 0.8);   color: oklch(0.95 0.02 25); }
.mc-grain      { background: oklch(0.52 0.12 70 / 0.8);   color: oklch(0.97 0.02 70); }
.mc-veg-dg     { background: oklch(0.42 0.13 160 / 0.8);  color: oklch(0.96 0.02 160); }
.mc-veg-ro     { background: oklch(0.52 0.16 45 / 0.8);   color: oklch(0.97 0.02 45); }
.mc-veg-bpl    { background: oklch(0.45 0.15 130 / 0.8);  color: oklch(0.97 0.02 130); }
.mc-veg-st     { background: oklch(0.55 0.14 90 / 0.8);   color: oklch(0.97 0.02 90); }
.mc-veg-ot     { background: oklch(0.48 0.16 145 / 0.8);  color: oklch(0.96 0.02 145); }
.mc-fruit      { background: oklch(0.52 0.17 0 / 0.8);    color: oklch(0.97 0.02 0); }
.mc-milk       { background: oklch(0.50 0.11 230 / 0.8);  color: oklch(0.97 0.02 230); }

/* Info grid */
.product-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .product-info-grid { grid-template-columns: repeat(3, 1fr); }
}
.info-label {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.info-value {
  margin: 0.0625rem 0 0;
  font-weight: 500;
}
.font-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-variant-numeric: tabular-nums;
}

/* Allergen section rows */
.allergen-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.allergen-line-label {
  font-size: 0.75rem;
  font-weight: 500;
  width: 6rem;
  flex-shrink: 0;
}
.allergen-line-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.ingredients-body {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* Vendor source cards (simplified data source display) */
.vendor-source-cards {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.vendor-source-card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  font-size: 0.8125rem;
}
.vendor-source-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vendor-source-card-name {
  font-weight: 600;
  font-size: 0.875rem;
}
.vendor-source-card-method {
  color: var(--muted-foreground);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--secondary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
}
.vendor-source-card-desc {
  margin: 0.375rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.vendor-source-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
}
.vendor-source-card-id {
  color: var(--muted-foreground);
}
.vendor-source-card-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}
.vendor-source-card-link:hover { text-decoration: underline; }
.vendor-source-card-history {
  margin-top: 0.625rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
}
.vendor-source-card-history > summary {
  cursor: pointer;
  font-weight: 600;
}
.vendor-source-card-history ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.vendor-source-card-history li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  line-height: 1.4;
}
.vendor-source-card-history a {
  color: var(--primary);
  text-decoration: none;
}
.vendor-source-card-history a:hover { text-decoration: underline; }

/* Section provenance (contributing sources) */
.product-provenance-sources {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
}
.product-provenance-sources--no-border {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.provenance-contrib-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  margin: 0 0 0.125rem;
}
.product-provenance-source-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.product-provenance-source-name {
  font-weight: 500;
}
.product-provenance-source-parts {
  font-size: 0.75rem;
}

/* Nutrient table */
.nutrient-box {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.nutrient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: var(--card);
}
.nutrient-row--sep { border-top: 1px solid var(--border); }
.nutrient-row--major { font-weight: 500; }
.nutrient-row--minor { padding-left: 1.5rem; color: var(--muted-foreground); }
.nutrient-amount {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
.nutrient-unit {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-left: 0.125rem;
}

/* ─────────────────────────────────────────────────────────────
   /ai — Ask Sage chat page
   ───────────────────────────────────────────────────────────── */
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--background);
}
.chat-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.chat-inner {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Empty state */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem 2rem;
  gap: 0.75rem;
}
.chat-empty-mascot {
  width: 8rem;
  height: 8rem;
  object-fit: contain;
}
.chat-empty-title {
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-size: 1.75rem;
  font-weight: 500;
  margin: 0;
  color: var(--foreground);
}
.chat-empty-body {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  max-width: 32rem;
  margin: 0;
  line-height: 1.55;
}

/* Message rows */
.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.chat-row--user {
  flex-direction: row-reverse;
}
.chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--muted);
  color: var(--muted-foreground);
}
.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.chat-avatar svg {
  width: 1rem;
  height: 1rem;
}
.chat-avatar--user {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Message bubbles */
.chat-bubble {
  max-width: min(42rem, calc(100vw - 5rem));
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.chat-bubble--assistant {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
}
.chat-bubble--user {
  background: var(--primary);
  color: var(--primary-foreground);
  width: fit-content;
}
.chat-bubble p { margin: 0 0 0.5rem; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul,
.chat-bubble ol { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.chat-bubble li { margin-bottom: 0.125rem; }
.chat-bubble code {
  background: color-mix(in oklch, var(--muted) 60%, transparent);
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.8125rem;
}
.chat-bubble pre {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.75rem;
  overflow-x: auto;
  font-size: 0.8125rem;
  margin: 0.5rem 0;
}
.chat-bubble pre code {
  background: transparent;
  padding: 0;
}
.chat-bubble a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-bubble--user a { color: inherit; }
.chat-bubble table {
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin: 0.5rem 0;
}
.chat-bubble th,
.chat-bubble td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  text-align: left;
}

/* Thinking indicator (initial state before any steps) */
.chat-thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: color-mix(in oklch, var(--accent) 40%, transparent);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 0.375rem;
}
.chat-thinking span:last-child {
  margin-left: 0.125rem;
}
.chat-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--primary);
  opacity: 0.35;
  animation: chat-bounce 1.4s infinite ease-in-out;
}
.chat-dot:nth-child(2) { animation-delay: 0.16s; }
.chat-dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes chat-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Activity log — live steps during streaming */
.chat-activity-log {
  margin-bottom: 0.375rem;
  max-width: min(42rem, calc(100% - 3rem));
}
.chat-step {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  padding: 0.1875rem 0;
  transition: opacity 0.2s;
}
.chat-step--done { opacity: 0.55; }
.chat-step--active { opacity: 1; color: var(--foreground); }
.chat-step-icon { display: inline-flex; flex-shrink: 0; }
.chat-step-icon svg { width: 0.75rem; height: 0.75rem; }
.chat-step-check svg { color: var(--primary); }
.chat-step-spin svg { animation: chat-spin 1.5s linear infinite; }
@keyframes chat-spin { to { transform: rotate(360deg); } }

/* Collapsed summary after response */
.chat-activity-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background 0.15s;
}
.chat-activity-summary:hover { background: color-mix(in oklch, var(--accent) 40%, transparent); }
.chat-activity-summary svg { width: 0.75rem; height: 0.75rem; }
.chat-activity-summary svg:last-child {
  transition: transform 0.2s;
}
.chat-activity-summary.is-expanded svg:last-child {
  transform: rotate(180deg);
}
.chat-activity-details {
  padding: 0.25rem 0 0.25rem 0.25rem;
  border-left: 2px solid var(--border);
  margin: 0.25rem 0 0.25rem 0.375rem;
}
.chat-activity-details .chat-step {
  padding: 0.125rem 0 0.125rem 0.5rem;
  font-size: 0.6875rem;
}

/* Copy markdown button */
.chat-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.chat-copy-btn:hover {
  color: var(--foreground);
  border-color: var(--border);
}
.chat-copy-btn svg { width: 0.75rem; height: 0.75rem; }
.chat-copy-btn--ok { color: var(--primary); }

/* Mascot animations */
@keyframes sage-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes sage-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.chat-avatar--bobbing img { animation: sage-bob 1.2s ease-in-out infinite; }
.chat-avatar--pulsing img { animation: sage-pulse 0.6s ease-out; }

/* Footer (input area) */
.chat-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--background);
  padding: 0.75rem 1rem;
}
.chat-input-row {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.chat-input {
  flex: 1 1 auto;
  resize: none;
  max-height: 12rem;
  min-height: 2.5rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
}
.chat-fab-btn {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-fab-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Examples side sheet */
.chat-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.35);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.chat-sheet-backdrop[data-open="true"] { opacity: 1; }
.chat-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(24rem, 100%);
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgb(0 0 0 / 0.08);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.chat-sheet[data-open="true"] { transform: translateX(0); }
.chat-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.chat-sheet-title {
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0;
}
.chat-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
}
.chat-examples-group { margin-bottom: 1.25rem; }
.chat-examples-cat {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin: 0 0 0.5rem;
}
.chat-examples-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.chat-example-btn {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--foreground);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chat-example-btn:hover {
  background: var(--accent);
  border-color: color-mix(in oklch, var(--border) 60%, var(--foreground));
}

/* ─────────────────────────────────────────────────────────────
   /settings page
   ───────────────────────────────────────────────────────────── */
.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.settings-section-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.settings-section-body {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0 0 0.75rem;
  line-height: 1.55;
}
.settings-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1rem;
}
.settings-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.settings-account-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.settings-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-account-text { min-width: 0; }
.settings-account-name {
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-account-email {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-signout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
}
.settings-form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.settings-select {
  width: 12rem;
}
.settings-select--wide { width: 16rem; }
.settings-model-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.settings-field-label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.settings-save-status {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  min-height: 1em;
  margin-top: 0.5rem;
}
.settings-save-status--error { color: oklch(0.55 0.2 25); }

/* ─────────────────────────────────────────────────────────────
   /help — Data dictionary
   ───────────────────────────────────────────────────────────── */
.help-section { margin-bottom: 1.5rem; }
.help-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
.help-section-intro {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0 0 1rem;
  line-height: 1.55;
}
.help-defs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.help-def {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 1.5rem;
  row-gap: 0.125rem;
  font-size: 0.875rem;
}
.help-def-term-name {
  font-weight: 500;
  margin: 0;
}
.help-def-term-source {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin: 0;
}
.help-def-body {
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}
.help-separator {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}
@media (max-width: 640px) {
  .help-def {
    grid-template-columns: 1fr;
    row-gap: 0.375rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   /compliance page — document style
   ───────────────────────────────────────────────────────────── */
.comp-layout {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.comp-sidebar {
  width: 14rem;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 1.25rem 0 1.25rem 1.25rem;
  border-right: 1px solid var(--border);
}
.comp-sidebar-heading {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin: 0 0 0.375rem;
  padding: 0 0.5rem;
}
.comp-sidebar-link {
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--foreground);
  transition: background 0.15s;
}
.comp-sidebar-link:hover {
  background: var(--accent);
}
.comp-sidebar-link.is-active {
  background: var(--accent);
}
.comp-sidebar-link.is-active .comp-sidebar-label {
  font-weight: 600;
}
.comp-sidebar-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}
.comp-sidebar-cite {
  display: block;
  font-size: 0.625rem;
  color: var(--muted-foreground);
  line-height: 1.3;
}
.comp-sidebar-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0.625rem 0.5rem;
}
.comp-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 2rem 2.5rem;
}
.comp-doc {
  max-width: 54rem;
}
.comp-doc-title {
  font-family: var(--font-display, var(--font-heading, inherit));
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.375rem;
  line-height: 1.25;
}
.comp-doc-subtitle {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}
.comp-hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}
.comp-doc-section {
  margin-bottom: 2.5rem;
}
.comp-doc-h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}
.comp-doc-h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  margin: 1.25rem 0 0.5rem;
}
.comp-doc-h3:first-of-type { margin-top: 0.75rem; }
.comp-doc-cite {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin: 0 0 0.75rem;
}
.comp-source-link {
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.comp-source-link:hover {
  text-decoration: underline;
}
.comp-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.comp-doc-table thead tr {
  border-bottom: 2px solid var(--border);
}
.comp-doc-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.comp-doc-table th.num,
.comp-doc-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.comp-doc-table tbody tr {
  border-bottom: 1px solid oklch(0.92 0.004 85);
}
.comp-doc-table tbody tr:last-child { border-bottom: none; }
.comp-doc-table td {
  padding: 0.625rem 0.75rem;
  vertical-align: baseline;
}
.comp-doc-table--compact td { padding: 0.375rem 0.75rem; }
.comp-val {
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.comp-unit {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-left: 0.25rem;
}
.comp-meta {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.comp-doc-note {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin: 0.5rem 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border);
}
.comp-doc-rule {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0.5rem 0;
}
@media (max-width: 768px) {
  .comp-sidebar { display: none; }
  .comp-scroll { padding: 1rem; }
  .comp-doc-table th,
  .comp-doc-table td { padding: 0.375rem 0.5rem; }
  .comp-val { font-size: 0.875rem; }
}

/* ─────────────────────────────────────────────────────────────
   /connect page
   ───────────────────────────────────────────────────────────── */
.connect-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.connect-intro {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--muted-foreground);
  margin: 0;
}
.connect-h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
.connect-body-sm {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}
.connect-body-sm strong { color: var(--foreground); font-weight: 600; }

/* Steps */
.connect-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .connect-steps { grid-template-columns: repeat(3, 1fr); }
}
.connect-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 0.75rem);
  padding: 1.25rem;
  background: var(--card);
}
.connect-step-num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.connect-step-title { font-size: 0.875rem; font-weight: 600; margin: 0; }
.connect-step-body {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin: 0.375rem 0 0;
  line-height: 1.5;
}

/* Capabilities */
.connect-caps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.connect-cap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--card);
  display: flex;
  gap: 1rem;
}
.connect-cap-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.connect-cap-body { min-width: 0; }
.connect-cap-title { font-size: 0.875rem; font-weight: 600; margin: 0; }
.connect-cap-desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0.125rem 0 0;
  line-height: 1.55;
}
.connect-cap-example {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 500;
  font-style: italic;
  margin: 0.5rem 0 0;
}

/* FAQ */
.connect-faqs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.connect-faq {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}
.connect-faq-q { font-size: 0.875rem; font-weight: 500; margin: 0; }
.connect-faq-a {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0.25rem 0 0;
  line-height: 1.55;
}

/* CTA */
.connect-cta {
  background: color-mix(in oklch, var(--muted) 50%, transparent);
  border-radius: var(--radius-xl, 0.75rem);
  padding: 2rem;
  text-align: center;
}
.connect-cta-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.connect-cta-title h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}
.connect-cta-body {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  max-width: 28rem;
  margin: 0 auto;
  line-height: 1.55;
}
.connect-contact-btn {
  margin-top: 1.25rem;
  height: 2.5rem;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* Dialog */
.connect-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--card);
  color: var(--foreground);
  max-width: 28rem;
  width: 100%;
}
.connect-dialog::backdrop { background: rgb(0 0 0 / 0.4); }
.connect-dialog-inner { padding: 1.25rem; }
.connect-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.connect-dialog-title { font-size: 1rem; font-weight: 600; margin: 0; }
.connect-form { display: flex; flex-direction: column; gap: 0.75rem; }
.connect-form-field { display: flex; flex-direction: column; gap: 0.25rem; }
.connect-form-field label { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 500; }
.connect-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.connect-form-error {
  color: var(--destructive);
  font-size: 0.8125rem;
  margin: 0;
}
.connect-form-success {
  color: var(--foreground);
  font-size: 0.875rem;
  margin: 0;
  padding: 0.75rem;
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  border-radius: var(--radius-md);
}

/* ─────────────────────────────────────────────────────────────
   /data-quality page
   ───────────────────────────────────────────────────────────── */
.dq-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.dq-section-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.dq-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .dq-stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.dq-stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 1rem;
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04));
}
.dq-stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.dq-stat-value {
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-size: 2.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 0.375rem 0 0;
}
.dq-stat-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in oklch, var(--primary) 70%, transparent);
  margin: 0.25rem 0 0;
}
.dq-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dq-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.dq-table thead tr {
  background: color-mix(in oklch, var(--muted) 50%, transparent);
}
.dq-table th {
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.dq-table th.align-right,
.dq-table td.align-right { text-align: right; }
.dq-table td {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
}
.dq-table .dq-td-label { font-weight: 500; }
.dq-table .muted { color: var(--muted-foreground); }

/* ─────────────────────────────────────────────────────────────
   /cn-labels page
   ───────────────────────────────────────────────────────────── */
.cn-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--background);
}
.cn-topbar {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--background) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
}
.cn-topbar-inner {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cn-search-form {
  position: relative;
  margin: 0;
}
.cn-search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
  pointer-events: none;
}
input.cn-search-input {
  padding: 0.25rem 0.625rem 0.25rem 2.5rem;
  height: 2.75rem;
  font-size: 0.875rem;
  background: var(--card);
  width: 100%;
}
.cn-filters-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cn-pill-group {
  display: inline-flex;
  align-items: center;
  background: var(--muted);
  border-radius: var(--radius-md);
  padding: 0.125rem;
  gap: 0.125rem;
}
.cn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.625rem;
  height: 1.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--muted-foreground);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.cn-pill:hover { color: var(--foreground); }
.cn-pill--active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.05));
}
.cn-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.cn-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 1rem 1.25rem;
}
.cn-empty {
  text-align: center;
  padding: 5rem 1rem;
  color: var(--muted-foreground);
}

/* Labels table */
.cn-table {
  width: 100%;
  font-size: 0.875rem;
  table-layout: fixed;
  border-collapse: collapse;
}
.cn-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
.cn-table thead tr {
  background: color-mix(in oklch, var(--muted) 70%, transparent);
  backdrop-filter: blur(4px);
}
.cn-table th {
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.cn-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cn-table tbody tr:hover { background: color-mix(in oklch, var(--muted) 30%, transparent); }
.cn-td-truncate {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cn-td-serving {
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cn-exp-expired { color: var(--destructive, oklch(0.6 0.2 25)); font-weight: 500; }

/* Credit dot/chip */
.cn-credit-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.375rem;
  height: 1.25rem;
  min-width: 1.25rem;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
}

/* Multi-component credit dot stack (used in the Labels table cell) */
.cn-credit-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

/* Badges */
.cn-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: 500;
  border-radius: var(--radius-sm, 0.25rem);
  text-decoration: none;
}
.cn-badge--linked    { background: oklch(0.95 0.05 150); color: oklch(0.35 0.15 150); }
.cn-badge--unlinked  { background: oklch(0.95 0.08 80);  color: oklch(0.4  0.18 80); }
.cn-badge--nomatch   { background: oklch(0.93 0.01 260); color: oklch(0.45 0.01 260); }
.cn-badge--pending   { background: oklch(0.95 0.05 240); color: oklch(0.4  0.18 240); }
.cn-badge--review    { background: oklch(0.94 0.08 60);  color: oklch(0.4  0.2 60); }

/* Label card grid */
.cn-sugg-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}
@media (max-width: 860px) {
  .cn-sugg-list { grid-template-columns: 1fr; }
}
.cn-sugg {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  scroll-margin-top: 7rem;
  transition: border-color 150ms, box-shadow 150ms;
}
.cn-sugg:hover {
  border-color: var(--muted-foreground);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.cn-sugg:has(.is-selected) {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.cn-sugg-row {
  display: block;
  padding: 0.625rem 0.75rem;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
}
.cn-sugg-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
a.cn-sugg-row,
a.cn-sugg-row:hover,
a.cn-sugg-row:focus,
a.cn-sugg-row:active,
a.cn-sugg-row:visited {
  text-decoration: none !important;
}
.cn-sugg-body { min-width: 0; }
.cn-sugg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.cn-sugg-cn {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.cn-sugg-title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cn-sugg-company {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin: 0;
}
.cn-sugg-meta-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}
.cn-sugg-meta-sep {
  width: 2px;
  height: 2px;
  background: var(--muted-foreground);
  border-radius: 50%;
  flex-shrink: 0;
}
.cn-label-credits {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.cn-credit-groups {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  min-width: 0;
}
.cn-credit-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding-right: 0.375rem;
  border-right: 1px solid var(--border);
}
.cn-credit-group:last-child {
  padding-right: 0;
  border-right: 0;
}
.cn-credit-group-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.cn-credit-groups--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 0.375rem;
}
.cn-credit-groups--stacked .cn-credit-group {
  padding-right: 0;
  border-right: 0;
}

.cn-sugg-cands {
  margin: 0;
  padding: 0 0.75rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cn-cand {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}
.cn-cand-body { flex: 1; min-width: 0; }
.cn-cand-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cn-cand-name {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--primary);
  text-decoration: none;
}
.cn-cand-name:hover { text-decoration: underline; }
.cn-cand-name--plain {
  color: var(--foreground);
}
.cn-cand-name--plain:hover {
  text-decoration: none;
}
.cn-cand--link-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.cn-cand--link-card:hover {
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
  text-decoration: none;
}
.cn-cand--link-card:hover .cn-cand-name {
  text-decoration: underline;
}
.cn-cand-meta { margin: 0.125rem 0 0; }
.cn-cand-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}
.cn-cand-reason { margin: 0.25rem 0 0; }
.cn-cand-notes {
  margin-top: 0.5rem;
  border-top: 1px solid oklch(0.88 0.01 85);
  padding-top: 0.45rem;
}
.cn-cand-notes-summary {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.5rem;
  cursor: pointer;
  list-style: none;
  color: var(--muted-foreground);
}
.cn-cand-notes-summary::-webkit-details-marker { display: none; }
.cn-cand-notes-summary::marker { content: ''; }
.cn-cand-notes-summary::before {
  content: '+';
  font-size: 0.625rem;
  color: var(--muted-foreground);
}
.cn-cand-notes[open] > .cn-cand-notes-summary::before {
  content: '-';
}
.cn-cand-notes-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}
.cn-cand-notes-count,
.cn-cand-notes-latest {
  font-size: 0.75rem;
  white-space: nowrap;
}
.cn-cand-notes-latest {
  color: oklch(0.48 0.02 85);
}
.cn-cand-notes-list {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.375rem;
}
.cn-cand-note {
  border-left: 2px solid oklch(0.82 0.03 85);
  padding-left: 0.5rem;
}
.cn-cand-note-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.cn-cand-note-reason,
.cn-cand-note-source {
  margin: 0.2rem 0 0;
}
.cn-cand-sims { margin-top: 0.25rem; }
.cn-cand-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.cn-cand-actions > form { display: inline-flex; margin: 0; }
.cn-cand-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
}
.cn-cand-btn--icon { width: 1.75rem; padding: 0; justify-content: center; }
.cn-cand-btn--link   { color: oklch(0.4 0.15 150); border-color: oklch(0.85 0.08 150); }
.cn-cand-btn--link:hover   { background: oklch(0.96 0.04 150); }
.cn-cand-btn--unlink { color: oklch(0.45 0.18 60); border-color: oklch(0.85 0.1 60); }
.cn-cand-btn--unlink:hover { background: oklch(0.96 0.06 60); }

/* Top-ranked pending candidate — primary tint. Mirrors React's
   `border-primary/30 bg-primary/5` on the first pending row. */
.cn-cand--top {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
  background: color-mix(in oklch, var(--primary) 5%, var(--card));
}
/* Accepted / confirmed / auto-linked candidate — green highlight.
   Mirrors React's `border-emerald-300 bg-emerald-50`. Wins over
   `--top` tint when both classes are present. */
.cn-cand--accepted {
  border-color: oklch(0.82 0.1 150);
  background: oklch(0.97 0.03 150);
}
/* Rejected candidate — dimmed + dashed border. */
.cn-cand--rejected {
  opacity: 0.45;
  border-style: dashed;
}
/* Rank prefix (#1, #2, #3) */
.cn-cand-rank {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem;
  color: var(--muted-foreground);
  font-weight: 600;
}

/* Similarity chips (MatchChips parity) */
.cn-cand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.375rem;
}
.cn-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 0.375rem;
  height: 1.125rem;
  font-size: 0.625rem;
  font-weight: 500;
  border-radius: var(--radius-sm, 0.25rem);
  font-variant-numeric: tabular-nums;
  background: oklch(0.93 0.01 260);
  color: oklch(0.4 0.01 260);
}
.cn-chip--emerald { background: oklch(0.95 0.05 150); color: oklch(0.35 0.15 150); }
.cn-chip--amber   { background: oklch(0.94 0.08 80);  color: oklch(0.4  0.2  80);  }
.cn-chip--blue    { background: oklch(0.95 0.05 240); color: oklch(0.4  0.18 240); }
.cn-chip--warn    { background: oklch(0.93 0.1  30);  color: oklch(0.4  0.22 30);  }
.cn-chip--muted   { background: oklch(0.93 0.01 260); color: oklch(0.45 0.01 260); }

/* CN-on-product meta indicators in the candidate meta line */
.cn-cand-cn-ok       { color: oklch(0.45 0.15 150); margin-left: 0.125rem; }
.cn-cand-cn-existing { color: oklch(0.5  0.15 80);  margin-left: 0.125rem; }
.cn-cand-cn-missing  { color: oklch(0.5  0.2  80);  margin-left: 0.125rem; }

/* Linked-product card inside the CN label drawer.
   Title block on top, labeled fact strip below mirroring the search row's
   columns (Serving / GTIN / Credits / CN Labels / Compliance / Allergens). */
.cn-cand--linked-product { padding: 0.875rem 1rem; }
.cn-cand-linked-body { flex: 1; min-width: 0; }
.cn-cand-linked-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.cn-cand-linked-title-stack { min-width: 0; flex: 1 1 auto; }
.cn-cand-linked-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary);
}
.cn-cand--link-card:hover .cn-cand-linked-name { text-decoration: underline; }
.cn-cand-linked-sub {
  margin: 0.125rem 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}
.cn-cand-linked-sub-sep { opacity: 0.5; }
.cn-cand-linked-cta {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color 150ms ease, transform 150ms ease;
}
.cn-cand--link-card:hover .cn-cand-linked-cta {
  color: var(--primary);
  transform: translateX(2px);
}
.cn-cand-linked-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.875rem 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.cn-cand-linked-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.cn-cand-linked-cell-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.cn-cand-linked-cell-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--foreground);
  word-break: break-word;
}
.cn-cand-linked-empty {
  color: var(--muted-foreground);
  opacity: 0.5;
}
@media (max-width: 900px) {
  .cn-cand-linked-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cn-cand-linked-header { flex-direction: column; gap: 0.25rem; }
  .cn-cand-linked-cta { align-self: flex-end; }
  .cn-cand-linked-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fixed footer */
.cn-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: color-mix(in oklch, var(--background) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: 3rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cn-footer-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
.cn-pager {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.cn-pager-btn {
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cn-pager-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.cn-pager-ellipsis {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  padding: 0 0.25rem;
}

/* ── Landing page ─────────────────────────────────────────── */
.landing-body {
  background: var(--background);
  color: var(--foreground);
  min-height: 100vh;
}
.landing-container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.landing-section-pad { padding: 5rem 1.5rem; }
.landing-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin: 0 0 0.75rem;
}
.landing-section-title {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--foreground);
}
.landing-section-lede {
  font-size: 1.0625rem;
  color: var(--muted-foreground);
  max-width: 42rem;
  margin: 0 0 2.5rem;
  line-height: 1.6;
}

/* Nav */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklch, var(--background) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.landing-nav-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.landing-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
}
.landing-nav-logo {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  background: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.landing-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Hero */
.landing-hero {
  padding: 5rem 1.5rem 4rem;
  background: linear-gradient(180deg, var(--background) 0%, color-mix(in oklch, var(--muted) 40%, var(--background)) 100%);
}
.landing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.landing-hero-title {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  color: var(--foreground);
  font-weight: 500;
}
.landing-hero-title-accent {
  font-style: italic;
  color: var(--primary);
}
.landing-hero-body {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 36rem;
}
.landing-hero-ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.landing-hero-cta-primary,
.landing-hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
}

/* Section backgrounds */
.landing-section-warm {
  background: color-mix(in oklch, var(--accent) 35%, var(--background));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.landing-section-sage {
  background: color-mix(in oklch, var(--primary) 12%, var(--background));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Data quality grid */
.landing-quality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .landing-quality-grid { grid-template-columns: repeat(5, 1fr); }
}
.landing-quality-card {
  padding: 1.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.landing-quality-value {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
  color: var(--foreground);
}
.landing-quality-label {
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
  color: var(--foreground);
}
.landing-quality-sub {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin: 0.25rem 0 0;
}

/* Flow diagram */
.landing-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 900px) {
  .landing-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  }
}
.landing-flow-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.landing-flow-arrow {
  text-align: center;
  color: var(--muted-foreground);
  font-size: 1.5rem;
  line-height: 1;
}
.landing-flow-node {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  text-align: center;
}
.landing-flow-node strong {
  font-size: 0.875rem;
  font-weight: 600;
}
.landing-flow-node span {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.landing-flow-source {
  background: color-mix(in oklch, var(--muted) 40%, var(--card));
}
.landing-flow-db {
  background: color-mix(in oklch, var(--primary) 15%, var(--card));
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
}
.landing-flow-enrich {
  background: color-mix(in oklch, var(--accent) 40%, var(--card));
}
.landing-flow-agent {
  background: color-mix(in oklch, var(--primary) 20%, var(--card));
  align-items: center;
}
.landing-flow-mascot {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.25rem;
}

/* Features */
.landing-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .landing-feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.landing-feature {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.landing-feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: color-mix(in oklch, var(--primary) 15%, var(--card));
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.landing-feature-title {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  font-weight: 500;
  color: var(--foreground);
}
.landing-feature-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
}

/* AI Assistant showcase */
.landing-sage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) {
  .landing-sage-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.landing-sage-chips {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.landing-sage-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 0.875rem;
  color: var(--foreground);
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
  width: fit-content;
}
.landing-sage-chip:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
  background: color-mix(in oklch, var(--primary) 6%, var(--card));
}
.landing-sage-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 0.875rem);
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.landing-sage-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
}
.landing-sage-mascot {
  width: 1.75rem;
  height: 1.75rem;
}
.landing-sage-chat {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.landing-sage-bubble {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 85%;
}
.landing-sage-bubble--user {
  align-self: flex-end;
  background: var(--primary);
  color: var(--primary-foreground);
}
.landing-sage-bubble--assistant {
  align-self: flex-start;
  background: var(--muted);
  color: var(--foreground);
}
.landing-sage-bubble-title {
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.landing-sage-bubble-body { margin: 0; }
.landing-sage-exceed {
  color: var(--destructive, oklch(0.577 0.245 27.325));
  font-weight: 600;
}

/* Final CTAs */
.landing-final-ctas {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}

/* Footer */
.landing-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  background: var(--muted);
}
.landing-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.landing-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.landing-footer-logo {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  background: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.landing-footer-links {
  display: inline-flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.landing-footer-links a {
  color: var(--muted-foreground);
  text-decoration: none;
}
.landing-footer-links a:hover {
  color: var(--foreground);
}
.landing-footer-meta {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  letter-spacing: 0.02em;
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 0.5rem;
}
@media (min-width: 768px) {
  .landing-footer-meta {
    width: auto;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    margin-left: auto;
  }
}

/* Nav links + actions (Direction A) */
.landing-nav-links {
  display: none;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
}
.landing-nav-links a {
  color: inherit;
  text-decoration: none;
}
.landing-nav-links a:hover { color: var(--primary); }
.landing-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.landing-nav-signin {
  font-size: 0.875rem;
  color: var(--foreground);
  text-decoration: none;
}
.landing-nav-signin:hover { color: var(--primary); }
@media (min-width: 900px) {
  .landing-nav-links { display: inline-flex; }
}

/* Hero split + live ingest badge */
.landing-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .landing-hero-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}
.landing-hero-copy { max-width: 36rem; }
.landing-hero-badge--live {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
}
.landing-hero-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--primary);
  display: inline-block;
}

/* Hero search mock */
.landing-search-mock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 0.875rem);
  padding: 1rem;
  box-shadow: 0 24px 48px -24px color-mix(in oklch, var(--primary) 30%, transparent),
              0 4px 12px rgba(0,0,0,0.04);
}
.landing-search-mock-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: color-mix(in oklch, var(--muted) 50%, var(--card));
  font-size: 0.875rem;
  color: var(--foreground);
}
.landing-search-mock-kbd {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-family: ui-monospace, monospace;
}
.landing-search-mock-meta {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.875rem 0 0.5rem;
}
.landing-search-result {
  padding: 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  margin-top: 0.5rem;
}
.landing-search-result--muted { opacity: 0.6; }
.landing-search-result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.landing-search-result-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--foreground);
}
.landing-search-result-sub {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin-top: 0.1875rem;
}
.landing-search-nutrients {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.875rem;
  font-size: 0.6875rem;
}
.landing-search-nutrients > div { display: flex; flex-direction: column; gap: 0.125rem; }
.landing-search-nutrients span { color: var(--muted-foreground); }
.landing-search-nutrients strong { font-weight: 600; color: var(--foreground); font-size: 0.75rem; }

/* SB 314 banner split */
.landing-sb314-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .landing-sb314-split {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

/* Top additives chart */
.landing-additives-chart {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.landing-additives-chart-head {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.landing-additives-chart-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.landing-additive-row {
  display: grid;
  grid-template-columns: 8rem 1fr 4rem;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
}
.landing-additive-label { color: var(--foreground); }
.landing-additive-track {
  background: color-mix(in oklch, var(--muted) 60%, transparent);
  border-radius: 0.25rem;
  height: 0.75rem;
  overflow: hidden;
}
.landing-additive-fill { height: 100%; transition: width 0.3s ease; }
.landing-additive-fill.is-red    { background: #c63b3b; }
.landing-additive-fill.is-yellow { background: #e5b62a; }
.landing-additive-fill.is-blue   { background: #2e6dbf; }
.landing-additive-fill.is-gray   { background: #9aa39a; }
.landing-additive-fill.is-amber  { background: #c87922; }
.landing-additive-count {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.landing-additives-chart-foot {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin-top: 0.875rem;
  font-style: italic;
}

/* Three jobs */
.landing-jobs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px) {
  .landing-jobs-grid {
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 3rem;
  }
}
.landing-jobs-intro .landing-section-lede { margin-bottom: 0; }
.landing-jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.landing-job-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
@media (min-width: 768px) {
  .landing-job-row {
    grid-template-columns: 3.25rem minmax(0, 1fr) 8rem;
  }
}
.landing-job-num {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 1.25rem;
  color: var(--primary);
  font-weight: 500;
}
.landing-job-title {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--foreground);
}
.landing-job-body {
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  margin: 0.375rem 0 0;
  line-height: 1.55;
  max-width: 32rem;
}
.landing-job-metric {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  grid-column: 2 / -1;
  margin-top: 0.5rem;
}
@media (min-width: 768px) {
  .landing-job-metric {
    text-align: right;
    grid-column: auto;
    margin-top: 0;
  }
}

/* Data quality head + 4-col grid */
.landing-quality-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 900px) {
  .landing-quality-head {
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: 3rem;
    align-items: end;
  }
}
.landing-quality-lede { margin-bottom: 0; }
.landing-quality-head .landing-section-title { margin-bottom: 0; }
.landing-quality-grid--four { margin-bottom: 0; }
@media (min-width: 768px) {
  .landing-quality-grid--four { grid-template-columns: repeat(4, 1fr); }
}

/* Sage queries column */
.landing-sage-queries {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.landing-sage-query {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.125rem;
}
.landing-sage-query-row {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.landing-sage-query-row + .landing-sage-query-row { margin-top: 0.625rem; }
.landing-sage-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex: none;
  overflow: hidden;
}
.landing-sage-avatar--you {
  background: color-mix(in oklch, var(--muted) 70%, var(--card));
  color: var(--foreground);
}
.landing-sage-avatar--sage {
  background: color-mix(in oklch, var(--primary) 12%, var(--card));
  border: 1px solid color-mix(in oklch, var(--primary) 28%, var(--border));
  color: var(--primary);
}
.landing-sage-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landing-sage-query-q {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  margin: 0;
  line-height: 1.5;
}
.landing-sage-query-a {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.55;
}

/* Final dark CTA slab */
.landing-final-slab {
  background: oklch(0.22 0.02 140);
  color: oklch(0.95 0.01 80);
  padding: 4rem 1.5rem;
}
.landing-final-slab-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}
@media (min-width: 900px) {
  .landing-final-slab-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 3rem;
  }
}
.landing-final-slab-title {
  color: inherit;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  margin: 0;
  max-width: 32rem;
}
.landing-final-slab-body {
  color: oklch(0.85 0.01 80);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 1rem 0 0;
  max-width: 32rem;
}
.landing-final-slab-actions {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (min-width: 900px) {
  .landing-final-slab-actions { justify-content: flex-end; }
}
.landing-final-slab-cta-primary {
  background: oklch(0.95 0.01 80);
  color: oklch(0.22 0.02 140);
  border-color: oklch(0.95 0.01 80);
}
.landing-final-slab-cta-primary:hover {
  background: oklch(1 0 0);
  color: oklch(0.22 0.02 140);
}
.landing-final-slab-cta-secondary {
  background: transparent;
  color: oklch(0.95 0.01 80);
  border: 1px solid oklch(0.55 0.01 80);
}
.landing-final-slab-cta-secondary:hover {
  background: oklch(0.30 0.02 140);
  color: oklch(0.95 0.01 80);
}

/* SB 314 public pages */
.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;
}

.sb314-banner {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
  border-top-color: #ffe0b2;
  border-bottom-color: #ffe0b2;
}

.sb314-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--card);
  border: 1px solid #ffcc80;
  color: #e65100;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.sb314-banner-badge svg {
  width: 0.875rem;
  height: 0.875rem;
}

.sb314-stat-grid {
  max-width: 48rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .sb314-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sb314-stat-good { color: #16834a; }
.sb314-stat-bad { color: #c7372f; }

.badge.sb314-pass {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  font-weight: 600;
}

.badge.sb314-fail {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 600;
}

.sb314-page {
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.sb314-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  text-decoration: none;
}

.sb314-back-link:hover { color: var(--foreground); }
.sb314-back-link svg { width: 0.875rem; height: 0.875rem; }

.sb314-page-header,
.sb314-report-hero {
  margin-bottom: 2rem;
}

.sb314-page-header h1,
.sb314-report-hero h1,
.sb314-cta h2,
.sb314-section-head h2 {
  font-family: var(--font-serif, 'Fraunces', serif);
  color: var(--foreground);
}

.sb314-page-header h1,
.sb314-report-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  font-weight: 500;
  margin: 0 0 0.875rem;
}

.sb314-page-header p,
.sb314-report-hero p,
.sb314-section-head p,
.sb314-copy,
.sb314-public-note,
.sb314-note,
.sb314-report-footer {
  color: var(--muted-foreground);
  line-height: 1.6;
}

.sb314-page-header p,
.sb314-report-hero p {
  max-width: 45rem;
  font-size: 1rem;
  margin: 0;
}

.sb314-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.sb314-search-form input {
  min-width: 0;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 0.875rem;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
}

.sb314-search-form .btn,
.sb314-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.sb314-search-form svg,
.sb314-cta .btn svg {
  width: 1rem;
  height: 1rem;
}

.sb314-result-count {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  margin: 0 0 0.75rem;
}

.sb314-result-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sb314-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.sb314-result-main {
  min-width: 0;
}

.sb314-result-main h2 {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.sb314-result-main p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.sb314-result-row .badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.sb314-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--muted-foreground);
  padding: 2rem 1rem;
  text-align: center;
}

.sb314-empty p {
  margin: 0;
}

.sb314-suggestions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.sb314-suggestions a {
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklch, var(--primary) 35%, var(--border));
  background: color-mix(in oklch, var(--primary) 8%, var(--card));
  color: var(--primary);
  font-size: 0.8125rem;
  text-decoration: none;
}

.sb314-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  margin: 2rem 0 1rem;
}

.sb314-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.sb314-card-value {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--foreground);
}

.sb314-card-label {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

.sb314-card-good {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.sb314-card-good .sb314-card-value,
.sb314-card-good .sb314-card-label {
  color: #15803d;
}

.sb314-card-bad {
  background: #fef2f2;
  border-color: #fecaca;
}

.sb314-card-bad .sb314-card-value,
.sb314-card-bad .sb314-card-label {
  color: #b91c1c;
}

.sb314-report-lookup {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1.15fr);
  gap: 1.25rem;
  align-items: center;
  margin: 1rem 0 2.5rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in oklch, var(--primary) 28%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--primary) 7%, var(--card));
}

.sb314-report-lookup h2 {
  margin: 0 0 0.375rem;
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--foreground);
}

.sb314-report-lookup p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.sb314-report-lookup-form {
  margin-bottom: 0;
}

.sb314-report-section {
  margin-top: 2.5rem;
}

.sb314-section-head h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.sb314-section-head p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

.sb314-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.sb314-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.sb314-table th,
.sb314-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.sb314-table th {
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.sb314-table tr:last-child td {
  border-bottom: 0;
}

.sb314-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sb314-table .muted {
  color: var(--muted-foreground);
}

.sb314-note {
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px solid #ffe082;
  border-radius: var(--radius-md);
  background: #fff8e1;
  color: #6d4c41;
  font-size: 0.8125rem;
}

.sb314-copy p {
  margin: 0 0 0.875rem;
}

.sb314-cta {
  margin-top: 3rem;
  padding: 2rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border));
  background: color-mix(in oklch, var(--primary) 8%, var(--card));
  text-align: center;
}

.sb314-cta h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.sb314-cta p {
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.sb314-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sb314-report-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  text-align: center;
}

@media (max-width: 700px) {
  .sb314-page {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }

  .sb314-search-form,
  .sb314-stats,
  .sb314-report-lookup {
    grid-template-columns: 1fr;
  }

  .sb314-search-form .btn {
    width: 100%;
  }

  .sb314-result-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── Responsive: force-collapse on small viewports ──────────── */
@media (max-width: 860px) {
  .sidebar { width: 4rem; }
  .sidebar-brand { justify-content: center; padding: 0; }
  .brand-text,
  .sidebar-item-label,
  .sidebar-section-label { display: none; }
  .sidebar-item { justify-content: center; padding: 0; }
  .page-shell-body-inner,
  .page-content { padding: 1rem; }
}

/* Search card (real form inside landing-search-mock shell) */
.landing-search-card { padding: 1.125rem; }
.landing-search-card-form { margin: 0; }
.landing-search-card-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--background);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.landing-search-card-input:focus-within {
  border-color: color-mix(in oklch, var(--primary) 60%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}
.landing-search-card-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--foreground);
  padding: 0.375rem 0;
  font-size: 0.875rem;
}
.landing-search-card-input input::placeholder { color: var(--muted-foreground); }
.landing-search-card-submit { flex: none; }
.landing-search-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.landing-search-card-chips--block {
  margin-top: 1.5rem;
  justify-content: flex-start;
}
.landing-search-card-chips a {
  padding: 0.3125rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border));
  background: color-mix(in oklch, var(--primary) 6%, var(--card));
  color: var(--primary);
  font-size: 0.75rem;
  text-decoration: none;
  transition: background 0.15s;
}
.landing-search-card-chips a:hover {
  background: color-mix(in oklch, var(--primary) 14%, var(--card));
}
.landing-search-card-foot {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin: 0.875rem 0 0;
  line-height: 1.5;
}

/* Actual result rows on /lookup, styled like the hero search mock cards */
.landing-results-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.landing-search-result--card {
  background: var(--card);
  transition: border-color 0.15s, transform 0.15s;
}
.landing-search-result--card:hover {
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
}

/* Hero variant of the additives chart on /sb314 */
.landing-additives-chart--hero { align-self: start; }
.landing-additives-chart-foot a {
  color: var(--primary);
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
}
.landing-additives-chart-foot a:hover { text-decoration: underline; }

/* Sage mascot portrait beside section heading */
.landing-sage-portrait {
  width: 4.5rem;
  height: 4.5rem;
  display: block;
  margin-bottom: 1.25rem;
  border-radius: 9999px;
  background: color-mix(in oklch, var(--primary) 10%, var(--card));
  border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border));
  padding: 0.25rem;
  object-fit: cover;
}

/* /lookup — search bar prominent, results sit right under */
.lookup-hero {
  padding: 3.5rem 1.5rem 4rem;
}
.lookup-hero-head {
  max-width: 38rem;
  margin-bottom: 2rem;
}
.lookup-hero-head .landing-hero-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0.75rem 0 0.875rem;
}
.lookup-hero-head .landing-hero-body { margin: 0; }

.lookup-search-form {
  margin: 0 0 1.25rem;
}
.lookup-search-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  box-shadow: 0 8px 24px -16px color-mix(in oklch, var(--primary) 25%, transparent);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lookup-search-input:focus-within {
  border-color: color-mix(in oklch, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 16%, transparent),
              0 8px 24px -16px color-mix(in oklch, var(--primary) 30%, transparent);
}
.lookup-search-input input[type="search"] {
  flex: 1;
  min-width: 0;
  height: auto;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 1rem;
  color: var(--foreground);
  padding: 0.625rem 0;
  appearance: none;
  -webkit-appearance: none;
}
.lookup-search-input input[type="search"]:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.lookup-search-input input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.lookup-search-input input::placeholder { color: var(--muted-foreground); }
.lookup-search-submit {
  flex: none;
  height: 2.5rem;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.lookup-result-count {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  margin: 0 0 0.75rem;
}
.lookup-results {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.lookup-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: border-color 0.15s;
}
.lookup-result:hover {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
}
.lookup-result-main { min-width: 0; flex: 1; }
.lookup-result-main h2 {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.3;
}
.lookup-result-main p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.lookup-result .badge {
  flex-shrink: 0;
  white-space: nowrap;
}
.lookup-public-note {
  margin: 1rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
}

.lookup-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--muted-foreground);
  padding: 2rem 1.25rem;
  text-align: center;
}
.lookup-empty p { margin: 0; }
.lookup-empty-sub { margin-top: 0.625rem; font-size: 0.875rem; }
.lookup-suggestions { margin-top: 0.5rem; }
.lookup-suggestions-label {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.625rem;
}
.lookup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.lookup-suggestions .lookup-chips { justify-content: flex-start; }
.lookup-chips a {
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border));
  background: color-mix(in oklch, var(--primary) 6%, var(--card));
  color: var(--primary);
  font-size: 0.8125rem;
  text-decoration: none;
}
.lookup-chips a:hover {
  background: color-mix(in oklch, var(--primary) 14%, var(--card));
}

@media (max-width: 640px) {
  .lookup-search-input {
    padding: 0.5rem 0.5rem 0.5rem 0.875rem;
    flex-wrap: wrap;
  }
  .lookup-search-input input {
    flex: 1 1 100%;
    order: 0;
  }
  .lookup-search-submit {
    width: 100%;
    justify-content: center;
  }
  .lookup-result {
    flex-direction: column;
    align-items: flex-start;
  }
}