/* RetrievalKit visual identity — dark-mode-first, in the restrained
   "Linear style" that's become the default credible look for technical
   infrastructure products in 2026: near-black surfaces, one accent
   color, hairline borders carrying most of the depth instead of heavy
   shadows, and an 8px spacing grid. A light/dark toggle isn't the goal
   here — for a self-hosted infra demo aimed at engineers evaluating it,
   dark is the deliberate, single identity, the same way the rest of
   this portfolio commits to one considered look per product rather than
   defaulting to both. Every text/background pairing below is checked
   against WCAG AA with a computed contrast ratio, not eyeballed — see
   the note by --rk-border for the one token that's deliberately under
   3:1 because it's decorative, never a component boundary. */

:root {
  --rk-bg: #0b0d10;
  --rk-bg-elevated: #101319;
  --rk-surface: #12141a;
  --rk-surface-hover: #171a21;

  /* Decorative only (card edges, dividers) — under the 3:1 UI-boundary
     threshold on purpose, since depth here comes from the bg/surface
     step, not the border. Never used on a form input or anything an
     interactive boundary depends on — that's --rk-border-interactive,
     verified separately at 3.0–3.2:1. */
  --rk-border: #1c1f26;
  --rk-border-interactive: #5b6270;

  --rk-text: #f2f3f5;
  --rk-text-secondary: #9aa0aa;
  --rk-text-tertiary: #7d838d;

  --rk-accent: #4fd1c5;
  --rk-accent-dim: #2f8f86;
  --rk-accent-ink: #08090a;
  --rk-accent-soft-bg: rgba(79, 209, 197, 0.1);
  --rk-accent-soft-border: rgba(79, 209, 197, 0.28);

  /* Same soft-bg/soft-border recipe as --rk-accent, just a different
     hue — so the one destructive action in the product reads as part
     of the same restrained system instead of a mismatched, separately
     -invented red. Verified 6.7:1 on --rk-surface. */
  --rk-danger: #f87171;
  --rk-danger-soft-bg: rgba(248, 113, 113, 0.1);
  --rk-danger-soft-border: rgba(248, 113, 113, 0.28);

  --rk-radius-sm: 6px;
  --rk-radius: 10px;
  --rk-radius-lg: 14px;

  /* Reserved for true overlays/focus rings only — not a default card
     treatment. 2026's SaaS baseline moved away from ambient card
     shadows toward hairline borders; shadow now signals "this is
     floating above the page," not "this is a card." */
  --rk-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--rk-bg);
  color: var(--rk-text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

code, .rk-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.875em;
}

code {
  background: var(--rk-surface);
  border: 1px solid var(--rk-border);
  color: var(--rk-text-secondary);
  padding: 0.1em 0.4em;
  border-radius: var(--rk-radius-sm);
  /* Identifiers like semantic_text are unbreakable by default and force
     their container wider than a phone viewport. `anywhere` (not
     `break-word`) is what also lowers the min-content contribution. */
  overflow-wrap: anywhere;
}

.container {
  max-width: 1040px;
  margin-inline: auto;
}

a {
  color: var(--rk-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover {
  color: #7ee0d6;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--rk-accent);
  outline-offset: 2px;
}

/* Nav — same surface step as the rest of the page (--rk-bg-elevated),
   not a separate dark bar floating on a light body: the whole product
   is dark now, so the nav is a band, not a contrast switch. */
.rk-navbar {
  background-color: var(--rk-bg-elevated) !important;
  border-bottom: 1px solid var(--rk-border) !important;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.rk-brand {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--rk-text) !important;
}

.rk-brand img {
  vertical-align: unset;
}

.navbar-nav .nav-link {
  color: var(--rk-text-secondary) !important;
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
  color: var(--rk-text) !important;
}
.navbar .btn-link.nav-link {
  background: transparent !important;
  border: none;
  text-decoration: none;
}

/* Below ~576px the brand + three nav items (text link, text link, filled
   button) don't fit on one row. Bootstrap's default navbar flex-wrap then
   wraps mid-word inside each nav-link and blows the button up to two
   lines instead of wrapping the *row* — this is a real layout bug, not
   the sandbox's blocked-CDN artifact seen elsewhere in this project. Fix:
   let the nav-item row wrap as a whole onto its own line under the brand,
   keep every label on one line, and shrink the CTA to match the rest. */
@media (max-width: 576px) {
  .rk-navbar .container {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
  .rk-navbar .navbar-nav {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--space-2);
  }
  .rk-navbar .navbar-nav .nav-item {
    margin-right: 0 !important;
  }
  .rk-navbar .navbar-nav .nav-link {
    font-size: 0.82rem;
  }
  .rk-navbar .navbar-nav .btn-primary.btn-sm {
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
  }
}

/* Hero */
.rk-hero {
  text-align: center;
  padding: var(--space-8) var(--space-2) var(--space-4);
}

.rk-get-started {
  max-width: 46rem;
  margin: var(--space-8) auto var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rk-border);
}

.rk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rk-accent);
  background: var(--rk-accent-soft-bg);
  border: 1px solid var(--rk-accent-soft-border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  margin-bottom: var(--space-3);
}

