/* How we compare [H241]: the one stylesheet for the comparison dialog, its How we checked list and the button that
   opens them, loaded by the home page (site/index.html) and by the reader's start page (functions/app/reader/index.js,
   through the shell). One file, so the two cannot drift apart again -- they had: his defect, 2026-10-03, "How we
   compare off the reader landing page has some UI spacing and font issues". The copy in page.css lacked the home
   page's spacing tokens (its panel lost all padding), and the app's base type and its heading and button rules
   reached into the dialog.

   So the dialog sets its own ground rather than inheriting either page's: its face, size and line height; the
   spacing tokens its rules use; its headings, paragraphs and buttons. Colours stay the page's tokens, which both
   pages define alike, light and dark. The dialog itself is written by scripts/build-compare.py; /compare.js opens it.
   Checked by acceptance/www-home/compare-match-browser.mjs, part for part against the home page. */
.cmp{ --s1:8px; --s2:16px; --s3:28px; --s4:48px;
  font-family:"EB Garamond",Georgia,serif; font-optical-sizing:auto; font-size:1.25rem; line-height:1.64; font-weight:400 }
/* The ground under the dialog's own rules: at no more weight than an element rule (:where), so each named part's
   rule below still sets its own margins, as on the home page. */
:where(.cmp) h2{ font-weight:500; line-height:1.18; letter-spacing:-.002em; text-wrap:balance; color:var(--ink) }
:where(.cmp) p{ margin:0 0 var(--s2); color:var(--ink-2) }
:where(.cmp) p:last-child{ margin-bottom:0 }
:where(.cmp) button{ margin:0; align-self:auto; filter:none }
.cmp .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
/* How we compare [H241], after shadcn.io's about-competitor-table: a native modal dialog, the rows grouped,
   the products' plain names heading the columns, Scrollwork's column marked by a faint wash of the accent.
   The table scrolls inside its own frame on a phone; the page never does. Written by scripts/build-compare.py. */
/* How we compare's call to action [H241, his, 2026-10-03: "Needs to be a more prominent button, CTA"; "larger button
   ok. but yeah, i don't want a big ugly squarish red button cta"; "adorn it a little with some theme matching
   iconagraphy"]: larger than the small controls, outlined, never filled, its corners rounded, a balance scale in gold. */
a.compare-open{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:9px 20px 9px 16px;
  border:1px solid var(--gold-line); border-radius:10px; background:transparent; color:var(--ink);
  font-size:1rem; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap }
a.compare-open .cmp-cta-icon{ flex:none; color:var(--gold-ink) }
a.compare-open:hover{ border-color:var(--gold-ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-line) 22%,transparent) }
a.compare-open:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.cmp{ width:min(64rem, calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 48px); padding:0; border:1px solid var(--line);
  border-radius:14px; background:var(--paper); color:var(--ink); box-shadow:0 24px 60px -30px rgba(23,30,46,.55) }
.cmp::backdrop{ background:rgb(12 14 20 / .6) }
.cmp:target{ display:block; position:static; margin:var(--s3) auto }
.cmp-panel{ padding:var(--s3) var(--s4) }
.cmp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px }
.cmp-head h2{ margin:0 0 4px; font-size:clamp(1.375rem,2.4vw,1.75rem) }
.cmp-sub{ margin:0; font-size:0.9375rem; color:var(--ink-2) }
.cmp-close{ flex:none; padding:5px 12px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink);
  font:inherit; font-size:0.875rem; cursor:pointer; min-height:28px }
.cmp-close:hover{ border-color:var(--accent); color:var(--accent) }
.cmp-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.cmp-actions{ flex:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px }
.cmp-checked{ flex:none; padding:5px 12px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink);
  font:inherit; font-size:0.875rem; cursor:pointer; min-height:28px }
.cmp-checked:hover{ border-color:var(--accent); color:var(--accent) }
.cmp-checked:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.cmp-lead{ margin:var(--s2) 0 var(--s3); font-size:1rem; line-height:1.55 }
.cmp-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:10px }
.cmp-scroll:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.cmp-table{ width:100%; min-width:44rem; border-collapse:collapse; font-size:0.9375rem; line-height:1.45 }
.cmp-table th, .cmp-table td{ padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-2) }
.cmp-table thead th{ font-size:0.875rem; font-weight:600; color:var(--ink); background:var(--paper-2); border-bottom:1px solid var(--line) }
.cmp-table th[scope=row]{ width:26%; font-weight:600; color:var(--ink) }
.cmp-table .cmp-us{ background:color-mix(in srgb,var(--accent) 6%,transparent) }
.cmp-table thead .cmp-us{ color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--paper-2)) }
.cmp-group th{ padding-top:14px; font-size:0.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); background:var(--paper) }
.cmp-feature{ display:block }
/* How we checked [H241, his, 2026-10-03]: every feature's sources in a list of their own, off the table's rows. */
.cmp-sources{ width:min(46rem, calc(100vw - 32px)) }
.cmp-check-list{ margin:var(--s2) 0 0; padding:0; list-style:none }
.cmp-check-row{ padding:12px 0; border-top:1px solid var(--line-2) }
.cmp-check-row h3{ margin:0 0 6px; font-size:1rem; font-weight:600; color:var(--ink) }
.cmp-check-row ul{ margin:0; padding:0; list-style:none; display:grid; gap:4px; font-size:0.875rem; line-height:1.45; color:var(--ink-2) }
.cmp-check-row a{ color:var(--ink); text-underline-offset:2px }
.cmp-for{ display:inline-block; min-width:9.5em; color:var(--ink-2) }
.cmp-read{ white-space:nowrap }
@media (max-width:560px){ .cmp-for{ display:block; min-width:0 } }
.cmp-mark{ display:inline-block; min-width:1.5em; margin-right:6px; font-weight:700; color:var(--ink) }
.cmp-yes{ color:var(--accent) }
.cmp-no{ color:var(--ink-2) }
.cmp-partial{ font-size:0.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink) }
/* Coming soon [H241, his]: Scrollwork's alone, an outlined tag in the accent, not a filled block [H170]. */
.cmp-coming{ font-size:0.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  border:1px solid currentColor; border-radius:999px; padding:0 7px; line-height:1.6 }
/* A cell their own pages did not settle: left unmarked, a dash, and said so to a screen reader. */
.cmp-unconfirmed{ color:var(--ink-2); font-weight:400 }
.cmp-quote{ display:block; margin-top:2px; font-style:italic; color:var(--ink-2) }
.cmp-note{ color:var(--ink-2) }
.cmp-foot{ margin:var(--s3) 0 0; font-size:0.875rem; color:var(--ink-2) }
@media (max-width:760px){ .cmp-panel{ padding:var(--s3) var(--gutter) } }