/* QUIC vs TCP Whitepaper - Main Stylesheet
   Theme: Deep space navy + QUIC teal (#00d4ff) + TCP orange (#ff6b35) + quantum purple (#7b2fff)
   No inline styles - all classes
*/

/* ── Reset & Base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: transparent;
    min-height: 100%;
}

:root {
    --quic: #00d4ff;
    --tcp:  #ff6b35;
    --pq:   #7b2fff;
    --bg:   #030810;
    --surface: #080f1e;
    --card:    rgba(8,16,30,0.82);
    --border:  rgba(0,212,255,0.18);
    --border-tcp: rgba(255,107,53,0.18);
    --text:    #d8e8f8;
    --text-dim: #7890a8;
    --heading: #e8f4ff;
    --quic-glow: 0 0 20px rgba(0,212,255,0.35);
    --tcp-glow:  0 0 20px rgba(255,107,53,0.3);
    --pq-glow:   0 0 20px rgba(123,47,255,0.35);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--text);
    line-height: 1.7;
    min-height: 100vh;
}

/* ── Layout ── */
.content-layout {
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 50;
}

main {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

/* ── TOC Sidebar ── */
.toc-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    padding: 24px 0 24px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.toc-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toc-sidebar-group {
    display: flex;
    flex-direction: column;
}

.toc-tab-heading {
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 10px 20px 10px 17px;
    text-align: left;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    width: 100%;
    border-radius: 0 4px 4px 0;
}

.toc-tab-heading:hover {
    color: var(--quic);
    background: rgba(0,212,255,0.05);
}

.toc-sidebar-group.active .toc-tab-heading {
    color: var(--quic);
    border-left-color: var(--quic);
    background: rgba(0,212,255,0.08);
}

/* Only show subsection links for the active tab group */
.toc-sidebar-list {
    list-style: none;
    padding: 0 0 10px;
    display: none;
}

.toc-sidebar-group.active .toc-sidebar-list {
    display: block;
}

.toc-sidebar-list li a {
    display: block;
    padding: 4px 20px 4px 28px;
    font-size: 0.82rem;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s, background 0.15s, border-color 0.15s;
    border-left: 2px solid transparent;
    line-height: 1.4;
}

.toc-sidebar-list li a:hover {
    color: var(--quic);
    background: rgba(0,212,255,0.06);
    border-left-color: rgba(0,212,255,0.4);
}

/* Scroll-spy: highlight the section currently in view */
.toc-sidebar-list li a.toc-active {
    color: var(--quic);
    border-left-color: var(--quic);
    background: rgba(0,212,255,0.08);
}

@media (max-width: 860px) {
    .toc-sidebar { display: none; }
}

.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 80px;
    position: relative;
}

/* ── Header ── */
.qw-header {
    position: relative;
    z-index: 50;
    padding: 0;
    background: linear-gradient(180deg, rgba(3,8,16,0.92) 0%, rgba(8,15,30,0.88) 100%);
    border-bottom: 1px solid var(--border);
}

.header-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 24px 22px;
}

