/* The comparison article as a page type (issue #204): every
   app/comparison/<slug>/index.html links this file, so the parts that make a
   page a comparison - the hero with its date and topic chips, the verdict
   cards, the score table, the reviews, the FAQ and the feedback block at the
   end - look the same on every article and change in one place. The tokens
   (--blue, --line...), the header, the buttons and the footer stay in each
   page's own <style>, copied like on every marketing page (docs/design.md),
   which is why nothing here defines them. The structure this styles is pinned
   by src/test/comparison-page.test.js for every article.

   Moved here from the first article's <style> (issue #197) with the same
   values, its comments made to fit any article; the feedback block is the
   part new here. */

/* ── Hero ─────────────────────────────────────────────── */
.hero { position: relative; text-align: center; padding: 56px var(--gutter) 8px; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -80px -10% auto; height: 480px; z-index: -1;
  background:
    radial-gradient(closest-side, rgba(66, 133, 244, .16), transparent),
    radial-gradient(closest-side, rgba(52, 168, 83, .14), transparent);
  background-position: 15% 30%, 85% 10%;
  background-size: 46% 100%, 40% 100%;
  background-repeat: no-repeat;
  filter: blur(4px);
}
.hero h1 { font-size: 2.9rem; line-height: 1.15; margin: 0 auto 22px; font-weight: 700; letter-spacing: -.01em; max-width: 980px; }
.hero h1 .accent { color: var(--blue); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 .accent {
    background: linear-gradient(90deg, var(--blue), var(--green));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.hero .sub { color: var(--muted); font-size: 1.15rem; margin: 0 auto; max-width: 720px; }
.hero .updated { color: var(--muted); font-size: .9rem; margin: 14px 0 0; }
/* The way back to the comparison index (issue #203), the one link to it
   besides the sitemap: the header and footers do not list it. */
.crumbs { margin: 0 0 14px; font-size: .95rem; }
.crumbs a { color: var(--blue); text-decoration: none; font-weight: 500; }
.crumbs a:hover { text-decoration: underline; }
.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 32px auto 0; padding: 0; max-width: 900px; }
.topics a {
  display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .92rem; font-weight: 500; text-decoration: none; color: var(--ink); background: #fff;
  transition: color .2s ease-out, border-color .2s ease-out, background .2s ease-out;
}
.topics a:hover { color: var(--blue); border-color: var(--blue); background: rgba(66, 133, 244, .08); }

/* ── Article ──────────────────────────────────────────── */
/* Two widths: prose in the API page's 880px column, the verdict cards
   and the score table in a wider band. Fourteen columns of scores at
   880px would squeeze every header into four lines; the band's heading
   and lead stay in the prose column so the left edge of the text does
   not jump between sections. */
.doc, .wide .col { max-width: 880px; margin: 0 auto; }
.wide { max-width: 1200px; margin: 0 auto; }
.doc h2, .wide h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 72px 0 12px; scroll-margin-top: 16px; }
.doc h3 { font-size: 1.15rem; font-weight: 600; margin: 32px 0 8px; scroll-margin-top: 16px; }
.doc p, .doc li, .wide .col p { color: var(--muted); font-size: 1.02rem; max-width: 72ch; }
.doc p, .wide .col p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 0 0 6px; }
.doc strong, .wide strong { color: var(--ink); font-weight: 600; }
.doc a, .wide .col a { color: var(--blue); text-decoration: none; }
.doc a:hover, .wide .col a:hover { text-decoration: underline; }
.lead-in { padding-top: 40px; }
.lead-in p { font-size: 1.1rem; color: var(--ink); }

/* Quick verdict: one card per job, so a reader with a budget and a task
   finds their line without reading the reviews. Ten cards, so only
   column counts that divide ten: an auto-fill grid put four in a row and
   left two stranded under the last one. An article with another number of
   picks overrides the 1100px count in its own <style>. */
