/**
 * Stock Intel — a decision cockpit for one listed company.
 *
 * The visual argument follows the product's: a conclusion first, evidence
 * underneath, and a clear line between what VestMind concludes and what
 * somebody else concluded. Three devices carry that:
 *
 *   the violet rule marks VestMind's own reading,
 *   the gold rule marks third-party research, and
 *   a dotted rule marks anything the page could not measure.
 *
 * The palette, the paper and the display face are the landing page's, so an
 * investor arriving from the second journey card lands somewhere that is
 * recognisably the same product.
 */

.stock-intel {
  --si-paper: #faf8f5;
  --si-ink: #080b1a;
  --si-muted: #5c5a6b;
  --si-dim: #85838f;
  --si-line: #e6e1da;
  --si-line-soft: #f0ece6;
  --si-card: #fff;
  --si-violet: #342cff;
  --si-violet-soft: #f1efff;
  --si-gold: #b9832b;
  --si-gold-soft: #fdf5e8;
  --si-green: #0a7a3d;
  --si-green-soft: #eef8f1;
  --si-amber: #a95700;
  --si-amber-soft: #fdf3e8;
  --si-red: #c1201c;
  --si-red-soft: #fdefee;
  --si-shadow: 0 6px 26px rgba(52, 36, 12, .045);
  /* The public primary menu is sticky at the top of the viewport. Everything on
     this page that sticks or is scrolled to has to clear it, so its height
     lives here once rather than as a magic number in three places. */
  --si-menu-height: 88px;

  background: var(--si-paper);
  color: var(--si-ink);
  min-height: 100vh;
}

.stock-intel main { margin: 0 auto; max-width: 1220px; padding: 0 clamp(16px, 4vw, 44px) 90px; }

/* ── search ─────────────────────────────────────────────────────────────── */

/* The opening is the shared product banner (styles/product-banner.css), the
   landing page's frame restated for VestCall. The search takes the place of
   the landing's chat box, so it wears the same glass. */
.si-hero-copy { text-align: left; }

