/**
 * Detail page reskin for Modern Rasathane.
 * Loaded after the legacy inline detail styles; keep every selector scoped.
 */

body.rasathane-detail {
    --panel-bg: var(--surface);
    --glass: var(--surface);
    --glass-border: var(--rule);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-muted: var(--muted);
    --primary: var(--accent);
    --primary-dark: var(--accent);
    --secondary: var(--accent-sec);
    --chip-bg: var(--surface);
    --chip-active-bg: var(--accent);
    --chip-active-text: var(--surface);
    --primary-faded: color-mix(in srgb, var(--accent) 18%, transparent);
    --depth-0: #F46D43;
    --depth-1: #FDAE61;
    --depth-2: #F5CA36;
    --depth-3: #C6DBEF;
    --depth-4: #9ECAE1;
    --depth-5: #2171B5;
    --depth-6: #08519C;
    --depth-7: #9B1C8D;
    --event-hazard-color: var(--hazard-strong);
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: 1.5;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

:root:not([data-theme="light"]) body.rasathane-detail,
[data-theme="dark"] body.rasathane-detail {
    --depth-0: #F46D43;
    --depth-1: #FDAE61;
    --depth-2: #F9C823;
    --depth-3: #6CB4EE;
    --depth-4: #2B8CE6;
    --depth-5: #135CE6;
    --depth-6: #4A33E6;
    --depth-7: #D926A9;
}

body.rasathane-detail,
body.rasathane-detail :where(button, input, select, textarea, table, pre, code) {
    font-family: var(--font-ui);
}

body.rasathane-detail :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

body.rasathane-detail :where(h1, h2, h3, h4, h5, h6, p, span, div, button, a, th, td, label, strong, small) {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.rasathane-detail :where(.detail-card, .tech-card, .sticky-sidebar, .mobile-nav-pills, .push-cta-banner, .hero-unified-panel, .swm-panel, .maplibregl-popup-content) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.rasathane-detail .detail-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: var(--space-2xl);
    width: min(100%, 1440px);
    max-width: none;
    margin: 0 auto;
    min-height: 100vh;
    padding: 0 var(--space-xl);
}

body.rasathane-detail .sticky-sidebar {
    width: auto;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: var(--space-xl) var(--space-md);
    background: var(--surface);
    border-right: 1px solid var(--rule);
    box-shadow: none;
    color: var(--text);
}

body.rasathane-detail .sidebar-brand {
    min-height: 44px;
    margin-bottom: var(--space-xl);
    color: var(--text);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0;
}

body.rasathane-detail .sidebar-brand img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

body.rasathane-detail .nav-menu {
    gap: var(--space-xs);
}

body.rasathane-detail .nav-item,
body.rasathane-detail .pill-item,
body.rasathane-detail .nav-subitem,
body.rasathane-detail :where(.source-badge, .source-tag, .axis-badge, .tensor-label, .mt-agency-badge, .impact-card__label, .sensor-label, .swm-badge, .metadata-item, .hero-mag-type) {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.rasathane-detail .nav-item {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

body.rasathane-detail .nav-item:hover,
body.rasathane-detail .nav-subitem:hover {
    background: var(--bg);
    color: var(--text);
}

body.rasathane-detail .nav-item.active,
body.rasathane-detail .pill-item.active,
body.rasathane-detail .nav-subitem.active {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    font-weight: 600;
}

body.rasathane-detail .nav-pin-toggle {
    min-width: 32px;
    min-height: 32px;
    color: var(--muted);
}

body.rasathane-detail .nav-pin-toggle:hover {
    background: var(--bg);
    color: var(--accent);
}

body.rasathane-detail .nav-children {
    border-left-color: var(--rule);
}

body.rasathane-detail .nav-subitem {
    min-height: 36px;
    color: var(--muted);
    font-size: var(--text-xs);
}

body.rasathane-detail .nav-subitem-dot {
    background: currentColor;
}

body.rasathane-detail .content-main {
    width: 100%;
    padding: var(--space-xl) 0 72px;
}

body.rasathane-detail .mobile-nav-pills {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-float);
}

body.rasathane-detail .pill-item {
    min-width: 44px;
    min-height: 44px;
    color: var(--muted);
}

body.rasathane-detail .back-link {
    min-height: 44px;
    align-items: center;
    color: var(--accent);
    font-weight: 600;
}

body.rasathane-detail .section-band {
    margin-bottom: var(--space-2xl);
    scroll-margin-top: var(--space-xl);
}

body.rasathane-detail .chapter-header {
    margin: 0 0 var(--space-lg);
    padding: 0;
    border: 0;
    background: transparent;
}

body.rasathane-detail .ch-top-meta {
    color: var(--muted);
}

body.rasathane-detail .ch-step-num,
body.rasathane-detail .ch-step-label,
body.rasathane-detail .ch-data-badge,
body.rasathane-detail .tech-card-title,
body.rasathane-detail .pager-alert-title,
body.rasathane-detail .detail-card h2,
body.rasathane-detail .section-band h2 {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.rasathane-detail .ch-step {
    min-width: 64px;
    color: var(--muted);
}

body.rasathane-detail .ch-step-num {
    font-size: var(--text-xs);
    font-weight: 600;
}

body.rasathane-detail .ch-step-label {
    font-size: var(--text-xs);
    font-weight: 500;
}

body.rasathane-detail .ch-separator {
    background: var(--rule);
}

body.rasathane-detail .ch-data-badge {
    min-height: 32px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--muted);
}

body.rasathane-detail .ch-icon-box {
    width: 44px;
    height: 44px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--accent);
}

body.rasathane-detail .ch-title {
    margin: 0;
    color: var(--text);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

body.rasathane-detail .ch-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

body.rasathane-detail .hero-unified-panel {
    --detail-hazard: var(--event-hazard-color);
    position: relative;
    overflow: visible;
    padding: var(--space-xl);
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

body.rasathane-detail .hero-unified-panel.magnitude-class-m1 { --detail-hazard: var(--hazard-micro); }
body.rasathane-detail .hero-unified-panel.magnitude-class-m3 { --detail-hazard: var(--hazard-minor); }
body.rasathane-detail .hero-unified-panel.magnitude-class-m4 { --detail-hazard: var(--hazard-mod); }
body.rasathane-detail .hero-unified-panel.magnitude-class-m5 { --detail-hazard: var(--hazard-strong); }
body.rasathane-detail .hero-unified-panel.magnitude-class-m6,
body.rasathane-detail .hero-unified-panel.magnitude-class-m7 { --detail-hazard: var(--hazard-severe); }

body.rasathane-detail .hero-unified-panel::before {
    display: none !important;
}

body.rasathane-detail .hero-band-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: var(--space-xl);
    align-items: stretch;
}

body.rasathane-detail .hero-content-stack {
    min-width: 0;
    display: grid;
    gap: var(--space-lg);
}

body.rasathane-detail .hero-primary-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
}

body.rasathane-detail .hero-mag-block {
    width: 148px;
    height: 148px;
    border: 1px solid color-mix(in srgb, var(--detail-hazard) 46%, var(--rule));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--detail-hazard) 13%, var(--surface)) !important;
    color: var(--detail-hazard) !important;
    box-shadow: none;
    text-shadow: none;
}