.picks { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .picks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .picks { grid-template-columns: repeat(5, 1fr); } }
.pick { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; background: #fff; box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.pick .for { margin: 0 0 4px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--blue); }
.pick h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; }
.pick h3 a { color: var(--ink); text-decoration: none; }
.pick h3 a:hover { color: var(--blue); }
.pick p { margin: 0 0 12px; color: var(--muted); font-size: .98rem; }
.pick .budget { margin: auto 0 0; font-size: .88rem; color: var(--ink); }

/* The score table. Rows are platforms, ranked by average; columns are
   the metrics, then the two totals. The tint is a single-hue
   ramp (darker = better) and only repeats the number printed in the
   cell, so nothing depends on telling colours apart. The platform
   column sticks on a phone: scrolled to the last metric, a row of bare
   numbers would no longer say whose they are. */
.table-wrap { overflow-x: auto; margin: 24px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.compare { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .95rem; }
.compare th, .compare td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: .78rem; font-weight: 600; line-height: 1.25; color: var(--ink); background: var(--bg-alt); vertical-align: bottom; min-width: 74px; }
.compare th[scope="row"], .compare thead th:first-child {
  position: sticky; left: 0; z-index: 1; text-align: left; min-width: 128px;
  background: #fff; border-right: 1px solid var(--line); font-weight: 600; white-space: nowrap;
}
.compare thead th:first-child { background: var(--bg-alt); }
.compare th[scope="row"] a { color: var(--ink); text-decoration: none; }
.compare th[scope="row"] a:hover { color: var(--blue); }
.compare .rank { display: inline-block; min-width: 1.4em; color: var(--muted); font-weight: 500; }
.compare td { color: var(--ink); font-variant-numeric: tabular-nums; }
.b1 { background: rgba(66, 133, 244, .03); }
.b2 { background: rgba(66, 133, 244, .11); }
.b3 { background: rgba(66, 133, 244, .21); }
.b4 { background: rgba(66, 133, 244, .34); }
.compare .avg, .compare .med, .compare thead .total { font-weight: 700; background: #fff; }
.compare .avg, .compare thead .total.first { border-left: 2px solid var(--line); }
.compare tbody tr:hover th[scope="row"] { background: var(--bg-alt); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; padding: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); display: inline-block; }

/* Platform reviews. */
.review { border-top: 1px solid var(--line); padding: 8px 0 12px; }
.review h3 { display: flex; align-items: baseline; gap: 10px; font-size: 1.35rem; margin: 28px 0 4px; }
.review h3 .num { color: var(--blue); font-weight: 700; }
.review .best { margin: 0 0 14px; font-size: .95rem; color: var(--ink); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.pros-cons h4 { margin: 4px 0 6px; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; }
.pros-cons .pros h4 { color: var(--green); }
.pros-cons .cons h4 { color: var(--red); }
.review .fit { background: var(--bg-alt); border-radius: var(--radius-sm); padding: 12px 16px; }
.review .fit p { margin: 0 0 4px; font-size: .98rem; }
.review .fit p:last-child { margin: 0; }

/* FAQ: the FAQ page's native <details>, so the answers work without a
   script and Ctrl+F still finds them. */
.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 18px;
  padding: 18px 4px; font-size: 1.08rem; font-weight: 600; line-height: 1.4;
  border-radius: var(--radius-sm); transition: color .2s ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font: inherit; }
