/* "Add this to your site" card (_includes/embed-card.njk, js/embed.js) on team, league and match
   pages. The mini widget rules are the widgets page's (.wg in pages/widgets.css), scoped to the card. */
.emb { display: grid; gap: 24px; align-items: center; padding: 24px 20px; border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; }
.emb > * { min-width: 0; }
.emb-txt { display: grid; gap: 12px; justify-items: start; }
.emb-kick { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.emb h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.emb-txt > p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--steel); max-width: 520px; }
.emb-txt > .emb-fine { font-size: 13.5px; }
.emb .btn { margin-top: 4px; }
.emb-pv { position: relative; display: grid; justify-items: center; padding: 18px; border-radius: 14px; background: var(--paper); }
.emb-pv .wg { width: 100%; max-width: 380px; box-shadow: 0 16px 32px -20px rgba(13,19,48,0.35); }
/* The real widget: laid out off-screen until it has drawn, then in place of the preview, its top part. */
.emb-pv .sportstats-widget { display: block; width: 100%; max-width: 380px; }
.emb-pv:not(.emb-on) .sportstats-widget { position: absolute; left: 0; top: 0; visibility: hidden; }
.emb-pv.emb-on .wg { display: none; }
.emb-pv.emb-on { max-height: 340px; overflow: hidden; align-content: start; }
.emb-pv.emb-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; border-radius: 0 0 14px 14px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
@media (min-width: 880px) {
  .emb { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; padding: 32px 36px; }
  .emb h2 { font-size: 30px; }
}

.emb .wg { --acc: #2340F5; --wbg: #FFFFFF; --wtx: #0D1330; --wmut: #5D6680; --wln: #E3E6ED; --wrow: #F6F7FA; background: var(--wbg); color: var(--wtx); border: 1px solid var(--wln); border-radius: 14px; overflow: hidden; font-size: 13.5px; line-height: 1.4; text-align: left; }
.emb .wg-hd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--acc); color: #FFFFFF; }
.emb .wg-title { font-weight: 800; font-stretch: 110%; font-size: 13.5px; white-space: nowrap; }
.emb .wg-comp { margin-left: auto; font-size: 12px; font-weight: 650; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb .wg-rows { list-style: none; margin: 0; padding: 0; }
.emb .wg-rows li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--wln); }
.emb .wg-rows li:first-child { border-top: 0; }
.emb .wg-min { font-size: 12px; font-weight: 800; color: var(--acc); }
.emb .wg-t { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb .wg-t.r { text-align: right; }
.emb .wg-sc { font-stretch: 72%; font-weight: 800; font-size: 17px; padding: 1px 8px; border-radius: 6px; background: var(--wrow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.emb .wg-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.emb .wg-tbl th { text-align: left; font-size: 11px; font-weight: 700; color: var(--wmut); padding: 8px 14px 6px; }
.emb .wg-tbl td { padding: 8px 14px; border-top: 1px solid var(--wln); }
.emb .wg-tbl .n { text-align: right; width: 44px; }
.emb .wg-tbl .pos { width: 34px; color: var(--wmut); font-weight: 700; }
.emb .wg-tbl td.t { font-weight: 650; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb .wg-fx li { grid-template-columns: 64px minmax(0, 1fr); }
.emb .wg-fx .when { font-size: 12px; font-weight: 700; color: var(--wmut); line-height: 1.3; }
.emb .wg-fx .vs { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.emb .wg .hi td, .emb .wg li.hi { background: #EEF1FF; }
.emb .wg-ft { padding: 8px 14px; border-top: 1px solid var(--wln); font-size: 11px; color: var(--wmut); text-align: right; }
.emb .wg-ft b { color: var(--wtx); font-weight: 750; }

/* The basic league page's own widget box (league-page.njk #widget): same live swap, no extra frame. */
.box .emb-pv { padding: 0; background: none; justify-items: start; }
.box .emb-pv .sportstats-widget { max-width: 420px; }