/* ============================================================================
   draft-guide player-card styles for fantasy-hockey-draft-guide.aspx
   (its ONLY consumer). Ported 2026-09-01 from hashtagbasketball.com
   assets/css/draft-guide-cards.css, which itself came from the football
   draft-guide card.

   DEPLOY: this file and the page go to the server TOGETHER, and the page's
   ?v= on this link is bumped on every css change - an out-of-step copy of
   these two files is exactly what caused the stale-deploy problem on the
   basketball side.

   DIFFERENCES FROM THE BASKETBALL FILE (owner decisions 2026-09-01):
     * No .dg-comment rules - the hockey guide has no The Good / The Bad or
       projection-notes columns.
     * No .dg-profile-btn - no player profile pages on this site.
     * No team-colour hooks. HTH_DT_TEAMS has no ccode column, so the rank and
       position pills take the site primary blue from .dg-pill here instead of
       an inline hex from the proc.
     * .dg-radar-wrap added, ported from compare-players.css .pc-radar-wrap -
       the card's right-hand column is a Chart.js radar.

   NOTE: .pos-pill here is the football pill SHAPE (single colour).
   assets/css/pos-pill.css defines a DIFFERENT segmented .pos-pill for the ADP
   board and the import-v2 point pages; that file must never be loaded on the
   draft-guide page. Neither must adp.css, which carries the same segmented
   rules.
   ============================================================================ */

.pos-pill {
    display: inline-block;
    min-width: 2.65em; /* em, not px: keeps single-letter pills (C) pill-shaped at the h1 sizes too */
    padding: 5px 10px;
    border-radius: 50rem;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
}

/* Site primary blue (#4662aa, --bs-primary in app-assets/css/bootstrap.css).
   The basketball card binds a per-team hex inline from the proc's ccode; there
   is no hockey equivalent, so every card takes the one brand colour. */
.dg-pill {
    background-color: #4662aa !important;
    color: #fff !important;
}

/* Card top row: player block | radar | schedule.
   Owner 2026-09-01, "equal space on each side": this was a Bootstrap 5/2/5
   grid, which centres the radar in the CARD but not between its neighbours.
   The schedule always starts flush at its column edge, while the player block
   is left-aligned text that stops wherever the name ends - measured across the
   top 200 the right gap was a constant 34px while the left gap ran 58-286px
   (median 161px). No fixed column split or offset can fix that, because the
   imbalance tracks name length.

   So the radar is a fixed-width flex item with auto side margins: flex
   distributes the leftover space equally to the two auto margins, which is
   exactly "equal on each side", recomputed per card. The player block takes
   its natural width (capped so the two longest names wrap rather than eat the
   whole row) and the schedule keeps a fixed width so its 9-cell grid is
   identical on every card.

   Trade-off worth knowing: the radar's x position now shifts slightly from
   card to card, following the name length, instead of sitting on one fixed
   column line down the page. */
.dg-cardrow {
    display: block;
}

