/*
 * FlowDesk Financial Corporate — information design layer
 * =========================================================
 * This is the final, financial-specific layer. It does not invent values or
 * hide missing data; it gives the existing evidence a stable reading order:
 * quote -> verdict -> evidence -> detail -> provenance.
 */

body.fd-page {
  --fd-corp-ink: var(--fd-fin-text, var(--fd-text));
  --fd-corp-muted: var(--fd-fin-muted, var(--fd-text-soft));
  --fd-corp-blue: var(--fd-fin-blue, var(--fd-accent));
  --fd-corp-line: var(--fd-fin-line, var(--fd-border));
  --fd-corp-line-strong: var(--fd-fin-line-strong, var(--fd-border-strong));
  --fd-corp-surface: var(--fd-fin-surface, var(--fd-surface));
  --fd-corp-surface-2: var(--fd-fin-surface-2, var(--fd-bg-subtle));
  --fd-corp-mono: var(--fd-font-mono);
  background:
    radial-gradient(ellipse at 78% -18%, rgba(91,141,239,.12), transparent 33rem),
    var(--fd-fin-bg, var(--fd-bg));
}
body.fd-page .fd-shell-v2::before { opacity: .10; }

/* Global finance typography and data conventions. */
body.fd-page .fd-metric-value,
body.fd-page .fd-stat-v,
body.fd-page .stock-price,
body.fd-page .fd-sk-meter-v,
body.fd-page .scor-num,
body.fd-page .fd-brk-val,
body.fd-page .fd-brk-pp,
body.fd-page [data-numeric="true"] {
  font-family: var(--fd-corp-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
body.fd-page .fd-eyebrow,
body.fd-page .fd-metric-label,
body.fd-page .fd-stat-k,
body.fd-page .fd-sk-meter-k,
body.fd-page .scor-lbl,
body.fd-page .fd-brk-lbl {
  font-family: var(--fd-corp-mono);
  letter-spacing: .105em;
  text-transform: uppercase;
}

/* Stock detail: one high-signal quote plate, not a loose pile of cards. */
body.fd-page .stock-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin: 0 0 16px;
  padding: clamp(20px, 3vw, 34px) !important;
  border: 1px solid color-mix(in srgb, var(--fd-corp-blue) 35%, var(--fd-corp-line)) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(91,141,239,.18), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--fd-corp-surface) 92%, var(--fd-corp-blue) 8%), var(--fd-corp-surface));
  box-shadow: 0 24px 60px -38px rgba(2,8,23,.9), 0 1px 0 rgba(255,255,255,.04) inset;
}
body.fd-page .stock-sym-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
body.fd-page .stock-sym { margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: -.075em; }
body.fd-page .stock-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
body.fd-page .stock-price { font-size: clamp(1.65rem, 3vw, 2.55rem); font-weight: 750; letter-spacing: -.065em; }
body.fd-page .stock-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 11px;
  margin: 12px 0 0 !important;
  color: var(--fd-corp-muted) !important;
  font: 650 .68rem/1.45 var(--fd-corp-mono);
  letter-spacing: .025em;
}
body.fd-page .stock-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
body.fd-page .stock-hero-actions .fd-btn { min-width: 104px; }

/* The verdict is the decision surface: signal, trust, and working in one view. */
body.fd-page .fd-sk-verdict {
  border: 1px solid color-mix(in srgb, var(--fd-corp-blue) 36%, var(--fd-corp-line)) !important;
  background: linear-gradient(130deg, color-mix(in srgb, var(--fd-corp-surface) 90%, var(--fd-corp-blue) 10%), var(--fd-corp-surface));
  box-shadow: 0 24px 54px -38px rgba(2,8,23,.85), 0 1px 0 rgba(255,255,255,.045) inset;
}
body.fd-page .fd-sk-verdict-grid { display: grid; grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: center; }
body.fd-page .fd-sk-dial { display: grid; justify-items: center; align-content: center; min-height: 190px; padding: 8px 0; }
body.fd-page .fd-sk-read { min-width: 0; }
body.fd-page .fd-sk-read > b { display: block; margin-bottom: 8px; font-size: 1.04rem; letter-spacing: -.02em; }
body.fd-page .fd-sk-read > p { max-width: 70ch; margin-bottom: 18px; color: var(--fd-corp-muted); }
body.fd-page .fd-sk-meters { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 9px; }
body.fd-page .fd-sk-meter {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--fd-corp-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--fd-corp-surface-2) 78%, transparent);
}
body.fd-page .fd-sk-meter-k { color: var(--fd-corp-muted); font-size: .62rem; font-weight: 750; }
body.fd-page .fd-sk-meter-v { margin: 5px 0 8px; font-size: 1.2rem; font-weight: 750; }
body.fd-page .fd-sk-meter-p { min-height: 1.3em; margin-top: 7px; color: var(--fd-corp-muted); font-size: .66rem; line-height: 1.3; }

/* Keep navigation and evidence aligned while a user moves between tabs. */
body.fd-page .fd-sk-tabbar { position: sticky; top: 74px; z-index: 20; margin: 0 0 16px; padding: 5px; border: 1px solid var(--fd-corp-line); border-radius: 12px; background: color-mix(in srgb, var(--fd-corp-surface) 90%, transparent); box-shadow: 0 12px 28px -20px rgba(2,8,23,.8); backdrop-filter: blur(16px); }
body.fd-page .fd-sk-tabbar .fd-tabs { margin: 0; border: 0; background: transparent; }
body.fd-page .fd-sk-tabbar .fd-tab { flex: 1; min-width: 92px; }
body.fd-page .fd-sk > [data-pane="overview"] > .fd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Evidence cards answer "why should I care?" before the raw detail starts. */
body.fd-page .fd-sk > [data-pane="overview"] > .fd-grid .fd-metric {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border-top: 2px solid var(--fd-corp-blue) !important;
}
body.fd-page .fd-sk > [data-pane="overview"] > .fd-grid .fd-metric--bull { border-top-color: var(--fd-bull) !important; }
body.fd-page .fd-sk > [data-pane="overview"] > .fd-grid .fd-metric--bear { border-top-color: var(--fd-bear) !important; }
body.fd-page .fd-metric-hint { max-width: 34ch; font-size: .74rem; line-height: 1.4; }

