/* =============================================================
   ChatMMM Analysis Detail v2 - styles (the web Glance)
   The read card, source row and action cards are shared with the
   Deep dive panel and live in deep-dive.css.
   ============================================================= */
@layer components {

    .andetail-detail {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 4px;
    }

    /* One column: read card, source row, chart, actions, related, footer. */
    .andetail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
    .andetail-layout--single { grid-template-columns: minmax(0, 1fr); }
    .andetail-layout__main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

    /* ---------- Loading ---------- */
    .andetail-detail__loading {
        text-align: center;
        padding: 80px 16px;
    }
    .andetail-detail__spinner {
        width: 56px;
        height: 56px;
        margin: 0 auto 16px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        box-shadow: var(--elev-2);
        animation: andetail-pulse 1.8s ease-in-out infinite;
    }
    @keyframes andetail-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50%      { transform: scale(0.94); opacity: 0.7; }
    }
    .andetail-detail__loading-title {
        font-size: var(--fs-md);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }
    .andetail-detail__loading-sub {
        font-size: var(--fs-sm);
        color: var(--text-muted);
        margin: 4px 0 0;
    }

    /* ---------- Error ---------- */
    .andetail-detail__error {
        text-align: center;
        padding: 80px 16px;
        max-width: 520px;
        margin: 0 auto;
    }
    .andetail-detail__error > i {
        font-size: 40px;
        color: var(--text-muted);
        margin-bottom: 16px;
    }
    .andetail-detail__error h2 {
        font-size: var(--fs-lg);
        margin: 0 0 8px;
        color: var(--text-primary);
    }
    .andetail-detail__error p {
        font-size: var(--fs-sm);
        color: var(--text-muted);
        margin: 0 0 20px;
    }
    .andetail-detail__error-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ---------- Buttons ---------- */
    .andetail-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 10px;
        font-weight: 600;
        font-size: var(--fs-sm);
        text-decoration: none;
        border: 1px solid transparent;
        cursor: pointer;
        transition: transform var(--dur-fast) var(--ease-out),
                    background var(--dur-fast) var(--ease-out);
    }
    .andetail-btn--primary {
        background: var(--brand-700);
        color: #fff;
    }
    .andetail-btn--primary:hover { background: var(--brand-500); transform: translateY(-1px); }
    .andetail-btn--ghost {
        background: var(--surface-card);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    .andetail-btn--ghost:hover { background: var(--surface-sunken); }

    /* ---------- Header (plain, no card): back link, eyebrow row, headline ---------- */
    .andetail-head {
        padding: 4px 4px 2px;
        margin-bottom: 14px;
    }

    .andetail-head__back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-xs);
        color: var(--text-muted);
        text-decoration: none;
        font-weight: 600;
        margin-bottom: 12px;
    }
    .andetail-head__back:hover { color: var(--brand-700); }

    .andetail-head__row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .andetail-headline {
        font-size: var(--fs-xl, 22px);
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.35;
        margin: 0;
    }

    /* The eyebrow: ticker · company, plain text (the stock page is an action). */
    .andetail-eyebrow { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
    .andetail-eyebrow__ticker { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
    .andetail-eyebrow__company { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* The plain price move since tracking; the ⓘ beside it explains it. */
    .andetail-pct {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        font-size: var(--fs-sm);
    }
    .andetail-head__row .cmm-movement-info { min-width: 36px; min-height: 36px; margin-left: -6px; font-size: 16px; }

    .andetail-time {
        margin-left: auto;
        font-size: var(--fs-xs);
    }

    /* ---------- Card ---------- */
    .andetail-card {
        background: var(--surface-card);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        padding: 20px 24px;
        margin-bottom: 16px;
    }
    .andetail-card__head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }
    .andetail-card__head h2 {
        font-size: var(--fs-md);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }
    .andetail-card__head i {
        color: var(--brand-700);
        font-size: 14px;
    }
    .andetail-card__body {
        font-size: var(--fs-sm);
        color: var(--text-primary);
        line-height: 1.6;
        margin: 0;
    }
    .andetail-card__actions {
        margin-top: 16px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---------- Summary locked ---------- */
    .andetail-locked {
        color: var(--text-secondary);
        font-style: normal;
    }
    .andetail-unlock-status {
        min-height: 20px;
        margin: 12px 0 0;
        color: var(--text-secondary);
        font-size: var(--fs-sm);
        font-style: normal;
    }
    .andetail-unlock-status:empty { display: none; }
    .andetail-unlock-status[data-state="error"] { color: var(--bear, #dc2626); }
    .andetail-btn--reminder {
        color: var(--brand-700);
        background: transparent;
        border-color: var(--brand-500);
    }
    .andetail-btn--reminder:hover { background: var(--brand-50); }
    .andetail-btn--reminder.is-enabled {
        color: var(--bull-strong, #047857);
        border-color: var(--bull, #16a34a);
        background: var(--bull-soft, #d1fae5);
    }
    .andetail-available-banner {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 18px;
        padding: 12px 16px;
        border: 1px solid color-mix(in srgb, var(--bull, #16a34a) 42%, transparent);
        border-radius: 12px;
        background: color-mix(in srgb, var(--bull, #16a34a) 10%, var(--surface-card));
        color: var(--text-primary);
        font-size: var(--fs-sm);
    }
    .andetail-available-banner i { color: var(--bull-strong, #047857); }
    .andetail-btn:disabled {
        cursor: wait;
        opacity: .68;
        transform: none;
    }
    .andetail-btn:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--brand-500) 45%, transparent);
        outline-offset: 2px;
    }

    /* ---------- Hero price chart card ---------- */
    .andetail-chartcard {
        padding: 16px 18px 14px;
    }
    .andetail-chartcard__head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }
    .andetail-chartcard__title {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .andetail-chartcard__ticker {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: var(--fs-xl);
        font-weight: 800;
        color: var(--text-primary);
        letter-spacing: -0.01em;
    }
    .andetail-chartcard__meta {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
        max-width: 280px;
    }
    .andetail-chartcard__meta:empty { display: none; }
    .andetail-chartcard__company {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .andetail-chartcard__company:empty { display: none; }
    .andetail-chartcard__industry {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .andetail-chartcard__industry:empty { display: none; }
    .andetail-chartcard__tabs {
        display: inline-flex;
        gap: 4px;
        background: var(--surface-sunken);
        padding: 3px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    .andetail-chartcard__tab {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: var(--fs-xs);
        font-weight: 700;
        padding: 5px 10px;
        border-radius: 6px;
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .andetail-chartcard__tab:hover { color: var(--text-primary); }
    .andetail-chartcard__tab[data-active="true"] {
        background: var(--surface-card);
        color: var(--brand-700);
        box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }

    .andetail-chartcard__pricegroup {
        text-align: right;
        min-width: 140px;
    }
    .andetail-chartcard__price {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 26px;
        font-weight: 800;
        line-height: 1.1;
        color: var(--text-primary);
        letter-spacing: -0.02em;
    }
    .andetail-chartcard__change {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: var(--fs-sm);
        font-weight: 700;
        margin-top: 2px;
        color: var(--text-muted);
    }
    .andetail-chartcard__change--up   { color: var(--bull-strong, #16a34a); }
    .andetail-chartcard__change--down { color: var(--bear-strong, #dc2626); }
    .andetail-chartcard__scrubdate {
        font-size: 10px;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .andetail-chartcard__canvasWrap {
        position: relative;
        width: 100%;
        height: 280px;
        background: var(--surface-sunken);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 8px;
        touch-action: pan-y;
    }
    .andetail-chartcard__canvasWrap > canvas {
        position: absolute !important;
        inset: 8px !important;
        width: calc(100% - 16px) !important;
        height: calc(100% - 16px) !important;
    }
    .andetail-chartcard__loading {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: var(--fs-sm);
        color: var(--text-muted);
        background: var(--surface-sunken);
        border-radius: 10px;
        pointer-events: none;
    }
    .andetail-chartcard__loading[hidden] { display: none; }
    .andetail-chartcard__loading i { color: var(--brand-500); font-size: 18px; }
    .andetail-chartcard__nodata {
        font-size: var(--fs-sm);
        color: var(--text-muted);
        font-style: italic;
    }

    .andetail-chartcard__periods {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin-top: 12px;
        flex-wrap: wrap;
    }
    .andetail-chartcard__period {
        font-size: var(--fs-xs);
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 999px;
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .andetail-chartcard__period:hover {
        background: var(--surface-sunken);
        color: var(--text-primary);
    }
    .andetail-chartcard__period[data-active="true"] {
        background: var(--brand-50);
        color: var(--brand-700);
    }

    /* Stats strip embedded at the foot of the chart card. */
    .andetail-chartcard__stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--border-color);
    }
    .andetail-chartcard__stats .andetail-stat {
        background: var(--surface-sunken);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: flex-start;
    }
    .andetail-chartcard__stats .andetail-stat__label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .andetail-chartcard__stats .andetail-stat__value {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: var(--fs-md);
        font-weight: 700;
        color: var(--text-primary);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
    }
    .andetail-chartcard__stats .andetail-stat__primary {
        font: inherit;
        color: inherit;
    }
    .andetail-chartcard__stats .andetail-stat__sub {
        font-family: var(--font-sans, inherit);
        font-size: 11px;
        font-weight: 500;
        color: var(--text-muted);
        letter-spacing: 0;
    }
    /* The value's colour lives in the unlayered block at the end of this file
       (theme-dark.css resets span colour); the parenthetical stays subdued. */

    @media (max-width: 560px) {
        .andetail-chartcard__stats { grid-template-columns: 1fr; }
    }

    @media (max-width: 560px) {
        .andetail-chartcard__canvasWrap { height: 220px; }
        .andetail-chartcard__price { font-size: 22px; }
        .andetail-chartcard__head { flex-direction: column; align-items: stretch; }
        .andetail-chartcard__pricegroup { text-align: left; }
    }
    /* ---------- Sidebar: Related news ---------- */
    .andetail-related__body {
        display: flex;
        flex-direction: column;
    }
    .andetail-related__loading,
    .andetail-related__empty {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        font-size: var(--fs-sm);
        color: var(--text-muted);
        font-style: italic;
    }
    .andetail-related__loading i { color: var(--brand-500); font-style: normal; }
    .andetail-related__item {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
        text-decoration: none;
        color: inherit;
        transition: background var(--dur-fast) var(--ease-out);
        margin: 0 -8px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 6px;
    }
    .andetail-related__item:last-child { border-bottom: 0; }
    .andetail-related__item:hover { background: var(--surface-sunken); }
    .andetail-related__dot {
        flex: 0 0 8px;
        width: 8px;
        height: 8px;
        margin-top: 6px;
        border-radius: 50%;
        background: var(--text-muted);
    }
    .andetail-related__dot--bullish { background: var(--bull-strong, #16a34a); }
    .andetail-related__dot--bearish { background: var(--bear-strong, #dc2626); }
    .andetail-related__dot--neutral { background: var(--text-muted); }
    .andetail-related__dot--locked { background: var(--border-color, #cbd5e1); } /* read withheld */
    .andetail-related__text { min-width: 0; flex: 1; }
    .andetail-related__headline {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .andetail-related__time {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    /* ---------- Collapsible cards ---------- */
    .andetail-collapse__head { cursor: pointer; user-select: none; min-height: 40px; }
    .andetail-collapse__head:focus-visible { outline: none; box-shadow: var(--elev-glow-brand); border-radius: 8px; }
    .andetail-collapse__chevron { margin-left: auto; color: var(--text-muted) !important; font-size: 12px !important; }
    .andetail-collapse__body { margin-top: 12px; }
    .andetail-collapse__body[hidden] { display: none !important; }
    .andetail-card[data-cmm-collapsible="1"]:not(.is-expanded) .andetail-card__head { margin-bottom: 0; }

    /* ---------- Footer disclosure ---------- */
    .andetail-footer {
        display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
        margin: 4px 0 0; padding: 14px 0; font-size: var(--fs-xs);
    }
    .andetail-footer__id { font-family: var(--font-mono); font-size: 10px; }

    /* ---------- Mobile ---------- */
    @media (max-width: 640px) {
        .andetail-card { padding: 16px; }
        .andetail-headline { font-size: var(--fs-lg, 20px); }
        .andetail-time { margin-left: 0; flex-basis: 100%; }
    }
}

/* Unlayered: theme-dark.css resets `span` colour with unlayered (0,1,2)
   rules, so every coloured span on this page carries two classes here. */
.andetail-eyebrow .andetail-eyebrow__ticker { color: var(--text-secondary); }
.andetail-eyebrow .andetail-eyebrow__company, .andetail-head__row .andetail-time, .andetail-layout__main .andetail-footer, .andetail-footer .andetail-footer__id { color: var(--text-muted); }
.andetail-pct.andetail-pct--bullish, .andetail-stat__value.andetail-stat__value--up { color: var(--bull-strong); }
.andetail-pct.andetail-pct--bearish, .andetail-stat__value.andetail-stat__value--down { color: var(--bear-strong); }
.andetail-pct.andetail-pct--neutral, .andetail-stat__value.andetail-stat__value--flat { color: var(--text-muted); }
.andetail-chartcard__stats .andetail-stat__label, .andetail-chartcard__stats .andetail-stat__sub { color: var(--text-muted); }

/* ── Updates to this story ───────────────────────────────────────────────
   Later articles about the same ongoing event that added something. They are
   not separate cards anywhere: the server keeps them out of every feed and
   hangs them on the story they update. Unlayered with two classes per coloured
   element, for the dark-theme reset described above. */
.andetail-updates .andetail-updates__body { display: flex; flex-direction: column; }
.andetail-updates .andetail-updates__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
}
.andetail-updates .andetail-updates__item:last-child { border-bottom: 0; }
.andetail-updates .andetail-updates__dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--brand-500);
}
.andetail-updates .andetail-updates__text { flex: 1 1 auto; min-width: 0; }
.andetail-updates .andetail-updates__note {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-primary);
}
.andetail-updates .andetail-updates__headline {
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.andetail-updates .andetail-updates__time {
    flex: none;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}