.header-top {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.logo-link {
    flex-shrink: 0;
    display: block;
}

.logo-image {
    height: 52px;
    width: auto;
    border-radius: 8px;
    display: block;
}

.header-text {
    flex: 1;
    min-width: 200px;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--quic);
    text-shadow: var(--quic-glow);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-subtitle {
    font-size: 0.92rem;
    color: var(--text-dim);
    margin-top: 4px;
    letter-spacing: 0.02em;
}

.header-meta {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.meta-badge-quic {
    background: rgba(0,212,255,0.12);
    color: var(--quic);
    border: 1px solid rgba(0,212,255,0.3);
}

.meta-badge-tcp {
    background: rgba(255,107,53,0.12);
    color: var(--tcp);
    border: 1px solid rgba(255,107,53,0.3);
}

.meta-badge-pq {
    background: rgba(123,47,255,0.12);
    color: #aa80ff;
    border: 1px solid rgba(123,47,255,0.3);
}

.meta-author {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-left: auto;
}


/* ── Full-width Tab Bar ── */
.tab-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: rgba(3,8,16,0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tab-bar-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.tab-bar-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    padding: 14px 22px 11px;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    white-space: nowrap;
    position: relative;
    top: 1px; /* sits on the border-bottom line */
}

.tab-bar-btn:hover {
    color: var(--quic);
    background: rgba(0,212,255,0.05);
}

.tab-bar-btn.active {
    color: var(--quic);
    border-bottom-color: var(--quic);
}

/* ── Tab Content ── */
.tab-content {
    display: none;
    animation: fadeInTab 0.25s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Section Headings ── */
.section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading);
    margin: 48px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-heading.quic-accent {
    color: var(--quic);
    text-shadow: 0 0 16px rgba(0,212,255,0.25);
    border-bottom-color: rgba(0,212,255,0.25);
}

.section-heading.tcp-accent {
    color: var(--tcp);
    text-shadow: 0 0 16px rgba(255,107,53,0.2);
    border-bottom-color: rgba(255,107,53,0.2);
}

.sub-heading {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--quic);
    margin: 32px 0 12px;
}

.sub-heading-tcp {
    color: var(--tcp);
}

/* ── Prose ── */
.prose {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 18px;
}

/* Inline content links — bright, readable on the dark background
   (default browser blue is far too dark here) */
.prose a,
.abstract-text a,
.warning-box a,
.ref-list a,
.compare-panel a,
.overview-intro a {
    color: #4fe3ff;
    text-decoration: underline;
    text-decoration-color: rgba(0, 212, 255, 0.45);
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.prose a:hover,
.abstract-text a:hover,
.warning-box a:hover,
.ref-list a:hover,
.compare-panel a:hover,
.overview-intro a:hover {
    color: #b6f2ff;
    text-decoration-color: #b6f2ff;
}

.prose strong {
    color: var(--heading);
    font-weight: 700;
}

.prose em {
    color: var(--quic);
    font-style: normal;
    font-weight: 600;
}

/* ── Cards ── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--quic), var(--pq), var(--tcp));
    opacity: 0.7;
}

.card-quic {
    border-color: rgba(0,212,255,0.22);
}

.card-quic::before {
    background: linear-gradient(90deg, var(--quic), transparent);
}

.card-tcp {
    border-color: rgba(255,107,53,0.22);
}

.card-tcp::before {
    background: linear-gradient(90deg, var(--tcp), transparent);
}

.card-pq {
    border-color: rgba(123,47,255,0.25);
}

.card-pq::before {
    background: linear-gradient(90deg, var(--pq), transparent);
}

.card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--quic);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title-tcp { color: var(--tcp); }
.card-title-pq  { color: #aa80ff; }

/* ── Abstract Card ── */
.abstract-card {
    background: linear-gradient(135deg, rgba(0,212,255,0.08) 0%, rgba(8,16,30,0.7) 50%, rgba(255,107,53,0.06) 100%);
    border: 1px solid rgba(0,212,255,0.2);
    border-radius: 14px;
    padding: 28px 32px;
    margin: 32px 0;
}

.abstract-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--quic);
    margin-bottom: 12px;
    display: block;
}

.abstract-text {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text);
    font-style: italic;
}

/* ── Info Box ── */
.info-box {
    background: rgba(0,212,255,0.07);
    border-left: 3px solid var(--quic);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 18px 0;
    font-size: 0.88rem;
    color: var(--text);
}

.warning-box {
    background: rgba(255,107,53,0.07);
    border-left: 3px solid var(--tcp);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 18px 0;
    font-size: 0.88rem;
    color: var(--text);
}

.success-box {
    background: rgba(0,230,118,0.07);
    border-left: 3px solid #00e676;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 18px 0;
    font-size: 0.88rem;
    color: var(--text);
}

/* ── Tables ── */
.table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 10px;
    border: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

thead tr {
    background: linear-gradient(90deg, rgba(0,212,255,0.15), rgba(123,47,255,0.12));
}

thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--quic);
    white-space: nowrap;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

tbody tr {
    border-top: 1px solid rgba(255,255,255,0.05);
    transition: background 0.15s;
}

tbody tr:hover {
    background: rgba(0,212,255,0.05);
}

tbody td {
    padding: 10px 16px;
    color: var(--text);
    vertical-align: top;
}

tbody td:first-child {
    color: var(--quic);
    font-weight: 600;
    white-space: nowrap;
}

.td-tcp {
    color: var(--tcp) !important;
}

.td-quic {
    color: var(--quic) !important;
}

