/* Logs (Articles) — index + detail styling.
   Inherits CoreUI dark/light theme via data-coreui-theme. */

/* Subtle top-of-page gradient that bridges from the public pages' navy into
   the dashboard dark background. Fades out after ~500px so reading is
   unaffected. Only applied in dark mode — light mode needs nothing. */
[data-coreui-theme="dark"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(
        to bottom,
        rgba(233, 69, 96, 0.12) 0%,
        rgba(22, 33, 62, 0.10) 40%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Keep content above the pseudo-element */
[data-coreui-theme="dark"] .logs-index,
[data-coreui-theme="dark"] .log-detail,
[data-coreui-theme="dark"] .log-detail-outer {
    position: relative;
    z-index: 1;
}

/* ----- Index ----- */
.logs-index {
    max-width: 980px;
    margin: 2rem auto 4rem;
}

.logs-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.logs-subtitle {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.logs-list {
    display: grid;
    gap: 1.5rem;
}

.log-card {
    border: 1px solid var(--cui-border-color, rgba(255,255,255,0.12));
    border-radius: 12px;
    overflow: hidden;
    background: var(--cui-tertiary-bg, rgba(255,255,255,0.02));
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.log-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border-color: var(--cui-primary, #e94560);
}

.log-card-link {
    display: grid;
    grid-template-columns: 220px 1fr;
    color: inherit;
    text-decoration: none;
}

@media (max-width: 640px) {
    .log-card-link {
        grid-template-columns: 1fr;
    }
}

.log-card-hero {
    background: var(--cui-secondary-bg, rgba(0,0,0,0.2));
    overflow: hidden;
}

.log-card-hero img {
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
    display: block;
}

.log-card-body {
    padding: 1.25rem 1.5rem;
}

.log-card-meta {
    font-size: 0.85rem;
    color: var(--cui-secondary-color);
    margin-bottom: 0.5rem;
}

.log-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.log-card-summary {
    color: var(--cui-secondary-color);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.log-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.logs-empty {
    border: 1px dashed var(--cui-border-color, rgba(255,255,255,0.15));
    border-radius: 12px;
}

/* ----- Detail ----- */
.log-detail {
    max-width: 760px;
    margin: 2rem auto 5rem;
}

.log-detail-header {
    margin-bottom: 2rem;
}

.log-detail-meta {
    font-size: 0.9rem;
    color: var(--cui-secondary-color);
    margin-bottom: 0.75rem;
}

.log-detail-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.log-detail-summary {
    font-size: 1.15rem;
    color: var(--cui-secondary-color);
    margin-bottom: 1rem;
}

.log-detail-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.log-detail-hero img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

/* ----- Prose (rendered markdown body) ----- */
.prose {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--cui-body-color);
}

.prose > * + * {
    margin-top: 1.1rem;
}

.prose h2 {
    margin-top: 2.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rae-coral);
}

[data-coreui-theme="light"] .prose h2 {
    color: var(--rae-coral);
}

.prose h3 {
    margin-top: 2rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.prose h4 {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
    margin-bottom: 1rem;
}

.prose ul,
.prose ol {
    padding-left: 1.5rem;
}

.prose li + li {
    margin-top: 0.3rem;
}

.prose blockquote {
    border-left: 4px solid var(--cui-primary, #e94560);
    padding: 0.4rem 1rem;
    color: var(--cui-secondary-color);
    background: var(--cui-tertiary-bg, rgba(255,255,255,0.03));
    border-radius: 4px;
}

.prose img,
.prose video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 1.5rem auto;
}

.prose video {
    background: #000;
}

.prose figure {
    margin: 1.5rem 0;
    text-align: center;
}

.prose figcaption {
    font-size: 0.9rem;
    color: var(--cui-secondary-color);
    margin-top: 0.5rem;
}

.prose a {
    color: var(--cui-link-color, #79c0ff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.92em;
    background: var(--cui-tertiary-bg, rgba(255,255,255,0.06));
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

.prose pre,
.prose .highlight {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.55;
}

.prose pre code,
.prose .highlight code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.prose th,
.prose td {
    border: 1px solid var(--cui-border-color, rgba(255,255,255,0.15));
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.prose th {
    background: var(--cui-tertiary-bg, rgba(255,255,255,0.04));
    font-weight: 600;
}

/* Admonitions (markdown.extensions.admonition) */
.prose .admonition {
    border-left: 4px solid var(--cui-info, #39f);
    background: var(--cui-tertiary-bg, rgba(57,153,255,0.06));
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin: 1.5rem 0;
}

.prose .admonition.warning { border-left-color: var(--cui-warning, #f9b115); background: rgba(249,177,21,0.06); }
.prose .admonition.danger,
.prose .admonition.error   { border-left-color: var(--cui-danger, #e55353);  background: rgba(229,83,83,0.06); }
.prose .admonition.tip,
.prose .admonition.success { border-left-color: var(--cui-success, #2eb85c); background: rgba(46,184,92,0.06); }

.prose .admonition-title {
    font-weight: 600;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

/* Footnotes */
.prose .footnote {
    font-size: 0.9rem;
    color: var(--cui-secondary-color);
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cui-border-color, rgba(255,255,255,0.1));
}

/* ----- Image grids (use inside .prose via raw HTML blocks) ----- */
.img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.65rem;
    margin: 1.5rem 0;
}

.img-grid-2 { grid-template-columns: repeat(2, 1fr); }
.img-grid-3 { grid-template-columns: repeat(3, 1fr); }
.img-grid-4 { grid-template-columns: repeat(4, 1fr); }

.img-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0;
    display: block;
}

/* Optional: tighter captions under grid images */
.img-grid figure {
    margin: 0;
}

.img-grid figcaption {
    font-size: 0.78rem;
    text-align: center;
    margin-top: 0.3rem;
    color: var(--cui-secondary-color);
}

@media (max-width: 600px) {
    .img-grid-3,
    .img-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Reactions ----- */
.reactions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.reaction-btn {
    transition: transform 0.1s ease;
}

.reaction-btn:active {
    transform: scale(0.95);
}

.reaction-btn[data-already="1"] {
    opacity: 0.6;
    cursor: default;
}

.reaction-btn[data-just-clicked="1"] {
    animation: reaction-pulse 0.4s ease;
}

@keyframes reaction-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.reaction-count {
    margin-left: 0.35rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Light theme tweaks */
[data-coreui-theme="light"] .log-card {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
}

[data-coreui-theme="light"] .prose pre,
[data-coreui-theme="light"] .prose .highlight {
    background: #f6f8fa;
    color: #24292f;
}

[data-coreui-theme="light"] .prose code {
    background: rgba(0,0,0,0.05);
}

/* ----- Article detail — outer wrapper ----- */
[data-coreui-theme="dark"] .log-detail-outer {
    position: relative;
    z-index: 1;
}

.log-detail-outer {
    max-width: 760px;
    margin: 2rem auto 5rem;
    padding: 0 1.5rem;
}

/* Hide the inline [TOC] block — sidebar replaces it */
.prose .toc { display: none; }

/* ----- Floating side TOC (modeled on demo-nav: position:fixed, hover-expand) ----- */
/* The rail is centred inside the band *below* the fixed navbar rather than in
   the whole viewport. Centring on the viewport meant a long expanded TOC grew
   upward until it slid under the navbar. Spanning the band and centring with
   flex keeps the panel visually centred while making the overlap impossible.
   The band itself is click-through; only the panel takes pointer events. */
.log-toc-sidebar {
    position: fixed;
    left: 0;
    top: 76px;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    pointer-events: none;
}

.log-toc-panel { pointer-events: auto; }

.log-toc-panel {
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    border-radius: 0 14px 14px 0;
    padding: 0.55rem 0.45rem;
    width: 50px;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    transition: width 0.28s ease, padding 0.28s ease;
}

.log-toc-sidebar.expanded .log-toc-panel,
.log-toc-sidebar:hover .log-toc-panel {
    width: 260px;
    padding: 0.875rem;
}

[data-coreui-theme="light"] .log-toc-panel {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
    border-left: none;
}

/* Header (only visible when expanded) */
.log-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, height 0.2s ease, margin 0.2s ease;
}

.log-toc-sidebar.expanded .log-toc-header,
.log-toc-sidebar:hover .log-toc-header {
    opacity: 1;
    height: 22px;
    margin-bottom: 0.55rem;
}

.log-toc-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

[data-coreui-theme="light"] .log-toc-title {
    color: rgba(0, 0, 0, 0.55);
}

/* Toggle button hidden — TOC is hover-driven like demo-nav */
.log-toc-toggle,
.log-toc-collapsed-strip {
    display: none;
}

/* TOC nav links */
#logTocNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#logTocNav li + li { margin-top: 3px; }

#logTocNav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.35rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    border-radius: 8px;
    line-height: 1.3;
    transition: background-color 0.15s, color 0.15s;
}

/* Numbered marker — always visible, meaningful when collapsed */
.log-toc-marker {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background 0.15s, color 0.15s;
}

/* H3 markers: smaller dot inside the same column width, no number */
#logTocNav .toc-h3 .log-toc-marker {
    background: transparent;
    font-size: 0;
    position: relative;
}

#logTocNav .toc-h3 .log-toc-marker::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* Collapsed rail shows numbered sections only. An h3 row collapsed to a
   50px-wide strip is an unlabelled dot — it carries no information and
   doubles the rail height, so the rows fold away and slide back in with
   their labels when the rail expands. */
#logTocNav .toc-h3 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.18s ease, margin-top 0.28s ease;
}

#logTocNav li + li.toc-h3 { margin-top: 0; }

.log-toc-sidebar.expanded #logTocNav .toc-h3,
.log-toc-sidebar:hover #logTocNav .toc-h3 {
    max-height: 40px;
    opacity: 1;
}

.log-toc-sidebar.expanded #logTocNav li + li.toc-h3,
.log-toc-sidebar:hover #logTocNav li + li.toc-h3 { margin-top: 3px; }

/* Label — clipped to zero width when collapsed so it can't leak */
.log-toc-label {
    white-space: nowrap;
    font-size: 0.86rem;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.28s ease, opacity 0.2s ease;
}

.log-toc-sidebar.expanded .log-toc-label,
.log-toc-sidebar:hover .log-toc-label {
    max-width: 220px;
    opacity: 1;
}

#logTocNav .toc-h3 .log-toc-label {
    font-size: 0.8rem;
    opacity: 0;
}

.log-toc-sidebar.expanded #logTocNav .toc-h3 .log-toc-label,
.log-toc-sidebar:hover #logTocNav .toc-h3 .log-toc-label {
    opacity: 0.85;
}

#logTocNav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

#logTocNav a:hover .log-toc-marker {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.95);
}

[data-coreui-theme="light"] #logTocNav a {
    color: rgba(0, 0, 0, 0.65);
}

[data-coreui-theme="light"] .log-toc-marker {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.7);
}

[data-coreui-theme="light"] #logTocNav a:hover {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.95);
}

[data-coreui-theme="light"] #logTocNav a:hover .log-toc-marker {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.9);
}

/* Active state — coral, matches demo-nav-item.active */
#logTocNav a.toc-active {
    background: rgba(233, 69, 96, 0.2);
    color: var(--rae-coral-hover);
}

#logTocNav a.toc-active .log-toc-marker {
    background: rgba(233, 69, 96, 0.5);
    color: #fff;
}

