:root {
    --hfhl-navy: #14213d;
    --hfhl-red: #c1121f;
}

html { font-size: 15px; position: relative; min-height: 100%; }
body { margin-bottom: 60px; background: #f6f7f9; }

.site-header { background: var(--hfhl-navy); color: #fff; }
.site-title { color: #fff; font-weight: 700; font-size: 1.35rem; text-decoration: none; display: inline-flex; align-items: center; gap: .75rem; }
.site-logo { height: 80px; width: auto; flex: none; }
@media (max-width: 575.98px) { .site-logo { height: 56px; } .site-title { font-size: 1.15rem; gap: .5rem; } }
.site-title:hover { color: #fff; text-decoration: underline; }
.season-picker label { color: #cfd6e4; font-size: .9rem; }
.signed-in { display: flex; align-items: center; gap: .6rem; color: #cfd6e4; font-size: .9rem; }
.signed-in a { color: #fff; }
.account-form { max-width: 28rem; }
.qr-code svg { width: 12rem; height: 12rem; }
.password-checklist { list-style: none; padding: 0; margin: .5rem 0 .25rem; font-size: .875rem; color: #6b7280; }
.password-checklist li { display: flex; align-items: center; gap: .45rem; padding: .1rem 0; }
.password-checklist .check-mark { display: inline-block; width: 1rem; text-align: center; font-weight: 700; }
.password-checklist .check-mark::before { content: "\2022"; }
.password-checklist li.met { color: #15803d; }
.password-checklist li.met .check-mark::before { content: "\2713"; }
.password-checklist li.unmet { color: #b91c1c; }
.password-checklist li.unmet .check-mark::before { content: "\2717"; }
.recovery-codes { font-size: 1.05rem; background: #f6f7f9; padding: .75rem 1rem; border-radius: .3rem; columns: 2; max-width: 24rem; }
.site-nav { background: #0d1628; }
.site-nav .nav-link { color: #dfe5f0; padding: .55rem .8rem; }
.site-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }

.card-panel { background: #fff; border: 1px solid #e3e6eb; border-radius: .4rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.page-title { font-size: 1.6rem; font-weight: 700; margin-bottom: .75rem; }
.muted { color: #6b7280; }

table.stats { width: 100%; background: #fff; font-variant-numeric: tabular-nums; }
table.stats th, table.stats td { padding: .35rem .5rem; border-bottom: 1px solid #eef0f3; }
table.stats th { background: #eef1f6; font-weight: 600; white-space: nowrap; }
table.stats td.num, table.stats th.num { text-align: right; }
table.stats tr:hover td { background: #fafbfd; }
table.stats .team-logo { width: 22px; height: 22px; object-fit: contain; margin-right: .4rem; vertical-align: middle; }

.badge-status { font-size: .75rem; }
.score { font-weight: 700; font-variant-numeric: tabular-nums; }
.winner { font-weight: 700; }
.jersey { display: inline-block; width: .8em; height: .8em; border-radius: 2px; vertical-align: -.05em; border: 1px solid #1c2430; }
.jersey-dark { background: #1c2430; margin-right: .3rem; }
.jersey-white { background: #fff; }
table.stats tr.period-start td { border-top: 2px solid #b8c0cc; }
.footnote { font-size: .85rem; color: #6b7280; margin-top: .5rem; }

.game-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; text-align: center; }
.game-header .team-name { font-size: 1.25rem; font-weight: 700; }
.game-header .big-score { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.game-header img { max-height: 70px; max-width: 110px; object-fit: contain; }

.footer { position: absolute; bottom: 0; width: 100%; background: #fff; }

.table-scroll { overflow-x: auto; }
table.stats tfoot .total-row td { font-weight: 700; background: #f3f5f9; border-top: 2px solid #d8dde6; }
table.stats tr.season-total td { font-style: italic; background: #f8f9fb; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.team-grid .team-card { margin-bottom: 0; }
.team-card-head { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; text-decoration: none; color: inherit; }
.team-card-head:hover span { text-decoration: underline; }
.team-card-head img { width: 48px; height: 48px; object-fit: contain; }
.team-record { font-weight: 600; margin: .35rem 0 .5rem; }
.roster-list { list-style: none; padding: 0; margin: 0; }
.roster-list li { padding: .1rem 0; }
.roster-tag { display: inline-block; font-size: .7rem; font-weight: 700; line-height: 1; padding: .15rem .3rem; margin-left: .15rem; border-radius: .2rem; background: #e6e9ef; color: #374151; vertical-align: middle; }
.roster-tag.rookie { background: #fde2e2; color: var(--hfhl-red); }
.roster-tag.inactive { font-weight: 400; background: transparent; color: #6b7280; border: 1px solid #d1d5db; }

.team-page-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.team-page-head img { max-height: 80px; max-width: 120px; object-fit: contain; }

.player-head { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.player-photo { max-height: 170px; max-width: 150px; object-fit: cover; border-radius: .3rem; }
.bio { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .15rem; margin: 0; }
.bio dt { font-weight: 600; color: #6b7280; }
.bio dd { margin: 0; }

.record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.record-grid .record-card { margin-bottom: 0; }
.record-title { text-transform: uppercase; letter-spacing: .03em; color: var(--hfhl-navy); }
table.record-table td { vertical-align: top; }
table.record-table tr.record-holder td { background: #fff7e0; }
.record-when { display: block; font-size: .8rem; color: #6b7280; }

.announcements { background: var(--hfhl-navy); border-radius: .4rem; padding: .5rem 1rem; color: #fff; font-weight: 600; }
.announcement { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.announcement img { height: 22px; }
.announcement p, .announcement div { margin: 0; display: inline; }

.article-body { line-height: 1.55; }
.article-body img { max-width: 100%; height: auto; }
.article-photo { float: left; max-width: 45%; margin: 0 1rem .75rem 0; }
.article-photo img { max-width: 100%; height: auto; border-radius: .3rem; }
.article-photo figcaption { font-size: .85rem; font-style: italic; font-weight: 600; color: #4b5563; margin-top: .25rem; }
.article::after { content: ""; display: block; clear: both; }
@media (max-width: 576px) { .article-photo { float: none; max-width: 100%; margin-right: 0; } }

.headline-list { list-style: none; padding: 0; margin: 0; max-height: 18rem; overflow-y: auto; }
.headline-list li { padding: .25rem 0; border-bottom: 1px solid #eef0f3; }
.headline-list li:last-child { border-bottom: 0; }

.leaders { border-top: 4px solid var(--hfhl-red); }
.leaders.goalies { border-top-color: #fc7d01; }
.leaders.stars { border-top-color: #ffbb41; }
.sponsor { display: flex; flex-direction: column; align-items: center; text-decoration: none; margin-bottom: .75rem; }
.sponsor img { max-width: 100%; max-height: 90px; object-fit: contain; }
.sponsor span { color: #6b7280; }
.stars-nav { display: flex; align-items: center; gap: .6rem; }
.stars-nav a { text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.three-stars { list-style: none; padding: 0; margin: 0; }
.three-stars li { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; }
.three-stars .star-rank { color: #e0a100; font-size: 1.2rem; line-height: 1.2; }
.three-stars li:nth-child(2) .star-rank { color: #9ca3af; }
.three-stars li:nth-child(3) .star-rank { color: #b87333; }

.comic { max-width: 100%; height: auto; }
.comic-nav { display: flex; align-items: center; gap: .75rem; }

/* Admin */
.admin-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #fff; border: 1px solid #e3e6eb; border-left: 4px solid var(--hfhl-red); border-radius: .4rem; padding: .4rem .75rem; margin-bottom: 1rem; }
.admin-bar .admin-home { font-weight: 700; color: var(--hfhl-navy); text-decoration: none; }
.admin-bar .nav-link { padding: .3rem .7rem; }
.admin-bar { align-items: flex-start; }
.admin-bar .admin-home { padding-top: .3rem; }
.admin-groups { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: .35rem; flex: 1; min-width: 0; }
.admin-group { display: flex; align-items: center; gap: .15rem; padding-left: .75rem; border-left: 1px solid #e3e6eb; }
.admin-group-label { font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #6b7280; margin-right: .2rem; white-space: nowrap; }
@media (max-width: 767.98px) {
    .admin-groups { flex-basis: 100%; }
    .admin-group { flex-wrap: wrap; padding-left: 0; border-left: 0; width: 100%; }
    .admin-group-label { width: 100%; }
}
.admin-form { max-width: 44rem; }
.draft-order { list-style: none; padding: 0; margin: 0 0 .25rem; max-width: 30rem; }
.draft-order li { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; margin-bottom: .3rem; background: #fff; border: 1px solid #e3e6eb; border-radius: .3rem; cursor: grab; }
.draft-order li.dragging { opacity: .5; border-style: dashed; }
.draft-order .slot { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--hfhl-navy); color: #fff; font-weight: 700; font-size: .85rem; }
.draft-order .drag-handle { color: #9ca3af; font-size: 1.1rem; line-height: 1; }
.draft-order .team { font-weight: 600; }
.draft-order .captain { flex: 1; }
.draft-order .moves { display: flex; gap: .25rem; }
.draft-order .moves .btn { padding: .05rem .45rem; line-height: 1.2; }
.admin-form .form-label { font-weight: 600; margin-bottom: .2rem; }
.admin-form .form-text { margin-top: .1rem; }
.admin-logo { max-height: 48px; max-width: 80px; object-fit: contain; }
.admin-photo { max-height: 90px; max-width: 80px; object-fit: cover; border-radius: .2rem; }
table.stats td.actions { white-space: nowrap; text-align: right; }
table.stats td form { display: inline; }
.inline-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.danger-zone { border-top: 4px solid var(--hfhl-red); }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; border: 1px solid #dee2e6; border-bottom: 0; border-radius: .375rem .375rem 0 0; background: #f8f9fa; }
.rte-toolbar[hidden] { display: none; }
.rte-toolbar + .rte-area, .rte-toolbar ~ .rte-source { border-top-left-radius: 0; border-top-right-radius: 0; }
.rte-area { min-height: 14rem; max-height: 32rem; overflow-y: auto; }
.rte-area img { max-width: 100%; height: auto; }
.rte-source { font-family: var(--bs-font-monospace); font-size: .85rem; }
.rte-area.rte-document { min-height: 24rem; max-height: 75vh; }
textarea.rte-document { min-height: 24rem; }

/* Admin-edited pages (Rules): headings, FAQ questions (a paragraph that's all italics) and the contents list. */
.site-page h2 { font-size: 1.45rem; margin: 1.75rem 0 .75rem; padding-bottom: .25rem; border-bottom: 1px solid #dee2e6; }
.site-page h2:first-child { margin-top: 0; }
.site-page h3 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.site-page h4 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; color: #4b5563; }
.site-page h5 { font-size: 1rem; font-style: italic; margin: 1rem 0 .4rem; color: #4b5563; }
.site-page p:has(> em:only-child) { font-weight: 600; margin: 1.1rem 0 .3rem; }
.site-page small { color: #6b7280; }
.site-page [id] { scroll-margin-top: 1rem; }
.page-toc summary { font-weight: 600; cursor: pointer; }
.page-toc li { margin: .15rem 0; }
.page-toc .toc-level-3 { padding-left: .9rem; font-size: .92rem; }
.page-toc .toc-level-4 { padding-left: 1.8rem; font-size: .88rem; }
@media (min-width: 992px) { .page-toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } }
.admin-news-photo { max-width: 240px; max-height: 160px; object-fit: contain; }

/* The draft board (/draft): the pick on the clock, and the viewing captain's own team. */
.draft-board td { min-width: 8rem; vertical-align: top; }
.draft-board td.draft-clock { background: #fff4cc; box-shadow: inset 0 0 0 2px #e0a800; }
.draft-board .draft-mine { background: #eaf3ff; }

/* The new-season steps (/admin/seasons/new). */
.wizard-steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 .75rem; font-size: .85rem; }
.wizard-steps li { padding: .25rem .6rem; border-radius: 1rem; background: #eef1f5; color: #6b7280; }
.wizard-steps li.done { background: #e2ecf9; color: #1f3b63; }
.wizard-steps li.current { background: var(--hfhl-navy); color: #fff; font-weight: 600; }
.admin-form.wide { max-width: 60rem; }
.milestone-list { list-style: none; padding: 0; margin: 0 0 .25rem; }
.milestone-list li { padding: .15rem 0; border-bottom: 1px solid #f0f2f5; font-size: .9rem; }
.milestone-list li:last-child { border-bottom: 0; }
/* Home page: story, sidebar, then headlines and milestones; on wide screens the sidebar spans beside both. */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; }
@media (min-width: 992px) {
    .home-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "story side" "under side"; align-items: start; }
    .home-story { grid-area: story; }
    .home-side { grid-area: side; }
    .home-under { grid-area: under; }
}

/* Admin → Audit: the days beside the day's actions on wide screens, above them on narrow ones. */
.audit-layout { display: grid; gap: 1rem; }
@media (min-width: 992px) { .audit-layout { grid-template-columns: 14rem 1fr; align-items: start; } .audit-days { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } }
.audit-month { font-size: .8rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; margin-top: .25rem; }
.audit-action { overflow-x: auto; }
.audit-failed { border-color: #f1aeb5; }
.audit-lines td { vertical-align: top; }
.audit-lines td:nth-child(4) { min-width: 16rem; }
.audit-fields li { overflow-wrap: anywhere; }
.audit-old { color: #6b7280; text-decoration: line-through; }

/* Tick boxes and radio buttons: Bootstrap's light grey border all but disappears on the white panels (the commissioner
   couldn't see Undo this trade's box, 2026-10-03), so they get a darker one and a little more size. */
.form-check-input { border: 1.5px solid #6b7280; width: 1.15em; height: 1.15em; margin-top: .2em; }
.form-check-input:checked { border-color: var(--bs-primary, #0d6efd); }
.form-check-input:focus { border-color: #4b5563; }
.form-check-label { cursor: pointer; }

/* Admin → Rules → what changed: added text green, removed struck through in red, like a wiki's history. */
.diff-added { background: #dcfce7; color: #14532d; text-decoration: none; border-radius: 2px; }
.diff-removed { background: #fee2e2; color: #7f1d1d; text-decoration: line-through; border-radius: 2px; }
.diff-block { padding: .2rem 0 .2rem 1.4rem; position: relative; overflow-wrap: anywhere; }
.diff-mark { position: absolute; left: 0; width: 1.1rem; text-align: center; color: #6b7280; font-weight: 700; }
.diff-same { color: #6b7280; }
.diff-heading { font-weight: 700; }
.diff-li { padding-left: 2.4rem; }
.diff-li .diff-mark { left: 1rem; }
.diff-gap { color: #9ca3af; padding-left: 1.4rem; }
.diff-section { font-size: .8rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; margin-top: .6rem; }
.rule-changes li + li { margin-top: .25rem; }