body.rasathane-detail .hero-mag-val {
    color: var(--detail-hazard);
    font-size: 72px;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: 0;
}

body.rasathane-detail .hero-mag-type {
    color: color-mix(in srgb, var(--detail-hazard) 74%, var(--text));
    font-size: var(--text-lg);
    font-weight: 600;
}

body.rasathane-detail .hero-location {
    margin: 0 0 var(--space-sm);
    color: var(--text);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

body.rasathane-detail .hero-datetime,
body.rasathane-detail .meta-details,
body.rasathane-detail .mags-label {
    color: var(--muted);
    font-size: var(--text-sm);
}

body.rasathane-detail .hero-secondary-mags {
    margin-top: var(--space-md);
}

body.rasathane-detail .mags-list {
    gap: var(--space-sm);
}

body.rasathane-detail .mag-pill,
body.rasathane-detail .source-tag,
body.rasathane-detail .source-badge,
body.rasathane-detail .mt-agency-badge {
    border-radius: var(--radius-pill);
    letter-spacing: 0 !important;
}

body.rasathane-detail .hero-alerts-block {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: 0;
}

body.rasathane-detail .hero-unified-panel .alert-badge {
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

body.rasathane-detail .hero-narrative-block,
body.rasathane-detail .focal-ai-summary,
body.rasathane-detail .consensus-ai-summary {
    max-width: 65ch;
    padding: var(--space-lg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg) 72%, var(--surface));
    color: var(--text);
    font-size: var(--text-base);
    line-height: 1.6;
}

body.rasathane-detail .narrative-headline {
    margin: 0 0 var(--space-sm);
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: 0;
}

body.rasathane-detail .narrative-impact {
    margin: 0;
    color: var(--text);
}

body.rasathane-detail .hero-metrics-grid,
body.rasathane-detail .tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

body.rasathane-detail .metric-item,
body.rasathane-detail .tech-card,
body.rasathane-detail .impact-card {
    min-height: 92px;
    padding: var(--space-lg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
}

body.rasathane-detail .metric-icon,
body.rasathane-detail .metric-card-icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.rasathane-detail .metric-value,
body.rasathane-detail .impact-card__value,
body.rasathane-detail .dyfi-count,
body.rasathane-detail .mmi-roman,
body.rasathane-detail .tech-gauge-val {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

body.rasathane-detail .metric-label,
body.rasathane-detail .impact-card__label,
body.rasathane-detail .tech-card-title,
body.rasathane-detail .kv-label {
    color: var(--muted);
}

body.rasathane-detail .hero-footer-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--rule);
}

body.rasathane-detail .source-tags,
body.rasathane-detail .meta-details {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

body.rasathane-detail .detail-felt-cta {
    min-height: 44px;
    margin-left: auto;
    padding: 0 18px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}

body.rasathane-detail .detail-felt-cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

body.rasathane-detail .hero-map-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr);
    gap: var(--space-sm);
    align-self: stretch;
}

