/* ============================================================
   Versus ("/vs/") pages — additive styling on top of
   /styles/refresh.css. Reuses refresh.css tokens (--text, --muted,
   --accent, --panel, --panel-border, --radius-card, --shadow,
   --ui-font, --success/--warning/--danger, ...) and the existing
   .sbb-legal shell/typography classes, same as blog.css does — see
   VERSUS-PAGES-SPEC.md section 4.

   Deliberately a SEPARATE file from blog.css rather than an extension
   of it, and every class below is namespaced `.sbb-versus-*` rather
   than reusing `.sbb-blog-*` names. Two reasons: (1) it keeps this
   section additive-only with zero chance a future blog.css edit
   changes vs-page rendering or vice versa, and (2) it follows the same
   "reproduce shared markup/styling directly per entry-point instead of
   pulling in a cross-cutting shared component" rule blog.css itself
   documents (see the blog-post header comment there) — extended here
   to mean a dedicated stylesheet too, not just dedicated markup.
   Only loaded on /vs/ and /vs/[slug]/ — no other page references this
   file.
   ============================================================ */

/* ---- Site header ----
   The old per-page versus-section header rules that lived here were
   deleted per HEADER-FOOTER-REDESIGN-SPEC.md (Aug 2026): the header is
   now rendered once, inline, in src/layouts/Layout.astro, and styled by
   public/styles/site-nav.css's namespaced site-header rules — not
   reproduced per vs entry-point page anymore. See that spec's §4.1. */

/* ---- Breadcrumb ---- */
.sbb-versus-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}
.sbb-versus-breadcrumb a { color: var(--muted); text-decoration: none; }
.sbb-versus-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.sbb-versus-breadcrumb__sep { opacity: 0.5; }
.sbb-versus-breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---- Page shell + H1 ---- */
.sbb-versus-page__shell { max-width: 760px; margin-inline: auto; }
.sbb-legal.sbb-versus-page h1 {
  font-size: clamp(28px, 4.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ---- Block 1: verdict standfirst + "Last checked" meta line ---- */
.sbb-versus-standfirst {
  margin-top: 14px;
  max-width: 66ch;
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
}
.sbb-versus-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
}
.sbb-versus-meta-sep { opacity: 0.6; }
.sbb-versus-meta strong { color: var(--text); font-weight: 700; }

/* ---- Block 2: comparison table (structured frontmatter, not raw
   markdown/HTML table markup) — same scroll-shadow + panel styling
   the Toby blog post's table uses (.sbb-table-scroll /
   .sbb-blog-post__body table in blog.css), reproduced here under
   vs-specific class names so this file stays fully independent of
   blog.css. ---- */
.sbb-versus-table-scroll {
  margin-top: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  background-image:
    linear-gradient(to right, var(--panel) 0%, transparent 24px),
    linear-gradient(to left, var(--panel) 0%, transparent 24px),
    linear-gradient(to right, rgba(29, 29, 31, 0.16), transparent 10px),
    linear-gradient(to left, rgba(29, 29, 31, 0.16), transparent 10px);
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-position: left top, right top, left top, right top;
  background-attachment: local, local, scroll, scroll;
}
.sbb-versus-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.sbb-versus-table th,
.sbb-versus-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
  vertical-align: top;
}
.sbb-versus-table thead th {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
.sbb-versus-table thead th a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
}
.sbb-versus-table thead th a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sbb-versus-table tbody th[scope="row"] {
  color: var(--text);
  font-weight: 700;
  white-space: normal;
  width: 30%;
  min-width: 150px;
  background: transparent;
}
.sbb-versus-table tbody tr:last-child th,
.sbb-versus-table tbody tr:last-child td { border-bottom: 0; }
.sbb-versus-table td { color: var(--text); }
.sbb-versus-table__us-col { color: var(--text); }

/* Below 640px the side-scrolling table (fine on a blog post read
   top-to-bottom) becomes the actual comparison-decision UI, and a
   horizontally-clipped column with no visible scroll affordance is a
   real readability bug there — confirmed live on the sibling Toby
   blog-post table (same min-width-table-in-a-scroller pattern): the
   "us" column gets cut off mid-word with nothing on screen hinting
   there's more to scroll to. Vs-pages get a dedicated mobile layout
   instead of inheriting that: each row becomes its own labeled card,
   competitor value stacked above ours, no horizontal scroll at all. */
