/* Draft Buddy — a dense, glanceable board for draft day. */

:root {
    color-scheme: light dark;

    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f0f2f5;
    --border: #dfe3e8;
    --text: #16191d;
    --text-dim: #666e79;
    --accent: #1c6feb;
    --accent-soft: #e7f0fe;
    --good: #17794b;
    --bad: #c02626;
    --warn: #9a6700;
    --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);

    --qb: #b3541e;
    --rb: #1f7a4d;
    --wr: #1c5fb8;
    --te: #8a4bbd;
    --k: #7a7f87;
    --def: #a03a5f;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1115;
        --surface: #171a20;
        --surface-2: #1e222a;
        --border: #2b303a;
        --text: #e8eaed;
        --text-dim: #99a1ad;
        --accent: #61a0ff;
        --accent-soft: #1b2740;
        --good: #4ec98a;
        --bad: #ff7b72;
        --warn: #e3b341;
        --shadow: none;

        --qb: #e58b52;
        --rb: #4ec98a;
        --wr: #6ba6ff;
        --te: #c08cf0;
        --k: #9aa1ac;
        --def: #ef7fa5;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- chrome */

/* The bar carries a lot now — a league menu, six sections, a clock, an account
   — and it used to be one unwrappable row of fixed height. On anything narrower
   than a laptop that row simply did not fit, and a row that does not fit makes
   the whole document wider than the screen, at which point the browser zooms
   out and every table on the page goes small. So it wraps, and grows. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding: 7px 20px;
    min-height: 52px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 18px; }

.nav { display: flex; flex-wrap: wrap; gap: 4px; margin-right: auto; }
.nav a {
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--text-dim);
    font-weight: 500;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--accent-soft); color: var(--accent); }

.clock { display: flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }
.clock .pick-no { font-size: 20px; font-weight: 700; }
.clock .on-clock { color: var(--text-dim); font-size: 13px; }
.clock .on-clock strong { color: var(--text); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }
.wrap-wide { max-width: 100%; margin: 0; padding: 20px 20px 64px; }

.flash {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
    /* Only success and error are used today; a label without a rule of its own
       still needs to be readable rather than invisible. */
    background: var(--surface-2);
    color: var(--text);
}
.flash-success { background: var(--accent-soft); color: var(--accent); }
.flash-error { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }

/* ----------------------------------------------------------------- type */

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 15px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
h3 { font-size: 14px; margin: 0 0 8px; }
.sub { color: var(--text-dim); margin: 0 0 20px; }
.muted { color: var(--text-dim); }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------------------------------------------------------------- panels */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.panel-head h2 { margin: 0; }
.panel-body { padding: 16px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stack { display: grid; gap: 16px; }

.stat { padding: 14px 16px; }
.stat .label { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.stat .value { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .note { color: var(--text-dim); font-size: 12px; }

/* ---------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; }

/*
 * Long lists pin their header. This only works if the wrapper is a real
 * vertical scroll container, so `.table-tall` gives it a height to scroll
 * within; short panel tables stay plain and scroll with the page.
 */
.table-tall {
    overflow: auto;
    max-height: calc(100vh - 220px);
}

/* `separate` rather than `collapse`: WebKit misplaces sticky cells in a
   collapsed table, and collapsed borders don't paint on them at all. */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
th {
    background: var(--surface-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    font-weight: 600;
}
.table-tall th {
    position: sticky;
    top: 0;
    z-index: 5;
    /* A sticky cell's own border would scroll away with the row behind it. */
    box-shadow: inset 0 -1px 0 var(--border);
    border-bottom: 0;
}
tbody tr:hover { background: var(--surface-2); }
tbody tr.drafted { opacity: 0.42; }
tbody tr.drafted .name { text-decoration: line-through; }
tbody tr.tier-start td { border-top: 2px solid var(--border); }
td.name { font-weight: 550; }

.pos {
    display: inline-block;
    min-width: 30px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    /* Every badge is white text, so it needs a ground of its own even when the
       label is one this stylesheet has never met — a combined WR/TE board was
       white on white until this was here. */
    background: var(--k);
}
.pos-QB { background: var(--qb); }
.pos-RB { background: var(--rb); }
.pos-WR { background: var(--wr); }
.pos-TE { background: var(--te); }
.pos-K  { background: var(--k); }
.pos-DEF { background: var(--def); }

/* Two positions sharing one board, so it wears both colours. */
.pos-WRTE { background: linear-gradient(105deg, var(--wr) 55%, var(--te) 55%); }

.tier-chip {
    display: inline-block;
    min-width: 22px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11px;
    text-align: center;
    color: var(--text-dim);
}

.value-pos { color: var(--good); font-weight: 600; }
.value-neg { color: var(--text-dim); }

.baseline-row td {
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    border-top: 1px dashed var(--warn);
    border-bottom: 1px dashed var(--warn);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--warn);
}

/* --------------------------------------------------------------- controls */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 550;
    cursor: pointer;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-danger { color: var(--bad); }
.btn-sm { padding: 3px 8px; font-size: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 550;
}
.chip:hover { background: var(--surface-2); text-decoration: none; }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

input[type="text"], input[type="number"], input[type="search"], select, textarea {
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input.cell { width: 68px; text-align: right; font-variant-numeric: tabular-nums; }
input.cell-sm { width: 56px; text-align: right; font-variant-numeric: tabular-nums; }

label.field { display: grid; gap: 4px; font-size: 13px; color: var(--text-dim); }
label.field input, label.field select { color: var(--text); }
.field-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }

.sticky-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------ draft board */

.board { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .board { grid-template-columns: 1fr; } }

.pick-cell { padding: 6px 8px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.pick-cell .pick-no { font-size: 10px; color: var(--text-dim); }
.pick-cell .pick-name { font-size: 12px; font-weight: 550; }
.pick-cell.empty { background: var(--surface-2); }
.pick-cell.current { outline: 2px solid var(--accent); outline-offset: -2px; }
.grid-table td { padding: 0; }
.grid-table th { min-width: 120px; }

.roster-slot { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.roster-slot:last-child { border-bottom: 0; }

.needs { display: flex; gap: 4px; flex-wrap: wrap; }
.need {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--surface-2);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.need.short { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.need.filled { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }

/* ------------------------------------------------------------ sortable cols */

th.sortable { padding: 0; }
th.sortable a {
    display: block;
    padding: 7px 10px;
    color: inherit;
    white-space: nowrap;
}
th.sortable a:hover { background: var(--border); color: var(--text); text-decoration: none; }
th.sorted a { color: var(--accent); }
th.sortable .arrow { display: inline-block; width: 0.75em; margin-left: 2px; }
th.num.sortable a { text-align: right; }

.notice {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
}

.notice-warn {
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    color: var(--warn);
}

.notice strong { display: block; margin-bottom: 2px; }

.update-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.update-banner form { margin: 0; }

/* ------------------------------------------------------------ depth charts */

.depth-body { padding: 10px 12px; }

.depth-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--line);
}

.depth-row:first-child { border-top: 0; }
.depth-row .pos { margin-top: 3px; flex: 0 0 auto; }

.depth-players {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.depth-player {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
}

.depth-player:hover { background: var(--surface-2); text-decoration: none; }

.depth-no {
    color: var(--text-dim);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.depth-pts {
    color: var(--text-dim);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.depth-player.is-drafted { opacity: 0.45; }
.depth-player.is-drafted .depth-name { text-decoration: line-through; }

@media (max-width: 520px) {
    .depth-player { font-size: 13px; padding: 5px 8px; }
}

.alloc-table td, .alloc-table th { white-space: nowrap; }
.alloc-table .cell-sm { width: 56px; }

/* ---------------------------------------------------------- injury report */

.injury {
    display: inline-block;
    min-width: 30px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    /* Same reasoning as the position badges: a status this stylesheet has not
       met must still be readable. */
    background: var(--surface-2);
    color: var(--text);
}

/* Out for the season, or as good as. */
.injury-ir, .injury-pup, .injury-na, .injury-dnr, .injury-sus {
    background: color-mix(in srgb, var(--bad) 82%, transparent);
    color: #fff;
}

/* Out this week. */
.injury-out, .injury-doubtful, .injury-cov {
    background: color-mix(in srgb, var(--bad) 40%, transparent);
    color: var(--bad);
}

/* Probably plays. */
.injury-questionable {
    background: color-mix(in srgb, var(--warn) 26%, transparent);
    color: var(--warn);
}

/* Tooltips, drawn on the page rather than by the browser: instant, styled,
   and never clipped by the scrollbox of whatever it hovers over. */
.tip {
    position: fixed;
    z-index: 100;
    display: none;
    max-width: 280px;
    padding: 6px 9px;
    border-radius: 6px;
    background: var(--text);
    color: var(--surface);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.injury[data-tip] { cursor: help; }

/* On a touch screen a tooltip costs a tap, so the badge stays beside the name
   and the detail waits behind it. Given a desktop's width and a real pointer,
   the detail is simply shown — on its own line under the name, so a long note
   cannot push the columns about. The breakpoint is an iPad landscape. */
.injury-line { display: inline; }
.injury-detail { display: none; }

@media (min-width: 1025px) {
    .injury-line {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-top: 2px;
    }

    .injury-detail {
        display: inline;
        font-size: 11px;
        font-weight: 400;
        color: var(--text-dim);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* The player whose page this is, among his teammates. */
tbody tr.depth-him td { background: var(--accent-soft); }

/* ----------------------------------------------------------------- menus */

.menu { position: relative; }

.menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    border-radius: 6px;
    padding: 2px 8px 2px 4px;
}

.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--surface-2); }

.caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.65;
}

.menu[open] > summary .caret { transform: rotate(180deg); }

.menu-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 220px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.menu-list form { margin: 0; }

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item.is-current { font-weight: 600; }
.menu-tick { color: var(--accent); }
.menu-rule { height: 1px; margin: 4px 6px; background: var(--border); }

.signed-in { font-size: 12px; margin-left: 10px; }


/* A long league name shortens rather than shoving the bar wider. */
.league-menu > summary {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .topbar { gap: 6px 14px; padding: 6px 14px; flex-wrap: nowrap; }
    .nav a { padding: 4px 8px; white-space: nowrap; }

    /* One line rather than two: a wrapped bar is sticky, so every row it grows
       by is a row taken off every screen below it for the rest of the session.
       The sections scroll sideways instead, and shrink to let that happen. */
    .nav {
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav::-webkit-scrollbar { display: none; }
    /* The sign-out button says you are signed in; the address is a luxury the
       width cannot afford. */
    .signed-in { display: none; }
    .wrap { padding: 16px 14px 56px; }
    .wrap-wide { padding: 16px 14px 56px; }
}

@media (max-width: 700px) {
    .topbar { gap: 6px 10px; }
    .brand-mark { font-size: 16px; }
    .league-menu > summary { max-width: 55vw; }
}

/* Impersonating somebody. Deliberately hard to miss and hard to forget. */
.impersonating {
    position: sticky;
    top: 52px;
    z-index: 19;
    padding: 8px 20px;
    background: color-mix(in srgb, var(--warn) 26%, transparent);
    color: var(--warn);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}

.impersonating a { color: inherit; text-decoration: underline; margin-left: 8px; }