/* styles.css — shared theme layer for flexanalytics.pro, copied from flexviz.tech (site_redesign_oss).
   Ink & paper, from the F. logo: #121212 on #FAFAF7, one signal-orange accent
   reserved for interactive things (links, selection, hover, the pip prompt). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:      #FAFAF7;
  --panel:      #FFFFFF;
  /* Card surface, relative to the band it sits on: white on a paper band, paper on a
     white one. Cards must not use --panel directly — on a .band--white section that is
     the ground colour, so the card cancels itself out and only its border survives. */
  --card:       var(--panel);
  --ink:        #121212;
  --ink-sub:    rgba(18,18,18,0.70);
  --ink-muted:  rgba(18,18,18,0.52);
  --ink-faint:  rgba(18,18,18,0.36);
  --line:       rgba(18,18,18,0.16);
  --line-soft:  rgba(18,18,18,0.08);
  --accent:     #E8590C;
  --accent-soft: rgba(232,89,12,0.09);
  --ok:         #2F7D43;
  --bad:        #B3452F;

  --font-display: 'Clash Display', 'Switzer', sans-serif;
  --font-sans:    'Switzer', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --nav-h: 62px;

  /* legacy aliases so older shared markup keeps working */
  --bg: var(--paper);
  --white: var(--panel);
  --border: var(--line);
  --text: var(--ink);
  --text-sub: var(--ink-sub);
  --text-muted: var(--ink-muted);
}

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-h);
  /* Sticky footer: short pages (404, contact) otherwise end the footer mid-viewport
     and leave the paper below it. dvh over vh so a mobile URL bar cannot push it
     off-screen instead; the vh line is the fallback for browsers without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* width: 100% because <main> carries `max-width; margin: 0 auto` on some pages
   (.bm-wrap, .tutorial-wrap). Auto cross-axis margins suppress a flex item's
   stretch, so without it those mains shrink to fit-content -- benchmarks.html
   lost 256px of chart width. */
body > main { flex-grow: 1; width: 100%; }
a { color: inherit; }
/* Visually hidden but read aloud: carries the static word behind an
   aria-hidden rolling-word animation. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Shared nav ── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 26px;
  height: var(--nav-h);
  padding: 0 36px;
  background: rgba(250,250,247,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.site-nav .wordmark img { display: block; width: 28px; height: 28px; }
.site-nav .nav-spacer { flex: 1; }
.site-nav .nav-links { display: flex; align-items: center; gap: 24px; }
.site-nav .nav-links a {
  font-size: 13.5px;
  color: var(--ink-sub);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.site-nav .nav-links a:hover { color: var(--accent); }
.site-nav .nav-links a.current { color: var(--ink); font-weight: 500; }
.site-nav .nav-links .nav-github {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  border-radius: 6px;
  transition: background 0.15s;
}
.site-nav .nav-links .nav-github:hover { background: var(--accent); color: var(--paper); }
.site-nav .nav-links .nav-github svg { width: 15px; height: 15px; fill: currentColor; }

/* ── Mobile menu toggle ── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.nav-toggle .bars, .nav-toggle .cross { transition: opacity 0.2s ease; }
.nav-toggle .cross { opacity: 0; }
.site-nav.open .nav-toggle .bars { opacity: 0; }
.site-nav.open .nav-toggle .cross { opacity: 1; }

/* ── Shared footer ── */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 36px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.site-footer .copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer .footer-links a {
  font-size: 13px;
  color: var(--ink-sub);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer .footer-links a:hover { color: var(--accent); }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent); }
.btn-primary svg { width: 16px; height: 16px; fill: currentColor; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Text link ── */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.text-link::after { content: '\2192'; transition: transform 0.15s ease; }
.text-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text-link:hover::after { transform: translateX(3px); }

/* ── Links ──
   Two treatments, and only two.

   Prose links are accent and underlined. The underline THICKENS on hover rather
   than disappearing: dropping it on hover is the one convention that makes a
   link look less like a link exactly as the pointer arrives on it.

   Heading links stay ink so a card title is not a wall of orange, but they carry
   a hairline underline in --line so they are visibly clickable at rest, and both
   the text and the rule go accent on hover. Before this, some heading links had
   no underline at all and were indistinguishable from plain text. */
p a, li a, figcaption a, dd a, td a, .lead a, .note-line a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 0.12s ease;
}
p a:hover, li a:hover, figcaption a:hover, dd a:hover, td a:hover,
.lead a:hover, .note-line a:hover { text-decoration-thickness: 2px; }