@media (max-width: 640px) {
  .sbb-versus-table-scroll {
    overflow-x: visible;
    border: none;
    background: none;
    background-image: none;
    box-shadow: none;
  }
  .sbb-versus-table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .sbb-versus-table thead { display: none; }
  .sbb-versus-table tbody { display: block; }
  .sbb-versus-table tr {
    display: block;
    margin-bottom: 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: var(--shadow-soft);
  }
  .sbb-versus-table tbody tr:last-child { margin-bottom: 0; }
  .sbb-versus-table tbody th[scope="row"] {
    /* Must match the base rule's `tbody th[scope="row"]` specificity
       (0-2-2) exactly — plain `th[scope="row"]` (0-2-1) loses the
       cascade to that base `white-space: nowrap` rule regardless of
       media-query order, which silently kept every row label on one
       line on mobile and pushed the page into horizontal scroll on
       any label long enough to overflow its card. */
    display: block;
    width: auto;
    min-width: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 8px;
    font-size: 13px;
    white-space: normal;
  }
  .sbb-versus-table td {
    display: block;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
    font-size: 14px;
    line-height: 1.5;
  }
  .sbb-versus-table td + td { margin-top: 10px; }
  .sbb-versus-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .sbb-versus-table__us-col {
    padding-top: 10px;
    border-top: 1px dashed var(--panel-border);
  }
}

/* ---- Blocks 3 & 4: "who each tool is for" + "why the row is faster"
   prose, rendered from the markdown body between the table and the
   migration callout. Same typography rules as .sbb-blog-post__body,
   reproduced under a vs-specific class. ---- */
.sbb-versus-body {
  margin-top: 28px;
  max-width: 66ch;
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
}
.sbb-versus-body > * + * { margin-top: 1.1em; }
.sbb-versus-body p,
.sbb-versus-body li { text-wrap: pretty; color: var(--text); }
.sbb-legal .sbb-versus-body p { margin-top: 1.1em; line-height: 1.75; }
.sbb-versus-body h2 {
  margin-top: 1.8em;
  scroll-margin-top: 76px; /* clears the sticky site header (site-nav.css) */
  font-family: var(--ui-font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
  text-wrap: balance;
}
.sbb-versus-body h3 {
  margin-top: 1.5em;
  scroll-margin-top: 76px; /* clears the sticky site header (site-nav.css) */
  font-family: var(--ui-font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text);
  text-wrap: balance;
}
.sbb-versus-body strong { color: var(--text); font-weight: 700; }
.sbb-versus-body ul,
.sbb-versus-body ol { padding-left: 1.3em; display: grid; gap: 0.5em; }
.sbb-versus-body ul { list-style: disc; }
.sbb-versus-body ol { list-style: decimal; }
.sbb-versus-body a { color: var(--accent); font-weight: 600; text-decoration: none; }
.sbb-versus-body a:hover { text-decoration: underline; }
.sbb-versus-body blockquote {
  margin: 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent-strong);
  color: var(--muted);
  font-style: italic;
}
/* This file's own table styling only targets the structured
   `.sbb-versus-table` component (above) — a stray markdown table inside
   vs-page body prose (there shouldn't be one; the centerpiece table is
   frontmatter-driven) still gets a readable baseline via the global
   rehypeWrapTables wrapper + these element rules, so it never renders
   as an unstyled default browser table. */
.sbb-versus-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sbb-versus-body th,
.sbb-versus-body td { padding: 10px 14px; border-bottom: 1px solid var(--panel-border); text-align: left; vertical-align: top; }
.sbb-versus-body thead th { background: var(--accent-soft); color: var(--text); font-weight: 700; }

/* ---- Block 5: migration callout (conditional — only rendered when
   frontmatter `migration` is present) ---- */
