/* KasbBook documentation theme.
 *
 * Material's defaults are recognisably Material: a coloured header bar, a
 * blue-grey "dark" mode, and Roboto. This makes it quieter — near-black in the
 * dark, plain white in the light, one green accent, and typography sized for
 * reading paragraphs rather than for filling a design grid.
 */

:root {
  /* Neon on a near-black ground. The same green on white would fail contrast
     for body text, so light mode keeps the neon for accents and buttons and
     uses a deeper one wherever the green has to be *read*. */
  --kb-neon:         #00e58a;
  --kb-neon-bright:  #4dffb8;
  --kb-neon-deep:    #0d9868;
  --kb-glow:         0 0 22px rgba(0, 229, 138, .28);
  --kb-radius:       12px;

  --md-primary-fg-color:        var(--kb-neon);
  --md-primary-fg-color--light: var(--kb-neon-bright);
  --md-primary-fg-color--dark:  var(--kb-neon-deep);
  --md-accent-fg-color:         var(--kb-neon);

  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------- light */
[data-md-color-scheme="default"] {
  --md-default-bg-color:      #ffffff;
  --md-default-fg-color:      #18181b;
  --md-default-fg-color--light:  #52525b;
  --md-default-fg-color--lighter: #a1a1aa;
  --md-code-bg-color:         #f6f6f7;
  --md-code-fg-color:         #18181b;
  --md-typeset-a-color:       var(--kb-neon-deep);
  --md-accent-fg-color:       var(--kb-neon-deep);
  --kb-border:                #e6e6e9;
  --kb-surface:               rgba(250, 250, 251, .72);
  --kb-glass:                 rgba(255, 255, 255, .72);
  --kb-grid:                  rgba(0, 0, 0, .04);
  --kb-glow:                  0 0 20px rgba(13, 152, 104, .16);
}

/* ----------------------------------------------------------------- dark */
[data-md-color-scheme="slate"] {
  --md-hue: 240;
  --md-default-bg-color:      #060807;
  --md-default-fg-color:      #ededed;
  --md-default-fg-color--light:  #a1a1aa;
  --md-default-fg-color--lighter: #6b7280;
  --md-code-bg-color:         rgba(255, 255, 255, .035);
  --md-code-fg-color:         #e4e4e7;
  --md-typeset-a-color:       var(--kb-neon-bright);
  /* Borders carry a trace of the accent so panels read as lit rather than
     merely outlined. */
  --kb-border:                rgba(0, 229, 138, .13);
  --kb-surface:               rgba(255, 255, 255, .035);
  --kb-glass:                 rgba(10, 14, 12, .62);
  --kb-grid:                  rgba(0, 229, 138, .055);
}

/* --------------------------------------------------------------- chrome */
/* A documentation site is for reading; the header should not be the loudest
   thing on the page. */
.md-header {
  /* Frosted rather than opaque, so the grid and the page scroll behind it.
     A solid bar over a dark ground reads as a lid. */
  background: var(--kb-glass);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--kb-border);
  box-shadow: none;
}
/* Blur needs something behind it; without this the header sits on nothing. */
@supports not (backdrop-filter: blur(1px)) {
  .md-header { background: var(--md-default-bg-color); }
}
.md-header__title { font-weight: 650; letter-spacing: -.01em; }
.md-tabs { background: var(--md-default-bg-color); border-bottom: 1px solid var(--kb-border); }

/* Material paints the header with the primary colour and so makes everything
   in it white. This header is the page colour instead, which left white text
   on a white search box — invisible in light mode. Everything in the header
   takes the page's own foreground now. */
.md-header__button,
.md-search__input,
.md-search__icon,
.md-header__topic {
  color: var(--md-default-fg-color);
}
.md-search__input::placeholder { color: var(--md-default-fg-color--lighter); }

.md-search__form {
  background: var(--kb-surface);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  box-shadow: none;
}
.md-search__form:hover { background: var(--kb-surface); }
.md-search__output { border-radius: var(--kb-radius); }

.md-sidebar { font-size: .74rem; }
.md-nav__title { font-weight: 650; letter-spacing: .02em; text-transform: none; }
.md-nav__link--active { font-weight: 600; }
.md-nav__link:hover { color: var(--md-accent-fg-color); }

/* Persian is right-to-left; the hero's full-bleed maths is direction-agnostic
   but the code blocks inside it are not, and neither is the badge. */
[dir="rtl"] .md-typeset .highlight,
[dir="rtl"] .md-typeset pre { direction: ltr; text-align: left; }

/* Inline code needs `unicode-bidi` as well: on an inline element `direction`
   alone does nothing, so `/api/v1/webhooks/{provider}/{secret}` inherited the
   paragraph's RTL run and rendered its leading slash to the right of its
   closing brace. `isolate` makes each span its own LTR run and a neutral
   object in the sentence around it. */