h2 a, h3 a, h4 a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
h2 a:hover, h3 a:hover, h4 a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ── Layout shell ── */
.section-shell {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 88px 40px;
}
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: var(--ink);
  text-wrap: pretty;
}
.section-head p { font-size: 15px; line-height: 1.7; color: var(--ink-sub); }
.band--white { background: var(--panel); --card: var(--paper); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

/* ── Instrument panel: bordered cells split by hairlines ── */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.cells { display: grid; grid-template-columns: repeat(2, 1fr); }
.cells.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cell { padding: 30px 30px 26px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); min-width: 0; }
.cells .cell:nth-child(2n) { border-right: 0; }
.cells.cols-3 .cell { border-right: 1px solid var(--line-soft); }
.cells.cols-3 .cell:nth-child(3n) { border-right: 0; }
/* last row: don't double up with the panel's own border */
.cells .cell:nth-last-child(-n+2) { border-bottom: 0; }
.cells.cols-3 .cell:nth-last-child(-n+3) { border-bottom: 0; }
.cell h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 8px; line-height: 1.35; color: var(--ink); }
.cell h3 .k { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-faint); margin-right: 8px; }
.cell p { font-size: 13.5px; line-height: 1.65; color: var(--ink-sub); }
.cell p code, .qs-points code, .status-list code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: var(--line-soft); border-radius: 3px; padding: 1px 5px; }

/* ── Code block ── */
.code-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.code-block .code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
}
.code-block pre {
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink);
}
.code-block .cm { color: var(--ink-faint); }
.code-block .kw { font-weight: 600; }
.code-block .st { color: var(--ink-sub); }

/* ── pip line ── */
.pip-line {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink-muted);
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pip-line .prompt { color: var(--accent); user-select: none; }
.pip-line .pip-copy { font-size: 11px; color: var(--ink-faint); user-select: none; }
.pip-line .pip-copy::after { content: 'copy'; }
.pip-line:hover { border-color: var(--accent); color: var(--ink); }
.pip-line:hover .pip-copy { color: var(--accent); }
.pip-line.copied { border-color: var(--accent); }
.pip-line.copied .pip-copy { color: var(--accent); }
.pip-line.copied .pip-copy::after { content: 'copied'; }

/* ── Contact / notify form ── */
.contact-form { display: grid; gap: 10px; max-width: 460px; }
.contact-input, .contact-msg {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.contact-input:focus, .contact-msg:focus { border-color: var(--accent); }
.contact-input::placeholder, .contact-msg::placeholder { color: var(--ink-faint); }
.contact-msg { resize: vertical; min-height: 88px; font-family: var(--font-sans); }
.form-note { display: none; font-family: var(--font-mono); font-size: 12.5px; margin-top: 6px; }
.form-note.ok { color: var(--ok); }
.form-note.err { color: var(--bad); }

/* ── Shared page furniture (flexanalytics.pro additions) ── */
/* Eyebrow / kicker: the mono accent label above a heading. */
.eyebrow, .kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
/* Sub-page hero: every page but the homepage opens with one. */
.page-hero { max-width: 1080px; margin: 0 auto; padding: 72px 40px 48px; }
.page-hero h1 {
  max-width: 820px; font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px); font-weight: 600; line-height: 1.06;
  letter-spacing: -0.02em; text-wrap: pretty;
}
.page-hero .lead { max-width: 720px; margin-top: 20px; font-size: 16px; line-height: 1.72; color: var(--ink-sub); }
.page-hero .lead a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* Two columns of prose, side by side (heritage + form on flexviz.tech). */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.duo h2 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px; }
.duo p { font-size: 14px; line-height: 1.7; color: var(--ink-sub); }
.duo p + p { margin-top: 12px; }
.duo .contact-form { margin-top: 20px; }
/* GitHub star chips: the count is typed into the markup, nav.js refreshes it. */
.star-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 18px; min-height: 28px; }
.star-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-sub); text-decoration: none; }
.star-chip svg { width: 12px; height: 12px; fill: var(--ink-faint); }
.star-chip b { font-weight: 500; color: var(--ink); }
.star-chip:hover { border-color: var(--accent); color: var(--ink); }
.star-chip:hover svg { fill: var(--accent); }
/* Mono detail line under a block (address, licence, version). */
.detail-line { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 12px; line-height: 1.8; color: var(--ink-muted); }
.detail-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.detail-line a:hover { color: var(--accent); }

@media (max-width: 960px) {
  .page-hero { padding: 52px 22px 40px; }
  .duo { grid-template-columns: 1fr; gap: 48px; }
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .section-shell { padding: 64px 22px; }
  .cells, .cells.cols-3 { grid-template-columns: 1fr; }
  .cell, .cells .cell:nth-child(2n), .cells.cols-3 .cell { border-right: 0; }
  /* single column: separator under every cell except the last */
  .cells .cell:not(:last-child), .cells.cols-3 .cell:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
  .cells .cell:last-child, .cells.cols-3 .cell:last-child { border-bottom: 0; }
}
@media (max-width: 767px) {
  .site-nav { padding: 0 18px; gap: 14px; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .site-nav .nav-spacer { display: none; }
  .site-nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 18px 14px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .site-nav.open .nav-links { display: flex; }
  .site-nav .nav-links a { padding: 13px 0; font-size: 14.5px; border-bottom: 1px solid var(--line-soft); }
  .site-nav .nav-links a:last-child { border-bottom: 0; }
  .site-nav .nav-links .nav-github { background: transparent; color: var(--ink); padding: 13px 0; border-radius: 0; }
  .site-nav .nav-links .nav-github:hover { color: var(--accent); }
  .site-footer { flex-direction: column; text-align: center; }
}