/* home-bench.css: the home page's page 2, "See the benchmarks for yourself" (#benchmarks, 2026-11-01). It is one
 * page between the nav and the footer (home.css) and fits it at every size: heading and one line; then the
 * biggest wins as thin one-row bar pairs (left) beside the builds-a-day calculator (right); then the assumption
 * line and the CTAs. Narrow screens: one column, the first 3 projects, a compact calculator, no CTAs (Download is
 * in the nav). Colours as on /benchmarks: zinc grey is GitHub, emerald is Codemany (marks only; text stays in the
 * zinc ink tokens). 2026-11-01: GitHub grey #6a6a72 (was black) so Codemany leads; 3.0:1+ on white, and apart
 * from #059669 for deutan/protan/tritan (dataviz validate_palette.js: CVD ΔE 8.0, normal ΔE 15.1). Bars grow from 0 when .hb-grown lands (benchmarks/home-bars.js); reduced motion draws them. */
.hb { --gh: #6a6a72; --cm: #059669; } /* no divider: the pages slide as one surface (2026-11-01) */
.hb-in {
  height: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(12px, 3vh, 40px) 16px;
  display: grid; align-content: center; gap: clamp(12px, 2.6vh, 28px); min-width: 0;
}
.hb-head { display: grid; gap: 6px; max-width: 760px; }
.hb-head h2 { margin: 0; font-size: clamp(20px, min(3vw, 4.4vh), 34px); line-height: 1.12; letter-spacing: -.05em; text-wrap: balance; }
.hb-lede { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); text-wrap: pretty; }
.hb-sum { color: var(--foreground); }
.hb-runs { font-size: 12px; color: var(--muted-foreground); text-underline-offset: 3px; white-space: nowrap; }
.hb-runs:hover { color: var(--foreground); }
.hb-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.hb-grid[hidden], .hb-calc[hidden], .hb-field[hidden] { display: none; }

/* ---------- legend and the per-project rows: name | GitHub over Codemany | "N× faster" ---------- */
.hb-chart { display: grid; gap: 10px; min-width: 0; }
.hb-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 12px; color: var(--muted-foreground); }
.hb-hint { margin-left: auto; }
.hb-key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.hb-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 1.4vh, 12px); }
.hb-proj { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 7.5em; align-items: center; gap: 12px; min-width: 0; font-size: 13px; }
.hb-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.hb-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.hb-os { font-size: 11px; color: var(--muted-foreground); }
/* the pair: two thin bars, 2px of air between them */
.hb-pair { display: grid; gap: 2px; min-width: 0; }
.hb-pair .hb-bar { height: 7px; }
/* "2.1× faster": the row's answer, in ink on a faint emerald pill */
.hb-x {
  justify-self: end; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; color: var(--foreground);
}
.hb-all { justify-self: start; font-size: 13px; color: var(--foreground); text-underline-offset: 3px; }

