/* ============================================================
   Sportsblogs Theme — CSS custom properties + semantic classes
   Fonts: Barlow Condensed (display) + DM Sans (body)
   Dark mode triggered by [data-theme="dark"] on <html>
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

/* ── Variables ─────────────────────────────────────────────── */

:root {
  --sb-bg:           #f2f2ee;
  --sb-surface:      #ffffff;
  --sb-surface-2:    #f8f8f5;
  --sb-border:       #e0e0d8;
  --sb-text:         #1a1a24;
  --sb-text-muted:   #6b7280;
  --sb-accent:       #f97316;
  --sb-accent-hi:    #ea6c0a;
  --sb-link:         #1a1a24;
  --sb-link-hi:      #f97316;

  /* blog activity signal colors — deliberately not reused from the sport
     palette, so a health badge never reads as a sport tag */
  --sb-active:       #16a34a;
  --sb-quiet:        #d97706;
  --sb-inactive:     #6b7280;

  /* sport accent stripe colors */
  --sport-nfl:                 #3b82f6;
  --sport-nba:                 #ef4444;
  --sport-mlb:                 #22c55e;
  --sport-nhl:                 #06b6d4;
  --sport-college-football:    #a855f7;
  --sport-college-basketball:  #f59e0b;
  --sport-default:             #f97316;
}

[data-theme="dark"] {
  --sb-bg:           #0f0f13;
  --sb-surface:      #1a1a24;
  --sb-surface-2:    #1e1e2c;
  --sb-border:       #2a2a3a;
  --sb-text:         #e8e8ef;
  --sb-text-muted:   #9ca3af;
  --sb-accent:       #f97316;
  --sb-accent-hi:    #fb923c;
  --sb-link:         #e8e8ef;
  --sb-link-hi:      #f97316;

  /* Lightened for contrast against the dark surface */
  --sb-active:       #4ade80;
  --sb-quiet:        #fbbf24;
  --sb-inactive:     #9ca3af;
}

/* ── Base ──────────────────────────────────────────────────── */

body {
  background-color: var(--sb-bg);
  color: var(--sb-text);
  font-family: 'DM Sans', sans-serif;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ── Site Header ───────────────────────────────────────────── */
/* Header is always dark regardless of theme — it's a design anchor */

.sb-header {
  background-color: #0f0f13;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sb-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #ffffff;
  transition: color 0.15s;
}
.sb-logo:hover { color: var(--sb-accent); }
.sb-logo span  { color: var(--sb-accent); }

.sb-nav-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.15s;
}
.sb-nav-link:hover { color: #ffffff; }

.sb-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-theme-toggle:hover { color: rgba(255, 255, 255, 0.9); }

/* ── Page headings ─────────────────────────────────────────── */

.sb-page-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sb-text);
}

.sb-page-subtitle {
  color: var(--sb-text-muted);
  font-size: 0.9375rem;
}

/* ── Entry cards ───────────────────────────────────────────── */

.sb-card {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-left: 3px solid var(--sb-accent);
  border-radius: 6px;
  transition: background-color 0.15s ease;
}
.sb-card:hover { background-color: var(--sb-surface-2); }

/* Sport-specific left border stripe */
.sb-card[data-sport="nfl"]                { border-left-color: var(--sport-nfl); }
.sb-card[data-sport="nba"]                { border-left-color: var(--sport-nba); }
.sb-card[data-sport="mlb"]                { border-left-color: var(--sport-mlb); }
.sb-card[data-sport="nhl"]                { border-left-color: var(--sport-nhl); }
.sb-card[data-sport="college-football"]   { border-left-color: var(--sport-college-football); }
.sb-card[data-sport="college-basketball"] { border-left-color: var(--sport-college-basketball); }

.sb-entry-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--sb-link);
  transition: color 0.15s;
}
.sb-entry-title:hover { color: var(--sb-link-hi); }

