/* slop-chop brand: lime slime on charcoal, black outlines. */

:root {
  --sc-lime: #9bcf1a;
  --sc-lime-bright: #b8f03a;
  --md-accent-fg-color: var(--sc-lime);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #191919;
  --md-primary-fg-color: #191919;
  --md-accent-fg-color: var(--sc-lime-bright);
  --md-typeset-a-color: var(--sc-lime-bright);
  --md-code-bg-color: #111111;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #1c1c1c;
  --md-typeset-a-color: #4f7a0c;
}

/* Header stays dark charcoal in both schemes. */
.md-header,
.md-tabs {
  background-color: #191919;
  color: #f2f4ea;
}

/* Left-nav active page: brand lime label, not a floating blue link. */
.md-nav__item--active > .md-nav__link,
.md-nav__link--active {
  color: var(--sc-lime-bright);
  font-weight: 700;
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--sc-lime);
}

/* Hero on the landing page. Compact so the chopper sits above the fold. */
.sc-hero {
  position: relative;
  text-align: center;
  padding: 1.4rem 1rem 0.9rem;
}

.sc-hero img.hero-logo {
  width: 64px;
  height: auto;
  margin-bottom: 0.2rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.sc-hero h1 {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0.1rem 0 0;
}

.sc-hero .tagline {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sc-lime-bright);
  margin: 0.1rem 0;
}

.sc-hero .sc-artifacts {
  font-family: var(--md-code-font, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin: 0.05rem 0 0;
}

.sc-hero .subtitle {
  font-size: 0.92rem;
  opacity: 0.82;
  max-width: 44rem;
  margin: 0.25rem auto 0.7rem;
}

.sc-hero .md-button {
  margin: 0.1rem 0.35rem 0;
  padding: 0.4em 1.4em;
  font-size: 0.72rem;
}

/* Small screens: shrink the hero so the chopper is one short scroll away. */
@media (max-width: 600px) {
  .sc-hero {
    padding: 0.9rem 0.8rem 0.6rem;
  }
  .sc-hero img.hero-logo {
    width: 44px;
  }
  .sc-hero h1 {
    font-size: 1.55rem;
  }
  .sc-hero .tagline {
    font-size: 0.92rem;
  }
  .sc-hero .sc-artifacts {
    font-size: 0.66rem;
    letter-spacing: 0.03em;
  }
  .sc-hero .subtitle {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
}

/* Green glow behind the hero. */
.sc-hero::before {
  content: "";
  position: absolute;
  inset: -25% 0 auto 0;
  height: 220px;
  background: radial-gradient(55% 100% at 50% 0%, rgba(155, 207, 26, 0.16), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Install snippet under the hero, centered and roomy. */
.sc-install {
  max-width: 34rem;
  margin: 0 auto 2rem;
}

/* Primary button in brand lime. */
.md-typeset .md-button--primary {
  background-color: var(--sc-lime);
  border-color: var(--sc-lime);
  color: #141414;
}

.md-typeset .md-button--primary:hover {
  background-color: var(--sc-lime-bright);
  border-color: var(--sc-lime-bright);
  color: #141414;
}

/* Feature cards lift on hover. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.7rem;
  padding: 1.1rem 1.2rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(-3px);
}

.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards svg {
  color: var(--sc-lime);
  height: 1.6rem;
}

/* Rounder code blocks. */
.md-typeset pre > code {
  border-radius: 0.5rem;
}

/* Banner images breathe. */
.md-typeset p > img[src*="banner"] {
  border-radius: 0.6rem;
}

/* Fake terminal window that shows slop-chop running. */
.sc-terminal {
  max-width: 46rem;
  margin: 0 auto 2.6rem;
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 46px rgba(0, 0, 0, 0.4);
}

.sc-terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  background: #2b2b2b;
}

.sc-terminal-bar .dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
}

.sc-terminal-bar .red { background: #ff5f57; }
.sc-terminal-bar .yellow { background: #febc2e; }
.sc-terminal-bar .green { background: #28c840; }

.sc-terminal-bar .title {
  margin-left: 0.6rem;
  font-family: var(--md-code-font, monospace);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  opacity: 0.55;
}

.sc-terminal-body {
  margin: 0;
  padding: 1.05rem 1.2rem;
  background: #101010;
  color: #e6e6e6;
  font-family: var(--md-code-font, monospace);
  font-size: 0.86rem;
  line-height: 1.6;
  text-align: left;
  white-space: pre-wrap;
}

.sc-terminal-body .prompt { color: var(--sc-lime); }
.sc-terminal-body .cmd { color: #ffffff; }
.sc-terminal-body .out { color: #9aa0a6; }

/* How it works: a 1-2-3 strip. */
.sc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: 54rem;
  margin: 0 auto 2.6rem;
}

.sc-steps .step {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.7rem;
}

.sc-steps .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--sc-lime);
  color: #141414;
  font-weight: 800;
}

.sc-steps .step strong {
  display: block;
  margin-bottom: 0.15rem;
}

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

/* How it works and the "Can't my AI" answer sit side by side on wide screens, so the
   deterministic passes and the case for them read as one thought. The steps stack inside the
   narrower column, and both columns stack on a phone. */
.sc-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: stretch;
  max-width: 66rem;
  margin: 0 auto 2.6rem;
}

.sc-compare > .sc-compare-col > :first-child {
  margin-top: 0;
}

/* The counterpoint reads as one featured answer: a raised panel that fills the height of the
   steps beside it and centers its text, so the shorter column never trails off into a gap. A
   solid lime edge and a bright heading set it apart from the how-it-works cards. A translucent
   lime fill was tried and dropped, since low-alpha lime over the charcoal desaturates into a
   muddy olive where a solid edge reads as deliberate. */
.sc-compare > .sc-compare-col:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.9rem 2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--sc-lime);
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.02);
}

