/* ==========================================================================
   home.css — the ranking page only.

   The parity rule from the editorial policy is enforced in the stylesheet, not
   just in the copy: there is exactly one .entry rule set, no card-level
   modifier, and the first entry differs from the other nine in the fill of its
   rank badge and nothing else. check.mjs asserts that the .entry__rank--lead
   rule contains no gradient, shadow, animation or accent colour, so the badge
   cannot quietly become a prize ribbon three edits from now.
   ========================================================================== */

/* ── Hero ───────────────────────────────────────────────────────────────────
   A tinted band, not a coloured one. The reference opens on near-white with
   the metadata row doing the work, and on a page whose job is comparison a
   loud hero would be the wrong promise. */

.lede {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-tint);
}
.lede__inner {
  padding-top: var(--s-5);
  padding-bottom: var(--s-4);
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 1040px) {
  .lede__inner {
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: var(--s-8);
    align-items: start;
    padding-top: var(--s-6);
    padding-bottom: var(--s-5);
  }
  /* lines the scorecard up with the headline rather than the eyebrow */
  .facts { margin-top: 2.6rem; }
}

.lede__title { margin-top: 0.85rem; max-width: 22ch; }
.lede__sub {
  margin-top: var(--s-2);
  max-width: var(--measure-wide);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.lede__intro {
  margin-top: var(--s-2);
  max-width: var(--measure-wide);
  color: var(--ink-soft);
}
.lede__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--s-3);
}

/* The scorecard: three facts, set as data rather than prose, on the same mono
   caps as every other label on the page. */
.facts {
  margin: 0;
  border-top: 1px solid var(--rule-strong);
}
.facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.facts dd.facts__word { font-size: 1rem; letter-spacing: -0.02em; }

.stamp {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  line-height: 1.6;
}
.stamp a { color: var(--ink-faint); }

/* byline row under the hero */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.byline__who { color: var(--ink-soft); }
.byline__who a { color: var(--ink-soft); text-decoration-color: var(--rule-strong); }
.byline__who a:hover { color: var(--accent-ink); }
.byline__sep { color: var(--rule-strong); }

/* ── Evaluation criteria cards ──────────────────────────────────────────── */

.criteria {
  display: grid;
  gap: 1px;
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  counter-reset: crit;
}
@media (min-width: 620px) {
  .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .criteria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.criteria__card {
  counter-increment: crit;
  padding: var(--s-3) var(--s-2);
  background: var(--paper);
}
.criteria__icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--accent);
}
.criteria__icon svg { display: block; width: 100%; height: 100%; }
.criteria__name {
  margin: 0.7rem 0 0.3rem;
  font-size: 1rem;
}
.criteria__name::before {
  content: counter(crit, decimal-leading-zero) ' ';
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
}
.criteria__card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── Method diagram ─────────────────────────────────────────────────────── */

.figure {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-tint);
}
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ── The ranking ────────────────────────────────────────────────────────── */

.ranking {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.entry {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.entry__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-tint);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.entry__mark {
  flex: none;
  display: block;
  width: 40px;
  height: 40px;
}
.entry__mark img { display: block; width: 40px; height: 40px; }

.entry__rank {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper-sunk);
  color: var(--structure);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
/* The first entry differs in fill and nothing else. An ordinal, not a prize. */
.entry__rank--lead {
  border-color: var(--structure);
  background: var(--structure);
  color: var(--ink-invert);
}

.entry__name { margin: 0; }
.entry__kind {
  margin-top: 0.1rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.entry__fields { margin: 0; padding: var(--s-2) var(--s-3) 0; }
.entry__fields > div {
  display: grid;
  gap: 0.2rem 1.25rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .entry__fields > div { grid-template-columns: 9.5rem minmax(0, 1fr); }
}
.entry__fields dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.36em;
}
.entry__fields dd { margin: 0; color: var(--ink-soft); }
.entry__fields dd > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.entry__fields dd > ul > li {
  position: relative;
  padding-left: 1.05rem;
}
.entry__fields dd > ul > li + li { margin-top: 0.3rem; }
.entry__fields dd > ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 4px;
  height: 4px;
  background: var(--accent);
}

/* The verdict panel: the reference's one genuinely good component. Two columns
   that disagree, sharing a rule down the middle. */
.verdict {
  display: grid;
  gap: 1px;
  margin: var(--s-2) var(--s-3) 0;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--rule);
}
@media (min-width: 760px) {
  .verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.verdict__side { padding: 0.85rem 1rem; }
.verdict__side--pro { background: var(--pro-wash); }
.verdict__side--con { background: var(--con-wash); }
.verdict__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.verdict__side--pro .verdict__label { color: var(--pro); }
.verdict__side--con .verdict__label { color: var(--con); }
.verdict__label svg { display: block; width: 13px; height: 13px; flex: none; }
.verdict ul {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.55;
}
.verdict li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--ink-soft);
}
.verdict li + li { margin-top: 0.45rem; }
.verdict li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 2px;
}
.verdict__side--pro li::before { background: var(--pro); }
.verdict__side--con li::before { background: var(--con); }

.entry__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: var(--s-2) var(--s-3);
}
.entry__link {
  font-size: 0.875rem;
  font-weight: 600;
}
.entry__back {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  margin-left: auto;
}
.entry__back:hover { color: var(--accent-ink); }

/* ── Three-way comparison panels ────────────────────────────────────────── */

.trio {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.trio__panel {
  padding: var(--s-2) var(--s-3) var(--s-3);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--structure);
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--paper);
}
.trio__panel h3 { margin: 0.7rem 0 0.4rem; }
.trio__panel .caps { display: block; }
.trio__panel p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }

/* ── Pricing ────────────────────────────────────────────────────────────── */

.grid .money {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--ink);
}

/* ── Method diagram internals ───────────────────────────────────────────────
   The diagram is inline SVG, not an <img>, for one reason: an SVG loaded
   through <img> cannot see the page's webfonts, so its labels would fall back
   to a system face and stop matching the rest of the page. Inline also means
   the theme tokens below apply, and the reduced-motion reset in global.css
   reaches it. */

.figure svg { display: block; width: 100%; height: auto; }

.flow__line { stroke: var(--rule-strong); stroke-width: 1.5; }
.flow__node { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1.5; }
.flow__node--end { stroke: var(--structure); }
.flow__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  fill: var(--ink-soft);
}
.flow__idx--end { fill: var(--accent-ink); }
.flow__title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  fill: var(--ink);
}
.flow__text {
  font-family: var(--font-body);
  font-size: 12.5px;
  fill: var(--ink-soft);
}