/* ==========================================================================
   Generator Size Calculator — shared chrome
   Only defines NEW classes (site nav, breadcrumbs, skip link, focus states).
   Page-specific styles stay in each page's inline <style> block.
   Custom properties fall back to the palette so this file works standalone.
   ========================================================================== */

/* ---------- Palette extensions ---------- */
/* #38bdf8 is 2.1:1 on white: fine for icon and dark-surface use, too light for
   link text on a white card. --link is the same hue dark enough to pass AA. */
:root {
  --link: #0369a1;
  --note-ink: #92400e;
}

/* ---------- Inline icons ---------- */
/* The bolt SVG in an h1 has no intrinsic size, so without this it expands to
   fill the heading box (measured 1248x1248 and blew up the hero). */
header h1 svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  display: inline-block;
  flex-shrink: 0;
  color: var(--cyan, #38bdf8);
}
/* Any icon placed inline in a heading should match the text size */
h1 svg, h2 svg, h3 svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* ---------- Nav label variants: full on wide screens, short on narrow ---------- */
.site-nav .nav-links .short {
  display: none;
}
.site-nav .nav-links .full {
  display: inline;
}

/* ---------- Skip link (keyboard users land here first) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cyan, #38bdf8);
  color: var(--navy, #0f172a);
  font-weight: 700;
  padding: .7rem 1.1rem;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Sticky site nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy, #0f172a);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-nav .nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  min-height: 40px;
}
.site-nav .brand svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--cyan, #38bdf8);
}
.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.site-nav .nav-links a {
  display: inline-flex;
  align-items: center;
  color: #cbd5e1;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  padding: .5rem .7rem;
  border-radius: 7px;
  min-height: 40px;
  transition: background .15s, color .15s;
}
.site-nav .nav-links a:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
/* Current page marker — orientation without relying on colour alone */
.site-nav .nav-links a[aria-current="page"] {
  background: rgba(56, 189, 248, .16);
  color: var(--cyan, #38bdf8);
}

/* ---------- Breadcrumbs on inner pages ---------- */
.breadcrumbs {
  margin-bottom: 1rem;
}
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted, #64748b);
}
.breadcrumbs li + li::before {
  content: "\203A"; /* › */
  color: var(--border, #e2e8f0);
}
.breadcrumbs a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}
.breadcrumbs a:hover {
  color: #0284c7;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.breadcrumbs [aria-current="page"] {
  color: var(--text, #1e293b);
  font-weight: 600;
}

/* ---------- Focus visibility (was missing; keyboard users had no cue) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--cyan, #38bdf8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Footer gets real tap targets, and a home link ---------- */
footer.site-footer {
  text-align: center;
  color: var(--muted, #64748b);
  font-size: .8rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--border, #e2e8f0);
  margin-top: 1rem;
}
footer.site-footer a {
  color: var(--link);
  text-decoration: none;
}
footer.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Standing tap-target fix: standalone links (not inline prose) ---------- */
/* Product links that occupy a whole table cell are primary actions on touch. */
.table-wrap a,
.aff-item a {
  display: inline-block;
  min-height: 44px;
  line-height: 1.4;
  padding: .55rem 0;
}

@media (max-width: 640px) {
  /* Nav: keep it compact. Wrapping to 160px eats the whole first screen,
     so the links become one horizontally scrollable row instead. */
  .site-nav .nav-inner {
    padding: .4rem .75rem;
    gap: .35rem;
    flex-direction: column;
    align-items: stretch;
  }
  .site-nav .nav-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .1rem;
  }
  .site-nav .nav-links::-webkit-scrollbar {
    display: none;
  }
  .site-nav .nav-links a {
    white-space: nowrap;
    min-height: 44px;
    padding: .5rem .7rem;
  }
  /* Short labels on narrow screens so all 5 links fit without scrolling */
  .site-nav .nav-links .full {
    display: none;
  }
  .site-nav .nav-links .short {
    display: inline;
  }
  /* Breadcrumb and footer links are real navigation on inner pages, so they
     need a 44px target on touch even though they read as inline text. */
  .breadcrumbs ol li {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  nav.breadcrumbs ol li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    height: auto;
  }
  .site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .15rem .2rem;
  }
  /* Brand is a link too, so it needs a 44px target */
  .site-nav .brand {
    min-height: 44px;
  }
  /* Footer links: were 34px, under the 44px minimum */
  footer.site-footer a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 .3rem;
  }
  .table-wrap a,
  .aff-item a {
    padding: .7rem 0;
  }
}

/* Byline on article pages, and the anchor target it links to (the nav is sticky) */
.byline {
  font-size: .85rem;
  color: #64748b;
  margin: -.4rem 0 1.1rem;
}
.byline a { color: #0f172a; font-weight: 600; text-decoration: underline; }
#author { scroll-margin-top: 84px; }