/* anythingllm-alternative.com — decision archetype, texture artifacts, scope-switch signature.
   Kortix look: black and white plus one accent. All color comes from tokens.css; the only
   literals on this site are the --kortix-base / --ring accent override (raspberry). */

:root {
  --kortix-base: #e0318c;
  --ring: #e0318c;
}
:root[data-theme="dark"] {
  --kortix-base: #e0318c;
  --ring: #e0318c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kortix-base: #e0318c;
    --ring: #e0318c;
  }
}
/* ---------- base: type, rhythm, links, code, tables ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--foreground-strong);
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: 500;
}

p { margin: 0; max-width: 66ch; }
p + p { margin-top: calc(var(--spacing) * 4); }

a {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--kortix-base) 70%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--kortix-base); }

strong { font-weight: 500; }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* inline code */
p code, li code, td code, figcaption code {
  background: var(--muted);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  font-size: 0.875em;
}

/* ---------- the page column: one centered container, one left edge ---------- */

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: calc(var(--spacing) * 6);
}

.section {
  padding-block: calc(var(--spacing) * 12);
}
.section + .section { border-top: 1px solid var(--border); }

.section-head {
  margin-bottom: calc(var(--spacing) * 6);
}
.section-head h2 { max-width: 60ch; }
.section-head .section-sub {
  margin-top: calc(var(--spacing) * 3);
  color: var(--muted-foreground);
  max-width: 66ch;
}

/* mono-uppercase eyebrow: one per section, text-xs */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 calc(var(--spacing) * 3);
}
.eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--kortix-base);
}

/* section head + h2 gap rhythm */
h2 { margin-bottom: calc(var(--spacing) * 5); }
h3 { margin-top: calc(var(--spacing) * 7); margin-bottom: calc(var(--spacing) * 3); }
.section > p + h3, .section > ul + h3 { margin-top: calc(var(--spacing) * 7); }

/* ---------- lists ---------- */

ul, ol { margin: 0; padding: 0; max-width: 70ch; }
ul { list-style: none; }
ol { list-style: none; counter-reset: step; }

.prose-list li {
  position: relative;
  padding-inline-start: calc(var(--spacing) * 5);
  margin-top: calc(var(--spacing) * 3);
}
.prose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--muted-foreground);
}

/* numbered checklist (migration guide) */
.step-list { counter-reset: step; }
.step-list li {
  counter-increment: step;
  position: relative;
  padding-inline-start: calc(var(--spacing) * 12);
  margin-top: calc(var(--spacing) * 5);
  min-width: 0;
}
.step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.step-list li strong { display: block; margin-bottom: calc(var(--spacing) * 1); }

/* ---------- code blocks: always scroll inside their own box ---------- */

.cmd {
  background: var(--terminal-surface);
  color: var(--terminal-fg);
  border: 1px solid var(--terminal-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4);
  margin-block: calc(var(--spacing) * 4);
}
.cmd code {
  background: none;
  padding: 0;
  color: var(--terminal-fg);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  white-space: pre;
  display: block;
  min-width: max-content;
}

.cmd-inline-note {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

/* ---------- tables: scroll inside their own box ---------- */

.table-scroll {
  overflow-x: auto;
  margin-block: calc(var(--spacing) * 5);
}
.table-scroll table { min-width: 36rem; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-bottom: 1px solid var(--border);
}
th {
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  white-space: nowrap;
}
td:first-child, th:first-child { padding-inline-start: 0; }
td:last-child, th:last-child { padding-inline-end: 0; }
tbody tr:last-child td { border-bottom: none; }

/* the recommended row/column carries a quiet lift, never a hue */
.col-rec, tr.row-rec td { background: var(--card); }
tr.row-rec td:first-child { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.4rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.tag-rec {
  border-color: color-mix(in oklab, var(--kortix-base) 45%, var(--border));
  color: var(--foreground);
}
.tag .dot {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--kortix-base);
  margin-inline-end: 0.3rem;
  vertical-align: 0.08em;
}
/* ---------- layout: header, hero (texture artifact), sections, footer ---------- */

/* header */
.site-header { border-bottom: 1px solid var(--border); background: var(--background); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  min-height: calc(var(--spacing) * 24);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
  text-decoration: none;
  font-size: var(--text-base);
  white-space: nowrap;
}
.brand:hover { color: var(--foreground); }
.brand svg { display: block; color: var(--foreground); }
.brand em { font-style: normal; color: var(--muted-foreground); font-weight: 500; }

.nav-links { display: none; align-items: center; gap: calc(var(--spacing) * 1); }
.nav-links a {
  text-decoration: none;
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-md);
}
.nav-links a:hover { background: var(--hover); color: var(--foreground); }
.nav-links a[aria-current="page"] { color: var(--foreground); }
.nav-links a[aria-current="page"] .nav-dash { color: var(--kortix-base); }
.nav-dash { color: var(--muted-foreground); margin-inline-end: 0.35em; }