.faq summary:hover { color: var(--blue); }
.faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.faq summary::after {
  content: ''; flex: none; width: 10px; height: 10px; margin: 6px 6px 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease-out;
}
.faq[open] summary::after { transform: rotate(225deg); margin-top: 11px; }
.faq[open] summary { color: var(--blue); }
.faq .answer { padding: 0 44px 20px 4px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ── Feedback ─────────────────────────────────────────── */
/* The end of every article (issue #204), where the first one had a call to
   try a product: a reader who just went through the table is the person
   most likely to know what it is missing or got wrong. One card in the
   prose width, on the light grey of the review verdicts so it reads as part
   of the page rather than an advert. The three kinds are a row of pills over
   one form: a reader picks what they came to say before seeing any field,
   and only that kind's fields are shown (js/comparison-feedback.js). The
   fields are the suggestion form's (app/comparison/suggest/), so the two
   ways to tell us something look like one product. */
.feedback { padding: 72px 0 0; }
.feedback .panel { max-width: 880px; margin: 0 auto; padding: 32px 36px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.feedback h2 { font-size: 1.8rem; margin: 0 0 8px; letter-spacing: -.01em; }
.feedback .lead { color: var(--muted); margin: 0 0 24px; max-width: 72ch; }
.feedback fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.feedback legend { padding: 0; font-weight: 500; margin: 0 0 10px; }

/* The radio buttons themselves stay in the page, transparent over their
   pill, so the keyboard, a screen reader and a click all work the native
   way; only the pill is drawn. */
.feedback .kinds { margin: 0 0 22px; }
.kinds .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kinds label { position: relative; display: inline-flex; }
.kinds input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kinds span {
  display: inline-block; padding: 9px 18px; border: 1px solid var(--field); border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 500; font-size: .95rem;
  transition: color .2s ease-out, border-color .2s ease-out, background .2s ease-out;
}
.kinds input:hover + span { color: var(--blue); border-color: var(--blue); }
.kinds input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.kinds input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Two columns of short fields; a note, a "what is wrong" and a "how to
   check it" take the whole row. `[hidden]` has to be restated: the grid's
   display wins over the attribute's. */
.feedback .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0 0 14px; }
.feedback .fields[hidden] { display: none; }
.feedback .field { margin: 0 0 14px; min-width: 0; }
.feedback .fields .field { margin: 0; }
.feedback .field.full { grid-column: 1 / -1; }
.feedback label.top { display: block; font-weight: 500; margin: 0 0 6px; }
.feedback .opt { color: var(--muted); font-weight: 400; }
.feedback input[type="text"], .feedback input[type="email"], .feedback select, .feedback textarea {
  width: 100%; min-width: 0; padding: 10px 12px; font: inherit; font-size: .98rem; color: var(--ink);
  background: #fff; border: 1px solid var(--field); border-radius: var(--radius-sm);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.feedback textarea { min-height: 96px; resize: vertical; }
.feedback input:focus, .feedback select:focus, .feedback textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(66, 133, 244, .18); }
.feedback select:invalid { color: var(--muted); }
.feedback input::placeholder, .feedback textarea::placeholder { color: #9AA0A6; }

/* Out of sight and out of the tab order, not display:none: some bots skip
   fields they can tell are hidden. A person never reaches it. */
.feedback .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.feedback .send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 0; }
.feedback .send .note { color: var(--muted); font-size: .92rem; margin: 0; }
.feedback .btn { font-family: inherit; }
.feedback .btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.feedback .form-error { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(234, 67, 53, .08); color: #B3261E; border: 1px solid rgba(234, 67, 53, .3); }
.feedback .form-error[hidden] { display: none; }

.feedback .done { text-align: center; padding: 8px 0; }
.feedback .done[hidden] { display: none; }
.feedback .done h3 { margin: 0 0 8px; font-size: 1.3rem; }
.feedback .done p { color: var(--muted); margin: 0 0 20px; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}
@media (max-width: 760px) {
  .hero h1 { font-size: 2.1rem; }
  .doc h2, .wide h2 { font-size: 1.4rem; margin-top: 56px; }
  .pros-cons { grid-template-columns: 1fr; }
  .faq .answer { padding: 0 2px 18px 2px; }
  .feedback { padding-top: 56px; }
  .feedback .panel { padding: 24px 16px; }
  .feedback h2 { font-size: 1.5rem; }
  .feedback .fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .hero h1 { font-size: 1.75rem; }
  .compare th[scope="row"], .compare thead th:first-child { min-width: 0; font-size: .88rem; }
  .compare .rank { min-width: 1.2em; }
}