/* Curves Mobile App Kit · documentation layout (not part of dist/). Tokens only. */

.mk-docs { background: var(--mk-surface-page); }

.mk-docs__bar {
  position: sticky;
  inset-block-start: 0;
  padding-inline: var(--mk-space-4) calc(var(--mk-curve) * 0.45);
}

.mk-docs__brand {
  color: inherit;
  font-size: var(--mk-text-xl);
  text-decoration: none;
  white-space: nowrap;
}

.mk-docs__brand .mk-wordmark__mark { inline-size: 2rem; block-size: 2rem; font-size: 1rem; }

/* Phones: the short name, so the brand fits beside the three header buttons. */
@media (max-width: 30rem) { .mk-docs__brand-more { display: none; } }

.mk-docs__wrap {
  display: grid;
  gap: var(--mk-space-5);
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--mk-space-7) var(--mk-gutter) var(--mk-space-8);
}

.mk-docs__nav {
  display: flex;
  gap: var(--mk-space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.mk-docs__nav a {
  flex: none;
  padding: var(--mk-space-2) var(--mk-space-3);
  border-radius: var(--mk-radius-pill);
  color: var(--mk-text-muted);
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-medium);
  text-decoration: none;
}

.mk-docs__nav a[aria-current="page"] {
  background: var(--mk-accent-surface);
  color: var(--mk-accent);
}

@media (min-width: 62rem) {
  .mk-docs__wrap { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--mk-space-7); }
  .mk-docs__nav {
    position: sticky;
    inset-block-start: calc(var(--mk-bar-height) + var(--mk-space-6));
    align-self: start;
    flex-direction: column;
  }
  .mk-docs__nav a { border-radius: var(--mk-radius-md); }
}

.mk-docs__main {
  min-inline-size: 0;
  max-inline-size: 48rem;
  line-height: 1.65;
}

.mk-docs__main h1 { font-size: var(--mk-text-3xl); margin-block-end: var(--mk-space-3); }
.mk-docs__main h2 {
  margin-block: var(--mk-space-7) var(--mk-space-3);
  padding-block-start: var(--mk-space-2);
  font-size: var(--mk-text-2xl);
  scroll-margin-block-start: calc(var(--mk-bar-height) + var(--mk-space-4));
}
.mk-docs__main h3 { margin-block: var(--mk-space-5) var(--mk-space-2); font-size: var(--mk-text-lg); scroll-margin-block-start: calc(var(--mk-bar-height) + var(--mk-space-4)); }
.mk-docs__main p, .mk-docs__main li { color: var(--mk-text); }
.mk-docs__main ul, .mk-docs__main ol { padding-inline-start: var(--mk-space-5); }
.mk-docs__main li + li { margin-block-start: var(--mk-space-1); }
.mk-docs__lead { font-size: var(--mk-text-lg); color: var(--mk-text-muted) !important; }

.mk-docs__main :not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: 0.375rem;
  background: var(--mk-surface-sunken);
  font-size: 0.875em;
  unicode-bidi: isolate;
}

.mk-code {
  position: relative;
  margin-block: var(--mk-space-3) var(--mk-space-4);
}

.mk-code pre {
  margin: 0;
  padding: var(--mk-space-4);
  overflow-x: auto;
  border-radius: var(--mk-radius-md);
  border-start-start-radius: 1.5rem;
  background: #161a2b;
  color: #e8e9f2;
  font-size: var(--mk-text-sm);
  line-height: 1.55;
  text-align: left;
}

.mk-code__copy {
  position: absolute;
  inset-block-start: var(--mk-space-2);
  inset-inline-end: var(--mk-space-2);
  padding: var(--mk-space-1) var(--mk-space-2);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--mk-radius-sm);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font: inherit;
  font-size: var(--mk-text-xs);
  cursor: pointer;
}

.mk-docs__table {
  inline-size: 100%;
  margin-block: var(--mk-space-3) var(--mk-space-5);
  border-collapse: collapse;
  font-size: var(--mk-text-sm);
}

.mk-docs__table th,
.mk-docs__table td {
  padding: var(--mk-space-2) var(--mk-space-3);
  border-block-end: 1px solid var(--mk-border);
  text-align: start;
  vertical-align: top;
}

.mk-docs__table th { color: var(--mk-text-muted); font-weight: var(--mk-weight-semibold); }

.mk-docs__toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-space-2);
  margin-block: var(--mk-space-4);
  padding: 0;
  list-style: none;
}

.mk-docs__toc a {
  display: inline-block;
  padding: var(--mk-space-1) var(--mk-space-3);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-surface-card);
  font-size: var(--mk-text-sm);
  text-decoration: none;
}

.mk-docs__note {
  margin-block: var(--mk-space-4);
}

/* Get-started landing */
.mk-start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--mk-space-4);
  margin-block: var(--mk-space-5);
}

.mk-start-grid .mk-card { text-decoration: none; }
.mk-start-grid .mk-icon { font-size: 1.5rem; color: var(--mk-accent); }