/* ============================================================
   MPN Screener — card_share.css
   The Share + P&F controls on every MPN Card (.pick.sc), plus the Share
   floating menu + toast. Loaded globally from base.html so it covers the
   full /card page, the /advisor picks and the /cards grid alike. Kept in
   its OWN file (not detail.css) so it needs no cache-busting ?v= bump on
   the shared stylesheets. Colours use theme tokens → dark-mode-correct.
   Share behaviour is wired by static/js/card_share.js.

   Placement:
   • Full /card page (card_full=True): the pair rides the price row
     (.sc-pricerow), right-aligned — P&F left of Share.
   • Compact /advisor + /cards cards (card_full=False): the pair rides the
     "Fundamentals, Moving Averages" collapsible header row, bottom-right —
     placed OUTSIDE the <summary> (a sibling in .sc-more-row) so clicking them
     never toggles the collapsible, and absolutely pinned so they never wrap
     and stay on the header row whether it's open or closed.
   ============================================================ */

/* Button group. margin-left:auto right-aligns it on the full-card price row. */
.sc-price-actions { margin-left: auto; flex: 0 0 auto; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.5rem; }

/* Shared pill look for both buttons (P&F is an <a>, Share is a <button>). */
.sc-share-btn, .sc-pnf-btn { display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.74rem; font-weight: 700; color: var(--ink-soft, #6b7280);
    background: var(--surface-2, #f4f6f9); border: 1px solid var(--line);
    border-radius: 40px; padding: 0.3rem 0.65rem; cursor: pointer; line-height: 1;
    white-space: nowrap; text-decoration: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease; }
.sc-share-btn:hover, .sc-pnf-btn:hover { background: var(--navy-500, #335C81);
    border-color: var(--navy-500, #335C81); color: #fff; text-decoration: none; }
.sc-share-btn i, .sc-pnf-btn i { font-size: 0.9rem; }

/* Full /card page: a touch larger, balancing the big price number beside them. */
.detail-container .sc-pricerow .sc-share-btn,
.detail-container .sc-pricerow .sc-pnf-btn { font-size: 0.9rem; padding: 0.42rem 0.85rem; }
.detail-container .sc-pricerow .sc-share-btn i,
.detail-container .sc-pricerow .sc-pnf-btn i { font-size: 1.05rem; }
/* iOS / narrow cards: shrink the pair so they stay on the SAME line as the price
   instead of wrapping to a new row (.sc-pricerow is flex-wrap:wrap). Queried on
   the CARD width — .pick.sc is the `mpncard` inline-size container. */
@container mpncard (max-width: 480px) {
    .detail-container .sc-pricerow .sc-share-btn,
    .detail-container .sc-pricerow .sc-pnf-btn { font-size: 0.62rem; padding: 0.24rem 0.5rem; }
    .detail-container .sc-pricerow .sc-share-btn i,
    .detail-container .sc-pricerow .sc-pnf-btn i { font-size: 0.8rem; }
    .detail-container .sc-pricerow .sc-price-actions { gap: 0.3rem; }
}

/* ── Compact cards: the pair on the "Fundamentals, Moving Averages" header row ──
   margin-top:auto pins this row (and its Share button) to the card's BOTTOM
   corner when the grid stretches a card taller than its content (user ask
   2026-07-11: every Share sits bottom-right, elongated neighbour or not). The
   transparent border keeps the old 0.5rem minimum gap when the card is snug —
   a border (not padding) so the absolutely-positioned .sc-more-actions still
   measure their 0.24rem inset from below it. */
.sc-more-row { position: relative; order: 5; margin-top: auto;
    border-top: 0.5rem solid transparent; }
.sc-more-row > .sc-more { order: 0; margin-top: 0; }
/* Reserve room on the right so the label never runs UNDER the absolute buttons,
   sized to the pair actually shown: P&F + Share by default, Share alone on
   foreign tickers with no StockCharts P&F (.sc-more-row-solo). The label itself
   stays one line and ellipsises (never wraps) when a card is too narrow. */
.sc-more-row > .sc-more > .sc-more-head { padding-right: 9.25rem;
    white-space: nowrap; overflow: hidden; }
.sc-more-row-solo > .sc-more > .sc-more-head { padding-right: 5.25rem; }
.sc-more-head .sc-more-label { min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
/* The buttons: absolutely pinned to the header row's right, out of flow, so they
   never wrap and hold their spot when the collapsible opens. */
.sc-more-actions { position: absolute; top: 0.24rem; right: 0.7rem;
    margin-left: 0; gap: 0.35rem; }
/* When the Fundamentals collapsible is OPEN, the buttons drop to the
   BOTTOM-right of the expanded section (user ask 2026-07-09) — they'd
   otherwise crowd the summary line above the expanded content. */
.sc-more-row:has(> .sc-more[open]) .sc-more-actions { top: auto; bottom: 0.24rem; }
/* …and the open section reserves a strip below its content for that pinned
   pair, so the last moving-average row can never run under the Share button
   (it did whenever the MA tiles wrapped into the bottom-right corner). */
.sc-more-row:has(> .sc-more[open]) > .sc-more { padding-bottom: 2rem; }
/* Inside the collapsible the tile rows align LEFT, so a wrapped last row
   (100D/200D) lines up under the row above it instead of centring into the
   reserved Share corner. */
.sc-more .sc-funds .sc-fund-row { justify-content: flex-start; }
.sc-more-actions .sc-share-btn, .sc-more-actions .sc-pnf-btn {
    font-size: 0.66rem; padding: 0.24rem 0.5rem; }
.sc-more-actions .sc-share-btn i, .sc-more-actions .sc-pnf-btn i { font-size: 0.8rem; }

/* Floating Share menu (one shared node on <body>, positioned beside the button). */
.sc-share-menu { position: fixed; z-index: 3200; display: none; min-width: 178px;
    background: var(--surface, #fff); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 12px 34px rgba(27,40,69,.24); padding: 0.35rem; }
.sc-share-menu.open { display: block; }
.sc-share-item { display: flex; align-items: center; gap: 0.6rem; width: 100%;
    background: transparent; border: 0; border-radius: 8px; cursor: pointer;
    padding: 0.55rem 0.6rem; font-size: 0.92rem; font-weight: 700; text-align: left;
    color: var(--ink, #1B2845); transition: background .1s ease; }
.sc-share-item:hover { background: var(--surface-2, #f4f6f9); }
.sc-share-item i { font-size: 1.2rem; color: var(--ink-soft, #6b7280); }
/* "Share image" second-tap states: busy while the server renders the PNG,
   ready when the next tap hands it straight to the share sheet. Theme tokens
   only → correct in dark mode; state is shown by label + icon swap (no
   colour-only cue, and no underline — site rule). */
.sc-share-item.sc-busy { opacity: 0.55; cursor: progress; }
.sc-share-item.sc-busy i { animation: sc-share-pulse 1s ease-in-out infinite; }
@keyframes sc-share-pulse { 50% { opacity: 0.25; } }
.sc-share-item.sc-ready i { color: var(--ink, #1B2845); }

/* ── "Share image" off-screen shot ──────────────────────────────────────────
   The trimmed clone card_share.js rasterises. Kept a plain card (no lifted
   shadow, which html-to-image would clip) with a small timestamp caption. */
/* No card border: the card outline (.pick.sc border) is what put a vertical line
   down each side beside the date; the header gradient + content define the card. */
.sc-shot { box-shadow: none !important; transform: none !important; margin: 0 !important;
    border: none !important; }
/* Date caption inside the card, its only rule a horizontal divider above it (no
   side border now, so nothing flanks it). Separate font props so
   font-family:inherit applies (the `font` shorthand treated a trailing `inherit`
   as a bogus family -> default serif). Smaller, same inherited font. */
.sc-shot-cap { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--line, #e5e8ee);
    font-family: inherit; font-weight: 600; font-size: 0.6rem; line-height: 1.3;
    letter-spacing: 0; color: var(--ink-soft, #8a94a6); text-align: center; }
/* A touch more compact than the live card so long chips never clip and the
   whole card reads at a glance. `#cards-area …` (an ID) outweighs `.sc-shot …`,
   so these need !important. */
.sc-shot .sc-badge { font-size: 0.72rem !important; padding: 0.24rem 0.6rem !important;
    /* grow to fill the row, but NEVER shrink — a chip too wide for the row wraps
       to its own full-width line (e.g. the long Trend stack) instead of being
       squeezed until its nowrap text spills past the card edge. Font up +
       vertical padding down (2026-07-09): the text FILLS the pill instead of
       floating in it, while the pill height stays roughly the same. */
    flex: 1 0 auto !important; }
/* Corner 🏆 + warning flag read at the SAME size as the ticker box beside
   them (1.2rem text + 0.3rem padding ≈ 2rem visual height). */
.sc-shot .sc-corner-trophy { font-size: 2rem !important; }
.sc-shot .sc-corner-flag { font-size: 1.7rem !important; }
/* Header reads as ONE tight stack (2026-07-09): sector · industry sits just
   above the header's bottom rule, the company name just above it, and the
   ticker/trophy/flag row just above the name — no dead air between rows.
   The air was font LEADING, not just the flex gap: clamp the line-heights. */
.sc-shot .sc-head { gap: 0.22rem !important; padding-bottom: 0.28rem !important; }
/* Name sits LOW in the stack — hugging the sector line below it (the ticker
   row keeps a little air above the name instead). The tightness comes from
   NEGATIVE MARGINS, not a squeezed line-height: .sc-title overflow:hidden
   (the ellipsis machinery) was CLIPPING the g/y descenders at line-height
   1.05 — keep the line box roomy (1.2 + a whisker of clip padding) and pull
   the sector row up over the spare leading instead. */
.sc-shot .sc-head .sc-sub { margin-top: -0.34rem !important; }
/* BOTH the title and its inner link clip overflow (the ellipsis machinery) —
   pad BOTH clip boxes past the descender depth (≈0.22em for 800-weight PJS)
   and cancel the growth with matching negative margins, so the g/y tails
   render while the stack stays tight. */
.sc-shot .sc-head .sc-title,
.sc-shot .sc-head .sc-title a { padding-bottom: 0.25em !important; margin-bottom: -0.25em !important; }
.sc-shot .sc-head .sc-title { line-height: 1.2 !important; }
.sc-shot .sc-head .sc-sector { line-height: 1.1 !important; }
.sc-shot .sc-indexes > .sc-index { font-size: 0.82rem !important; }
.sc-shot .sc-indexes-more .sc-index { font-size: 0.56rem !important; }
/* Even vertical rhythm down the chips: the row-gap between the Ribbon / Trend /
   Signal rows matches the gap above the Ribbon (the block's top padding). */
.sc-shot .sc-verdict { row-gap: 0.48rem !important; column-gap: 0.3rem !important; }
/* MPN Long "n/a" renders in a smaller font — reserve a full value line so its
   tile stays the SAME height as MPN Short/SCTR (mirrors the /card page rule). */
.sc-shot .sc-key-v { min-height: 2.52rem;
    display: flex; align-items: center; justify-content: center; }
/* A little breathing room above the MPN tiles, and hold them off the card edge.
   (2026-07-09: trimmed — the chips-to-tiles run read as dead air.) */
.sc-shot .sc-mpn-grid { margin-top: 0.1rem !important; padding-top: 1rem !important;
    padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
/* Emoji sit centred on the text they ride beside, and the price's currency flag
   gets air before the 1-day move. */
.sc-shot img.emoji { vertical-align: middle !important; }
.sc-shot .sc-price img.emoji { margin-right: 0.34rem !important; }

/* "Link copied" toast (one shared node on <body>). */
.sc-share-toast { position: fixed; z-index: 3300; left: 50%; bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    background: #1B2845; color: #fff; font-size: 0.9rem; font-weight: 600;
    padding: 0.6rem 1rem; border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.3);
    opacity: 0; pointer-events: none; max-width: 90vw;
    transition: opacity .18s ease, transform .18s ease; }
.sc-share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }