/* ── Accent: Purple AI theme ──
   Aliases onto the shared violet family in ta.css rather than repeating the
   literal, so the accent flips with the theme. --ai is the *text* role: plain
   #8B5CF6 measures 4.23:1 on white and 3.45:1 on --bg2, and 3.73:1 on its own
   tint, so it cannot be the ink. */
:root { --ai: var(--violet-ink); --ai-lt: var(--violet-lt); --ai-dot: var(--violet); }

/* ── Page Header ── */
/* Flex direction + alignment now come from d-flex / flex-md-row utilities */
.ai-page-hdr { padding: var(--ta-hdr-pad) 0; border-bottom: 1px solid var(--bd); margin-bottom: var(--ta-sec-gap); }
.ai-breadcrumb { font-size: 11px; color: var(--tx3); margin-bottom: 5px; }
/* Underlined at rest: violet against the crumb's own --tx3 is 1.23:1, so colour
   alone cannot mark the link inside the sentence (SC 1.4.1). */
.ai-breadcrumb a { color: var(--ai); text-decoration: underline; text-underline-offset: 2px; }
.ai-title { font-size: 26px; font-weight: 900; color: var(--tx); letter-spacing: -.5px; }
.ai-title span { color: var(--ai); }
.ai-powered-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; background: var(--ai-lt); color: var(--ai); padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(139,92,246,.25); }
.ai-powered-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-dot); animation: ai-pulse 2s ease-in-out infinite; }
@keyframes ai-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* ── Top Dashboard Row ── */
.ai-dashboard { margin-bottom: var(--ta-sec-gap); }

/* ── F&G Card ── */
.ai-fg-card { overflow: hidden; }
.ai-fg-hdr { --bs-card-cap-padding-x: 16px; --bs-card-cap-padding-y: 12px; }
.ai-fg-ttl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--tx); display: flex; align-items: center; gap: 6px; }
.fg-body { padding: 16px 14px 12px; }
.fg-gauge-area { position: relative; display: flex; justify-content: center; }
.fg-val-box { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.fg-num { font-size: 30px; font-weight: 900; color: var(--tx); letter-spacing: -1px; line-height: 1; }
.fg-word { font-size: 11px; font-weight: 700; margin-top: 1px; }
.fg-scale { display: flex; justify-content: space-between; margin-top: 5px; padding: 0 2px; }
.fg-scale span { font-size: 9px; color: var(--tx3); text-align: center; line-height: 1.3; }
.fg-history { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bd); }
.fg-hist-item { text-align: center; flex: 1; }
.fg-hist-lbl { font-size: 9px; color: var(--tx3); }
.fg-hist-val { font-size: 14px; font-weight: 800; color: var(--tx); }
.fg-hist-cat { font-size: 9px; color: var(--tx2); }

