/* ============================================================
   Blog — additive styling on top of /styles/refresh.css.
   Reuses refresh.css tokens (--text, --muted, --accent, --panel,
   --panel-border, --radius-card, --shadow, --ui-font, ...) and the
   existing .sbb-legal shell/typography classes (see
   BLOG-CONTENT-STRATEGY-SPEC.md section 6.3) so blog pages look
   native to the rest of the site instead of bolted on. Only loaded
   on /blog/ and /blog/[slug]/ — no other page references this file.
   ============================================================ */

.sbb-blog__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.sbb-blog__back:hover { text-decoration: underline; }
.sbb-blog__back--bottom { margin: 28px 0 0; }

/* ---- Site header ----
   The old per-page blog-post header rules that lived here (design-review
   P0 item 4) 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 blog entry-point page anymore. See that
   spec's §4.1 for why the old "reproduce per page" rule (driven by the
   chunk-graph incident this file used to document) no longer applies. */

/* ---- Post metadata line (design-review P1 item 7) ----
   Replaces the old chip row (author/date/updated/reading-time as
   accent-bordered pills) with one quiet, muted text line, now that the
   breadcrumb no longer repeats the title and the pillar eyebrow + "Back
   to the blog" link are gone (covered by the header's logo/Blog link). */
.sbb-blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
}
.sbb-blog-post__meta-sep { opacity: 0.6; }

/* ---- Index grid ---- */
.sbb-blog-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.sbb-blog-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-blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent-strong);
}

.sbb-blog-card__pillar {
  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-blog-card h2 {
  margin: 0;
  font-family: var(--ui-font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}

.sbb-blog-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.sbb-blog-card__date {
  margin-top: auto;
  padding-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Post shell ----
   Design-review P0 item 5: the shell had a max-width but no auto
   inline margins, so on any viewport wider than ~800px it stayed pinned
   to the left edge with the rest of the page sitting empty. */
.sbb-blog-post__shell { max-width: 760px; margin-inline: auto; }

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

.sbb-blog__pillar-link { color: inherit; text-decoration: none; }
.sbb-blog__pillar-link:hover { text-decoration: underline; }

/* ---- Article H1 (design-review P1 item 6) ----
   `.sbb-legal h1` is tuned for the homepage-style hero display size
   (clamp 36-54px, line-height 0.96, letter-spacing -0.055em) — fine for
   a one-line page title like "Terms" or "Changelog", but multi-line
   article headlines nearly collided. Two classes (.sbb-legal.sbb-blog-post)
   beats the single-class `.sbb-legal h1` on specificity. */
.sbb-legal.sbb-blog-post h1 {
  font-size: clamp(28px, 4.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ---- Post body typography (rendered markdown) ---- */
.sbb-blog-post__body {
  margin-top: 28px;
  /* 66ch reads closer to ~75-80 chars/line at this font-size than 70ch's
     ~90 chars/line did (design-review P0 item 5). */
  max-width: 66ch;
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
}

.sbb-blog-post__body > * + * { margin-top: 1.1em; }

.sbb-blog-post__body p,
.sbb-blog-post__body li {
  text-wrap: pretty;
}

.sbb-blog-post__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-blog-post__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;
}

/* Design-review P0 items 1 & 2: refresh.css's `.sbb-legal p { margin: 0;
   line-height: 1.6 }` and `.sbb-legal a { color: var(--accent) }` (both
   `.sbb-legal <element>` — one class + one element, specificity 0,0,1,1)
   were beating this file's own paragraph spacing and the CTA button's
   white text because those rules only matched on `.sbb-blog-post__body p`
   / `.sbb-blog-cta__button` (also 0,0,1,1 or lower) — a specificity tie
   broken by *load order* in refresh.css's favor for `p`, and an outright
   loss for the CTA button (`.sbb-legal a` has one more element in its
   selector than a bare class). Prefixing with `.sbb-legal` here adds a
   second class to the selector (0,0,2,1), so these unambiguously win
   regardless of stylesheet order — no `!important` needed. */
.sbb-legal .sbb-blog-post__body p {
  margin-top: 1.1em;
  line-height: 1.75;
}

/* Design-review P1 item 9: body copy was entirely `--muted`, reserved for
   secondary text — read washed-out across whole articles. Full-contrast
   `--text` for prose; `--muted` stays reserved for the caption-style meta
   line, chips, and captions. */
.sbb-blog-post__body p,
.sbb-blog-post__body li {
  color: var(--text);
}

.sbb-blog-post__body strong { color: var(--text); font-weight: 700; }

.sbb-blog-post__body ul,
.sbb-blog-post__body ol {
  padding-left: 1.3em;
  display: grid;
  gap: 0.5em;
}
.sbb-blog-post__body ul { list-style: disc; }
.sbb-blog-post__body ol { list-style: decimal; }
.sbb-blog-post__body li::before,
.sbb-legal .sbb-blog-post__body ul li::before { content: none; display: none; }

.sbb-blog-post__body a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.sbb-blog-post__body a:hover { text-decoration: underline; }

.sbb-blog-post__body blockquote {
  margin: 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent-strong);
  color: var(--muted);
  font-style: italic;
}

.sbb-blog-post__body code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(29, 29, 31, 0.05);
  border: 1px solid rgba(29, 29, 31, 0.06);
  color: var(--text);
}

.sbb-blog-post__body pre {
  padding: 16px;
  border-radius: var(--radius-control);
  background: rgba(29, 29, 31, 0.05);
  border: 1px solid var(--panel-border);
  overflow-x: auto;
}
.sbb-blog-post__body pre code {
  padding: 0;
  border: 0;
  background: none;
}

.sbb-blog-post__body img {
  max-width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-soft);
}

/* ---- In-body figures (Help-center screenshots reused in posts) ----
   Same recipe as help.css's .sbb-help-figure, reproduced under a blog-*
   name per the reproduce-don't-cross-import convention (see help.css
   header). The bare `.sbb-blog-post__body img` rule above gives a lone
   image its own border/radius/shadow; inside a figure the card carries
   those, so the inner img is reset to avoid a double border. */
.sbb-blog-post__body .sbb-blog-figure {
  margin: 24px 0 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.sbb-blog-post__body .sbb-blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.sbb-blog-post__body .sbb-blog-figure figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--panel-border);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
/* Stacked before/after pair (e.g. the two 1100x34 slot strips): one per
   row, full width, no outer card — same reasoning as help.css's --stack. */
.sbb-blog-post__body .sbb-blog-figure--stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  border: 0;
  box-shadow: none;
  background: none;
  overflow: visible;
}
.sbb-blog-post__body .sbb-blog-figure--stack .sbb-blog-figure { margin: 0; }

