/* The documentation in Nawa Dark: the app's own tokens (public/styles.css,
   :root) and its own fonts (public/fonts/nawa-dark-fonts.css: Inter for
   Latin text, IBM Plex Sans Arabic for Arabic, both bundled). The site is
   served beside the app at /help/, so the font files are the app's, one
   directory up; nothing is fetched from anywhere else. Icons are Nawa's own
   (see scripts/docs/build-site.js); the sidebar follows the app's: sections
   carry an icon and their pages sit indented beneath them (THEME.md). */
@import url("../../fonts/nawa-dark-fonts.css");

:root {
  --md-text-font: "InterVariable", "IBM Plex Sans Arabic", "Segoe UI", "Helvetica Neue", sans-serif;
  --md-code-font: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
}

[data-md-color-scheme="nawa"] {
  --md-hue: 222;
  color-scheme: dark;

  /* Surfaces and text */
  --md-default-bg-color: #030816;
  --md-default-bg-color--light: rgba(3, 8, 22, 0.7);
  --md-default-bg-color--lighter: rgba(3, 8, 22, 0.4);
  --md-default-bg-color--lightest: rgba(3, 8, 22, 0.2);
  --md-default-fg-color: #eff6ff;
  --md-default-fg-color--light: #d7e5f5;
  --md-default-fg-color--lighter: #8fa7cf;
  --md-default-fg-color--lightest: rgba(143, 167, 207, 0.32);

  /* Header and accents */
  --md-primary-fg-color: #081024;
  --md-primary-fg-color--light: #0d1a3a;
  --md-primary-fg-color--dark: #030816;
  --md-primary-bg-color: #eff6ff;
  --md-primary-bg-color--light: #d7e5f5;
  --md-accent-fg-color: #7fd9ff;
  --md-accent-fg-color--transparent: rgba(127, 217, 255, 0.12);
  --md-accent-bg-color: #030816;
  --md-accent-bg-color--light: #081024;

  /* Body */
  --md-typeset-color: #eff6ff;
  --md-typeset-a-color: #7fd9ff;
  --md-typeset-mark-color: rgba(255, 191, 117, 0.35);
  --md-typeset-del-color: rgba(255, 123, 114, 0.2);
  --md-typeset-ins-color: rgba(86, 211, 100, 0.2);
  --md-typeset-kbd-color: #081024;
  --md-typeset-kbd-accent-color: #0d1a3a;
  --md-typeset-kbd-border-color: rgba(82, 243, 255, 0.24);
  --md-typeset-table-color: rgba(159, 199, 255, 0.12);
  --md-typeset-table-color--light: rgba(159, 199, 255, 0.04);

  /* Code: the app's code surface for blocks; inline code is set below */
  --md-code-bg-color: rgba(8, 17, 31, 0.94);
  --md-code-fg-color: #e8f1fb;
  --md-code-hl-color: rgba(127, 217, 255, 0.15);
  --md-code-hl-number-color: #ffbf75;
  --md-code-hl-special-color: #ff66d4;
  --md-code-hl-function-color: #9a7cff;
  --md-code-hl-constant-color: #7fd9ff;
  --md-code-hl-keyword-color: #52f3ff;
  --md-code-hl-string-color: #67ffc8;
  --md-code-hl-name-color: #eff6ff;
  --md-code-hl-operator-color: #8fa7cf;
  --md-code-hl-punctuation-color: #8fa7cf;
  --md-code-hl-comment-color: #8fa7cf;
  --md-code-hl-generic-color: #8fa7cf;
  --md-code-hl-variable-color: #eff6ff;

  /* Admonitions and footer */
  --md-admonition-fg-color: #eff6ff;
  --md-admonition-bg-color: rgba(10, 16, 34, 0.92);
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
  --md-footer-fg-color: #eff6ff;
  --md-footer-fg-color--light: #d7e5f5;
  --md-footer-fg-color--lighter: #8fa7cf;
  --md-shadow-z1: 0 4px 10px rgba(0, 0, 0, 0.35);
  --md-shadow-z2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --md-shadow-z3: 0 30px 90px rgba(0, 0, 0, 0.5);

  /* The app's icon tokens, read by the gradient artwork of its icons */
  --icon-accent: #7fd9ff;
  --icon-chroma: 1;
  --icon-lightness: 1;
  --text-strong: #f4f7fb;

  /* The app's surfaces: dividers, hover and selection, cards, the user bubble */
  --nawa-text-strong: #f4f7fb;
  --nawa-text-soft: #cfd9e7;
  --nawa-divider: rgba(159, 199, 255, 0.12);
  --nawa-divider-strong: rgba(159, 199, 255, 0.24);
  --nawa-hover: rgba(159, 199, 255, 0.08);
  --nawa-selected: rgba(159, 199, 255, 0.14);
  --nawa-card: linear-gradient(180deg, rgba(17, 28, 61, 0.52), rgba(10, 17, 38, 0.52));
  --nawa-user: rgba(22, 54, 94, 0.96);
}