[dir="rtl"] .md-typeset code { direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------------------ typography */
.md-typeset {
  font-size: .78rem;
  line-height: 1.75;
  letter-spacing: -.003em;
}
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--md-default-fg-color);
  margin-bottom: .6em;
}
.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -.02em;
  margin-top: 2.2em;
  padding-top: 1.2em;
  border-top: 1px solid var(--kb-border);
}
.md-typeset h3 { font-weight: 620; letter-spacing: -.015em; }

.md-typeset a { text-underline-offset: .2em; }
.md-typeset code {
  border: 1px solid var(--kb-border);
  border-radius: 5px;
  padding: .1em .35em;
  font-size: .86em;
}
.md-typeset pre > code { border: none; }
.md-typeset .highlight > pre {
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
}

.md-typeset table:not([class]) {
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  overflow: hidden;
  font-size: .74rem;
}
.md-typeset table:not([class]) th {
  background: var(--kb-surface);
  font-weight: 620;
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--kb-border); }

.md-typeset blockquote {
  border-left: 2px solid var(--kb-border);
  color: var(--md-default-fg-color--light);
}

/* ---------------------------------------------------------------- cards */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  background: var(--kb-surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 1.15rem 1.25rem;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--kb-neon);
  transform: translateY(-3px);
  box-shadow: var(--kb-glow);
}
.md-typeset .grid.cards > ul > li > p:first-child strong {
  font-size: .92rem;
  letter-spacing: -.015em;
}

/* -------------------------------------------------------------- buttons */
.md-typeset .md-button {
  border-radius: var(--kb-radius);
  border-width: 1px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: .5em 1.15em;
  transition: all .15s ease;
}
.md-typeset .md-button--primary {
  background: var(--kb-neon);
  border-color: var(--kb-neon);
  color: #04231a;
  box-shadow: var(--kb-glow);
}
.md-typeset .md-button--primary:hover {
  background: var(--kb-neon-bright);
  border-color: var(--kb-neon-bright);
  color: #04231a;
  box-shadow: 0 0 30px rgba(0, 229, 138, .45);
}
.md-typeset .md-button:not(.md-button--primary) {
  border-color: var(--kb-border);
  color: var(--md-default-fg-color);
}
.md-typeset .md-button:not(.md-button--primary):hover {
  border-color: var(--kb-neon);
  color: var(--md-default-fg-color);
  background: transparent;
}

/* ----------------------------------------------------------------- hero */
/* Only on the landing page. The faint grid is what stops a near-black
   background from reading as an unstyled page. */
.kb-hero {
  /* Full-bleed out of the content column: a hero boxed inside the reading
     width reads as a card, not as a header. */
  margin: -1.2rem calc(50% - 50vw) 3rem;
  padding: 5rem max(1.5rem, calc(50vw - 50% + 1.5rem)) 4.5rem;
  text-align: center;
  border-bottom: 1px solid var(--kb-border);
  background-image:
    linear-gradient(var(--kb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--kb-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
}
.kb-hero__badge {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-size: .66rem;
  font-weight: 550;
  letter-spacing: .01em;
  color: var(--md-default-fg-color--light);
  border: 1px solid var(--kb-border);
  background: var(--kb-surface);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: .32rem .9rem;
  margin-bottom: 1.6rem;
}
.kb-hero__badge b { color: var(--kb-neon); font-weight: 600; }

.md-typeset .kb-hero h1 {
  font-size: 2.5rem;
  line-height: 1.12;
  font-weight: 780;
  letter-spacing: -.038em;
  margin: 0 0 .5rem;
  border: none;
}
.kb-hero h1 .kb-accent {
  color: var(--kb-neon);
  /* Just enough bloom to read as neon; more and the letterforms smear. */
  text-shadow: 0 0 34px rgba(0, 229, 138, .35);
}
[data-md-color-scheme="default"] .kb-hero h1 .kb-accent {
  color: var(--kb-neon-deep);
  text-shadow: none;
}

.kb-hero__sub {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: var(--md-default-fg-color--light);
  font-size: .85rem;
  line-height: 1.7;
}
.kb-hero__actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.md-typeset .kb-hero__actions .md-button { margin: 0; }

@media screen and (max-width: 44.98em) {
  .md-typeset .kb-hero h1 { font-size: 1.85rem; }
  .kb-hero { padding: 3rem 1rem 2.5rem; }
}

/* A line of shell that people copy should look like one thing, not a wall. */
.kb-hero + h2 { border-top: none; margin-top: 0; padding-top: 0; }