/* Score working: the bar is secondary; label, value and change read first. */
body.fd-page table.fd-breakdown { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
body.fd-page .fd-breakdown tr:not(.fd-brk-why) { background: var(--fd-corp-surface-2); }
body.fd-page .fd-breakdown td { padding: 11px 12px; border-top: 1px solid var(--fd-corp-line); border-bottom: 1px solid var(--fd-corp-line); }
body.fd-page .fd-breakdown td:first-child { border-left: 1px solid var(--fd-corp-line); border-radius: 9px 0 0 9px; }
body.fd-page .fd-breakdown td:last-child { border-right: 1px solid var(--fd-corp-line); border-radius: 0 9px 9px 0; }
body.fd-page .fd-breakdown .fd-brk-lbl { width: 28%; color: var(--fd-corp-muted); font-size: .68rem; font-weight: 750; }
body.fd-page .fd-breakdown .fd-brk-val { width: 18%; text-align: right; font-size: .84rem; font-weight: 700; }
body.fd-page .fd-breakdown .fd-brk-pp { width: 15%; text-align: right; font-size: .75rem; font-weight: 750; }
body.fd-page .fd-breakdown .fd-track { height: 6px; background: color-mix(in srgb, var(--fd-corp-line) 72%, transparent); border-radius: 99px; overflow: hidden; }
body.fd-page .fd-breakdown .fd-track i { display: block; height: 100%; border-radius: inherit; }
body.fd-page .fd-breakdown .fd-brk-why { display: none; }
body.fd-page .fd-breakdown tr.is-open + .fd-brk-why { display: table-row; }
body.fd-page .fd-breakdown .fd-brk-why td { padding: 8px 14px 12px; border: 0; color: var(--fd-corp-muted); font-size: .78rem; line-height: 1.5; }
body.fd-page .fd-brk-caret { display: inline-block; margin-right: 5px; transition: transform .16s ease; }
body.fd-page .fd-breakdown tr.is-open .fd-brk-caret { transform: rotate(90deg); }

/* Reusable mini-cards: information density without visual noise. */
body.fd-page .scor-grid { align-items: stretch; }
body.fd-page .scor-card {
  min-width: 0;
  padding: 14px !important;
  border: 1px solid var(--fd-corp-line);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--fd-corp-surface-2), color-mix(in srgb, var(--fd-corp-surface) 82%, var(--fd-corp-blue) 18%));
}
body.fd-page .scor-num { font-size: 1.1rem; font-weight: 750; }
body.fd-page .scor-lbl { margin-top: 6px; color: var(--fd-corp-muted); font-size: .6rem; line-height: 1.3; }
body.fd-page .stock-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
body.fd-page .history-chart { background: linear-gradient(180deg, var(--fd-corp-surface-2), var(--fd-corp-surface)) !important; }

/* Top picks: separate discovery, performance, and evidence in the scan. */
body.fd-page .fd-tp-verdict {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--fd-corp-line-strong);
  border-left: 3px solid var(--fd-corp-blue);
  border-radius: 10px;
  background: linear-gradient(90deg, var(--fd-corp-surface-2), transparent);
}
body.fd-page .fd-tp-verdict-headline { font-size: 1rem; letter-spacing: -.015em; }
body.fd-page .fd-tp .fd-tabs { position: sticky; top: 74px; z-index: 19; padding: 5px; background: color-mix(in srgb, var(--fd-corp-surface) 92%, transparent); backdrop-filter: blur(16px); }
body.fd-page .fd-tp .fd-tab { min-width: 120px; }
body.fd-page .fd-tp [data-pane] { scroll-margin-top: 132px; }

/* Responsive rules match the shell breakpoint exactly. */
@media (max-width: 880px) {
  body.fd-page .stock-hero { grid-template-columns: 1fr; align-items: start; }
  body.fd-page .stock-hero-actions { justify-content: flex-start; }
  body.fd-page .fd-sk-verdict-grid { grid-template-columns: 1fr; gap: 12px; }
  body.fd-page .fd-sk-dial { min-height: 0; }
  body.fd-page .fd-sk-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.fd-page .fd-sk-tabbar,
  body.fd-page .fd-tp .fd-tabs { top: 58px; }
}
@media (max-width: 640px) {
  body.fd-page .fd-sk > [data-pane="overview"] > .fd-grid,
  body.fd-page .stock-grid-2 { grid-template-columns: 1fr; }
  body.fd-page .fd-sk-meters { grid-template-columns: 1fr 1fr; }
  body.fd-page .fd-breakdown .fd-brk-lbl { width: 40%; }
  body.fd-page .fd-breakdown .fd-track { min-width: 48px; }
  body.fd-page .fd-tp .fd-tab { min-width: 0; flex: 1; padding-inline: 7px; }
}
@media (max-width: 430px) {
  body.fd-page .fd-sk-meters { grid-template-columns: 1fr; }
  body.fd-page .stock-hero-actions .fd-btn { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.fd-page .fd-brk-caret { transition: none; }
}