/* ==========================================================================
   player.php / manager.php to the My Benfica standard (owner, 6 Oct 2026)
   --------------------------------------------------------------------------
   Linked by both pages in the main column (includes/person_side_switch.php psAssets()), so
   soft navigation carries it. Every rule is scoped to .pm-page / .mg-page.
     A. tokens (My Benfica's --mb-* values, as --ps-*)
     B. the side switch in the first section head (.mb-seg look) + the head's layout
     C. the sidebar Tools panel (flat .mb-pill look)
     D. the intro card: the side card floats, the biography wraps; 1rem under the content
   The tab bars themselves are the shared standard top bar in style.css.
   ========================================================================== */

/* A. Tokens */
.benfica-layout:is(.pm-page, .mg-page) {
    --ps-ink: var(--theme-ink, var(--bs-body-color));
    --ps-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --ps-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --ps-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --ps-line: var(--theme-border, var(--bs-border-color));
    --ps-primary: var(--theme-primary, var(--bs-primary));
    --ps-primary-ink: color-mix(in oklab, var(--ps-primary) 80%, var(--ps-ink));
    --ps-on: var(--theme-on-primary, #fff);
    --ps-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
[data-bs-theme="dark"] .benfica-layout:is(.pm-page, .mg-page) {
    --ps-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--bs-tertiary-bg, #1e1e1e));
    --ps-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--bs-tertiary-bg, #1e1e1e));
    --ps-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
}

/* B. The side switch: My Benfica's .mb-seg values (one soft pill group, muted .74rem/800
   labels, the side on screen a solid primary pill). Plain links, never .btn. */
.benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) {
    display: inline-flex; align-items: center; gap: .15rem; padding: .15rem;
    border-radius: 999px;
    background: var(--ps-soft);
    border: 1px solid color-mix(in oklab, var(--ps-line) 70%, transparent);
    max-width: 100%;
}
.benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) .mb-seg-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .62rem;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--ps-muted); font-size: .74rem; font-weight: 800; line-height: 1.3; white-space: nowrap;
    text-decoration: none; box-shadow: none;
    transition: background-color .22s var(--ps-ease), color .2s ease;
}
.benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) .mb-seg-btn i { font-size: .8em; color: inherit; }
.benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) .mb-seg-btn:hover { color: var(--ps-ink); }
.benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) .mb-seg-btn.is-on,
.benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) .mb-seg-btn.is-on:hover { background: var(--ps-primary); color: var(--ps-on); }
.benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) .mb-seg-btn:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 1px; }

/* The head: title (never cut) and the switch on one row while they fit; the switch drops to
   its own row, right-aligned, when they do not. Wins over style.css's phone one-row rule. */
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head { flex-wrap: wrap !important; row-gap: .5rem !important; }
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head > h2 {
    /* capped to the row minus the lead line and icon, so a long title wraps on its own row
       instead of jumping under them; the switch is what drops when room runs out */
    flex: 0 1 auto !important; min-width: 0 !important; max-width: calc(100% - 5rem);
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head > .ps-side-actions { margin-left: auto !important; flex: 0 1 auto !important; max-width: 100%; }
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head > .ps-side-actions ~ .bn-head-actions { margin-left: 0 !important; }
@media (max-width: 767.98px) {
    /* Phones: the side on screen keeps its label, the others are icons (the phone-bar rule);
       the head carries a switch, so the colour rule goes, as on My Benfica. */
    .benfica-layout:is(.pm-page, .mg-page) .ps-side-seg .mb-seg-txt { display: none; }
    .benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) .mb-seg-btn { padding: .26rem .55rem; }
    .benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) .mb-seg-btn.is-on { gap: .35rem; }
    .benfica-layout:is(.pm-page, .mg-page) :is(.ps-side-seg, .ps-seg) .mb-seg-btn.is-on .mb-seg-txt { display: inline; }
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head::after { display: none !important; }
}
@media (max-width: 439.98px) {
    /* Under 440px the switch takes its own full-width row, equal buttons, the labelled
       (selected) side the room it needs. */
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head > .ps-side-actions { flex: 1 0 100% !important; margin-left: 0 !important; justify-content: stretch !important; }
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head > .ps-side-actions > :is(.ps-side-seg, .ps-seg) { flex: 1 1 auto !important; width: 100% !important; justify-content: space-between !important; overflow: visible !important; }
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head > .ps-side-actions > :is(.ps-side-seg, .ps-seg) .mb-seg-btn { flex: 1 1 0 !important; justify-content: center; }
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head > .ps-side-actions > :is(.ps-side-seg, .ps-seg) .mb-seg-btn.is-on { flex: 1 1 auto !important; }
    /* A head with one more control (Breakdown's Compact / Detailed): it sits at the right end
       of the switch's row. */
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head:has(> .ps-side-actions ~ .bn-head-actions) > .ps-side-actions { flex: 1 1 calc(100% - 7rem) !important; }
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head.ps-head > .ps-side-actions ~ .bn-head-actions { margin-left: auto !important; flex: 0 0 auto !important; }
}

