/**
 * MeerSentry Deferred CSS — v0.6.1
 * Non-critical styles loaded via preload/onload swap.
 * Source: extracted from meersentry-design.php priorities 2–5.
 *
 * Contents:
 *   1. Component CSS (old priority 2): disclosure, newsletter, 404, author
 *   2. Layout CSS (old priority 3 minus nav): scroll-margin, content layout,
 *      breadcrumbs, footer, ToC, archive, entry headers
 *   3. Phase 3 components (old priority 4): quick answer, post header,
 *      product cards, comparison tables, buttons, badges, verdict,
 *      editor note, AAWP overrides
 *   4. Polish (old priority 5): reading progress bar, transitions, focus,
 *      reduced-motion, images, icons, a11y
 */

/* ==========================================================================
   1. Component CSS (old priority 2)
   ========================================================================== */

/* --- T3.4: Affiliate disclosure — --ms-warning left border, IBM Plex Mono 13px italic --- */
.ms-affiliate-disclosure {
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ms-text-muted);
    padding: var(--ms-space-4);
    margin-bottom: var(--ms-space-5);
    background: var(--ms-bg-secondary);
    border-left: 3px solid var(--ms-warning);
    border-radius: 0 4px 4px 0;
}

/* --- T3.4: Newsletter form — --ms-secondary bg, white header, --ms-primary submit --- */
.meersentry-newsletter {
    margin: var(--ms-space-7) calc(-1 * var(--ms-space-5)) var(--ms-space-5);
    padding: var(--ms-space-8) var(--ms-space-6);
    border: none;
    border-radius: 0;
    background: var(--ms-secondary);
    color: var(--ms-bg-primary);
    min-height: 0;
    contain: layout;
    text-align: center;
}
@media (min-width: 768px) {
    .meersentry-newsletter {
        margin-left: calc(-1 * var(--ms-space-6));
        margin-right: calc(-1 * var(--ms-space-6));
    }
}
@media (min-width: 1200px) {
    .meersentry-newsletter {
        margin-left: -120px;
        margin-right: -120px;
        border-radius: 8px;
    }
}
.meersentry-newsletter > h3 {
    font-family: var(--ms-font-body);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ms-bg-primary);
    margin: 0 0 var(--ms-space-2);
    line-height: 1.3;
}
.meersentry-newsletter > p {
    margin: 0 0 var(--ms-space-5);
    color: var(--ms-bg-secondary);
    opacity: 0.85;
    font-size: 0.9375rem;
}

.ms-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-3);
    margin: 0 auto;
    padding: 0;
    max-width: 520px;
}
@media (min-width: 768px) {
    .ms-newsletter-form {
        flex-direction: row;
    }
}
.ms-newsletter-field {
    flex: 1 1 200px;
    margin: 0;
}
.ms-newsletter-input {
    width: 100%;
    padding: var(--ms-space-3) var(--ms-space-4);
    border: 1px solid var(--ms-border-subtle);
    border-radius: 4px;
    font-family: var(--ms-font-body);
    font-size: 1rem;
    background: var(--ms-bg-primary);
    color: var(--ms-text);
    box-sizing: border-box;
}
.ms-newsletter-btn {
    padding: var(--ms-space-3) var(--ms-space-5);
    border: 0;
    border-radius: 4px;
    background: var(--ms-primary);
    color: var(--ms-secondary);
    font-family: var(--ms-font-mono);
    font-weight: 700;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    flex: 0 0 auto;
    line-height: 1.4;
    transition: background 150ms ease;
}
.ms-newsletter-btn:hover { background: var(--ms-primary-hover); }
.ms-newsletter-btn > span { color: inherit; }
.ms-newsletter-fallback {
    margin: var(--ms-space-4) auto 0;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.92) !important;
    max-width: 520px;
}
.ms-newsletter-fallback a,
.meersentry-newsletter .ms-newsletter-fallback a {
    color: #fff !important;
    text-decoration: underline;
}

/* --- Author link styling (migrated from security.php) --- */
a.entry-author-link, a[href*="/author/"] {
    text-decoration: none;
    color: inherit;
}
a.entry-author-link:hover, a[href*="/author/"]:hover {
    text-decoration: underline;
    color: var(--ms-primary);
}