.grade-app {
    background: rgba(0,212,255,0.15);
    color: var(--quic);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.grade-ap {
    background: rgba(0,200,130,0.15);
    color: #00e676;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.grade-a {
    background: rgba(0,230,118,0.1);
    color: #69f0ae;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.grade-c {
    background: rgba(255,200,0,0.12);
    color: #ffd740;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.grade-f {
    background: rgba(255,107,53,0.15);
    color: var(--tcp);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* ── Code Blocks ── */
.code-wrapper {
    position: relative;
    margin: 16px 0;
}

pre {
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(0,212,255,0.15);
    border-radius: 8px;
    padding: 18px 20px;
    overflow-x: auto;
    font-size: 0.83rem;
    line-height: 1.6;
}

code {
    font-family: 'Courier New', 'Fira Code', monospace;
    color: #a8d8f0;
}

pre code {
    color: #a8d8f0;
}

/* Offscreen textarea used by clipboard fallback — keeps JS style-free */
.clipboard-textarea {
    position: fixed;
    opacity: 0;
    pointer-events: none;
}

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,212,255,0.15);
    border: 1px solid rgba(0,212,255,0.3);
    color: var(--quic);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.code-wrapper:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background: rgba(0,212,255,0.28);
}

/* ── Lists ── */
.wp-list {
    list-style: none;
    padding: 0;
    margin: 14px 0;
}

.wp-list li {
    padding: 6px 0 6px 22px;
    position: relative;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.6;
}

.wp-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--quic);
    font-size: 0.85rem;
}

.wp-list-tcp li::before { color: var(--tcp); }
.wp-list-pq  li::before { color: #aa80ff; }

/* ── Formula Box ── */
.formula-box {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(0,212,255,0.2);
    border-radius: 8px;
    padding: 18px 22px;
    margin: 16px 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #80d8ff;
    text-align: center;
    letter-spacing: 0.03em;
}

.formula-label {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 8px;
    text-align: left;
}

/* ── Stats Grid ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.stat-card {
    background: rgba(8,16,30,0.78);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    text-align: center;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--quic);
    text-shadow: 0 0 14px rgba(0,212,255,0.3);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-value-tcp { color: var(--tcp); text-shadow: 0 0 14px rgba(255,107,53,0.25); }

.stat-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ── Protocol Compare ── */
.compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 20px 0;
}

.compare-panel {
    background: rgba(8,16,30,0.78);
    border-radius: 10px;
    padding: 20px;
}

.compare-panel-quic {
    border: 1px solid rgba(0,212,255,0.22);
}

.compare-panel-tcp {
    border: 1px solid rgba(255,107,53,0.22);
}

.compare-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.compare-label-quic { color: var(--quic); }
.compare-label-tcp  { color: var(--tcp); }

/* ── Reference List ── */
.ref-list {
    list-style: none;
    padding: 0;
    counter-reset: ref-counter;
}

.ref-list li {
    counter-increment: ref-counter;
    padding: 8px 0 8px 36px;
    position: relative;
    font-size: 0.85rem;
    color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    line-height: 1.6;
}

.ref-list li::before {
    content: '[' counter(ref-counter) ']';
    position: absolute;
    left: 0;
    color: var(--quic);
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 30px;
}

/* ── Tool Cards ── */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 24px 0;
}

.tool-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
    background: rgba(8,16,30,0.80);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.tool-card:hover {
    border-color: rgba(0,212,255,0.4);
    box-shadow: var(--quic-glow);
}

.tool-card-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.tool-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--quic);
    margin-bottom: 6px;
}

.tool-card-url {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-family: monospace;
    margin-bottom: 12px;
}

.tool-card-desc {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.6;
}

/* ── Footer ── */
.qw-footer {
    position: relative;
    z-index: 10;
    background: rgba(3,8,16,0.97);
    border-top: 1px solid var(--border);
    padding: 36px 24px;
    text-align: center;
}

.footer-content {
    max-width: 700px;
    margin: 0 auto;
}