/* The app's background: the same layered glow behind the panels. */
[data-md-color-scheme="nawa"] body {
  background:
    radial-gradient(circle at 8% 0%, rgba(82, 243, 255, 0.1), transparent 26rem),
    radial-gradient(circle at 92% 6%, rgba(154, 124, 255, 0.12), transparent 30rem),
    #030816;
  background-attachment: fixed;
}

::selection {
  background: rgba(127, 217, 255, 0.28);
}

/* ---------- Header and build label ---------- */

[data-md-color-scheme="nawa"] .md-header {
  background: rgba(3, 8, 22, 0.78);
  border-bottom: 1px solid var(--nawa-divider);
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

.md-header__button.md-logo svg {
  height: 1.45rem;
}

.md-header__title {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.md-banner {
  background: transparent;
  color: var(--md-default-fg-color--lighter);
  border-bottom: 1px solid var(--nawa-divider);
  font-size: 0.64rem;
}

.md-banner__inner {
  margin: 0.35rem auto;
}

.nawa-build-label::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #7fd9ff;
  box-shadow: 0 0 0 0.18rem rgba(127, 217, 255, 0.16);
  vertical-align: 0.05rem;
}

/* ---------- Search ---------- */

.md-search__form,
.md-search__input {
  border-radius: 10px;
}

[data-md-color-scheme="nawa"] .md-search__form {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--nawa-divider);
}

[data-md-color-scheme="nawa"] .md-search__form:hover,
[data-md-color-scheme="nawa"] .md-search__input:focus ~ .md-search__form {
  background: rgba(255, 255, 255, 0.08);
}

[data-md-color-scheme="nawa"] .md-search__output {
  background: rgba(9, 18, 32, 0.96);
  border: 1px solid var(--nawa-divider-strong);
  border-radius: 0 0 12px 12px;
}

/* ---------- Sidebar: the app's navigation ---------- */

@media screen and (min-width: 76.25em) {
  /* Room for indented page names on one line; the page grows to match. */
  .md-grid {
    max-width: 66rem;
  }

  .md-sidebar--primary {
    width: 14rem;
  }

  /* Material keeps the navigation 11.5rem wide inside its sidebar; here it
     takes the whole sidebar. [dir] matches Material's per-direction rules. */
  [dir] .md-sidebar--primary .md-sidebar__inner {
    padding-inline: 0;
  }

  /* The site name repeats the header; the sidebar starts with its first entry. */
  .md-nav--primary > .md-nav__title {
    display: none;
  }

  [dir] .md-nav--primary > .md-nav__list {
    padding: 0.2rem 0 1rem;
  }

  [dir] .md-nav--primary .md-nav__item > .md-nav__link {
    align-items: center;
    gap: 0.55rem;
    margin: 0.08rem 0 0;
    padding: 0.32rem 0.6rem;
    border-radius: 8px;
    color: var(--md-default-fg-color--light);
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }

  .md-nav--primary .md-nav__item > .md-nav__link:hover {
    background: var(--nawa-hover);
    color: var(--md-default-fg-color);
  }

  /* A thin, subtle highlight on the current page, never a bright pill. */
  .md-nav--primary .md-nav__item .md-nav__link--active {
    background: var(--nawa-selected);
    color: var(--nawa-text-strong);
    font-weight: 600;
  }

  .md-nav--primary .md-nav__link svg {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
  }

  /* A section: its icon and name, then its pages indented beneath, their
     names in line with the section's and a guide line under the icon. */
  .md-nav--primary .md-nav__item--section {
    margin: 1.05rem 0 0.2rem;
  }

  .md-nav--primary .md-nav__item--section > .md-nav__link,
  .md-nav--primary .md-nav__item--section.md-nav__item--active > .md-nav__link {
    color: var(--nawa-text-strong);
    font-weight: 650;
  }

  .md-nav--primary .md-nav__item--section > .md-nav__link svg {
    color: #7fd9ff;
  }

  [dir="ltr"] .md-nav--primary .md-nav__item--section > .md-nav {
    margin: 0.1rem 0 0 1.12rem;
    padding-left: 0.48rem;
    border-left: 1px solid var(--nawa-divider);
  }

  [dir="rtl"] .md-nav--primary .md-nav__item--section > .md-nav {
    margin: 0.1rem 1.12rem 0 0;
    padding-right: 0.48rem;
    border-right: 1px solid var(--nawa-divider);
  }

  .md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list {
    padding: 0;
  }
}

/* ---------- Phone drawer ---------- */