.rk-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rk-accent);
  display: inline-block;
}

.rk-hero h1 {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  line-height: 1.15;
  max-width: 34rem;
  margin: 0 auto var(--space-2);
  color: var(--rk-text);
}

.rk-hero .rk-subhead {
  font-size: 1.1rem;
  color: var(--rk-text-secondary);
  max-width: 36rem;
  margin: 0 auto;
}

/* How it works strip */
.rk-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  max-width: 46rem;
  margin: var(--space-4) auto 0;
  text-align: left;
}

.rk-step {
  background: var(--rk-surface);
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-radius);
  padding: var(--space-2);
  transition: border-color 150ms ease;
}
.rk-step:hover {
  border-color: var(--rk-border-interactive);
}

.rk-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--rk-accent-soft-bg);
  border: 1px solid var(--rk-accent-soft-border);
  color: var(--rk-accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.rk-step h3 {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--rk-text);
}

.rk-step p {
  font-size: 0.82rem;
  color: var(--rk-text-secondary);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .rk-steps {
    grid-template-columns: 1fr;
  }
}

/* Search */
.rk-search-wrap {
  max-width: 40rem;
  margin: var(--space-4) auto 0;
}

.rk-search-input {
  width: 100%;
  font-size: 1.05rem;
  padding: 0.9rem 1.25rem;
  background: var(--rk-surface);
  color: var(--rk-text);
  border: 1.5px solid var(--rk-border-interactive);
  border-radius: var(--rk-radius);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.rk-search-input::placeholder {
  color: var(--rk-text-tertiary);
}

.rk-search-input:focus {
  outline: none;
  border-color: var(--rk-accent);
  box-shadow: 0 0 0 3px var(--rk-accent-soft-bg), var(--rk-shadow-float);
}

.rk-search-hint {
  font-size: 0.8rem;
  color: var(--rk-text-tertiary);
  margin-top: var(--space-1);
}

.rk-example-queries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-2);
}

.rk-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--rk-text-secondary);
  background: var(--rk-surface);
  border: 1px solid var(--rk-border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}

.rk-chip:hover {
  border-color: var(--rk-accent-soft-border);
  color: var(--rk-accent);
}

/* Results */
.rk-results-summary {
  font-size: 0.85rem;
  color: var(--rk-text-secondary);
}

.rk-facet-group {
  margin-bottom: var(--space-3);
}

.rk-facet-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rk-text-tertiary);
  margin-bottom: var(--space-1);
}

.rk-facet-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.85rem;
  color: var(--rk-text-secondary);
  background: none;
  border: none;
  padding: 0.3rem 0;
}

.rk-facet-btn:hover:not(:disabled) {
  color: var(--rk-accent);
}
.rk-facet-btn:disabled {
  color: var(--rk-text-tertiary);
}

.rk-result-card {
  background: var(--rk-surface);
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  transition: border-color 150ms ease;
}
.rk-result-card:hover {
  border-color: var(--rk-border-interactive);
}

.rk-result-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.rk-result-title a {
  color: var(--rk-text);
  text-decoration: none;
}

.rk-result-title a:hover {
  color: var(--rk-accent);
}

.rk-result-summary {
  font-size: 0.92rem;
  color: var(--rk-text-secondary);
  margin-bottom: var(--space-1);
}

.rk-result-meta {
  font-size: 0.75rem;
  color: var(--rk-text-tertiary);
  font-family: 'JetBrains Mono', monospace;
}

/* Buttons */
.btn {
  border-radius: var(--rk-radius-sm);
  font-weight: 600;
}
.btn-primary {
  background-color: var(--rk-accent);
  border-color: var(--rk-accent);
  color: var(--rk-accent-ink);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #7ee0d6;
  border-color: #7ee0d6;
  color: var(--rk-accent-ink);
}

