/* QFI Terminal port -- financials module
 * Ported from terminal/assets/css/components.css:
 *   .chart-section / .chart-section h3 / .chart-controls  (~L6610-6980)
 *   .rsx .cardhead / .rsx .modes.sm-modes / .rsx .tag       (~L44224-44380)
 *   .rsx .erh-readout / .erh-rd / .erh-plot                 (~L51425-51437)
 *   .rsx .oem-help / .oem-help-pop                          (~L37805-37833)
 * Colours: --accent-primary #FF9900 (theme.css:27), card bg #0c0c0c / border
 * #333 (theme.css), rx palette from ResearchComponent.js _rxC().
 * All selectors scoped under .qm-financials. No global resets.
 */

.qm-financials {
    font-family: Lato, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    color: #e2e6ec;
    background: transparent;
    box-sizing: border-box;
}
.qm-financials * { box-sizing: border-box; }

.qm-financials .fin-card {
    background: transparent;
    border: 0;
    padding: 2px;
    width: 100%;
    height: 100%;
}

/* ---- shared card head ---- */
.qm-financials .fin-h3 {
    font-size: 15.5px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #FF9900;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.qm-financials .fin-cardhead {
    display: flex;
    flex: 0 0 64px;
    height: 64px;
    min-height: 64px;
    align-items: center;
    gap: 14px;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 2px;
}
.qm-financials .fin-cardhead .fin-h3 { margin: 0; padding: 0; border: 0; flex: none; }
.qm-financials .fin-cardhead .modes { margin-left: auto; }
.qm-financials .fin-cardhead > .oem-help { margin-left: auto; }

/* ================= INCOME STATEMENT (E16, canvas) ================= */
.qm-financials .fin-canvas-wrap { position: relative; width: 100%; }
.qm-financials .fin-canvas { display: block; width: 100%; height: auto; cursor: default; }

