/**
 * Player Props / DFS — page-specific styles.
 * Consolidated from four inline <style> blocks (index.php, ps-header.php,
 * ps-stats-view.php, ps-trend-chart.php) so the /my-dash/ widget versions
 * (which only get body HTML fragments, not <head>) can load them too.
 */
    /* Content wrapper */
    /* Page padding: .content-wrapper.tmb-page in front.css. Only the mobile number differs. */
    .content-wrapper.tmb-page {
        --page-top-mobile: 80px;
    }

    /* Navigation header bar look now comes from the shared .tmb-sport-bar (front.css) */

    /* Autocomplete styling */
    .ui-autocomplete {
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1050 !important;
    }
    .ui-autocomplete .ui-menu-item-wrapper {
        padding: 8px 12px;
    }
    .player-suggestion-team {
        color: var(--tmb-gray-600);
        font-size: 0.85em;
        margin-left: 8px;
    }

    /* Injury badges + headshot injury overlay → extracted to /styles/player-injury-common.css */

    /* Search in header */
    #player-search {
        font-size: 0.85rem;
    }

    /* Player header */
    .player-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 30px;
        margin-bottom: 0;
    }
    .player-header-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .player-header h2 {
        margin-bottom: 0;
    }
    .player-header .team-label {
        color: var(--tmb-gray-600);
        font-size: 1rem;
    }
    /* .player-header and everything else in this file scoped to player_strip/
       prop_bar_table/mlb_pitch_mix/season_stats content is inside .tmb-cq-root
       (see ps-player-header.php / ps-matchup-view.php / ps-stats-view.php —
       each wraps its own output in that class), so these @container rules
       respond to THIS WIDGET'S width on /my-dash/, not just a narrow browser
       viewport. Page-chrome-only rules (.content-wrapper, the nav bar) stay
       plain @media further down since that markup never appears in a widget. */
    @container (max-width: 768px) {
        .player-header {
            flex-direction: row;
            gap: 10px;
            align-items: center;
        }
    }

    /* 50/50 Matchup Layout — CSS Grid + subgrid for row alignment */
    .ps-matchup-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 0 20px;
    }
    .ps-matchup-left, .ps-matchup-right {
        display: grid;
        grid-row: 1 / -1;
        grid-template-rows: subgrid;
        min-width: 0;
    }
    /* Subgrid children must also allow shrinking for overflow-x scroll */
    .ps-matchup-left > *, .ps-matchup-right > * {
        min-width: 0;
        overflow: hidden;
    }
    /* But let the player strips scroll horizontally inside their clipped parent */
    .without-player-strip {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    /* First-visit coachmark for the player strips (TMB.coachmark) */
    .ps-coachmark {
        position: fixed;
        z-index: 90; /* under the slide-out sidebar (#sidebarMenu = 99), above page content */
        max-width: 300px;
        background: #fff;
        border: 1px solid var(--tmb-gray-300);
        border-radius: 10px;
        box-shadow: 0 10px 34px var(--tmb-black-20);
        padding: 14px 16px 12px;
        font-size: 0.85rem;
        line-height: 1.45;
        color: var(--tmb-gray-900);
    }
    .ps-coachmark-body .chip-badge { font-size: 0.6rem; vertical-align: middle; margin: 0 1px; }
    .ps-coachmark-btn {
        margin-top: 10px;
        background: var(--tmb-gray-300);
        color: #000;
        border: 1px solid var(--tmb-gray-400);
        border-radius: 6px;
        padding: 6px 16px;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
    }
    .ps-coachmark-btn:hover { background: var(--tmb-gray-300); }
    /* inset ring so the highlight isn't clipped by the strip's overflow-x scroll */
    .ps-coach-target { box-shadow: inset 0 0 0 2px var(--tmb-bad-6); }
    /* Metered paywall: dark overlay over the gated player view (instead of the modal) */
    #ps-locked-zone.ps-paywall-locked { position: relative; min-height: 320px; }
    .tmb-lock-overlay.ppdfs-lock { align-items: flex-start; padding-top: 70px; }
    .ps-matchup-left {
        grid-column: 1;
    }
    .ps-matchup-right {
        grid-column: 2;
        border-left: 1px solid var(--tmb-gray-300);
        padding-left: 20px;
    }
    @container (max-width: 768px) {
        .ps-matchup-layout {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            gap: 12px;
        }
        .ps-matchup-left, .ps-matchup-right {
            grid-row: auto;
            grid-column: 1;
            display: block;
        }
        .ps-matchup-right {
            border-left: none;
            padding-left: 0;
            border-top: 1px solid var(--tmb-gray-300);
            padding-top: 12px;
        }
    }

    /* Multi-team filter dropdown */
    #team-filter-select {
        border-color: var(--tmb-gray-300);
        color: var(--tmb-gray-700);
    }

    /* Without-player strip + excluded/required states → extracted to /styles/player-injury-common.css */

    /* Stats table */
    .stats-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .stats-table {
        width: 100%;
        font-size: 0.85rem;
    }
    .stats-table thead th {
        position: sticky;
        top: 0;
        background: var(--tmb-gray-900);
        color: #fff;
        text-align: center;
        padding: 6px 8px;
        white-space: nowrap;
        font-weight: 600;
        font-size: 0.78rem;
        z-index: 2;
    }
    .stats-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        min-width: 110px;
    }
    .stats-table tbody td {
        text-align: center;
        padding: 6px 8px;
        white-space: nowrap;
    }
    .stats-table tbody td:first-child {
        position: sticky;
        left: 0;
        background: inherit;
        font-weight: 600;
        text-align: left;
        z-index: 1;
    }
    .stats-table tbody tr:nth-child(odd) { background-color: var(--tmb-gray-100); }
    .stats-table tbody tr:nth-child(even) { background-color: #fff; }
    .stats-table tbody tr:nth-child(odd) td:first-child { background-color: var(--tmb-gray-100); }
    .stats-table tbody tr:nth-child(even) td:first-child { background-color: #fff; }
    .stats-table tbody tr:hover { background-color: var(--tmb-gray-300); }
    .stats-table tbody tr:hover td:first-child { background-color: var(--tmb-gray-300); }

    /* Section headers in table */
    .section-header {
        background-color: var(--tmb-gray-300) !important;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--tmb-gray-700);
    }
    .section-header td { text-align: left !important; padding: 4px 8px !important; }

    /* Loading spinner */
    .loading-spinner {
        text-align: center;
        padding: 3rem;
        display: none;
    }
    .loading-spinner .spinner-border { width: 2rem; height: 2rem; }

    /* No results */
    .no-results {
        text-align: center;
        padding: 2rem;
        color: var(--tmb-gray-600);
    }

    /* Side-by-side chart + matchup table within matchup section.
       The table column is half the row OR the width its table needs,
       whichever is more, and the chart takes what is left (never more than
       half). The table is 525 to 559px by sport and will not shrink, so at
       an even split it ran past its column, and past the page's edge where
       it is cut (html, body are overflow-x: hidden), whenever half the row
       was narrower than that: a row of 992 to about 1120px, which is a
       window of roughly 1040 to 1170px, and the page beside a snapped
       Explore dock on a 1440 screen (4 to 19px of the Projected column). */
    .matchup-body-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
    }
    .matchup-body-row > .matchup-chart-col {
        flex: 1 1 0;
        min-width: 0;
        max-width: 50%;
        display: flex;
        flex-direction: column;
    }
    .matchup-body-row > .matchup-chart-col #trend-chart-section {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .matchup-body-row > .matchup-chart-col #trend-chart-section .card {
        flex: 1;
        display: flex;
        flex-direction: column;
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    /* Single border between chart and table when side-by-side */
    .matchup-body-row > .matchup-table-col .table-bordered {
        border-left: none;
    }
    .matchup-body-row > .matchup-chart-col #trend-chart-section .card .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    /* Canvas must be absolute so it can't inflate the flex container on resize */
    .trend-chart-area {
        overflow: hidden;
        /* Floor so the chart still renders when the sibling .matchup-table-col
           is short and can't stretch the row taller via align-items:stretch —
           e.g. NHL's "select a team" placeholder has no stats table like other
           sports do. !important needed to override the inline min-height:0. */
        min-height: 260px !important;
    }
    .trend-chart-area canvas {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
    .matchup-body-row > .matchup-table-col {
        flex: 0 0 auto;
        width: 50%;
        min-width: min-content;
        max-width: 100%;
    }
    #trend-chart-canvas {
        cursor: crosshair;
    }
    /* The matchup table's wrapper. Side by side, the column is as wide as
       its table (above), so the wrapper clips nothing and the header's
       tooltips drop out of it over the rows. Stacked, it scrolls: see the
       block after the stacked layout's. */
    #matchup-content .table-responsive {
        overflow: visible;
    }
    @container (max-width: 991px) {
        .matchup-body-row > .matchup-chart-col,
        .matchup-body-row > .matchup-table-col {
            flex: 0 0 100%;
            max-width: 100%;
            /* stacked, a column is the row's width as it always was */
            min-width: 0;
        }
        .matchup-body-row > .matchup-chart-col #trend-chart-section .card {
            border-right: 1px solid var(--tmb-black-15);
            border-top-right-radius: .25rem;
            border-bottom-right-radius: .25rem;
        }
        .matchup-body-row > .matchup-table-col .table-bordered {
            border-left: 1px solid var(--tmb-gray-300);
        }
        .matchup-body-row > .matchup-chart-col {
            border-bottom: 1px solid var(--tmb-black-15);
        }
        /* Chart area needs explicit height when stacked (canvas is absolute-positioned).
           !important needed to override inline min-height:0 on the element */
        .trend-chart-area {
            min-height: 260px !important;
        }
    }

    /* Stacked, the matchup table scrolls sideways inside its wrapper with
       the Stat column held in place. The table is 525 to 559px by sport
       (wider under a long team name) and will not shrink, so on a phone
       about 180px of it, Projected included, ran past the screen's edge,
       where html, body cut it and nothing scrolled it. The condition is the
       stacked layout's, not a width: a wrapper as wide as its table has
       nothing to scroll and looks as it did. */
    @container (max-width: 991px) {
        #matchup-content .table-responsive {
            overflow-x: auto;
            /* A shadow down the right edge while more of the table lies that
               way: the second layer stays at the wrapper's edge, the first
               rides with the table and covers it at the table's end. */
            background:
                linear-gradient(to left, #fff 30%, transparent) right center / 40px 100% no-repeat local,
                linear-gradient(to left, var(--tmb-black-20), transparent) right center / 14px 100% no-repeat scroll;
        }
        /* front.css stripes every even row with an opaque grey, which would
           hide that shadow on half the rows: the same grey, see-through. */
        #matchup-tbody tr:nth-child(2n) {
            background-color: color-mix(in srgb, var(--tmb-gray-900) 3%, transparent);
        }
        #matchup-content thead th:first-child,
        #matchup-tbody td:first-child {
            position: sticky;
            left: 0;
        }
        #matchup-content thead th:first-child {
            z-index: 2;
        }
        /* The held cell must hide what scrolls under it and still show its
           row's colour, which is see-through (the stripe, the hover, the
           charted stat's highlight, all set on the tr): white as an image,
           then the row's colour over it in ::before. */
        #matchup-tbody td:first-child {
            z-index: 1;
            background-color: inherit;
            background-image: linear-gradient(#fff, #fff);
        }
        #matchup-tbody td:first-child::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background-color: inherit;
        }
        /* Its right-hand rule: a collapsed border stays with the grid when
           the cell is held, and box-shadow does not apply to such a cell. */
        #matchup-content thead th:first-child::after,
        #matchup-tbody td:first-child::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            width: 1px;
            background: var(--tmb-gray-300);
        }
        #matchup-content thead th:first-child::after {
            background: var(--tmb-gray-700);
        }
    }
    /* The header's tooltips inside that scroller. On a phone front.css makes
       every tooltip a fixed sheet above the bottom bar, which a scroller
       does not clip. On a wider screen (a tablet, a narrow window, a
       /my-dashboards/ widget) a tooltip hangs from its icon and the scroller
       would cut it, so there it hangs from the table's column instead
       (.matchup-table-col is position: relative, in ps-matchup-view.php),
       which is outside the scroller: just under the header, at the column's
       right edge, and at its left edge for Player SOS, the third column. */
    @media (min-width: 769px) {
        @container (max-width: 991px) {
            #matchup-content .info-tooltip {
                position: static;
            }
            #matchup-content .info-tooltip .tooltip-text {
                top: auto;
                left: auto;
                right: 8px;
                margin-top: 1.5em;
                max-width: calc(100% - 16px);
            }
            #matchup-content th:nth-child(3) .info-tooltip .tooltip-text {
                left: 8px;
                right: auto;
            }
        }
    }

    /* Mobile — page-chrome only (.content-wrapper / nav bar never appear
       inside a widget, so these stay viewport-only). */
    @media (max-width: 767px) {
        .ps-navigation-header > div:first-child {
            margin-left: 0 !important;
        }
    }
    /* Everything else from that mobile block IS widget content (season_stats'
       stats-table/game-log-btn, player_strip's header/opponent panel) —
       @container so it responds to the widget's own width. */
    @container (max-width: 767px) {
        .stats-table { font-size: 0.78rem; }
        /* Game Log button margin on mobile */
        #btn-gamelog-toggle {
            margin-left: 16px;
        }
        /* Compact player + opponent headers on mobile */
        .player-header {
            margin-top: 16px;
            gap: 8px;
            padding: 0 16px;
        }
        .player-header img {
            width: 50px !important;
            height: 50px !important;
        }
        .player-header h2 {
            font-size: 1.1rem;
        }
        .player-header .team-label {
            font-size: 0.8rem;
        }
        #future-game-label {
            font-size: 0.6rem !important;
        }
        .ps-matchup-left, .ps-matchup-right {
            padding-left: 16px;
            padding-right: 16px;
        }
        .ps-panel-header {
            padding: 0;
        }
    }
    /* Chip badges → extracted to /styles/player-injury-common.css */

    /* Legend / Key */
    .ps-legend {
        display: none;
        align-items: center;
        gap: 10px;
        font-size: 0.75rem;
        color: var(--tmb-gray-600);
        flex-wrap: wrap;
    }
    /* .legend-item, .legend-badge, .legend-sep → in player-injury-common.css */
    .ps-legend .info-tooltip .tooltip-text {
        left: auto;
        right: 0;
        margin-left: 0;
        min-width: 340px;
    }
    .ps-legend .info-tooltip .tooltip-text {
        max-width: 380px;
        font-size: 0.72rem;
        line-height: 1.5;
        padding: 10px 14px;
        white-space: normal;
    }
    .ps-legend .info-tooltip .tooltip-text .out-badge,
    .ps-legend .info-tooltip .tooltip-text .in-badge {
        display: inline-block;
        color: #fff;
        font-weight: 700;
        padding: 0 5px;
        border-radius: 10px;
    }
    .ps-legend .info-tooltip .tooltip-text .out-badge { background: var(--tmb-out); }
    .ps-legend .info-tooltip .tooltip-text .in-badge { background: var(--tmb-in); }


