/* ==========================================================================
   Share Card (share_card.php) — the My Benfica standard (Oct 2026)
   --------------------------------------------------------------------------
   Linked by share_card.php after mybenfica-modern.css + content-modern.css
   (cmStyles()); the page carries .mb-modern.cm-page.sc-page, so the card
   frame (.mb-box), THE row, the switch (.mb-seg), pills, chips, icon tiles
   and the phone head rules come from those files. This file adds only what
   the page owns, scoped to .sc-page and the hero's .cmh--share, reading the
   --mb-* tokens so light, dark and every skin follow:
     A. hero badge   B. the preview stage + frame + motion   C. actions
     D. card details (rows, tiles, tables, the Benfictle grid)
     E. head chips + the sidebar Filters / Explore   F. phones   G. reduced motion
   ========================================================================== */

/* ==========================================================================
   A. Hero: a crest sits whole on a white plate; a face fills its badge.
   ========================================================================== */
/* A crest sits straight on the hero's glass tile, never on a white disc or tile (owner, 7 Oct
   2026: "does not look right"): breathing room and a soft shadow, like the other page heroes. */
.cmh.cmh--share .cmh-badge.is-img { background: rgba(255, 255, 255, .14); padding: .55rem; }
.cmh.cmh--share .cmh-badge.is-img img { object-fit: contain; border-radius: 0; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }
body:has(.sc-page--player, .sc-page--manager) .cmh.cmh--share .cmh-badge.is-img { padding: 0; background: rgba(255, 255, 255, .14); }
body:has(.sc-page--player, .sc-page--manager) .cmh.cmh--share .cmh-badge.is-img img { object-fit: cover; object-position: 50% 14%; border-radius: inherit; }
.cmh.cmh--share .cmh-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   B. Preview: the card on a dotted stage, its size chip, the loading shimmer,
      the entrance and the redraw pulse when the style or format changes.
   ========================================================================== */
