/* Platform 88.2.4 — Detail readability & meta/action bar theme (colors only) */

/* ── Phase 1: Mobiles detail typography ── */
.md-device-page{--fe8822-detail-title:#111827}
.md-device-page.md-dark,
html.dark .md-device-page{--fe8822-detail-title:#f8fafc}
.md-device-page .md-device-title{color:var(--fe8822-detail-title,#111827)}
.md-device-page .md-device-subtitle{color:#4b5563}
.md-device-page.md-dark .md-device-subtitle,
html.dark .md-device-page .md-device-subtitle{color:#cbd5e1}
.md-device-page .md-sidebar-widget h3{color:#111827}
.md-device-page .md-sidebar-widget dt{color:#6b7280}
.md-device-page .md-sidebar-widget dd{color:#111827}
.md-device-page.md-dark .md-sidebar-widget h3,
html.dark .md-device-page .md-sidebar-widget h3{color:#f1f5f9}
.md-device-page.md-dark .md-sidebar-widget dt,
html.dark .md-device-page .md-sidebar-widget dt{color:#94a3b8}
.md-device-page.md-dark .md-sidebar-widget dd,
html.dark .md-device-page .md-sidebar-widget dd{color:#e2e8f0}
.md-device-page .fe8822-sidebar-widget{--fe8822-sw-muted:#94a3b8}
.md-device-page .fe8822-sidebar-widget__title{color:var(--fe8822-sw-title,#f1f5f9)}
.md-device-page .fe8822-sidebar-widget__head i{color:var(--fe8822-sw-icon,#22d3ee)}
.md-device-page .fe8822-sidebar-widget .au-dl dt,
.md-device-page .fe8822-sidebar-widget dt{color:var(--fe8822-sw-muted,#94a3b8)}
.md-device-page .fe8822-sidebar-widget .au-dl dd,
.md-device-page .fe8822-sidebar-widget dd{color:var(--fe8822-sw-title,#f1f5f9)}

/* ── Phase 2: Autos detail typography ── */
.au-device-page{--fe8822-detail-title:#111827}
.au-device-page.au-dark,
html.dark .au-device-page{--fe8822-detail-title:#fafafa}
.au-device-page .au-device-title,
.au-device-page .au-hero-header .au-device-title{color:#111827}
.au-device-page.au-dark .au-device-title,
.au-device-page.au-dark .au-hero-header .au-device-title,
html.dark .au-device-page .au-device-title{color:#fafafa}
.au-device-page .au-device-subtitle{color:#4b5563}
.au-device-page.au-dark .au-device-subtitle{color:#d4d4d8}
.au-device-page .au-card h2{color:#111827}
.au-device-page.au-dark .au-card h2{color:#f1f5f9}
.au-device-page .au-sidebar-card h3{color:#111827}
.au-device-page.au-dark .au-sidebar-card h3{color:#fafafa}
/* Dark sidebar widgets — light text on dark card background */
.au-device-page .fe8822-sidebar-widget{--fe8822-sw-muted:#a1a1aa}
.au-device-page .fe8822-sidebar-widget__title{color:var(--fe8822-sw-title,#fafafa)}
.au-device-page .fe8822-sidebar-widget__head i{color:var(--fe8822-sw-icon,#f59e0b)}
.au-device-page .fe8822-sidebar-widget .au-dl dt{color:var(--fe8822-sw-muted,#a1a1aa)}
.au-device-page .fe8822-sidebar-widget .au-dl dd{color:var(--fe8822-sw-title,#fafafa)}
.au-device-page .fe8822-sidebar-widget .au-dl div{border-bottom-color:var(--fe8822-sw-border,#52525b)}

/* ── Phase 3: Detail meta bar — white theme (Mobiles & Autos inline only) ── */
.fe8822-action-bar--mobiles.fe8822-action-bar--inline,
.fe8822-action-bar--autos.fe8822-action-bar--inline{
    --fe8822-surface:#fff;
    --fe8822-text:#111827;
    --fe8822-muted:#4b5563;
    --fe8822-border:#e5e7eb;
    --fe8822-btn-bg:#fff;
    background:#fff;
    color:#111827;
    border:1px solid #e5e7eb;
    box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.fe8822-action-bar--mobiles.fe8822-action-bar--inline .fe8822-action-bar__meta,
.fe8822-action-bar--autos.fe8822-action-bar--inline .fe8822-action-bar__meta{color:#111827}
.fe8822-action-bar--mobiles.fe8822-action-bar--inline .fe8822-action-bar__meta-item,
.fe8822-action-bar--autos.fe8822-action-bar--inline .fe8822-action-bar__meta-item{color:#111827}
.fe8822-action-bar--mobiles.fe8822-action-bar--inline .fe8822-action-bar__meta-item i{color:var(--fe8822-accent,#0891b2)}
.fe8822-action-bar--autos.fe8822-action-bar--inline .fe8822-action-bar__meta-item i{color:var(--fe8822-accent,#dc2626)}

/* ── Phase 4: Detail action bar — white buttons (Mobiles & Autos inline only) ── */
.fe8822-action-bar--mobiles.fe8822-action-bar--inline .fe8822-action-btn,
.fe8822-action-bar--autos.fe8822-action-bar--inline .fe8822-action-btn{
    background:#fff;
    color:#111827;
    border-color:#d1d5db;
}
.fe8822-action-bar--mobiles.fe8822-action-bar--inline .fe8822-action-btn:hover,
.fe8822-action-bar--autos.fe8822-action-bar--inline .fe8822-action-btn:hover{
    background:#f8fafc;
    border-color:#2563eb;
    color:#2563eb;
}
.fe8822-action-bar--mobiles.fe8822-action-bar--inline .fe8822-action-btn:focus-visible,
.fe8822-action-bar--autos.fe8822-action-bar--inline .fe8822-action-btn:focus-visible{
    outline-color:#2563eb;
}
.fe8822-action-bar--mobiles.fe8822-action-bar--inline .fe8822-action-btn.is-active,
.fe8822-action-bar--autos.fe8822-action-bar--inline .fe8822-action-btn.is-active{
    background:#eff6ff;
    border-color:#2563eb;
    color:#1d4ed8;
}

/* ── Mobiles sticky bottom bar — white background, dark text ── */
.fe8822-action-bar--mobiles.fe8822-action-bar--sticky{
    --fe8822-surface:#fff;
    --fe8822-text:#111827;
    --fe8822-border:#e5e7eb;
    --fe8822-btn-bg:#fff;
    background:#fff;
    color:#111827;
    border-top:1px solid #e5e7eb;
    box-shadow:0 -1px 6px rgba(15,23,42,.08);
}
.fe8822-action-bar--mobiles.fe8822-action-bar--sticky .fe8822-action-bar__sticky-title{color:#111827}
.fe8822-action-bar--mobiles.fe8822-action-bar--sticky .fe8822-action-btn{
    background:#fff;
    color:#111827;
    border-color:#d1d5db;
}
.fe8822-action-bar--mobiles.fe8822-action-bar--sticky .fe8822-action-btn:hover{
    background:#f8fafc;
    border-color:#2563eb;
    color:#2563eb;
}
.fe8822-action-bar--mobiles.fe8822-action-bar--sticky .fe8822-action-btn--primary{
    background:var(--fe8822-accent,#0891b2);
    border-color:var(--fe8822-accent,#0891b2);
    color:#fff;
}
.fe8822-action-bar--mobiles.fe8822-action-bar--sticky .fe8822-action-btn--primary:hover{
    background:var(--fe8822-accent-dark,#0e7490);
    border-color:var(--fe8822-accent-dark,#0e7490);
    color:#fff;
}

/* ── Bottom chrome coordination (compare bar + legacy sticky purchase) ── */
.md-device-page{--fe8822-sticky-h:3.25rem}
.md-device-page .fe8822-action-bar--sticky{z-index:920;isolation:isolate}
/* Legacy sticky purchase bar was bleeding through behind enterprise bar */
.md-device-page .md-sticky-purchase{display:none!important}
/* Compare floating bar (selected phone thumbnails) — sit above action bar */
body:has(.md-device-page) .mc-floating-bar{z-index:910}
body.fe8822-sticky-active:has(.md-device-page) .mc-floating-bar.is-visible{bottom:3.25rem;box-shadow:0 -2px 12px rgba(15,23,42,.08)}