/* docs page - layers on landing.css, which owns the tokens and page shell */

.docs-head{padding-bottom:0}
.docs-head h1{font:400 42px/1.25 var(--serif);margin:0 0 18px}
.docs-head .lede{font:400 19px/1.65 var(--serif);color:var(--body);max-width:680px;margin:0 0 22px}
.docs-head .note{
  font:400 16px/1.7 var(--serif);color:var(--body);
  background:var(--panel);border-left:3px solid var(--rust);
  border-radius:0 4px 4px 0;padding:16px 20px;max-width:720px;margin:0
}
.docs-head .note strong{color:var(--ink)}

.para{font:400 16px/1.7 var(--serif);color:var(--body);max-width:720px;margin:0 0 18px}
code{
  font:500 13.5px var(--mono);color:var(--ink);
  background:var(--panel);border:1px solid var(--rule);
  border-radius:3px;padding:1px 6px
}
.panel-ink code, .code code{background:none;border:none;padding:0;color:inherit}
.code{white-space:pre;overflow-x:auto;font-size:13px;line-height:1.7}

/* endpoint / tool tables */
/* The parameter tables have an irreducible minimum width - a name column, a
   type, and a description - and on a phone that is wider than the screen.
   Without this they were clipped by the page rather than scrolled, so the
   description column simply could not be read. Scrolling the table inside its
   own box keeps the page itself from moving sideways. */
.tbl-scroll{overflow-x:auto;margin-bottom:22px;-webkit-overflow-scrolling:touch}
table.api{width:100%;border-collapse:collapse}
table.api thead tr{background:var(--panel);border-bottom:1px solid var(--rule)}
table.api th{
  font:600 11px var(--serif);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:11px 14px;white-space:nowrap
}
table.api td{
  padding:13px 14px;vertical-align:top;
  font:400 15px/1.6 var(--serif);color:var(--body);
  border-bottom:1px solid var(--rule-lt)
}
table.api tr:last-child td{border-bottom:none}
table.api td:first-child{white-space:nowrap}
table.api td code{font-size:12.5px}

/* parameter and field definition lists */
.paramdefs, .fielddefs{
  display:flex;flex-direction:column;gap:10px;
  margin:0 0 22px;padding:18px 22px;
  background:var(--panel);border:1px solid var(--rule);border-radius:4px
}
.paramdefs > div, .fielddefs > div{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.paramdefs > div > code, .fielddefs > div > code{flex:none;min-width:96px}
.paramdefs span, .fielddefs span{font:400 14.5px/1.6 var(--serif);color:var(--body);flex:1;min-width:260px}

/* limits */
.limits{display:flex;gap:1px;background:var(--rule);margin:0 0 22px;flex-wrap:wrap}
.limits > div{
  background:var(--paper) var(--grain);padding:20px 26px;flex:1 1 180px;
  display:flex;flex-direction:column;gap:6px
}
.limits strong{font:600 34px var(--serif);color:var(--ink);line-height:1}
.limits span{font:400 14px/1.5 var(--serif);color:var(--muted)}

.code-label{
  font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px
}

@media (max-width:820px){
  .docs-head h1{font-size:32px}
  table.api td:first-child{white-space:normal}

  /* Each endpoint becomes a card. The tables scrolled sideways before, which
     kept them readable but put the Returns column - the part that says what
     the endpoint is for - off screen by default.

     Labels stack ABOVE their value here rather than sitting in a column
     beside it, which is the opposite of the app's result cards. The reason is
     the content: these cells hold prose with inline <code> in the middle of a
     sentence. A two-column grid blockifies every child, so each code chip
     would break onto its own line and the sentence would come apart. A block
     ::before leaves the value flowing as ordinary text. */
  .tbl-scroll{overflow-x:visible}
  table.api,table.api tbody,table.api tr,table.api td{display:block}
  /* Kept for screen readers - only the visual column layout goes. */
  table.api thead{
    position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table.api tr{
    border:1px solid var(--rule);border-radius:4px;
    background:var(--paper);padding:14px 16px;margin-bottom:10px}
  table.api td{border:none;padding:0;overflow-wrap:anywhere}
  /* The endpoint or tool name is the card's title, not a labelled field. */
  table.api td:first-child{
    font-size:15px;margin-bottom:10px;
    padding-bottom:10px;border-bottom:1px solid var(--rule)}
  table.api td:not(:first-child){padding:6px 0}
  table.api td:not(:first-child)::before{
    content:attr(data-label);display:block;margin-bottom:3px;
    font:600 10px var(--serif);letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted)}
}
.para-spaced{margin-top:22px}