.sc-page .mb-box.sc-studio { padding: 0; }
.sc-page .sc-stage {
    position: relative;
    display: grid; place-items: center;
    min-height: 14rem; padding: 2.2rem 1rem 1.4rem;
    background:
        radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--mb-ink) 10%, transparent) 1px, transparent 0) 0 0 / 14px 14px,
        linear-gradient(180deg, var(--mb-soft), color-mix(in oklab, var(--mb-soft) 55%, var(--mb-card-bg)));
}
.sc-page .sc-size {
    position: absolute; top: .6rem; left: .7rem;
    display: inline-flex; align-items: center;
    padding: .12rem .55rem; border: 1px solid var(--mb-ring); border-radius: 999px;
    background: var(--mb-card-bg); color: var(--mb-muted);
    font-size: .64rem; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sc-page .sc-frame {
    position: relative; display: inline-block; line-height: 0;
    border-radius: 1rem; overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .08);
}
.sc-page .sc-frame[data-theme="light"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 18px 40px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06); }
.sc-page .sc-frame.is-story { border-radius: 1.1rem; }
.sc-page #scCanvas {
    display: block; width: auto; height: auto;
    max-width: min(27rem, calc(100vw - 4.5rem));
    max-height: min(68vh, 36rem);
    transition: opacity .25s ease;
}
.sc-page .sc-shimmer { display: none; }
.sc-page .sc-frame.is-loading #scCanvas { opacity: .45; }
.sc-page .sc-frame.is-loading .sc-shimmer {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%) 0 0 / 220% 100%;
    animation: scShimmer 1.15s linear infinite;
}
.sc-page .sc-frame.is-ready { animation: scIn .5s var(--mb-ease) both; }
.sc-page .sc-frame.is-swap { animation: scSwap .34s var(--mb-ease) both; }
@keyframes scShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes scIn { from { opacity: 0; transform: translateY(10px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes scSwap { from { opacity: .35; transform: scale(.975); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   C. Actions: Download is the main one (green), then Share / Copy Image / Copy Link.
   ========================================================================== */
.sc-page .sc-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem;
    padding: .7rem .8rem;
    border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
.sc-page .mb-pill.sc-act { padding: .4rem .95rem; cursor: pointer; }
.sc-page .mb-pill.sc-act[hidden] { display: none; }
.sc-page .mb-pill.sc-act i { color: var(--theme-accent, var(--mb-accent)); }
.sc-page .mb-pill.sc-act.cm-pill-go i { color: inherit; }
.sc-page .mb-pill.sc-act.is-done { border-color: rgba(var(--mb-ok-rgb), .45); background: rgba(var(--mb-ok-rgb), .12); color: var(--mb-ok-ink); }
.sc-page .mb-pill.sc-act.is-done i { color: inherit; }
.sc-page .mb-pill.sc-act.is-failed { color: var(--mb-bad-ink); }
.sc-page .mb-pill.sc-act.is-done i, .sc-page .mb-pill.sc-act.is-failed i { animation: scPop .3s var(--mb-ease); }
@keyframes scPop { 0% { transform: scale(.5); } 70% { transform: scale(1.18); } 100% { transform: none; } }

/* ==========================================================================
   D. What the card says
   ========================================================================== */
/* Icons in this page's tiles and rows use the site gold (owner, 7 Oct). */
.sc-page .mb-ico--accent { color: var(--theme-accent, var(--mb-accent)); }
.sc-page .sc-goal-ico { color: var(--theme-accent, var(--mb-accent)); font-size: .8rem; }
.sc-page .sc-logo { display: grid; place-items: center; width: 2rem; height: 2rem; }
.sc-page .sc-logo img { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.sc-page .sc-face {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 2rem; height: 2rem; border-radius: 50%;
    background-color: var(--mb-soft-2); background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px var(--mb-ring);
}
.sc-page .sc-face.is-empty { color: var(--mb-muted); font-size: .8rem; }
.sc-page .sc-face--sm { width: 1.75rem; height: 1.75rem; }
.sc-page .sc-num, .sc-page .sc-val { font-variant-numeric: tabular-nums; }
.sc-page .sc-val { font-size: .95rem; font-weight: 900; }
.sc-page .sc-row-cd .mb-cd { color: var(--mb-ink); }
.sc-page .sc-row-cd .mb-cd--inline .mb-cd-cell b { font-size: .8rem; }

/* More Stats: two-line tiles (My Benfica's sidebar tile values). */
.sc-page .mb-box.sc-tiles-box { padding: .55rem; }
.sc-page .sc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.4rem), 1fr)); gap: .45rem; margin: 0; padding: 0; list-style: none; }
.sc-page .sc-tiles li { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .1rem; min-width: 0; padding: .4rem .55rem; border-radius: .6rem; background: var(--mb-soft); animation: scRise .4s var(--mb-ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
.sc-page .sc-tiles span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.sc-page .sc-tiles b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
@keyframes scRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Tables (By Season, Head to Head): rows run edge to edge in their card. */
.sc-page .mb-box.sc-table-box { padding: 0; }
.sc-page .sc-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; }
.sc-page .sc-table thead th {
    padding: .5rem .45rem; background: var(--mb-soft);
    border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
    color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; white-space: nowrap;
}
.sc-page .sc-table tbody th, .sc-page .sc-table tbody td {
    padding: .5rem .45rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
    color: var(--mb-ink); font-weight: 700; text-align: center; white-space: nowrap;
}
.sc-page .sc-table tbody tr:last-child > * { border-bottom: 0; }
.sc-page .sc-table :is(thead, tbody) :is(th, td):first-child { padding-left: .8rem; text-align: left; }
.sc-page .sc-table :is(thead, tbody) :is(th, td):last-child { padding-right: .8rem; }
.sc-page .sc-table tbody th { font-weight: 800; }
.sc-page .sc-table tbody tr { transition: background-color .18s ease; }
.sc-page .sc-table tbody tr:hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); }
.sc-page .sc-table tbody th a { color: var(--mb-ink); text-decoration: none; }
.sc-page .sc-table tbody th a:hover { color: var(--mb-primary-ink); text-decoration: underline; }
.sc-page .sc-table tbody tr.is-on { background: rgba(var(--mb-primary-rgb), .07); box-shadow: inset 3px 0 0 var(--mb-primary); }
.sc-page .sc-table tbody tr.is-on th a { color: var(--mb-primary-ink); }
[data-bs-theme="dark"] .sc-page .sc-table tbody tr.is-on { background: rgba(var(--mb-primary-rgb), .18); }
.sc-page .sc-h2h thead th { vertical-align: bottom; }
.sc-page .sc-h2h-who { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; max-width: 7rem; }
.sc-page .sc-h2h-who > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--mb-ink); font-size: .72rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
.sc-page .sc-h2h td.is-best span { color: var(--mb-primary-ink); font-weight: 900; }
.sc-page .sc-h2h td i { margin-left: .3rem; color: var(--theme-accent, var(--mb-accent)); font-size: .7rem; }