.footer-copyright {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.footer-copyright strong {
    color: var(--text);
}

.footer-notice {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 16px;
}

.footer-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.footer-link {
    color: var(--quic);
    text-decoration: none;
    font-size: 0.82rem;
    transition: opacity 0.2s;
}

.footer-link:hover { opacity: 0.75; }

.footer-sep {
    color: var(--text-dim);
    font-size: 0.7rem;
}

.footer-doc-info {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.7;
}

.footer-doc-info strong {
    color: var(--text);
}

/* ── Overview special layout ── */
.overview-intro {
    margin: 36px 0 0;
}


/* ── Deployment Reality counters ── */
.reality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.reality-item {
    background: rgba(8,16,30,0.78);
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    border: 1px solid var(--border);
}

.reality-count {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}

.reality-count-ap  { color: var(--quic); }
.reality-count-a   { color: #69f0ae; }
.reality-count-f   { color: var(--tcp); }

.reality-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Responsive ── */
@media (max-width: 680px) {
    .compare-row { grid-template-columns: 1fr; }
    .reality-grid { grid-template-columns: repeat(2, 1fr); }
    .page-title { font-size: 1.35rem; }
    .header-meta { flex-direction: column; align-items: flex-start; }
    .meta-author { margin-left: 0; }
}

@media (max-width: 480px) {
    .content-wrapper { padding: 0 16px 60px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .reality-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Utility classes replacing inline styles ── */
.tool-grid-top {
    margin-top: 36px;
}

.section-top {
    margin-top: 36px;
}

.ref-note {
    margin-top: 12px;
    font-size: 0.83rem;
    color: var(--text-dim);
}


/* ══════════════════════════════════════════════════════════════════
   Feature Comparison Matrix — components specific to this page
   ══════════════════════════════════════════════════════════════════ */

:root {
    --ok:    #26d97f;
    --part:  #ffb020;
    --none:  #4a5a6d;
    --alone: #7b2fff;
}

/* ── The matrix tab runs wide ──
   .content-wrapper is 900px because that is a comfortable measure for prose.
   A ten-column table is not prose: at 900px the reader scrolls nine vendors
   through a porthole while most of the screen sits empty. This tab opts out and
   takes the width the sidebar leaves it. ── */
#matrix-tab .content-wrapper {
    max-width: none;
    padding: 0 28px 80px;
}

/* ── Verdict and Method carry wide multi-column tables ──
   The wrapper opens up for them, but paragraphs, lists and references stay at
   the 900px measure: ~90 characters is already the top of comfortable reading
   and widening prose to match a table makes it harder to read, not easier. ── */
#verdict-tab .content-wrapper,
#method-tab .content-wrapper {
    max-width: 1180px;
}

#verdict-tab .prose,
#verdict-tab .wp-list,
#method-tab .prose,
#method-tab .wp-list,
#method-tab .ref-list,
#method-tab .ref-note {
    max-width: 900px;
}

/* ── Matrix heading (outside the scroll container, so it never clips) ── */
.matrix-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--quic);
    margin-bottom: 10px;
}

.matrix-caption-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Filter bar ── */
.matrix-controls {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    /* Inset to match the inner edge of the boxed elements below it. The bar has
       no border of its own, so at zero padding "Show" sat hard against the
       content edge while the legend and table text began 16px further in, and
       the row read as hanging outside the column. */
    padding: 14px 16px;
    margin-bottom: 18px;
    background: linear-gradient(180deg, rgba(3,8,16,0.97) 70%, rgba(3,8,16,0));
    border-bottom: 1px solid var(--border);
}

.matrix-filter-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 2px;
}

.filter-btn {
    background: rgba(0,212,255,0.05);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.filter-btn:hover { color: var(--quic); border-color: rgba(0,212,255,0.45); }

.filter-btn.active {
    background: rgba(0,212,255,0.14);
    border-color: var(--quic);
    color: var(--quic);
    box-shadow: var(--quic-glow);
}

.filter-btn.filter-alone.active {
    background: rgba(123,47,255,0.16);
    border-color: var(--alone);
    color: #c9a8ff;
    box-shadow: var(--pq-glow);
}

.filter-btn.filter-gap.active {
    background: rgba(255,107,53,0.14);
    border-color: var(--tcp);
    color: #ffb08e;
    box-shadow: var(--tcp-glow);
}

.matrix-search {
    background: rgba(8,16,30,0.9);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.8rem;
    padding: 7px 15px;
    min-width: 0;
    /* Absorbs the slack. It used to be capped at 300px with the count pushed to
       the far right by `margin-left: auto`, which opened a 490px void in the
       middle of the bar on a wide screen. */
    flex: 1 1 220px;
    max-width: 460px;
}

.matrix-search::placeholder { color: var(--none); }
.matrix-search:focus { outline: none; border-color: var(--quic); box-shadow: var(--quic-glow); }

/* Sits next to the field it reports on — it is the search's readout, not a
   free-floating page statistic. */
.matrix-count {
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Legend ── */
.legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 22px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-dim); }
.legend-key  { font-size: 1rem; font-weight: 700; line-height: 1; }