/* C. Compare / Share Card: the biography head's controls, top right (owner, 6 Oct 2026). My
   Benfica's flat .mb-pill (1px line, soft fill, 999px, 800 weight, no shadow); style.css sizes
   every head control (30px, .74rem). Icon + label on wide screens, the icon alone on phones. */
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .ps-head-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: 0 .8rem; margin: 0;
    border: 1px solid var(--ps-line); border-radius: 999px;
    background: var(--ps-soft); color: var(--ps-ink);
    font-weight: 800; white-space: nowrap; text-decoration: none; box-shadow: none;
    transition: background-color .2s var(--ps-ease);
}
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .ps-head-pill i { color: var(--ps-primary-ink); font-size: .9em; margin: 0; }
[data-bs-theme="dark"] body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .ps-head-pill i { color: var(--theme-link, var(--ps-ink)); }
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .ps-head-pill:hover { background: var(--ps-soft-2); color: var(--ps-ink); }
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .ps-head-pill:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 2px; }
@media (max-width: 767.98px) {
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .ps-head-pill { width: var(--bn-ctl-h, 1.875rem); padding: 0; gap: 0; }
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .ps-head-pill .ps-head-pill-txt { display: none; }
    /* The head never cuts its title: it wraps in its own box (style.css's phone rule keeps a
       head's title on one line), the colour line and the two icon pills stay beside it. */
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head:has(.ps-head-pill) > h2 {
        flex: 0 1 auto !important; min-width: 0 !important; max-width: calc(100% - 7rem);
        white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    }
}
@media (max-width: 439.98px) {
    /* Below 440px the title keeps the lead line and icon and takes the rest of the first row;
       the colour line and the pills share a row under it, the pills at the right end. */
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head:has(.ps-head-pill) { flex-wrap: wrap !important; row-gap: .4rem !important; }
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head:has(.ps-head-pill) > h2 { flex: 1 1 calc(100% - 4.9rem) !important; max-width: none; }
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head:has(.ps-head-pill)::after { flex: 1 1 0 !important; min-width: .75rem !important; }
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head > .bn-head-actions:has(.ps-head-pill) { order: 10 !important; flex: 0 0 auto !important; margin-left: 0 !important; }
}


/* D. The intro card. The side card (position map, foot, clubs, squad) floats right on a
   wide screen and the biography wraps beside and under it, as manager.php's does, so the
   card no longer stands open under a short biography. Phones: biography, then the card. */
.benfica-layout.pm-page #player-profile .pl-intro::after { content: ""; display: table; clear: both; }
.benfica-layout.pm-page #player-profile .pl-intro-bio > div[style*="word-break"] > :last-child { margin-bottom: .5rem; }
@media (min-width: 768px) {
    .benfica-layout.pm-page #player-profile .pl-intro-side { float: right; max-width: 46%; margin: 0 0 .5rem 1.25rem; }
}
@media (max-width: 767.98px) {
    .benfica-layout.pm-page #player-profile .pl-intro { display: flex; flex-direction: column; gap: 1rem; }
    .benfica-layout.pm-page #player-profile .pl-intro > .pl-intro-bio { order: 1; flex: none; width: 100%; }
    .benfica-layout.pm-page #player-profile .pl-intro > .pl-intro-side { order: 2; }
    .benfica-layout.pm-page #player-profile .pl-intro > .clearfix { display: none; }
    .benfica-layout.pm-page #player-profile .pl-intro::after { display: none; }
    .benfica-layout.pm-page #player-profile .pl-intro-bio > div[style*="word-break"] > :last-child { margin-bottom: 0; }
    .benfica-layout.pm-page #player-profile .pl-intro-side { margin-bottom: .5rem; }
}
/* The side card itself is two columns — the pitch, then the facts stacked beside it — so it is
   about as tall as the pitch rather than pitch + four facts, on every screen. */
.benfica-layout.pm-page #player-profile .player-attrs:has(> .attr-item > .player-position-field) {
    display: grid; grid-template-columns: auto minmax(8.5rem, 13rem); column-gap: 1rem; align-items: start;
}
.benfica-layout.pm-page #player-profile .player-attrs > .attr-item:has(> .player-position-field) {
    grid-column: 1; grid-row: 1 / span 8; border-bottom: 0; padding-bottom: 0 !important;
}
.benfica-layout.pm-page #player-profile .player-attrs:has(> .attr-item > .player-position-field) > .attr-item:not(:has(> .player-position-field)) { grid-column: 2; min-width: 0; }
.benfica-layout.pm-page #player-profile .player-attrs .attr-value { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .benfica-layout.pm-page #player-profile .player-attrs:has(> .attr-item > .player-position-field) { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 379.98px) {
    .benfica-layout.pm-page #player-profile .player-attrs:has(> .attr-item > .player-position-field) { column-gap: .75rem; }
    .benfica-layout.pm-page #player-profile .player-attrs .player-position-field { width: 112px; }
}
/* The card ends 1rem under its content, like a My Benfica panel: on the player card .5rem of it
   is the last paragraph's / the side card's own bottom margin (whichever ends lower), the
   other .5rem the card's padding. */
