/* Spotlight Stock Market live widgets (beam.js) on /investors/share/.
   The widgets render into the light DOM and expose their own custom
   properties, so they are themed through those variables rather than by
   overriding their internals - an internal class rename upstream then
   changes nothing here. */

/* Live quote, beside the price graph */
/* Both columns stretch to the row height, which the graph sets, so the quote
   card and the graph card end flush with each other. */
/* Spotlight's graph page draws its chart responsively up to roughly 650px and
   then stops, so an oversized column leaves grey to the right of the chart.
   Two equal columns keep the chart filling its card at desktop widths. */
.share-live-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.share-live-quote{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);padding:26px 24px 22px;box-shadow:0 28px 70px rgba(32,32,31,.08)}
/* The graph fills its white card edge to edge instead of sitting inside a
   10px frame. 440px is the graph page's own content height, so there is no
   dead white inside the frame; the quote card sets the taller row height and
   the graph is centred in what is left. */
.share-live-row .spotlight-frame-wrap{display:flex;align-items:center;padding:0}
.share-live-row .spotlight-frame-wrap iframe.spotlight-graph{height:440px;min-height:0}
.share-live-quote .spotlight-live-label{margin:0 0 20px}
.share-live-quote right-now-widget{display:block;min-width:0;padding:0;border:0;border-radius:0;background:none;
  --sl-rn-bg:transparent;
  --sl-rn-fg:var(--ink);
  --sl-rn-muted:var(--muted);
  --sl-rn-border:transparent;
  --sl-rn-up:#1f7a4d;
  --sl-rn-down:#b4341f;
  --sl-rn-radius:0;
  --sl-rn-font:var(--sans)}
/* The widget prints its own uppercase "Right now / Finepart" heading; the card
   already carries that label, so the duplicate is hidden rather than removed. */
.share-live-quote .sl-rn__title{display:none}
.share-live-quote .sl-rn__row{padding:7px 0;border-bottom:1px solid var(--line);border-radius:0}
.share-live-quote .sl-rn__row:last-of-type{border-bottom:0}
.share-live-quote .sl-rn__label{font-size:.875rem}
.share-live-quote .sl-rn__value{font-weight:600}
.share-live-quote .sl-rn__row--price .sl-rn__value{font:600 1.5rem/1 var(--display);letter-spacing:-.03em}
.share-live-quote .sl-rn__stamp,.share-live-quote .sl-stamp{font-size:.8125rem;color:var(--muted)}
/* margin-top:auto pins the link to the bottom of the now-taller card. */
.share-live-quote>a{display:inline-block;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:.875rem;font-weight:700;border-bottom:0}

/* Ten largest shareholders, inside the dark ownership section */
.spotlight-live-owners largest-owners{display:block;border:0;border-radius:0;
  --sl-lo-bg:#fff;
  --sl-lo-fg:var(--ink);
  --sl-lo-muted:var(--muted);
  --sl-lo-border:var(--line);
  --sl-lo-radius:0;
  --sl-lo-font:var(--sans)}
/* Same reason as above: the section heading already says what this table is. */
.spotlight-live-owners .sl-lo__head{display:none}
.spotlight-live-owners .sl-lo__table th,.spotlight-live-owners .sl-lo__table td{padding:11px 16px}
.spotlight-live-owners .sl-lo__table thead th{font-size:.75rem;letter-spacing:.09em}
.spotlight-live-owners .sl-lo__table tbody tr:last-child td{border-bottom:0}
.spotlight-live-owners .sl-lo__table td:first-child{font-weight:600}
/* The section sets .spotlight-source-link to white for the dark background.
   This link sits on the white card instead, so it has to out-specify that. */
.spotlight-owners .spotlight-live-owners>a.spotlight-source-link{display:block;margin:0;padding:18px 16px;
  border-top:1px solid var(--line);border-bottom:0;font-size:.875rem;font-weight:700;color:var(--ink)}

@media(max-width:950px){
  .share-live-row{grid-template-columns:1fr}
  .share-live-quote{max-width:430px}
  /* Stacked, the graph page lays its chart out taller. */
  .share-live-row .spotlight-frame-wrap iframe.spotlight-graph{height:520px}
}
@media(max-width:560px){
  .share-live-quote{padding:22px 18px 18px}
  .spotlight-live-owners .sl-lo__table th,.spotlight-live-owners .sl-lo__table td{padding:9px 12px}
}