/* ── The matrix table ── */
.matrix-wrapper {
    /* `overflow-x: auto` with `overflow-y: visible` computes the y axis to
       `auto` per spec, which silently makes this a vertical scroll container —
       so a `top` offset on the sticky header resolved against the wrapper and
       left a dead band above the table. Owning that instead: a bounded pane
       with the header sticky at its own top edge, which is the right pattern
       for 217 rows anyway — the column headings and the feature name both stay
       on screen for the whole scroll. */
    overflow: auto;
    max-height: calc(100vh - 200px);
    overscroll-behavior: contain;
    margin: 0 0 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(4,10,20,0.72);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    -webkit-overflow-scrolling: touch;
}

.matrix-wrapper::-webkit-scrollbar { height: 10px; }
.matrix-wrapper::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.28); border-radius: 5px; }

table.matrix {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 980px;
    font-size: 0.82rem;
}

table.matrix th, table.matrix td {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(0,212,255,0.09);
    vertical-align: top;
}

table.matrix thead th {
    position: sticky;
    /* Sticks to the top of the scroll pane, not the page. */
    top: 0;
    z-index: 30;
    background: #061020;
    border-bottom: 2px solid var(--border);
    color: var(--heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    /* Deliberately wrapping: every cell under these headings holds one glyph,
       so `nowrap` was sizing nine columns to the width of "NGINX PLUS / F5,
       licensed" and pushing the table 170px past the screen. Wrapped, the
       whole matrix fits a laptop without sideways scrolling. */
    white-space: normal;
    width: 84px;
    min-width: 84px;
    line-height: 1.3;
}

table.matrix thead th.col-feature {
    left: 0;
    z-index: 40;
    text-align: left;
    width: 300px;
    min-width: 260px;
}

table.matrix thead th.col-us {
    color: var(--quic);
    background: #07182a;
    border-left: 1px solid rgba(0,212,255,0.35);
    border-right: 1px solid rgba(0,212,255,0.35);
}

table.matrix th.col-vendor-sub {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--text-dim);
}

table.matrix tbody th.feat {
    position: sticky;
    left: 0;
    z-index: 20;
    background: #050d19;
    border-right: 1px solid var(--border);
    color: var(--text);
    font-weight: 500;
    text-align: left;
    min-width: 260px;
    max-width: 340px;
}

table.matrix tbody tr:hover th.feat { background: #08182b; color: var(--heading); }
table.matrix tbody tr:hover td      { background: rgba(0,212,255,0.035); }

table.matrix td { text-align: center; white-space: nowrap; }

table.matrix td.us {
    background: rgba(0,212,255,0.06);
    border-left: 1px solid rgba(0,212,255,0.2);
    border-right: 1px solid rgba(0,212,255,0.2);
}

table.matrix tbody tr:hover td.us { background: rgba(0,212,255,0.11); }

/* Category separator rows */
tr.cat-row th {
    position: sticky;
    left: 0;
    z-index: 25;
    background: linear-gradient(90deg, rgba(0,212,255,0.16), rgba(0,212,255,0.03));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--quic);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    padding: 11px 14px;
    text-align: left;
}

/* Status glyphs */
.g { display: inline-block; font-size: 0.95rem; font-weight: 700; line-height: 1; }
.g-f { color: var(--ok); }
.g-p { color: var(--part); }
.g-n { color: var(--none); }
.g-t { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
td.us .g-t { color: var(--quic); }

/* Row that only we have */
tr.only-us th.feat {
    border-left: 3px solid var(--alone);
    padding-left: 11px;
}

tr.only-us th.feat::after {
    content: "ONLY";
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid rgba(123,47,255,0.5);
    border-radius: 3px;
    background: rgba(123,47,255,0.14);
    color: #c9a8ff;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    vertical-align: middle;
}

/* Row where someone beats us */
tr.behind th.feat {
    border-left: 3px solid var(--tcp);
    padding-left: 11px;
}

.feat-note {
    display: block;
    margin-top: 3px;
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--text-dim);
    white-space: normal;
    font-weight: 400;
}

/* ── Score chart: stacked horizontal bars ──
   Part-to-whole across nine long-named categories, so the bars run horizontal
   and each is directly labelled. Two ordered segments (native, then partial)
   over a neutral remainder track. ── */