/* --- T3.4: 404 page CSS — restyled with design tokens --- */
.ms-404-wrap {
    max-width: 680px;
    margin: var(--ms-space-9) auto;
    padding: 0 var(--ms-space-5);
    text-align: center;
}
.ms-404-wrap h1 {
    font-size: 2.441rem;
    color: var(--ms-secondary);
    margin-bottom: var(--ms-space-3);
}
.ms-404-wrap .ms-404-sub {
    font-size: 1.125rem;
    color: var(--ms-text-muted);
    margin-bottom: var(--ms-space-7);
}
.ms-404-wrap .ms-404-search {
    margin-bottom: var(--ms-space-7);
}
.ms-404-wrap .ms-404-search .search-field {
    width: 100%;
    max-width: 440px;
    padding: var(--ms-space-3) var(--ms-space-4);
    font-family: var(--ms-font-body);
    font-size: 1rem;
    border: 1px solid var(--ms-border-subtle);
    border-radius: 4px;
    color: var(--ms-text);
}
.ms-404-wrap .ms-404-search .search-submit {
    margin-top: var(--ms-space-3);
    padding: var(--ms-space-3) var(--ms-space-5);
    font-family: var(--ms-font-body);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    background: var(--ms-primary);
    color: var(--ms-bg-primary);
    cursor: pointer;
    transition: background 150ms ease;
}
.ms-404-wrap .ms-404-search .search-submit:hover {
    background: var(--ms-primary-hover);
}
.ms-404-cats {
    margin-bottom: var(--ms-space-7);
}
.ms-404-cats h2 {
    font-family: var(--ms-font-mono);
    font-size: 1.25rem;
    color: var(--ms-secondary);
    margin-bottom: var(--ms-space-4);
}
.ms-404-cats ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ms-space-3);
}
.ms-404-cats ul li a {
    display: inline-block;
    padding: var(--ms-space-2) var(--ms-space-4);
    border: 1px solid var(--ms-border-subtle);
    border-radius: 4px;
    text-decoration: none;
    color: var(--ms-secondary);
    font-size: 0.9375rem;
    transition: background 150ms ease, border-color 150ms ease;
}
.ms-404-cats ul li a:hover {
    background: var(--ms-bg-secondary);
    border-color: var(--ms-text-muted);
}
.ms-404-home a {
    color: var(--ms-secondary);
    font-weight: 600;
    text-decoration: underline;
}
.ms-404-home a:hover {
    color: var(--ms-primary);
}

/* --- T3.4: Author archive box — enhanced with design tokens --- */
.ms-author-box {
    display: flex;
    gap: var(--ms-space-5);
    align-items: flex-start;
    padding: var(--ms-space-6);
    margin-bottom: var(--ms-space-7);
    background: var(--ms-bg-secondary);
    border: 1px solid var(--ms-border-subtle);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}
.ms-author-box img {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ms-author-box h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ms-secondary);
    margin: 0 0 var(--ms-space-2) 0;
}
.ms-author-box .ms-author-bio {
    font-family: var(--ms-font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ms-text);
    margin-bottom: var(--ms-space-3);
}
.ms-author-box .ms-author-link {
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    color: var(--ms-text-muted);
    text-decoration: underline;
    transition: color 150ms ease;
}
.ms-author-box .ms-author-link:hover {
    color: var(--ms-primary);
}

/* ==========================================================================
   2. Layout CSS (old priority 3 — nav CSS excluded, stays inline critical)
   ========================================================================== */

/* --- Scroll offset for anchor links under sticky nav --- */
.entry-content h2[id] {
    scroll-margin-top: 80px;
}
@media (min-width: 768px) {
    .entry-content h2[id] {
        scroll-margin-top: 88px;
    }
}

/* --- T2.3: Footer --- */
.ms-footer {
    background: var(--ms-secondary);
    color: var(--ms-bg-secondary);
    padding: var(--ms-space-8) var(--ms-space-5);
}

.ms-footer a {
    color: var(--ms-bg-secondary);
    text-decoration: none;
}
.ms-footer a:hover {
    color: var(--ms-primary);
}

.ms-footer-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-7);
}

@media (min-width: 768px) {
    .ms-footer-inner {
        flex-direction: row;
        gap: var(--ms-space-6);
    }
}

.ms-footer-col {
    flex: 1;
}

