/* Single stylesheet, no JS anywhere on the site.
   Everything here is sized in rem and uses system fonts, so there is no
   webfont request and no layout shift to fix later. */

:root {
  --bg: #ffffff;
  --surface: #f7f8fa;
  --border: #e2e6ea;
  --text: #17202a;
  --muted: #5b6672;
  --accent: #0b7285;
  --accent-soft: #e3f2f5;
  --yes: #0f7a44;
  --no: #a33a35;
  --warn-bg: #fff8e6;
  --warn-border: #e8cf8f;
  --good-bg: #eefaf3;
  --good-border: #a8ddc0;
  --radius: 8px;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1419;
    --surface: #161c23;
    --border: #262f3a;
    --text: #e6eaef;
    --muted: #97a3b0;
    --accent: #4dc4d9;
    --accent-soft: #10303a;
    --yes: #4ec98a;
    --no: #e08a85;
    --warn-bg: #2a2415;
    --warn-border: #5c4d21;
    --good-bg: #12291e;
    --good-border: #2c5c42;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
}

.wrap { max-width: 78rem; margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: #fff; padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- chrome ---------- */

.site-head {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; padding-top: .85rem; padding-bottom: .85rem;
}
.brand {
  font-weight: 700; font-size: 1.05rem; color: var(--text);
  text-decoration: none; letter-spacing: -0.01em;
}
.site-head nav { display: flex; gap: 1.25rem; margin-left: auto; font-size: .93rem; }

.site-foot {
  margin-top: 4rem; border-top: 1px solid var(--border);
  background: var(--surface); padding: 2rem 0;
  font-size: .87rem; color: var(--muted);
}
.site-foot .disclosure { max-width: var(--measure); }
.site-foot .meta { margin-bottom: 0; }

main { padding: 2.5rem 0 1rem; }

/* ---------- typography ---------- */

h1 {
  font-size: clamp(1.85rem, 4vw, 2.6rem); line-height: 1.15;
  letter-spacing: -0.02em; margin: 0 0 .75rem; max-width: 22ch;
}
h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.25;
  letter-spacing: -0.01em; margin: 2.75rem 0 .85rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--border);
}
h3 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; }

p, li { max-width: var(--measure); }
p { margin: 0 0 1rem; }

.lede { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }

.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1.25rem; }
.crumbs .sep { margin: 0 .5rem; opacity: .5; }
.crumbs [aria-current] { color: var(--text); }

/* ---------- cards & callouts ---------- */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
}

ul.cards {
  list-style: none; padding: 0; margin: 1.25rem 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
ul.cards li { max-width: none; }
.tool-card h3 { margin-top: 0; }
.tool-card .tagline { color: var(--muted); font-size: .93rem; }
.tool-card .best-for { font-size: .88rem; margin-bottom: 0; }

.callouts, .two-up {
  display: grid; gap: 1rem; margin: 1.25rem 0;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.callouts > *, .two-up > * { min-width: 0; }

/* Three-way comparisons. A lower minimum than .two-up so all three columns
   sit side by side on a laptop instead of orphaning the third onto its own row. */
.three-up {
  display: grid; gap: 1rem; margin: 1.25rem 0;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}
.three-up > * { min-width: 0; }

.callout {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.15rem 1.25rem; background: var(--surface);
}
.callout h3 { margin-top: 0; }
.callout p { max-width: none; }
.callout.good { background: var(--good-bg); border-color: var(--good-border); }
.callout.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.warn-inline { font-size: .9rem; color: var(--muted); margin-bottom: 0; }

/* ---------- verification states ---------- */

.unverified {
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--radius); padding: .75rem .9rem;
  font-size: .88rem; max-width: none;
}
.verified { font-size: .82rem; color: var(--muted); margin-bottom: 0; }

.btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: .55rem 1rem; border-radius: var(--radius);
  text-decoration: none; font-size: .9rem; font-weight: 600;
}
.btn:hover { opacity: .9; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; margin: 1.25rem 0; }

table { border-collapse: collapse; width: 100%; font-size: .92rem; }

.matrix th, .matrix td, .tiers th, .tiers td {
  border: 1px solid var(--border); padding: .6rem .75rem; text-align: left;
  vertical-align: top;
}
.matrix thead th, .tiers thead th {
  background: var(--surface); font-size: .85rem; letter-spacing: .01em;
  position: sticky; top: 0;
}
.matrix tbody th { background: var(--surface); font-weight: 600; min-width: 15rem; }
.matrix td { text-align: center; width: 1%; white-space: nowrap; }
.matrix tr.differs { background: var(--accent-soft); }
.matrix tr.differs tbody th { background: var(--accent-soft); }

.f-label { display: block; }
.f-desc { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }

.yes { color: var(--yes); font-weight: 600; }
.no { color: var(--no); }
.unknown { color: var(--muted); }

.legend { font-size: .82rem; color: var(--muted); max-width: none; }

.tiers { margin-top: .5rem; }
.tiers td { text-align: left; }

/* ---------- lists ---------- */

ul.links { list-style: none; padding: 0; }
ul.links li { padding: .3rem 0; }
ul.two-col { columns: 2; column-gap: 2.5rem; }
@media (max-width: 40rem) { ul.two-col { columns: 1; } }

ul.ticks, ul.crosses { list-style: none; padding: 0; font-size: .93rem; }
ul.ticks li::before { content: "✓ "; color: var(--yes); font-weight: 700; }
ul.crosses li::before { content: "✕ "; color: var(--no); font-weight: 700; }

ul.diffs { padding-left: 1.15rem; }
ul.diffs li { margin-bottom: .4rem; }

.shared, .unknown-note { font-size: .9rem; color: var(--muted); }

/* ---------- figures ---------- */

.shot { margin: 1.5rem 0; }
.shot img {
  max-width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.shot figcaption {
  font-size: .85rem; color: var(--muted); margin-top: .5rem;
}
.stamp { display: block; font-size: .78rem; opacity: .85; }

.shot-missing {
  font-size: .87rem; color: var(--muted);
  border-style: dashed; margin: 1.5rem 0;
}

/* ---------- FAQ (details/summary, no JS) ---------- */

.faqs { margin-top: 1rem; }
.faq {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: .6rem; background: var(--surface);
}
.faq summary {
  cursor: pointer; padding: .85rem 1rem; list-style: none;
  display: flex; align-items: center; gap: .6rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 1.2rem; }
.faq[open] summary::after { content: "\2212"; }
.faq summary h3 { margin: 0; font-size: 1rem; display: inline; }
.faq .answer { padding: 0 1rem 1rem; }
.faq .answer p { margin-bottom: 0; }

.alt-entry {
  border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 1.5rem;
}
.alt-entry h3 { margin-top: 0; font-size: 1.2rem; }
.alt-entry .tagline { color: var(--muted); }

@media print {
  .site-head, .site-foot, .skip { display: none; }
}