.sbb-versus-migration {
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid var(--success-border);
  border-radius: var(--radius-card);
  background: var(--success-bg);
  box-shadow: var(--shadow-soft);
}
.sbb-versus-migration h2 {
  margin: 0 0 10px;
  font-family: var(--ui-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--success);
}
.sbb-versus-migration dl {
  margin: 0;
  display: grid;
  gap: 10px;
}
.sbb-versus-migration dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--success);
}
.sbb-versus-migration dd {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
.sbb-versus-migration dd.sbb-versus-migration__loss {
  color: var(--muted);
  font-style: italic;
}

/* ---- Block 6: FAQ ---- */
.sbb-versus-faq {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--panel-border);
}
.sbb-versus-faq h2 {
  margin: 0 0 14px;
  font-family: var(--ui-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.sbb-versus-faq__item + .sbb-versus-faq__item { margin-top: 18px; }
.sbb-versus-faq__q {
  margin: 0 0 6px;
  font-family: var(--ui-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.sbb-versus-faq__a {
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ---- Block 7: cross-links + CTA ---- */
.sbb-versus-links {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--panel-border);
}
.sbb-versus-links h2 {
  margin: 0 0 12px;
  font-family: var(--ui-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.sbb-versus-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.sbb-versus-links a { color: var(--accent); font-weight: 600; font-size: 15px; text-decoration: none; }
.sbb-versus-links a:hover { text-decoration: underline; }

.sbb-versus-cta {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  box-shadow: var(--shadow);
}
.sbb-versus-cta h2 {
  margin: 0 0 8px;
  font-family: var(--ui-font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.sbb-versus-cta p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 60ch;
}
.sbb-versus-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.sbb-legal .sbb-versus-cta__button,
.sbb-legal .sbb-versus-cta__button:hover { color: #fff; }
.sbb-versus-cta__button:hover {
  transform: translateY(-0.5px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

/* ---- "Last checked" footer note (visible, separate from the top meta
   line — spec calls for this as its own footer element) ---- */
.sbb-versus-checked {
  margin-top: 24px;
  color: var(--muted);
  font-size: 13px;
}

/* ---- /vs/ index page ---- */
.sbb-versus-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.sbb-versus-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  text-decoration: none;
  color: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 180ms ease;
}
.sbb-versus-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent-strong);
}
.sbb-versus-card__competitor {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0 10px;
  min-height: 24px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sbb-versus-card h2 {
  margin: 0;
  font-family: var(--ui-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}
.sbb-versus-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .sbb-versus-index__grid { grid-template-columns: 1fr; }
}

/* ---- Feature matrix (.sbb-fm) ----
   Three-tool feature table rendered from src/data/feature-matrix/*.json by
   src/data/feature-matrix/render.mjs. Same markup on the hands-on review
   post (blog.css) and /vs/bookmark-sidebar/ (versus.css); the rules live in
   both files because the two stylesheets are kept independent.
   Wide table inside its own scroller, so the page itself never scrolls
   sideways. The feature column is sticky, so a row stays readable while the
   value columns scroll on a phone. Sticky cells need opaque backgrounds, so
   they use solid colours instead of the translucent --panel / --accent-soft
   tokens. */
.sbb-fm-scroll {
  margin: 20px 0 8px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.sbb-fm-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sbb-fm {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.45;
}
.sbb-fm__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sbb-fm th,
.sbb-fm td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
  vertical-align: top;
  color: var(--text);
}
.sbb-fm thead th {
  background: #edf4fd;
  font-weight: 700;
  white-space: normal;
  width: 26%;
}
.sbb-fm thead th:first-child { width: 22%; }
.sbb-fm thead th:first-child,
.sbb-fm tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--panel-border);
}
.sbb-fm tbody th[scope="row"] {
  background: #fff;
  font-weight: 600;
  white-space: normal;
}
.sbb-fm .sbb-fm__group th {
  padding: 14px 12px 6px;
  background: #f6f6f8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sbb-fm .sbb-fm__group th span { position: sticky; left: 12px; }
.sbb-fm tbody:last-child tr:last-child th,
.sbb-fm tbody:last-child tr:last-child td { border-bottom: 0; }
.sbb-fm__v {
  display: inline-block;
  margin: 0 6px 2px 0;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.sbb-fm__v--yes { background: #e3f4e8; color: #166534; }
.sbb-fm__v--no { background: #f0f0f2; color: #55555a; }
.sbb-fm__v--partial { background: #fdf1d8; color: #8a4b05; }
.sbb-fm__v--premium,
.sbb-fm__v--pro { background: #ede7fb; color: #5b2ab5; }
.sbb-fm__v--unverified { background: #fff; color: #55555a; border: 1px dashed #b5b5bb; }
.sbb-fm__note { display: block; color: var(--text); }
.sbb-fm__v + .sbb-fm__note { margin-top: 2px; color: var(--muted); font-size: 13px; }
.sbb-fm-legend { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 640px) {
  .sbb-fm { min-width: 640px; font-size: 13px; }
  .sbb-fm th,
  .sbb-fm td { padding: 9px 10px; }
  .sbb-fm thead th:first-child,
  .sbb-fm tbody th[scope="row"] { width: 118px; min-width: 118px; }
}
.sbb-versus-matrix { margin-top: 32px; }
.sbb-versus-matrix h2,
.sbb-versus-matrix__measured {
  margin-top: 0;
  scroll-margin-top: 76px;
  font-family: var(--ui-font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}
.sbb-versus-matrix__measured { margin-top: 40px; }
.sbb-versus-matrix .sbb-fm-legend { margin-top: 8px; }