.cgd-dashboard,
.cgd-dashboard * {
    box-sizing: border-box;
}

.cgd-dashboard {
    --cgd-bg: #f8fafc;
    --cgd-surface: #ffffff;
    --cgd-surface-2: #ffffff;
    --cgd-border: #e5e7eb;
    --cgd-text: #111827;
    --cgd-muted: #6b7280;
    --cgd-body: #374151;
    --cgd-gold: #b8892d;
    --cgd-gold-soft: #faf3e3;
    --cgd-gold-border: #ecd9a8;
    --cgd-navy: #1e2a4a;
    --cgd-green: #15803d;
    --cgd-red: #b91c1c;
    --cgd-track: rgba(17, 24, 39, 0.06);
    --cgd-hairline: rgba(17, 24, 39, 0.12);
    --cgd-price-card-bg: linear-gradient(135deg, #fffaf0, #ffffff);
    --cgd-status-bg: #fff7ed;
    --cgd-status-border: #f3d19c;
    --cgd-status-text: #8a5a12;
    --cgd-dot: #d1d5db;
    --cgd-radius: 18px;
    max-width: none;
    margin: 0 auto;
    padding: 24px 16px 48px;
    background: var(--cgd-bg);
    color: var(--cgd-text);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* Dark mode: follows the OS preference. Everything below is driven by the
   custom properties above, so the theme swap is (almost) only a palette
   swap; the interactive chart re-themes itself in JS off the same media
   query. Green/red/gold are brightened for contrast on dark surfaces. */
@media (prefers-color-scheme: dark) {
    .cgd-dashboard {
        --cgd-bg: #0e1320;
        --cgd-surface: #161d2d;
        --cgd-surface-2: #1d2536;
        --cgd-border: #2a3349;
        --cgd-text: #e6eaf2;
        --cgd-muted: #8e97ab;
        --cgd-body: #c4cbd8;
        --cgd-gold: #d5a842;
        --cgd-gold-soft: rgba(213, 168, 66, 0.12);
        --cgd-gold-border: rgba(213, 168, 66, 0.45);
        --cgd-navy: #f2e8cf;
        --cgd-green: #34d178;
        --cgd-red: #f87171;
        --cgd-track: rgba(255, 255, 255, 0.09);
        --cgd-hairline: rgba(255, 255, 255, 0.16);
        --cgd-price-card-bg: linear-gradient(135deg, #232b3f, #1d2536);
        --cgd-status-bg: rgba(213, 168, 66, 0.1);
        --cgd-status-border: rgba(213, 168, 66, 0.45);
        --cgd-status-text: #e3c476;
        --cgd-dot: #3a445c;
    }

    /* The dark gold is brighter, so white text on the active tab would
       drop below readable contrast — flip it to near-black. */
    .cgd-chart-tab.is-active {
        color: #10141f;
    }
}

/* The hidden attribute must always win: component rules like
   ".cgd-status { display: block }" otherwise override the UA's
   [hidden] { display: none } and "hidden" elements stay visible. */
.cgd-dashboard [hidden] {
    display: none !important;
}

.cgd-dashboard a {
    color: inherit;
    text-decoration: none;
}

.cgd-hero,
.cgd-section {
    background: var(--cgd-surface);
    border: 1px solid var(--cgd-border);
    border-radius: var(--cgd-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    margin: 0 0 18px;
    padding: 8px 16px;
}

.cgd-hero {
    border-top: 4px solid var(--cgd-gold);
}

.cgd-kicker,
.cgd-section__desc,
.cgd-news__meta,
.cgd-empty {
    color: var(--cgd-muted);
}

.cgd-kicker {
    color: var(--cgd-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.cgd-dashboard .cgd-hero__title {
    background: none;
    border: 0;
    color: var(--cgd-text);
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 10px;
    padding: 0;
}

.cgd-hero__lead {
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
}

/* Kicker row: brand above the hero title. */
.cgd-hero__top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: space-between;
    margin: 0 0 8px;
}

.cgd-hero__top .cgd-kicker {
    margin: 0;
}

.cgd-hero__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: var(--cgd-muted);
    font-size: 14px;
    margin-top: 10px;
}

/* Temporarily hide the PWA install prompt without removing its markup or JS. */
.cgd-hero__meta--temporarily-hidden {
    display: none !important;
}

.cgd-section__head {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin: 0 0 8px;
}

.cgd-price-heading {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* SWELL styles .post_content h2/h3 (colored background bar, #fff text,
   padding, border) with (0,1,1) specificity — its :where() part adds
   nothing, so the .cgd-dashboard prefix (0,2,0) is enough to win. Every
   property SWELL sets must be reset explicitly, not just the color.
   --cgd-text is #111827 in light / #e6eaf2 in dark. */
.cgd-dashboard .cgd-section__title {
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--cgd-text);
    font-size: 18px;
    line-height: 1.1;
    margin: 0;
    padding: 0;
}

.cgd-current-price {
    color: var(--cgd-gold);
    font-size: clamp(20px, 1.8vw, 28px);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.cgd-section__desc {
    font-size: 14px;
    line-height: 1.6;
    margin: 4px 0 0;
}

.cgd-section--tools .cgd-section__head {
    display: block;
}

/* Top row: price + snapshot (left) beside Gold Timeline (right) */
.cgd-top-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    margin: 0 0 18px;
}

.cgd-top-grid__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.cgd-top-grid__main .cgd-section {
    margin: 0;
}

.cgd-top-grid__side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    min-height: 0;
}

.cgd-top-grid__side .cgd-section {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 0;
    width: 100%;
}

.cgd-top-grid__side > [data-cgd-section="trends"] {
    flex: 1 1 0;
    min-height: 0;
}

.cgd-top-grid__side > [data-cgd-section="snapshot"] {
    flex: 0 0 auto;
}

.cgd-top-grid__side .cgd-timeline {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

/* Snapshot/Timeline headers sit in the narrower top-grid columns, so the
   description always wraps under the title instead of squeezing beside it. */
.cgd-top-grid .cgd-section__head {
    flex-direction: column;
}

.cgd-card {
    background: var(--cgd-surface-2);
    border: 1px solid var(--cgd-border);
    border-radius: 12px;
    padding: 16px;
}

/* Compact macro-driver strip (DXY / US10Y / XAGUSD / VIX) under the price
   section. Daily Change and Day Range lead the strip, followed by the
   macro drivers. Stale drivers are dimmed instead of badged to keep the row tight. */
.cgd-driver-strip {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.cgd-driver {
    align-items: baseline;
    display: flex;
    gap: 2px;
}

.cgd-driver.is-stale {
    opacity: 0.55;
}

.cgd-driver__label {
    color: var(--cgd-muted);
    font-size: 11px;
}

.cgd-driver__value {
    font-size: 13px;
}

.cgd-driver__value--change.is-up {
    color: var(--cgd-green);
}

.cgd-driver__value--change.is-down {
    color: var(--cgd-red);
}

.cgd-driver__change {
    color: var(--cgd-muted);
    font-size: 11px;
    font-weight: 600;
}

.cgd-driver__change.is-up {
    color: var(--cgd-green);
}

.cgd-driver__change.is-down {
    color: var(--cgd-red);
}

/* Trader support/resistance watch (the old Market Snapshot frame): two
   price ladders with mention-count bars, colored like the candles. */
.cgd-levels {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cgd-dashboard .cgd-levels__heading {
    background: none;
    border: 0;
    font-size: 12px;
    margin: 0 0 8px;
    padding: 0;
}

.cgd-dashboard .cgd-levels__heading--resistance {
    color: var(--cgd-red);
}

.cgd-dashboard .cgd-levels__heading--support {
    color: var(--cgd-green);
}

.cgd-levels__list {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Keep each price/reason row compact while leaving room for the mention
   count at the right edge. */
.cgd-levels__scroll {
    max-height: 160px;
    overflow-y: scroll;
}

.cgd-level {
    display: block;
    margin: 0!important;
}

.cgd-level__main {
    display: block;
    font-size: 13px;
}

.cgd-level__price {
    font-weight: 600;
    white-space: nowrap;
}

.cgd-level__basis {
    color: var(--cgd-muted);
    font-size: 12px;
    line-height: 1.35;
    margin: 2px 0 6px;
}

.cgd-level__basis--resistance {
    border-left: 2px solid var(--cgd-red);
    padding-left: 6px;
}

.cgd-level__basis--support {
    border-left: 2px solid var(--cgd-green);
    padding-left: 6px;
}

/* Mobile stacks the two ladder columns so each price level has enough
   horizontal space for the price and its explanation. */
@media (max-width: 640px) {
    .cgd-levels {
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .cgd-level__main {
        font-size: 12px;
    }
}

.cgd-status {
    display: block;
    font-size: 13px;
}

.cgd-status {
    border: 1px solid var(--cgd-status-border);
    border-radius: 999px;
    color: var(--cgd-status-text);
    line-height: 1.2;
    padding: 4px 8px;
    width: max-content;
}

.cgd-status--stale {
    background: var(--cgd-status-bg);
}

/* Price chart: interactive candlestick chart (JS) with the
   server-rendered SVG sparkline as the default-visible fallback until the
   bars arrive - see initSparkChart() in copi-gold-dashboard.js. */
.cgd-spark {
    margin-top: 14px;
}

/* Timeframe tabs (M1-D1). Server-rendered with [hidden]; JS removes it
   only after the candlestick chart initializes, so the SVG-fallback state
   never shows controls that cannot work. */
.cgd-chart-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    margin: 0 0 8px;
}

.cgd-chart-tabs[hidden] {
    display: none;
}

.cgd-chart-tab {
    background: transparent;
    border: 1px solid var(--cgd-hairline);
    border-radius: 999px;
    color: var(--cgd-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    padding: 5px 12px;
}

.cgd-chart-tab.is-active {
    background: var(--cgd-gold);
    border-color: var(--cgd-gold);
    color: #ffffff;
}

.cgd-spark-chart {
    display: none;
    height: 160px;
    width: 100%;
}

.cgd-spark-chart.is-active {
    display: block;
}

/* The fallback wrapper reserves the SAME height as the interactive chart
   and centers the (shorter) sparkline in it, so swapping in the candles
   does not change the left column's height — initTopGrid() pins the
   timeline/news columns to that height, and without the reservation the
   whole layout jumped ~130px taller once the bars arrived (CLS). */
.cgd-spark-svg {
    align-items: center;
    display: flex;
    height: 160px;
    position: relative;
}

.cgd-spark-svg svg {
    width: 100%;
}

.cgd-spark-svg.is-hidden {
    display: none;
}

/* Initial-load state: is-loading is SERVER-rendered so the very first
   paint already shows the sparkline blurred under a spinner (a JS-added
   class would flash the crisp SVG first). JS removes it when the candles
   arrive or the fetch fails; a noscript style next to the markup clears
   it for no-JS visitors; and the 10s-delayed forwards animations below
   are the failsafe when the script never ran at all. */
.cgd-spark-svg.is-loading svg {
    animation: cgd-unblur 0.4s ease 10s forwards;
    filter: blur(8px);
    opacity: 0.45;
}

.cgd-spark-svg.is-loading::after {
    animation:
        cgd-spin 0.8s linear infinite,
        cgd-fade-out 0.4s ease 10s forwards;
    border: 3px solid var(--cgd-hairline);
    border-radius: 50%;
    border-top-color: var(--cgd-gold);
    content: "";
    height: 28px;
    left: 50%;
    margin: -14px 0 0 -14px;
    position: absolute;
    top: 50%;
    width: 28px;
}

@keyframes cgd-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes cgd-unblur {
    to {
        filter: none;
        opacity: 1;
    }
}

@keyframes cgd-fade-out {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.cgd-spark svg {
    display: block;
    width: 100%;
}

.cgd-spark__label {
    color: var(--cgd-muted);
    font-size: 12px;
    margin: 6px 0 0;
    text-align: right;
}

.cgd-analysis-summary {
    border-top: 1px solid var(--cgd-hairline);
    margin-top: 16px;
    padding-top: 14px;
}

.cgd-analysis-summary__title {
    color: var(--cgd-text);
    font-size: 15px;
    line-height: 1.35;
    margin: 0 0 7px;
}

.cgd-analysis-summary__text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    white-space: pre-line;
}

/* News: featured card + compact rows */
/* Single stacked list of rows (the old featured card was merged into the
   list). The card styles below (__featured-thumb/__featured-body) are still
   used by the mobile carousel cards. */
.cgd-news {
    display: block;
}

.cgd-news__featured-thumb {
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    width: 100%;
}

.cgd-news__featured-body {
    padding: 16px 18px 18px;
}

.cgd-dashboard .cgd-news__title {
    background: none;
    border: 0;
    color: var(--cgd-text);
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 8px;
    padding: 0;
}

.cgd-news__featured-body p {
    color: var(--cgd-body);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

/* News rows mirror the timeline items: no card boxes, just a bottom
   separator and the same vertical rhythm (14px / 4px edge padding). */
.cgd-news__list {
    align-content: start;
    display: grid;
}

.cgd-news__row {
    align-items: flex-start;
    border-bottom: 1px solid var(--cgd-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 4px;
}

.cgd-news__row:first-child {
    padding-top: 4px;
}

.cgd-news__row:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.cgd-news__row-body {
    min-width: 0;
}

.cgd-news__row-thumb {
    border-radius: 8px;
    flex: 0 0 auto;
    height: 60px;
    object-fit: cover;
    width: 96px;
}

.cgd-dashboard .cgd-news__row-title {
    background: none;
    border: 0;
    color: var(--cgd-text);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.cgd-news__row-summary {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--cgd-muted);
    display: -webkit-box;
    font-size: 12px;
    line-height: 1.5;
    margin: 4px 0 0;
    overflow: hidden;
}

.cgd-news__meta {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 6px 12px;
    margin-bottom: 4px;
}

.cgd-tag {
    color: var(--cgd-gold);
    font-weight: 700;
}

/* Trader timeline */
.cgd-timeline {
    display: grid;
}

.cgd-timeline__item {
    border-bottom: 1px solid var(--cgd-border);
    padding: 14px 4px;
}

.cgd-timeline__item:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.cgd-timeline__item:first-child {
    padding-top: 4px;
}

.cgd-timeline__body {
    min-width: 0;
}

.cgd-section__note {
    color: var(--cgd-muted);
    font-size: 12px;
    margin: 12px 0 0;
}

.cgd-section__note--top {
    margin: -8px 0 14px;
}

.cgd-timeline__meta {
    color: var(--cgd-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 6px;
    margin-bottom: 4px;
}

.cgd-timeline__meta a {
    color: var(--cgd-text);
    font-weight: 700;
}

.cgd-timeline__meta a:hover {
    color: var(--cgd-gold);
}

.cgd-timeline__text {
    color: var(--cgd-body);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    overflow-wrap: break-word;
}

/* Mobile news carousel (hidden on desktop) */
.cgd-news__carousel {
    display: none;
    min-width: 0;
}

/* Cards (tools) */
.cgd-card-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cgd-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cgd-card--tool {
    overflow: hidden;
    padding: 0;
}

.cgd-card__image {
    aspect-ratio: 16 / 9;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.cgd-card--has-mobile-image .cgd-card__image {
    aspect-ratio: 296 / 99;
}

.cgd-card__picture {
    display: block;
}

.cgd-card span,
.cgd-notes {
    color: var(--cgd-body);
    font-size: 14px;
    line-height: 1.65;
}

.cgd-card--link {
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.cgd-card--link:hover {
    border-color: var(--cgd-gold-border);
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.07);
    color: inherit;
}

.cgd-card--link:hover strong,
.cgd-news__title a:hover,
.cgd-news__row-title a:hover {
    color: var(--cgd-gold);
}

.cgd-card__icon {
    align-items: center;
    background: var(--cgd-gold-soft);
    border-radius: 50%;
    color: var(--cgd-gold);
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.cgd-card__icon svg {
    height: 24px;
    width: 24px;
}

.cgd-notes {
    margin: 0;
    padding-left: 20px;
}

.cgd-methodology__compact {
    display: none;
    margin: 0;
}

.cgd-empty {
    margin: 0;
}

@media (max-width: 900px) {
    .cgd-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cgd-news {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Keep the mobile browser layout in sync with standalone PWA mode. */
    [data-cgd-section="price"] .cgd-spark-chart,
    [data-cgd-section="price"] .cgd-spark-svg {
        height: 450px;
    }

    .cgd-dashboard .cgd-section__title {
        font-size: 16px;
    }

    .cgd-current-price {
        font-size: 18px;
    }

    .cgd-section__desc {
        font-size: 12px;
    }

    .cgd-driver__label,
    .cgd-driver__change {
        font-size: 10px;
    }

    .cgd-driver__value {
        font-size: 12px;
    }

    .cgd-dashboard .cgd-levels__heading {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .cgd-level__main,
    .cgd-level__basis {
        font-size: 11px;
    }

    .cgd-top-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* On mobile the analysis column is part of the normal vertical flow.
       Do not let the desktop height-sharing flex rules collapse Timeline. */
    .cgd-top-grid__side {
        display: flex;
        flex-direction: column;
        gap: 18px;
        height: auto !important;
        min-height: 0;
    }

    .cgd-top-grid__side .cgd-section {
        flex: none;
        height: auto !important;
        min-height: 0;
    }

    .cgd-top-grid__side > [data-cgd-section="trends"] {
        flex: none;
        min-height: auto;
    }

    .cgd-top-grid__side .cgd-timeline {
        flex: none;
        max-height: 480px;
        overflow-y: auto;
    }

    .cgd-dashboard > [data-cgd-section="news"] {
        height: auto !important;
    }
}

@media (max-width: 640px) {
    .cgd-dashboard {
        padding: 14px 10px 32px;
    }

    .cgd-hero,
    .cgd-section {
        border-radius: 14px;
        padding: 8px 16px;
    }

    .cgd-hero__title {
        font-size: 28px;
    }

    .cgd-section__head {
        display: block;
    }

    .cgd-card-grid {
        grid-template-columns: 1fr;
    }

    /* News turns into a swipeable one-card carousel with dots */
    .cgd-news__list {
        display: none;
    }

    .cgd-news__carousel {
        display: block;
    }

    .cgd-news__track {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        position: relative;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .cgd-news__track::-webkit-scrollbar {
        display: none;
    }

    .cgd-news__card {
        background: var(--cgd-surface-2);
        border: 1px solid var(--cgd-border);
        border-radius: 14px;
        flex: 0 0 calc(100% - 32px);
        min-width: 0;
        overflow: hidden;
        scroll-snap-align: start;
    }

    .cgd-news__card .cgd-news__featured-body {
        padding: 12px 14px 14px;
    }

    .cgd-news__card .cgd-news__meta {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .cgd-news__card .cgd-news__title {
        font-size: 16px;
        line-height: 1.45;
        margin: 0 0 6px;
    }

    .cgd-news__card .cgd-news__featured-body p {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        font-size: 13px;
        line-height: 1.6;
        overflow: hidden;
    }

    .cgd-news__dots {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 12px;
    }

    .cgd-news__dot {
        background: var(--cgd-dot);
        border: 0;
        border-radius: 999px;
        cursor: pointer;
        height: 8px;
        padding: 0;
        transition:
            background 0.2s ease,
            width 0.2s ease;
        width: 8px;
    }

    .cgd-news__dot.is-active {
        background: var(--cgd-gold);
        width: 20px;
    }
}

/* ---- PWA ----------------------------------------------------------------
   Offline badge + install button in the hero, and the standalone-mode
   "shed the site chrome" rules. This media query only ships on the
   dashboard page (this stylesheet is enqueued there only), so the theme
   selectors below cannot leak into other pages. */

.cgd-install {
    background: transparent;
    border: 1px solid var(--cgd-gold);
    border-radius: 999px;
    color: var(--cgd-gold);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
}

.cgd-install:hover {
    background: var(--cgd-gold-soft);
}

@media (display-mode: standalone) {
    /* WordPress adds a 46px admin-bar offset for logged-in users. The
       standalone dashboard has no admin controls, so remove both the bar
       and the offset it adds to the document. */
    html {
        margin-top: 0 !important;
    }

    #wpadminbar {
        display: none !important;
    }

    /* Launched from the home screen: the dashboard IS the app. Hide the
       SWELL site chrome (header, footer, breadcrumb, fixed menus). Harmless
       no-ops if a selector does not exist in the active theme version. */
    .l-header,
    .l-fixHeader,
    .l-footer,
    .p-breadcrumb,
    .p-spMenu,
    .p-fixBtnWrap,
    .w-beforeFooter,
    #before_footer_widget,
    #fix_bottom_menu {
        display: none !important;
    }

    .l-content {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* App mode: tighter top padding (no site header above). */
    .cgd-dashboard {
        padding-bottom: 0;
        padding-top: 12px;
    }

    /* The app name/icon already identify the app and the price section
       carries its own Updated label, so the hero is redundant in standalone. */
    .cgd-hero {
        display: none !important;
    }

    /* Already installed — no point offering the install button. */
    .cgd-install {
        display: none !important;
    }

    .cgd-section--notes .cgd-methodology__full {
        display: none;
    }

    .cgd-section--notes {
        background: transparent;
        border: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    .cgd-section--notes .cgd-section__head {
        display: none;
    }

    .cgd-section--notes .cgd-methodology__compact {
        color: var(--cgd-muted);
        display: block;
        font-size: 11px;
        line-height: 1.5;
    }

    [data-cgd-section="price"] .cgd-spark-chart,
    [data-cgd-section="price"] .cgd-spark-svg {
        height: 450px;
    }

    .cgd-dashboard .cgd-section__title {
        font-size: 16px;
    }

    .cgd-current-price {
        font-size: 18px;
    }

    .cgd-section__desc {
        font-size: 12px;
    }

    .cgd-driver__label,
    .cgd-driver__change {
        font-size: 10px;
    }

    .cgd-driver__value {
        font-size: 12px;
    }

    .cgd-dashboard .cgd-levels__heading {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .cgd-level__main {
        font-size: 11px;
    }

    .cgd-level__basis {
        font-size: 11px;
    }

    [data-cgd-section="snapshot"] .cgd-section__note {
        display: none;
    }

    [data-cgd-section="snapshot"] .cgd-levels__scroll {
        max-height: 160px;
    }

    /* Mobile PWA view navigation. The dashboard keeps one server-rendered
       page, but feels like an app by showing one section at a time. */
    @media (max-width: 899px) {
        .cgd-dashboard[data-cgd-pwa-nav] {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
        }

        .cgd-dashboard[data-cgd-pwa-nav] .cgd-top-grid {
        display: block;
        }

        .cgd-dashboard[data-cgd-pwa-nav] .cgd-top-grid__main,
        .cgd-dashboard[data-cgd-pwa-nav] .cgd-top-grid__side {
        display: contents;
        }

        .cgd-dashboard[data-cgd-pwa-nav] [data-cgd-section] {
        display: none;
        }

        .cgd-dashboard[data-cgd-pwa-nav] [data-cgd-section].is-pwa-active {
        animation: cgd-pwa-view-in-forward 220ms ease both;
        display: block;
        }

        .cgd-dashboard[data-cgd-pwa-nav][data-cgd-pwa-direction="back"] [data-cgd-section].is-pwa-active {
        animation-name: cgd-pwa-view-in-back;
        }

        .cgd-pwa-nav {
        align-items: stretch;
        backdrop-filter: blur(14px);
        background: var(--cgd-surface);
        background: color-mix(in srgb, var(--cgd-surface) 92%, transparent);
        border-top: 1px solid var(--cgd-border);
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(var(--cgd-pwa-nav-count, 5), minmax(0, 1fr));
        left: 0;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        position: fixed;
        right: 0;
        z-index: 1000;
        }

        .cgd-pwa-nav__button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 10px;
        color: var(--cgd-muted);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        font: inherit;
        gap: 2px;
        justify-content: center;
        min-height: 54px;
        min-width: 0;
        padding: 5px 2px;
        }

        .cgd-pwa-nav__button.is-active {
        background: var(--cgd-gold-soft);
        color: var(--cgd-text);
        }

        .cgd-pwa-nav__icon {
        align-items: center;
        border: 1px solid currentColor;
        border-radius: 999px;
        display: inline-flex;
        font-size: 10px;
        font-weight: 700;
        height: 20px;
        justify-content: center;
        line-height: 1;
        width: 20px;
        }

        .cgd-pwa-nav__label {
        font-size: 10px;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        }

        @keyframes cgd-pwa-view-in-forward {
        from { opacity: 0; transform: translateX(18px); }
        to { opacity: 1; transform: translateX(0); }
        }

        @keyframes cgd-pwa-view-in-back {
        from { opacity: 0; transform: translateX(-18px); }
        to { opacity: 1; transform: translateX(0); }
        }
    }

    @media (min-width: 900px) {
        .cgd-pwa-nav {
            display: none;
        }
    }

    .cgd-top-grid__main {
        gap: 10px;
    }
}

/* Wide screens: price (2fr) | news (1fr) | X trader analysis (1fr).
   X trader analysis contains the structured support/resistance levels above
   the trader timeline. News and the analysis column get the Price column's
   pixel height from initTopGrid() and scroll internally where needed. */
@media (min-width: 1100px) {
    .cgd-dashboard {
        align-items: start;
        display: grid;
        gap: 18px;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    /* The grid gap replaces the card bottom margins. */
    .cgd-dashboard > .cgd-hero,
    .cgd-dashboard > .cgd-section {
        margin: 0;
    }

    .cgd-dashboard > .cgd-hero {
        grid-column: 1 / -1;
    }

    /* Tools / Methodology keep full width below the 3-column row. */
    .cgd-dashboard > .cgd-section {
        grid-column: 1 / -1;
    }

    /* Dissolve the 2-column wrapper so main/side sit in the outer grid.
       Rows are auto-placed: with the hero visible the columns land on the
       second row; with the hero hidden (standalone) they move to the first. */
    .cgd-top-grid {
        display: contents;
    }

    .cgd-top-grid__main {
        grid-column: 1;
        grid-row: 2;
    }

    .cgd-top-grid__side {
        grid-column: 3;
        grid-row: 2;
    }

    .cgd-dashboard > [data-cgd-section="news"] {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
        min-width: 0;
    }

    .cgd-dashboard > [data-cgd-section="news"] .cgd-section__head {
        flex-direction: column;
    }

    /* The news list scrolls inside the card (JS pins the section height). */
    .cgd-dashboard > [data-cgd-section="news"] .cgd-news {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
    }
}

/* The desktop browser has enough vertical space for a larger price chart.
   Keep the standalone/PWA chart sizing rules unchanged. */
@media (min-width: 1100px) and (display-mode: browser) {
    [data-cgd-section="price"] .cgd-spark-chart,
    [data-cgd-section="price"] .cgd-spark-svg {
        height: clamp(320px, 34vw, 460px);
    }
}