/* ---- from ps-header.php ---- */
html { overflow-y: auto; -webkit-overflow-scrolling: touch; }
body { min-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Selector row below sticky header (NOT sticky) */
.ps-selector-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0px;
}
/* Remove blue box wrapper, style the select pill itself */
.ps-selector-row .selector-game {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
}
.ps-selector-row #game-selector {
    background-color: color-mix(in srgb, var(--tmb-blue) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--tmb-blue) 25%, transparent) !important;
}
.ps-selector-row #game-selector:hover,
.ps-selector-row #game-selector:focus,
.ps-selector-row .tmb-ss:hover > #game-selector, /* TMB.searchSelect's wrapper */
.ps-selector-row .tmb-ss.is-open > #game-selector {
    background-color: color-mix(in srgb, var(--tmb-blue) 12%, transparent) !important;
    border-color: var(--tmb-blue) !important;
}

/* Date picker: pill with no arrow on any state */
.ps-selector-row #date-picker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none !important;
}
.ps-selector-row #date-picker:hover,
.ps-selector-row #date-picker:focus {
    background-image: none !important;
}

/* Search input + Stats button: connected pill shape */
.ps-header-right .input-group {
    border-radius: 20px;
    overflow: hidden;
}
.ps-header-right .input-group .form-control {
    border-radius: 20px 0 0 20px !important;
    border-right: none;
}
.ps-header-right .input-group .input-group-append {
    display: flex;
}
.ps-header-right .input-group .input-group-append .btn {
    border-radius: 0 20px 20px 0 !important;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}
