/*
 * The site's look, on top of Pico (vendor/) and site.css: a hockey telecast's graphics with the rink's own markings.
 * A navy network bar edged with the red and blue lines, a title band with centre ice drawn on it, condensed uppercase
 * type (Saira Condensed) over Source Sans 3, both served from fonts/, goal-light red for what's live, crease blue for
 * what's yours, faceoff dots as markers, and panels with the boards' rounded corners. Dense, aligned tables with navy
 * headings.
 *
 * Light only for now. Every rule starts with :root[data-theme="light"] (set on <html>), which keeps Pico on its light
 * colours whatever the device prefers and outranks Pico's own rules.
 */
:root[data-theme="light"] {
  --bc-navy: #0b1b2f;
  --bc-navy-2: #10294a;
  --bc-steel: #1c4475;
  --bc-red: #d01c3a;
  --bc-red-dark: #a9132d;
  --bc-blue: #2f6fd6;
  --bc-blue-line: rgba(95, 150, 240, 0.38);
  --bc-crease: #dcebfa;
  --bc-ice: #edf1f5;
  --bc-white: #ffffff;
  --bc-ink: #0f1a28;
  --bc-muted: #5a6a7d;
  --bc-line: #d6dee7;
  --bc-corner: 14px;
  --bc-dot: radial-gradient(circle, var(--bc-red) 0 30%, transparent 31% 56%, var(--bc-red) 57% 70%, transparent 71%);
  --bc-display: "Saira Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --bc-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
  /* A steady 16px base, instead of Pico's type that grows to 20px on wide screens. */
  --pico-font-size: 100%;
  --pico-line-height: 1.5;
  --pico-spacing: 1rem;
  --pico-typography-spacing-vertical: 1rem;
  --pico-block-spacing-vertical: 1.25rem;
  --pico-block-spacing-horizontal: 1.25rem;
  --pico-form-element-spacing-vertical: 0.55rem;
  --pico-form-element-spacing-horizontal: 0.8rem;
  --pico-nav-element-spacing-vertical: 0.75rem;
  --pico-nav-link-spacing-vertical: 0.4rem;

  --pico-font-family: var(--bc-body);
  --pico-background-color: var(--bc-ice);
  --pico-color: var(--bc-ink);
  --pico-text-selection-color: rgba(208, 28, 58, 0.18);
  --pico-muted-color: var(--bc-muted);
  --pico-muted-border-color: var(--bc-line);
  --pico-primary: var(--bc-steel);
  --pico-primary-background: var(--bc-red);
  --pico-primary-border: var(--bc-red);
  --pico-primary-underline: rgba(28, 68, 117, 0.35);
  --pico-primary-hover: var(--bc-navy);
  --pico-primary-hover-background: var(--bc-red-dark);
  --pico-primary-hover-border: var(--bc-red-dark);
  --pico-primary-hover-underline: var(--bc-navy);
  --pico-primary-focus: rgba(208, 28, 58, 0.25);
  --pico-primary-inverse: #fff;
  --pico-secondary: var(--bc-steel);
  --pico-secondary-background: var(--bc-navy-2);
  --pico-secondary-border: var(--bc-navy-2);
  --pico-secondary-underline: rgba(28, 68, 117, 0.35);
  --pico-secondary-hover: var(--bc-navy);
  --pico-secondary-hover-background: var(--bc-navy);
  --pico-secondary-hover-border: var(--bc-navy);
  --pico-secondary-focus: rgba(28, 68, 117, 0.25);
  --pico-secondary-inverse: #fff;
  --pico-contrast: var(--bc-navy);
  --pico-contrast-background: var(--bc-navy);
  --pico-contrast-inverse: #fff;
  --pico-box-shadow: 0 1px 2px rgba(11, 27, 47, 0.06), 0 8px 22px rgba(11, 27, 47, 0.06);
  --pico-h1-color: var(--bc-ink);
  --pico-h2-color: var(--bc-ink);
  --pico-h3-color: var(--bc-ink);
  --pico-h4-color: var(--bc-ink);
  --pico-mark-background-color: var(--bc-crease);
  --pico-mark-color: var(--bc-ink);
  --pico-ins-color: #11804d;
  --pico-del-color: var(--bc-red);
  --pico-table-border-color: var(--bc-line);
  --pico-table-row-stripped-background-color: #f6f8fb;
  --pico-code-background-color: #e7edf3;
  --pico-code-color: var(--bc-ink);
  --pico-form-element-background-color: var(--bc-white);
  --pico-form-element-selected-background-color: #dde5ee;
  --pico-form-element-border-color: #c6d0dc;
  --pico-form-element-color: var(--bc-ink);
  --pico-form-element-placeholder-color: #8492a3;
  --pico-form-element-active-background-color: var(--bc-white);
  --pico-form-element-active-border-color: var(--bc-steel);
  --pico-form-element-focus-color: rgba(28, 68, 117, 0.35);
  --pico-switch-background-color: #c3ccd7;
  --pico-switch-color: #fff;
  --pico-accordion-border-color: var(--bc-line);
  --pico-accordion-active-summary-color: var(--bc-red);
  --pico-accordion-close-summary-color: var(--bc-ink);
  --pico-accordion-open-summary-color: var(--bc-ink);
  --pico-card-background-color: var(--bc-white);
  --pico-card-border-color: var(--bc-line);
  --pico-card-box-shadow: var(--pico-box-shadow);
  --pico-card-sectioning-background-color: #f6f8fb;
  --pico-dropdown-background-color: var(--bc-white);
  --pico-dropdown-border-color: var(--bc-line);
  --pico-dropdown-color: var(--bc-ink);
  --pico-dropdown-hover-background-color: #eef2f6;
  --pico-border-radius: 3px;
}
:root[data-theme="light"] body { overflow-x: clip; }
:root[data-theme="light"] .container { max-width: 1180px; }
:root[data-theme="light"] body > main { padding-block: 1.75rem 4rem; }