#logTocNav .toc-h3 a.toc-active .log-toc-marker {
    background: transparent;
    color: var(--rae-coral-hover);
}

#logTocNav .toc-h3 a.toc-active .log-toc-marker::before {
    opacity: 1;
}

/* A subsection is active: keep its parent section marker lit, but softer than
   a directly-active row so the two stay distinguishable when expanded. */
#logTocNav a.toc-active-parent .log-toc-marker {
    background: rgba(233, 69, 96, 0.32);
    color: #fff;
}

[data-coreui-theme="light"] #logTocNav a.toc-active {
    background: rgba(214, 51, 80, 0.12);
    color: var(--rae-coral);
}

[data-coreui-theme="light"] #logTocNav a.toc-active-parent .log-toc-marker {
    background: rgba(214, 51, 80, 0.55);
    color: #fff;
}

[data-coreui-theme="light"] #logTocNav a.toc-active .log-toc-marker {
    background: var(--rae-coral);
    color: #fff;
}

[data-coreui-theme="light"] #logTocNav .toc-h3 a.toc-active .log-toc-marker {
    background: transparent;
    color: var(--rae-coral);
}

/* Mobile floating button */
.log-toc-mobile-btn {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 200;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    align-items: center;
    justify-content: center;
}

[data-coreui-theme="light"] .log-toc-mobile-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border-color: rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    /* Hide the side TOC on small screens, show floating button instead */
    .log-toc-sidebar {
        left: auto;
        right: 1.5rem;
        bottom: 5rem;
        top: auto;
        /* Undo the desktop below-navbar band: the mobile overlay is anchored
           bottom-right and sized by its own max-height animation. */
        display: block;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .log-toc-sidebar.toc-mobile-open {
        max-height: 65vh;
    }

    .log-toc-panel {
        width: 250px !important;
        padding: 0.875rem !important;
        max-height: 65vh;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
    }

    /* On mobile overlay, always show labels regardless of hover state */
    .log-toc-sidebar .log-toc-label {
        max-width: 220px !important;
        opacity: 1 !important;
    }
    .log-toc-sidebar #logTocNav .toc-h3 .log-toc-label {
        opacity: 0.85 !important;
    }

    /* The mobile overlay is always full-width, so h3 rows stay expanded */
    .log-toc-sidebar #logTocNav .toc-h3 {
        max-height: 40px;
        opacity: 1;
    }
    .log-toc-sidebar #logTocNav li + li.toc-h3 { margin-top: 3px; }

    [data-coreui-theme="light"] .log-toc-panel {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }

    .log-toc-header {
        opacity: 1 !important;
        height: 22px !important;
        margin-bottom: 0.55rem !important;
    }

    .log-toc-mobile-btn {
        display: flex;
    }
}

