/* docs.html — the command line reference. A public page like programs.html
   (masthead and footer from pratimana.css); this file lays out the two
   columns and sets the prose and the command blocks. Tokens only. */
.docs-hero{ padding:56px 0 30px; }
.docs-kind{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); margin:0 0 6px; }
.docs-hero h1{ font-size:26px; font-weight:500; letter-spacing:0; line-height:1.2; margin:8px 0 10px; max-width:720px; }
.docs-hero p.lede{ font-size:15px; color:var(--text-dim); max-width:64ch; margin:0; }
.docs-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:56px; padding:20px 0 96px; }
.docs-nav{ position:sticky; top:96px; align-self:start; display:grid; gap:2px; }
.docs-nav a{
  display:block; padding:7px 10px 7px 12px; border-radius:0; font-size:14px; color:var(--text-dim);
  text-decoration:none; box-shadow:inset 2px 0 0 transparent;
}
/* Same shape as the toggles: the active link is ink-filled at phone
   width (:90), and a hover that outranked it would paint its label the
   fill's own colour. */
.docs-nav a:not(.active):hover{ color:var(--text); background:var(--well); }
.docs-nav a.active{ color:var(--text); font-weight:500; background:var(--well); box-shadow:inset 2px 0 0 var(--text); }
/* Every link here draws a box-shadow — the mark, transparent until the
   link is the current one — and the focus ring is a box-shadow too
   (matrix.css --ring), so every link's own shadow replaced the ring: the
   whole rail, and the phone chips below, had no focus indicator. */
.docs-nav a:focus-visible{ box-shadow:var(--ring); }
.docs-nav a.active:focus-visible{ box-shadow:inset 2px 0 0 var(--text), var(--ring); }
.docs-nav .docs-nav-lbl{ font-size:12px; color:var(--text-faint); padding:14px 10px 6px 12px; }
.docs-nav .docs-nav-lbl:first-child{ padding-top:0; }

.docs-body{ max-width:760px; min-width:0; }
.docs-body section{ padding:8px 0 40px; border-bottom:1px solid var(--hairline-soft); margin-bottom:40px; scroll-margin-top:100px; }
.docs-body section:last-child{ border-bottom:0; }
.docs-body h2{ font-size:21px; font-weight:500; letter-spacing:0; margin:0 0 14px; scroll-margin-top:120px; }
.docs-body h3{ font-size:15px; font-weight:500; margin:26px 0 8px; scroll-margin-top:120px; }
.docs-body p{ font-size:15px; line-height:1.65; color:var(--text-dim); margin:0 0 14px; }
.docs-body p strong{ color:var(--text); font-weight:600; }
.docs-body ul, .docs-body ol{ font-size:15px; line-height:1.65; color:var(--text-dim); margin:0 0 14px; padding-left:22px; }
.docs-body li{ margin-bottom:4px; }
.docs-body a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hairline); }
.docs-body a:hover{ text-decoration-color:var(--text); }
.docs-body code{
  font-family:var(--font-mono); font-size:.9em; padding:1px 6px; border-radius:4px;
  background:var(--well); border:1px solid var(--hairline); color:var(--text);
}
.docs-body pre{
  position:relative; margin:0 0 16px; padding:14px 16px; border-radius:4px; overflow-x:auto;
  background:var(--well); border:1px solid var(--rule-strong); font-family:var(--font-mono); font-size:13px; line-height:1.6;
  color:var(--text); tab-size:2;
}
.docs-body pre code{ background:none; border:0; padding:0; font-size:inherit; }
.docs-body pre .c{ color:var(--text-faint); }
.docs-body pre .o{ color:var(--text-dim); }
.docs-body pre.cmd::before{ content:"$ "; color:var(--text-faint); user-select:none; }
.docs-copy{
  position:absolute; top:8px; right:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  padding:4px 9px; border-radius:4px; border:1px solid var(--rule-strong); background:var(--well); color:var(--text-dim); cursor:pointer;
  min-height:28px; line-height:1;
  opacity:0; transition:opacity .15s ease, color .15s ease;
}
.docs-body pre:hover .docs-copy, .docs-copy:focus-visible{ opacity:1; }
/* No hover on a touch screen, so nothing would ever reveal it there. */
@media (hover:none){ .docs-copy{ opacity:1; } }
.docs-copy:hover{ color:var(--text); }
.docs-copy[data-done="1"]{ color:var(--ok); opacity:1; }
.docs-table{ width:100%; border-collapse:collapse; font-size:14px; margin:0 0 18px; }
.docs-table th{ text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding:10px 10px 10px 0; border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong); font-weight:500; }
.docs-table td{ padding:10px 10px 10px 0; border-bottom:1px solid var(--hairline); vertical-align:top; color:var(--text-dim); line-height:1.5; }
.docs-table td:first-child{ white-space:nowrap; color:var(--text); }
.docs-table code{ white-space:nowrap; }