@media screen and (max-width: 76.234375em) {
  /* Every panel of the drawer opens under the header's surface. */
  .md-nav--primary .md-nav__title {
    background-color: var(--md-primary-fg-color);
    color: var(--nawa-text-strong);
  }

  .md-nav--primary .md-nav__item {
    border-top-color: var(--nawa-divider);
  }
}

/* ---------- On this page ---------- */

@media screen and (min-width: 60em) {
  .md-nav--secondary .md-nav__title {
    background: transparent;
    box-shadow: none;
    color: var(--md-default-fg-color--lighter);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .md-nav--secondary > .md-nav__list {
    margin-left: 0.6rem;
    padding-left: 0;
    border-left: 1px solid var(--nawa-divider);
  }

  .md-nav--secondary .md-nav__link {
    margin: 0 0 0 -1px;
    padding: 0.26rem 0.6rem 0.26rem 0.75rem;
    border-left: 2px solid transparent;
    color: var(--md-default-fg-color--lighter);
    transition:
      color 0.15s ease,
      border-color 0.15s ease;
  }

  .md-nav--secondary .md-nav__link:hover {
    color: var(--md-default-fg-color);
  }

  .md-nav--secondary .md-nav__link--active {
    border-left-color: #7fd9ff;
    color: #7fd9ff;
  }

  .md-nav--secondary .md-nav .md-nav .md-nav__link {
    padding-left: 1.35rem;
  }
}

.md-sidebar__scrollwrap {
  scrollbar-color: rgba(159, 199, 255, 0.28) transparent;
}

/* ---------- Page ---------- */

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.72;
}

.md-typeset p,
.md-typeset li,
.md-typeset dd {
  color: var(--nawa-text-soft);
}

.md-typeset strong {
  color: var(--nawa-text-strong);
  font-weight: 620;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--nawa-text-strong);
}

.md-typeset h1 {
  margin: 0 0 0.9em;
  font-size: 2.05em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
}

/* The opening paragraph reads as the page's summary. */
.md-typeset h1 + p {
  color: var(--md-default-fg-color--light);
  font-size: 1.07em;
}

.md-typeset h2 {
  margin: 2.1em 0 0.75em;
  padding-top: 1.15em;
  border-top: 1px solid var(--nawa-divider);
  font-size: 1.32em;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.016em;
}

.md-typeset h3 {
  margin: 1.7em 0 0.55em;
  font-size: 1.08em;
  font-weight: 620;
  letter-spacing: -0.008em;
}

.md-typeset a {
  text-decoration: underline;
  text-decoration-color: rgba(127, 217, 255, 0.35);
  text-underline-offset: 0.18em;
  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}

.md-typeset a:hover {
  text-decoration-color: currentColor;
}

.md-typeset .headerlink {
  text-decoration: none;
  color: var(--md-default-fg-color--lightest);
}

.md-typeset hr {
  border-bottom-color: var(--nawa-divider);
}

/* The kind of page, above its title, with its icon. */
.md-typeset .nawa-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0.16rem 0.7rem 0.16rem 0.5rem;
  border: 1px solid rgba(127, 217, 255, 0.28);
  border-radius: 999px;
  background: rgba(127, 217, 255, 0.08);
  color: #7fd9ff;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.md-typeset .nawa-kind svg {
  width: 0.95rem;
  height: 0.95rem;
}

.md-typeset .nawa-kind--tutorial {
  border-color: rgba(154, 124, 255, 0.38);
  background: rgba(154, 124, 255, 0.1);
  color: #b9a8ff;
}

.md-typeset .nawa-kind--reference {
  border-color: rgba(159, 199, 255, 0.3);
  background: rgba(159, 199, 255, 0.08);
  color: #9fc7ff;
}

.md-typeset .nawa-kind--explanation {
  border-color: rgba(82, 243, 255, 0.28);
  background: rgba(82, 243, 255, 0.07);
  color: #52f3ff;
}

