/* The setup page (/setup/): a page that scrolls, in site.css's tokens and type. It has
   classes of its own, so a change to the one-screen home page never reaches it, and its
   code is left to right in right-to-left languages too. A list of the sections stays at
   the side on wide screens. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.doc {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: calc(744px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 36px var(--gutter) 96px;
}

.doc-main { min-width: 0; }

.toc { display: none; }

@media (min-width: 1180px) {
  .doc {
    grid-template-columns: 196px minmax(0, 744px);
    column-gap: 72px;
    max-width: calc(1012px + 2 * var(--gutter));
  }
  .toc {
    display: block;
    position: sticky;
    top: 28px;
    align-self: start;
    padding-top: 6px;
  }
  .toc-title {
    margin: 0 0 12px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  .toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-inline-start: 1px solid var(--line);
  }
  .toc a {
    display: block;
    margin-inline-start: -1px;
    padding: 5px 0;
    padding-inline-start: 14px;
    border-inline-start: 1px solid transparent;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .toc a:hover { color: var(--fg); }
  .toc a[aria-current="true"] { color: var(--fg); border-color: var(--accent); }
}

/* The head of the page */
.doc-eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.doc h1 { font-size: clamp(36px, 5vw, 54px); }
/* The lede, then what MakersMCP needs, with npx and from source alike */
.doc-lede, .doc-need {
  margin: 18px 0 0;
  max-width: 640px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--muted);
}
.doc .doc-need { margin-top: 10px; }