@media (min-width: 56.25rem) {
  .nav-links { display: flex; }
}

/* header + mobile CTA row */
.nav-actions { display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
@media (min-width: 56.25rem) {
  .nav-actions .btn { display: inline-flex; } /* header CTA stays visible everywhere */
}

/* buttons: 44px hit height, flat, token colors only */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 12);
  white-space: nowrap;
  padding-inline: calc(var(--spacing) * 5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover {
  background: color-mix(in oklab, var(--foreground) 90%, transparent);
  color: var(--primary-foreground);
}
.btn-ghost { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn-ghost:hover { background: var(--hover); color: var(--foreground); }
.btn-sm { min-height: calc(var(--spacing) * 11); padding-inline: calc(var(--spacing) * 4); font-size: var(--text-xs); }

/* hero: copy left, texture artifact cropped at the pane edge, opposite the headline */
.hero { overflow: clip; }
.hero .wrap {
  display: grid;
  gap: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 10) calc(var(--spacing) * 12);
}
.hero-copy { max-width: 46rem; }

@media (min-width: 64rem) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: center;
    padding-block: calc(var(--spacing) * 16) calc(var(--spacing) * 20);
  }
  .hero-copy { max-width: none; }
}

.hero h1 {
  font-size: var(--text-4xl);
  margin-bottom: calc(var(--spacing) * 5);
}
@media (min-width: 48rem) {
  .hero h1 { font-size: var(--text-5xl); }
}
@media (min-width: 64rem) {
  /* the homepage hero alone carries the display rung */
  .hero-lg h1 { font-size: var(--text-6xl); }
}

.hero .lead {
  color: var(--muted-foreground);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  max-width: 56ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 6);
}

/* texture artifact: large, muted, cropped at the right edge of its pane */
.artifact { position: relative; overflow: hidden; min-width: 0; }
.artifact pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
  white-space: pre;
  min-width: 40rem;
}
.artifact::after {
  /* flat crop edge: a hairline where the text leaves the pane */
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 1px;
  background: var(--border);
}
@media (max-width: 63.99rem) {
  .hero-artifact { max-height: 11rem; border-block: 1px solid var(--border); padding-block: calc(var(--spacing) * 4); }
}

/* scope-switch strip on inner pages sits right under the lead */
.hero .switch-fig { margin-top: calc(var(--spacing) * 8); }

/* ---------- figures: thin hairline plate + mono fig chip ---------- */

figure.plate {
  margin: calc(var(--spacing) * 6) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 5);
  background: var(--background);
}
figure.plate > figcaption {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  margin-top: calc(var(--spacing) * 4);
}
.fig-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.45rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- footer: different copy per site ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--background);
}
.site-footer .wrap {
  padding-block: calc(var(--spacing) * 10);
  display: grid;
  gap: calc(var(--spacing) * 6);
}
.foot-brand { display: grid; gap: calc(var(--spacing) * 2); }
.foot-brand .brand { font-size: var(--text-base); }
.foot-note { color: var(--muted-foreground); font-size: var(--text-xs); max-width: 52ch; }
.foot-nav { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5); }
.foot-nav a {
  text-decoration: none;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}
.foot-nav a:hover { color: var(--foreground); }
.foot-meta {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
}
@media (min-width: 48rem) {
  .site-footer .wrap {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .foot-meta { grid-column: 1 / -1; }
}
/* ---------- signature: the scope switch ---------- */

/* A two-position toggle rail. Position A = the job an AnythingLLM-class app
   answers; position B = the job Kortix answers. The thumb always rests on B
   (the recommendation), with an accent dot marking the active stop. CSS only. */

figure.switch-fig { margin: 0; }

.switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4);
  background: var(--background);
}

.switch-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding-inline-end: calc(var(--spacing) * 3);
  border-inline-end: 1px solid var(--border);
}

.switch-stop {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  min-width: 0;
}
.switch-stop .stop-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--border);
  flex: none;
}
/* the active stop: accent dot, ink label */
.switch[data-active="a"] .stop-a { color: var(--foreground); }
.switch[data-active="a"] .stop-a .stop-dot { background: var(--kortix-base); }
.switch[data-active="b"] .stop-b { color: var(--foreground); }
.switch[data-active="b"] .stop-b .stop-dot { background: var(--kortix-base); }