#team-players-row {
    display: none !important;
    align-items: center;
    gap: 4px;
}
#team-players-row.active {
    display: none !important;
}
#team-players-row .at-sign { display: none; }

/* This block stays viewport-only (@media, not @container): it's all
   player_strip's CONTROLS fragment ($ps_strip_controls_html in
   widget-render.php), which — like +EV Props' filter row — intentionally
   closes/reopens the CALLER's own ancestor divs rather than being
   self-contained, so it can't be wrapped
   in .tmb-cq-root. Minor cosmetic gap on a narrow widget (search box/date
   picker keep their desktop sizing), not a functional one. */
@media (max-width: 767px) {
    .ps-navigation-header .btn-group { margin-right: 0.5rem !important; }
    .ps-header-right {
        max-width: 100% !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .ps-header-right .input-group { order: -1; }
    .ps-selector-row {
        padding-left: 16px;
        padding-right: 16px;
    }
    .ps-selector-row select, .ps-selector-row input[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    #team-players-row select {
        width: 100% !important;
        max-width: 100%;
    }
    #team-players-row { gap: 4px !important; max-width: 100% !important; }
}

/* ---- from ps-stats-view.php ---- */
/* Skeleton placeholder styling */
.ps-skeleton {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
.ps-skeleton .skeleton-bar {
    background: var(--tmb-gray-300);
    border-radius: 3px;
    display: inline-block;
}
.ps-skeleton .skeleton-line {
    background: var(--tmb-gray-300);
    border-radius: 3px;
    height: 14px;
    margin-bottom: 6px;
}
.ps-skeleton .stats-table tbody td {
    color: transparent;
}
.ps-skeleton .stats-table tbody td::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 12px;
    background: var(--tmb-gray-300);
    border-radius: 3px;
}
.ps-skeleton .stats-table tbody td:first-child::after {
    width: 60px;
}

/* ---- from ps-trend-chart.php ---- */
/* Custom slider - matches my_systems page styling */
.ps-slider-wrap {
    position: relative;
    flex: 1 1 150px;
    min-width: 120px;
    height: 32px;
}
.ps-slider-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    background: var(--tmb-gray-300);
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 1;
}
.ps-slider-fill {
    position: absolute;
    height: 4px;
    background: var(--tmb-blue);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    left: 0;
}
.ps-slider-wrap input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    background: transparent;
    outline: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 3;
    pointer-events: auto;
}
.ps-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}
.ps-slider-wrap input[type="range"]::-moz-range-track {
    height: 4px;
    background: transparent;
    border: none;
}
.ps-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tmb-blue);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px var(--tmb-black-30);
    margin-top: -7px;
}
.ps-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tmb-blue);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px var(--tmb-black-30);
}
.ps-slider-val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tmb-gray-700);
    background: #fff;
    border: 1px solid var(--tmb-gray-300);
    border-radius: 20px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* .info-tooltip is defined in front.css. */