/* ── AI Trend Watch panel — cells are .col in a .row .g-0 ── */
.ai-trend-panel { overflow: hidden; }
.ai-trend-hdr { --bs-card-cap-padding-x: 18px; --bs-card-cap-padding-y: 14px; background: linear-gradient(135deg, var(--ai-lt), transparent); }
.ai-trend-ttl { font-size: 13px; font-weight: 800; color: var(--tx); display: flex; align-items: center; gap: 8px; }
.ai-trend-item { padding: 16px 18px; border-bottom: 1px solid var(--bd); }
.ai-trend-item:last-child { border-bottom: none; }
.ai-trend-item:hover { background: var(--bg2); }
/* Vertical divider only exists once the cells sit side by side (Bootstrap md) */
@media (min-width: 768px) {
    .ai-trend-item:nth-child(2n+1) { border-right: 1px solid var(--bd); }
    .ai-trend-item:nth-last-child(-n+2) { border-bottom: none; }
}
.trend-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.trend-sym { font-size: 15px; font-weight: 900; color: var(--tx); }
.trend-signal { font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: .4px; }
.trend-signal.buy { background: var(--green-lt); color: var(--green-ink); }
.trend-signal.sell { background: var(--red-lt); color: var(--red-ink); }
.trend-signal.watch { background: var(--ai-lt); color: var(--ai); }
.trend-signal.hold { background: var(--bg3); color: var(--tx3); }
.trend-price { font-size: 13px; font-weight: 700; color: var(--tx); }
.trend-chg { font-size: 11px; font-weight: 600; }
.trend-chg.up { color: var(--green-ink); }
.trend-chg.dn { color: var(--red-ink); }
.trend-desc { font-size: 11.5px; color: var(--tx2); line-height: 1.45; margin-top: 6px; }
.trend-conf { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.trend-conf-label { font-size: 9px; color: var(--tx3); }
.trend-conf-bar { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.trend-conf-fill { height: 100%; border-radius: 2px; background: var(--ai); }
.trend-conf-val { font-size: 9px; font-weight: 700; color: var(--ai); }

/* ── Main Intelligence Feed — gutters come from the shared .row default ── */

/* ── Timeline Feed ── */
.timeline-card { overflow: hidden; }
.timeline-hdr { --bs-card-cap-padding-x: 18px; --bs-card-cap-padding-y: 14px; }
.timeline-ttl { font-size: 13px; font-weight: 800; color: var(--tx); display: flex; align-items: center; gap: 8px; }
.tl-live-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; background: var(--red-lt); color: var(--red-ink); padding: 2px 8px; border-radius: 4px; }
.tl-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: ai-pulse 1s ease-in-out infinite; }
/* Rows come from .list-group */
.timeline-body { --bs-list-group-item-padding-x: 18px; --bs-list-group-item-padding-y: 14px; }
.tl-item { gap: 14px; }
.tl-left { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; width: 44px; }
.tl-time { font-size: 9px; color: var(--tx3); text-align: center; line-height: 1.2; }
.tl-dot-wrap { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.tl-dot-wrap.up { background: var(--green-lt); color: var(--green-ink); }
.tl-dot-wrap.dn { background: var(--red-lt); color: var(--red-ink); }
.tl-dot-wrap.ai { background: var(--ai-lt); color: var(--ai); }
.tl-dot-wrap.warn { background: var(--amber-lt); color: var(--amber-ink); }
.tl-dot-wrap.info { background: var(--bg3); color: var(--tx3); }
.tl-right { flex: 1; min-width: 0; }
.tl-sym-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tl-sym { font-size: 13px; font-weight: 800; color: var(--tx); }
.tl-badge { font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 3px; }
.tl-badge.up { background: var(--green-lt); color: var(--green-ink); }
.tl-badge.dn { background: var(--red-lt); color: var(--red-ink); }
.tl-badge.ai { background: var(--ai-lt); color: var(--ai); }
.tl-badge.warn { background: var(--amber-lt); color: var(--amber-ink); }
.tl-why { font-size: 12.5px; color: var(--tx2); line-height: 1.5; }
.tl-why b { color: var(--tx); font-weight: 700; }
.tl-meta { font-size: 10px; color: var(--tx3); margin-top: 5px; }

/* ── Sidebar ── */
.w-card { overflow: hidden; }
.w-hdr { --bs-card-cap-padding-x: 16px; --bs-card-cap-padding-y: 12px; }
.w-ttl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--tx); }
.w-sub { font-size: 10px; color: var(--tx3); white-space: nowrap; }

/* ── Quick Stats ── */
.qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.qs-item { padding: 14px 16px; border-bottom: 1px solid var(--bd); border-right: 1px solid var(--bd); }
.qs-item:nth-child(2n) { border-right: none; }
.qs-item:nth-last-child(-n+2) { border-bottom: none; }
.qs-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tx3); margin-bottom: 4px; }
.qs-value { font-size: 18px; font-weight: 900; color: var(--tx); letter-spacing: -.5px; }
.qs-sub { font-size: 10px; color: var(--tx3); margin-top: 2px; }
.qs-chg { font-size: 10px; font-weight: 700; }
.qs-chg.up { color: var(--green-ink); }
.qs-chg.dn { color: var(--red-ink); }

/* ── Sector Rotation ── */
.sr-body { padding: 8px 0; }
.sr-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--bd); }
.sr-item:last-child { border-bottom: none; }
.sr-rank { width: 16px; font-size: 10px; font-weight: 800; color: var(--tx3); text-align: center; flex-shrink: 0; }
.sr-name { flex: 1; font-size: 12px; color: var(--tx2); }
.sr-chg { font-size: 11px; font-weight: 700; }
.sr-chg.up { color: var(--green-ink); }
.sr-chg.dn { color: var(--red-ink); }
.sr-arrow { font-size: 12px; }
.sr-arrow.up { color: var(--green-ink); }
.sr-arrow.dn { color: var(--red-ink); }

/* Responsive behaviour is handled by the Bootstrap grid + flex utilities */