:root {
    --sc-native:  #12a862;   /* validated dark-mode step: L 0.62, C 0.13, 4.1:1 on surface */
    --sc-partial: #c88400;   /* validated dark-mode step: L 0.65, C 0.13, 4.6:1 on surface */
    --sc-track:   rgba(255,255,255,0.05);
}

.score-chart {
    margin: 26px 0 14px;
    padding: 20px 20px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.sc-caption {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--quic);
    margin-bottom: 14px;
}

.sc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0,212,255,0.1);
}

.sc-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    color: var(--text-dim);
}

.sc-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.sc-sw-native  { background: var(--sc-native); }
.sc-sw-partial { background: var(--sc-partial); }
.sc-sw-absent  { background: var(--sc-track); border: 1px solid rgba(255,255,255,0.12); }

.sc-rows { list-style: none; margin: 0; padding: 0; }

.sc-row {
    display: grid;
    grid-template-columns: minmax(0, 128px) minmax(0, 1fr) 46px;
    grid-template-areas: "label track value";
    align-items: center;
    gap: 0 14px;
    padding: 7px 8px 7px 10px;
    border-left: 3px solid transparent;
    border-radius: 5px;
    transition: background 0.18s;
}

.sc-row:hover { background: rgba(0,212,255,0.05); }
.sc-row.is-us { border-left-color: var(--alone); background: rgba(123,47,255,0.07); }
.sc-row.is-us:hover { background: rgba(123,47,255,0.12); }

.sc-label { grid-area: label; min-width: 0; line-height: 1.25; }

.sc-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--heading);
    overflow-wrap: break-word;
}

.sc-row.is-us .sc-name { color: #c9a8ff; }

.sc-edition {
    display: block;
    font-size: 0.63rem;
    color: var(--none);
    overflow-wrap: break-word;
}

.sc-track {
    grid-area: track;
    display: flex;
    min-width: 0;
    height: 15px;
    border-radius: 4px;
    background: var(--sc-track);
    overflow: hidden;
}

.sc-seg { display: block; height: 100%; min-width: 0; }

/* 2px surface gap between adjacent fills, per the mark spec. */
.sc-native  { background: var(--sc-native);  border-radius: 4px 0 0 4px; }
.sc-partial { background: var(--sc-partial); border-radius: 0 4px 4px 0; box-shadow: -2px 0 0 0 var(--card); }

/* A bar with no partial segment keeps a rounded data-end on the native fill. */
.sc-partial.w-0 { box-shadow: none; }
.sc-native.w-0 + .sc-partial { border-radius: 4px; box-shadow: none; }

.sc-value {
    grid-area: value;
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sc-row.is-us .sc-value { color: var(--quic); }
.sc-pct { font-size: 0.66rem; font-weight: 600; color: var(--text-dim); margin-left: 1px; }

.sc-detail {
    grid-area: detail;
    font-size: 0.66rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    display: none;
}

/* Narrow: the label moves above its own bar so neither is squeezed. */
@media (max-width: 620px) {
    .score-chart { padding: 16px 14px 12px; }
    .sc-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label value"
            "track track"
            "detail detail";
        gap: 3px 10px;
        padding: 9px 8px;
    }
    .sc-track { height: 13px; margin-top: 3px; }
    .sc-detail { display: block; margin-top: 3px; }
}

/* ── Gap / unique callout lists ── */
.verdict-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
    margin: 22px 0 30px;
}

.verdict-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--quic);
    border-radius: 8px;
    padding: 16px 18px;
    min-width: 0;
}

.verdict-card.is-gap  { border-left-color: var(--tcp); border-color: var(--border-tcp); }
.verdict-card.is-lead { border-left-color: var(--alone); }

