/* The stock card: the markup in src/partials/stock-modal.html, filled by js/stock-detail-modal.js and js/stock-detail-extras.js. It is the quick-look modal on
   every page that opens it AND the card inside every /stock/<ticker> page, so it lives in its own file: a stock page loads this and not the 1,400 lines of
   screener tools in css/screener.css or the home page's rules in css/style.css. Pages that open the modal load style.css, screener.css and then this file.
   Split out of those two files on 2026-10-18 (their other rules are untouched; css/stock-page.css takes the card out of the modal on a stock page).
   Scrollbars follow the convention in ARCHITECTURE.md: webkit rules on the element, the Firefox fallback in an @supports block. */

/* ---- from css/style.css: the modal rules of the financials, the insider list and the gain row (style.css loads before screener.css, so they come first) ---- */
/* ---------------- Modal overlay + financial-history sections ----------------
   The overlay/close pair is shared with the sentiment-gauge chart modal; the -section, -fin-, -gain and
   -insider rules style the sections js/stock-detail-extras.js adds to the one stock card. */
/* Deliberately theme-invariant (fixed dark glass surface, literal white/near-
   white text) rather than swapping with --white/--ink - it's a full-screen
   overlay meant to feel the same in both site themes, not a page section. */
.stock-modal-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background: rgba(8,8,16,0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity:0; transition: opacity .2s ease;
}
.stock-modal-overlay.open{ opacity:1; }
.stock-modal{
  position:relative; width:100%; max-width:960px; max-height:88vh; overflow-y:auto; overflow-x:hidden;
  background: radial-gradient(120% 140% at 10% 0%, #1E1B3A 0%, #1B1B2F 55%, #0E0E1C 100%);
  border:1px solid rgba(255,255,255,0.1); border-radius: 28px;
  padding:40px; color:#fff;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: scale(.94) translateY(12px); transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.stock-modal::-webkit-scrollbar{ width:8px; }
.stock-modal::-webkit-scrollbar-track{ background:transparent; margin:28px 0; }
.stock-modal::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #8B7FFF, #FFC257); border-radius:999px;
  border:2px solid transparent; background-clip:padding-box;
}
.stock-modal::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, #9d92ff, #ffcd70); background-clip:padding-box; }
.stock-modal-overlay.open .stock-modal{ transform: scale(1) translateY(0); }
.stock-modal-close{
  position:absolute; top:20px; right:20px; z-index:2; width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.stock-modal-close svg{ width:16px; height:16px; }
.stock-modal-close:hover{ background: rgba(255,255,255,0.16); }
.stock-modal-overlay.open .gauge-modal{ transform: scale(1) translateY(0); }
.stock-modal-change.up{ color:var(--pos-strong); }
.stock-modal-change.down{ color:#FB7185; }
@keyframes stockModalColIn{ to{ opacity:1; transform:translateY(0); } }
/* Same 4 colors as .stock-modal-grade's own A/B/C/D text right next to
   this ring, so the ring reads as that grade at a glance instead of a
   generic pass/fail gray regardless of how good or bad the score is. */
.stock-modal-ring-fill.grade-a{ stroke:var(--pos-strong); }
.stock-modal-ring-fill.grade-b{ stroke:#FFC257; }
.stock-modal-ring-fill.grade-c{ stroke:#FF8A75; }
.stock-modal-ring-fill.grade-d{ stroke: rgba(255,255,255,0.5); }
.stock-modal-avatar.buffett{ background: linear-gradient(135deg, #8B7FFF, #4B3FFF); }
.stock-modal-avatar.lynch{ background: linear-gradient(135deg, #FFC257, #FF8A75); }
.stock-modal-grade.grade-a{ color:var(--pos-strong); }
.stock-modal-grade.grade-b{ color:#FFC257; }
.stock-modal-grade.grade-c{ color:#FF8A75; }
.stock-modal-grade.grade-d{ color: rgba(255,255,255,0.45); }
.stock-modal-info-btn:hover, .stock-modal-info-btn.open{ background: rgba(255,255,255,0.22); color:#fff; }
.stock-modal-info-btn:hover .stock-modal-info-tooltip,
.stock-modal-info-btn:focus-visible .stock-modal-info-tooltip,
.stock-modal-info-btn.open .stock-modal-info-tooltip{
  opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;
}
.stock-modal-verdict-pill.pass{ background: rgba(143,217,138,0.18); color:var(--pos-strong); }
.stock-modal-verdict-pill.fail{ background: rgba(255,138,117,0.14); color:#FF8A75; }
.stock-modal-checklist li .dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.stock-modal-checklist li.yes{ color:#DFF7EC; }
.stock-modal-checklist li.yes .dot{ background:var(--pos-strong); }
.stock-modal-checklist li.no{ color: rgba(255,255,255,0.45); }
.stock-modal-checklist li.no .dot{ background: rgba(255,255,255,0.25); }
.stock-modal-checklist li.bonus{ color:#C9C2FF; font-style:italic; }
.stock-modal-checklist li.bonus .dot{ background:#8B7FFF; }
/* Extras: 10-year financials + insider activity, below the Buffett/Lynch columns */
.stock-modal-section{
  position:relative; z-index:1; margin-top:20px; padding:22px 24px; border-radius:18px;
  background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
}
.stock-modal-section h4{ font-family:'Instrument Sans', sans-serif; font-size:16px; font-weight:600; margin:0 0 6px; color:#fff; }
.stock-modal-section-sub{ font-size:12px; color: rgba(255,255,255,0.5); line-height:1.5; margin:0 0 14px; }
.stock-modal-section-empty{ font-size:13px; color: rgba(255,255,255,0.5); margin:0; }
.stock-modal-gain h4{ margin-bottom:2px; }
.stock-modal-gain-span{ font-family:'Instrument Sans', sans-serif; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: rgba(255,255,255,0.4); }
.stock-modal-gain-headline{ font-family:'Instrument Sans', sans-serif; font-size:32px; font-weight:700; margin-top:10px; }
.stock-modal-gain-headline.pos{ color:var(--pos-strong); }
.stock-modal-gain-headline.neg{ color:#FF8A75; }
.stock-modal-gain-unit{ font-family:'Instrument Sans', sans-serif; font-size:13px; font-weight:600; color: rgba(255,255,255,0.4); margin-left:6px; }
.stock-modal-gain-sub{ font-size:12.5px; color: rgba(255,255,255,0.5); margin:2px 0 16px; }
.stock-modal-gain-rows{ display:flex; flex-direction:column; gap:2px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.08); }
.stock-modal-gain-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; font-size:13px; color: rgba(255,255,255,0.75); }
.stock-modal-gain-row span:last-child{ font-weight:700; color:#fff; font-variant-numeric: tabular-nums; white-space:nowrap; }
.stock-modal-gain-row span.pos{ color:var(--pos-strong); }
.stock-modal-gain-row span.neg{ color:#FF8A75; }
.stock-modal-fin-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.stock-modal-fin-head h4{ margin:0; }
.stock-modal-fin-toggle{ display:flex; gap:3px; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius: var(--radius-pill); padding:4px; }
.stock-modal-fin-toggle-btn{
  background:none; border:none; padding:7px 14px; border-radius: var(--radius-pill); cursor:pointer;
  font-size:11px; font-weight:700; color: rgba(255,255,255,0.5); white-space:nowrap;
}
.stock-modal-fin-toggle-btn:hover{ color: rgba(255,255,255,0.8); }
.stock-modal-fin-toggle-btn.active{ background: rgba(255,255,255,0.14); color:#fff; }
@media (max-width: 720px){
  .stock-modal-fin-toggle-btn{ min-height:40px; }
  .stock-modal-insider-toggle{ min-height:44px; }
}
.stock-modal-fin-legend{ display:flex; gap:16px; margin-bottom:10px; font-size:11.5px; color: rgba(255,255,255,0.65); }
.stock-modal-fin-legend .swatch{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.stock-modal-fin-chart{ width:100%; height:auto; display:block; }
.stock-modal-fin-bargroup{ cursor:pointer; }
.stock-modal-fin-bargroup:hover rect:not(.stock-modal-fin-hit),
.stock-modal-fin-bargroup:focus-visible rect:not(.stock-modal-fin-hit),
.stock-modal-fin-bargroup.active rect:not(.stock-modal-fin-hit){
  filter: brightness(1.25);
}
.stock-modal-fin-bargroup.active rect:not(.stock-modal-fin-hit){ stroke:#fff; stroke-width:1.5; }
.stock-modal-fin-bargroup:focus-visible{ outline:none; }
.stock-modal-fin-detail{
  margin-top:16px; padding:16px; border-radius:14px;
  background: rgba(139,127,255,0.1); border:1px solid rgba(139,127,255,0.25);
}
.stock-modal-fin-detail-head{ font-family:'Instrument Sans', sans-serif; font-size:14px; font-weight:600; color:#fff; margin-bottom:10px; }
.stock-modal-fin-detail-fye{ font-size:11.5px; font-weight:400; color: rgba(255,255,255,0.5); }
.stock-modal-fin-detail-rows{ display:flex; flex-direction:column; gap:6px; }
.stock-modal-fin-detail-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; }
.stock-modal-fin-detail-lbl{ color: rgba(255,255,255,0.55); }
.stock-modal-fin-detail-val{ font-weight:700; color:#fff; font-variant-numeric: tabular-nums; }
.stock-modal-fin-detail-yoy{ font-weight:600; font-size:11.5px; }
.stock-modal-fin-detail-yoy.pos{ color:var(--pos-strong); }
.stock-modal-fin-detail-yoy.neg{ color:#FF8A75; }
.stock-modal-de-row{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.stock-modal-de-lbl{ font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.stock-modal-de-val{ font-family:'Instrument Sans', sans-serif; font-size:20px; font-weight:600; color:#fff; }
.stock-modal-de-trend{ font-size:11.5px; color: rgba(255,255,255,0.45); }
.stock-modal-insider-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; padding:0; cursor:pointer; font-size:14px; font-weight:700; color:#fff;
  font-family:'Instrument Sans', sans-serif;
}
.stock-modal-insider-toggle:hover{ color: rgba(255,255,255,0.8); }
.stock-modal-insider-arrow{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:50%;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7); transition: transform .2s ease, background .15s ease, border-color .15s ease;
}
.stock-modal-insider-arrow svg{ width:15px; height:15px; }
.stock-modal-insider-toggle:hover .stock-modal-insider-arrow{ background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); }
.stock-modal-insider-toggle.open .stock-modal-insider-arrow{ transform: rotate(180deg); }
.stock-modal-insider-panel{ margin-top:14px; }
.stock-modal-insider-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 0; border-top:1px solid rgba(255,255,255,0.07); font-size:12.5px;
}
.stock-modal-insider-row:first-of-type{ border-top:none; }
.stock-modal-insider-name{ color:#fff; font-weight:600; }
.stock-modal-insider-meta{ display:flex; gap:10px; color: rgba(255,255,255,0.55); flex-wrap:wrap; }
.stock-modal-insider-code{ font-weight:800; padding:2px 8px; border-radius: var(--radius-pill); font-size:11px; }
.stock-modal-insider-code.buy{ background: rgba(47,214,120,0.18); color:var(--pos-strong); }
.stock-modal-insider-code.sell{ background: rgba(255,138,117,0.18); color:#FF8A75; }
.stock-modal-foot .pill-btn{ background:#fff; color:#1B1B2F; }
.stock-modal-foot .pill-btn:hover{ background: rgba(255,255,255,0.85); }
@media (max-width: 720px){
  .stock-modal{ padding:28px 20px; border-radius:20px; }
}
@supports not selector(::-webkit-scrollbar){
  .stock-modal{ scrollbar-width: thin; scrollbar-color: rgba(139,127,255,0.5) transparent; }
}

/* ---- from css/screener.css ---- */
.floor-range{ display:flex; flex-direction:column; gap:7px; }
.floor-range-track{ height:5px; border-radius:999px; background: rgba(255,255,255,0.1); overflow:hidden; }
.floor-range-fill{
  height:100%; border-radius:999px; background: linear-gradient(90deg, var(--neg-strong), #FFC257);
  transition: width 1s cubic-bezier(.16,1,.3,1);
}
.floor-range-labels{
  display:flex; justify-content:space-between; font-size:11px; color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px){
  .floor-range{ grid-area:range; }
}
/* ---------------- Stock detail modal ---------------- */
/* Same dark-glass modal language as index.html's .stock-modal, but a fresh,
   simpler set of classes: this covers all 200 universe stocks (9-filter
   pass/fail, margin of safety, 52-week range), not the 14 curated stocks'
   Buffett/Lynch checklist + 10-year financials, which need data this page
   doesn't have. */
.detail-modal-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background: rgba(8,8,16,0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity:0; transition: opacity .2s ease;
}
.detail-modal-overlay.open{ opacity:1; }
.detail-modal{
  position:relative; width:100%; max-width:560px; max-height:85vh; overflow-y:auto;
  background: radial-gradient(120% 140% at 10% 0%, #1E1B3A 0%, #1B1B2F 55%, #0E0E1C 100%);
  border:1px solid rgba(255,255,255,0.1); border-radius:24px;
  padding:32px; color:#fff;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: scale(.94) translateY(12px); transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.detail-modal::-webkit-scrollbar{ width:8px; }
.detail-modal::-webkit-scrollbar-track{ background:transparent; }
.detail-modal::-webkit-scrollbar-thumb{ background: rgba(139,127,255,0.45); border-radius:999px; }
.detail-modal::-webkit-scrollbar-thumb:hover{ background: rgba(139,127,255,0.7); }
.detail-modal-overlay.open .detail-modal{ transform: scale(1) translateY(0); }
.detail-modal-close{
  position:absolute; top:20px; right:20px; z-index:2; width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.detail-modal-close svg{ width:15px; height:15px; }
.detail-modal-close:hover{ background: rgba(255,255,255,0.16); }
.detail-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; padding-right:48px; }
/* Ticker and watchlist star share the first line, the company name sits under
   them. (They used to be flex items with width:100% on the ticker and the
   company, which forced the star onto a line of its own in between.) */
.detail-modal-titles{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:8px; row-gap:3px; min-width:0; }
.detail-modal-ticker{ font-family:'Instrument Sans', sans-serif; font-size:28px; font-weight:700; line-height:1.1; }
.detail-modal-titles .watch-star{ font-size:20px; margin:0; }
.detail-modal-company{ grid-column:1 / -1; font-size:13px; color: rgba(255,255,255,0.55); }
/* what the company does, in one line, under the header row (not inside it: the title column is too narrow on a phone). A stock page says it in its own block above the card. */
.detail-modal-blurb{ max-width:60ch; margin:-6px 0 16px; font-size:14px; line-height:1.45; color: rgba(255,255,255,0.82); }
.detail-modal-blurb[hidden]{ display:none; }
.detail-modal-price-block{ text-align:right; flex:none; padding-top:3px; }
.detail-modal-price{ display:block; font-family:'Instrument Sans', sans-serif; font-size:22px; font-weight:600; }
.detail-modal-conviction{
  display:inline-block; margin-top:6px; font-size:11px; font-weight:800; letter-spacing:.02em;
  color:#3A2E00; background: linear-gradient(135deg, var(--gold-bright), #FFB238); padding:3px 9px; border-radius: var(--radius-pill);
}
.detail-modal-page{ display:block; margin-top:8px; font-size:12px; font-weight:700; color: rgba(255,255,255,0.7); text-decoration:none; }
.detail-modal-page:hover, .detail-modal-page:focus-visible{ color:#fff; text-decoration:underline; outline:none; }
/* Real-tally summary pills - never an invented composite score, just
   counts detailChecklistItems()/detailMungerItems() already compute, shown
   before the long section scroll so the gist doesn't require scrolling. */
.detail-modal-summary{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.detail-summary-pill{
  font-size:11px; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75);
}
.detail-summary-pill.pos{ background: rgba(47,214,120,0.12); border-color: rgba(47,214,120,0.4); color:var(--pos-strong); }
.detail-summary-pill.neg{ background: rgba(255,138,117,0.1); border-color: rgba(255,138,117,0.35); color:#FF8A75; }
.detail-summary-pill.warn{ background: rgba(255,194,87,0.12); border-color: rgba(255,194,87,0.4); color:#E8C468; }
/* Sticks to the top of the modal's own scroll container (not the page) as
   you scroll through the sections below - only lists sections that
   actually rendered for the ticker in view. */
.detail-modal-nav{
  display:flex; flex-wrap:nowrap; gap:6px; margin:0 -32px 22px; padding:10px 32px 14px;
  position:sticky; top:0; z-index:3;
  border-bottom:1px solid rgba(255,255,255,0.08);
  overflow-x:auto;
  /* Scroll hints with no JS: a soft accent glow on whichever edge still has
     pills beyond it. The two `local` layers (solid colour) travel with the
     content and cover the glow once you reach that end; the two `scroll`
     layers stay pinned to the edges. Without this the row just looked cut off. */
  background:
    linear-gradient(90deg, #17162c 30%, rgba(23,22,44,0)) 0 0 / 48px 100% no-repeat local,
    linear-gradient(270deg, #17162c 30%, rgba(23,22,44,0)) 100% 0 / 48px 100% no-repeat local,
    linear-gradient(90deg, rgba(139,127,255,0.3), rgba(139,127,255,0)) 0 0 / 24px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(139,127,255,0.3), rgba(139,127,255,0)) 100% 0 / 24px 100% no-repeat scroll,
    #17162c;
}
.detail-modal-nav::-webkit-scrollbar{ height:6px; }
.detail-modal-nav::-webkit-scrollbar-track{ background:transparent; }
.detail-modal-nav::-webkit-scrollbar-thumb{ background: rgba(139,127,255,0.45); border-radius:999px; }
.detail-modal-nav::-webkit-scrollbar-thumb:hover{ background: rgba(139,127,255,0.7); }
.detail-nav-btn{
  font-size:11.5px; font-weight:700; padding:6px 11px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.65);
  cursor:pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
  flex:none; white-space:nowrap;
}
.detail-nav-btn:hover, .detail-nav-btn:focus-visible{ background: rgba(139,127,255,0.25); color:#fff; border-color: rgba(139,127,255,0.5); outline:none; }
.detail-modal-body{ display:flex; flex-direction:column; gap:22px; }
/* plain-English read under each investor's verdict (js/stock-detail-extras.js) */
.detail-investor-narrative{ margin:0 0 12px; font-size:12.5px; line-height:1.6; color: rgba(255,255,255,0.66); }
.detail-investor-narrative:empty{ display:none; }
/* the financial-history sections (moved in from the old home-page modal) sit inside the card's body */
.detail-extras{ display:flex; flex-direction:column; gap:14px; }
.detail-extras .stock-modal-section{ margin:0; }
/* peer comparison section (js/stock-detail-modal.js renderDetailPeers) */
.detail-peer-lede{ margin:0 0 14px; font-size:13px; line-height:1.55; color: rgba(255,255,255,0.72); }
.detail-peer-lede b{ color:#fff; }
.detail-peer-rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dpr{ display:grid; align-items:center; column-gap:14px; grid-template-columns: minmax(0,1.5fr) 64px minmax(80px,1fr) 98px; padding:9px 0; border-top:1px solid rgba(255,255,255,0.08); }
.dpr:first-child{ border-top:0; }
.dpr-l{ display:flex; flex-direction:column; gap:1px; min-width:0; font-size:13px; color:#fff; }
.dpr-l small{ font-size:11px; color: rgba(255,255,255,0.46); line-height:1.3; }
.dpr-v{ font-size:13px; font-weight:700; font-variant-numeric: tabular-nums; text-align:right; color:#fff; }
.dpr-bar{ display:block; }
.dpr-track{ position:relative; display:block; height:6px; border-radius:3px; background: rgba(255,255,255,0.1); }
.dpr-mid{ position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background: rgba(255,255,255,0.4); }
.dpr-dot{ position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff; box-shadow: 0 0 0 2px #1d2130; }
.dpr-r{ display:flex; align-items:center; justify-content:flex-end; gap:7px; font-size:12px; font-weight:700; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.85); white-space:nowrap; }
.dpr-g{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; font-style:normal; font-size:11px; font-weight:800; line-height:1; }
.dpr--top .dpr-g{ background: rgba(47,214,120,0.18); color:#6FE3A5; box-shadow: inset 0 0 0 1px rgba(47,214,120,0.4); }
.dpr--bottom .dpr-g{ background: rgba(255,107,87,0.92); color:#240B07; }
.dpr--mid .dpr-g{ background:transparent; color: rgba(255,255,255,0.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.detail-peer-note{ margin:12px 0 0; font-size:11px; line-height:1.55; color: rgba(255,255,255,0.45); }
@media (max-width: 560px){
  .dpr{ grid-template-columns: minmax(0,1fr) auto; row-gap:7px; }
  .dpr-bar{ grid-column:1 / -1; grid-row:2; }
  .dpr-r{ grid-column:1 / -1; grid-row:3; justify-content:flex-start; }
}
.detail-modal-section h4{ font-family:'Instrument Sans', sans-serif; font-size:15px; font-weight:600; margin:0 0 12px; color:#fff; }
.detail-checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.detail-checklist li{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; }
.detail-checklist .lbl{ display:flex; align-items:center; gap:8px; color: rgba(255,255,255,0.75); }
.detail-checklist .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.detail-checklist li.pass .dot{ background:var(--pos-strong); }
.detail-checklist li.fail .dot{ background:#FF8A75; }
.detail-checklist li.na .dot{ background: rgba(255,255,255,0.25); }
.detail-checklist li.warn .dot{ background:var(--gold); }
/* A bonus row (insider buying, buybacks) is supporting context, not
   another graded checklist line - the divider plus distinct violet dot
   keeps it from reading as "one more pass/fail item" at a glance. */
.detail-checklist li.bonus{ margin-top:5px; padding-top:11px; border-top:1px dashed rgba(255,255,255,0.14); }
.detail-checklist li.bonus .dot{ background:#8B7FFF; }
.detail-checklist li.bonus .lbl{ font-style:italic; }
.detail-checklist li.bonus .val{ color:#C9C2FF; }
.detail-checklist .val{ font-weight:700; font-variant-numeric: tabular-nums; text-align:right; white-space:nowrap; }
.detail-checklist li.pass .val{ color:var(--pos-strong); }
.detail-checklist li.fail .val{ color:#FF8A75; }
.detail-checklist li.na .val{ color: rgba(255,255,255,0.4); font-weight:400; }
.detail-checklist li.warn .val{ color:var(--gold); }
.detail-checklist li.has-note{ flex-wrap:wrap; }
.detail-checklist li .note{
  flex:1 0 100%; font-size:11px; font-weight:400; font-style:normal;
  color: rgba(255,255,255,0.5); line-height:1.5; margin-top:2px;
}
.detail-diligence-intro{ font-size:12.5px; line-height:1.6; color: rgba(255,255,255,0.5); margin:-6px 0 12px; }
.detail-mos-row{ font-family:'Instrument Sans', sans-serif; font-size:20px; font-weight:600; }
.detail-mos-row.pos{ color:var(--pos-strong); }
.detail-mos-row.neg{ color:#FF8A75; }
.detail-mos-trend{ font-size:12px; color: rgba(255,255,255,0.5); margin:6px 0 0; line-height:1.5; }
.detail-berkshire-row{ font-family:'Instrument Sans', sans-serif; font-size:17px; font-weight:600; color:#fff; }
.detail-berkshire-note{ font-size:11.5px; color: rgba(255,255,255,0.4); line-height:1.5; margin:8px 0 0; }
.detail-short-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.detail-short-stat{
  display:flex; flex-direction:column; gap:3px; text-align:center; padding:12px 8px; border-radius:12px;
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-top-width:2px; transition: transform .15s ease, background .15s ease;
}
/* A subtle color cycle instead of every stat box being visually identical -
   purely decorative (no meaning attached to which stat lands on which
   color), same three accents used elsewhere on this page. */
.detail-short-grid .detail-short-stat:nth-child(3n+1){ background: rgba(139,127,255,0.08); border-top-color: rgba(139,127,255,0.5); }
.detail-short-grid .detail-short-stat:nth-child(3n+2){ background: rgba(47,214,120,0.07); border-top-color: rgba(47,214,120,0.45); }
.detail-short-grid .detail-short-stat:nth-child(3n+3){ background: rgba(255,194,87,0.08); border-top-color: rgba(255,194,87,0.45); }
.detail-short-stat:hover{ transform: translateY(-2px); }
/* Meaningful color, not decorative - overrides the cycle above when a box's
   value has a real pass/fail direction (e.g. a diversification rating).
   Matches the cycle rule's specificity (ancestor + 2 classes) so source
   order decides, rather than losing to nth-child by specificity alone. */
.detail-short-grid .detail-short-stat.detail-short-stat--pos{ background: rgba(47,214,120,0.12); border-top-color:#2fd678; }
.detail-short-grid .detail-short-stat.detail-short-stat--neg{ background: rgba(255,138,117,0.12); border-top-color:#FF8A75; }
.detail-short-lbl{ font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color: rgba(255,255,255,0.45); }
.detail-short-val{ font-family:'Instrument Sans', sans-serif; font-size:17px; font-weight:600; color:#fff; }
.detail-short-val.pos{ color:var(--pos-strong); }
.detail-short-val.neg{ color:#FF8A75; }
.detail-short-val.flag{ color:#E8C468; font-size:13.5px; cursor:help; }
.detail-modal-foot .pill-btn:disabled{ opacity:0.4; cursor:not-allowed; pointer-events:none; }
.detail-short-note{ font-size:12px; color: rgba(255,255,255,0.5); margin:10px 0 0; line-height:1.5; }
.detail-munger-intro{ font-size:12.5px; color: rgba(255,255,255,0.55); line-height:1.55; margin:0 0 14px; font-style:italic; }
.detail-munger-note{ font-size:11.5px; color: rgba(255,255,255,0.4); line-height:1.5; margin:14px 0 0; }
.detail-investor-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:16px; }
.detail-investor-head{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.detail-investor-head > span:first-child{ font-family:'Instrument Sans', sans-serif; font-size:13.5px; font-weight:600; color:#fff; }
.detail-investor-verdict{ font-size:11px; font-weight:700; padding:3px 0; }
.detail-investor-verdict.pass{ color:var(--pos-strong); }
.detail-investor-verdict.fail{ color:#FF8A75; }
.detail-investor-verdict.na{ color: rgba(255,255,255,0.4); font-weight:400; }
.detail-investor-col .detail-checklist{ gap:7px; }
.detail-investor-col .detail-checklist li{ font-size:12px; }
@media (max-width: 480px){
  .detail-investor-grid{ grid-template-columns:minmax(0,1fr); }
}
.detail-modal-foot{ margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:10px; }
.detail-modal-foot .pill-btn{ width:100%; text-align:center; }
.detail-modal-disclaimer{ font-size:11px; color: rgba(255,255,255,0.4); text-align:center; }
@media (max-width: 480px){
  .detail-modal{ padding:24px; }
  /* the nav bleeds to the modal's edges, so it must follow the padding change */
  .detail-modal-nav{ margin:0 -24px 22px; padding:10px 24px 14px; }
  .detail-modal-ticker{ font-size:26px; }
}
@supports not selector(::-webkit-scrollbar){
  .detail-modal, .detail-modal-nav{ scrollbar-width: thin; scrollbar-color: rgba(139,127,255,0.5) transparent; }
}
@media (max-width: 560px){
  .detail-checklist .val{ white-space:normal; min-width:0; max-width:62%; overflow-wrap:anywhere; }
}

/* ---------------- The "Source" popover (js/source-popover.js) ----------------
   Every figure on the card carries data-src (srcAttr in js/stock-detail-extras.js); a click on it opens this beside the figure: the SEC filing and fiscal period,
   or the provider and date, behind the number. It is absolutely positioned inside the card (the scroll container in the modal, the page's own box on a stock page),
   so it scrolls with the figure and needs no scroll listener. */
.detail-modal [data-src]{ cursor:pointer; }
.detail-modal [data-src]:hover{ background: rgba(139,127,255,0.08); }
.detail-modal [data-src]:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; border-radius:6px; }
.detail-modal [data-src].src-active{ background: rgba(139,127,255,0.16); border-radius:6px; }
/* the figure itself carries the dotted underline that says it can be clicked */
.detail-modal [data-src] > .val, .detail-modal [data-src] > .dpr-v, .detail-modal [data-src] .detail-short-val, .detail-modal [data-src] .stock-modal-fin-detail-val,
.detail-modal [data-src] .stock-modal-de-val, .detail-modal [data-src] .stock-modal-insider-meta, .detail-modal .stock-modal-gain-row[data-src] > span:last-child,
.detail-modal .detail-summary-pill[data-src], .detail-modal .detail-mos-row[data-src], .detail-modal .detail-modal-price[data-src], .detail-modal .stock-modal-gain-headline[data-src],
.detail-modal .detail-investor-verdict[data-src], .detail-modal .floor-range-labels[data-src] > span, .detail-modal .detail-berkshire-row[data-src]{
  text-decoration: underline dotted rgba(255,255,255,0.34); text-underline-offset:4px;
}
.detail-src-hint{ margin-left:auto; align-self:center; font-size:12px; color: rgba(255,255,255,0.5); }
.src-pop{
  position:absolute; z-index:6; box-sizing:border-box; padding:16px 16px 14px; border-radius:16px; text-align:left; font-size:13.5px; line-height:1.5; font-weight:400;
  letter-spacing:0; text-transform:none; color:#fff; cursor:auto;
  background:#1E1B3A; border:1px solid rgba(139,127,255,0.5); box-shadow:0 18px 50px rgba(0,0,0,0.6);
}
.src-pop:focus{ outline:none; }
.src-pop-close{ position:absolute; top:6px; right:8px; width:32px; height:32px; border:0; border-radius:50%; background:transparent; color: rgba(255,255,255,0.7); font-size:22px; line-height:1; cursor:pointer; }
.src-pop-close:hover{ background: rgba(255,255,255,0.1); color:#fff; }
.src-pop-badge{ margin:0 36px 2px 0; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#C9C2FF; }
.src-pop-title{ margin:0 36px 10px 0; font-family:'Instrument Sans', sans-serif; font-size:16px; font-weight:700; line-height:1.3; color:#fff; }
.src-pop-facts{ margin:0 0 10px; display:grid; gap:8px; }
.src-pop-fact{ display:grid; grid-template-columns:88px 1fr; gap:10px; }
.src-pop-fact dt{ padding-top:1px; font-size:12px; color: rgba(255,255,255,0.55); }
.src-pop-fact dd{ margin:0; }
.src-pop-links, .src-pop-chips{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; }
.src-pop a{ color:#C9C2FF; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.src-pop-chips a{ padding:2px 9px; border-radius:999px; background: rgba(139,127,255,0.2); font-size:12px; text-decoration:none; }
.src-pop-h{ margin:12px 0 3px; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: rgba(255,255,255,0.55); }
.src-pop-how, .src-pop-note{ margin:0; color: rgba(255,255,255,0.86); }
.src-pop-note{ margin-top:8px; font-size:12.5px; color: rgba(255,255,255,0.62); }
.src-pop-inputs{ margin:0; padding:0 0 0 18px; }
.src-pop-inputs li span{ color: rgba(255,255,255,0.55); }
.src-pop-method{ margin:12px 0 0; }
.src-pop-loading{ margin:0; color: rgba(255,255,255,0.7); }
@media (max-width: 560px){
  .src-pop-fact{ grid-template-columns:1fr; gap:2px; }
  .src-pop-close{ width:44px; height:44px; top:2px; right:2px; }
  .detail-src-hint{ margin-left:0; flex:1 0 100%; }
}