/* Anchor to the right for tooltips near the right edge (chart legend) */
.info-tooltip .tooltip-text.tooltip-anchor-right {
    left: auto;
    right: 0;
    margin-left: 0;
}
/* Legend: 2-column grid below chart */
.trend-legend-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 10px;
    padding: 4px 6px;
    border-top: 1px solid var(--tmb-gray-300);
    font-size: 0.82rem;
    align-items: start;
}
.trend-legend-grid .legend-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Each row stretches full width of the column */
.trend-legend-grid .legend-col > div {
    width: 100%;
}
/* Fixed widths for labels and rates so values line up */
.trend-legend-grid .legend-label {
    display: inline-block;
    min-width: 42px;
    flex-shrink: 0;
}
.trend-legend-grid .legend-rate {
    display: inline-block;
    min-width: 26px;
    text-align: right;
    flex-shrink: 0;
}
/* Custom sportsbook dropdown */
.book-dropdown .book-option:hover {
    background: var(--tmb-gray-100);
}
.book-dropdown .book-option.selected {
    background: var(--tmb-blue-100);
    font-weight: 600;
}
/* .trend-legend-grid is inside ps-matchup-view.php's .tmb-cq-root (via the
   nested ps-trend-chart.php include), so this responds to prop_bar_table's
   own width on /my-dash/. */
