/* ==========================================================================
   mcprush — docs.css  (docs.html: the documentation hub)
   Same Datasheet language as everywhere else: hairlines instead of shadows,
   mono for anything a reader might have to type.
   ========================================================================== */

/* ---------- head + search ------------------------------------------------ */
/* title and filter sit on one line at full width: the filter is the second
   thing a returning reader wants, so it should not be below the fold of the
   lead paragraph */
.dx-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 20px 48px; align-items: end; padding-bottom: 30px;
}
.dx-head > * { min-width: 0; }
.dx-head h1 { margin-bottom: 12px; }
.dx-head .lead { max-width: 62ch; }

.dx-find { max-width: 460px; }
/* the clear button lives inside the field, so it must not inherit .btn height */
.dx-find .big-field { padding-right: 8px; }
.dx-clear {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 5px; color: var(--ink-3); transition: .12s;
}
.dx-clear:hover { color: var(--ink); background: var(--surface-2); }
.dx-clear svg { width: 14px; height: 14px; }
.dx-count { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.dx-count b { color: var(--ink-2); font-family: var(--mono); font-weight: 500; }

/* ---------- quickstart --------------------------------------------------- */
.dx-quick { margin-bottom: 44px; }
.qs { overflow: hidden; }
/* 1px gaps over a line-coloured backdrop: the same hairline grid .scopes uses,
   so a step block never needs a border rule that has to be undone at 1 column */
.qs-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
}
.qs-step { min-width: 0; background: var(--surface); padding: 16px 18px 18px; }
.qs-step .n { font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--ink-3); }
/* the step heading is an <h3> carrying the h4 look — the tag moved so the
   outline of the page has no gap in it, and the rule keeps both spellings so
   the change is invisible */
.qs-step h4, .qs-step h3 { margin: 9px 0 6px; }
.qs-step p { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin-bottom: 12px; max-width: 54ch; }
.qs-step .code { font-size: 12px; }
.qs-note {
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-3); border-radius: 0 0 var(--r3) var(--r3);
}
/* a step with no command still has to hold the column's rhythm */
.qs-step .qs-nocmd {
  border: 1px dashed var(--line-2); border-radius: var(--r2);
  padding: 10px 12px; font-size: 12.5px; color: var(--ink-3);
}

/* ---------- primer ------------------------------------------------------- */
.dx-primer { margin-bottom: 46px; }
.dx-primer h2 { margin-bottom: 18px; }

/* the fold handle. Hidden at full width, where the primer is simply three
   blocks of prose on the page and there is nothing to open. */
.dx-fold { display: none; }
.dx-fold::-webkit-details-marker { display: none; }

/* ---------- rail + groups ------------------------------------------------ */
.dx-layout {
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: 32px; align-items: start; padding-bottom: 64px;
}
.dx-layout > * { min-width: 0; }
.dx-rail { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 1px; }
.dx-rail .spec { margin-bottom: 10px; }
.dx-rail a {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 7px 9px; border-radius: var(--r1);
  font-size: 13.5px; color: var(--ink-2); transition: background .12s, color .12s;
}
.dx-rail a:hover { background: var(--surface-2); color: var(--ink); }
.dx-rail a.on { background: var(--surface-2); color: var(--ink); font-weight: 550; }
.dx-rail a svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.dx-rail a.on svg { color: var(--accent); }
.dx-rail a .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.dx-rail a .n { font: 500 12px/1 var(--mono); color: var(--ink-3); flex: none; }

/* no scroll-margin here: core.css already sets scroll-padding-top on <html>,
   and the two would add up to a 168px gap after a jump */
.dx-group { margin-bottom: 16px; }
.dx-group .card-head { align-items: flex-start; }
.dx-group .card-head p { font-size: 13px; color: var(--ink-3); margin-top: 5px; max-width: 62ch; }