.switch-track {
  position: relative;
  flex: none;
  width: calc(var(--spacing) * 20);
  height: calc(var(--spacing) * 8);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
}
.switch-thumb {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  inset-inline-start: calc(var(--spacing) * 1);
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  border-radius: 999px;
  background: var(--primary);
}
.switch[data-active="b"] .switch-thumb {
  inset-inline-start: calc(var(--spacing) * 13);
}

.switch-fig figcaption {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  margin-top: calc(var(--spacing) * 3);
}

/* ---------- flow diagram (vs): two routes, boxes and text-glyph arrows ---------- */

.flow { display: grid; gap: calc(var(--spacing) * 5); }
.flow-row { display: grid; gap: calc(var(--spacing) * 2); min-width: 0; }
.flow-row-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.flow-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
}
.flow-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--foreground);
  background: var(--background);
  min-width: 0;
}
.flow-box-muted { color: var(--muted-foreground); font-weight: 400; background: var(--card); }
.flow-arrow {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  flex: none;
}
.flow-end {
  border-color: color-mix(in oklab, var(--kortix-base) 45%, var(--border));
  font-weight: 500;
}

/* ---------- rank strip (best alternatives) ---------- */

.rank { display: grid; gap: calc(var(--spacing) * 3); }
.rank-row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  min-width: 0;
}
.rank-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  flex: none;
  min-width: calc(var(--spacing) * 5);
}
.rank-name { font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
.rank-what { color: var(--muted-foreground); font-size: var(--text-xs); min-width: 0; }
.rank-row.row-rec { background: var(--card); }
.rank-row.row-rec .rank-num { color: var(--foreground); }

/* ---------- stack layers (self-hosting) ---------- */

.stack { display: grid; gap: calc(var(--spacing) * 3); }
.stack-layer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  min-width: 0;
}
.stack-layer-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  min-width: calc(var(--spacing) * 30);
  flex: none;
}
.stack-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.45rem;
  font-size: var(--text-xs);
  color: var(--foreground);
  background: var(--background);
  white-space: nowrap;
}
.stack-chip-muted { color: var(--muted-foreground); background: var(--card); border-style: dashed; }

/* ---------- repo tree (real artifact, mono) ---------- */

.tree {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--foreground);
  white-space: pre;
  overflow-x: auto;
  min-width: 0;
}
.tree .tree-dim { color: var(--muted-foreground); }
/* ---------- shared plumbing, restyled with Kortix tokens ----------
   site-kit/nav-menu.css: accessible no-JS mobile menu. Markup:
     <div class="nav-actions">
       <a class="btn btn-primary btn-sm" href="https://kortix.com">Try Kortix</a>
       <details class="nav-menu">
         <summary aria-label="Menu">hamburger glyph</summary>
         <nav class="nav-menu-panel" aria-label="Mobile">…</nav>
       </details>
     </div>
   Hidden on desktop; below 900px .nav-links hide and this takes over. */

.nav-menu { display: none; position: relative; }
.nav-menu > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  background: var(--background);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.nav-menu > summary:hover { background: var(--hover); }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { background: var(--muted); }

.nav-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 16rem;
  display: grid;
  gap: 2px;
  padding: calc(var(--spacing) * 2);
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 50;
}
.nav-menu-panel a {
  display: block;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-radius: var(--radius-md);
  color: var(--foreground);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.nav-menu-panel a:hover { background: var(--hover); }
.nav-menu-panel a[aria-current="page"] { background: var(--muted); }
.nav-menu-panel .btn { margin-top: calc(var(--spacing) * 2); justify-content: center; text-align: center; }

@media (max-width: 56.24rem) {
  .nav-menu { display: block; }
}
@media (min-width: 56.25rem) {
  .nav-menu { display: none; }
}
@media (max-width: 24rem) {
  .nav-actions > .btn { display: none; }
}

/* ---------- consent banner (injected at publish) restyled from tokens ----------
   The machinery creates #kx-consent with inline styles; these overrides win
   via !important so the banner reads as this site. */

#kx-consent {
  background: var(--popover) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: calc(var(--spacing) * 4) !important;
}
#kx-consent button {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4) !important;
  border-radius: var(--radius-md) !important;
  min-height: calc(var(--spacing) * 12) !important;
  cursor: pointer;
}
/* the first button is the grant (Accept): primary fill */
#kx-consent button:first-of-type {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: 1px solid var(--primary) !important;
}
/* the second is the decline: quiet ghost on the popover surface */
#kx-consent button:not(:first-of-type) {
  background: var(--background) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}