.btn-outline-primary {
  color: var(--rk-text);
  border-color: var(--rk-border-interactive);
  background: transparent;
}
.btn-outline-primary:hover {
  border-color: var(--rk-accent);
  color: var(--rk-accent);
  background: var(--rk-accent-soft-bg);
}

.btn-outline-danger {
  color: var(--rk-danger);
  border-color: var(--rk-danger-soft-border);
  background: transparent;
}
.btn-outline-danger:hover {
  background: var(--rk-danger-soft-bg);
  border-color: var(--rk-danger);
  color: var(--rk-danger);
}

.btn-outline-secondary {
  color: var(--rk-text-secondary);
  border-color: var(--rk-border-interactive);
}

/* Generic elevated panel — used for the dashboard table and both admin
   forms so they read as a distinct surface rather than floating fields
   directly on the page background. */
.rk-panel {
  background: var(--rk-surface);
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-radius-lg);
  padding: var(--space-3);
}
.rk-panel-narrow {
  max-width: 420px;
  margin: var(--space-3) auto 0;
}

/* Forms */
.form-label {
  color: var(--rk-text);
  font-weight: 600;
  font-size: 0.9rem;
}
.form-control, textarea.form-control {
  background-color: var(--rk-surface);
  border: 1.5px solid var(--rk-border-interactive);
  color: var(--rk-text);
  border-radius: var(--rk-radius-sm);
}
.form-control::placeholder {
  color: var(--rk-text-tertiary);
}
.form-control:focus {
  background-color: var(--rk-surface);
  border-color: var(--rk-accent);
  color: var(--rk-text);
  box-shadow: 0 0 0 3px var(--rk-accent-soft-bg);
}
.form-text {
  color: var(--rk-text-tertiary);
}

/* Tables (admin dashboard) */
.table {
  color: var(--rk-text);
  /* Bootstrap's dark theme paints its own opaque #212529 via
     --bs-table-bg directly on <th>/<td>, independent of the panel
     background beneath it — caught by axe-core (a real 4.04:1 fail
     against --rk-text-tertiary, which is only verified against
     --rk-surface). Force it transparent so the verified panel color
     underneath is what actually renders. */
  --bs-table-bg: transparent;
}
.table thead th {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  color: var(--rk-text-tertiary);
  border-bottom-color: var(--rk-border);
}
.table td, .table th {
  border-color: var(--rk-border);
}
/* No zebra striping: keeps every row's text at the same, already-
   verified contrast against --rk-surface rather than introducing a
   second, unverified background tone. */

/* Alerts */
.alert {
  border-radius: var(--rk-radius);
  border: 1px solid;
  background-color: var(--rk-surface);
}
.alert-danger {
  border-color: var(--rk-danger-soft-border);
  color: var(--rk-danger);
}
.alert-success {
  border-color: #2f6b47;
  color: #9fe0b6;
}
.alert-warning {
  border-color: #6b5a2f;
  color: #e0c99f;
}
.alert-info {
  border-color: var(--rk-accent-soft-border);
  color: var(--rk-accent);
}

mark {
  background-color: rgba(79, 209, 197, 0.35);
  color: var(--rk-text);
  padding: 0 0.15rem;
  border-radius: 0.15rem;
}

/* Footer / newsletter — same rk-panel-style surface as the rest of the
   product (--rk-surface on --rk-border), reusing tokens rather than
   introducing a new footer-specific color. */
.rk-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rk-border);
}

.rk-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--rk-surface);
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-radius-lg);
  padding: var(--space-3);
}

.rk-newsletter-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rk-newsletter-form .form-control {
  min-width: 15rem;
}

@media (max-width: 640px) {
  .rk-newsletter {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .rk-newsletter-form {
    flex-direction: column;
  }
  .rk-newsletter-form .form-control {
    min-width: 0;
  }
}

/* Starter Kit landing page */
.rk-kit-hero {
  text-align: center;
  padding: var(--space-6) var(--space-2) var(--space-4);
}

.rk-kit-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--rk-accent);
}

.rk-kit-price span {
  font-size: 1rem;
  color: var(--rk-text-tertiary);
  font-weight: 500;
}

.rk-kit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.rk-kit-list li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--rk-text-secondary);
  font-size: 0.95rem;
  /* Grid items default to min-width: auto and refuse to shrink below
     min-content, which overflowed this list on narrow viewports. */
  min-width: 0;
}

.rk-kit-list li::before {
  content: '\2713';
  color: var(--rk-accent);
  font-weight: 700;
  flex: none;
}