/* ---------------------------------------------------------------------------
   Theme

   Light by default; [data-theme="dark"] on <html> flips it. The draft board
   below keeps its own dark palette in both themes -- it is modelled on a live
   draft room and reads as a distinct surface, not as page chrome.
   --------------------------------------------------------------------------- */

/* Liquidism (c) Jakob Fischer, pizzadude.dk -- the face the Goosebumps logo
   is usually identified with. Licensed non-commercial; see
   public/fonts/pizzadudedotdk.txt. Self-hosted rather than pulled from a CDN,
   so it is one request and no third party sees our traffic. Creepster stays
   in the stack as the fallback if the file ever fails to load. */
@font-face {
    font-family: 'Liquidism';
    src: url('/fonts/liquidismpart2.woff2') format('woff2');
    font-display: swap;
}

:root {
    --bg:            #ffffff;
    --fg:            #000000;
    --surface:       #f5f5f5;  /* nav, table stripes */
    --rule:          #000000;  /* heavy borders */
    --rule-soft:     #dddddd;  /* light dividers */
    --hover:         #e0e0e0;
    --muted:         #666666;
    --on-rule:       #ffffff;  /* text on a --rule fill, light in both themes */
    --on-rule-muted: #cfcfcf;
    --nav-active:    #35e000;  /* Goosebumps slime green, for the selected team */
    --head-alt:      #555555;  /* secondary table header */
    --nav-active-bg: var(--head-alt);  /* match the roster table headers */

    /* Standings column widths, shared with the transactions list so the two
       line up by construction. Measuring an auto-layout table instead was
       fragile: the columns redistribute as content renders and on resize, so
       any stored measurement went stale. */
    --col-rank:  56px;
    --col-team:  260px;
    --positive:      #008000;
    --negative:      #cc0000;
}

:root[data-theme="dark"] {
    --bg:            #14161a;
    --fg:            #e9ecf1;
    --surface:       #1c1f25;
    --rule:          #3a4048;
    --rule-soft:     #2a2f36;
    --hover:         #262b33;
    --muted:         #98a1ae;
    --on-rule:       #ffffff;
    --on-rule-muted: #c3cad4;
    --nav-active:    #45e81a;  /* a touch brighter against the lighter fill */
    --nav-active-bg: #3a4048;  /* matches --rule, which is already grey here */
    --head-alt:      #333941;
    --positive:      #4ccf7a;
    --negative:      #ff7b7b;
}

/* Ultra-minimal dense styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    font-size: 12pt;
    line-height: 1.3;
    color: var(--fg);
    background-color: var(--bg);
    margin: 0;
    padding: 0;
    display: flex;
}

/* Left Navigation */
#left-nav {
    width: 200px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: var(--surface);
    border-right: 2px solid var(--rule);
    overflow-y: auto;
    padding: 10px 0;
}

#team-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#team-nav-list li {
    border-bottom: 1px solid var(--rule-soft);
}

#team-nav-list a {
    display: block;
    padding: 8px 15px;
    color: var(--fg);
    text-decoration: none;
    font-size: 11pt;
    line-height: 20px;
}

#team-nav-list a:hover {
    background-color: var(--hover);
}

#team-nav-list a.active {
    background-color: var(--nav-active-bg);
    color: var(--nav-active);
    font-family: 'Liquidism', 'Creepster', 'Chiller', fantasy;
    font-weight: 400;
    font-size: 12pt;
    letter-spacing: 0;
}

/* "All Teams" and "Draft Board" are single-line, so they came out much
   shorter than the two-line team links. Give them a comparable box.
   The mobile drawer raises this again, to a 56px touch target. */
#team-nav-list li:nth-child(-n + 2) a {
    display: flex;
    align-items: center;
    min-height: 48px;
}

/* Team links read as owner over team name, not one run-on line. */
#team-nav-list .nav-owner {
    display: block;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
}

#team-nav-list .nav-team {
    display: block;
    font-size: 10pt;
    line-height: 1.25;
    color: var(--muted);
}

/* The selected item goes full Goosebumps: slime green in the drippy face.
   The size bump offsets Creepster's small x-height; the fixed 20px box keeps
   the row from jogging when it swaps. The drips overflow that box, which is
   fine -- they only paint. font-display:swap means a failed font load leaves
   the fallback stack rather than invisible text. */
#team-nav-list a.active .nav-owner {
    font-weight: 400;
    height: 20px;
    line-height: 20px;
}