.sb-entry-summary {
  color: var(--sb-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.sb-entry-meta {
  color: var(--sb-text-muted);
  font-size: 0.8125rem;
}

.sb-source-link {
  color: var(--sb-accent);
  font-weight: 600;
  transition: color 0.15s;
}
.sb-source-link:hover { color: var(--sb-accent-hi); }

.sb-reads {
  color: var(--sb-accent);
  font-weight: 600;
}

/* ── Hero / featured entry card ────────────────────────────── */
/* Distinct from sb-card: thicker border, sport-color gradient tint, larger title.
   On mobile, falls back to regular-card proportions via clamp on the title. */

.sb-hero-card {
  --hero-sport-color: var(--sb-accent);
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-left: 5px solid var(--hero-sport-color);
  border-radius: 8px;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hero-sport-color) 6%, transparent) 0%,
    transparent 55%
  );
  transition: background-color 0.15s ease;
}
.sb-hero-card:hover { background-color: var(--sb-surface-2); }

/* Override --hero-sport-color per sport so border + tint + label all stay consistent */
.sb-hero-card[data-sport="nfl"]                { --hero-sport-color: var(--sport-nfl); }
.sb-hero-card[data-sport="nba"]                { --hero-sport-color: var(--sport-nba); }
.sb-hero-card[data-sport="mlb"]                { --hero-sport-color: var(--sport-mlb); }
.sb-hero-card[data-sport="nhl"]                { --hero-sport-color: var(--sport-nhl); }
.sb-hero-card[data-sport="college-football"]   { --hero-sport-color: var(--sport-college-football); }
.sb-hero-card[data-sport="college-basketball"] { --hero-sport-color: var(--sport-college-basketball); }

.sb-hero-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-sport-color);
}

.sb-hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  /* Scales from ~1.375rem on narrow mobile up to 2.25rem on wider screens */
  font-size: clamp(1.375rem, 3vw + 0.5rem, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sb-link);
  transition: color 0.15s;
}
.sb-hero-title:hover { color: var(--sb-link-hi); }

/* ── Take cards ────────────────────────────────────────────── */
/* A take card still inverts the usual one — the citing blogs are the content — but it
   leads with a subject line so the reader has somewhere to land. Before, the cited story
   was the card's smallest and quietest element while N equal-weight headlines stacked
   below it, and a nine-blog card read as an undifferentiated wall.

   The subject is body-sized, not display-sized, on purpose: large enough to anchor the
   card, small enough that the takes below stay the content. Promoting it to a real
   headline would turn this into an ordinary aggregator card. */

.sb-take-head {
  margin-bottom: 0.875rem;
}

.sb-take-subject {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sb-text);
  /* DM Sans, not Barlow Condensed: the takes below are the condensed display face, and
     setting the subject in the same face made the two compete instead of nesting. */
}

.sb-take-cited-link {
  color: var(--sb-text);
  transition: color 0.15s;
}
.sb-take-cited-link:hover { color: var(--sb-accent); }

.sb-take-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

/* Separator in CSS so the ERB stays free of punctuation-only spans, and it drops off
   automatically when the row wraps. Same technique as .sb-health-meta. */
.sb-take-meta > * + *::before {
  content: "·";
  margin-right: 0.4rem;
  color: var(--sb-border);
}

.sb-take-cited-host {
  font-weight: 600;
  color: var(--sb-text-muted);
}

/* The synthesis paragraph (#470). Styled here ahead of the generator so the card has a
   defined no-summary state and an added summary changes nothing else about the layout. */
.sb-take-story {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sb-text-muted);
}

.sb-takes-list {
  /* Left rule rather than bullets: it reads as "these all hang off the link above",
     which bullets do not, and it survives a title wrapping to three lines. */
  border-left: 2px solid var(--sb-border);
  padding-left: 0.875rem;
  display: flex;
  flex-direction: column;
  /* Roughly double the old 0.625rem. Each take is now two lines, so the gap has to beat
     the internal leading or the rows read as one paragraph. */
  gap: 1rem;
}

.sb-take-title {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  /* Below .sb-entry-title's 1.2rem: several of these stack inside one card, and at
     entry-title size the card stops reading as a single unit. */
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--sb-link);
  transition: color 0.15s;
}
.sb-take-title:hover { color: var(--sb-link-hi); }