.sbb-blog-post__body hr {
  border: none;
  border-top: 1px solid var(--panel-border);
}

/* Design-review P0 item 3 + P1 item 10: the old `display: block` on
   <table> itself broke the table's automatic row-layout algorithm — on
   mobile every row inflated to ~400px tall (9 rows -> ~3800px) and the
   3rd column was clipped with no visible way to know more content
   existed. Fix: leave the table a real table (so its layout math works),
   and wrap it in `.sbb-table-scroll` (injected by the rehypeWrapTables
   plugin in astro.config.mjs) for horizontal scroll + a scroll-shadow
   affordance. Also restyled to match the site's panel/card language
   (soft-accent header row, horizontal rules only) instead of the
   default browser 1px-every-cell grid. */
.sbb-table-scroll {
  margin-top: 1.1em;
  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);
  /* Classic no-JS "scroll shadow" trick: two solid-color fades that sit
     with the content (background-attachment: local) so they slide out of
     view once you've scrolled to that edge, plus two thin shadow strips
     pinned to the viewport (background-attachment: scroll) that only
     read as visible while the solid fade in front of them hasn't reached
     that edge yet — i.e. a persistent "there's more" hint. */
  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-blog-post__body table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.sbb-blog-post__body th,
.sbb-blog-post__body td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
  vertical-align: top;
}
.sbb-blog-post__body thead th {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
.sbb-blog-post__body tbody tr:last-child th,
.sbb-blog-post__body tbody tr:last-child td { border-bottom: 0; }
.sbb-blog-post__body td { color: var(--text); }

/* ---- CTA card ---- */
.sbb-blog-cta {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  box-shadow: var(--shadow);
}
.sbb-blog-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-blog-cta p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 60ch;
}
.sbb-blog-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;
}
/* Design-review P0 item 1: `.sbb-legal a { color: var(--accent) }` (one
   class + one element) beat the rule above (one class, zero elements) on
   specificity, so the button's text rendered accent-blue on an
   accent-blue background — completely unreadable, and the only
   conversion element on the page. Prefixing with `.sbb-legal` adds a
   second class (0,0,2,0), which beats `.sbb-legal a`'s (0,0,1,1)
   regardless of load order. No `!important` needed. */
