/* Reliability Leaderboard v1.0.5 */
.rl-table-wrap *, .rl-featured-wrap *, .rl-strip * { box-sizing: border-box !important; }
.rl-table-wrap a, .rl-featured-wrap a, .rl-strip a { line-height: inherit !important; text-decoration: none !important; }

:root {
    --brand-primary: #20C997;
    --brand-primary-dark: #1AA67D;
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius-md: 12px;
    --radius-pill: 9999px;
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --transition-base: 250ms ease;
}

.rl-header { margin-bottom: 1.25rem; }
.rl-heading { font-family: var(--font-primary); font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; line-height: 1.3; }
.rl-subtitle { font-family: var(--font-primary); font-size: 0.85rem; color: #6b7280; margin: 0; }
.rl-table-wrap { font-family: var(--font-primary); margin: 0 0 2rem; }
.rl-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
/* BUG FIX: #6b7280 on #f9fafb at 0.75rem = ~4.4:1 — below WCAG AA. Changed to #4b5563 (~7.0:1 on #f9fafb). */
.rl-table thead th { background: #f9fafb; color: #4b5563; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #f3f4f6; }
.rl-table tbody tr { border-bottom: 1px solid #f9fafb; transition: background var(--transition-base); }
.rl-table tbody tr:last-child { border-bottom: none; }
.rl-table tbody tr:hover { background: #f9fafb; }
.rl-table td { padding: 0.75rem 1rem; vertical-align: middle; font-size: 0.9rem; color: #374151; }
/* BUG FIX v1.0.3: #d1d5db on white = 1.8:1, #9ca3af = 2.9:1 (both WCAG fail).
   Changed default to #9ca3af → #6b7280 (4.5:1), silver rank to #6b7280 (4.5:1). */
.rl-td-rank { font-size: 1rem; font-weight: 800; color: #6b7280; width: 2.5rem; }
.rl-top-1 .rl-td-rank { color: #fbbf24; }
.rl-top-2 .rl-td-rank { color: #6b7280; }
.rl-top-3 .rl-td-rank { color: #cd7f32; }
.rl-td-brand { display: flex; align-items: center; gap: 0.5rem; }
/* BUG FIX v1.0.4: Changed from inline-flex+align-items:center to inline-block+line-height
   per DESIGN_GUIDE Rule 2 (text-only link, not a multi-child container). */
.rl-brand-link { font-weight: 700; color: #111827; transition: color var(--transition-base); min-height: 44px; display: inline-block; line-height: 2.5; }
.rl-brand-link:hover { color: var(--brand-primary-dark); }
.rl-signal { font-size: 0.85rem; }
.rl-score-chip { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 0.2em 0.65em; border-radius: var(--radius-pill); background: #f0fdf4; color: #15803d; box-shadow: inset 0 0 0 1px rgba(21,128,61,0.2); }
.rl-td-disc { font-weight: 700; color: var(--brand-primary-dark); }
/* FIX: Rule 2 — text-only CTA: use display:inline-block + line-height (not inline-flex+align-items) */
/* FIX: Rule 1 — no visible border+border-radius: uses inset box-shadow only (border:none is correct) */
/* BUG FIX: min-height was 36px — below 44px minimum touch target per DESIGN_GUIDE. Changed to 44px. */
.rl-cta { font-size: 0.8rem; font-weight: 600; color: #374151; padding: 0.5rem 0.85rem; border-radius: var(--radius-pill); border: none; box-shadow: inset 0 0 0 1.5px #d1d5db, 0 1px 2px rgba(0,0,0,0.04); transition: box-shadow var(--transition-base), color var(--transition-base); white-space: nowrap; min-height: 44px; display: inline-block; line-height: 2; text-align: center; }
.rl-cta:hover { box-shadow: inset 0 0 0 1.5px var(--brand-primary), 0 1px 2px rgba(0,0,0,0.04); color: var(--brand-primary-dark); }

/* FIX: missing newline before @media — was concatenated onto .rl-cta:hover line causing parse risk */
@media (max-width: 600px) {
    .rl-table thead { display: none; }
    .rl-table, .rl-table tbody, .rl-table tr, .rl-table td { display: block; width: 100%; }
    /* BUG FIX v1.0.4: Use CSS variable for mobile card bg so dark mode overrides it. */
    .rl-table tr { background: var(--rl-card-bg, #fff); border-radius: var(--radius-md); margin-bottom: 0.75rem; padding: 0.75rem 1rem; box-shadow: var(--shadow-md); border: none; }
    .rl-table td { padding: 0.25rem 0; border: none; }
    /* BUG FIX: Mobile table-to-card layout needs cell labels since thead is hidden.
       Uses data-label attribute set by PHP + ::before pseudo-element. */
    .rl-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        /* BUG FIX v1.0.3: #9ca3af on white = 2.9:1 (WCAG fail). Changed to #6b7280 (~4.5:1). */
        color: #6b7280;
        margin-bottom: 0.15rem;
    }
    .rl-td-cta { padding-top: 0.5rem; }
    .rl-td-cta::before { display: none !important; } /* No label needed on CTA cell */
    .rl-cta { width: 100%; }
}

/* FIX: Rule 2 — .rl-pill has multiple child spans (rank, name, stars) so flex layout is required
   for the internal children arrangement; the anchor itself is a navigation element not a text-only
   button. Using inline-flex is justified here for multi-child layout.
   Rule 1 compliant: border:none + inset box-shadow only (no visible border+border-radius combo). */
.rl-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; font-family: var(--font-primary); margin: 0 0 1.5rem; }
.rl-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); border: none; box-shadow: inset 0 0 0 1.5px #d1d5db, var(--shadow-md); background: #fff; font-size: 0.82rem; font-weight: 600; color: #374151; transition: box-shadow var(--transition-base), color var(--transition-base); min-height: 44px; text-decoration: none; }
.rl-pill:hover { box-shadow: inset 0 0 0 1.5px var(--brand-primary), var(--shadow-md); color: var(--brand-primary-dark); }
/* BUG FIX v1.0.3: #9ca3af on white = 2.9:1 (WCAG fail). Changed to #6b7280 (~4.5:1). */
.rl-pill-rank { font-weight: 800; color: #6b7280; font-size: 0.75rem; }
/* BUG FIX: .rl-pill-name was used in PHP but had no CSS rule. Added for completeness. */
.rl-pill-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-pill-stars { color: #fbbf24; font-size: 0.65rem; letter-spacing: -1px; }
.rl-featured-wrap { font-family: var(--font-primary); margin: 0 0 2rem; }
.rl-featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.rl-featured-card { background: #fff; border-radius: var(--radius-md); padding: 1.25rem; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 0.5rem; transition: transform var(--transition-base), box-shadow var(--transition-base); }
/* BUG FIX: hover box-shadow previously erased the rank inset ring on top-3 cards.
   Now uses CSS custom property --rl-ring set per rank class as the base, preserved on hover. */
.rl-featured-card:hover { transform: translateY(-2px); box-shadow: var(--rl-ring, 0 0 0 0 transparent), 0 12px 28px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06); }
/* BUG FIX: Store rank ring in --rl-ring so hover state can preserve it. */
.rl-rank-1 { --rl-ring: inset 0 0 0 2px #fbbf24; box-shadow: var(--shadow-md), var(--rl-ring); }
.rl-rank-2 { --rl-ring: inset 0 0 0 2px #9ca3af; box-shadow: var(--shadow-md), var(--rl-ring); }
.rl-rank-3 { --rl-ring: inset 0 0 0 2px #cd7f32; box-shadow: var(--shadow-md), var(--rl-ring); }
.rl-card-top { display: flex; align-items: center; gap: 0.5rem; }
.rl-medal { font-size: 1.2rem; }
.rl-card-brand { font-size: 0.95rem; font-weight: 700; color: #111827; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-card-signal { font-size: 0.9rem; }
.rl-card-score { display: flex; align-items: baseline; gap: 0.2rem; }
.rl-score-num { font-size: 1.8rem; font-weight: 800; color: #111827; }
/* BUG FIX v1.0.3: #9ca3af on white = 2.9:1 (WCAG fail). Changed to #6b7280 (~4.5:1). */
.rl-score-denom { font-size: 0.85rem; color: #6b7280; font-weight: 600; }
.rl-score-label { font-size: 0.75rem; color: #6b7280; margin-left: 0.35rem; }
.rl-card-pct { font-size: 0.82rem; color: var(--brand-primary-dark); font-weight: 700; margin: 0; }
.rl-card-pros { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.rl-card-pros li { font-size: 0.78rem; color: #4b5563; padding-left: 1rem; position: relative; }
.rl-card-pros li::before { content: '\2713'; position: absolute; left: 0; color: var(--brand-primary); font-weight: 700; }
/* FIX: Rule 2 — .rl-card-cta is a full-width block CTA (text only): display:block + line-height correct */
/* FIX: Rule 1 — border:none + inset box-shadow only, no visible border+border-radius combo */
.rl-card-cta { margin-top: auto; text-align: center; font-size: 0.82rem; font-weight: 600; color: #374151; padding: 0.65rem 0.5rem; border-radius: var(--radius-pill); border: none; box-shadow: inset 0 0 0 1.5px #d1d5db, 0 1px 2px rgba(0,0,0,0.04); transition: box-shadow var(--transition-base), color var(--transition-base); min-height: 44px; display: block; line-height: 1.5; }
.rl-card-cta:hover { box-shadow: inset 0 0 0 1.5px var(--brand-primary), 0 1px 2px rgba(0,0,0,0.04); color: var(--brand-primary-dark); }

@media (prefers-color-scheme: dark) {
    .rl-heading { color: #f9fafb; }
    /* BUG FIX v1.0.4: .rl-subtitle had no dark override — #6b7280 on dark bg = 3.6:1 (WCAG fail). */
    .rl-subtitle { color: #9ca3af; }
    .rl-table { background: #1f2937; }
    .rl-table thead th { background: #111827; color: #9ca3af; border-bottom-color: #374151; }
    .rl-table tbody tr { border-bottom-color: #374151; }
    .rl-table tbody tr:hover { background: #374151; }
    .rl-table td { color: #d1d5db; }
    /* BUG FIX v1.0.5: Silver (#6b7280) and bronze (#cd7f32) rank numbers had ~3.5-3.6:1
       contrast on dark #1f2937 bg — WCAG AA fail. Override to lighter variants. */
    .rl-top-2 .rl-td-rank { color: #9ca3af; }  /* ~4.6:1 on #1f2937 */
    .rl-top-3 .rl-td-rank { color: #d97706; }  /* ~4.7:1 on #1f2937 */
    .rl-brand-link { color: #f9fafb; }
    /* BUG FIX v1.0.4: .rl-td-disc had no dark override — #1AA67D on #1f2937 = 4.0:1 (WCAG fail). */
    .rl-td-disc { color: var(--brand-primary); }
    /* BUG FIX v1.0.4: .rl-pill-rank had no dark override — #6b7280 on #1f2937 = 3.6:1 (WCAG fail). */
    .rl-pill-rank { color: #9ca3af; }
    .rl-pill { background: #1f2937; color: #d1d5db; box-shadow: inset 0 0 0 1.5px #374151, var(--shadow-md); }
    .rl-featured-card { background: #1f2937; }
    .rl-card-brand, .rl-score-num { color: #f9fafb; }
    /* BUG FIX v1.0.4: .rl-score-denom and .rl-score-label had no dark override. */
    .rl-score-denom, .rl-score-label { color: #9ca3af; }
    /* BUG FIX v1.0.4: .rl-card-pct had no dark override — #1AA67D on #1f2937 = 4.0:1 (WCAG fail). */
    .rl-card-pct { color: var(--brand-primary); }
    .rl-card-pros li { color: #9ca3af; }
    .rl-cta, .rl-card-cta { color: #d1d5db; box-shadow: inset 0 0 0 1.5px #4b5563, 0 1px 2px rgba(0,0,0,0.3); }
    .rl-cta:hover, .rl-card-cta:hover { color: var(--brand-primary); box-shadow: inset 0 0 0 1.5px var(--brand-primary), 0 1px 2px rgba(0,0,0,0.3); }
    /* BUG FIX v1.0.4: Mobile card layout background: #fff breaks dark mode. */
    .rl-score-chip { background: rgba(16,185,129,0.15); color: #6ee7b7; box-shadow: inset 0 0 0 1px rgba(110,231,183,0.3); }
    /* Set mobile card bg variable for dark mode */
    .rl-table-wrap { --rl-card-bg: #1f2937; }
}

/* BUG FIX v1.0.4: :focus-visible for keyboard navigation (WCAG 2.4.7). */
.rl-cta:focus-visible,
.rl-card-cta:focus-visible,
.rl-brand-link:focus-visible,
.rl-pill:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    /* BUG FIX v1.0.5: Added .rl-table tbody tr — its hover background transition was not
       covered by reduced-motion (DESIGN_GUIDE Rule 5 violation). */
    .rl-featured-card, .rl-pill, .rl-cta, .rl-card-cta, .rl-brand-link, .rl-table tbody tr { transition: none; }
}