body.rasathane-detail .hero-map-heading {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    color: var(--muted);
    font-size: var(--text-xs);
}

body.rasathane-detail .hero-map-heading strong {
    color: var(--text);
    font-weight: 600;
}

body.rasathane-detail .hero-mini-map,
body.rasathane-detail .detail-map,
body.rasathane-detail #coulombMap,
body.rasathane-detail #shakemapMiniMap,
body.rasathane-detail #shakemapContourMap,
body.rasathane-detail #finiteFaultMap {
    width: 100%;
    min-height: 260px;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg) !important;
    overflow: hidden;
}

body.rasathane-detail .detail-card,
body.rasathane-detail .mag-calc-v2,
body.rasathane-detail .edu-card,
body.rasathane-detail .metadata-strip,
body.rasathane-detail .external-links,
body.rasathane-detail .ext-links-grid {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

body.rasathane-detail .detail-card {
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
}

body.rasathane-detail .detail-card h2,
body.rasathane-detail .mag-calc-v2 h2,
body.rasathane-detail .edu-card h3 {
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
}

body.rasathane-detail .kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-sm);
}

body.rasathane-detail .kv-item,
body.rasathane-detail .focal-plane-card,
body.rasathane-detail .fm-subcard,
body.rasathane-detail .source-card,
body.rasathane-detail .mt-agency-card {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
}

body.rasathane-detail .kv-item {
    padding: var(--space-md);
}

body.rasathane-detail .kv-value,
body.rasathane-detail .focal-plane-value,
body.rasathane-detail .tensor-cell,
body.rasathane-detail .metadata-value {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

body.rasathane-detail .science-module .fm-primary-solution,
body.rasathane-detail .science-module .fm-geom-inner,
body.rasathane-detail .fault-science-module > div {
    display: flex;
    gap: var(--space-xl);
    align-items: center;
}

body.rasathane-detail .focal-beachball,
body.rasathane-detail #faultTypeDiagram {
    flex: 0 0 auto;
}

body.rasathane-detail .focal-planes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
}

body.rasathane-detail .focal-plane-row,
body.rasathane-detail .science-module .axes-table tr,
body.rasathane-detail .detail-table tr {
    border-bottom: 1px solid var(--rule);
}

body.rasathane-detail .detail-table,
body.rasathane-detail .axes-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text);
}

body.rasathane-detail .detail-table th,
body.rasathane-detail .detail-table td,
body.rasathane-detail .axes-table th,
body.rasathane-detail .axes-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
}

body.rasathane-detail .detail-table th,
body.rasathane-detail .axes-table th {
    background: var(--bg);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

body.rasathane-detail .detail-table tbody tr:hover {
    background: var(--bg);
}

body.rasathane-detail .comparison-module {
    overflow-x: auto;
}

body.rasathane-detail .comparison-module .detail-table {
    min-width: 680px;
}

body.rasathane-detail .alert-module,
body.rasathane-detail .pager-alert-card {
    border: 1px solid var(--rule) !important;
    border-left: 4px solid var(--alert-color, var(--hazard-strong)) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    padding: var(--space-lg) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

body.rasathane-detail .pager-alert-icon,
body.rasathane-detail .alert-module > .la,
body.rasathane-detail .alert-module .tech-card-title i {
    color: var(--alert-color, var(--hazard-strong));
}

body.rasathane-detail .pager-alert-title,
body.rasathane-detail .pager-alert-desc {
    color: var(--text);
}

body.rasathane-detail .technical-data-module .kv-grid,
body.rasathane-detail .metadata-strip {
    padding: var(--space-lg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--text-xs);
    overflow-x: auto;
}

body.rasathane-detail .technical-data-module .kv-item {
    background: var(--surface);
}

body.rasathane-detail .ext-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md);
}