/* one bar row of the calculator: who | bar | value */
.hb-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 72px; align-items: center; gap: 8px; font-size: 11px; line-height: 1.3; }
.hb-who { color: var(--muted-foreground); }
.hb-who-cm { color: var(--foreground); } /* 2026-11-01: Codemany primary, GitHub secondary */
.hb-val { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hb-track { display: block; height: 8px; min-width: 0; }
/* a thin bar anchored left, 4px round on its data end */
.hb-bar { display: block; height: 100%; width: 0; border-radius: 0 4px 4px 0; }
.hb-gh { background: var(--gh); }
.hb-cm { background: var(--cm); }
.hb-rows { display: grid; gap: 2px; }

/* ---------- the grow: bars from 0 once on screen, then "N× faster" fades in; quicker after (calculator) ---------- */
.hb-grown .hb-bar { width: calc(var(--f, 0) * 100%); }
.hb-x { opacity: 0; }
.hb-grown .hb-x { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hb-bar { transition: width .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
  .hb-x { transition: opacity .4s ease calc(var(--d, 0s) + .8s); }
  .hb-settled .hb-bar { transition-duration: .3s; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-bar { width: calc(var(--f, 0) * 100%); }
  .hb-x { opacity: 1; }
}

/* ---------- the calculator ---------- */
.hb-calc {
  display: grid; gap: 12px; min-width: 0; padding: clamp(12px, 2vw, 20px);
  border: 1px solid var(--border); border-radius: 12px; background: var(--background); box-shadow: var(--shadow);
}
.hb-calc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hb-calc h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.hb-field { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 4px; }
.hb-label { padding: 0; font-size: 13px; color: var(--muted-foreground); }
.hb-range-l { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hb-range-l b { font-size: 16px; color: var(--foreground); font-variant-numeric: tabular-nums; }
.hb-range { width: 100%; height: 22px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.hb-like { margin: 0; font-size: 11px; line-height: 1.4; color: var(--muted-foreground); }
/* Mac | Linux: the site's segmented control (.rseg in styles.css, 2026-11-01) */
.hb-totals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.hb-total { display: grid; align-content: start; gap: 6px; min-width: 0; }
.hb-big { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted-foreground); }
.hb-big b {
  display: block; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.04em;
  color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hb-total .hb-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 6px; }
.hb-verdict { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted-foreground); }
.hb-verdict:empty { display: none; }
/* 2026-11-01: below the plan price (GitHub costs less than $20 a month) time leads alone: the money box steps
 * back and the verdict line says what GitHub costs and where Codemany pays for itself. */
.hb-calc[data-lead="time"] .hb-total:last-child { display: none; }
.hb-calc[data-lead="time"] .hb-totals { grid-template-columns: 1fr; }
.hb-calc[data-lead="time"] .hb-verdict { color: var(--foreground); }
/* 2026-11-01: "Private | Public" (.cp + .rseg in styles.css) under the heading; the small honest lines
 * (.cp-fine: who owns the computer, which GitHub computer timed Linux) under the bars and the calculator. */
.hb-chart { position: relative; }

/* ---------- the line under it all, and the CTAs ---------- */
.hb-fallback { margin: 0; font-size: 14px; color: var(--muted-foreground); }
.hb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.hb-note { flex: 1 1 420px; margin: 0; max-width: 88ch; font-size: 11px; line-height: 1.5; color: var(--muted-foreground); text-wrap: pretty; }
.hb-note a { color: var(--foreground); text-underline-offset: 3px; }
.hb-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hb-free { font-size: 12px; color: var(--muted-foreground); }

/* ---------- narrow: one column; the first 3 projects, a compact calculator, no CTAs (Download is in the nav) ---------- */
@media (min-width: 861px) { .hb-all-narrow { display: none; } }
@media (max-width: 860px) {
  .hb-in { align-content: start; gap: 12px; padding-top: 12px; padding-bottom: 8px; }
  .hb-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hb-proj:nth-child(n+4) { display: none; }
  .hb-lede { font-size: 13px; }
  .hb-ctas, .hb-like, .hb-hint { display: none; }
  .hb-note { font-size: 11px; }
  .hb-note span { display: none; }
}
@media (max-width: 860px) {
  /* "See all N →" rides on the legend's row (its hint is gone here), so the honest lines below the bars fit */
  .hb-all { position: absolute; top: 0; right: 0; font-size: 12px; line-height: 1.4; }
}
@media (max-width: 600px) {
  .hb-head .eyebrow { display: none; }
  /* phones: the big numbers and the price line carry the calculator; its bar rows go (2026-11-01) */
  .hb-calc .hb-rows { display: none; }
  .hb-in { gap: 10px; }
  .hb-chart { gap: 8px; }
  .hb-proj { grid-template-columns: minmax(0, 8em) minmax(0, 1fr) auto; gap: 8px; font-size: 12px; }
  .hb-calc { gap: 8px; padding: 12px; }
  .hb-totals { gap: 10px; padding-top: 8px; }
  .hb-big b { font-size: 20px; }
  /* 2026-11-01 (simpler phones): the toggle, one sentence, the bars and the big numbers; the notes, the price
   * line and "See the runs" go ("Every number and how we test →" keeps them one tap away) */
  .hb-runs, .hb-grid .cp-fine, .hb-verdict { display: none !important; }
}
/* short laptop windows: the assumption line goes (it stays on /benchmarks), the lede shortens */
@media (min-width: 861px) and (max-height: 760px) {
  .hb-note span { display: none; }
  .hb-like { display: none; }
}
/* 2026-11-01 (tall phones, 740px+): page 2 had half a screen empty under the calculator. Like /benchmarks on a
 * phone, it shows every project drawn (up to 6, home-bars.js), with thicker bars, and sits in the middle of the
 * page; "See all N →" goes when every project is already drawn. Short phones keep the first 3, from the top. */
@media (max-width: 600px) and (min-height: 740px) {
  .hb-in { align-content: center; gap: 20px; }
  .hb-chart { gap: 12px; }
  .hb-bars { gap: 14px; }
  .hb-proj:nth-child(n+4) { display: grid; }
  .hb-pair { gap: 3px; }
  .hb-pair .hb-bar { height: 10px; }
  .hb-all-narrow { display: none; }
  /* the platform under the name, so a long name (react-native) is not cut */
  .hb-name { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
}