/* Attribution on its own line, sharing the headline's left edge. Trailing the headline
   put it at a different x-position on every row — N ragged strings the eye had to hunt
   for. This is also the line that will carry the one-sentence angle (#470). */
.sb-take-attrib {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--sb-text-muted);
}

/* Muted here, unlike .sb-source-link everywhere else on the site. Once attribution moved
   onto its own line the accent colour stacked into a column of N orange strings that pulled
   harder than the headlines above them — the opposite of the intended reading order. Orange
   returns on hover, so the link still announces itself as one. This also keeps the line
   readable as prose once it carries the angle sentence (#470). */
.sb-take-attrib .sb-source-link {
  color: var(--sb-text-muted);
  font-weight: 600;
}
.sb-take-attrib .sb-source-link:hover { color: var(--sb-accent); }

.sb-takes-more {
  margin-top: 1rem;
}

.sb-takes-more > summary {
  display: inline-block;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--sb-text-muted);
  list-style: none;
  transition: color 0.15s;
}
.sb-takes-more > summary::-webkit-details-marker { display: none; }
.sb-takes-more > summary:hover { color: var(--sb-accent); }

.sb-takes-more > summary::before {
  content: "+ ";
}
.sb-takes-more[open] > summary::before {
  content: "− ";
}

.sb-takes-more > .sb-takes-list {
  margin-top: 1rem;
}

/* ── Tags ──────────────────────────────────────────────────── */

.sb-tag-sport {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: #1a1a24;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 3px;
  transition: opacity 0.15s;
}
[data-theme="dark"] .sb-tag-sport {
  background-color: rgba(255, 255, 255, 0.12);
  color: #e8e8ef;
}
.sb-tag-sport:hover { opacity: 0.78; }

/* Sport-specific tag fill colors */
.sb-tag-sport[data-sport="nfl"]                { background-color: var(--sport-nfl); }
.sb-tag-sport[data-sport="nba"]                { background-color: var(--sport-nba); }
.sb-tag-sport[data-sport="mlb"]                { background-color: var(--sport-mlb); }
.sb-tag-sport[data-sport="nhl"]                { background-color: var(--sport-nhl); }
.sb-tag-sport[data-sport="college-football"]   { background-color: var(--sport-college-football); }
.sb-tag-sport[data-sport="college-basketball"] { background-color: var(--sport-college-basketball); }
/* Keep white text readable on all sport colors */
.sb-tag-sport[data-sport] { color: #ffffff; }
[data-theme="dark"] .sb-tag-sport[data-sport] { color: #ffffff; }

.sb-tag-team {
  font-size: 0.75rem;
  color: var(--sb-text-muted);
  background-color: transparent;
  border: 1px solid var(--sb-border);
  padding: 2px 7px;
  border-radius: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.sb-tag-team:hover {
  color: var(--sb-text);
  border-color: var(--sb-text-muted);
}

/* ── Blog activity / cadence signals ───────────────────────── */

.sb-health-badge {
  --health-color: var(--sb-inactive);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--health-color);
  white-space: nowrap;
}
.sb-health-badge[data-activity="active"]  { --health-color: var(--sb-active); }
.sb-health-badge[data-activity="quiet"]   { --health-color: var(--sb-quiet); }
.sb-health-badge[data-activity="inactive"] { --health-color: var(--sb-inactive); }

/* Dot is drawn rather than an emoji/glyph so its color tracks --health-color
   and it stays crisp at 7px on every platform */
.sb-health-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--health-color);
  flex-shrink: 0;
}

.sb-health-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--sb-text-muted);
  font-size: 0.8125rem;
}

/* Compact variant for the directory listing, where this row sits under the blog
   description and has to stay subordinate to it. Defined here rather than with a
   Tailwind text-* utility on the element: Propshaft emits the stylesheets
   alphabetically, so theme.css always loads after tailwind.css and .sb-health-meta
   would beat .text-xs at equal specificity. */
.sb-health-meta.sb-health-meta-sm { font-size: 0.75rem; }

/* Separator lives in CSS so the ERB stays free of punctuation-only spans, and it
   drops off automatically when the row wraps to a new line.
   Excludes the badge explicitly: the badge paints its own status dot in ::before
   at the same specificity, so without the :not() this rule would silently replace
   that dot with a grey interpunct the moment the badge stopped being first child. */
