/*
 * Stock page v2 redesign — every new class name here is prefixed
 * .fd-sk- (Stock Kit), a name nothing else in the app uses, so there
 * is nothing for it to collide with — same collision-avoidance
 * discipline as the landing/top-picks redesigns (see css/blocks/
 * landing.css and css/blocks/top_picks.css's own docblocks for why
 * that discipline exists), applied here via a unique prefix instead
 * of a wrapper-class nest since pages/stock.php's own existing
 * classes (.stock-hero, .stock-sym, …) are untouched and interleaved
 * with these new ones throughout the same markup.
 */

/* -- sticky mini-header — the one legitimate repeat of the score --------- */
/* Real bug fix: this app's own real site-wide top bar (.fd-globalbar)
   is ALSO `position: sticky; top: 0`, with a HIGHER z-index than
   anything this page defines — a naive `top: 0` here sat this mini-
   header (and the tab strip below it) directly UNDERNEATH that real
   top bar, completely hidden behind it, rather than stacked below it.
   --fd-sk-topbar-h is set at runtime (see the inline script right
   after this element in stock.php) to that top bar's own real
   rendered height, so this stays correct even if that height ever
   changes per breakpoint; 65px is only the fallback for the one
   instant before that script runs. */
.fd-sk-mini {
  position: sticky; top: var(--fd-sk-topbar-h, 65px); z-index: 30;
  background: var(--fd-surface, var(--fd-bg)); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.fd-sk-mini[data-stuck="true"] { border-bottom-color: var(--fd-border); }
.fd-sk-mini-in { display: flex; align-items: center; gap: 12px; height: 50px; max-width: 1020px; margin: 0 auto; padding: 0 16px; }
.fd-sk-mini-tk { font-weight: 650; }

/* -- tab strip: sticky just under the mini-header --------------------- */
.fd-sk-tabbar {
  position: sticky; top: calc(var(--fd-sk-topbar-h, 65px) + 50px); z-index: 25;
  background: var(--fd-surface, var(--fd-bg));
}

/* -- header pills row ------------------------------------------------------ */
.fd-sk-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* -- verdict card ------------------------------------------------------- */
.fd-sk-verdict { padding: 18px; margin-top: 16px; }
.fd-sk-verdict-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: flex-start; }
.fd-sk-dial { text-align: center; min-width: 100px; }
.fd-sk-read b { font-size: 15px; }
.fd-sk-read p { margin: 6px 0 0; color: var(--fd-text-dim); font-size: 13.5px; max-width: 68ch; }
.fd-sk-meters { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.fd-sk-meter { min-width: 90px; }
.fd-sk-meter-k { font-size: 11px; color: var(--fd-text-dim); }
.fd-sk-meter-v { font-family: var(--mono, ui-monospace, monospace); font-size: 17px; font-weight: 640; margin-top: 1px; }
.fd-sk-meter-p { font-size: 11px; color: var(--fd-text-dim); margin-top: 3px; }
@media (max-width: 640px) {
  .fd-sk-verdict-grid { grid-template-columns: 1fr; }
}

/* -- context strip -------------------------------------------------------- */
/* auto-fit rather than a fixed 4-column grid: a cell with no real
   reading is omitted entirely rather than shown as a bare "—" (see
   pages/stock.php's own Context strip comment), so the real cell
   count varies from 1 to 4 and the layout must adapt rather than
   leave empty grid tracks. */
.fd-sk-ctx {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  background: var(--fd-border); border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius); overflow: hidden; margin-top: 16px;
}
.fd-sk-ctx > div { background: var(--fd-surface, var(--fd-bg-subtle)); padding: 13px 15px; }
.fd-sk-ctx-k { font-size: 11px; color: var(--fd-text-dim); }
.fd-sk-ctx-v { font-size: 15px; font-weight: 600; margin-top: 2px; }
.fd-sk-ctx-v.bull { color: var(--fd-bull); }
.fd-sk-ctx-v.bear { color: var(--fd-bear); }
.fd-sk-ctx-m { font-size: 11.5px; color: var(--fd-text-dim); margin-top: 2px; }

/* -- data-hygiene: folded flat runs & unconfirmed future-dated rows ------- */
.fd-sk-fold { opacity: 0.72; font-style: italic; }
.fd-sk-unconfirmed { opacity: 0.72; }
.fd-sk-unconfirmed td:first-child { font-style: italic; }

/* -- headlines ------------------------------------------------------------ */
.fd-sk-news { padding: 12px 0; border-top: 1px solid var(--fd-border-soft, var(--fd-border)); display: flex; gap: 12px; align-items: flex-start; }
.fd-sk-news:first-child { border-top: none; padding-top: 0; }
.fd-sk-news-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: 0 0 7px; background: var(--fd-text-dim); }
.fd-sk-news-dot.bull { background: var(--fd-bull); }
.fd-sk-news-dot.bear { background: var(--fd-bear); }

/* -- research flag ---------------------------------------------------------- */
.fd-sk-research { border-left: 2px solid var(--fd-accent); padding: 14px 16px; margin-top: 16px; }
.fd-sk-research-flag { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fd-accent); }
.fd-sk-research-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; align-items: baseline; }

/* -- sticky bottom action bar ------------------------------------------------ */
.fd-sk-actionbar {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--fd-surface, var(--fd-bg)); backdrop-filter: blur(10px);
  border-top: 1px solid var(--fd-border);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  margin-top: 26px;
}
.fd-sk-actionbar-in { display: flex; gap: 8px; align-items: center; }
.fd-sk-actionbar-txt { font-size: 12.5px; color: var(--fd-text-dim); margin-right: auto; }
@media (max-width: 640px) {
  .fd-sk-actionbar-txt { display: none; }
  .fd-sk-actionbar .fd-btn { flex: 1; text-align: center; }
}