.qm-financials .fin-tt {
    display: none;
    position: fixed;
    background: #1E1E1E;
    border: 1px solid #333333;
    padding: 9px 13px;
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    min-width: 120px;
    font-family: Lato, "Segoe UI", system-ui, sans-serif;
}
.qm-financials .fin-tt-year { font-size: 11px; font-weight: 700; color: #F0F0F0; margin-bottom: 6px; letter-spacing: 0.5px; }
.qm-financials .fin-tt-val { font-size: 12px; color: #F0F0F0; white-space: nowrap; }
.qm-financials .fin-tt-val span { margin-right: 6px; }
.qm-financials .fin-tt .t-h { font-size: 11px; font-weight: 700; color: #F0F0F0; margin-bottom: 4px; }
.qm-financials .fin-tt b { font-weight: 700; }

/* ============ EARNINGS & REVENUE HISTORY (E17, canvas) ============ */
.qm-financials .erh-card { display: flex; flex-direction: column; }
.qm-financials .modes { display: flex; border-radius: 9px; overflow: hidden; border: 1px solid #333333; }
.qm-financials .modes .m { appearance: none; border: 0; padding: 5px 14px; font: 800 11.5px/1.25 Lato, "Segoe UI", system-ui, sans-serif; background: rgba(255, 255, 255, 0.03); color: #97a2b0; cursor: pointer; user-select: none; transition: background .15s ease, color .15s ease; }
.qm-financials .modes .m.on { background: #FF9900; color: #000; }
.qm-financials .modes .m:hover:not(.on) { color: #e2e6ec; background: rgba(255, 153, 0, 0.08); }
.qm-financials .modes .m:focus-visible { outline: 2px solid #FF9900; outline-offset: -2px; }

.qm-financials .oem-help {
    position: relative; width: 20px; height: 20px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #97a2b0; background: rgba(255, 255, 255, 0.055);
    border: 1px solid #333333; cursor: help; user-select: none;
}
.qm-financials .oem-help:hover { color: #e2e6ec; border-color: #6b7684; }
.qm-financials .oem-help-pop {
    display: none; position: absolute; top: calc(100% + 8px); right: -8px; z-index: 80;
    width: min(360px, 80vw); background: #14181f; border: 1px solid #333333; border-radius: 12px;
    padding: 16px 18px; text-align: left; cursor: auto; white-space: normal;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.qm-financials .oem-help:hover .oem-help-pop { display: block; }
.qm-financials .rx-help-h { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; color: #FF9900; margin: 0 0 8px; }
.qm-financials .rx-help-p { font-size: 12.5px; line-height: 1.5; color: #cdd5e0; margin: 0 0 8px; }
.qm-financials .rx-help-p:last-child { margin-bottom: 0; }

.qm-financials .erh-readout { display: flex; flex: 0 0 32px; height: 32px; flex-wrap: nowrap; align-items: flex-end; gap: 18px; padding: 0 0 2px 78px; }
.qm-financials .erh-rd { display: flex; flex-direction: column; gap: 2px; }
.qm-financials .erh-rd-l { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 0.6px; color: #7f8997; text-transform: uppercase; }
.qm-financials .erh-rd-l i { width: 8px; height: 8px; border-radius: 2px; flex: none; display: inline-block; }
.qm-financials .erh-rd b { font-family: "JetBrains Mono", monospace; font-size: 15px; line-height: 1.05; color: #e2e6ec; }
.qm-financials .erh-rd b.pos { color: #2ebd59; }
.qm-financials .erh-rd b.negv { color: #e05252; }
.qm-financials .tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.055); border-radius: 6px; font-size: 12px; font-weight: 700; color: #97a2b0; padding: 4px 10px; }
.qm-financials .tag.erh-rd-tag {
    display: inline-flex;
    align-self: center;
    margin-left: auto;
    padding: 0 0 0 12px;
    border-left: 1px solid rgba(255, 255, 255, .075);
    border-radius: 0;
    background: transparent;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .35px;
    white-space: nowrap;
}
.qm-financials .erh-plot { width: 100%; flex: 1 1 auto; min-height: 0; position: relative; }
.qm-financials .erh-plot .fin-canvas { width: 100%; height: auto; cursor: default; }

/* ============ AAPL FLOW SCENES ============ */
.qm-financials .fin-flow-card,
.qm-financials .fin-segment-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 3px 0 0;
}
.qm-financials .fin-show-head {
    flex: 0 0 64px;
    min-height: 64px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}
.qm-financials .fin-show-head .fin-h3 {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}
.qm-financials .fin-show-head p {
    margin: 0;
    color: #8f9aa9;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05px;
}
.qm-financials.fin-flow-scene .fin-show-head p { font-size: 17px; }
.qm-financials .fin-flow-art,
.qm-financials .fin-segment-art {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
}
.qm-financials .fin-flow-art svg,
.qm-financials .fin-segment-art svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: Lato, "Segoe UI", system-ui, sans-serif;
}

.qm-financials .fin-flow-svg {
    opacity: .25;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.25s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
}
.qm-financials.is-entered .fin-flow-svg {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}
.qm-financials .fin-flow-band,
.qm-financials .fin-seg-ribbon {
    opacity: .78;
    transition: opacity .18s ease, filter .18s ease;
}
.qm-financials .fin-flow-band.is-hovered,
.qm-financials .fin-seg-ribbon.is-hovered {
    opacity: 1;
    filter: brightness(1.18);
}
.qm-financials .fin-seg-item {
    opacity: 0;
    transform: translateX(-18px);
    transition: opacity .62s cubic-bezier(.16, 1, .3, 1), transform .82s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--i, 0) * 105ms + 80ms);
}
.qm-financials .fin-segment-art .fin-segment-svg {
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}
.qm-financials .fin-seg-ribbon { opacity: 1; }
.qm-financials.is-entered .fin-seg-item {
    opacity: 1;
    transform: translateX(0);
}
.qm-financials .fin-seg-total {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .55s ease .68s, transform .8s cubic-bezier(.16, 1, .3, 1) .68s;
}
.qm-financials.is-entered .fin-seg-total {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .qm-financials .fin-flow-svg,
    .qm-financials .fin-seg-item,
    .qm-financials .fin-seg-total { transition: none; }
}