/* Docs pages (docs/kraken.html). Loaded after site.css, pages.css, text.css. */

/* the on-this-page list stays visible on small screens, as a compact grid */
@media(max-width:980px){
  nav.legal-jump,.sec-head:has(>.legal-jump){display:grid}
  .legal-jump a{min-height:46px;font-size:16px}
}
.phero--slim .lede{margin-top:18px;max-width:52ch}

/* command blocks: a quiet box with a copy button */
.prose .codeblock{position:relative;display:flex;align-items:flex-start;gap:12px;background:var(--ink);border-radius:3px}
.prose .codeblock pre{flex:1;min-width:0;background:none;padding:16px 0 16px 18px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px}
.prose .codeblock .copy{flex:none;margin:10px 10px 0 0;min-height:44px;min-width:72px;padding:0 14px;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--chalk);background:transparent;border:1px solid var(--chalk-dim);border-radius:3px;cursor:pointer;transition:background .18s,color .18s}
.prose .codeblock .copy:hover{background:var(--chalk);color:var(--sea)}

/* tables scroll inside their own box on narrow screens */
.prose .tablewrap{margin-top:1.1em;-webkit-overflow-scrolling:touch}
.prose td:first-child,.prose th:first-child{padding-right:18px}
.prose .cmds td:first-child{white-space:nowrap}
.prose .cmds td:first-child code{background:none;padding:0;font-weight:700;color:var(--p-strong)}
.prose td code{overflow-wrap:normal}
.prose h3{margin-top:2.1em}

/* small screens: the on-this-page list becomes two compact columns, tables become stacked rows */
@media(min-width:520px) and (max-width:980px){
  nav.legal-jump{grid-template-columns:1fr 1fr;column-gap:28px}
}
@media(max-width:640px){
  .prose .codeblock{flex-direction:column;gap:0}
  .prose .codeblock pre{padding:16px 18px 6px}
  .prose .codeblock .copy{margin:0 10px 10px 18px;align-self:flex-start}
  .prose table,.prose tbody,.prose tr,.prose td{display:block;width:100%}
  .prose thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .prose tr{padding:14px 0;border-bottom:1px solid var(--p-rule)}
  .prose tr:first-child{border-top:2px solid var(--p-ink)}
  .prose td{padding:0;border:0}
  .prose td+td{margin-top:4px}
  .prose td:first-child{padding-right:0}
}