.sb-health-meta > * + *:not(.sb-health-badge)::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--sb-border);
}

.sb-sparkline {
  display: block;
  overflow: visible;
  color: var(--sb-accent);
}
.sb-sparkline rect { fill: currentColor; }
/* Weeks with no posts still get a visible baseline tick, so a gap reads as a
   silent week rather than as missing data */
.sb-sparkline rect[data-empty="true"] { fill: var(--sb-border); }

/* ── Sort toggle ───────────────────────────────────────────── */

.sb-sort-wrap {
  display: inline-flex;
  border: 1px solid var(--sb-border);
  border-radius: 6px;
  overflow: hidden;
}

.sb-sort-btn {
  background-color: var(--sb-surface);
  color: var(--sb-text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: background-color 0.15s, color 0.15s;
}
.sb-sort-btn + .sb-sort-btn { border-left: 1px solid var(--sb-border); }
.sb-sort-btn:hover {
  background-color: var(--sb-surface-2);
  color: var(--sb-text);
}
.sb-sort-btn.sb-active,
.sb-sort-btn[aria-current="true"] {
  background-color: var(--sb-accent);
  color: #ffffff;
}

/* ── Section container (team filter, etc.) ─────────────────── */

.sb-section {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 6px;
}

/* ── Sports index cards ────────────────────────────────────── */

.sb-sport-card {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-top: 3px solid var(--sb-accent);
  border-radius: 6px;
  transition: background-color 0.15s, transform 0.15s;
}
.sb-sport-card:hover {
  background-color: var(--sb-surface-2);
  transform: translateY(-2px);
}
.sb-sport-card[data-sport="nfl"]                { border-top-color: var(--sport-nfl); }
.sb-sport-card[data-sport="nba"]                { border-top-color: var(--sport-nba); }
.sb-sport-card[data-sport="mlb"]                { border-top-color: var(--sport-mlb); }
.sb-sport-card[data-sport="nhl"]                { border-top-color: var(--sport-nhl); }
.sb-sport-card[data-sport="college-football"]   { border-top-color: var(--sport-college-football); }
.sb-sport-card[data-sport="college-basketball"] { border-top-color: var(--sport-college-basketball); }

.sb-sport-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--sb-text);
  transition: color 0.15s;
}
.sb-sport-name:hover { color: var(--sb-accent); }

/* ── Breadcrumb ────────────────────────────────────────────── */

.sb-breadcrumb-link {
  font-size: 0.8125rem;
  color: var(--sb-text-muted);
  transition: color 0.15s;
}
.sb-breadcrumb-link:hover { color: var(--sb-accent); }

/* ── RSS button ────────────────────────────────────────────── */

.sb-rss-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  background-color: var(--sb-accent);
  color: #ffffff;
  border-radius: 4px;
  transition: background-color 0.15s;
}
.sb-rss-btn:hover { background-color: var(--sb-accent-hi); }

/* ── Footer ────────────────────────────────────────────────── */
/* Footer also always dark — bookends the dark header */

.sb-footer {
  background-color: #0a0a0d;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Alert banners ─────────────────────────────────────────── */

.sb-alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--sb-text);
  border-radius: 6px;
}
.sb-alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: var(--sb-text);
  border-radius: 6px;
}

/* ── Trending empty state ──────────────────────────────────── */

.sb-empty-state {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 6px;
}

/* ── Form inputs ───────────────────────────────────────────── */

.sb-input,
.sb-select,
.sb-textarea {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  color: var(--sb-text);
  border-radius: 5px;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: auto;
}
.sb-input::placeholder,
.sb-textarea::placeholder { color: var(--sb-text-muted); opacity: 0.7; }
.sb-input:focus,
.sb-select:focus,
.sb-textarea:focus {
  outline: none;
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.sb-input:disabled,
.sb-select:disabled { opacity: 0.45; cursor: not-allowed; }

.sb-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sb-text-muted);
  margin-bottom: 0.375rem;
}