/* The team line underneath stays in the body face -- only the name is styled. */
#team-nav-list a.active .nav-team {
    font-family: Arial, sans-serif;
    font-size: 10pt;
    letter-spacing: normal;
    color: var(--on-rule-muted);
}

/* Sits at the top right of the page, opposite the breadcrumbs. Needs the
   two-id selector to outrank `#breadcrumbs a`, which is bold and --fg. */
#breadcrumbs #theme-toggle {
    flex: none;
    color: var(--muted);
    text-decoration: none;
    font-size: 10pt;
    font-weight: 400;
    white-space: nowrap;
}

#breadcrumbs #theme-toggle:hover {
    color: var(--fg);
    text-decoration: underline;
}

/* Main content wrapper */
.main-wrapper {
    margin-left: 200px;
    width: calc(100% - 200px);
    padding: 10px;
}

/* Breadcrumbs */
/* Only rendered when the data has actually gone stale; hidden otherwise. */
#stale-banner {
    margin: 8px 0 0;
    padding: 10px 14px;
    border-radius: 4px;
    background: #3c1100;          /* the board's WR fill: a warning, not an error */
    color: #f88140;
    border: 1px solid #f8814066;
    font-size: 10.5pt;
}

#breadcrumbs {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11pt;
    padding: 8px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--rule-soft);
}

#breadcrumbs a {
    color: var(--fg);
    text-decoration: none;
    font-weight: bold;
}

#breadcrumbs a:hover {
    text-decoration: underline;
}

#breadcrumb-current {
    flex: 1 1 auto;   /* pushes the theme link to the right edge */
}

#breadcrumb-current:before {
    content: " > ";
    margin-right: 5px;
}

.container {
    max-width: 100%;
}

header {
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rule);
}

header h1 {
    font-family: 'Liquidism', 'Creepster', 'Chiller', fantasy;
    font-size: 30pt;
    font-weight: 400;
    line-height: 1.1;
    color: var(--nav-active);
    margin-bottom: 3px;
}

header p {
    font-size: 11pt;
}

main {
    padding: 0;
}

section {
    margin-bottom: 20px;
}

h2 {
    font-size: 14pt;
    font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--rule);
}

h3 {
    font-size: 13pt;
    font-weight: bold;
    margin: 10px 0 5px 0;
}

/* Dense tables with black borders */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    border: 1px solid var(--rule);
}

thead {
    background-color: var(--rule);
    color: var(--on-rule);
}

/* Roster tables get dark gray headers */
#rosters-container table thead,
#team-detail-container table thead {
    background-color: var(--head-alt);
    color: var(--on-rule);
}

th {
    padding: 4px 6px;
    text-align: left;
    font-weight: bold;
    font-size: 11pt;
    border: 1px solid var(--rule);
}

td {
    padding: 3px 6px;
    border: 1px solid var(--rule);
    font-size: 11pt;
}

tbody tr:nth-child(even) {
    background-color: var(--surface);
}

/* Standings specific */
.rank-cell {
    font-weight: bold;
    text-align: center;
    width: 40px;
}

.record-cell {
    font-weight: bold;
    width: 70px;
}

.points-cell {
    text-align: right;
    width: 70px;
}

.streak-cell {
    width: 60px;
}

.streak-win {
    color: var(--positive);
    font-weight: bold;
}

.streak-loss {
    color: var(--negative);
    font-weight: bold;
}

.owner-link a {
    color: var(--fg);
    font-weight: bold;
    text-decoration: none;
}

.owner-link a:hover {
    text-decoration: underline;
}

.team-name-link a {
    color: var(--fg);
    text-decoration: none;
}

.team-name-link a:hover {
    text-decoration: underline;
}

/* Roster specific */
.image-cell {
    width: 50px;
    text-align: center;
    padding: 2px !important;
}

.player-headshot {
    width: 40px;
    height: 40px;
    /* Fill the square rather than letterbox inside it. Source art is mostly
       portrait, but not all of it -- amonra_st_brown is landscape, and under
       `contain` it rendered at half the height of everyone else. */
    object-fit: cover;
    object-position: center top;
    border-radius: 3px;
    display: block;
    margin: 0 auto;
}

/* Team logos are the exception: they must not be cropped. The selector reads
   the live src, so it still applies after the onerror chain swaps it. */
.player-headshot[src*="teamlogos"] {
    object-fit: contain;
}