/* Full-width bands: an element keeps its place in the page, and a pseudo-element paints the band edge to edge. */
:root[data-theme="light"] body > header,
:root[data-theme="light"] .league-header,
:root[data-theme="light"] nav.tabs,
:root[data-theme="light"] body > footer,
:root[data-theme="light"] .hero:first-child { position: relative; isolation: isolate; }
:root[data-theme="light"] body > header::before,
:root[data-theme="light"] .league-header::before,
:root[data-theme="light"] nav.tabs::before,
:root[data-theme="light"] body > footer::before,
:root[data-theme="light"] .hero:first-child::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; }

/* Network bar, its bottom edge the goal line in red, a strip of ice, then the blue line. Above the title band. */
:root[data-theme="light"] body > header { padding-block: 0; z-index: 1; }
:root[data-theme="light"] body > header::before { background: var(--bc-navy); border-bottom: 3px solid var(--bc-red); box-shadow: 0 3px 0 #fff, 0 6px 0 var(--bc-blue); }
:root[data-theme="light"] body > header nav { min-height: 3.6rem; }
:root[data-theme="light"] body > header a { color: #dfe7f1; font: 600 0.95rem/1 var(--bc-display); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
:root[data-theme="light"] body > header a:hover { color: #fff; }
:root[data-theme="light"] .brand strong { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; font: 800 1.25rem/1 var(--bc-display); letter-spacing: 0.04em; }
:root[data-theme="light"] .brand strong::before { content: ""; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bc-dot); }
:root[data-theme="light"] body > header [role="button"],
:root[data-theme="light"] body > header button { padding: 0.5rem 0.95rem; border-radius: 2px; font: 700 0.85rem/1 var(--bc-display); letter-spacing: 0.08em; text-transform: uppercase; }
:root[data-theme="light"] body > header [role="button"].outline { background: var(--bc-red); border-color: var(--bc-red); color: #fff; }
:root[data-theme="light"] body > header button.outline { background: transparent; color: #dfe7f1; border-color: rgba(223, 231, 241, 0.35); }
:root[data-theme="light"] body > header button.outline:hover { border-color: #fff; color: #fff; }

/* Type: condensed uppercase headings, faceoff dots as section markers. */
:root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3 { font-family: var(--bc-display); text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; }
:root[data-theme="light"] h1 { font-weight: 800; --pico-font-size: 2.5rem; --pico-typography-spacing-top: 1.5rem; line-height: 1; }
:root[data-theme="light"] h2 { font-weight: 700; --pico-font-size: 1.45rem; --pico-typography-spacing-top: 1.75rem; display: flex; align-items: center; gap: 0.55rem; }
:root[data-theme="light"] main h2::before { content: ""; flex: none; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--bc-dot); }
:root[data-theme="light"] .section-head h2, :root[data-theme="light"] .hero h2 { display: flex; }
:root[data-theme="light"] .hero h2::before { display: none; }
:root[data-theme="light"] h3 { font-weight: 700; --pico-font-size: 1.12rem; letter-spacing: 0.04em; }
:root[data-theme="light"] .kicker { font: 700 0.85rem/1.2 var(--bc-display); letter-spacing: 0.14em; color: var(--bc-red); }
:root[data-theme="light"] a { text-underline-offset: 0.18em; }
:root[data-theme="light"] abbr[title] { text-decoration: none; cursor: help; }

/*
 * League title band, with centre ice drawn on the right as a telecast's rink graphic would. The band reaches 100vmax
 * past the page on both sides, so positions count back from the page's right edge (100% - 100vmax).
 */
:root[data-theme="light"] .league-header { margin-top: -1.75rem; margin-bottom: 0; padding-block: 1.9rem 1.5rem; color: #fff; }
:root[data-theme="light"] .league-header::before {
  --centre: calc(100% - 100vmax - 8rem);
  background:
    radial-gradient(circle at var(--centre) 50%, var(--bc-blue-line) 0 0.4rem, transparent 0.45rem),
    radial-gradient(circle at var(--centre) 50%, transparent 0 4.6rem, rgba(255, 255, 255, 0.16) 4.6rem 4.8rem, transparent 4.8rem),
    linear-gradient(90deg, transparent calc(var(--centre) - 3px), rgba(208, 28, 58, 0.6) calc(var(--centre) - 3px) calc(var(--centre) + 3px), transparent calc(var(--centre) + 3px)),
    linear-gradient(90deg, transparent calc(var(--centre) - 12rem), var(--bc-blue-line) calc(var(--centre) - 12rem) calc(var(--centre) - 11.5rem), transparent calc(var(--centre) - 11.5rem)),
    linear-gradient(100deg, var(--bc-navy-2) 0%, var(--bc-steel) 100%);
}
:root[data-theme="light"] .league-header h1 { color: #fff; --pico-font-size: 2.9rem; margin-bottom: 0.45rem; max-width: calc(100% - 22rem); }
:root[data-theme="light"] .league-header p.muted { color: #b8c7da; font: 600 0.92rem/1.3 var(--bc-display); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
@media (max-width: 800px) {
  :root[data-theme="light"] .league-header::before { background: linear-gradient(100deg, var(--bc-navy-2) 0%, var(--bc-steel) 100%); }
  :root[data-theme="light"] .league-header h1 { max-width: none; }
}

/* Tabs: a white bar under the title band. */
:root[data-theme="light"] nav.tabs { margin-bottom: 2rem; padding-bottom: 0; border: 0; gap: 0; }
:root[data-theme="light"] nav.tabs::before { background: var(--bc-white); border-bottom: 1px solid var(--bc-line); box-shadow: 0 6px 16px rgba(11, 27, 47, 0.05); }
:root[data-theme="light"] nav.tabs a { padding: 1rem 1.15rem 0.85rem; border-bottom: 3px solid transparent; color: var(--bc-muted); font: 700 0.95rem/1 var(--bc-display); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
:root[data-theme="light"] nav.tabs a:first-child { padding-left: 0; }
:root[data-theme="light"] nav.tabs a:hover { color: var(--bc-ink); }
:root[data-theme="light"] nav.tabs a[aria-current="page"] { color: var(--bc-ink); border-bottom-color: var(--bc-red); text-decoration: none; font-weight: 800; }

/* Panels: the boards' rounded corners. The pick on the clock gets the goal light. */
:root[data-theme="light"] article { border: 1px solid var(--bc-line); border-top: 3px solid var(--bc-navy); border-radius: var(--bc-corner); }
:root[data-theme="light"] article.on-the-clock { border-left: 6px solid var(--bc-red); border-top-color: var(--bc-line); border-top-width: 1px; }
:root[data-theme="light"] .on-the-clock > p:first-child { font: 700 1.15rem/1.3 var(--bc-display); letter-spacing: 0.04em; text-transform: uppercase; }
:root[data-theme="light"] .on-the-clock strong { color: var(--bc-red); }
:root[data-theme="light"] .clock { display: inline-block; padding: 0.1rem 0.7rem; background: var(--bc-navy); color: #fff; border-radius: 999px; font: 700 1.15rem/1.3 var(--bc-display); letter-spacing: 0.06em; }
:root[data-theme="light"] .flash { background: var(--bc-navy-2); color: #fff; border-radius: var(--bc-corner); border-left: 5px solid var(--bc-red); }

/* Tables: compact rows, navy headings over the blue line, numbers that line up, crease blue for your row. */
:root[data-theme="light"] table { --pico-background-color: var(--bc-white); border: 1px solid var(--bc-line); font-size: 0.94rem; }
:root[data-theme="light"] th, :root[data-theme="light"] td { padding: 0.55rem 0.7rem; }
:root[data-theme="light"] thead th { background: var(--bc-navy); color: #d9e3ee; border-bottom: 0; font: 700 0.8rem/1.1 var(--bc-display); letter-spacing: 0.1em; text-transform: uppercase; vertical-align: bottom; white-space: nowrap; padding-block: 0.65rem; }
:root[data-theme="light"] thead tr:last-child th { box-shadow: inset 0 -3px 0 var(--bc-blue); }
:root[data-theme="light"] thead th abbr { color: inherit; }
:root[data-theme="light"] .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-theme="light"] td.num { font: 600 1.02rem/1.2 var(--bc-display); letter-spacing: 0.02em; }
:root[data-theme="light"] td.num strong, :root[data-theme="light"] td strong { font-weight: 800; }
:root[data-theme="light"] tr.yours td { background: var(--bc-crease); color: var(--bc-ink); }
:root[data-theme="light"] tr.yours td:first-child { box-shadow: inset 4px 0 0 var(--bc-blue); }
:root[data-theme="light"] .scroll { margin-bottom: 1.5rem; border: 1px solid var(--bc-line); border-radius: var(--bc-corner); box-shadow: var(--pico-box-shadow); }
:root[data-theme="light"] .scroll table { margin-bottom: 0; border: 0; }
/* Player names stay on one line, with position and team underneath. */
:root[data-theme="light"] td:first-child > a { white-space: nowrap; font-weight: 600; text-decoration: none; color: var(--bc-ink); }
:root[data-theme="light"] td:first-child > a:hover { color: var(--bc-steel); text-decoration: underline; }
:root[data-theme="light"] td:first-child > small { display: block; margin-top: 0.1rem; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; }
:root[data-theme="light"] td button, :root[data-theme="light"] td [role="button"] { padding: 0.3rem 0.7rem; font-size: 0.82rem; margin: 0; }
:root[data-theme="light"] td.actions form + form { margin-left: 0.3rem; }
:root[data-theme="light"] .movement { font: 700 0.85rem/1 var(--bc-display); }
:root[data-theme="light"] details.team summary { font: 700 1.05rem/1.2 var(--bc-display); letter-spacing: 0.04em; text-transform: uppercase; }

/* Buttons and forms */
:root[data-theme="light"] button, :root[data-theme="light"] [role="button"] { border-radius: 2px; font-family: var(--bc-display); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
:root[data-theme="light"] button.outline.secondary, :root[data-theme="light"] [role="button"].outline { background: var(--bc-white); color: var(--bc-navy-2); border-color: #b9c6d4; }
:root[data-theme="light"] button.outline.secondary:hover, :root[data-theme="light"] [role="button"].outline:hover { border-color: var(--bc-navy-2); background: #f3f6f9; }
:root[data-theme="light"] td button.outline, :root[data-theme="light"] td .outline { color: var(--bc-steel); }
:root[data-theme="light"] .filters > * { margin-bottom: 0; }
:root[data-theme="light"] .filters button { padding-inline: 1.1rem; }

/* Draft room: the player list gets the room, the sidebar a fixed width. */
:root[data-theme="light"] .draft-grid { gap: 2rem; }
@media (min-width: 1024px) { :root[data-theme="light"] .draft-grid { grid-template-columns: minmax(0, 1fr) 20rem; } }
:root[data-theme="light"] .draft-grid aside ol, :root[data-theme="light"] .draft-grid aside ul { padding-left: 1.1rem; }
:root[data-theme="light"] .draft-grid aside li { margin-bottom: 0.35rem; }

/* Landing: a banner with the centre of the rink drawn on it (no centre dot: the text sits there). */
:root[data-theme="light"] section { margin-bottom: 2.75rem; }
:root[data-theme="light"] .hero:first-child { margin-top: -1.75rem; padding-block: 4rem 3.25rem; color: #fff; }
:root[data-theme="light"] .hero:first-child::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 9rem, rgba(255, 255, 255, 0.13) 9rem 9.25rem, transparent 9.25rem),
    linear-gradient(90deg, transparent calc(50% - 3px), rgba(208, 28, 58, 0.5) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(90deg, transparent calc(50% - 27rem), var(--bc-blue-line) calc(50% - 27rem) calc(50% - 26.4rem), transparent calc(50% - 26.4rem) calc(50% + 26.4rem), var(--bc-blue-line) calc(50% + 26.4rem) calc(50% + 27rem), transparent calc(50% + 27rem)),
    linear-gradient(100deg, rgba(11, 27, 47, 0.98) 35%, rgba(16, 41, 74, 0.94));
}
:root[data-theme="light"] .hero h1 { --pico-font-size: clamp(2.3rem, 5.5vw, 3.6rem); }
:root[data-theme="light"] .hero:first-child h1 { color: #fff; max-width: 22ch; margin-inline: auto; }
:root[data-theme="light"] .hero .lead { font-size: 1.15rem; }
:root[data-theme="light"] .hero:first-child p { color: #c9d6e5; }
:root[data-theme="light"] .hero:first-child a:not([role="button"]) { color: #fff; }
:root[data-theme="light"] .hero:first-child .kicker { color: #ff8095; }
:root[data-theme="light"] .cta { padding: 0.95rem 2.3rem; font-size: 1.15rem; }
:root[data-theme="light"] .features article { border-top-color: var(--bc-red); }
:root[data-theme="light"] .features h3 { --pico-font-size: 1.15rem; }

/* Home for a signed-in commissioner: big cards, the commissioner's in the title band's navy with centre ice. */
:root[data-theme="light"] .choice {
  min-height: 14rem; padding: 1.75rem 2rem; color: var(--bc-muted);
  background: var(--bc-white); border: 1px solid var(--bc-line); border-top: 4px solid var(--bc-blue); border-radius: var(--bc-corner);
  box-shadow: var(--pico-box-shadow); transition: transform 0.12s ease, box-shadow 0.12s ease;
}
:root[data-theme="light"] .choice::after { color: var(--bc-red); font: 800 2.2rem/1 var(--bc-display); transition: transform 0.12s ease; }
:root[data-theme="light"] .choice:hover::after { transform: translateX(4px); }
:root[data-theme="light"] .choice:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11, 27, 47, 0.08), 0 16px 32px rgba(11, 27, 47, 0.12); }
:root[data-theme="light"] .choice strong { margin-top: 0.15rem; color: var(--bc-ink); font: 800 2.1rem/1.05 var(--bc-display); letter-spacing: 0.02em; text-transform: uppercase; }
:root[data-theme="light"] .choice .kicker { color: var(--bc-blue); }
:root[data-theme="light"] .choice.commissioner {
  /* Where centre ice is drawn. The red line stops short of the arrow. */
  --ice: calc(100% - 4.5rem);
  color: #c9d6e5; border-color: var(--bc-navy-2); border-top-color: var(--bc-red);
  background:
    radial-gradient(circle at var(--ice) 2.5rem, transparent 0 5rem, rgba(255, 255, 255, 0.14) 5rem 5.2rem, transparent 5.2rem),
    linear-gradient(90deg, transparent calc(var(--ice) - 3px), rgba(208, 28, 58, 0.55) calc(var(--ice) - 3px) calc(var(--ice) + 3px), transparent calc(var(--ice) + 3px))
      0 0 / 100% calc(100% - 4.5rem) no-repeat,
    linear-gradient(120deg, var(--bc-navy-2) 0%, var(--bc-steel) 100%);
}
/* Phones: centre ice moves to the edge, clear of the league's name. */
@media (max-width: 600px) { :root[data-theme="light"] .choice.commissioner { --ice: calc(100% - 1.1rem); } }
:root[data-theme="light"] .choice.commissioner strong { color: #fff; }
:root[data-theme="light"] .choice.commissioner .kicker { color: #ff8095; }

/* Footer bar, with the lines again along its top. */
:root[data-theme="light"] body > footer { padding-top: 1.2rem; color: #a9b8ca; }
:root[data-theme="light"] body > footer::before { background: var(--bc-navy); border-top: 3px solid var(--bc-red); box-shadow: inset 0 3px 0 #fff, inset 0 6px 0 var(--bc-blue); }
:root[data-theme="light"] body > footer a { color: #dfe7f1; }
:root[data-theme="light"] body > footer small { color: #a9b8ca; }

/* Phones: the site name and the menu share one line. Settings drops out of the menu (My leagues links to it). */
@media (max-width: 600px) {
  :root[data-theme="light"] body > header li:has(> a[href="/account/settings"]) { display: none; }
  :root[data-theme="light"] body > header nav { --pico-nav-element-spacing-horizontal: 0.4rem; }
  :root[data-theme="light"] body > header .brand strong { white-space: nowrap; font-size: 1.15rem; }
  :root[data-theme="light"] body > header nav a:not(.brand), :root[data-theme="light"] body > header nav button { white-space: nowrap; font-size: 0.8rem; }
  :root[data-theme="light"] body > header nav [role="button"], :root[data-theme="light"] body > header nav button { padding: 0.42rem 0.7rem; }
}