.verdict-name { font-size: 0.95rem; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.verdict-card ul { margin: 0; padding-left: 18px; }
.verdict-card li { font-size: 0.85rem; line-height: 1.6; margin-bottom: 5px; color: var(--text); }
.verdict-card li strong { color: var(--heading); }

/* ── Evidence table (validation) ── */
table.evidence { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
table.evidence th, table.evidence td { padding: 9px 12px; border-bottom: 1px solid rgba(0,212,255,0.1); text-align: left; vertical-align: top; }
table.evidence thead th { color: var(--quic); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
table.evidence td code { font-size: 0.76rem; }
table.evidence td.ev-ok { color: var(--ok); font-weight: 600; white-space: nowrap; }

/* ── "Who should pick what": five columns, two of them verdicts ── */
table.pick-table { min-width: 940px; }

table.pick-table th:nth-child(1), table.pick-table td:nth-child(1) { width: 17%; }
table.pick-table th:nth-child(2), table.pick-table td:nth-child(2) { width: 9%;  }
table.pick-table th:nth-child(3), table.pick-table td:nth-child(3) { width: 32%; }
table.pick-table th:nth-child(4), table.pick-table td:nth-child(4) { width: 10%; }
table.pick-table th:nth-child(5), table.pick-table td:nth-child(5) { width: 32%; }

table.pick-table td:nth-child(1) { color: var(--heading); font-weight: 600; }

/* The runner-up is a real recommendation, so it is coloured — but a step back
   from the winner, so the two are never confused at a glance. */
table.pick-table td.ev-alt {
    color: var(--part);
    font-weight: 600;
    white-space: nowrap;
}

table.pick-table td:nth-child(5) { color: var(--text-dim); }

/* Separate the "give up" half from the "wins" half. */
table.pick-table th:nth-child(4), table.pick-table td:nth-child(4) {
    border-left: 1px solid rgba(255,255,255,0.09);
}

@media (max-width: 760px) {
    table.pick-table td.ev-alt { white-space: normal; }
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .matrix-count { width: 100%; }
    table.matrix { font-size: 0.78rem; }
    table.matrix thead th.col-feature,
    table.matrix tbody th.feat { min-width: 200px; max-width: 220px; }
}

@media (max-width: 900px) {
    /* Nested vertical scrolling is miserable on a phone: release the pane and
       let the page carry it. Only the horizontal axis still scrolls. */
    .matrix-wrapper { max-height: none; }
    table.matrix thead th { position: static; }
}

@media (max-width: 640px) {
    .matrix-controls { position: static; }
    table.matrix tbody th.feat { position: static; }
    table.matrix thead th.col-feature { position: static; }
    .scorecard { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
}

/* ── Page background (no canvas; the matrix is the content) ── */
#pc-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(123,47,255,0.16) 0%, rgba(3,8,16,0) 55%),
        radial-gradient(ellipse at 50% 30%, rgba(0,40,80,0.6) 0%, rgba(3,8,16,0.95) 60%, #030810 100%);
}

/* Screen-reader-only label (the search input is visually labelled by its placeholder) */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ── Generated segment widths ──
   Strict CSP forbids inline styles, so every whole-percent width is a class and
   PHP selects the one matching the figure it computed. flex-basis (not width)
   because the segments are flex children of the track. ── */
.sc-seg.w-0 { flex: 0 0 0%; }
.sc-seg.w-1 { flex: 0 0 1%; }
.sc-seg.w-2 { flex: 0 0 2%; }
.sc-seg.w-3 { flex: 0 0 3%; }
.sc-seg.w-4 { flex: 0 0 4%; }
.sc-seg.w-5 { flex: 0 0 5%; }
.sc-seg.w-6 { flex: 0 0 6%; }
.sc-seg.w-7 { flex: 0 0 7%; }
.sc-seg.w-8 { flex: 0 0 8%; }
.sc-seg.w-9 { flex: 0 0 9%; }
.sc-seg.w-10 { flex: 0 0 10%; }
.sc-seg.w-11 { flex: 0 0 11%; }
.sc-seg.w-12 { flex: 0 0 12%; }
.sc-seg.w-13 { flex: 0 0 13%; }
.sc-seg.w-14 { flex: 0 0 14%; }
.sc-seg.w-15 { flex: 0 0 15%; }
.sc-seg.w-16 { flex: 0 0 16%; }
.sc-seg.w-17 { flex: 0 0 17%; }
.sc-seg.w-18 { flex: 0 0 18%; }
.sc-seg.w-19 { flex: 0 0 19%; }
.sc-seg.w-20 { flex: 0 0 20%; }
.sc-seg.w-21 { flex: 0 0 21%; }
.sc-seg.w-22 { flex: 0 0 22%; }
.sc-seg.w-23 { flex: 0 0 23%; }
.sc-seg.w-24 { flex: 0 0 24%; }
.sc-seg.w-25 { flex: 0 0 25%; }
.sc-seg.w-26 { flex: 0 0 26%; }
.sc-seg.w-27 { flex: 0 0 27%; }
.sc-seg.w-28 { flex: 0 0 28%; }
.sc-seg.w-29 { flex: 0 0 29%; }
.sc-seg.w-30 { flex: 0 0 30%; }
.sc-seg.w-31 { flex: 0 0 31%; }
.sc-seg.w-32 { flex: 0 0 32%; }
.sc-seg.w-33 { flex: 0 0 33%; }
.sc-seg.w-34 { flex: 0 0 34%; }
.sc-seg.w-35 { flex: 0 0 35%; }
.sc-seg.w-36 { flex: 0 0 36%; }
.sc-seg.w-37 { flex: 0 0 37%; }
.sc-seg.w-38 { flex: 0 0 38%; }
.sc-seg.w-39 { flex: 0 0 39%; }
.sc-seg.w-40 { flex: 0 0 40%; }
.sc-seg.w-41 { flex: 0 0 41%; }
.sc-seg.w-42 { flex: 0 0 42%; }
.sc-seg.w-43 { flex: 0 0 43%; }
.sc-seg.w-44 { flex: 0 0 44%; }
.sc-seg.w-45 { flex: 0 0 45%; }
.sc-seg.w-46 { flex: 0 0 46%; }
.sc-seg.w-47 { flex: 0 0 47%; }
.sc-seg.w-48 { flex: 0 0 48%; }
.sc-seg.w-49 { flex: 0 0 49%; }
.sc-seg.w-50 { flex: 0 0 50%; }
.sc-seg.w-51 { flex: 0 0 51%; }
.sc-seg.w-52 { flex: 0 0 52%; }
.sc-seg.w-53 { flex: 0 0 53%; }
.sc-seg.w-54 { flex: 0 0 54%; }
.sc-seg.w-55 { flex: 0 0 55%; }
.sc-seg.w-56 { flex: 0 0 56%; }
.sc-seg.w-57 { flex: 0 0 57%; }
.sc-seg.w-58 { flex: 0 0 58%; }
.sc-seg.w-59 { flex: 0 0 59%; }
.sc-seg.w-60 { flex: 0 0 60%; }
.sc-seg.w-61 { flex: 0 0 61%; }
.sc-seg.w-62 { flex: 0 0 62%; }
.sc-seg.w-63 { flex: 0 0 63%; }
.sc-seg.w-64 { flex: 0 0 64%; }
.sc-seg.w-65 { flex: 0 0 65%; }
.sc-seg.w-66 { flex: 0 0 66%; }
.sc-seg.w-67 { flex: 0 0 67%; }
.sc-seg.w-68 { flex: 0 0 68%; }
.sc-seg.w-69 { flex: 0 0 69%; }
.sc-seg.w-70 { flex: 0 0 70%; }
.sc-seg.w-71 { flex: 0 0 71%; }
.sc-seg.w-72 { flex: 0 0 72%; }
.sc-seg.w-73 { flex: 0 0 73%; }
.sc-seg.w-74 { flex: 0 0 74%; }
.sc-seg.w-75 { flex: 0 0 75%; }
.sc-seg.w-76 { flex: 0 0 76%; }
.sc-seg.w-77 { flex: 0 0 77%; }
.sc-seg.w-78 { flex: 0 0 78%; }
.sc-seg.w-79 { flex: 0 0 79%; }
.sc-seg.w-80 { flex: 0 0 80%; }
.sc-seg.w-81 { flex: 0 0 81%; }
.sc-seg.w-82 { flex: 0 0 82%; }
.sc-seg.w-83 { flex: 0 0 83%; }
.sc-seg.w-84 { flex: 0 0 84%; }
.sc-seg.w-85 { flex: 0 0 85%; }
.sc-seg.w-86 { flex: 0 0 86%; }
.sc-seg.w-87 { flex: 0 0 87%; }
.sc-seg.w-88 { flex: 0 0 88%; }
.sc-seg.w-89 { flex: 0 0 89%; }
.sc-seg.w-90 { flex: 0 0 90%; }
.sc-seg.w-91 { flex: 0 0 91%; }
.sc-seg.w-92 { flex: 0 0 92%; }
.sc-seg.w-93 { flex: 0 0 93%; }
.sc-seg.w-94 { flex: 0 0 94%; }
.sc-seg.w-95 { flex: 0 0 95%; }
.sc-seg.w-96 { flex: 0 0 96%; }
.sc-seg.w-97 { flex: 0 0 97%; }
.sc-seg.w-98 { flex: 0 0 98%; }
.sc-seg.w-99 { flex: 0 0 99%; }
.sc-seg.w-100 { flex: 0 0 100%; }