.sbb-legal .sbb-blog-cta__button,
.sbb-legal .sbb-blog-cta__button:hover {
  color: #fff;
}
.sbb-blog-cta__button:hover {
  transform: translateY(-0.5px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}
.sbb-blog-cta__note {
  margin: 14px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--accent-strong);
  color: var(--muted);
  font-size: 13.5px;
}

/* Design-review P1 item 8: tags previously reused `.sbb-legal__chip` —
   the exact same pill styling as the clickable pillar-filter chips below
   — but tags don't link anywhere. Flat, muted, non-pill text so they
   read as inert metadata rather than a dead clickable-looking control. */
.sbb-blog-post__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 22px;
}
.sbb-blog-post__tags-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sbb-blog-post__tag {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.sbb-blog-post__tag::before {
  content: "#";
  margin-right: 1px;
  opacity: 0.65;
}

/* ---- Pillar filter chips as links (/blog/, index) ---- */
.sbb-legal__chip--link {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.sbb-legal__chip--link:hover {
  border-color: var(--accent-strong);
  color: var(--accent);
}

/* Design-review P2 item 11: light per-pillar tint so the filter chips
   (and, via .sbb-blog-card__pillar, the index/related cards) don't all
   read as one indistinguishable blue. Reuses the site's existing
   semantic tokens (--accent/--success/--warning/--danger, all already
   defined in refresh.css) instead of inventing new hues. */
.sbb-legal__chip--link[data-pillar="video"] { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.sbb-legal__chip--link[data-pillar="workflows"] { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.sbb-legal__chip--link[data-pillar="compare"] { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }

.sbb-blog-card__pillar[data-pillar="video"] { color: var(--success); background: var(--success-bg); }
.sbb-blog-card__pillar[data-pillar="workflows"] { color: var(--warning); background: var(--warning-bg); }
.sbb-blog-card__pillar[data-pillar="compare"] { color: var(--danger); background: var(--danger-bg); }

.sbb-blog-index__rss {
  margin-left: 8px;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.sbb-blog-index__rss:hover { text-decoration: underline; }

/* ---- Related posts ("Keep reading") ---- */
.sbb-blog-related {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--panel-border);
}
.sbb-blog-related h2 {
  margin: 0 0 16px;
  font-family: var(--ui-font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.sbb-blog-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.sbb-blog-card--compact { padding: 16px; gap: 8px; }
.sbb-blog-card--compact h3 {
  margin: 0;
  font-family: var(--ui-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}
.sbb-blog-card--compact p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---- "Browse by topic" chip row (design-review P2 item 11) ---- */
.sbb-blog-index__topics-label {
  margin: 22px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sbb-legal__chip__count {
  margin-left: 6px;
  opacity: 0.65;
  font-weight: 600;
}

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

/* ---- Annotated screenshot figures (hands-on review) ----
   <div class="sbb-ann"> = optimized WebP + an absolutely positioned inline SVG whose
   viewBox matches the image's pixel size, so arrows and brackets scale with it. Built by
   tools/review-figures/build.mjs. On narrow screens the label pills are scaled up so the
   text stays readable. */
.sbb-ann { position: relative; line-height: 0; }
.sbb-ann img { display: block; width: 100%; height: auto; }
.sbb-ann svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
  font-family: var(--ui-font);
}
.sbb-ann__label { transform-box: fill-box; transform-origin: center; }
@media (max-width: 640px) { .sbb-ann__label { transform: scale(var(--s, 1.55)); } }
.sbb-ann__title {
  margin: 0; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--accent-soft); border-top: 1px solid var(--panel-border);
}
.sbb-blog-figure--annotated .sbb-ann__title:first-child { border-top: 0; }

/* ---- Step-count and memory charts (plain HTML, no images) ---- */
.sbb-blog-post__body .sbb-steps { margin: 24px 0 0; padding: 14px; border: 1px solid var(--panel-border); border-radius: var(--radius-card); background: var(--panel); box-shadow: var(--shadow-soft); }
.sbb-steps__row { padding: 10px 0; border-top: 1px solid var(--panel-border); }
.sbb-steps__row:first-of-type { border-top: 0; }
.sbb-steps__name { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 14px; }
.sbb-steps__name span { color: var(--muted); font-weight: 400; }
.sbb-steps__chain { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 0; list-style: none; }
.sbb-steps__chain li { margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-strong); font-size: 13px; line-height: 1.4; }
.sbb-steps__chain li:last-child { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.sbb-mem__row { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.sbb-mem__track { position: relative; height: 22px; border-radius: 6px; background: var(--accent-soft); }
.sbb-mem__bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--accent); opacity: 0.85; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; }
@media (max-width: 520px) { .sbb-mem__row { grid-template-columns: 1fr; gap: 4px; } }

/* Author-interest disclosure box at the top of hands-on reviews. */
.sbb-blog-post__body .sbb-blog-disclosure {
  margin: 0 0 1.4em;
  padding: 12px 16px;
  border: 1px solid var(--accent-strong);
  border-left-width: 4px;
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  font-size: 15px;
  line-height: 1.6;
}
.sbb-steps__chain li:last-child::marker { color: var(--text); font-weight: 400; }
.sbb-steps__name { flex-wrap: wrap; margin: 0; }

/* ---- 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-blog-post__body .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-blog-post__body .sbb-fm-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sbb-blog-post__body .sbb-fm {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.45;
}
.sbb-blog-post__body .sbb-fm__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sbb-blog-post__body .sbb-fm th,
.sbb-blog-post__body .sbb-fm td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
  vertical-align: top;
  color: var(--text);
}
.sbb-blog-post__body .sbb-fm thead th {
  background: #edf4fd;
  font-weight: 700;
  white-space: normal;
  width: 26%;
}
.sbb-blog-post__body .sbb-fm thead th:first-child { width: 22%; }
.sbb-blog-post__body .sbb-fm thead th:first-child,
.sbb-blog-post__body .sbb-fm tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--panel-border);
}
.sbb-blog-post__body .sbb-fm tbody th[scope="row"] {
  background: #fff;
  font-weight: 600;
  white-space: normal;
}
.sbb-blog-post__body .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-blog-post__body .sbb-fm .sbb-fm__group th span { position: sticky; left: 12px; }
.sbb-blog-post__body .sbb-fm tbody:last-child tr:last-child th,
.sbb-blog-post__body .sbb-fm tbody:last-child tr:last-child td { border-bottom: 0; }
.sbb-blog-post__body .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-blog-post__body .sbb-fm__v--yes { background: #e3f4e8; color: #166534; }
.sbb-blog-post__body .sbb-fm__v--no { background: #f0f0f2; color: #55555a; }
.sbb-blog-post__body .sbb-fm__v--partial { background: #fdf1d8; color: #8a4b05; }
.sbb-blog-post__body .sbb-fm__v--premium,
.sbb-blog-post__body .sbb-fm__v--pro { background: #ede7fb; color: #5b2ab5; }
.sbb-blog-post__body .sbb-fm__v--unverified { background: #fff; color: #55555a; border: 1px dashed #b5b5bb; }
.sbb-blog-post__body .sbb-fm__note { display: block; color: var(--text); }
.sbb-blog-post__body .sbb-fm__v + .sbb-fm__note { margin-top: 2px; color: var(--muted); font-size: 13px; }
.sbb-blog-post__body .sbb-fm-legend { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 640px) {
  .sbb-blog-post__body .sbb-fm { min-width: 640px; font-size: 13px; }
  .sbb-blog-post__body .sbb-fm th,
  .sbb-blog-post__body .sbb-fm td { padding: 9px 10px; }
  .sbb-blog-post__body .sbb-fm thead th:first-child,
  .sbb-blog-post__body .sbb-fm tbody th[scope="row"] { width: 118px; min-width: 118px; }
}