.dx-item { border-top: 1px solid var(--line); }
.dx-item:first-child { border-top: 0; }
.dx-q {
  width: 100%; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) 16px;
  gap: 18px; align-items: center; padding: 12px 18px; text-align: left;
  transition: background .12s;
}
.dx-q:hover { background: var(--surface-2); }
.dx-item.on .dx-q { background: var(--surface-2); }
.dx-q .t { font-size: 14.5px; font-weight: 550; letter-spacing: -.014em; }
.dx-q .d { font-size: 13px; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-q svg { width: 15px; height: 15px; color: var(--ink-3); transition: transform .18s; flex: none; }
.dx-item.on .dx-q svg { transform: rotate(45deg); }

/* The open question keeps its own tinted row and the answer sits under it, so
   the top of this box is a visible edge rather than a join — and it had no
   padding at all against it while the bottom had eighteen. The first line
   started at the seam and the last one had room, which reads as the text
   having slipped upwards. Same value both ends. */
.dx-a { display: none; padding: 18px; }
.dx-item.on .dx-a { display: block; }
.dx-a p { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); max-width: 86ch; }
.dx-a p + p { margin-top: 10px; }
.dx-a .code { margin-top: 13px; max-width: 86ch; }
.dx-a .mono { font-size: 12.5px; color: var(--ink); }
.dx-a .dx-see { margin-top: 13px; font-size: 13px; }