/* The apps, each a jump to its setup */
.apps { margin-top: 32px; }
.apps-pick {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.apps ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.apps a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 11px 13px;
  padding-inline-start: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.apps a:hover { background: var(--card-hover); border-color: color-mix(in srgb, var(--fg) 24%, transparent); }
.apps svg, .doc .code-bar svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.apps svg { width: 14px; height: 14px; stroke-width: 1.6; color: var(--faint); transition: transform 0.15s ease, color 0.15s ease; }
.apps a:hover svg { color: var(--fg); transform: translateY(2px); }

/* Sections */
.doc h2 {
  margin: 72px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  font-size: clamp(23px, 2.3vw, 28px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  scroll-margin-top: 20px;
}
.doc h3 {
  margin: 44px 0 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  scroll-margin-top: 20px;
}
.doc h2 + h3 { margin-top: 26px; }
/* Text, with the specificity of a bare p: a class of the page's own still sets its look */
:where(.doc) p { margin: 12px 0 0; font-size: 16px; line-height: 1.65; }
.doc .aside { color: var(--muted); font-size: 15px; }
.doc-main p a, .doc-end a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg) 32%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.doc-main p a:hover { color: var(--accent); text-decoration-color: currentColor; }
.doc code {
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  font-family: var(--mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
/* The section heading that was jumped to says so for a moment */
@media (prefers-reduced-motion: no-preference) {
  .doc h2:target, .doc h3:target { animation: doc-here 1.6s ease-out; }
}
@keyframes doc-here {
  0%, 30% { color: var(--accent); }
  100% { color: var(--fg); }
}

/* Run it from source, step by step */
.steps {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps > li {
  position: relative;
  counter-increment: step;
  padding-inline-start: 42px;
}
.steps > li + li { margin-top: 22px; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}
.steps > li > p:first-child { margin-top: 0; }

/* Code: a bar with the two ways it runs (npx, from source) or what it is, and a copy
   button. A line longer than the box scrolls inside it, never the page. */
.code {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  overflow: hidden;
}
.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 4px 5px;
  padding-inline-start: 13px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3%, var(--card));
}
.code-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.runs { display: flex; align-items: center; gap: 2px; margin-inline-start: -8px; }
.runs button, .copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: 500 13px/1.4 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.runs button:hover, .copy:hover { color: var(--fg); }
.runs button[aria-pressed="true"] { border-color: var(--line); background: var(--card); color: var(--fg); }
/* The copy button gives up its word where the bar has no room for it (a narrow phone, a
   long language): the word wraps onto a second line, which the button hides, and the
   icon stays. The word still names the button for screen readers. After a copy the icon
   is a check, and the word says so where it shows. */
.code-bar > :first-child { flex: none; }
.copy {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  row-gap: 1lh;
  min-width: 35px;
  height: calc(1lh + 12px);
  overflow: hidden;
}
.copy svg { width: 15px; height: 15px; stroke-width: 1.4; }
.copy [data-copied-icon], .copy.done [data-copy-icon] { display: none; }
.copy.done [data-copied-icon] { display: block; }
.copy.done { color: var(--accent); }
/* Focus rings inside a code box, which hides what spills out of it: the tabs' and the
   copy button's close around them, the code's (a long line scrolls, so it takes the
   focus) inside its edge. */
.code-bar :focus-visible { outline-offset: 1px; }
.code pre:focus-visible { outline-offset: -2px; border-radius: 0 0 5px 5px; }
.code pre {
  margin: 0;
  padding: 14px 16px 15px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg);
  text-align: left;
  white-space: pre;
  tab-size: 2;
}
.code pre[hidden] { display: none; }
.doc .code pre code { padding: 0; border-radius: 0; background: none; font-size: inherit; overflow-wrap: normal; }

/* The kits: each its name (soon, when MakersMCP does not have it yet), its field and what
   it makes. On a phone the name and the field share a line, the field never narrower than
   its word, and what it makes goes under them. On wider screens every row has the same
   three columns, the first two as wide as the longest name and field in the page's
   language. */
.kitlist {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}
.kitlist li {
  display: grid;
  grid-template-columns: auto minmax(max-content, 1fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: 12px 16px;
}
.kitlist li + li { border-top: 1px solid var(--line); }
/* What a kit makes wraps to the row's width and never widens a column: on a phone it
   spans the field's column, which is at least as wide as its field on one line. */
.kitlist .about { grid-column: 1 / -1; contain: inline-size; font-size: 15px; line-height: 1.55; }
@media (min-width: 761px) {
  @supports (grid-template-columns: subgrid) {
    .kitlist { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 16px; }
    .kitlist li { grid-column: 1 / -1; grid-template-columns: subgrid; }
    .kitlist .about { grid-column: auto; }
  }
}
.kitlist .kit { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.kitlist .kit a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.kitlist .kit a:hover { color: var(--accent); border-color: var(--accent); }
.kitlist em { margin-inline-start: 4px; padding: 1px 5px; font-size: 10px; }
.kitlist .field { font-size: 14px; color: var(--muted); }

/* Settings */
.settings {
  width: 100%;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  border-spacing: 0;
  background: var(--card);
  font-size: 15px;
  line-height: 1.55;
}
.settings th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: start;
  color: var(--muted);
}
.settings td { padding: 12px 16px; vertical-align: top; }
.settings tr + tr td { border-top: 1px solid var(--line); }
.settings td:nth-child(-n+2) code { white-space: nowrap; }

.doc p.doc-end { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Joined scripts and the ones without capitals lose the tight tracking, as on the home page */
:lang(ar) .doc :is(h2, h3), :lang(fa) .doc :is(h2, h3), :lang(he) .doc :is(h2, h3), :lang(th) .doc :is(h2, h3),
:lang(hi) .doc :is(h2, h3), :lang(ja) .doc :is(h2, h3), :lang(ko) .doc :is(h2, h3), :lang(zh) .doc :is(h2, h3) { letter-spacing: 0; }
:where(:lang(ar), :lang(fa), :lang(th), :lang(hi)) :where(.doc) p { line-height: 1.8; }
:lang(ko) .doc :is(h1, h2, h3, p) { word-break: keep-all; }

@media (max-width: 760px) {
  /* The table becomes one block per setting: its option and variable, then what it does */
  .settings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .settings, .settings tbody, .settings tr, .settings td { display: block; }
  .settings tr { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 12px 14px; }
  .settings tr + tr { border-top: 1px solid var(--line); }
  .settings tr + tr td { border-top: 0; }
  .settings td { padding: 0; }
  .settings td:empty { display: none; }
  .settings td:nth-child(3) { flex-basis: 100%; }
}

@media (max-width: 560px) {
  .doc { padding-top: 22px; padding-bottom: 72px; }
  .doc h1 { font-size: 36px; }
  .doc-lede { margin-top: 14px; }
  .doc .doc-need { margin-top: 8px; }
  .apps ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps a { padding: 10px 11px; padding-inline-start: 12px; font-size: 14px; }
  .doc h2 { margin-top: 56px; padding-top: 24px; }
  .doc h3 { margin-top: 36px; }
  .steps > li { padding-inline-start: 38px; }
  .code pre { padding: 12px 13px 13px; font-size: 12.5px; line-height: 1.6; }
  .code-bar { padding-inline-start: 11px; }
  .runs { margin-inline-start: -7px; }
  .runs button, .copy { padding: 5px 7px; font-size: 12.5px; }
  .copy { min-width: 31px; }
}

/* The narrowest phones have no room for the arrows of the app grid: an app's name keeps
   to one line */
@media (max-width: 345px) {
  .apps a svg { display: none; }
}