/* A stock's own page (/stock/<ticker>, built by scripts/build-stock-pages.js). The card on it is the SAME card the modal shows (css/screener.css styles
   it); this file only takes it out of the modal: no overlay, no fixed height, wider, in the page's normal flow. Prefix: stock-page-, stock-card, stock-related. */

.stock-page-hero{ padding:40px 0 22px; }
.stock-page-hero .wrap{ max-width:880px; }
.stock-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 14px; font-size:13px; color:var(--ink-soft); }
.stock-crumbs a{ color:var(--ink-soft); font-weight:600; }
.stock-crumbs a:hover{ color:var(--indigo-dark); text-decoration:underline; }
.stock-crumbs span[aria-current]{ color:var(--ink); font-weight:700; }
.stock-page-hero h1{ margin:0 0 14px; font-size:clamp(28px, 4vw, 42px); }
.stock-page-lede{ margin:0 0 10px; max-width:760px; font-size:17px; line-height:1.65; color:var(--ink-soft); }
.stock-page-updated{ margin:0; font-size:12.5px; color:var(--ink-soft); }

/* "What does X do?": the company in plain words, and the brands it owns, between the headline and the card */
.stock-page-about{ padding:4px 0 22px; }
.stock-page-about .wrap{ max-width:880px; }
.stock-page-about h2{ margin:0 0 8px; font-family:'Instrument Sans', sans-serif; font-size:22px; font-weight:600; letter-spacing:-0.02em; }
.stock-about-text{ margin:0 0 14px; max-width:760px; font-size:16.5px; line-height:1.65; color:var(--ink); }
.stock-brands-label{ margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.stock-brand-list{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.stock-brand-list li{ padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink); font-size:14px; font-weight:600; line-height:1.3; }

/* the FAQ: this stock's own questions, always open (no accordion: the answers are the content) */
.stock-page-faq{ padding:0 0 30px; }
.stock-page-faq .wrap{ max-width:880px; }
.stock-page-faq h2{ margin:0 0 14px; font-family:'Instrument Sans', sans-serif; font-size:22px; font-weight:600; letter-spacing:-0.02em; }
.stock-faq-item{ padding:16px 0; border-top:1px solid var(--line); }
.stock-faq-item:last-child{ border-bottom:1px solid var(--line); }
.stock-faq-item h3{ margin:0 0 6px; font-family:'Instrument Sans', sans-serif; font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-0.01em; }
.stock-faq-item p{ margin:0; max-width:760px; font-size:15.5px; line-height:1.65; color:var(--ink-soft); }
.stock-faq-item a{ color:var(--indigo-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* "What stands out about X?" (the few unusual things about this stock, above the card) and "Where do these numbers come from?" (below the FAQ) */
.stock-page-standout{ padding:0 0 26px; }
.stock-page-sources{ padding:0 0 30px; }
.stock-page-standout .wrap, .stock-page-sources .wrap{ max-width:880px; }
.stock-page-standout h2, .stock-page-sources h2{ margin:0 0 12px; font-family:'Instrument Sans', sans-serif; font-size:22px; font-weight:600; letter-spacing:-0.02em; }
.stock-standout-list{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.stock-standout-list li{ padding:14px 16px 14px 18px; border:1px solid var(--line); border-left:3px solid var(--indigo); border-radius:var(--radius-sm); background:var(--white); font-size:15px; line-height:1.6; color:var(--ink-soft); }
.stock-standout-list strong{ display:block; margin-bottom:2px; font-size:15.5px; line-height:1.4; color:var(--ink); }
.stock-standout-list a, .stock-sources-list a{ color:var(--indigo-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.stock-sources-list{ margin:0; padding:0; list-style:none; }
.stock-sources-list li{ padding:14px 0; border-top:1px solid var(--line); max-width:760px; font-size:15.5px; line-height:1.65; color:var(--ink-soft); }
.stock-sources-list li:last-child{ border-bottom:1px solid var(--line); }
.stock-sources-list strong{ color:var(--ink); }

.stock-page-card{ padding:8px 0 40px; }
.stock-page-card .wrap, .stock-page-related .wrap{ max-width:880px; }
/* the modal's chrome, undone: it was a centred overlay with its own scroll and an entrance transform */
.detail-modal.stock-card{ max-width:none; max-height:none; overflow:visible; transform:none; transition:none; margin:0 auto; padding:32px; }
.stock-card .detail-modal-head{ padding-right:0; }
/* the sticky section nav sticks to the viewport (under the site header), not to a scrolling modal; its pills are links here */
.stock-card .detail-modal-nav{ top:64px; margin:0 -32px 22px; padding:10px 32px 14px; border-radius:0; }
.stock-card .detail-nav-btn{ display:inline-block; text-decoration:none; }
/* the card's section titles are <h2> on the page (<h4> in the modal): same look */
.stock-card .detail-modal-section h2{ margin:0 0 12px; font-family:'Instrument Sans', sans-serif; font-size:15px; font-weight:600; line-height:1.3; letter-spacing:0; text-wrap:auto; color:#fff; }
.stock-card .stock-modal-section h2{ margin:0 0 6px; font-family:'Instrument Sans', sans-serif; font-size:16px; font-weight:600; line-height:1.3; letter-spacing:0; text-wrap:auto; color:#fff; }
.stock-card .stock-modal-gain h2{ margin-bottom:2px; }
.stock-card .stock-modal-fin-head h2{ margin:0; }
.stock-card .detail-modal-section{ scroll-margin-top:120px; }
.stock-card .detail-modal-foot{ flex-direction:row; flex-wrap:wrap; align-items:center; }
.stock-card .detail-modal-foot .pill-btn{ width:auto; }
.stock-card .detail-modal-disclaimer{ flex:1 1 100%; text-align:left; }
/* the chart's own placeholder, until js/stock-page.js mounts it */
.stock-card #detailChart .sc-loading{ margin:0; padding:36px 0; text-align:center; font-size:13.5px; color:rgba(255,255,255,0.64); }

.stock-page-related{ padding:0 0 36px; }
.stock-page-related h2{ margin:0 0 12px; font-family:'Instrument Sans', sans-serif; font-size:22px; font-weight:600; letter-spacing:-0.02em; }
.stock-related-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; margin:0 0 14px; padding:0; list-style:none; }
.stock-related-list a{ display:block; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); color:var(--ink); font-size:14px; font-weight:600; }
.stock-related-list a:hover{ border-color:var(--indigo); color:var(--indigo-dark); }
.stock-related-list small{ display:block; margin-top:2px; font-size:12px; font-weight:500; color:var(--ink-soft); }
.stock-related-tools{ margin:0 0 10px; font-size:14px; line-height:1.6; color:var(--ink-soft); }
.stock-related-tools a{ color:var(--indigo-dark); font-weight:600; }
.stock-related-more{ margin:0; font-size:14px; }
.stock-related-more a{ color:var(--indigo-dark); font-weight:600; }

@media (max-width: 720px){
  .stock-page-hero{ padding:28px 0 16px; }
  .stock-page-lede{ font-size:16px; }
  .detail-modal.stock-card{ padding:20px 16px; border-radius:18px; }
  .stock-card .detail-modal-nav{ margin:0 -16px 18px; padding:10px 16px 12px; top:56px; }
  .stock-card .detail-nav-btn{ min-height:40px; display:inline-flex; align-items:center; }
  .stock-card .detail-modal-foot .pill-btn{ flex:1 1 100%; min-height:44px; display:flex; align-items:center; justify-content:center; }
}

/* ---------------- /stocks: the A-Z directory ---------------- */
.stocks-directory{ padding:6px 0 36px; }
.stocks-directory .wrap{ max-width:880px; }
.stocks-jump{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px; }
.stocks-jump a{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:38px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); color:var(--ink); font-size:14px; font-weight:700; }
.stocks-jump a:hover{ border-color:var(--indigo); color:var(--indigo-dark); }
.stocks-letter{ margin:0 0 22px; scroll-margin-top:90px; }
.stocks-letter h3{ margin:0 0 8px; font-family:'Instrument Sans', sans-serif; font-size:20px; font-weight:700; letter-spacing:-0.02em; }
/* two lines a stock: ticker and name, then what the company does in one line (the name truncates, the description wraps) */
.stocks-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:4px 22px; margin:0; padding:0; list-style:none; }
.stocks-list a{ display:flex; flex-wrap:wrap; gap:0 8px; align-items:baseline; min-height:36px; padding:7px 2px; color:var(--ink-soft); font-size:14px; }
.stocks-list a b{ min-width:48px; color:var(--ink); font-weight:700; }
.stocks-list a:hover, .stocks-list a:hover b{ color:var(--indigo-dark); }
.stocks-list a span{ flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stocks-list a small{ flex:1 0 100%; margin-top:2px; padding-left:56px; font-size:13px; line-height:1.4; color:var(--ink-soft); opacity:.85; }