[data-md-color-scheme="slate"] .sc-compare > .sc-compare-col:last-child {
  background: rgba(255, 255, 255, 0.025);
}

/* A small kicker labels the panel as the deliberate rebuttal it is, without spending a line of
   copy on it. */
.sc-compare > .sc-compare-col:last-child::before {
  content: "The counterpoint";
  align-self: flex-start;
  margin-bottom: 0.9rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(155, 207, 26, 0.3);
  border-radius: 999px;
  background: rgba(155, 207, 26, 0.1);
  color: var(--sc-lime);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The heading is the hook, so it takes the brand lime and a heavier, tighter setting instead
   of the muted default. Light theme uses the darker lime that stays legible on white. */
.sc-compare > .sc-compare-col:last-child > h2 {
  margin-bottom: 0.9rem;
  color: #4f7a0c;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

[data-md-color-scheme="slate"] .sc-compare > .sc-compare-col:last-child > h2 {
  color: var(--sc-lime-bright);
}

.sc-compare > .sc-compare-col:last-child > p {
  line-height: 1.72;
}

.sc-compare > .sc-compare-col:last-child :last-child {
  margin-bottom: 0;
}

.sc-compare .sc-steps {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
}

@media (max-width: 820px) {
  .sc-compare {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Why cards: fixed column counts so a row never strands an orphan card. Four across
   on wide screens, two by two on tablets, one column on phones. */
.md-typeset .grid.cards > ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

@media (max-width: 1219px) {
  .md-typeset .grid.cards > ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .md-typeset .grid.cards > ul {
    grid-template-columns: 1fr;
  }
}

/* Install grid: three even columns, so nine targets make three clean rows across the full
   width instead of a narrow table stranded on the left. Start-here is five short guide cards
   in one row. Both override the four-across default and stack down on smaller screens. */
.md-typeset .grid.cards.sc-installs > ul {
  grid-template-columns: repeat(3, 1fr);
}

.md-typeset .grid.cards.sc-guides > ul {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1219px) {
  .md-typeset .grid.cards.sc-installs > ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .md-typeset .grid.cards.sc-guides > ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .md-typeset .grid.cards.sc-installs > ul,
  .md-typeset .grid.cards.sc-guides > ul {
    grid-template-columns: 1fr;
  }
}

/* Keep a long command or URL inside its card instead of overflowing the narrower columns. */
.md-typeset .sc-installs .grid.cards > ul > li code,
.md-typeset .sc-installs > ul > li code {
  overflow-wrap: anywhere;
}

/* Slime-themed 404. */
.sc-404 {
  text-align: center;
  padding: 3rem 1rem;
}

.sc-404 img {
  width: 96px;
  opacity: 0.85;
  margin-bottom: 1rem;
}