@media (min-width: 992px) {
    .dg-cardrow {
        display: flex;
        align-items: center;
    }
    /* flex-shrink 0: with shrink on, a long name let the whole block be
       squeezed and 40 of 200 names wrapped to two lines. Capped at 540px
       instead, which is what is left of the 1285px row after the radar and
       schedule - only the two widest names ("Ukko-Pekka Luukkonen",
       "Mackenzie Blackwood") wrap now. */
    .dg-player {
        flex: 0 0 auto;
        min-width: 0;
        max-width: 540px;
    }
    /* min-width: 0 is load-bearing. Flex items default to min-width:auto, and
       Chart.js writes an inline pixel width onto the canvas, so the canvas's
       own size propped this column open at 300px and the flex-basis was
       ignored. */
    .dg-radar-col {
        flex: 0 0 200px;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .dg-sched-col {
        flex: 0 0 520px;
        min-width: 0;
    }
}

/* Radar column. Chart.js sizes the canvas to this box, so it needs a height
   of its own - a bare canvas in a flex column collapses to nothing.
   Fixed height, not min-height (owner 2026-09-01): the row is
   align-items-center, so a radar taller than the rank/details/stat-box column
   padded the left side with dead space above and below. 200px sits just under
   that column's natural height (198px on a skater card with all three stat-box
   groups), so the left side sets the row height and the padding disappears. */
.dg-radar-wrap {
    position: relative;
    width: 100%;
    height: 200px;
}

@media (max-width: 991.98px) {
    /* Stacked under the player details on phones/tablets; shorter again so the
       card does not push the schedule strip off the first screen. */
    .dg-radar-wrap {
        height: 200px;
        margin-top: 0.5rem;
    }
}

/* Stat-box row: gap instead of per-group margins so no line ever ends with a
   trailing margin. Groups stretch to fill the row on phones only
   (flex-sm-grow-0 turns it off from sm up). Mobile row-gap is tightened below
   in the max-575.98px block. */
.dg-statbox-row {
    row-gap: 1rem;
    column-gap: 0.5rem;
}

/* Stat-box cells are individually guarded, so which cell renders last varies
   per player; dividers are drawn between rendered siblings instead of
   border-end utilities. Punt/Category Ranks can reach 26 cells in hockey (the
   football reference never exceeds 3), so the row wraps rather than clipping
   at the card edge; border-radius/overflow clip the colour-rated cell
   backgrounds to the wrapper's rounded corners. */
.dg-statbox {
    flex-wrap: wrap;
    border-radius: inherit;
    overflow: hidden;
}

/* Rated cells (color-rating-N backgrounds set their own text colour with
   important in style.css): label and value follow that colour. */
.dg-statbox > [class*="color-rating"] .text-muted,
.dg-statbox > [class*="color-rating"] h4 {
    color: inherit !important;
}
.dg-statbox > [class*="color-rating"] .text-muted {
    opacity: 0.75;
}
.dg-statbox > div + div {
    border-left: 1px solid #ebe9f1;
}
.dark-layout .dg-statbox > div + div {
    border-left-color: #3b4253;
}

/* Stat boxes sized down from the theme defaults on sm+ only (phones have their
   own tighter values in the max-575.98px block below). The padding beats the
   markup's py-75/px-sm-2 utilities; values come down from the theme's
   1.286rem h4. */
@media (min-width: 576px) {
    .dg-statbox > div {
        padding: 0.5rem 1rem !important;
    }
    .dg-statbox .font-small-2 {
        font-size: 0.75rem !important;
    }
    .dg-statbox h4 {
        font-size: 1.1rem;
    }
}

/* Desktop schedule (owner 2026-09-01): 27 weeks as 3 rows of 9 inside the
   card's third column, rather than one 27-wide strip spanning the card. Same
   clamp trick as the mobile strip - the last row is short, and without a
   max-width its cells would flex-grow wider and break the column alignment.
   28px is the eight me-25 (3.5px) gaps a full row carries. */
.dg-sched-d > div {
    max-width: calc((100% - 28px) / 9);
    min-height: 40px;
}

/* Mobile schedule cells run 6 per row (flex: 1 0 15%); on the remainder row
   flex-grow would stretch the leftover cells wider and break the column grid -
   clamp every cell to the exact 6-across width. 17.5px is the five me-25
   (3.5px) gaps a full row carries. */
.dg-sched-m > div {
    max-width: calc((100% - 17.5px) / 6);
}

/* Statistical Breakdowns TYPE column: 300px fits "(Per-game)" on desktop;
   mobile shortens labels to "2026-27 Proj" / "Rank" so the column narrows.
   !important because .mw300 in style.css is !important. Stat-box primary
   values also sit slightly smaller on phones. */
@media (max-width: 575.98px) {
    th.dg-type-col {
        min-width: 112px !important;
    }
    .dg-statbox h4 {
        font-size: 1rem;
    }
    /* Tighter stat boxes on phones: cell padding down from py-75/px-50 and
       in-box labels down from font-small-2; the section headings outside the
       boxes keep their size. */
    .dg-statbox > div {
        padding: 0.5rem !important;
    }
    .dg-statbox .font-small-2 {
        font-size: 0.7rem !important;
    }
    /* A wrapped line's heading (e.g. CATEGORY RANKS) gets the same air above
       as it has below to its own box (mb-50). */
    .dg-statbox-row {
        row-gap: 0.5rem;
    }
}