/* Site chrome — the menu on every public page, and the footer on every public page but the
   landing (which keeps its design's own). Loaded LAST by layouts/site, layouts/migrate and
   layouts/home, so these rules win over each page's own link colours.

   Self-contained on purpose: it declares its own font, colours and sizes rather than
   inheriting them, so the chrome looks the same on the dark pages and on the light blog. */

.sc{
  --sc-bg:#000;
  --sc-line:#fff;
  --sc-text:#d6d6d0;
  --sc-faint:#6f6f68;
  --sc-rule:#4a4a44;
  --sc-accent:#ff7a1a;
  --sc-link:#7aa5ff;
  --sc-link-bg:#1b2440;
  --sc-mono:'IBM Plex Mono','Courier New',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sc-max:975px;

  font-family:var(--sc-mono); font-size:15px; line-height:1.6; color:var(--sc-text);
}

/* Visited links keep the unvisited colour — the footer stays one colour as people browse. */
.sc a,
.sc a:visited{ color:var(--sc-link); text-decoration:underline; text-underline-offset:2px; }
.sc a:hover{ color:#fff; background:var(--sc-link-bg); }

/* ---------- menu (shared/_site_nav) ---------- */
/* The landing design's nav (pgrun-export 3), on every public page. Its look is inline in
   the partial; this only supplies the ground those inline styles assume — the landing's
   near-black and IBM Plex Mono — and what inline styles cannot express.

   It rides along the top of the page: sticky rather than fixed, so it still occupies its
   own space and nothing has to be padded out from under it, and translucent over a blur so
   whatever scrolls beneath reads as depth rather than clutter. */
header.site-menu{
  position:sticky; top:0; z-index:100;
  background:rgba(11,13,15,.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
          backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid oklch(0.2 0.008 250);
  font-family:'IBM Plex Mono','Courier New',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:400; line-height:1.6;
}
/* Without a blur to hide it, text scrolling under a 72% bar is just legible-ish noise. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.site-menu{ background:#0b0d0f; }
}
/* The blog is the one light page under this menu, and over white a 72% bar washes out to
   grey. Keep it near-black there; the reader's dark mode gets the glassy default back. */
body.blog-mono header.site-menu{ background:rgba(11,13,15,.92); }
html[data-theme="dark"] body.blog-mono header.site-menu{ background:rgba(11,13,15,.72); }

/* Anchor targets (#install and friends) would otherwise land under the bar. */
html{ scroll-padding-top:96px; }

/* landing.css zooms body.lp to 1.1 on every page that loads it; zoom the menu back out so it
   is the landing's exact size everywhere. The blog resets body zoom itself. */
body.lp header.site-menu{ zoom:0.90909; }
body.lp.blog-mono header.site-menu{ zoom:1; }

/* The products trigger is a button that must look like the links beside it; the reset
   lives here (not inline) so the .site-menu-link rules below can style it. */
.site-menu .products-trigger{ all:unset; cursor:default; display:flex; align-items:center; gap:5px; }
/* Text links in the bar (docs, pricing, blog, products, log in) are sans, medium weight and
   title case, in a light grey that goes white on hover — the product-site convention, so the
   menu reads as navigation rather than as part of the mono brand mark beside it. The label
   text stays lowercase in the HTML (tests read it); CSS capitalises it. */
.site-menu .site-menu-link,
.site-menu .site-menu-link:visited{
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14.5px; font-weight:500; letter-spacing:-0.01em; text-transform:capitalize;
  color:oklch(0.78 0.008 250);
  transition:color .15s ease;
}
.site-menu .site-menu-link:hover,
.site-menu .site-menu-link:focus-visible{ color:#fff; }
.site-menu .products-trigger.site-menu-link{ color:oklch(0.78 0.008 250); }
.site-menu .products-trigger.site-menu-link svg{ transition:transform .15s ease; }
.site-menu .products-wrap:hover .products-trigger svg,
.site-menu .products-wrap:focus-within .products-trigger svg{ transform:rotate(180deg); }
.site-menu .site-menu-actions .btn-primary{
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px; font-weight:600; letter-spacing:-0.01em; text-transform:capitalize;
  transition:filter .15s ease;
}
.site-menu .site-menu-actions .btn-primary:hover{ filter:brightness(1.08); }
.site-menu .site-menu-stars span{ font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif; }
@media (prefers-reduced-motion: reduce){
  .site-menu .site-menu-link, .site-menu .products-trigger svg, .site-menu .site-menu-actions .btn-primary{ transition:none; }
}

/* The pages' own link rules (.lp a, .d a) underline and tint on hover. Colours are inline
   and already win; this cancels the rest. */
header.site-menu a,
header.site-menu a:visited,
header.site-menu a:hover{ text-decoration:none; background:none; }

@keyframes flashBW{ 0%{ background:#000; border-color:#000; } 100%{ background:#fff; border-color:#fff; } }
@keyframes siteMenuFadeIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:translateY(0); } }

.site-menu .products-dropdown{ display:none; }
.site-menu .products-wrap:hover .products-dropdown,
.site-menu .products-wrap:focus-within .products-dropdown{ display:flex; animation:siteMenuFadeIn .15s ease-out; }
.site-menu .products-trigger:focus-visible{ outline:1px solid oklch(0.72 0.11 235); outline-offset:4px; border-radius:3px; }
/* Beats `header.site-menu a:hover{background:none}` on specificity (three classes). */
.site-menu .products-item:hover,
.site-menu .products-item:focus-visible{ background:oklch(0.2 0.008 250); outline:none; }

/* GitHub mark + star count. It is the one piece of social proof in the bar, so the mark is
   larger than the text links (20px) with the count in near-white beside it; no pill, no star
   glyph. Hovering lifts both to white. */
.site-menu .site-menu-stars,
.site-menu .site-menu-stars:visited{
  display:inline-flex; align-items:center; gap:7px;
  color:oklch(0.8 0.01 250); text-decoration:none;
  transition:color .15s ease;
}
.site-menu .site-menu-stars svg{ flex:none; }
.site-menu .site-menu-stars span{ font-weight:600; font-size:14px; color:oklch(0.93 0.005 250); letter-spacing:-0.01em; }
.site-menu .site-menu-stars:hover{ color:#fff; }
.site-menu .site-menu-stars:hover span{ color:#fff; }
@media (prefers-reduced-motion: reduce){ .site-menu .site-menu-stars{ transition:none; } }

/* Phones: the single row would run off-screen, so it wraps. !important because the padding
   it overrides is inline. */
@media (max-width:720px){
  .site-menu .site-menu-bar{ flex-wrap:wrap; row-gap:12px; padding:18px 20px !important; }
}
/* Phones: the bar wrapped, but at its desktop size it wrapped into two cramped rows with
   the sign-up button jammed against the edge. Tighten the type and the gaps so the two
   rows read as one menu, and drop the star count — it is the one item that carries no
   navigation. */
@media (max-width:520px){
  /* The bar's own side padding sat INSIDE the header's 20px gutter, so the menu started at
     36px while every section and the footer started at 20px — a visible step on a phone.
     The header supplies the gutter; the bar only keeps its vertical padding. */
  .site-menu .site-menu-bar{ padding:12px 0 !important; gap:14px !important; row-gap:6px; font-size:13px !important; }
  /* Text links in a bar are ~21px tall, under any sane tap target. A min-height (rather than
     padding alone, which the trigger button did not take) gives every item a 36px target
     without growing the bar, since the rows were already spaced by row-gap. */
  .site-menu .site-menu-bar a,
  .site-menu .site-menu-bar button{
    font-size:13px !important; display:inline-flex; align-items:center; min-height:36px;
  }
  /* The products trigger carries `all:unset` inline, which drops any min-height a stylesheet
     gives it — so it alone stayed a 21px target, sitting off the row's baseline. Its wrapper
     carries the height; the button matches it with !important. */
  .site-menu .site-menu-bar .products-wrap{ display:inline-flex; align-items:center; min-height:36px; }
  .site-menu .site-menu-bar .products-trigger{ min-height:36px !important; }
  .site-menu .site-menu-actions{ gap:12px !important; }
  .site-menu .site-menu-actions .btn-primary{ padding:8px 14px !important; }
  /* The count used to go on phones as the one item carrying no navigation. Now that it is
     the bar's social proof it stays, just tighter — it rides with log in / sign up. */
  .site-menu .site-menu-stars{ gap:5px; }
  .site-menu .site-menu-stars svg{ width:18px; height:18px; }
}
/* Under 360px the badge costs the bar a third row, so the narrowest phones lose it again. */
@media (max-width:359px){
  .site-menu .site-menu-stars{ display:none !important; }
}

/* Phones: the footer wrapped into ragged lines — separators stranded at the end of a line,
   and the status line flung to the right edge on its own row by its margin-left:auto. The
   gap already separates the links, so the dots go and the status rejoins the flow. */
@media (max-width:520px){
  .sc-foot-in{ gap:4px 14px; }
  .sc-foot-in > span:not([class]){ display:none; }
  .sc .sc-status{ margin-left:0; width:100%; }
  .sc-foot-in a{ min-height:32px; display:inline-flex; align-items:center; }
}

/* ---------- footer ---------- */
footer.sc-foot{ margin-top:52px; background:var(--sc-bg); padding:0 20px; }
/* Same rule as the nav: gutter outside the bordered box, so the line and the first link
   start at the same x. */
.sc-foot-in{
  max-width:var(--sc-max); margin:0 auto; padding:16px 0 28px;
  display:flex; flex-wrap:wrap; gap:6px 10px; font-size:14px; color:var(--sc-faint); align-items:center;
  border-top:1px solid var(--sc-line);
}
.sc .sc-status,
.sc .sc-status:visited{ margin-left:auto; display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--sc-accent); background:none; }
.sc .sc-status:hover{ background:none; color:var(--sc-accent); text-decoration:none; }
.sc-status i{ width:7px; height:7px; background:var(--sc-accent); display:inline-block; }
/* Degraded reads differently from healthy, or the dot says nothing. */
.sc .sc-status-degraded{ color:#f0a35e; }
.sc-status-degraded i{ background:#f0a35e; }
.sc-copy{ width:100%; color:var(--sc-rule); padding-top:6px; }

.sc .sc-foot-x,
.sc .sc-foot-x:visited{
  display:inline-flex; align-items:center; gap:6px; color:var(--sc-faint);
  text-decoration:none; background:none;
}
.sc .sc-foot-x:hover{ color:var(--sc-accent); background:none; }
.sc-foot-x svg{ flex:none; }