/* 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 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; }

/* The GitHub count, sitting with the auth actions just before "log in". It carries the one
   piece of social proof in the bar, so unlike the plain text links it reads as a pill: a
   border, a faint lift, the mark and a star in dim ink, and the count itself in near-white.
   Hovering lifts the whole pill rather than just the text. */
.site-menu .site-menu-stars,
.site-menu .site-menu-stars:visited{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px;
  border:1px solid oklch(0.3 0.008 250);
  background:oklch(1 0 0 / 0.03);
  color:oklch(0.6 0.01 250); text-decoration:none;
  transition:border-color .15s ease, background-color .15s ease;
}
.site-menu .site-menu-stars span{ font-weight:600; color:oklch(0.93 0.005 250); letter-spacing:-0.01em; }
.site-menu .site-menu-star{ color:oklch(0.78 0.13 85); }
.site-menu .site-menu-stars:hover{ border-color:oklch(0.45 0.01 250); background:oklch(1 0 0 / 0.06); }
.site-menu .site-menu-stars:hover span{ color:#fff; }
@media (prefers-reduced-motion: reduce){ .site-menu .site-menu-stars{ transition:none; } }

/* The blog's light/dark switch, in the same outline style as the landing demo's "<>" key. */
.site-menu .site-menu-theme{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; padding:0;
  font:inherit; font-size:14px; line-height:1; cursor:pointer;
  color:oklch(0.66 0.01 250); background:none; border:1px solid oklch(0.32 0.008 250); border-radius:6px;
}
.site-menu .site-menu-theme:hover{ color:oklch(0.92 0.005 250); border-color:oklch(0.48 0.01 250); }

/* 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{ padding:4px 9px; gap:5px; }
  .site-menu .site-menu-stars svg:first-child{ display:none; }
}
/* Under 360px the pill 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; }