/* What you type to Nawa: its user message bubble. */
.md-typeset blockquote {
  max-width: min(34rem, 88%);
  margin: 1.4em 0 1.4em auto;
  padding: 0.75em 1.05em;
  border: 1px solid rgba(159, 199, 255, 0.14);
  border-radius: 16px 16px 4px 16px;
  background: var(--nawa-user);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

[dir="ltr"] .md-typeset blockquote {
  border-left: 1px solid rgba(159, 199, 255, 0.14);
  padding-left: 1.05em;
}

[dir="rtl"] .md-typeset blockquote {
  margin: 1.4em auto 1.4em 0;
  border-right: 1px solid rgba(159, 199, 255, 0.14);
  border-radius: 16px 16px 16px 4px;
  padding-right: 1.05em;
}

.md-typeset blockquote p {
  margin: 0;
  color: #eef4fb;
}

/* Code */
.md-typeset code {
  border-radius: 6px;
  padding: 0.12em 0.42em;
  font-size: 0.86em;
}

.md-typeset :not(pre) > code {
  background: rgba(255, 255, 255, 0.08);
  color: #eff6ff;
}

.md-typeset pre {
  border-radius: 12px;
}

.md-typeset pre > code {
  padding: 0.95em 1.15em;
  border: 1px solid rgba(159, 199, 255, 0.14);
  border-radius: 12px;
}

.md-typeset kbd {
  border-radius: 6px;
}

/* Tables */
.md-typeset table:not([class]) {
  border: 1px solid var(--nawa-divider);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(8, 16, 36, 0.5);
  font-size: 0.74rem;
}

.md-typeset table:not([class]) th {
  background: rgba(159, 199, 255, 0.07);
  color: var(--nawa-text-strong);
  font-weight: 600;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--nawa-divider);
  color: var(--nawa-text-soft);
}

/* A path or name in a table stays whole; the prose around it wraps instead,
   and a table too wide for the page scrolls. */
.md-typeset table:not([class]) code {
  word-break: normal;
  overflow-wrap: normal;
}

/* Screenshots get a frame; diagrams draw their own. */
.md-typeset img {
  border: 1px solid var(--nawa-divider);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.md-typeset img[src$=".svg"] {
  border: 0;
  box-shadow: none;
}

/* Notes and tips */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid rgba(127, 217, 255, 0.24);
  border-radius: 14px;
  background: var(--md-admonition-bg-color);
  box-shadow: none;
  font-size: 0.78rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 620;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: rgba(127, 217, 255, 0.3);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background: rgba(127, 217, 255, 0.1);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: #7fd9ff;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: rgba(154, 124, 255, 0.34);
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background: rgba(154, 124, 255, 0.12);
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: #b9a8ff;
}

/* Nawa's icons in text */
.md-typeset .twemoji svg {
  width: 1.15em;
  height: 1.15em;
}

/* ---------- Start page: where to start ---------- */

.md-typeset .grid.cards.nawa-start > ul {
  counter-reset: start;
}

.md-typeset .grid.cards > ul > li {
  position: relative;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid var(--nawa-divider);
  border-radius: 16px;
  background: var(--nawa-card);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  border-color: var(--nawa-divider-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  transform: translateY(-1px);
}

.md-typeset .grid.cards > ul > li > p {
  margin: 0;
  color: var(--md-default-fg-color--lighter);
  font-size: 0.74rem;
  line-height: 1.6;
}

.md-typeset .grid.cards > ul > li > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 1.6rem 0.5rem 0;
  font-size: 0.82rem;
}

.md-typeset .grid.cards > ul > li > p:first-child .twemoji {
  color: #7fd9ff;
}

.md-typeset .grid.cards > ul > li > p:first-child .twemoji svg {
  width: 1.6rem;
  height: 1.6rem;
  max-height: none;
}

.md-typeset .grid.cards > ul > li > p:first-child a {
  color: var(--nawa-text-strong);
  text-decoration: none;
}

/* The whole card opens its page. */
.md-typeset .grid.cards > ul > li > p:first-child a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.md-typeset .grid.cards > ul > li:hover > p:first-child a {
  color: #7fd9ff;
}

/* The steps keep their order. */
.md-typeset .grid.cards.nawa-start > ul > li {
  counter-increment: start;
}

.md-typeset .grid.cards.nawa-start > ul > li::after {
  content: counter(start);
  position: absolute;
  top: 0.95rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--nawa-divider-strong);
  border-radius: 50%;
  color: var(--md-default-fg-color--lighter);
  font-size: 0.62rem;
  font-weight: 600;
}

/* ---------- Previous and next ---------- */

.md-footer {
  border-top: 1px solid var(--nawa-divider);
}

.md-footer__link {
  margin: 1rem 0.4rem 0.8rem;
  padding: 0.55rem 1rem 0.65rem;
  border: 1px solid var(--nawa-divider);
  border-radius: 14px;
  background: var(--nawa-card);
  transition: border-color 0.2s ease;
}

.md-footer__link:focus,
.md-footer__link:hover {
  border-color: var(--nawa-divider-strong);
  opacity: 1;
}

.md-footer__direction {
  color: var(--md-default-fg-color--lighter);
}

.md-footer-meta {
  background: transparent;
  border-top: 1px solid var(--nawa-divider);
}

/* Arabic: the app scopes its Arabic face by script, so mixed text keeps Inter. */
[dir="rtl"],
[lang="ar"] {
  font-family: "IBM Plex Sans Arabic", "InterVariable", "Segoe UI", "Helvetica Neue", sans-serif;
}