/* setussh.com/docs
   Only what the shared classes leave out: a gap between the page intro and
   the section list, the first heading level with the top of that list, and a
   body column that can shrink below its widest code line. On a phone the
   grid falls back to a plain 1fr track, whose minimum is the content's
   minimum, so the apt snippet pushed the whole column past the screen edge. */

.docs {
  margin-top: 2.25rem;
}
.docs-body {
  min-width: 0;
}
.docs-body > section:first-child .prose > h2:first-child {
  margin-top: 0;
}

/* The keys column is nowrap so a chord never breaks mid-way, but on a phone
   the widest chord pair left the action column four words wide. Let the cell
   wrap between chords there; each keycap stays whole on its own. */
@media (max-width: 560px) {
  #shortcuts .table td:first-child {
    white-space: normal;
  }
}

/* The MCP guide (docs/mcp/). Its access table names each level by the label
   the app shows, and the longest label is a sentence: kept on one line, it
   left the other three columns a word or two wide. In the tools table the
   last column was narrow enough to break "Read-only" at its hyphen. */
#turn-on .table td:first-child {
  width: 24%;
  white-space: normal;
}
#tools .table td:last-child {
  min-width: 7.5rem;
}

/* Four columns do not fit a phone, and a table scrolled sideways hides three
   of them. Each row becomes a small block instead: the first cell as its
   heading, and every other cell under the name of the column it came from,
   which the cell carries in data-label because the header row is hidden. */
@media (max-width: 560px) {
  .table-stack thead {
    display: none;
  }
  .table-stack tr {
    display: block;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .table-stack tr:last-child {
    border-bottom: 0;
  }
  .table-stack td,
  .table-stack td:first-child,
  #turn-on .table-stack td:first-child,
  #tools .table-stack td:last-child {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
  }
  .table-stack td + td {
    margin-top: 0.55rem;
  }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--subtle);
    font-family: var(--code);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}