/* A filtered search shows few enough rows to use the team page's portraits.
   Same dimensions as the rule below, so the two views match. */
body.search-filtered #rosters-container .image-cell {
    width: 170px;
    padding: 5px !important;
}

body.search-filtered #rosters-container .player-headshot {
    width: 160px;
    height: 160px;
    border-radius: 5px;
}

/* Larger images for team detail pages */
#team-detail-container .image-cell {
    width: 170px;
    padding: 5px !important;
}

#team-detail-container .player-headshot {
    width: 160px;
    height: 160px;
    border-radius: 5px;
}

.position-cell {
    font-weight: bold;
    text-align: center;
    width: 60px;
}

.team-cell {
    text-align: center;
    width: 50px;
}

.starter-cell {
    text-align: center;
    width: 60px;
}

/* Compact layout */
@media print {
    body {
        padding: 5px;
    }
    
    section {
        page-break-inside: avoid;
    }
}

/* ---------------------------------------------------------------------------
   Lineup slots
   --------------------------------------------------------------------------- */

.slot-cell {
    width: 58px;
    text-align: center;
    font-weight: bold;
    font-size: 9.5pt;
    white-space: nowrap;
}

.slot-start { color: var(--positive); }
.slot-bench { color: var(--muted); font-weight: 400; }
.slot-ir    { color: var(--negative); }
.slot-none  { color: var(--muted); font-weight: 400; }

/* The art is the point of this site, so starter vs bench is never carried by
   fading a photo -- dimming the portraits would suppress exactly what people
   come to look at. The signal lives in the row's text and chrome instead, and
   leans on marking starters UP rather than marking the bench down. */
tr.is-starter td:first-child {
    box-shadow: inset 3px 0 0 var(--positive);
}

tr.is-bench td:not(.image-cell) {
    color: var(--muted);
}

/* A rule under the last starter separates the lineup from the bench without
   needing a second table or a heading. */
tr.is-starter + tr.is-bench td { border-top: 2px solid var(--rule); }

@media (max-width: 767px), (max-height: 500px) {
    .slot-cell { width: 42px; font-size: 8.5pt; }
}

/* The standings table is how you find a roster, so the team names are the
   link -- green marks them as the live thing on an otherwise static table.
   The owner column still goes to the team's own page. */
/* Fixed layout so the first two columns keep the shared widths above; the
   remaining columns share what is left. */
#standings-container table { table-layout: fixed; }
#standings-container .rank-cell { width: var(--col-rank); }
#standings-container .team-name-link { width: var(--col-team); }

.team-name-link a {
    color: var(--fg);
    font-weight: bold;
    text-decoration: none;
}

/* A/B: add class "liquid-teams" to <body> to render team names in Liquidism.
   Kept behind a class so both can be compared without an edit-reload cycle. */
body.liquid-teams .team-name-link a {
    font-family: 'Liquidism', 'Creepster', 'Chiller', fantasy;
    font-weight: 400;
    font-size: 14pt;
    letter-spacing: 0.02em;
    line-height: 1;
}

.team-name-link a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Recent transactions
   --------------------------------------------------------------------------- */

.tx-list {
    list-style: none;
    margin: 0 0 15px;
    padding: 0;
    border: 1px solid var(--rule);
}

/* An explicit display beats the hidden attribute's built-in display:none, so
   without this the rows stay on screen while the DOM reports them hidden. */
.tx-row[hidden] { display: none; }

/* Cap: past the first three, rows wait for "Show all" -- except during a
   search, which must be able to reach any transaction. */
body:not(.search-filtered) .tx-overflow { display: none; }

/* The expander is the list's own footer row rather than a detached button:
   same border, no gap, quiet until hovered. */
.tx-list:has(+ .tx-more) { margin-bottom: 0; }