/* ---------- cli table ---------------------------------------------------- */
.dx-cli { margin-top: 34px; }
.dx-cli h2 { margin-bottom: 10px; }
.dx-cli .cli-intro { font-size: 13.5px; color: var(--ink-2); max-width: 84ch; margin-bottom: 18px; }
/* commands wrap rather than push the table wider than its card */
.dx-cli .cmd { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.dx-cli .cmd em { font-style: normal; color: var(--ink-3); }
.dx-cli td { vertical-align: top; }
.dx-cli .tbl td:nth-child(2) { color: var(--ink-2); }
.dx-cli .src { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* ---------- empty state -------------------------------------------------- */
.dx-none { padding: 46px 20px; text-align: center; }
.dx-none p { color: var(--ink-2); margin-top: 8px; font-size: 13.5px; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1080px) {
  .dx-layout { grid-template-columns: 1fr; gap: 20px; }
  /* the rail becomes one scrolling row of jump links; min-width:0 on the grid
     child keeps that scroll inside the column instead of on the page */
  .dx-rail {
    position: static; display: flex; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px; border-bottom: 1px solid var(--line);
  }
  .dx-rail::-webkit-scrollbar { display: none; }
  .dx-rail .spec { display: none; }
  .dx-rail a { flex: none; border: 1px solid var(--line); background: var(--surface); }
  .dx-rail a .t { max-width: 22ch; }
}
@media (max-width: 900px) {
  .qs-steps { grid-template-columns: 1fr; }
  .dx-head { grid-template-columns: 1fr; align-items: start; }
  .dx-find { max-width: none; }

  /* the primer becomes one row you can open — same shape as the entries below
     it, so the page has one vocabulary for "there is more here" */
  .dx-primer {
    margin-bottom: 26px;
    border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface);
  }
  .dx-fold {
    display: grid; grid-template-columns: minmax(0, 1fr) 16px;
    gap: 3px 14px; align-items: center; cursor: pointer; list-style: none;
    padding: 14px 16px; min-height: 60px;
  }
  .dx-fold-t { font-size: 14.5px; font-weight: 550; letter-spacing: -.014em; }
  .dx-fold-d { grid-column: 1; font-size: 13px; color: var(--ink-2); }
  .dx-fold svg { grid-column: 2; grid-row: 1 / span 2; width: 15px; height: 15px; color: var(--ink-3); transition: transform .18s; }
  .dx-primer[open] .dx-fold { border-bottom: 1px solid var(--line); }
  .dx-primer[open] .dx-fold svg { transform: rotate(45deg); }
  .dx-primer > .section-head,
  .dx-primer > .skillfacts { padding-inline: 16px; }
  .dx-primer > .section-head { padding-top: 16px; }
  .dx-primer > .skillfacts { padding-bottom: 18px; }
}
@media (max-width: 720px) {
  .dx-q { grid-template-columns: minmax(0, 1fr) 16px; gap: 6px 14px; align-items: start; }
  .dx-q .t { padding-top: 1px; }
  /* the description takes the whole second row, so the icon has to be pinned to
     the first — auto-placement would drop it onto a third row of its own */
  .dx-q .d { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .dx-q svg { grid-column: 2; grid-row: 1; margin-top: 3px; }
}
/* 860px is where core.css lets a dense table scroll inside its card rather than
   stretch the page. This one must not do either: three columns squeeze the
   command down to a hundred-odd pixels, and `npx mcprush@latest add <server>`
   then breaks in the middle of a word — the one thing a command must never do,
   because a reader cannot tell a wrap from a hyphen. Each row becomes the
   command at full measure, then what it does, then where else it appears. */
@media (max-width: 860px) {
  .dx-cli .tbl { display: block; overflow-x: visible; white-space: normal; }
  .dx-cli thead { display: none; }
  .dx-cli tbody, .dx-cli tr, .dx-cli td { display: block; }
  .dx-cli tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .dx-cli tbody tr:last-child { border-bottom: 0; }
  .dx-cli td { border: 0; padding: 0; }
  .dx-cli .cmd { font-size: 13px; }
  .dx-cli .tbl td:nth-child(2) { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
  .dx-cli .src { margin-top: 8px; white-space: normal; }
  .dx-cli .src::before {
    content: attr(data-l) '\00a0\00a0';
    font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  }
}

@media (max-width: 620px) {
  .qs-step, .dx-q, .dx-a { padding-left: 14px; padding-right: 14px; }
  .qs-note { padding-left: 14px; padding-right: 14px; }
  .dx-primer > .section-head,
  .dx-primer > .skillfacts,
  .dx-fold, .dx-cli tr { padding-inline: 14px; }

  /* The rail is a scrolling row of jump links by this width, so it is a
     toolbar and takes the toolbar step — the same 34px core.css gives .seg
     button and a.tag. It had been sized by padding alone and came out at 43px,
     which made a strip of jump links the tallest control on a page whose own
     buttons are 40. */
  .dx-rail a { height: 34px; padding: 0 11px; }

  /* The docs filter is a filter, not the home page's search hero, so it takes
     the .field step rather than the 52px views.css gives .big-field. The input
     inside it is forced back to 16px because views.css sets .big-field input to
     15.5px at a higher specificity than core.css's phone rule, and anything
     under 16px makes iOS zoom the page on focus. */
  .dx-find .big-field { height: 42px; }
  .dx-find .big-field input { font-size: 16px; }

  /* ---- one row per entry --------------------------------------------------
     An entry is a title, a one-line gloss and a plus. At full width the gloss
     is a single ellipsed line beside the title; below 720px it drops onto its
     own row, and there it had been allowed to wrap — two lines of gloss on
     every one of the thirty-odd entries, which measured 94px a row and turned
     the index into eleven screens. The gloss goes back to one ellipsed line,
     which is what the desk shows too, and the leading comes in to the phone's:
     the row is then 63px and the same 63px whatever the entry says. The primer
     handle above the list is the same object and takes the same shape. */
  .dx-q { padding-block: 11px; gap: 3px 14px; }
  .dx-q .t { line-height: 1.3; }
  .dx-q .d {
    line-height: 1.45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dx-fold { padding-block: 11px; gap: 3px 14px; min-height: 46px; }
  .dx-fold-t { line-height: 1.3; }
  .dx-fold-d {
    line-height: 1.45; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ---------- cli.html ------------------------------------------------------
   The reference as its own page. It reuses the docs layout, the docs rail and
   the .dx-cli table wholesale; what it needs of its own is the group icon and
   a card head that holds a paragraph without the badge sliding under it. */
.dx-cli .card-head { align-items: flex-start; gap: 12px; padding-block: 14px; }
.dx-cli .card-head p { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 74ch; }
.cli-i {
  flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: var(--r1);
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2);
}
.cli-i svg { width: 15px; height: 15px; }
.dx-cli + .dx-cli { margin-top: 16px; }
@media (max-width: 620px) {
  .dx-cli .card-head { flex-wrap: wrap; }
  .cli-i { display: none; }
}