@container (max-width: 500px) {
    .trend-legend-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* BETA notice + page title + intro + server-rendered default view (includes/ps-ssr.php).
   At <=767px .content-wrapper goes edge-to-edge (front.css) and each block
   brings its own 15px gutter, as .ps-navigation-header does; without this
   the title and intro sat flush against the screen edge on phones. From
   768px up the wrapper keeps its own 25px sides. */
@media (max-width: 767px) {
    .ps-page-intro {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* "How this projection is built" (includes/ps-method.php): the steps behind
   one projection, in words. Printed under the default player's tables in the
   page's first paint and under the live matchup table (#matchup-method). */
.ps-method {
    max-width: 900px;
    margin: 14px 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--tmb-gray-900);
}
#matchup-method .ps-method {
    padding: 12px 14px;
    border: 1px solid var(--tmb-black-15);
    border-radius: 0.25rem;
}
/* front.css gives every h3 a full-width rule and 15px of padding. */
.ps-method .ps-method-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px;
    padding-bottom: 0;
    border-bottom: 0;
}
.ps-method .ps-method-lede {
    margin: 0 0 8px;
    color: var(--tmb-gray-700);
}
.ps-method .ps-method-steps {
    margin: 0 0 8px;
    padding-left: 1.2rem;
}
.ps-method .ps-method-steps li {
    margin-bottom: 8px;
}
.ps-method .ps-method-faced {
    margin: 8px 0 2px;
}
/* .stats-table pins its first column for wide stat tables; this one is five
   short columns and reads better without the 110px minimum. */
.ps-method .ps-method-table thead th:first-child {
    min-width: 0;
}
.ps-method .ps-method-table thead th {
    white-space: normal;
}
.ps-method .ps-method-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--tmb-gray-600);
}
@media (max-width: 767px) {
    #matchup-method {
        padding-left: 15px;
        padding-right: 15px;
    }
}