.tx-more {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 15px;
    padding: 7px 10px;
    border: 1px solid var(--rule);
    border-top: 1px solid var(--rule-soft);
    background: var(--bg);
    color: var(--muted);
    font: inherit;
    font-size: 9.5pt;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.tx-more::after {
    content: "\25BE";                /* small down caret */
    font-size: 8pt;
}

.tx-more[data-state="less"]::after { content: "\25B4"; }

.tx-more-left { font-size: 8.5pt; opacity: 0.7; }

.tx-more:hover {
    color: var(--fg);
    background: var(--surface);
}

body.search-filtered .tx-more { display: none; }

.tx-row {
    display: flex;
    align-items: baseline;
    gap: 0;                 /* any gap would offset the moves column */
    /* Same geometry as the standings: skip the rank column, then the team
       column. No measuring -- both read the same variables. */
    padding: 8px 10px 8px var(--col-rank);
    border-bottom: 1px solid var(--rule-soft);
    font-size: 11pt;
}

.tx-row:last-child { border-bottom: none; }
.tx-list li:nth-child(even) { background: var(--surface); }

.tx-team a {
    color: inherit;
    text-decoration: none;
}

.tx-team a:hover {
    color: var(--nav-active-fg, var(--fg));
    border-bottom-color: currentColor;
}

.tx-team {
    flex: 0 0 var(--col-team);
    align-self: center;     /* rows with a two-line move no longer top-align it */
    padding-right: 12px;    /* inside the column, so alignment is unaffected */
    box-sizing: border-box;
    font-size: 10pt;        /* label size, matching the standings on mobile */
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-moves {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-width: 0;
}

.tx-player {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

/* Colour carries add vs drop, but the +/- sign carries it too -- colour alone
   would leave it invisible to anyone who cannot separate the two hues. */
.tx-sign { font-weight: bold; }
.tx-add .tx-sign { color: var(--positive); }
.tx-drop .tx-sign { color: var(--negative); }
.tx-drop .tx-name { text-decoration: line-through; opacity: 0.75; }

.tx-meta {
    font-size: 9.5pt;
    color: var(--muted);
}

.tx-status {
    font-size: 8.5pt;
    font-weight: bold;
    color: var(--negative);
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 3px;
}

.tx-when {
    flex: 0 0 auto;
    margin-left: 14px;
    font-size: 9.5pt;
    color: var(--muted);
    white-space: nowrap;
}

.tx-unparsed { color: var(--muted); }
.tx-empty { color: var(--muted); font-size: 11pt; }

@media (max-width: 767px), (max-height: 500px) {
    /* The desktop standings pin column widths so the transactions line up
       beneath them. At 375px those widths overflow by 160px and, under
       table-layout:fixed, the columns that lose the fight collapse to zero
       and print on top of each other. Mobile drops both the fixed layout and
       the pinned widths, and sheds the columns that cannot earn their space:
       Owner is already beside every team name in the nav, and Streak is one
       character of information. */
    #standings-container table { table-layout: auto; }

    #standings-container .rank-cell,
    #standings-container .team-name-link { width: auto; }

    #standings-container th:nth-child(3),
    #standings-container td:nth-child(3),
    #standings-container th:nth-child(7),
    #standings-container td:nth-child(7) { display: none; }

    #standings-container th,
    #standings-container td {
        padding: 4px 5px;
        font-size: 10pt;
    }

    /* Stack: three columns in a row do not fit, and the team name is the
       thing you scan by, so it goes on top. */
    .tx-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .tx-row { padding-left: 10px; }
    /* Stacked rows are a column, where align-self:center would centre the
       name horizontally instead. */
    .tx-team { flex: none; padding-right: 0; align-self: stretch; }
    .tx-when { margin-left: 0; }
    .tx-when { font-size: 9pt; }
}

/* ---------------------------------------------------------------------------
   Player search

   Sits bottom right, opposite the nav's Menu button so the two never collide.
   Both controls are only shown where they apply -- search on the All Teams
   page, which is the only view it filters.
   --------------------------------------------------------------------------- */

#search-toggle,
#search-panel { display: none; }

body.can-search #search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    width: 52px;
    height: 52px;         /* equal to width, so border-radius 50% is a circle */
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--nav-active);
    color: #10231a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

body.can-search #search-toggle:active { transform: scale(0.94); }

body.can-search #search-panel[hidden] { display: none; }

body.can-search #search-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    right: 12px;
    bottom: 66px;          /* clear of the button */
    z-index: 50;
    padding: 10px 12px;
    border: 1px solid var(--rule-soft);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

#search-input {
    font: inherit;
    font-size: 12pt;
    width: 220px;
    padding: 6px 8px;
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
}

#search-input:focus {
    outline: 2px solid var(--nav-active);
    outline-offset: 1px;
}

#search-count {
    font-size: 10pt;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 767px), (max-height: 500px) {
    /* Give the field the width instead of the count, which wraps below. */
    body.can-search #search-panel {
        left: 12px;
        flex-wrap: wrap;
    }
    #search-input { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Mobile

   The 200px sidebar ate over half of a 375px screen. Below the breakpoint it
   becomes an off-canvas drawer and the content takes the full width; the
   toggle sits bottom-left, within thumb reach.

   The breakpoint tests height as well as width: a phone in landscape is
   ~844x390, wider than 767, so on width alone it kept the permanent sidebar
   with the toggle display:none -- no way to close the menu.
   --------------------------------------------------------------------------- */

