/* League History page. Relies on styles.css for :root variables, body reset,
   .icon sizing, the fixed coffee/theme-toggle buttons, and the shared
   .edge-modal-* / .sleeper-sync-* classes.

   Header / title / control-bar / empty-state layout below is a scoped
   reimplementation of powerRankings.css's equivalent rather than a shared
   file, matching the "don't couple page-specific CSS across pages" pattern
   used site-wide. The genuinely new work here is everything from
   .lh-hero down: a trophy case, a wide standings table, a record-book grid
   and a head-to-head matrix, none of which exist on any other page. */

.lh-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 96%;
    margin: 0 auto 8px;
    padding-top: 10px;
    text-align: center;
}
.lh-header h1 {
    display: inline-block;
    margin: 0;
    color: var(--text);
    /* Scoreboard voice -- same treatment as .header h1 in styles.css (the
       Draft Board's) and the homepage hero. Barlow Condensed sets narrower and
       optically smaller than Inter, so the size goes UP and the negative
       tracking comes off: tightening an already-condensed face just closes the
       counters. Eight copies of this wordmark rule exist -- one per tool
       stylesheet, plus legal.css, plus .header h1 in styles.css and
       .home-header h1 in home.css -- per this project's no-shared-page-CSS
       convention. Change them together or the wordmark differs by page. */
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

/* Wider than the other tools' 1100px: the head-to-head matrix is
   O(managers^2) columns, and every 100px of page width is one more column
   readable without scrolling. */
.lh-wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 24px 60px;
}

.lh-title-row { text-align: center; margin-bottom: 12px; }
.lh-title-row h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.75rem;
    font-weight: 700; letter-spacing: 0.005em; color: var(--text); }
/* Display voice, matching the other six tool pages and the homepage --
   the page title is structure. Six identical copies of this rule exist,
   one per tool stylesheet, per this project's no-shared-page-CSS
   convention; change them together. */
.lh-title-row p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

.lh-control-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    margin-bottom: 18px;
    overflow: hidden;
}
.lh-control-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 9px 14px;
}
.lh-control-bar-row + .lh-control-bar-row { border-top: 1px solid var(--border); }
.lh-control-bar-row-bottom { justify-content: flex-start; }

.lh-control-bar-method {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    flex: 1 1 320px;
    min-width: 0;
}
.lh-control-bar-method .icon { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; color: var(--primary); }
.lh-control-bar-method .sleeper-sync-box-inline { margin-left: 0; }

.lh-summary-bar { font-size: 0.8rem; color: var(--text-muted); }
.lh-summary-bar strong { color: var(--text); }

.lh-sample-banner {
    background: var(--val-amber-bg);
    color: var(--val-amber-txt);
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    border-top: 1px solid var(--val-amber-txt);
}
.lh-sample-banner .lh-method-link { color: var(--val-amber-txt); }

.lh-method-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-weight: 600;
    font-size: inherit;
    cursor: pointer;
}
.lh-method-link:hover { text-decoration: underline; }

.lh-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-muted);
}
.lh-empty-state .icon { width: 40px; height: 40px; color: var(--border-highlight); }
.lh-empty-state p { margin: 0; font-size: 0.9rem; max-width: 380px; }
.lh-empty-state-sub { font-size: 0.8rem !important; }

/* --- Loading -------------------------------------------------------------
   This page's cold load is seconds, not milliseconds (one Sleeper request
   per week per season), so it gets a real explained wait rather than the
   skeleton shimmer the instant pages use. */
.lh-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text-muted);
}
.lh-loading p { margin: 0; font-size: 0.9rem; color: var(--text); }
.lh-loading-sub { font-size: 0.78rem !important; color: var(--text-muted) !important; max-width: 360px; }
.lh-loading-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: lh-spin 0.8s linear infinite;
}
@keyframes lh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .lh-loading-spinner { animation-duration: 2.4s; }
}

/* --- Hero stat band ------------------------------------------------------ */