/* An identifier in running prose can be longer than a phone is wide —
   an endpoint path, a header name — and inline code does not wrap on
   its own. In a table the scroller below handles it; in a paragraph
   there is nothing to scroll, so let it break. */
.docs-body p code, .docs-body li code{ overflow-wrap:anywhere; }
.docs-callout{ border:0; border-left:2px solid var(--text); border-radius:0; padding:10px 0 10px 16px; margin:0 0 16px; background:transparent; font-size:14px; color:var(--text-dim); }
.docs-callout strong{ color:var(--text); }
/* minmax(0, 1fr), not the implicit 1fr: a grid track's floor is its
   content, so the command blocks inside — which scroll themselves —
   pushed the track past the screen on a phone instead. */
.docs-install{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:26px 0 0; max-width:640px; }
/* The hero's install block sits above .docs-body, so it never picked up
   that block's pre rules — including the one that lets a long command
   scroll. On a phone the install line is wider than the screen, which is
   the first thing a reader sees on this page. */
.docs-install pre{
  position:relative; margin:0; padding:14px 16px; border-radius:4px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--well); border:1px solid var(--rule-strong);
  font-family:var(--font-mono); font-size:14px; line-height:1.6; color:var(--text); tab-size:2;
}
.docs-install pre code{ background:none; border:0; padding:0; font-size:inherit; }
.docs-install pre.cmd::before{ content:"$ "; color:var(--text-faint); user-select:none; }
.docs-install .docs-meta{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:0; }
@media (max-width:900px){
  .docs-layout{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .docs-nav{ position:static; display:flex; flex-wrap:wrap; gap:4px; }
  .docs-nav .docs-nav-lbl{ display:none; }
  .docs-nav{ gap:8px; }
  .docs-nav a{
    display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:1px solid var(--hairline);
    border-radius:4px; box-shadow:none; font-size:13px; background:transparent;
  }
  .docs-nav a.active{ background:var(--text); color:var(--void); border-color:var(--text); box-shadow:none; }
  .docs-nav a.active:focus-visible{ box-shadow:var(--ring); }
  .docs-hero h1{ font-size:22px; }
}
/* The reference tables carry an endpoint, its parameters and who may
   call it: several hundred pixels of nowrap. The widest is over 1100,
   so it is not only a phone that cannot fit it — a tablet either way up
   cannot either, and this rule used to stop at 700px, which left the
   whole page scrolling sideways on one. The table sits in a box that
   scrolls on its own at every width instead: the reader swipes the
   table, never the page, and where the table does fit the box shows no
   scrollbar and nothing changes. The table keeps display:table, so it
   still stretches to the full width of the column on a desktop. */
.docs-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 18px; }
.docs-scroll .docs-table{ margin-bottom:0; }

@media (prefers-reduced-motion: reduce){ .docs-copy{ transition:none; } }

/* The API reference (docs-api.html, written by ci/api-docs.mjs). */
.api-method{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; font-weight:600; padding:1px 6px; border:1px solid var(--rule-strong); border-radius:4px; margin:0 4px 2px 0; color:var(--text); }
.api-path{ font-family:var(--font-mono); font-size:13px; color:var(--text); white-space:nowrap; }
.api-path em{ font-style:normal; color:var(--text-faint); }
.docs-table td.api-who{ white-space:nowrap; }