#nav-toggle,
#nav-backdrop { display: none; }

@media (max-width: 767px), (max-height: 500px) {
    #left-nav {
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35);
    }

    body.nav-open #left-nav { transform: none; }

    /* Clear the fixed Menu button, which otherwise sits on top of the last
       item -- the very ones moved down here to be reachable. */
    #left-nav { padding-bottom: 76px; }

    #team-nav-list {
        display: flex;
        flex-direction: column;
    }

    /* "All Teams" and "Draft Board" are the first two items in the markup;
       in the drawer they sit at the bottom, Draft Board above All Teams. */
    #team-nav-list li:nth-child(2) { order: 1; }   /* Draft Board */
    #team-nav-list li:nth-child(1) { order: 2; }   /* All Teams   */

    /* Single-line links were 36px, under the 44px touch-target minimum -- the
       team links get their height from two lines of text, these did not. */
    #team-nav-list li:nth-child(-n + 2) a {
        display: flex;
        align-items: center;
        min-height: 56px;
    }

    .main-wrapper {
        margin-left: 0;
        width: 100%;
    }

    #nav-toggle {
        display: block;
        position: fixed;
        left: 12px;
        bottom: 12px;
        z-index: 50;
        padding: 12px 18px;
        border: none;
        border-radius: 999px;
        background: var(--nav-active);
        color: #10231a;              /* dark ink on slime green */
        font-family: 'Liquidism', 'Creepster', 'Chiller', fantasy;
        font-size: 15pt;
        font-weight: 400;
        line-height: 1;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        cursor: pointer;
    }

    body.nav-open #nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(0, 0, 0, 0.5);
    }

    /* Reclaim width from the page gutter for the board. */
    .main-wrapper { padding: 8px; }

    /* Drop Streak on narrow screens: it is the least useful column and the one
       pushing the standings table into horizontal scroll. */
    .streak-cell,
    #standings-container td:last-child {
        display: none;
    }

    /* Dropping Streak alone still left the table 393px in a 359px container,
       so tighten the cells too -- the goal is no sideways scroll, not just
       one fewer column. */
    #standings-container th,
    #standings-container td {
        padding: 3px 4px;
        font-size: 10pt;
    }

    #standings-container .points-cell { font-size: 9.5pt; }
}

@media (prefers-reduced-motion: reduce) {
    #left-nav { transition: none; }
}

/* ---------------------------------------------------------------------------
   Draft board

   Styled after a live draft room: dark board, one column per team, position
   colour carried by the cell fill. The palette is scoped to #draft-view so the
   rest of the site stays light.
   --------------------------------------------------------------------------- */

#draft-view {
    /* Surfaces and inks lifted from Yahoo's draft client (--ys-colors-*,
       dark theme). Cell fill is the position's "surface-tag-*-accent",
       cell ink its "surface-tag-*-primary". */
    --board-bg:     #13161d;  /* ys surface-primary   */
    --board-head:   #1f242e;  /* ys surface-secondary */
    --board-cell:   #191d25;  /* ys card surface      */
    --board-line:   #262b36;  /* ys stroke-primary    */
    --board-text:   #ffffff;  /* ys text-primary      */
    --board-muted:  #949fb5;  /* ys text-secondary    */
}

#draft-view h2 { color: inherit; }

.draft-meta {
    color: #666;
    font-size: 13px;
    margin: -8px 0 16px;
}

/* The board is 12 teams wide -- scroll it rather than the page. */
.draft-scroll {
    overflow-x: auto;
    background: var(--board-bg);
    border-radius: 6px;
    padding: 0 0 2px;
}

/* Columns stretch to share the available width, as Yahoo's board does. Theirs
   is `grid-template-columns: repeat(10, 1fr)` with `min-width: 1000px` inside an
   overflow-x:auto container -- measured live: tracks ran 142px -> 117px as the
   window narrowed, then clamped at the 100px/column floor and began scrolling.
   `table-layout:fixed` + `width:100%` gives the same equal flexible tracks.
   --draft-cols is set by the renderer so the floor scales with league size. */