html body .benfica-layout.pm-page #player-profile > .card > .card-body { padding-bottom: .5rem !important; }
html body .benfica-layout.mg-page #manager-profile > .card > .card-body { padding-bottom: 1rem !important; }
html body .benfica-layout.mg-page #manager-profile > .card > .card-body > :last-child,
html body .benfica-layout.mg-page #manager-profile > .card > .card-body > :last-child > :last-child { margin-bottom: 0 !important; }

/* E. Every head on both pages (owner, 6 Oct 2026: "make sure we use the same style as the rest of
   the website"), all tabs:
   - a title never truncates: it wraps in its own box (style.css's phone rules keep a head title on
     one line, and the player hero's block ellipsed it before the controls);
   - a head button left over (Show more, View All, Show Top, Show Recent) is the flat 30px pill;
   - the count chip next to a title (.mb-h-count) and summary chips (.mb-chip look). */
/* (.bn-main ... :not(.ps-x): outranks the player hero's phone ellipsis rule in style.css.) */
html body .benfica-layout:is(.pm-page, .mg-page) .bn-main .bn-section-head:not(.ps-x) > h2 {
    min-width: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
@media (max-width: 767.98px) {
    html body .benfica-layout:is(.pm-page, .mg-page) .bn-main .bn-section-head:not(.ps-x):has(> .bn-head-actions, > .bn-head-meta) > h2 { flex: 0 1 auto !important; }
}
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .btn:not(.dropdown-item) {
    height: var(--bn-ctl-h, 1.875rem) !important; min-height: 0; box-sizing: border-box;
    display: inline-flex !important; align-items: center; gap: .35rem;
    padding: 0 .8rem !important; margin: 0 !important;
    border: 1px solid var(--ps-line) !important; border-radius: 999px !important;
    background: var(--ps-soft) !important; color: var(--ps-ink) !important;
    font-size: var(--bn-ctl-fs, .74rem) !important; font-weight: 800; line-height: 1.2; box-shadow: none !important;
}
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .btn:not(.dropdown-item) i { color: var(--ps-primary-ink) !important; margin: 0 !important; font-size: .9em; }
[data-bs-theme="dark"] body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .btn:not(.dropdown-item) i { color: var(--theme-link, var(--ps-ink)) !important; }
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .btn:not(.dropdown-item):hover { background: var(--ps-soft-2) !important; color: var(--ps-ink) !important; }
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .btn-group { gap: .4rem; }
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions .btn[hidden] { display: none !important; }
/* The menuizer's folded menu button and an iconified lone button keep the 30px round shape. */
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions.bn-actions-iconified .btn { width: var(--bn-ctl-h, 1.875rem); padding: 0 !important; justify-content: center; font-size: 0 !important; }
html body .benfica-layout:is(.pm-page, .mg-page) .bn-section-head .bn-head-actions.bn-actions-iconified .btn i { font-size: .8rem; }
.benfica-layout:is(.pm-page, .mg-page) .bn-section-head h2 .ps-h-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; margin-left: .35rem; padding: 0 .4rem;
    border-radius: 999px;
    background: rgba(var(--theme-primary-rgb, 200, 16, 46), .1); color: var(--ps-primary-ink);
    font-size: .7rem; font-weight: 900; line-height: 1.35rem; vertical-align: .12em;
    font-variant-numeric: tabular-nums;
}
html body .benfica-layout.pm-page .bn-section-head .bn-head-actions .sqn-summary {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .14rem .55rem; border-radius: 999px;
    background: var(--ps-soft); color: var(--ps-muted);
    font-size: .7rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
html body .benfica-layout.pm-page .bn-section-head .bn-head-actions .sqn-summary b { color: var(--ps-ink); font-weight: 800; }
@media (max-width: 767.98px) {
    /* A non-side switch (Official / With friendlies, Compact / Detailed): icons, the selected
       one keeping its label, as the side switch. */
    .benfica-layout:is(.pm-page, .mg-page) .ps-seg .mb-seg-txt { display: none; }
    .benfica-layout:is(.pm-page, .mg-page) .ps-seg .mb-seg-btn { padding: .26rem .55rem; }
    .benfica-layout:is(.pm-page, .mg-page) .ps-seg .mb-seg-btn.is-on { gap: .35rem; }
    .benfica-layout:is(.pm-page, .mg-page) .ps-seg .mb-seg-btn.is-on .mb-seg-txt { display: inline; }
}