.ms-footer-col h4 {
    font-family: var(--ms-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ms-bg-primary);
    margin: 0 0 var(--ms-space-4) 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ms-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ms-footer-col li {
    margin-bottom: var(--ms-space-2);
}

.ms-footer-col li a {
    font-size: 0.875rem;
    line-height: 1.6;
}

.ms-footer-col p {
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0 0 var(--ms-space-3) 0;
    color: var(--ms-bg-secondary);
    opacity: 0.85;
}

.ms-footer-copy {
    text-align: center;
    padding-top: var(--ms-space-7);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: var(--ms-space-7);
}

.ms-footer-copy p {
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    color: var(--ms-bg-secondary);
    opacity: 0.7;
    margin: 0;
}

/* --- T2.4: Table of Contents (sticky sidebar) --- */
.ms-toc {
    display: none;
}

@media (min-width: 1280px) {
    .ms-toc {
        display: block;
        position: fixed;
        top: 96px;
        right: calc((100vw - 680px) / 2 - 260px);
        max-width: 200px;
        max-height: 70vh;
        overflow-y: auto;
        padding: var(--ms-space-4);
        z-index: 100;
        background: var(--ms-bg, #fff);
        border-radius: 4px;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 300ms ease, transform 300ms ease;
        pointer-events: none;
    }
    .ms-toc.ms-toc-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.ms-toc-title {
    font-family: var(--ms-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ms-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--ms-space-3) 0;
    padding-left: var(--ms-space-3);
}

.ms-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ms-toc-link {
    display: block;
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ms-text-muted);
    text-decoration: none;
    padding: var(--ms-space-1) var(--ms-space-3);
    border-left: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
}

.ms-toc-link:hover {
    color: var(--ms-text);
}

.ms-toc-link.ms-toc-active {
    color: var(--ms-primary);
    border-left-color: var(--ms-primary);
}

/* --- Archive / Category pages --- */
.page-header {
    max-width: var(--ms-content-width, 680px);
    margin: 0 auto var(--ms-space-6);
    padding: var(--ms-space-6) var(--ms-space-4) var(--ms-space-4);
    border-bottom: 1px solid var(--ms-border-subtle);
}
.page-header .page-title {
    font-family: var(--ms-font-body);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ms-text);
    margin: 0 0 var(--ms-space-2);
    letter-spacing: -0.01em;
}
.page-header .taxonomy-description,
.page-header .taxonomy-description p {
    font-family: var(--ms-font-body);
    font-size: 0.9375rem;
    color: var(--ms-text-muted);
    margin: 0;
    line-height: 1.5;
}

.entry-title a {
    color: var(--ms-text);
    text-decoration: none;
}
.entry-title a:hover {
    color: var(--ms-primary);
}
body .site-content .entry-meta {
    text-align: left !important;
}
body.archive .site-content .entry-header,
body.category .site-content .entry-header,
body.tag .site-content .entry-header {
    text-align: left !important;
}
body.archive .site-content .entry-title,
body.category .site-content .entry-title,
body.tag .site-content .entry-title {
    font-size: 1.25rem;
    font-weight: 600;
}
.archive .entry-title a,
.category .entry-title a,
.tag .entry-title a {
    color: var(--ms-text);
    text-decoration: none;
}
.archive .entry-title a:hover,
.category .entry-title a:hover,
.tag .entry-title a:hover {
    color: var(--ms-primary);
}

/* ==========================================================================
   3. Phase 3 Components (old priority 4)
   ========================================================================== */

/* --- T3.1: Quick Answer hero card --- */
.ms-quick-answer {
    background: var(--ms-bg-secondary);
    border: 1px solid var(--ms-border-subtle);
    border-radius: 8px;
    padding: var(--ms-space-5);
    margin-bottom: var(--ms-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-4);
}
@media (min-width: 768px) {
    .ms-quick-answer {
        flex-direction: row;
        align-items: center;
        gap: var(--ms-space-5);
    }
}
.ms-quick-answer-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--ms-border-subtle);
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .ms-quick-answer-img {
        width: 200px;
    }
}
.ms-quick-answer-body {
    flex: 1;
    min-width: 0;
}
.ms-quick-answer-label {
    font-family: var(--ms-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-primary);
    margin: 0 0 var(--ms-space-2);
}
.ms-quick-answer-title {
    font-family: var(--ms-font-body);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ms-secondary);
    margin: 0 0 var(--ms-space-2);
    line-height: 1.3;
}
.ms-qa-verdict {
    font-size: 0.9375rem;
    color: var(--ms-text-muted);
    margin: 0 0 var(--ms-space-4);
    line-height: 1.6;
}
.ms-qa-cta {
    display: inline-block;
    padding: var(--ms-space-3) var(--ms-space-5);
    background: var(--ms-primary);
    color: var(--ms-bg-primary);
    font-family: var(--ms-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background 150ms ease;
}
.ms-qa-cta:hover {
    background: var(--ms-primary-hover);
    color: var(--ms-bg-primary);
}

/* --- T3.2: Post header --- */
.ms-post-header {
    margin-bottom: var(--ms-space-6);
}
.ms-category-tag {
    display: inline-block;
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-primary);
    text-decoration: none;
    margin-bottom: var(--ms-space-3);
}
.ms-category-tag:hover {
    color: var(--ms-primary-hover);
}
.ms-post-header h1 {
    font-family: var(--ms-font-body);
    font-size: 2.441rem;
    font-weight: 600;
    color: var(--ms-secondary);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 var(--ms-space-3);
}
.ms-post-deck {
    font-size: 1.125rem;
    color: var(--ms-text-muted);
    line-height: 1.65;
    margin: 0 0 var(--ms-space-4);
}
.ms-meta-row {
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    color: var(--ms-text-muted);
    line-height: 1.5;
    margin-bottom: var(--ms-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ms-space-1);
}
.ms-meta-row a {
    color: var(--ms-text-muted);
    text-decoration: none;
}
.ms-meta-row a:hover {
    color: var(--ms-primary);
}
.ms-meta-sep {
    margin: 0 var(--ms-space-1);
    opacity: 0.5;
}
.ms-hero-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--ms-border-subtle);
    border-radius: 4px;
    margin-top: var(--ms-space-4);
}

