/* ============================================================
   sparkcode.css: what the SparkCode page needs beyond the shared
   stylesheets (base.css, chrome.css, index.css, page.css): the
   command block with its copy button, inline code and the list of
   links under the install section. Tokens come from base.css.
   ============================================================ */

/* ===================== COMMAND BLOCK ===================== */
/* The install command and the button that copies it. The command wraps on a
   narrow screen instead of scrolling: a block that scrolls sideways would need
   its own keyboard focus, and a wrapped command copies just as well. */
.cmd-block{ display:flex; flex-wrap:wrap; gap:0.6rem; align-items:stretch; max-width:58rem; margin-top:1.2rem; }
.cmd{
  flex:1 1 36rem; margin:0; padding:0.9rem 1.1rem;
  background:var(--surface); border:1px solid var(--border-control); border-radius:var(--radius);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.98rem; line-height:1.5;
  color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere;
}
.section--alt .cmd{ background:var(--bg); }
.cmd code{ font:inherit; }
.cmd-copy{ flex:0 0 auto; align-self:center; }
/* Reserves its line, so the confirmation does not push the text below it. */
.cmd-status{ margin:0.5rem 0 1.4rem; min-height:1.6em; color:var(--accent-text); font-weight:700; }

/* ===================== INLINE CODE ===================== */
.prose code, .pillar__body code, .section-lead code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.92em;
  background:var(--surface-2); color:var(--ink); padding:0.08em 0.4em; border-radius:var(--radius);
  overflow-wrap:anywhere;
}

/* ===================== LINKS ===================== */
.links{ list-style:none; padding:0; margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:0.6rem 1.8rem; }
.links a{ font-weight:700; color:var(--link); }

/* ===================== CURRENT SECTION ===================== */
/* sparkcode.js marks the link of the section on screen with
   aria-current="location"; the same look chrome.css gives the current page,
   so the header reads the same way on this site and on the foundation's. */
.nav-link[aria-current="location"]{ background:var(--accent-tint); color:var(--accent-text); box-shadow:inset 0 -2px 0 var(--accent); }
.nav-mobile__link[aria-current="location"]{ color:var(--accent-text); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
/* A section reached from the menu stops below the sticky header, not under it. */
.section[id]{ scroll-margin-top:calc(var(--header-h) + 8px); }

/* ===================== PAGE HEADER ===================== */
/* page.css lays out the page header without buttons, so its lead has no
   bottom margin; the buttons under it need the same breathing room the
   landing page's hero gives its own. */
.page-hero .hero__actions{ margin-top:1.8rem; }