/* The bottom spacing above is for labels stacked over a form field. Inline uses
   (the sparkline caption) need it flush, or the flex row centers the text against
   a taller box and it sits visibly high. Compound selector for the same cascade
   reason as .sb-health-meta-sm — a Tailwind mb-0 would lose to .sb-label here. */
.sb-label.sb-label-inline { margin-bottom: 0; }

.sb-hint {
  font-size: 0.8125rem;
  color: var(--sb-text-muted);
  margin-top: 0.3rem;
}

/* ── Sport selector chips ──────────────────────────────────── */

/* Used by the newsletter form to pick sports. A styled <span> beside a
   visually-hidden native checkbox, rather than an `accent-color`d native box:
   this control renders both on the always-dark footer and on a themed page
   surface, and a native checkbox can't carry legible selected/unselected
   contrast on both.
   The input keeps its box in the DOM (clipped, not display:none) so it stays
   focusable and announced — display:none would drop it out of the tab order and
   make the group unusable by keyboard.
   Deliberately neutral rather than tinted with the --sport-* palette: those
   variables only cover six of the taxonomy's sports (MLS has none), so a
   colored chip would silently render un-styled the moment a sport is added. */
.sb-sport-check {
  display: inline-flex;
  position: relative;
  cursor: pointer;
}
.sb-sport-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.sb-sport-check span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--sb-border);
  border-radius: 999px;
  background-color: var(--sb-surface);
  color: var(--sb-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.sb-sport-check:hover span { border-color: var(--sb-accent); }
.sb-sport-check input:checked + span {
  background-color: var(--sb-accent);
  border-color: var(--sb-accent);
  color: #ffffff;
}
.sb-sport-check input:focus-visible + span {
  outline: 2px solid var(--sb-accent);
  outline-offset: 2px;
}

/* Footer variant. The footer is always dark regardless of theme, so these
   can't come from the themed variables above. */
.sb-sport-check-dark span {
  border-color: rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
}
.sb-sport-check-dark:hover span { border-color: var(--sb-accent); }
.sb-sport-check-dark input:checked + span {
  background-color: var(--sb-accent);
  border-color: var(--sb-accent);
  color: #ffffff;
}

/* ── Buttons ───────────────────────────────────────────────── */

.sb-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  background-color: var(--sb-accent);
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
  min-height: 44px;
}
.sb-btn-primary:hover { background-color: var(--sb-accent-hi); }

.sb-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  background-color: var(--sb-surface-2);
  color: var(--sb-text-muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 5px;
  border: 1px solid var(--sb-border);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  min-height: 44px;
}
.sb-btn-secondary:hover {
  background-color: var(--sb-border);
  color: var(--sb-text);
}

/* ── Info box (criteria, next-steps panels) ────────────────── */

.sb-info-box {
  background-color: rgba(249, 115, 22, 0.07);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-left: 3px solid var(--sb-accent);
  border-radius: 5px;
  padding: 1rem 1.25rem;
}
.sb-info-box-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sb-accent);
  margin-bottom: 0.5rem;
}

/* ── Pagination ────────────────────────────────────────────── */

.sb-pagination {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 6px;
}
.sb-pagination .info { color: var(--sb-text-muted); font-size: 0.875rem; }

/* ── Search highlight ──────────────────────────────────────── */
mark {
  background-color: rgba(249, 115, 22, 0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

/* ── Misc ──────────────────────────────────────────────────── */

.sb-divider { border-color: var(--sb-border); }
.sb-text-muted { color: var(--sb-text-muted); }

/* ── Digest rank badge ─────────────────────────────────────── */

/* Barlow Condensed at a large size so a two-digit rank stays inside the same
   column width as a single digit — a fixed-width box with the body font would
   either clip "20" or leave a gap beside "1". */
.sb-rank {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sb-text-muted);
  opacity: 0.45;
  width: 2rem;
  text-align: right;
  padding-top: 0.125rem;
}

/* The top three carry the accent rather than a medal palette: three more colors
   would collide with the sport stripe already running down the card's left edge. */
.sb-card:nth-of-type(-n + 3) .sb-rank {
  color: var(--sb-accent);
  opacity: 1;
}