/* --- T3.2: Product card --- */
.ms-product-card {
    background: var(--ms-bg-secondary);
    border: 1px solid var(--ms-border-subtle);
    border-radius: 8px;
    padding: var(--ms-space-5);
    margin-bottom: var(--ms-space-6);
    position: relative;
}
.ms-product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ms-font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ms-primary);
    margin-bottom: var(--ms-space-3);
}
.ms-product-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--ms-border-subtle);
    margin-bottom: var(--ms-space-4);
}
.ms-product-card h3 {
    font-family: var(--ms-font-mono);
    font-size: 1.563rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ms-secondary);
    margin: 0 0 var(--ms-space-3);
}
.ms-product-rating {
    display: flex;
    align-items: center;
    gap: var(--ms-space-2);
    font-family: var(--ms-font-mono);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--ms-text);
    margin-bottom: var(--ms-space-4);
}
.ms-product-rating-stars {
    color: var(--ms-warning);
    letter-spacing: 1px;
}
.ms-product-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ms-space-4);
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
.ms-product-specs li {
    display: flex;
    justify-content: space-between;
    padding: var(--ms-space-2) 0;
    border-bottom: 1px solid var(--ms-border-subtle);
}
.ms-product-specs li:last-child {
    border-bottom: none;
}
.ms-spec-label {
    color: var(--ms-text-muted);
}
.ms-spec-value {
    color: var(--ms-text);
    font-weight: 600;
}

/* Pros / Cons columns */
.ms-product-pros-cons {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ms-space-4);
    margin-bottom: var(--ms-space-5);
}
@media (min-width: 768px) {
    .ms-product-pros-cons {
        grid-template-columns: 1fr 1fr;
    }
}
.ms-pros-title,
.ms-cons-title {
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 var(--ms-space-2);
}
.ms-pros-title { color: var(--ms-success); }
.ms-cons-title { color: var(--ms-error); }
.ms-pros-list,
.ms-cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}
.ms-pros-list li,
.ms-cons-list li {
    padding: var(--ms-space-1) 0;
}
.ms-pros-list li::before {
    content: '+';
    font-family: var(--ms-font-mono);
    font-weight: 600;
    color: var(--ms-success);
    margin-right: var(--ms-space-2);
}
.ms-cons-list li::before {
    content: '\2212'; /* minus sign */
    font-family: var(--ms-font-mono);
    font-weight: 600;
    color: var(--ms-error);
    margin-right: var(--ms-space-2);
}