.lh-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 26px;
}
.lh-hero-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: 14px 16px;
    text-align: center;
}
.lh-hero-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.lh-hero-label { margin-top: 3px; font-size: 0.75rem; font-weight: 600; color: var(--text); }
.lh-hero-detail {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
    /* A Sleeper username is arbitrary user text and can be long; let the
       tile clip rather than blow out the grid track. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Sections ------------------------------------------------------------ */

.lh-section { margin-bottom: 30px; }
.lh-section-head { margin-bottom: 10px; }
.lh-section-head h3 { margin: 0 0 2px; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.lh-section-head p { margin: 0; font-size: 0.78rem; color: var(--text-muted); }

/* --- Trophy case --------------------------------------------------------- */

.lh-trophy-case {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
}
.lh-trophy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: 13px 12px 14px;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}
.lh-trophy-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.lh-trophy-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lh-trophy-season { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }
.lh-trophy-icon { color: var(--primary); line-height: 0; margin: 2px 0 1px; }
.lh-trophy-icon .icon { width: 24px; height: 24px; }
.lh-trophy-champ {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    /* Two lines of username, then ellipsis. Most Sleeper usernames fit on
       one, but the min-height reserves both either way, so the "def. X" line
       underneath sits on the same baseline across the whole row instead of
       bobbing up and down as soon as one name happens to wrap. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}
.lh-trophy-runner {
    font-size: 0.71rem;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.lh-trophy-card-empty .lh-trophy-icon { color: var(--border-highlight); }
.lh-trophy-none { color: var(--text-muted); font-weight: 600; }

/* The other end of the season. Divided off and set small so the card still
   reads champion-first, but present on every card rather than tucked into a
   modal, because it's the half of league history people actually quote. */
.lh-trophy-loser {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    min-width: 0;
}
.lh-trophy-loser-label {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--val-red-txt);
}
.lh-trophy-loser-name {
    font-size: 0.76rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Tables -------------------------------------------------------------- */

/* Every wide table on this page scrolls inside its own container. The page
   body must never scroll sideways -- the same rule the Power Rankings modal
   had to be fixed for (test_pr_modal_no_sideways_scroll.py). */
.lh-table-scroll {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
}

.lh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.lh-table th,
.lh-table td {
    padding: 9px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    /* Data, not prose -- see the cursor note above. Clickable headers and
       cards set their own pointer and win on specificity. */
    cursor: default;
}
.lh-table tbody tr:last-child td { border-bottom: none; }
.lh-table thead th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    background: var(--surface);
    border-bottom: 1px solid var(--border-highlight);
}
.lh-table tbody tr:hover { background: var(--surface-hover); }

.lh-col-rank { width: 38px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lh-col-num { text-align: right !important; font-variant-numeric: tabular-nums; }
/* Titles is the one numeric column whose value is a pill, not a numeral.
   Right-aligning a pill hangs it off the column's edge while the header
   above stays put, so it reads as misaligned even though the box model is
   doing exactly what it was told -- centre this one instead, header and
   cell together. */
/* Titles and Last are counts of a thing, not measurements, and they sit
   under short headers -- centred they line up with their own header instead
   of drifting to the far edge of a wide column. */
.lh-col-titles, .lh-col-titles button,
.lh-col-lasts, .lh-col-lasts button { text-align: center !important; }
.lh-col-manager { width: 100%; white-space: normal !important; }
.lh-col-finish { color: var(--text-muted); }

.lh-sortable { padding: 0 !important; }
.lh-sortable button {
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-align: right;
    cursor: pointer;
}
.lh-sortable button:hover { color: var(--text); }
.lh-sortable:focus-within { box-shadow: var(--focus-ring); }
.lh-sorted button { color: var(--primary); }

.lh-manager-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lh-manager-cell .lh-manager-names { flex: 0 1 auto; }
/* An initial in a tinted circle, generated from the team name -- deliberately
   not Sleeper's avatar, which would mean an external image request per
   manager on a page that otherwise makes none. */
.lh-manager-badge {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-glow);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
}
/* Cursors on this page, settled deliberately:
     - `cursor: help` is banned. Several things carry a title tooltip
       (badges, the season cards' last-place line, every head-to-head cell)
       and a question mark on all of them made the page feel like it was
       constantly asking to be interrogated.
     - Non-interactive content gets `default`, NOT the browser's `auto`.
       Auto resolves to the text I-beam over anything textual, so a table of
       records read as an editable document. The rule below covers every
       table cell on the page in one place.
     - Genuinely clickable things keep `pointer`: the season cards and the
       sortable column headers, both of which override this.
   The tooltips are unaffected by any of it.

   --- Hall of Fame badges -------------------------------------------------
   Emoji glyphs (see the note in leagueHistory.js for why these are not the
   site's usual line icons). Sized just under the row text so a decorated
   manager doesn't tower over an undecorated one, and never wrapped -- the
   strip either fits beside the name or the name ellipses first. */
.lh-badge-strip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}
.lh-badge {
    display: inline-flex;
    align-items: center;
    cursor: default;
}
.lh-badge-glyph {
    font-size: 0.85rem;
    line-height: 1;
    /* Emoji sit high on their box next to Inter's baseline. */
    position: relative;
    top: 0.5px;
}
.lh-badge-glyph + .lh-badge-glyph { margin-left: 1px; }
.lh-badge-mult {
    margin-left: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
/* Visually hidden but announced by screen readers and findable with ctrl-F.
   The glyphs themselves are aria-hidden, so this is the only accessible
   statement of what a badge means. */
.lh-badge-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.lh-manager-names { display: flex; flex-direction: column; min-width: 0; }
/* One line, always: the Sleeper username. There used to be a second muted
   line underneath carrying the team name; it came out when names switched to
   usernames, since a name that changes every season next to one that doesn't
   is the ambiguity this page is supposed to remove. */
.lh-manager-team { font-weight: 600; color: var(--text); }


.lh-row-champ .lh-manager-team { color: var(--text); }

/* --- Record book --------------------------------------------------------- */

.lh-record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 10px;
}
.lh-record-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-highlight);
    border-radius: var(--radius-md, 10px);
    padding: 12px 14px;
}
/* Reuses the site's existing good/bad value encodings rather than inventing
   a palette -- lime and electric orange already mean "good" and "bad" everywhere else
   on the site, and the brand accent is deliberately kept clear of both. */