body.rasathane-detail .ext-link-card {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text);
    box-shadow: none;
}

body.rasathane-detail .ext-link-card:hover {
    background: var(--bg);
    transform: none;
}

body.rasathane-detail .push-cta-banner,
body.rasathane-detail .push-cta-inner {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface) !important;
    color: var(--text);
    box-shadow: none;
}

body.rasathane-detail .push-cta-inner button:first-of-type {
    min-height: 44px;
    background: var(--accent);
    color: var(--surface);
}

body.rasathane-detail .push-cta-inner button:last-of-type {
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    color: var(--muted);
}

body.rasathane-detail .mag-calc-v2 {
    padding: var(--space-xl);
}

body.rasathane-detail .mc-pill,
body.rasathane-detail .mc-nudge-btn,
body.rasathane-detail .kesit-plane-btn,
body.rasathane-detail #coordCopyAll {
    min-height: 44px;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

body.rasathane-detail .mc-pill:hover,
body.rasathane-detail .mc-nudge-btn:hover,
body.rasathane-detail .kesit-plane-btn:hover,
body.rasathane-detail #coordCopyAll:hover {
    background: var(--bg) !important;
}

body.rasathane-detail .kesit-plane-btn.active {
    background: var(--accent) !important;
    color: var(--surface) !important;
    border-color: var(--accent) !important;
}

body.rasathane-detail .swm-panel,
body.rasathane-detail .swm-control-bar {
    background: var(--surface);
    border-color: var(--rule);
    border-radius: var(--radius-md);
    color: var(--text);
}

body.rasathane-detail .swm-btn-play,
body.rasathane-detail .swm-speed-select {
    min-height: 44px;
}

body.rasathane-detail .detail-footer {
    color: var(--muted);
    border-top: 1px solid var(--rule);
}

body.rasathane-detail .detail-footer a {
    color: var(--accent);
}

@media (max-width: 1100px) {
    body.rasathane-detail .detail-layout {
        grid-template-columns: 1fr;
        padding: 0 var(--space-lg);
    }

    body.rasathane-detail .sticky-sidebar {
        display: none;
    }

    body.rasathane-detail .mobile-nav-pills {
        display: flex;
    }

    body.rasathane-detail .back-link {
        display: inline-flex !important;
    }
}

@media (max-width: 900px) {
    body.rasathane-detail .hero-band-grid {
        grid-template-columns: 1fr;
    }

    body.rasathane-detail .hero-map-panel {
        order: -1;
    }

    body.rasathane-detail .hero-primary-row {
        grid-template-columns: 1fr;
    }

    body.rasathane-detail .hero-mag-block {
        width: 128px;
        height: 128px;
    }

    body.rasathane-detail .hero-mag-val {
        font-size: 60px;
    }

    body.rasathane-detail .detail-felt-cta {
        width: 100%;
        margin-left: 0;
    }

    body.rasathane-detail .science-module .fm-primary-solution,
    body.rasathane-detail .science-module .fm-geom-inner,
    body.rasathane-detail .fault-science-module > div {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    body.rasathane-detail {
        padding-bottom: 76px;
    }

    body.rasathane-detail .content-main {
        padding-top: var(--space-lg);
    }

    body.rasathane-detail .hero-unified-panel,
    body.rasathane-detail .detail-card,
    body.rasathane-detail .mag-calc-v2 {
        padding: var(--space-lg);
    }

    body.rasathane-detail .hero-location {
        font-size: var(--text-xl);
    }

    body.rasathane-detail .comparison-module .detail-table th:first-child,
    body.rasathane-detail .comparison-module .detail-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--surface);
        box-shadow: 1px 0 0 var(--rule);
    }

    body.rasathane-detail .comparison-module .detail-table th:first-child {
        background: var(--bg);
        z-index: 2;
    }

    body.rasathane-detail .mobile-nav-pills {
        left: var(--space-sm);
        right: var(--space-sm);
        bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
        max-width: none;
        transform: none;
        overflow-x: auto;
    }
}