/* Product card CTA button */
.ms-product-cta {
    display: inline-block;
    padding: var(--ms-space-3) var(--ms-space-5);
    background: var(--ms-primary);
    color: var(--ms-bg-primary);
    font-family: var(--ms-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 150ms ease;
    width: 100%;
    box-sizing: border-box;
}
.ms-product-cta:hover {
    background: var(--ms-primary-hover);
    color: var(--ms-bg-primary);
}
.ms-product-timestamp {
    font-family: var(--ms-font-mono);
    font-size: 0.75rem;
    color: var(--ms-text-muted);
    margin-top: var(--ms-space-3);
}

/* --- T3.3: Comparison table --- */
.ms-comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--ms-space-6);
    position: relative;
}
.ms-comparison-table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    font-family: var(--ms-font-body);
    font-size: 0.875rem;
}
.ms-comparison-table thead th {
    background: var(--ms-secondary);
    color: var(--ms-bg-primary);
    font-family: var(--ms-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    padding: var(--ms-space-4);
    white-space: nowrap;
}
.ms-comparison-table tbody tr:nth-child(even) {
    background: var(--ms-bg-secondary);
}
.ms-comparison-table tbody tr:nth-child(odd) {
    background: var(--ms-bg-primary);
}
.ms-comparison-table tbody td {
    padding: var(--ms-space-4);
    border-bottom: 1px solid var(--ms-border-subtle);
    vertical-align: top;
    color: var(--ms-text);
}
.ms-comparison-table .ms-table-num {
    font-family: var(--ms-font-mono);
    font-variant-numeric: tabular-nums;
}
.ms-comparison-table .ms-table-winner {
    background: var(--ms-primary-light);
    color: var(--ms-primary);
    font-weight: 600;
}

/* Scroll indicator hint for mobile */
.ms-comparison-table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--ms-bg-primary));
    pointer-events: none;
    opacity: 1;
    transition: opacity 200ms ease;
}
@media (min-width: 768px) {
    .ms-comparison-table-wrap::after {
        display: none;
    }
}

/* --- T3.4: Generic content tables — v0.5.3 patch
   Applies to any <table> inside .entry-content without a specific class.
   Used for: Cookie Policy cookie inventory (1), Privacy Policy CCPA tables (3),
   future content tables in posts/pages.
   Subtle aesthetic appropriate for reference/legal data
   (vs .ms-comparison-table's bolder product comparison aesthetic). --- */

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--ms-space-6) 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    font-family: var(--ms-font-body);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .entry-content table {
        display: table;
        overflow-x: visible;
    }
}

.entry-content thead {
    background-color: var(--ms-bg-secondary);
    border-bottom: 2px solid var(--ms-border-subtle);
}

.entry-content th {
    text-align: left;
    padding: var(--ms-space-4);
    font-weight: 600;
    color: var(--ms-text);
    vertical-align: bottom;
}

.entry-content tbody tr {
    border-bottom: 1px solid var(--ms-border-subtle);
}

.entry-content tbody tr:last-child {
    border-bottom: none;
}

.entry-content tbody tr:nth-child(even) {
    background-color: var(--ms-bg-secondary);
}

.entry-content td {
    padding: var(--ms-space-4);
    vertical-align: top;
    color: var(--ms-text);
}

.entry-content td code,
.entry-content th code {
    font-family: var(--ms-font-mono);
    font-size: 0.875em;
    background-color: var(--ms-primary-light);
    padding: 2px var(--ms-space-2);
    border-radius: 3px;
    color: var(--ms-text);
}