.si-search { margin: 26px 0 0; max-width: none; position: relative; text-align: left; width: 100%; }
.si-search-box {
  align-items: center; background: rgba(255, 255, 255, .82); border: 1px solid #ddd6ce; border-radius: 14px;
  display: flex; gap: 10px; min-height: 64px; padding: 6px 6px 6px 18px; transition: border-color .2s, box-shadow .2s;
}
.si-search-box:focus-within { background: #fff; border-color: #9d8ae5; box-shadow: 0 0 0 3px rgba(99, 56, 238, .09); }
.si-search-box svg { color: var(--si-dim); flex: 0 0 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; width: 18px; }
.si-search-box input {
  background: transparent; border: 0; color: var(--si-ink); flex: 1; font: 15px var(--font-body);
  min-width: 0; outline: 0; padding: 14px 0;
}
.si-search-box input::placeholder { color: #666681; }
.si-search-box button {
  background: #0758ee; border: 0; border-radius: 10px; box-shadow: 0 7px 16px rgba(7, 88, 238, .24); color: #fff;
  cursor: pointer; font-size: 13px; font-weight: 700; min-height: 48px; padding: 0 22px;
  transition: box-shadow .25s, transform .25s;
}
.si-search-box button:hover { box-shadow: 0 10px 26px rgba(7, 88, 238, .34); transform: translateY(-1px); }
.si-search-box button[disabled] { background: #b9b6c2; box-shadow: none; cursor: default; transform: none; }

/* The example companies, as the landing's suggested questions: glass chips. */
.si-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-top: 12px; }
.si-suggestions button {
  background: rgba(255, 255, 255, .82); border: 1px solid rgba(215, 222, 233, .9); border-radius: 9px; color: #344260;
  cursor: pointer; font-size: 12px; min-height: 36px; padding: 6px 14px;
}
.si-suggestions button:hover { background: #fff; border-color: #8c78df; color: #4f31dc; }
.si-search-hero .si-note { color: #344260; }

.si-results {
  background: var(--si-card); border: 1px solid var(--si-line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(30, 20, 8, .1); left: 0; margin-top: 6px; overflow: hidden;
  position: absolute; right: 0; top: 100%; z-index: 30;
}

.si-results button {
  background: none; border: 0; border-bottom: 1px solid var(--si-line-soft); cursor: pointer;
  display: grid; gap: 3px; padding: 12px 18px; text-align: left; width: 100%;
}
.si-results button:last-child { border-bottom: 0; }
.si-results button:hover, .si-results button:focus-visible { background: var(--si-violet-soft); outline: 0; }
.si-results strong { font-size: 13px; }
.si-results small { color: var(--si-dim); font-size: 11px; }
.si-results em { color: var(--si-violet); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .08em; }

/* What the page will hold, before a company has been chosen. Six cards rather
   than a wall of copy: an investor who has not searched yet is deciding whether
   this is worth their attention, not reading a manifesto. */
.si-preview {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin: 34px 0 40px; text-align: left;
}
.si-preview article {
  background: var(--si-card); border: 1px solid var(--si-line); border-radius: 14px;
  box-shadow: var(--si-shadow); padding: 18px 20px;
}
.si-preview b { display: block; font-size: 13px; margin-bottom: 5px; }
.si-preview span { color: var(--si-muted); font-size: 11.5px; line-height: 1.6; }

/* ── states ─────────────────────────────────────────────────────────────── */

.si-state {
  background: var(--si-card); border: 1px solid var(--si-line); border-radius: 16px;
  margin: 30px 0; padding: 52px 26px; text-align: center;
}
.si-state h2 { font: 400 26px var(--font-display); margin: 0 0 8px; }
.si-state p { color: var(--si-muted); font-size: 13px; line-height: 1.6; margin: 0 auto; max-width: 60ch; }
.si-state code { background: var(--si-line-soft); border-radius: 5px; font-size: 11px; padding: 2px 6px; }

/* ── sticky identity header ─────────────────────────────────────────────── */

/* Opaque, not translucent: the score strip scrolling underneath a 93%-alpha
   header read as a rendering fault rather than as depth. */
.si-header {
  background: var(--si-paper); border-bottom: 1px solid var(--si-line);
  margin: 0 calc(clamp(16px, 4vw, 44px) * -1); padding: 12px clamp(16px, 4vw, 44px);
  position: sticky; top: var(--si-menu-height); z-index: 20;
}
/* Loading an analysis scrolls to it; without this the company header would come
   to rest underneath the primary menu rather than just below it. */
#si-analysis { scroll-margin-top: var(--si-menu-height); }
.si-header-main { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.si-header-id { flex: 1 1 260px; min-width: 0; }
.si-header-id h2 { font: 400 clamp(19px, 2.1vw, 25px) var(--font-display); margin: 0; }
.si-header-id p { color: var(--si-dim); font-size: 11px; margin: 3px 0 0; }
.si-header-id .si-tick { color: var(--si-muted); font-weight: 700; }
.si-price { text-align: right; }
.si-price strong { display: block; font: 400 clamp(20px, 2.3vw, 27px) var(--font-display); }
.si-price span { font-size: 12px; font-weight: 600; }
/*
 * A price the engine could not confirm is current.
 *
 * A mark beside the figure rather than a sentence under it: every band on the
 * page is drawn against this number, so the caveat has to be where the number
 * is — but spelling it out there gives a caution more visual weight than the
 * price it qualifies. The explanation opens on hover and on keyboard focus, so
 * it is never pointer-only.
 */
.si-price-info {
  background: var(--si-amber-soft);
  border: 1px solid color-mix(in srgb, var(--si-amber) 35%, transparent);
  border-radius: 50%;
  color: var(--si-amber);
  cursor: help;
  display: inline-grid;
  font: 700 10px/1 var(--font-body, inherit);
  height: 15px;
  margin-left: 7px;
  padding: 0;
  place-items: center;
  position: relative;
  vertical-align: 0.35em;
  width: 15px;
}

.si-price-info::after {
  background: var(--si-ink);
  border-radius: 7px;
  color: #fff;
  content: attr(data-tip);
  font: 500 11.5px/1.45 var(--font-body, inherit);
  opacity: 0;
  padding: 9px 11px;
  pointer-events: none;
  position: absolute;
  right: -2px;
  text-align: left;
  top: calc(100% + 8px);
  transition: opacity .12s ease;
  visibility: hidden;
  width: max-content;
  max-width: 270px;
  z-index: 20;
}

.si-price-info:hover::after,
.si-price-info:focus-visible::after { opacity: 1; visibility: visible; }

.si-price-info:focus-visible { outline: 2px solid var(--si-amber); outline-offset: 2px; }

.si-header-facts { color: var(--si-muted); display: flex; flex-wrap: wrap; font-size: 11px; gap: 6px 22px; margin-top: 8px; }
.si-header-facts b { color: var(--si-ink); font-weight: 600; }
.si-stale { color: var(--si-amber); }

.si-position {
  align-items: center; background: var(--si-violet-soft); border: 1px dashed #c6bfff; border-radius: 10px;
  display: flex; flex-wrap: wrap; font-size: 11px; gap: 6px 24px; margin-top: 9px; padding: 9px 14px;
}
.si-position em { color: var(--si-violet); font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.si-position b { font-weight: 600; }

/* ── section furniture ──────────────────────────────────────────────────── */

.si-section { margin: 42px 0 0; }
.si-section > header { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 14px; }
.si-section > header h2 { font: 400 clamp(22px, 2.6vw, 30px) var(--font-display); margin: 0; }
.si-section > header p { color: var(--si-muted); font-size: 12px; margin: 0; }
.si-order { color: var(--si-dim); font-size: 10px; font-weight: 700; letter-spacing: .18em; }

.si-tag {
  border-radius: 999px; display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; padding: 4px 10px; text-transform: uppercase;
}
.si-tag.vestmind { background: var(--si-violet-soft); color: #2b23c9; }
.si-tag.street { background: var(--si-gold-soft); color: var(--si-gold); }
.si-tag.good { background: var(--si-green-soft); color: var(--si-green); }
.si-tag.warn { background: var(--si-amber-soft); color: var(--si-amber); }
.si-tag.bad { background: var(--si-red-soft); color: var(--si-red); }
.si-tag.flat { background: #f2f0f4; color: var(--si-muted); }

.si-card {
  background: var(--si-card); border: 1px solid var(--si-line); border-radius: 16px;
  box-shadow: var(--si-shadow); padding: 22px 24px;
}
.si-card > h3 { font: 400 19px var(--font-display); margin: 0 0 10px; }
.si-grid { display: grid; gap: 14px; }
.si-grid.two { align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.si-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.si-note { color: var(--si-dim); font-size: 11px; line-height: 1.55; margin: 12px 0 0; }
.si-note.dotted { border-top: 1px dotted var(--si-line); padding-top: 10px; }

/* What a missing value looks like. It has to look like an absence rather than
   like a small number, because the two mean opposite things on this page. */
.si-dim { color: var(--si-dim); font-style: italic; font-weight: 400; }

.si-empty {
  border: 1px dotted var(--si-line); border-radius: 12px; color: var(--si-dim);
  font-size: 12px; line-height: 1.6; padding: 18px 20px;
}
.si-empty strong { color: var(--si-muted); }

/* ── hero: the VestMind View ────────────────────────────────────────────── */

.si-hero { border-left: 3px solid var(--si-violet); }
.si-hero .si-headline { font: 400 clamp(21px, 2.5vw, 30px)/1.32 var(--font-display); margin: 12px 0 0; }
.si-matters { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); margin-top: 20px; }
.si-matters article { border-left: 2px solid var(--si-line); padding-left: 13px; }
.si-matters article.risk { border-left-color: var(--si-amber); }
.si-matters article.valuation { border-left-color: var(--si-violet); }
.si-matters article.change { border-left-color: var(--si-green); }
.si-matters article.street { border-left-color: var(--si-gold); }
.si-matters h4 { font-size: 12.5px; font-weight: 700; margin: 0 0 4px; }
.si-matters p { color: var(--si-muted); font-size: 11.5px; line-height: 1.55; margin: 0; }

.si-scores { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr)); margin-top: 22px; }
.si-score {
  background: #fdfcfb; border: 1px solid var(--si-line); border-radius: 12px; cursor: pointer;
  padding: 13px 12px 12px; text-align: left; width: 100%;
}
.si-score:hover { border-color: #c9c2ff; }
.si-score[aria-expanded='true'] { background: var(--si-violet-soft); border-color: #c9c2ff; }
.si-score small { color: var(--si-muted); display: block; font-size: 10px; line-height: 1.25; min-height: 24px; }
.si-score strong { display: block; font: 400 30px var(--font-display); margin: 6px 0 2px; }
.si-score em { font-size: 10px; font-style: normal; font-weight: 700; }
.si-score i { background: #ece9ef; border-radius: 99px; display: block; height: 4px; margin-top: 8px; overflow: hidden; }
.si-score i b { background: var(--si-violet); display: block; height: 100%; }
.si-score.inverted i b { background: var(--si-amber); }
.si-score.thin { opacity: .82; }

.si-overall { align-items: center; color: var(--si-muted); display: flex; flex-wrap: wrap; font-size: 11px; gap: 8px 14px; margin-top: 14px; }
.si-overall b { color: var(--si-ink); font-size: 13px; }

.si-signals { border-top: 1px solid var(--si-line); margin-top: 16px; padding-top: 14px; }
.si-signals h4 { font-size: 12px; margin: 0 0 4px; }
.si-signals > p { color: var(--si-muted); font-size: 11.5px; margin: 0 0 12px; }
.si-signal { border-bottom: 1px solid var(--si-line-soft); display: grid; gap: 2px 14px; grid-template-columns: 1fr auto 58px; padding: 9px 0; }
.si-signal:last-child { border-bottom: 0; }
.si-signal span { font-size: 12px; }
.si-signal b { font-size: 12px; font-weight: 700; text-align: right; }
.si-signal u { color: var(--si-dim); font-size: 10px; text-align: right; text-decoration: none; }
.si-signal p { color: var(--si-dim); font-size: 10.5px; grid-column: 1 / -1; line-height: 1.5; margin: 3px 0 0; }
.si-signal.unmeasured { opacity: .62; }
.si-signal.unmeasured b { font-weight: 400; }

/* ── price decision map ─────────────────────────────────────────────────── */

.si-map { border-left: 3px solid var(--si-violet); }
.si-zones { display: grid; gap: 3px; grid-template-columns: repeat(4, 1fr); margin: 26px 0 0; }
.si-zone { border-radius: 8px; padding: 14px 14px 16px; position: relative; }
.si-zone:nth-child(1) { background: linear-gradient(180deg, #e8f6ec, #f4fbf6); }
.si-zone:nth-child(2) { background: linear-gradient(180deg, #f0f7ea, #f8fcf4); }
.si-zone:nth-child(3) { background: linear-gradient(180deg, #fdf6e9, #fefbf4); }
.si-zone:nth-child(4) { background: linear-gradient(180deg, #fbeee9, #fdf7f4); }
.si-zone strong { display: block; font-size: 13px; }
.si-zone small { color: var(--si-muted); display: block; font-size: 10.5px; line-height: 1.4; margin: 4px 0 9px; min-height: 30px; }
.si-zone var { display: block; font-size: 11.5px; font-style: normal; font-weight: 700; }
.si-zone.current { box-shadow: inset 0 0 0 2px var(--si-ink); }
.si-marker {
  background: var(--si-ink); border-radius: 6px; color: #fff; font-size: 10px; font-weight: 700;
  left: 50%; padding: 5px 10px; position: absolute; top: -13px; transform: translateX(-50%); white-space: nowrap;
}
.si-marker::after { border: 5px solid transparent; border-top-color: var(--si-ink); content: ''; left: 50%; position: absolute; top: 100%; transform: translateX(-50%); }

.si-zone-detail { background: #fbfaf8; border: 1px solid var(--si-line); border-radius: 12px; margin-top: 16px; padding: 15px 18px; }
.si-zone-detail strong { font-size: 13px; }
.si-zone-detail p { color: var(--si-muted); font-size: 12px; line-height: 1.6; margin: 5px 0 0; }

.si-scenarios { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-top: 20px; }
.si-scenario { border: 1px solid var(--si-line); border-radius: 12px; padding: 16px 17px; }
.si-scenario.bear { border-top: 3px solid #c1201c; }
.si-scenario.base { border-top: 3px solid var(--si-violet); }
.si-scenario.bull { border-top: 3px solid var(--si-green); }
.si-scenario small { color: var(--si-muted); font-size: 11px; }
.si-scenario strong { display: block; font: 400 27px var(--font-display); margin: 6px 0 2px; }
.si-scenario em { font-size: 11px; font-style: normal; font-weight: 700; }
.si-scenario ul { color: var(--si-muted); font-size: 10.5px; line-height: 1.55; margin: 11px 0 0; padding-left: 15px; }
.si-scenario li { margin-bottom: 4px; }

.si-mos { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 18px; }
.si-mos div { border-left: 2px solid var(--si-line); padding-left: 13px; }
.si-mos small { color: var(--si-muted); display: block; font-size: 10.5px; }
.si-mos b { display: block; font-size: 16px; margin-top: 3px; }

/* ── disclosure and expanders ───────────────────────────────────────────── */

.si-expander { border-top: 1px solid var(--si-line); margin-top: 16px; padding-top: 12px; }
.si-expander > button {
  background: none; border: 0; color: var(--si-violet); cursor: pointer; font-size: 12px;
  font-weight: 700; padding: 0; text-align: left;
}
.si-expander > button::after { content: ' ▾'; }
.si-expander > button[aria-expanded='true']::after { content: ' ▴'; }
.si-expander-body { margin-top: 12px; }

.si-workings { display: grid; gap: 10px; margin: 0; }
.si-workings div { border-left: 2px solid var(--si-line); padding-left: 12px; }
.si-workings dt { font-size: 12px; font-weight: 700; }
.si-workings dd { color: var(--si-muted); font-size: 11px; line-height: 1.55; margin: 3px 0 0; }
.si-workings .clamped { border-left-color: var(--si-amber); }

/* ── tables ─────────────────────────────────────────────────────────────── */

.si-table-wrap { -webkit-overflow-scrolling: touch; margin-top: 12px; overflow-x: auto; }
table.si-table { border-collapse: collapse; font-size: 12px; min-width: 100%; width: 100%; }
.si-table th {
  border-bottom: 1px solid var(--si-line); color: var(--si-muted); font-size: 10.5px; font-weight: 600;
  padding: 8px 12px; text-align: left; white-space: nowrap;
}
.si-table td { border-bottom: 1px solid var(--si-line-soft); padding: 11px 12px; vertical-align: top; }
.si-table td small { color: var(--si-dim); display: block; font-size: 10.5px; margin-top: 3px; }
.si-table tr.subject { background: var(--si-violet-soft); }
.si-table tr.subject td:first-child { font-weight: 700; }
.si-table .num { text-align: right; white-space: nowrap; }
.si-table button.si-row-toggle { background: none; border: 0; color: var(--si-violet); cursor: pointer; font-size: 11px; font-weight: 700; padding: 0; }
.si-sortable { cursor: pointer; user-select: none; }
.si-sortable[aria-sort='ascending']::after { content: ' ↑'; }
.si-sortable[aria-sort='descending']::after { content: ' ↓'; }

/* ── street view ────────────────────────────────────────────────────────── */

.si-street { border-left: 3px solid var(--si-gold); }
.si-consensus { display: grid; gap: 14px; grid-template-columns: minmax(220px, 300px) 1fr; }
.si-distribution { display: grid; gap: 6px; }
.si-dist-row { align-items: center; display: grid; font-size: 11.5px; gap: 10px; grid-template-columns: 42px 1fr 62px; }
.si-dist-bar { background: #eeebe6; border-radius: 99px; height: 9px; overflow: hidden; }
.si-dist-bar b { display: block; height: 100%; }
.si-dist-row.buy .si-dist-bar b { background: var(--si-green); }
.si-dist-row.hold .si-dist-bar b { background: #b8a05f; }
.si-dist-row.sell .si-dist-bar b { background: var(--si-red); }
.si-dist-row u { color: var(--si-muted); text-align: right; text-decoration: none; }

.si-targets { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.si-targets div { border-left: 2px solid var(--si-line-soft); padding-left: 12px; }
.si-targets small { color: var(--si-muted); display: block; font-size: 10.5px; }
.si-targets b { display: block; font: 400 19px var(--font-display); margin-top: 3px; }

.si-range { margin-top: 16px; }
.si-range-track { background: linear-gradient(90deg, #f3ece0, #e4dbcb); border-radius: 99px; height: 10px; position: relative; }
.si-range-track i { background: var(--si-gold); border-radius: 99px; height: 100%; position: absolute; }
.si-range-track u { background: var(--si-ink); border-radius: 2px; height: 18px; position: absolute; top: -4px; width: 3px; }
.si-range-labels { color: var(--si-muted); display: flex; font-size: 10.5px; justify-content: space-between; margin-top: 7px; }

.si-versus { border-left: 3px solid transparent; border-image: linear-gradient(180deg, var(--si-violet), var(--si-gold)) 1; }

/* ── thesis ─────────────────────────────────────────────────────────────── */

/* Aligned to the top, not stretched: a one-item challenges column next to a
   seven-item supports column should be short, not a tall empty card. */
.si-thesis { align-items: start; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.si-thesis-col h3 { font: 400 18px var(--font-display); margin: 0 0 10px; }
.si-thesis-col ul { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.si-thesis-col li { border-radius: 10px; font-size: 12px; line-height: 1.55; padding: 12px 14px; }
.si-supports li { background: var(--si-green-soft); border-left: 2px solid var(--si-green); }
.si-challenges li { background: var(--si-amber-soft); border-left: 2px solid var(--si-amber); }
.si-thesis-col li b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.si-thesis-col li span { color: var(--si-muted); }

/* ── fundamentals cards ─────────────────────────────────────────────────── */

.si-trend { border: 1px solid var(--si-line); border-radius: 13px; padding: 16px 17px; }
.si-trend small { color: var(--si-muted); display: block; font-size: 10.5px; }
.si-trend h4 { font-size: 12.5px; margin: 0 0 2px; }
.si-trend strong { display: block; font: 400 26px var(--font-display); margin: 8px 0 4px; }
.si-trend p { color: var(--si-muted); font-size: 10.5px; line-height: 1.5; margin: 6px 0 0; }
.si-trend .si-spark { display: block; height: 34px; margin-top: 10px; width: 100%; }
.si-spark path { fill: none; stroke: var(--si-violet); stroke-width: 1.8; }
.si-trend.improving strong { color: var(--si-green); }
.si-trend.deteriorating strong { color: var(--si-amber); }
.si-trend.unmeasured { border-style: dotted; opacity: .72; }

/* ── risk radar ─────────────────────────────────────────────────────────── */

.si-risk { display: grid; gap: 10px; }
.si-finding { border: 1px solid var(--si-line); border-left-width: 3px; border-radius: 12px; padding: 15px 17px; }
.si-finding.severe, .si-finding.high { border-left-color: var(--si-red); }
.si-finding.moderate { border-left-color: var(--si-amber); }
.si-finding.low { border-left-color: var(--si-line); }
.si-finding header { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.si-finding h4 { font-size: 13px; margin: 0; }
.si-finding p { color: var(--si-muted); font-size: 11.5px; line-height: 1.6; margin: 0; }
.si-finding footer { color: var(--si-dim); display: flex; flex-wrap: wrap; font-size: 10.5px; gap: 6px 18px; margin-top: 8px; }

.si-watched { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.si-watched span { border: 1px solid var(--si-line); border-radius: 999px; color: var(--si-muted); font-size: 10.5px; padding: 5px 11px; }
.si-watched span.unwatched { border-style: dashed; color: var(--si-dim); }

/* ── events and catalysts ───────────────────────────────────────────────── */

.si-event { border-bottom: 1px solid var(--si-line-soft); display: grid; gap: 5px; padding: 14px 0; }
.si-event:last-child { border-bottom: 0; }
.si-event-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px; }
.si-event a { border-bottom: 1px solid transparent; font-size: 13px; font-weight: 600; }
.si-event a:hover { border-bottom-color: currentColor; }
.si-event p { color: var(--si-muted); font-size: 11px; line-height: 1.55; margin: 0; }
.si-event footer { color: var(--si-dim); font-size: 10.5px; }

.si-catalysts ul { display: grid; gap: 9px; list-style: none; margin: 10px 0 0; padding: 0; }
.si-catalysts li { border-left: 2px solid var(--si-line); font-size: 11.5px; line-height: 1.55; padding-left: 13px; }
.si-catalysts li b { display: block; font-size: 12.5px; }
.si-catalysts li span { color: var(--si-muted); }
.si-catalysts li em { color: var(--si-dim); display: block; font-size: 10.5px; font-style: normal; margin-top: 3px; }
.si-catalysts .positive li { border-left-color: var(--si-green); }
.si-catalysts .negative li { border-left-color: var(--si-amber); }
.si-catalysts .breaks li { border-left-color: var(--si-red); }

.si-checkpoint { background: #fbfaf8; border: 1px solid var(--si-line); border-radius: 12px; margin-top: 16px; padding: 16px 18px; }
.si-checkpoint h4 { font-size: 13px; margin: 0 0 6px; }
.si-checkpoint ul { color: var(--si-muted); font-size: 11.5px; line-height: 1.6; margin: 8px 0 0; padding-left: 17px; }

/* ── provenance and compliance ──────────────────────────────────────────── */

.si-provenance { margin-top: 42px; }
.si-compliance {
  background: #fbfaf8; border: 1px solid var(--si-line); border-radius: 14px;
  color: var(--si-muted); font-size: 11.5px; line-height: 1.65; margin-top: 18px; padding: 20px 22px;
}
.si-compliance h3 { color: var(--si-ink); font: 400 17px var(--font-display); margin: 0 0 8px; }
.si-compliance h4 { color: var(--si-ink); font-size: 11.5px; margin: 14px 0 3px; }
.si-compliance ul { margin: 6px 0 0; padding-left: 17px; }
.si-compliance a { color: var(--si-violet); text-decoration: underline; }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .si-scores { grid-template-columns: repeat(4, 1fr); }
  .si-consensus { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .stock-intel { --si-menu-height: 72px; }
  .si-scores { grid-template-columns: repeat(2, 1fr); }
  .si-zones { grid-template-columns: 1fr; }
  .si-marker { left: auto; right: 12px; transform: none; }
  .si-marker::after { display: none; }
  /* The header stays sticky on a phone, so it has to stay short: stacking the
     price under a stretched identity block cost half the screen. Name and price
     share a row, and the two least decision-relevant facts drop out. */
  .si-header { padding: 9px clamp(16px, 4vw, 44px); }
  .si-header-main { align-items: baseline; gap: 4px 12px; }
  .si-header-id { flex: 1 1 auto; }
  .si-header-id h2 { font-size: 17px; }
  .si-header-id p { font-size: 10px; }
  .si-price strong { font-size: 19px; }
  .si-price span { font-size: 10.5px; }
  .si-header-facts { font-size: 10px; gap: 3px 14px; margin-top: 6px; }
  .si-fact-extra { display: none; }
  .si-card { padding: 18px 16px; }
  .si-signal { grid-template-columns: 1fr auto; }
  .si-signal u { grid-column: 2; }
}

/* ── Analyst Pulse — the Analyst Consensus Engine's panel ─────────────────── */

.si-pulse { background: var(--si-card); border: 1px solid var(--si-line); border-radius: 14px; margin-top: 16px; padding: 20px 22px; }
.si-pulse-head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between; }
.si-pulse-head small { color: var(--si-muted); display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.si-pulse-head strong { display: block; font: 400 44px/1 var(--font-display); margin-top: 6px; }
.si-pulse-head strong em { color: var(--si-dim); font: 400 17px var(--font-display); font-style: normal; }
.si-pulse-head > div > span { color: var(--si-muted); display: block; font-size: 12.5px; margin-top: 6px; }
.si-pulse-trend { max-width: 340px; text-align: right; }
.si-pulse-trend b { display: block; font-size: 14px; }
.si-pulse-trend .si-tag { margin-top: 6px; }
/* The eyebrow above the score is a label and is set in caps; the confidence
   note beside it is a sentence and must not inherit that. */
.si-pulse-trend small { color: var(--si-muted); display: block; font-size: 11px; letter-spacing: 0; line-height: 1.5; margin-top: 6px; text-transform: none; }

.si-pulse-bar { background: #eeebe6; border-radius: 99px; display: flex; height: 10px; margin-top: 20px; overflow: hidden; }
.si-pulse-bar i { display: block; height: 100%; }
.si-pulse-bar i.buy { background: var(--si-green); }
.si-pulse-bar i.hold { background: #b8a05f; }
.si-pulse-bar i.sell { background: var(--si-red); }
.si-pulse-counts { color: var(--si-muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 6px 22px; margin-top: 10px; }
.si-pulse-counts b { color: var(--si-ink); }

/* The band the Street's targets span, with the median and the traded price
   marked on it. Two stocks can share a median and disagree completely, and the
   only way to show that is to draw the spread. */
.si-target-range { margin-top: 14px; }
.si-target-track { background: linear-gradient(90deg, #f3ece0, #e4dbcb); border-radius: 99px; height: 10px; position: relative; }
.si-target-track i { border-radius: 2px; height: 20px; position: absolute; top: -5px; width: 3px; }
.si-target-track i.si-target-median { background: var(--si-ink); }
.si-target-track i.si-target-price { background: var(--si-violet); }
.si-target-ends { color: var(--si-muted); display: flex; font-size: 11.5px; justify-content: space-between; margin-top: 9px; }
.si-target-ends small { display: block; font-size: 10px; }
.si-target-ends .mid { color: var(--si-ink); text-align: center; }

.si-details { border-top: 1px solid var(--si-line-soft); margin-top: 18px; padding-top: 12px; }
.si-details summary { color: var(--si-violet); cursor: pointer; font-size: 12.5px; }
.si-details[open] summary { margin-bottom: 12px; }
.si-details ul { color: var(--si-muted); font-size: 12px; line-height: 1.6; margin: 0; padding-left: 18px; }

@media (max-width: 640px) {
  .si-pulse-trend { max-width: none; text-align: left; }
  .si-pulse-head strong { font-size: 36px; }
}

/* ── 02: the VestMind View beside its decision range ─────────────────────── */

/* The judgement and the price at which it changes, side by side. The range
   carries two horizontal ladders and a four-column legend, so it takes the
   larger share; below the breakpoint it moves under the view rather than
   shrinking into a column too narrow to read a price ladder in. */
.si-view-grid { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.si-range { display: flex; flex-direction: column; }
.si-range-lede { color: var(--si-muted); font-size: 11.5px; line-height: 1.55; margin: 12px 0 0; }
.si-range h3 { margin-top: 20px; }

/* ── layered detail added across the other sections ──────────────────────── */

.si-score.unmeasured { opacity: .62; }
.si-score.unmeasured strong { color: var(--si-dim); }
.si-score > span { color: var(--si-muted); display: block; font-size: 9.5px; line-height: 1.35; margin-top: 6px; }

.si-drivers { border-top: 1px solid rgba(0, 0, 0, .07); list-style: none; margin: 10px 0 0; padding: 8px 0 0; }
.si-drivers li { display: flex; font-size: 10.5px; justify-content: space-between; padding: 2px 0; }
.si-drivers span { color: var(--si-muted); }
.si-drivers b { font-variant-numeric: tabular-nums; }

.si-steps { color: var(--si-muted); font-size: 12px; line-height: 1.65; margin: 8px 0 0; padding-left: 20px; }
.si-steps li { margin-bottom: 5px; }

/* A pillar with no measured input is neither a strength nor a weakness, and is
   coloured as neither. */
.si-unmeasured li { background: var(--si-line-soft); border-left: 2px solid var(--si-line); }
.si-thesis-col li em { color: var(--si-dim); display: block; font-size: 10px; font-style: normal; margin-top: 4px; }
.si-thesis-col p.si-note { margin-top: 0; }

@media (max-width: 1024px) {
  .si-view-grid { grid-template-columns: minmax(0, 1fr); }
}
.si-rail-axis { color: var(--si-dim); font-size: 10px; margin: 8px 0 0; text-align: right; }

/* A research house's own note is the one outbound link on this page, and it
   should look like one. */
.si-table a { color: var(--si-violet); text-decoration: underline; text-underline-offset: 2px; }

/* ── the zone ladder ─────────────────────────────────────────────────────── */

/* Lifted from VestStudio's entry-and-exit decision panel
   (`api/Master-Construct/public/assets/selection/stock-decision.css`, light
   theme) so the same four bands are the same picture in both places. An
   investor who has read their holding's ladder inside VestStudio should
   not have to learn a second chart here. Class names are kept identical so the
   two stay comparable when either changes. */
.zone-ladder { margin-top: 2px; }
.zone-track { border: 1px solid #d2dbe8; border-radius: 8px; display: flex; height: 42px; margin: 18px 3px 0; overflow: visible; position: relative; }
.zone-seg { color: #06183e; display: grid; font-size: 10px; font-weight: 800; letter-spacing: .05em; min-width: 0; overflow: hidden; place-items: center; position: relative; text-transform: uppercase; white-space: nowrap; }
.zone-seg:first-child { border-radius: 7px 0 0 7px; }
.zone-seg:last-of-type { border-radius: 0 7px 7px 0; }
.zone-seg.aggressive { background: linear-gradient(180deg, #8ee9bb, #2bbd72); }
.zone-seg.accumulate { background: linear-gradient(180deg, #92d9fb, #2aa8e5); }
.zone-seg.fair { background: linear-gradient(180deg, #ffe390, #f0b42c); }
.zone-seg.expensive { background: linear-gradient(180deg, #f8b6b9, #e55a62); }
.zone-seg.hold { background: linear-gradient(180deg, #a3edc7, #43c384); }
.zone-seg.trim { background: linear-gradient(180deg, #b4ddff, #5fa9ec); }
.zone-seg.reduce { background: linear-gradient(180deg, #ffe395, #f1b634); }
.zone-seg.exitreview { background: linear-gradient(180deg, #f7b8bc, #e55e65); }

/* A downward caret above the track, with the traded price captioned beneath it. */
.zone-marker { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #050a14; height: 0; position: absolute; top: -12px; transform: translateX(-50%); width: 0; z-index: 2; }
.zone-marker::after { color: #5f6d89; content: attr(data-label); font-size: 9px; font-weight: 600; left: 50%; position: absolute; top: 53px; transform: translateX(-50%); white-space: nowrap; }

/* Studio sets this to 18px, which puts the scale row within a few pixels of the
   marker's own caption whenever the traded price sits near an edge — as it does
   on every exit ladder for a stock nobody would trim yet. The extra clearance is
   the one deliberate departure from the Studio rule. */
.zone-scale { color: #67738d; display: flex; font-size: 10px; justify-content: space-between; margin-top: 32px; }
.zone-legend { display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 9px; }
.zone-legend div { border-left: 2px solid var(--si-line); color: #53617e; font-size: 10px; letter-spacing: .06em; min-height: 82px; padding: 7px 12px; text-transform: uppercase; }
.zone-legend b { color: #071847; display: block; font: 400 16px var(--font-display); letter-spacing: 0; margin-top: 2px; text-transform: none; }
.zone-legend small { color: #596783; display: block; font-size: 10px; letter-spacing: 0; margin-top: 2px; text-transform: none; }
.zone-legend .aggressive { border-left-color: #24e39a; color: #078643; }
.zone-legend .accumulate { border-left-color: #20d6f3; color: #075fd9; }
.zone-legend .fair { border-left-color: #fbbf24; color: #b46d00; }
.zone-legend .expensive { border-left-color: #f87171; color: #cf2535; }
.zone-legend .hold { border-left-color: #3aa583; color: #078343; }
.zone-legend .trim { border-left-color: #4d8fc4; color: #075fd9; }
.zone-legend .reduce { border-left-color: #fbbf24; color: #b46d00; }
.zone-legend .exitreview { border-left-color: #f87171; color: #c72c3b; }

.si-range-facts { border-top: 1px solid var(--si-line-soft); display: grid; gap: 10px 20px; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); margin-top: 20px; padding-top: 14px; }
.si-range-facts small { color: var(--si-muted); display: block; font-size: 10px; }
.si-range-facts b { display: block; font-size: 14px; margin-top: 2px; }
.si-range-moves { margin-top: 14px; }
.si-range-move { align-items: baseline; border-top: 1px solid var(--si-line-soft); display: flex; font-size: 11px; gap: 8px; justify-content: space-between; padding: 7px 0; }
.si-range-move span { color: var(--si-muted); }
.si-range-move b { font-variant-numeric: tabular-nums; }
.si-range-move em { color: var(--si-dim); font-size: 10.5px; font-style: normal; font-variant-numeric: tabular-nums; }

/* Studio's own breakpoints: the legend halves, then the band names inside the
   track are dropped rather than truncated to an unreadable stub. */
@media (max-width: 1180px) { .zone-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zone-legend div:nth-child(odd) { border-left: 0; } }
@media (max-width: 600px) { .zone-seg { font-size: 0; } }

/* Sandbox mode. Loud on purpose: a page showing generated recommendations must
   never be mistakable for one showing research, however far the reader scrolled. */
.si-sample-banner { align-items: baseline; background: repeating-linear-gradient(135deg, #fff6e5, #fff6e5 9px, #fdf0d8 9px, #fdf0d8 18px); border: 1px solid var(--si-amber); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; padding: 12px 14px; }
.si-sample-banner strong { color: var(--si-amber); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.si-sample-banner span { color: #6b4a12; flex: 1 1 260px; font-size: 11.5px; line-height: 1.55; }
.si-tag.street.sample { background: var(--si-amber-soft); color: var(--si-amber); }
.si-pulse.sample { border-style: dashed; }