/* ==========================================================================
   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
     H. the sidebar's card launchers (includes/share_card_sidebar.php, 8 Oct 2026)
   ========================================================================== */

/* ==========================================================================
   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; }
/* The chips themselves, the Filters panel, its season pill and Reset: the site's filter
   standard (themes/default/css/filters-std.css, owner 7 Oct 2026). */
.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:not([hidden]))) { 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:not([hidden]))) > 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:not([hidden])))::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:not([hidden]))) > .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:not([hidden]))) > .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:not([hidden]))) .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; }
}

/* ==========================================================================
   H. The sidebar (8 Oct 2026; includes/share_card_sidebar.php, #scAside): Quick Cards,
      Recent Results, Players in Form, Milestones in Reach, How to Share, then Explore.
      My Benfica's panels and THE row (edge to edge via mybenfica-modern.css), icons in the
      site gold, two lines per row on every width; the card on show is lit.
      Plus the instant season filter's hidden states (a chip, the chip group, Reset).
   ========================================================================== */
.sc-page .sc-chips[hidden], .sc-page .fx-chip[hidden], .sc-page .fx-reset[hidden] { display: none !important; }
#scAside > .bn-panel { flex-shrink: 0; }
#scAside .scs-panel { padding-bottom: 0; }
#scAside .scs-panel h3 { margin-bottom: .55rem; }
#scAside .scs-panel > .mb-rows:last-child > .mb-row:last-child { padding-bottom: .6rem; }
#scAside .scs-row .mb-row-vis { width: 2rem; height: 2rem; }
#scAside .scs-row .mb-row-vis img.scs-crest, #scAside .scs-row .mb-row-vis .scs-crest { width: 1.75rem !important; height: 1.75rem !important; object-fit: contain; }
#scAside .scs-row .mb-row-meta i { margin-right: .3rem; color: var(--theme-accent, var(--mb-accent)); font-size: .9em; }
#scAside .scs-ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: rgba(var(--mb-accent-rgb), .16); color: var(--theme-accent, var(--mb-accent)); font-size: .85rem; }
/* The card on show: a tint and the club-red edge, like a picked row elsewhere. */
#scAside .scs-row.is-on { background: linear-gradient(90deg, rgba(var(--mb-primary-rgb), .1), transparent 80%); box-shadow: inset 3px 0 0 var(--mb-primary); }
[data-bs-theme="dark"] #scAside .scs-row.is-on { background: linear-gradient(90deg, rgba(var(--mb-primary-rgb), .22), transparent 80%); }
#scAside .scs-row.is-on .mb-row-title { color: var(--mb-primary-ink); }
#scAside .scs-foot { margin-top: 0; padding: .5rem 0 .7rem; border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
#scAside .scs-foot .mb-foot-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#scAside .scs-foot .mb-more { flex: 0 0 auto; }
#scAside .scs-foot .mb-more i { color: var(--theme-accent, var(--mb-accent)); }

/* Side values: a number over its unit, a number over a bar, a date chip, a score square. */
#scAside .scs-n { display: inline-flex; align-items: baseline; gap: .2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
#scAside .scs-n b { color: var(--mb-ink); font-size: .95rem; font-weight: 900; }
#scAside .scs-n small { color: var(--mb-muted); font-size: .66rem; font-weight: 800; }
#scAside .scs-prog { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .22rem; width: 3.3rem; }
#scAside .scs-prog-n { line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
#scAside .scs-prog-n b { color: var(--mb-ink); font-size: .9rem; font-weight: 900; }
#scAside .scs-prog-n small { margin-left: .12rem; color: var(--mb-muted); font-size: .62rem; font-weight: 800; }
#scAside .scs-bar { position: relative; display: block; width: 100%; height: .3rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
#scAside .scs-bar > i {
    position: absolute; inset: 0 auto 0 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--mb-primary), color-mix(in oklab, var(--mb-primary) 55%, var(--mb-accent)));
    transition: width .9s var(--mb-ease);
}
#scAside .scs-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
#scAside .scs-score { min-width: 2.5rem; border-radius: .25rem; }
#scAside .scs-score.is-d { background: var(--theme-draw, #c7ccd1); color: var(--theme-draw-ink, #1b1b1b); }

/* How to Share: each row's own action on its right; Post / Story light up as the format. */
#scAside .scs-act { gap: .3rem; padding: .22rem .6rem; font-family: inherit; font-size: .72rem; cursor: pointer; white-space: nowrap; }
#scAside .scs-act i { color: var(--theme-accent, var(--mb-accent)); }
#scAside .scs-act.is-icon { width: 2rem; height: 1.75rem; padding: 0; }
#scAside .scs-act.is-icon > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#scAside .scs-act[data-sc-use-format] i { display: none; }
#scAside .scs-act.is-on { background: var(--mb-primary); border-color: transparent; color: var(--mb-on); }
#scAside .scs-act.is-on i { display: inline; color: inherit; }
#scAside .scs-act.is-done { border-color: rgba(var(--mb-ok-rgb), .45); background: rgba(var(--mb-ok-rgb), .12); color: var(--mb-ok-ink); }
#scAside .scs-act.is-done i { color: inherit; }
#scAside .scs-act.is-failed i { color: var(--mb-bad-ink); }
/* The is-done label swap must not widen an icon button. */
#scAside .scs-act.is-icon.is-done > span, #scAside .scs-act.is-icon.is-failed > span { position: absolute; }

@media (max-width: 379.98px) {
    #scAside .scs-when { display: none; }
    #scAside .scs-prog { width: 2.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    #scAside .scs-bar > i { transition: none !important; }
}