/* Benfictle: the guesses as squares, arrows for higher / lower. */
.sc-page .mb-box.sc-bfl-box { padding: .9rem .8rem .7rem; }
.sc-page .sc-bfl-grid { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.sc-page .sc-bfl-row { display: flex; gap: .35rem; animation: scRise .4s var(--mb-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.sc-page .sc-bfl-cell {
    display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .5rem;
    background: var(--mb-soft-2); color: var(--mb-ink); font-size: .95rem; font-weight: 900;
}
.sc-page .sc-bfl-cell.is-g { background: var(--mb-ok); color: #fff; }
.sc-page .sc-bfl-key { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; margin-top: .75rem; padding-top: .55rem; border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent); color: var(--mb-muted); font-size: .7rem; font-weight: 700; }
.sc-page .sc-bfl-key > span { display: inline-flex; align-items: center; gap: .35rem; }
.sc-page .sc-bfl-dot { display: inline-grid; place-items: center; width: .95rem; height: .95rem; border-radius: .25rem; background: var(--mb-soft-2); color: var(--mb-ink); font-size: .6rem; font-style: normal; font-weight: 900; }
.sc-page .sc-bfl-dot.is-g { background: var(--mb-ok); }

/* Nothing to share: the card makers as tiles. */
.sc-page .sc-make .mb-tile { animation: scRise .4s var(--mb-ease) both; animation-delay: calc(var(--i, 0) * 35ms); }

/* ==========================================================================
   E. Active-filter chips in the Preview head; the sidebar's Filters + Explore.
   ========================================================================== */
.sc-page .sc-chips { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; gap: .3rem; min-width: 0; }
.sc-page .fx-chip {
    display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; height: var(--bn-ctl-h, 1.875rem); box-sizing: border-box;
    padding: 0 .5rem 0 .6rem; border: 1px solid rgba(var(--mb-primary-rgb), .25); border-radius: 999px;
    background: rgba(var(--mb-primary-rgb), .08); color: var(--mb-ink);
    font-size: .72rem; font-weight: 800; text-decoration: none; white-space: nowrap;
    transition: background-color .2s ease;
}
.sc-page .fx-chip:hover { background: rgba(var(--mb-primary-rgb), .14); color: var(--mb-ink); }
.sc-page .fx-chip > i:first-child { color: var(--theme-accent, var(--mb-accent)); font-size: .8em; }
.sc-page .fx-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-page .fx-chip-x { color: var(--mb-muted); font-size: .75em; }

.benfica-layout.sc-page .bn-aside .sc-filter-panel { padding-bottom: .75rem; }
.sc-page .sc-filter-panel h3 .sc-reset-wrap { order: 10; flex: 0 0 auto; margin-left: -.4rem; display: inline-flex; }
.sc-page .sc-filter-panel h3 .sc-reset { color: var(--mb-primary-ink); font-size: .74rem; font-weight: 800; text-decoration: none; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.sc-page .sc-filter-panel h3 .sc-reset:hover { text-decoration: underline; }
.sc-page .sc-filter-list { display: flex; flex-direction: column; gap: .4rem; }
.sc-page .sc-filter-list .cm-picker-wrap { display: block; width: 100%; }
.sc-page .sc-filter-list .cm-picker { display: flex; width: 100%; max-width: none; padding: .38rem .8rem; font-size: .74rem; }
.sc-page .sc-filter-list .cm-picker > i { color: var(--theme-accent, var(--mb-accent)); }
.sc-page .sc-filter-list .cm-picker-txt { flex: 1 1 auto; text-align: left; }
.sc-page .sc-filter-list .cm-picker-menu { width: 100%; min-width: 0; max-height: 18rem; }
.benfica-layout.sc-page #scAside .bn-cta .bn-cta-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.benfica-layout.sc-page #scAside .bn-cta .bn-cta-links a {
    margin: 0; padding: .3rem .55rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .72rem; box-shadow: none;
}

/* ==========================================================================
   F. Phones
   ========================================================================== */
@media (max-width: 767.98px) {
    .sc-page .sc-stage { padding: 2.1rem .6rem 1rem; min-height: 12rem; }
    .sc-page .sc-chips .fx-chip-txt { max-width: 6rem; }
}
@media (max-width: 575.98px) {
    /* Two even rows: Download | Share, Copy Image | Copy Link (Copy Link takes the row
       alone where the browser cannot copy a picture). */
    .sc-page .sc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; padding: .6rem; }
    .sc-page .mb-pill.sc-act { min-width: 0; padding: .38rem .6rem; }
    .sc-page .mb-pill.sc-act > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .sc-page .sc-actions:has(> #scCopyImg[hidden]) > #scCopy { grid-column: 1 / -1; }
    .sc-page .sc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 439.98px) {
    /* The Preview head's two switches share the row under the title evenly. */
    body .benfica-layout.mb-modern.cm-page.sc-page .bn-section > .bn-section-head > .bn-head-actions > .mb-seg.sc-seg { flex: 1 1 0 !important; }
    .sc-page .sc-table { font-size: .78rem; }
    .sc-page .sc-table :is(thead, tbody) :is(th, td) { padding-left: .3rem; padding-right: .3rem; }
    .sc-page .sc-table :is(thead, tbody) :is(th, td):first-child { padding-left: .7rem; }
    .sc-page .sc-table :is(thead, tbody) :is(th, td):last-child { padding-right: .7rem; }
    .sc-page .sc-bfl-cell { width: 2rem; height: 2rem; }
}
/* Owner rule (7 Oct): head buttons stay on the title row whenever they fit. "Preview" + the
   two icon switches fit from 380px up, so content-modern.css's under-440 drop is undone
   here; with an active-filter chip the head is too full and still drops. */
@media (min-width: 380px) and (max-width: 439.98px) {
    body .benfica-layout.mb-modern.cm-page.sc-page #sc-preview > .bn-section-head:not(:has(.sc-chips)) { flex-wrap: nowrap !important; gap: .6rem !important; }
    body .benfica-layout.mb-modern.cm-page.sc-page #sc-preview > .bn-section-head:not(:has(.sc-chips)) > h2 { flex: 0 0 auto !important; white-space: nowrap !important; }
    body .benfica-layout.mb-modern.cm-page.sc-page #sc-preview > .bn-section-head:not(:has(.sc-chips))::after { display: block !important; flex: 1 1 0 !important; min-width: .5rem !important; }
    body .benfica-layout.mb-modern.cm-page.sc-page #sc-preview > .bn-section-head:not(:has(.sc-chips)) > .bn-head-actions { flex: 0 0 auto !important; order: 10; margin-left: 0 !important; }
    body .benfica-layout.mb-modern.cm-page.sc-page #sc-preview > .bn-section-head:not(:has(.sc-chips)) > .bn-head-actions > .mb-seg.sc-seg { flex: 0 0 auto !important; }
    body .benfica-layout.mb-modern.cm-page.sc-page #sc-preview > .bn-section-head:not(:has(.sc-chips)) .mb-seg-btn { padding: .26rem .5rem; }
}
@media (max-width: 379.98px) {
    .sc-page .sc-size { font-size: .6rem; }
    .sc-page .sc-h2h-who > span:last-child { max-width: 3.6rem; }
}

/* ==========================================================================
   G. Reduced motion: the card and the tiles appear in place.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .sc-page .sc-frame.is-ready, .sc-page .sc-frame.is-swap, .sc-page .sc-frame.is-loading .sc-shimmer,
    .sc-page .sc-tiles li, .sc-page .sc-bfl-row, .sc-page .sc-make .mb-tile,
    .sc-page .mb-pill.sc-act i { animation: none !important; }
    .sc-page #scCanvas, .sc-page .sc-table tbody tr { transition: none !important; }
}

/* Hero tiles on phones: the shared page-hero block drops the stat's right padding, so a
   word value ("4-2-3-1", a coach, a member) ran under the tile's icon: it now stops with
   an ellipsis clear of the icon. */
@media (max-width: 767.98px) {
    .cmh.cmh--share .pv2-stat-num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: .75rem; }
}

/* The eight card makers: 4 x 2 on wide screens, 2 x 4 below (never a short last row). */
.sc-page .mb-zone.sc-make { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .sc-page .mb-zone.sc-make { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sc-page .mb-zone.sc-make { grid-template-columns: minmax(0, 1fr); } }

/* Head to Head on phones: four players fit the width — fixed columns, the best value as a
   tinted chip instead of value + crown, names cut with an ellipsis under the face. */
@media (max-width: 575.98px) {
    .sc-page .sc-h2h { table-layout: fixed; }
    .sc-page .sc-h2h thead th:first-child { width: 24%; }
    .sc-page .sc-h2h td i { display: none; }
    .sc-page .sc-h2h td.is-best span { display: inline-block; padding: 0 .3rem; border-radius: .35rem; background: rgba(var(--mb-primary-rgb), .1); }
    [data-bs-theme="dark"] .sc-page .sc-h2h td.is-best span { background: rgba(var(--mb-primary-rgb), .22); }
    .sc-page .sc-h2h-who { max-width: 100%; }
    .sc-page .sc-h2h-who > span:last-child { display: block; }
    .sc-page .sc-h2h thead th { overflow: hidden; }
}
@media (max-width: 439.98px) {
    .sc-page .sc-h2h { font-size: .72rem; }
    .sc-page .sc-h2h thead th:first-child { width: 20%; }
    .sc-page .sc-table.sc-h2h :is(thead, tbody) :is(th, td):not(:first-child) { padding-left: .12rem; padding-right: .12rem; }
    .sc-page .sc-table.sc-h2h :is(thead, tbody) :is(th, td):last-child { padding-right: .45rem; }
    .sc-page .sc-h2h td.is-best span { padding: 0 .15rem; }
    .sc-page .sc-h2h-who > span:last-child { font-size: .62rem; }
}