/* --- T3.3: Button system --- */
.ms-btn-primary {
    display: inline-block;
    padding: 12px 24px;
    background: var(--ms-primary);
    color: var(--ms-bg-primary);
    font-family: var(--ms-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 150ms ease;
}
.ms-btn-primary:hover {
    background: var(--ms-primary-hover);
    color: var(--ms-bg-primary);
}
.ms-btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    background: transparent;
    color: var(--ms-secondary);
    font-family: var(--ms-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border: 1.5px solid var(--ms-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.ms-btn-secondary:hover {
    background: var(--ms-secondary);
    color: var(--ms-bg-primary);
}

/* Text links in prose — subtle underline default, --ms-primary underline on hover */
.entry-content a:not([class]) {
    color: var(--ms-text);
    text-decoration: underline;
    text-decoration-color: var(--ms-border-subtle);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 150ms ease;
}
.entry-content a:not([class]):hover {
    text-decoration-color: var(--ms-primary);
    text-decoration-thickness: 2px;
}

/* --- T3.3: Status badges --- */
.ms-badge {
    display: inline-block;
    font-family: var(--ms-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1.5;
}
.ms-badge-success {
    background: var(--ms-success);
    color: var(--ms-bg-primary);
}
.ms-badge-warning {
    background: var(--ms-warning);
    color: var(--ms-bg-primary);
}
.ms-badge-error {
    background: var(--ms-error);
    color: var(--ms-bg-primary);
}
.ms-badge-info {
    background: var(--ms-secondary);
    color: var(--ms-bg-primary);
}

/* --- T3.4: Verdict box --- */
.ms-verdict-box {
    background: var(--ms-bg-secondary);
    border: 1px solid var(--ms-border-subtle);
    border-radius: 8px;
    padding: var(--ms-space-5);
    margin: var(--ms-space-6) 0;
}
.ms-verdict-label {
    font-family: var(--ms-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-text-muted);
    margin: 0 0 var(--ms-space-3);
}
.ms-verdict-rating {
    font-family: var(--ms-font-mono);
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ms-primary);
    margin: 0 0 var(--ms-space-2);
    line-height: 1;
}
.ms-verdict-rating-suffix {
    font-size: 1rem;
    font-weight: 400;
    color: var(--ms-text-muted);
}
.ms-verdict-text {
    font-size: 1rem;
    color: var(--ms-text);
    line-height: 1.6;
    margin: 0 0 var(--ms-space-4);
}
.ms-verdict-link {
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ms-primary);
    text-decoration: none;
}
.ms-verdict-link:hover {
    text-decoration: underline;
}

/* --- T3.4: Editor's note callout (dormant — for future use) --- */
.ms-editor-note {
    background: var(--ms-primary-light);
    border-left: 3px solid var(--ms-primary);
    border-radius: 0 4px 4px 0;
    padding: var(--ms-space-5);
    margin: var(--ms-space-5) 0;
}
.ms-editor-note-label {
    font-family: var(--ms-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-primary);
    margin: 0 0 var(--ms-space-2);
}
.ms-editor-note p {
    font-size: 0.9375rem;
    color: var(--ms-text);
    line-height: 1.65;
    margin: 0;
}

/* --- T3.5: AAWP style overrides — specificity escalation, no !important --- */
body .aawp {
    font-family: var(--ms-font-body);
    color: var(--ms-text);
}
body .aawp .aawp-product__title,
body .aawp .aawp-product__title a {
    font-family: var(--ms-font-mono);
    font-weight: 600;
    color: var(--ms-secondary);
    text-decoration: none;
}
body .aawp .aawp-product__title a:hover {
    color: var(--ms-primary);
}
body .aawp .aawp-product__description {
    font-family: var(--ms-font-body);
    font-size: 0.875rem;
    color: var(--ms-text);
    line-height: 1.6;
}
body .aawp .aawp-product__price {
    font-family: var(--ms-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ms-text);
}
body .aawp .aawp-product__info span {
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    color: var(--ms-text-muted);
}
body .aawp .aawp-button,
body .aawp .aawp-product__button {
    background: var(--ms-primary);
    color: var(--ms-bg-primary);
    font-family: var(--ms-font-body);
    font-weight: 600;
    border-radius: 4px;
    border: none;
    padding: var(--ms-space-3) var(--ms-space-5);
    text-decoration: none;
    transition: background 150ms ease;
}
body .aawp .aawp-button:hover,
body .aawp .aawp-product__button:hover {
    background: var(--ms-primary-hover);
    color: var(--ms-bg-primary);
}
body .aawp .aawp-product {
    border: 1px solid var(--ms-border-subtle);
    border-radius: 8px;
    background: var(--ms-bg-primary);
}
body .aawp .aawp-product__thumb img {
    border-radius: 4px;
}
body .aawp .aawp-product__rating {
    font-family: var(--ms-font-mono);
    font-variant-numeric: tabular-nums;
}
body .aawp .aawp-product__rating .aawp-star {
    color: var(--ms-warning);
}
body .aawp .aawp-tb thead th {
    background: var(--ms-secondary);
    color: var(--ms-bg-primary);
    font-family: var(--ms-font-mono);
    font-weight: 600;
}
body .aawp .aawp-tb tbody td {
    border-bottom: 1px solid var(--ms-border-subtle);
    padding: var(--ms-space-3) var(--ms-space-4);
}
body .aawp .aawp-tb tbody tr:nth-child(even) {
    background: var(--ms-bg-secondary);
}

/* ==========================================================================
   4. Polish (old priority 5)
   ========================================================================== */

/* --- T4.1: Reading progress bar (CSS only — element + JS injected conditionally) --- */
.ms-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--ms-primary);
    z-index: 1100;
    pointer-events: none;
}