table.draft-board {
    border: 0;               /* base `table` rule outlines it in black */
    border-collapse: separate;
    border-spacing: 4px;   /* Yahoo cells carry M(2px): 2+2 = 4px gutter */
    table-layout: fixed;
    width: 100%;
    min-width: calc(var(--draft-cols, 12) * 100px);
    font-size: 12px;
    background: var(--board-bg);
}

/* Column headers: avatar + manager, team name underneath. */
table.draft-board th.draft-team-head {
    border: 0;
    background: var(--board-head);
    color: var(--board-text);
    text-align: left;
    padding: 8px 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    font-weight: 600;
}

/* The header is the team filter. Flex row so a long team name ellipsises
   rather than wrapping the avatar onto its own line. */
.draft-team-head .team-head-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.draft-team-head .team-head-inner:hover .team-mgr { text-decoration: underline; }

.draft-team-head .team-head-inner:focus-visible {
    outline: 2px solid var(--board-muted);
    outline-offset: 2px;
    border-radius: 3px;
}

/* The filtered-to team stays lit while the rest dim. */
table.draft-board th.draft-team-head.selected {
    background: #2b3242;
    box-shadow: inset 0 -2px 0 var(--board-text);
}

.draft-team-head .team-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: hsl(var(--avatar-hue, 210) 45% 42%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
    flex: none;
}

.draft-team-head .team-names {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
}

.draft-team-head .team-mgr {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-team-head .team-name {
    font-size: 10px;
    font-weight: 400;
    color: var(--board-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pick cells: name in the position colour, meta and pick number beneath. */
/* Base stylesheet zebra-stripes even rows in #f5f5f5; on the dark board that
   leaks through the cells' rounded corners. */
table.draft-board tbody tr { background: none; }

td.draft-cell {
    border: 0;               /* base table rule adds 1px; that would break 64 */
    padding: 5px 7px;
    vertical-align: top;
    border-radius: 4px;
    background: var(--pos-bg, var(--board-cell));
    overflow: hidden;
}

td.draft-cell.empty { background: var(--board-cell); }

/* 54px + 2x5px padding = Yahoo's constant 64px cell, at every column width. */
td.draft-cell .pick-inner {
    display: flex;
    flex-direction: column;
    height: 54px;
    overflow: hidden;
}

td.draft-cell .pick-name {
    display: flex;
    flex-direction: column;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--pos-fg, var(--board-text));
    overflow: hidden;
}

td.draft-cell .pick-name { flex: 1 1 auto; }

td.draft-cell .pick-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    font-size: 10px;
    color: var(--board-muted);
}

td.draft-cell .pick-meta {
    /* Data is already "RB" / "Det" -- no transform needed for Yahoo's casing. */
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Position carries its own colour and weight; the team stays muted. */
td.draft-cell .pick-pos {
    color: var(--pos-fg, var(--board-text));
    font-weight: 700;
}

td.draft-cell .pick-dot {
    margin: 0 4px;
    color: var(--board-muted);
}

td.draft-cell .pick-team { color: var(--board-muted); }

td.draft-cell .pick-no {
    flex: none;
    font-variant-numeric: tabular-nums;
}

td.draft-cell.dimmed,
th.draft-team-head.dimmed { opacity: 0.2; }

/* Position palette -- dark fill, bright ink of the same hue. */
/* A player search on the board dims the misses rather than removing them, so
   the grid still shows where the hit sits among the other picks. */
td.draft-cell.search-miss { opacity: 0.22; }

td.draft-cell.search-hit {
    outline: 2px solid var(--nav-active);
    outline-offset: -2px;
}

.pos-QB  { --pos-bg: #02134a; --pos-fg: #5ca9ff; }  /* ys blue   */
.pos-RB  { --pos-bg: #002023; --pos-fg: #47cbb0; }  /* ys mint   */
.pos-WR  { --pos-bg: #3c1100; --pos-fg: #f88140; }  /* ys orange */
.pos-TE  { --pos-bg: #3c0025; --pos-fg: #ef6eaa; }  /* ys pink   */
.pos-K   { --pos-bg: #191d00; --pos-fg: #94bd18; }  /* ys lime   */
.pos-DEF { --pos-bg: #291b00; --pos-fg: #cea400; }  /* ys yellow */

.draft-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-size: 12px;
    color: #555;
}

.legend-item { display: flex; align-items: center; gap: 5px; }

.legend-item .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--pos-bg, #ddd);
    border: 1px solid var(--pos-fg, #ccc);
}