/*
 * Team Angus Hockey. The palette is the football site's (team-angus-fantasy), so the two pools
 * read as one family; the layout is simpler because the pages are.
 */
:root {
    --bg: #0f1420;
    --card: #182031;
    --raised: #1f2940;
    --border: #27314a;
    --text: #e8ecf5;
    --muted: #94a0bb;
    --accent: #4f8cff;
    --pos: #5fd39a;
    --neg: #ef7b77;
    --danger: #d9534f;
    --warn: #e0a84a;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

a {
    color: var(--accent);
}

.card {
    width: 100%;
    max-width: 64rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 2rem 2rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* The slate grid has a column per manager, so its page takes the whole window. */
.wide-card {
    max-width: 96rem;
}

h1 {
    margin: 0;
    font-size: 1.5rem;
}

h2, h3 {
    margin: 1.5rem 0 0.75rem;
}

h3 {
    font-size: 1.05rem;
}

.subtitle,
.muted {
    color: var(--muted);
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.page-head .subtitle {
    margin: 0;
}

.view-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.view-tab {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.92rem;
}

.view-tab:hover {
    color: var(--text);
    background: var(--raised);
}

.view-tab-on,
.view-tab-on:hover {
    color: var(--text);
    background: var(--accent);
}

.picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    color: var(--muted);
}

.picker select,
.picker button,
.card input,
.card select,
.card textarea,
.btn {
    font: inherit;
    color: var(--text);
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
}

.btn,
.picker button {
    cursor: pointer;
}

.btn:hover,
.picker button:hover {
    border-color: var(--accent);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-small {
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
}

.season-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.season-status {
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--muted);
}

.notice {
    padding: 0.75rem 1rem;
    background: var(--raised);
    border-radius: 8px;
}

.crumb {
    margin: 1rem 0 0;
}

/* The payout strip: pot, per-slate prize, most-points prize. */
.payout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
}

.payout > div {
    padding: 0.75rem 1rem;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.payout dt {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.payout dd {
    margin: 0.1rem 0 0;
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.payout-note {
    font-size: 0.8rem;
    color: var(--muted);
}

/* Tables. A wrapper scrolls sideways on a phone rather than the page. */
.table-wrap {
    overflow-x: auto;
}

.grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.grid th,
.grid td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.grid thead th,
.grid tfoot th {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    white-space: nowrap;
}

.grid tfoot th {
    border-bottom: none;
    border-top: 1px solid var(--border);
}

.grid tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.grid .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.grid tr.leader td {
    background: rgba(79, 140, 255, 0.08);
}

.strong {
    font-weight: 600;
}

.nowrap {
    white-space: nowrap;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

.pos {
    color: var(--pos);
}

.neg {
    color: var(--neg);
}

.warn {
    color: var(--warn);
}

.row-link {
    color: inherit;
    text-decoration: none;
}

.row-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.footnote {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

/* A ROUNDS season's round leaders, above its standings. */
.grid.rounds {
    margin-bottom: 1.5rem;
}

/* The slate grid. */
.slate-grid td,
.slate-grid th {
    padding: 0.3rem 0.45rem;
}

.slate-grid .manager-col {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
}

/* A slate's top score and its lowest; every other score is left plain. */
.cell-win {
    background: #2f9e6b;
    color: #fff;
    font-weight: 700;
}

.cell-low {
    background: #b8413d;
    color: #fff;
}

.cell-absent {
    background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, 0.04) 4px 8px);
}

/* The slate statistics down the right, set off from the managers' columns. */
.slate-grid .stat-col {
    border-left: 1px solid var(--muted);
}

/* The manager statistics along the bottom: a label per block, then a label per row. */
.slate-grid tfoot td {
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
}

.slate-grid tfoot .foot-first th,
.slate-grid tfoot .foot-first td {
    border-top: 1px solid var(--muted);
}

.slate-grid .foot-group {
    vertical-align: top;
    white-space: normal;
    min-width: 6rem;
    color: var(--text);
}

.slate-grid .foot-stat {
    text-align: left;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: -0.5rem;
    border-radius: 3px;
    border: 1px solid var(--border);
    vertical-align: middle;
}

/* One slate's lineups as cards, best first; the winner's edged green, the lowest red. */
.slate-nav {
    display: flex;
    justify-content: space-between;
    margin: 0 0 1rem;
}

.lineups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    gap: 1rem;
}

.lineup {
    padding: 0.5rem 0.75rem 0.25rem;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.lineup-win {
    border-color: #2f9e6b;
    box-shadow: inset 0 3px 0 #2f9e6b;
}

.lineup-low {
    border-color: #b8413d;
    box-shadow: inset 0 3px 0 #b8413d;
}

.lineup header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.lineup-points {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/*
 * Every pick row the same height, so cards side by side line up row for row: room for the name,
 * how rostered he was, the game, and a box score of up to two lines. Fixed layout, and each of
 * those capped at its lines (cut with an ellipsis, whole on hover), so nothing can push one row
 * taller than its neighbours.
 */
.lineup-table {
    font-size: 0.85rem;
    table-layout: fixed;
}

.lineup-table .col-slot {
    width: 2.6rem;
}

.lineup-table .col-cost {
    width: 3rem;
}

.lineup-table .col-pts {
    width: 3.8rem;
}

.lineup-table tbody tr {
    height: 6.1rem;
}

.lineup-table .pick,
.pick-detail {
    min-width: 0;
}

/* Flex inside the cell, not on it: a cell that is itself flex stops being a table cell, and its
   row's border stops short. */
.lineup-table td {
    vertical-align: middle;
}

.pick-detail > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pick-detail > :last-child {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/*
 * The best and worst lineups as one mirrored table: the best reads out from the middle to the
 * left, the worst to the right, the position shared between them. Green edge on the best side,
 * red on the worst, as their cards have. Scrolls sideways on a phone rather than squeezing.
 */
.compare {
    overflow-x: auto;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    border-left: 3px solid #2f9e6b;
    border-right: 3px solid #b8413d;
    padding: 0.25rem 0.75rem;
}

.compare-table {
    min-width: 46rem;
}

.compares {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Qualified by the table: the plain .grid header style (left-aligned, small caps) would win. */
.compare-table thead th.compare-head {
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

.compare-table thead th.compare-best {
    text-align: left;
}

.compare-best .lineup-points {
    float: right;
}

.compare-table thead th.compare-worst {
    text-align: right;
}

.compare-worst .lineup-points {
    float: left;
}

.compare-head .muted,
.compare-head .strong {
    margin: 0 0.3rem;
}

.compare-table .compare-slot,
.compare-table thead th.compare-slot {
    text-align: center;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* The worst side's pick, mirrored: portrait on the outer edge, text reading in to the middle. */
.pick-mirror {
    flex-direction: row-reverse;
    text-align: right;
}

.lineup-table td,
.lineup-table th {
    padding: 0.25rem 0.35rem;
}

/* A player's headshot beside his name: round, on the card's own ground. */
.pick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Lineup portraits at Yahoo's size: 60px (its lineups show 120px images at 60). The stored ones
   are 128px, so they stay sharp on high-density screens. */
.headshot {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--border);
    object-fit: cover;
}

.headshot-small {
    width: 32px;
    height: 32px;
}

.headshot-lineup {
    width: 60px;
    height: 60px;
}

.headshot-medium {
    width: 72px;
    height: 72px;
}

/* A player's seasons and teams, each in that jersey. */
.jerseys {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}

.jerseys figure {
    margin: 0;
    text-align: center;
    font-size: 0.78rem;
}

.headshot-large {
    width: 112px;
    height: 112px;
}

.player-title {
    align-items: center;
}

/* A pick's name, then how rostered he was, the game, and his box score - a line each. */
.pick-detail {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    line-height: 1.35;
}

.pick-detail .pick-name {
    font-size: 0.85rem;
    font-weight: 600;
}

.lineup-game {
    display: block;
    font-size: 0.75rem;
}

.lineup-none {
    margin: 0.5rem 0;
}

.kind-switch {
    margin-top: 1.25rem;
}

/* A long list kept to a sensible height beside its neighbour. */
.scroll-list {
    max-height: 32rem;
    overflow-y: auto;
}

/* Two tables side by side, stacked on a narrow screen. */
.two-up {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 0 2rem;
}

/* Two boards a row on a desktop - each record's regular-season board beside its playoffs twin,
   the order RecordBookResolver gives them in - and one a row below tablet width. */
.boards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
}

@media (max-width: 52rem) {
    .boards {
        grid-template-columns: 1fr;
    }
}

/* Admin. */
.admin-section {
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.admin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 20rem);
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.75rem 0;
}

.paste {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

.admin-actions {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.preview {
    margin-top: 1rem;
    padding: 0 1rem 0.5rem;
    background: var(--raised);
    border-radius: 10px;
}

.logout-form {
    margin-top: 2rem;
}

.site-footer {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--muted);
}

@media (max-width: 40rem) {
    body {
        padding: 1rem 0.5rem;
    }

    .card {
        padding: 1rem;
        border-radius: 10px;
    }

    .boards,
    .two-up {
        grid-template-columns: 1fr;
    }
}