/* --- T4.2: Global transition defaults --- */
a,
button,
input,
select,
textarea,
.ms-btn-primary,
.ms-btn-secondary,
.ms-product-cta,
.ms-qa-cta,
.ms-newsletter-btn,
.ms-nav-links a,
.ms-mobile-nav a,
.ms-toc-link,
.ms-404-cats ul li a {
    transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 150ms ease, outline-color 150ms ease;
}

/* --- T4.2: Focus rings — 2px --ms-primary outline, 2px offset --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--ms-primary);
    outline-offset: 2px;
}

/* --- T4.2: Reduced motion — disable ALL transitions and animations --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
    .ms-reading-progress {
        display: none;
    }
}

/* --- T4.3: Image treatment — enforced aspect ratios, border, radius --- */
.ms-hero-image img,
.ms-post-header .ms-hero-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--ms-border-subtle);
    border-radius: 4px;
    width: 100%;
    height: auto;
}

.ms-product-card img,
.ms-product-card-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--ms-border-subtle);
    border-radius: 4px;
}

/* Image captions — IBM Plex Mono 13px italic */
figcaption,
.wp-caption-text,
.ms-caption-img {
    font-family: var(--ms-font-mono);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ms-text-muted);
    margin-top: var(--ms-space-2);
    line-height: 1.5;
}

/* --- T4.3: Lucide icon CSS classes --- */
.ms-icon {
    display: inline-block;
    vertical-align: middle;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    color: var(--ms-secondary);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ms-icon-sm {
    width: 16px;
    height: 16px;
}
.ms-icon-md {
    width: 20px;
    height: 20px;
}
.ms-icon-lg {
    width: 24px;
    height: 24px;
}

/* --- T4.4: WCAG AA — Screen-reader only utility --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- T4.4: WCAG AA — Contrast safety for --ms-primary (#EF6E19) ---
   Ratio on white: 3.47:1 — passes AA for large text only (≥18px bold, ≥24px).
   Small text usage of --ms-primary must be on --ms-primary-light bg or as a
   non-text indicator (borders, icons, backgrounds with white text).
   Ensure category tag (13px uppercase) uses --ms-text instead. --- */
.ms-category-tag {
    color: var(--ms-text);
    border-bottom: 2px solid var(--ms-primary);
    padding-bottom: 1px;
}
.ms-category-tag:hover {
    color: var(--ms-secondary);
}

/* Quick answer label — small text, switch from --ms-primary to --ms-text */
.ms-quick-answer-label {
    color: var(--ms-text);
    border-left: 3px solid var(--ms-primary);
    padding-left: var(--ms-space-2);
}

/* Editor's note label — small text, switch to --ms-text */
.ms-editor-note-label {
    color: var(--ms-text);
}

/* Verdict label — small text, switch to --ms-text-muted (already compliant) */

/* ToC active link — small text on white bg, use --ms-secondary with --ms-primary border indicator */
.ms-toc-link.ms-toc-active {
    color: var(--ms-secondary);
    font-weight: 600;
    border-left-color: var(--ms-primary);
}

/* Ensure badge text on --ms-warning bg passes: white on #C87F0A = 3.28:1 (large text only).
   Badges are 12px — use dark text for warning variant. */
.ms-badge-warning {
    color: var(--ms-secondary);
}