/* ----- Text highlight spans ----- */
/* Use muted, purposeful colours — visible but not harsh in dark theme */
.hl-setup   { color: #38cfd8; }   /* setup/config names: teal */
.hl-good    { color: #3ecf7e; }   /* positive findings, winners: green */
.hl-warn    { color: #f0a847; }   /* key numbers, critical notes: amber */
.hl-danger  { color: #e06464; }   /* over-smoothing, failures: soft red */

/* Slightly deeper in light mode for contrast on white */
[data-coreui-theme="light"] .hl-setup  { color: #0891b2; }
[data-coreui-theme="light"] .hl-good   { color: #16a34a; }
[data-coreui-theme="light"] .hl-warn   { color: #b45309; }
[data-coreui-theme="light"] .hl-danger { color: #dc2626; }

/* ----- Light theme tweaks for new elements ----- */
[data-coreui-theme="light"] .log-toc-panel {
    border-color: rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.02);
}

[data-coreui-theme="light"] .log-toc-mobile-btn {
    background: #fff;
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

[data-coreui-theme="light"] #logTocNav a.toc-active {
    background: rgba(214,51,80,0.06);
}

/* ----- Lightbox overlay ----- */
#lb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#lb-overlay.lb-visible { display: flex; }

body.lb-open { overflow: hidden; }

.lb-img-wrap {
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lb-img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    user-select: none;
    display: block;
    margin: 0;
}

.lb-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.lb-btn:hover { background: rgba(255, 255, 255, 0.25); }

.lb-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1rem;
}

.lb-prev { margin-right: 0.25rem; }
.lb-next { margin-left:  0.25rem; }

#lb-counter {
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

@media (max-width: 600px) {
    .lb-prev, .lb-next { width: 36px; height: 36px; font-size: 1.2rem; }
}

/* ── Chart embed wrapper & enlarge button ───────────────────────────────── */
.chart-embed {
    position: relative;
    margin: 2rem 0;
}

.ce-enlarge-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s, background 0.18s, color 0.18s;
    z-index: 10;
    backdrop-filter: blur(6px);
    padding: 0;
}
.ce-enlarge-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.chart-embed:hover .ce-enlarge-btn {
    opacity: 1;
}
.ce-enlarge-btn:hover {
    background: rgba(233, 69, 96, 0.55);
    border-color: rgba(233, 69, 96, 0.6);
    color: #fff;
}

/* ── Chart embed modal ──────────────────────────────────────────────────── */
#ce-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
#ce-modal.ce-visible {
    display: flex;
}
body.ce-open { overflow: hidden; }

.ce-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 15, 0.88);
    backdrop-filter: blur(4px);
}
.ce-dialog {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 90vh;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}
#ce-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.ce-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    backdrop-filter: blur(6px);
    padding: 0;
}
.ce-close:hover {
    background: rgba(220, 53, 69, 0.55);
    border-color: rgba(220, 53, 69, 0.5);
    color: #fff;
}

@media (max-width: 600px) {
    #ce-modal { padding: 0.5rem; }
    .ce-dialog { height: 85vh; border-radius: 8px; }
}

/* Chart iframes stack vertically on mobile — need more height */
@media (max-width: 700px) {
    .chart-embed iframe { height: 820px !important; }
}