.lh-record-good { border-left-color: var(--val-green-txt); }
.lh-record-bad { border-left-color: var(--val-red-txt); }
.lh-record-neutral { border-left-color: var(--primary); }
.lh-record-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.lh-record-value {
    margin: 3px 0 4px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.lh-record-detail { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }

/* --- Head to head -------------------------------------------------------- */

.lh-h2h-scroll { position: relative; }
.lh-h2h-table { font-size: 0.75rem; }
.lh-h2h-table th,
.lh-h2h-table td {
    padding: 6px 8px;
    text-align: center;
    border-right: 1px solid var(--border);
}
.lh-h2h-table th:last-child,
.lh-h2h-table td:last-child { border-right: none; }

/* The row-header column stays put while the matrix scrolls sideways -- a
   12-team grid is wider than any phone, and a row of numbers with the name
   scrolled off the left edge is unreadable. */
.lh-h2h-row,
.lh-h2h-corner {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    text-align: left !important;
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--border-highlight) !important;
}
.lh-h2h-table tbody tr:hover .lh-h2h-row { background: var(--surface-hover); }
.lh-h2h-col {
    /* Column headers are team names in a ~64px column; clamping the width and
       ellipsing beats either a 12-line-tall header row or a matrix pushed
       four screens wide. Full name is in the cell tooltips. */
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lh-h2h-cell { font-variant-numeric: tabular-nums; font-weight: 600; }
.lh-h2h-good { background: var(--val-green-bg); color: var(--val-green-txt); }
.lh-h2h-bad { background: var(--val-red-bg); color: var(--val-red-txt); }
.lh-h2h-even { color: var(--text-muted); }
.lh-h2h-self { background: var(--surface-hover); color: var(--border-highlight); }
.lh-h2h-none { color: var(--border-highlight); }

.lh-footnote {
    margin: 22px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}
.lh-footnote a { color: var(--primary); font-weight: 600; text-decoration: none; }
.lh-footnote a:hover { text-decoration: underline; }

/* --- Modals -------------------------------------------------------------- */

/* .edge-modal-wide is a shared class NAME with no shared definition -- it
   only exists in powerRankings.css, so a page that uses it without loading
   that file silently gets .edge-modal's 380px default. That's what happened
   here: the season table's six columns were being squeezed into a phone-width
   modal on a 1440px screen. Redefined per-page, matching the site's
   don't-couple-page-CSS convention (and PR's own 760px, so the two wide
   modals are the same size). */
.edge-modal-wide { max-width: 760px; }

.lh-season-table .lh-col-manager { min-width: 150px; }

.lh-method-p { margin: 0 0 12px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
.lh-method-p strong { color: var(--text); }
.lh-method-list { margin: 0; padding-left: 18px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
.lh-method-list li { margin-bottom: 7px; }
.lh-method-list strong { color: var(--text); }

.lh-season-champ-line,
.lh-season-points-line,
.lh-season-loser-line { margin: 0 0 8px; font-size: 0.86rem; color: var(--text-muted); }
.lh-season-champ-line strong,
.lh-season-points-line strong { color: var(--text); }
.lh-season-loser-line strong { color: var(--val-red-txt); }
.lh-season-note { margin: 10px 0 0; font-size: 0.75rem; color: var(--text-muted); font-style: italic; }
.lh-season-row-champ { background: var(--accent-glow); }
.lh-season-row-last td { color: var(--val-red-txt); }
.lh-season-row-champ .lh-manager-team { font-weight: 700; }
/* In the season modal the two names stack in one cell rather than sitting in
   the flex row the all-time table uses. */
.lh-season-modal-stack .lh-manager-handle { display: block; }

@media (max-width: 640px) {
    .lh-wrapper { padding: 8px 12px 48px; }
    .lh-hero { grid-template-columns: repeat(2, 1fr); }
    .lh-hero-value { font-size: 1.4rem; }
    .lh-trophy-case { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .lh-record-grid { grid-template-columns: 1fr; }
    .lh-table th, .lh-table td { padding: 8px 10px; }
    .lh-h2h-row, .lh-h2h-corner { max-width: 96px; }
}